1.1) 基本の HelloWorld ユーザーコントロールの最新バージョンをこちらからダウンロードし、GeneXus インストールディレクトリーの下にある UserControls ディレクトリーにコピーします。
1.2) User Control Designer (UserControlEditor.exe) を使用して、GeneXus インストールディレクトリーの下にある HelloWorld ユーザーコントロールを開きます。
コントロールを開くと、次のような画面が表示されます:
HelloWorldContainer ユーザーコントロールでは、 [ xsl Designer Render ] タブと [ JScript Runtime Render ] タブだけで変更が必要です。ほかのタブの設定を変更する必要はありません。
2) コンテナ領域の定義
2.1) [ xsl Designer Render ] タブを開き、以下のコードを探します:
<!-- HelloWorld design render -->
<!-- /////////////////// Implement your render here ///////////////////-->
<xsl:template name="RenderHelloWorld">
<table cellSpacing="0" cellPadding="0" background="">
<xsl:call-template name="AddTableStyleAttribute"/>
<tbody>
<tr>
<td>
<span>
<xsl:call-template name="AddHelloWorldStyleAttribute"/>
Hello World Container
</span>
</td>
</tr>
</tbody>
</table>
</xsl:template>
2.2) 上記のコードを、以下のコードで置き換えます:
<!-- HelloWorldContainer design render -->
<!-- /////////////////// Implement your render here ///////////////////-->
<xsl:template name="RenderHelloWorld">
<table cellSpacing="0" cellPadding="0" background="">
<xsl:call-template name="AddTableStyleAttribute"/>
<tbody>
<tr>
<td>
<span>
<xsl:call-template name="AddHelloWorldStyleAttribute"/>
Hello World Container
</span>
</td>
</tr>
<tr>
<td containerId="Container1">
</td>
</tr>
</tbody>
</table>
</xsl:template>
上記のコードによって、コントロールの設計レンダリングに使用するテーブルが作成されます。ここまでに説明したように、テーブルの行は、「Hello World Container」というテキストの配置に使用する行と、コンテナ領域に使用する行の 2 つだけです。続いて、コンテナ領域を定義する場所について説明します。
コンテナ領域を定義するには、任意の HTML タグに ContainerId 項目属性とその値を追加します。この後、GeneXus を起動して HelloWorld コントロールを使用すると、以前に描画したテーブルでコンテナ領域として定義された 2 行目に、コントロールをドロップできるようになります。
次に、指定した ContainerId 値を使用して、実行時にコンテナの内容を取得します。コンテナ領域はいくつでも定義できますが、各領域を識別するためには異なる ContainerId 値を使用する必要があります。
3) 実行時にコンテナ領域の内容を取得
3.1) [ Jscript Runtime Render ] タブを開きます。
3.2) Show メソッドを、以下のコードで置き換えます:
this.show = function()
{
///UserCodeRegionStart:show (このコメントを削除しないでください。)
var buffer="<table width=" + this.Width + " height=" + this.Height + " border=1>";
buffer+="<tr><td>";
buffer+= '<a id="hworld1" href="#" style="color:rgb(' + this.FontColor.R + ',' + this.FontColor.G + ',' + this.FontColor.B + ')' + '; font-family:'+ this.FontFace+ ';font-size:'+ this.FontSize + 'pt;">Hello World!!!</a>';
buffer+="</tr></td>";
buffer+="<tr><td id='UCrowContainer1'></tr></td>";
buffer+="</table>";
this.setHtml(buffer);
var childContainer = this.getChildContainer("Container1");
gx.fn.setVisible(childContainer,1);
gx.dom.el('
UCrowContainer1').appendChild(childContainer);
document.getElementById("hworld1").onclick = this.HelloWorldContainerClicked;
///UserCodeRegionEnd: (このコメントを削除しないでください。)
}
this.getChildContainer("Container1") は、Container1 のコンテンツを取得するために使用されています。 したがって、ユーザーがコントロール内で定義するコンテナ領域の HTML のコンテンツを取得するには、この関数を使用します。
Container1 の中のコンテンツは開始時には表示されないので、表示されるように設定する必要があります。そこで、Container1 の中のコンテンツを、選択した HTML コントロール内に移動します。この例では、UC Main コンテナの中です。
this.getChildContainer(<ContainerId>)
this.getChildContainer は親クラス内に定義されているため、ユーザーが定義する必要はありません。
4) 実行
4.1) GeneXus を開きます。
4.2) Web パネルに HelloWorld ユーザーコントロールをドロップし、コンテナ領域にいくつかのコントロールをドロップします。
4.3) 実行します。
ダウンロード
こちらをクリックしてサンプルをダウンロードしてください。