GeneXus Markup Language (GXML)

GeneXus Markup Language (GXML) は、GeneXus のレイアウトを記述するための XML に似た記述型言語です。
GeneXus はドラッグアンドドロップ方式を採用し、ユーザーがアプリケーションのデザイン方法を簡単に理解できるようになっています。コンポーネントを抽象的に表現でき、コード行を意識する必要はありません。GXML の構文は、関心のあるユーザーにとってシンプルであることを目指し、アプリケーションのユーザーインターフェースを宣言できるビュー、コントロール、レイアウトの構造が用意されています。ここでは、GeneXus オブジェクトを別の視点から分析したいユーザーのためのガイドラインを示します。

概要

GXML は、Panel、Stencil、Master Panel オブジェクトなどの GeneXus オブジェクトのレイアウトを定義するための標準です。このフォーマットの目的は、意味があり、人間と機械の両方にとって読みやすい方法でコンテンツを構造化することです。マークアップ言語であるという事実は、レイアウトをどのように視覚的に表現するかに焦点を当てるのではなく、レイアウトの構造と意味を記述するためにタグを使用することを意味します。このように、ユーザーインターフェースを抽象的に表現することの主な利点は以下のとおりです:

構造: コンテンツを論理的なセクションに整理し、ユーザーインターフェースがどのように定義されているかを理解しやすくします。
アクセシビリティ: スクリーンリーダーやその他の支援技術がコンテンツを解釈できるように、セマンティック要素を使用します。
クロスプラットフォーム: ターゲットプラットフォームにとらわれず、一貫したユーザーエクスペリエンスを保証することで、ユーザーインターフェースロジックをカプセル化します。

GXML ドキュメントの構造は、タグで表される一連のエレメントで構成されます。エレメント間の関係は、そのネストによって定義され、階層構造になります。他のエレメントを含むエレメントは「親」と呼ばれ、含まれるエレメントは「子」と呼ばれ、同じ階層にあるエレメントは「兄弟」と呼ばれます。
たとえば、以下のレイアウトと GXML ドキュメントは等価です:

  <panel id="D034848F-DB64-4622-88CD-F93EF77DFC03"
         name="MyPanel">
    <smart name="MyPanel" 
           width="100%" 
           height="219px" 
           columnsStyle="100%" 
           rowsStyle="128px;91px"
           class="my-panel-class">
      <tr height="128px">
        <td class="table-cell"
            hAlign="Left"
            vAlign="Top">
          <smart name="MyTable"
                 class="table-class" 
                 width="189px"
                 height="24px"
                 columnsStyle="165px;24px"
                 rowsStyle="24px">
            <tr height="24px">
              <td class="table-cell"
                  hAlign="Left"
                  vAlign="Top">
                <input attribute="&amp;MyInputText"
                       class="edit-class"
                       labelPosition="None"
                       inviteMessage="Placeholder...."
                       readonly="False"/>
              </td>
              <td class="table-cell"
                  hAlign="Right"
                  vAlign="Middle">
                <img name="MyUserIcon"
                       class="image-class"
                       Image="UserIcon" />
              </td>
            </tr>
          </smart>
        </td>
      </tr>
      <tr height="91px">
        <td class="table-cell" 
            hAlign="Left"
            vAlign="Top">
          <action controlName="MyButton"
                  onClickEvent="'MyButton'"
                  caption="Click me!"
                  class="button-class" />
        </td>
      </tr>
    </smart>
  </panel>

ルートエレメント

`<panel>`

Panel オブジェクト、Web Panel オブジェクト、Master Panel オブジェクトのレイアウト定義の開始を記述します。

使用できる親:	なし
使用できるコンテンツ:	レイアウトエレメント (`<view>`)。
使用できる項目属性:
id	文字列一意の識別子。
description	文字列\| オプション短いデスクリプション。

レイアウトエレメント

`<view>`

パネル内の複数のレイアウトまたは Web レイアウトを定義するときに、特定のレイアウトを記述します。

使用できる親:	パネルエレメント (`<panel>`)。
使用できるコンテンツ:	任意のコンテナエレメント。
使用できる項目属性:
platform	文字列\| 既定値: any ターゲットプラットフォーム。値: any、android、ios、web。
device	文字列\| 既定値: any ターゲットデバイス。値: any、tablet or phone、tv、watch。
size	文字列\| 既定値: any ターゲットサイズ。値: any、small、medium、large。
orientation	文字列\| 既定値: any ターゲットとする向き。値: any、landscape、 portrait。

コンテナエレメント

`<canvas>`

キャンバスコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	任意のコントロールまたはコンテナエレメント。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。
width	文字列コントロールの幅 (px、dip、または % で表現)。
height	文字列コントロールの高さ (px、dip、または % で表現)。
isSlot	文字列\| 既定値: false コンテナがスロットかどうかを定義します。値: false、true。
background	文字列背景画像オブジェクトのフルネーム。注: これは、非 Web レイアウトのコンテキストのみに適用されます。

`<flex>`

Flex コントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	任意のコントロールまたはコンテナエレメント。
使用できる項目属性:	`<canvas>` エレメントの項目属性を拡張します。
flexDirection	文字列\| 既定値: row 主軸を設定し、Flex コンテナ内の Flex アイテムの配置方向を定義します。値: row、row-reverse、column、column-reverse。
flexWrap	文字列\| 既定値: nowrap Flex コンテナが 1 行か複数行か、および交差軸の方向を制御します。値: nowrap、wrap、wrap-reverse。
justifyContent	文字列\| 既定値: flex-start 主軸に沿った揃え位置を定義します。値: flex-start、flex-end、center、 space-around、space-between。
alignItems	文字列\| 既定値: stretch Flex アイテムを現在のライン上で交差軸に沿ってレイアウトする既定の動作を定義します。値: stretch、flex-start、flex-end、 center、baseline。

`<responsive>`

Responsive Table コントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	任意のコントロールまたはコンテナエレメント。
使用できる項目属性:	`<canvas>` エレメントの項目属性を拡張します。
heights	文字列行の高さ。
sizes	文字列レスポンシブサイズ。

`<section>`

セクションコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	`<canvas>` エレメントの項目属性を拡張します。
使用できる項目属性:
semanticContent	文字列\| 既定値: general このコンテンツに対して生成される HTML 属性を決定します。値: general、address、footer、header、main、nav、article、aside、h1、h2、h3、h4、h5、h6。

`<smart>`

SmartTable コントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	テーブル行エレメント (`<tr>`)。
使用できる項目属性:	`<canvas>` エレメントの項目属性を拡張します。
columnsStyle	文字列列の幅 (px、dip、% で表現、セミコロン区切り)。注: 列数は、最もエレメント数が多い `<tr>` エレメント内の `<td>` エレメントの数に一致する必要があります。
rowsStyle	文字列行の高さ (px、dip、% で表現、セミコロン区切り)。注: 行数は、`<tr>` エレメントの数に一致する必要があります。

`<table>`

テーブルコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	任意のコントロールまたはコンテナエレメント。
使用できる項目属性:	Web レイアウトのコンテキストでは `<canvas>` エレメントの項目属性を拡張します。それ以外の場合は `<smart>` を拡張します。
header	文字列テーブルの上に表示されるヘッダー。注: これは Web レイアウトのコンテキストのみに適用されます。

`<htable>`

行が 1 つの場合のテーブルエレメント (<table>) またはスマートエレメント (<smart>) の略記です。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	任意のコントロールまたはコンテナエレメント。
使用できる項目属性:	`<canvas>` エレメントの項目属性を拡張します。
columnsStyle	文字列列の幅 (px、dip、% で表現、セミコロン区切り)。

`<vtable>`

列が 1 つの場合のテーブルエレメント (<table>) またはスマートエレメント (<smart>) の略記です。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	任意のコントロールまたはコンテナエレメント。
使用できる項目属性:	`<canvas>` エレメントの項目属性を拡張します。
rowsStyle	文字列行の高さ (px、dip、% で表現、セミコロン区切り)。

コンテナアイテムのエレメント

`<tr>`

テーブル行を記述します。

使用できる親:	テーブルエレメント (`<table>`) またはスマートエレメント (`<smart>`)。
使用できるコンテンツ:	テーブルセルエレメント (`<td>`)。
使用できる項目属性:
height	文字列テーブル行の高さ。

`<td>`

テーブルセルを記述します。

使用できる親:	テーブル行エレメント (`<tr>`)。
使用できるコンテンツ:	任意のコントロールまたはコンテナエレメント。
使用できる項目属性:	なし。
hAlign	文字列\| 既定値: left 横方向の揃え位置。値: left、center、right、justify。
vAlign	文字列\| 既定値: top 縦方向の揃え位置。値: top、middle、bottom。

コントロールのエレメント

`<a>`

ハイパーリンクコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

`<action>`

ボタンコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。
caption	文字列ボタンのキャプション。
onClickEvent	文字列ボタンのイベントのアクションの名前。
image	文字列 Image オブジェクトのフルネーム。
imagePosition	文字列\| 既定値: above-text 画像の位置。値: above-text、below-text、behind-text、before-text、after-text。注: これは、非 Web レイアウトのコンテキストのみに適用されます。

`<actions>`

パネル用アクショングループのコントロールまたは Web 用アクショングループのコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	アクションエレメント (`<action>`)。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

`<audio>`

Audio データタイプに基づく項目属性/変数を記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

`<checkbox>`

[ Control Type ] プロパティの値が 'Checkbox' の項目属性/変数を記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

`<combobox>`

[ Control Type ] プロパティの値が 'Combobox' の項目属性/変数を記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

`<component>`

コンポーネントコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。

`<contentholder>`

Master Panel オブジェクトのレイアウトが定義されている場合に、コンテンツホルダーコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。

`<errors>`

エラービューアコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

`<grid>`

グリッドコントロール、フリースタイルグリッドコントロール、または Flex Grid コントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	任意のコンテナエレメント。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。
scrollDirection	文字列\| 既定値: vertical スクロールの方向。値: vertical、horizontal。
multipleItems	文字列\| 既定値: single 複数のアイテム。値: single、multiple-quantity、staggered-quantity、multiple-size。
itempsPerRow	文字列\| 既定値: 1 1 行あたりのアイテム数。注: これは、multipleItems 項目属性の値が multiple-* のうちのいずれかである場合にのみ該当します。
snapToGrid	文字列\| 既定値: false グリッドへのスナップ。値: false、true。
flexDirection	文字列\| 既定値: row 主軸を設定し、Flex コンテナ内の Flex アイテムの配置方向を定義します。値: row、row-reverse、column、column-reverse。注: これは scrollDirection 項目属性をオーバーライドし、Flex Grid を定義します。
flexWrap	文字列\| 既定値: nowrap Flex コンテナが 1 行か複数行か、および交差軸の方向を制御します。値: nowrap、wrap、wrap-reverse。注: これは Flex Grid を定義します。
justifyContent	文字列\| 既定値: flex-start 主軸に沿った揃え位置を定義します。値: flex-start、flex-end、center、 space-around、space-between。注: これは Flex Grid を定義します。
alignContent	文字列\| 既定値: stretch 交差軸に余分なスペースがある場合に、Flex コンテナの行を内側に揃えます。値: stretch、flex-start、flex-end、 center、baseline。注: これは Flex Grid を定義します。
alignItems	文字列\| 既定値: stretch Flex アイテムを現在のライン上で交差軸に沿ってレイアウトする既定の動作を定義します。値: stretch、flex-start、flex-end、 center、 space-around、space-between。注: これは Flex Grid を定義します。

`<group>`

グループコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

`<hr>`

横線コントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

`<img>`

Image データタイプまたは Image コントロールに基づく項目属性/変数を記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

`<input>`

[ Control Type ] プロパティの値が 'Edit' の項目属性/変数を記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。
autogrow	文字列\| 既定値: false 自動拡張。値: false、true。
inviteMessage	文字列招待メッセージ。
isPassword	文字列\| 既定値: false 入力中にユーザー入力をマスクします。値: false、true。
labelPosition	文字列\| 既定値: none ラベルの位置。値: none、top、left。
labelWidth	文字列\| 既定値: 25% レスポンシブ Web アプリケーションにおける各画面サイズのラベル幅 (パーセンテージ)。残りのスペースはコントロール自体に割り当てられます。値: n%、 n は正の整数。注: これは Web レイアウトのみに適用されます。
readonly	文字列\| 既定値: false 値は読み書き (false) または読み取り専用 (true)。値: false、true。

`<label>`

テキストブロックコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。
caption	文字列ラベルのキャプション。

`<map>`

Map ユーザーコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。

`<stencil>`

Stencil オブジェクトのインスタンスを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	任意のエレメント (オーバーライドされたコントロールを表す)。
使用できる項目属性:
name	文字列コントロール名。

`<switch>`

[ Control Type ] プロパティの値が 'Switch' の項目属性/変数を記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。
onText	文字列スイッチがオンのときに表示されるテキスト。
offText	文字列スイッチがオフのときに表示されるテキスト。
checkedValue	文字列チェックありの値。
uncheckedValue	文字列チェックなしの値。

`<tab>`

パネル用のタブコントロールまたは Web パネル用のタブコントロールを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

`<tabPage>`

タブページを記述します。Tab タグの直接の子として定義する必要があります。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

`<video>`

Video データタイプに基づく項目属性/変数を記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

その他のエレメント

`<actionBar>`

Panel オブジェクトのアプリケーションバーのセクションを記述します。

使用できる親:	任意のコンテナエレメント。
使用できるコンテンツ:	なし。
使用できる項目属性:
name	文字列コントロール名。
class	文字列コントロールのスタイルクラス。

適用範囲

オブジェクト

Panel、Web Panel、Stencil、Master Panel。

参考情報

デザインのインポートオプション