ベースの Javascript をできる限り 1 つ以上のベース Javascript に含め、GeneXus でベースライブラリを使用して、これらのファイルを指定することをお勧めします。こうすることで、Web Panel オブジェクトでユーザーコントロールを使用するたびにファイルが自動的に追加されます。
Javascript コードは、コントロールの表示前に含める場合と、コントロールの表示後に含める場合があります。これを GeneXus で実現するには、ユーザー コントロール オブジェクトの [ プロパティ ] タブで Script タグを使用します。
コントロールに以下のマークアップのレンダリングを作成するとします:
<div class="ui-widget">
<label for="tags">Tags:
</label> <input id="tags">
</div>
その後、次のスクリプトを実行するとします:
$("#tags").autocomplete({
source: availableTags});
このようなコントロールを作成できるように、GeneXus のユーザーコントロールでは、 [ プロパティ ] タブで Script タグを宣言できます。そこで、ユーザー コントロール オブジェクトの [ プロパティ ] タブで以下のように定義します:
<Script Name="Autocomplete" When="AfterShow">
$("#tags").autocomplete({ source: availableTags});
</Script>
スクリプトを実行するタイミングによって、 [ When ] プロパティの値は以下のいずれかになります:
- AfterShow: スクリプトは、コントロールがページにレンダリングされた後に実行されます。
- BeforeShow: スクリプトは、コントロールがページにレンダリングされる前に実行されます。この段階で Document オブジェクトモデル (DOM) は変更できません。
また、ユーザー コントロール オブジェクトは、パブリックメソッドとプライベートメソッドの両方に対応しています。パブリックメソッドはコードから呼び出すことができるもの、プライベートメソッドは定義して生成するものです。
スクリプトに [ When ] プロパティがなかった場合は、パブリックメソッドになります:
<script Name = "MyMethod" Parameters = "myparm, otroparm">
alert (myparm + otroparm);
</ script>
注:
- return があるメソッドはサポートされていません。この問題を解決するには、プロパティを使用してそこで割り当ててから参照できます。
- 指定子によるタイプのチェックはないため、Parameters は単なるパラメーター名のリストです。
プライベートメソッドを定義する場合は、次のようにスクリプト名の前に「_」を付けます:
<script Name = "_ myPrivateMethod"> ....
ほかの場所で値を保持している複雑なコントロールをベースとしている場合、{{DataElement}} を使用して、コントロールの値を保持している DOM のエレメントを指定するだけでは不十分であることがあります。
このような場合は、コントロールに対するデータの設定と取得の操作に関与できる方法があります。GeneXus でコントロールに値が割り当てられるときにも、GeneXus でコントロールの値が取得されるときにも関与できます。
この場合、When="beforegetdata" と When="beforesetdata" の Script タグを定義できます。
Ace Editor に基づくコントロールの例を以下に示します。
最初に AceEditorControl を定義し、IsControlType=true、DataTypeFilter=varchar,longvarchar,character の各プロパティを設定します。これで、AceEditorControl が VarChar、LongVarChar、Character の項目属性と変数のコントロールタイプとして選択可能と定義されます。
問題は、AceEditorControl が値を HTML DOM に保持しないことです。このため、 [ プロパティ ] タブで次のように Script タグを定義する追加の作業が発生します:
<Definition auto="false">
<Property Name="Width" Type="Numeric" Default="600"/>
<Property Name="Height" Type="Numeric" Default="400"/>
<script Name="GetValue" When="BeforeGetData">
return this.myEditor.getValue();
</script>
<script Name="SetValue" When="BeforeSetData">
if (this.myEditor)
this.myEditor.setValue(value);
</script>
<script Name="Show" When="AfterShow">
this.myEditor = ace.edit("aceeditor");
this.myEditor.setOptions({
theme: "ace/theme/xcode",
autoScrollEditorIntoView: true,
maxLines: Math.trunc(($(window).height()-60)/16),
minLines: Math.trunc(($(window).height()-60)/16),
mode: "ace/mode/javascript"
});
this.myEditor.setValue(value);
</script>
</Definition>
|