日本語を学び始めたばかりのユーザーにとって、どこから始めていいかわからないこともあるでしょう。時間と労力（そしてもちろんお金！）を無駄にしてしまうのを防ぐために、このガイドの目的は、「なぜ」よりも「どうやって」最初のパネルを作成するかを示すことです。これを読み終えると、基本的なパネルを作成する方法を理解しているはずです。ZMLをさらに深く掘り下げるきっかけになれば幸いです。

概要

ZMLスニペットは、一般的にDelugeを組み合わせてビジネスロジックと共にパネルコンポーネントを構築するために使用されます。以下は、ZMLのパネルの基本構造です。

• <panel> タグ：<panel> タグは、いくつかのデータを保持する主なコンテナーのような構造を定義します。 
  
• <pr> タグ：<pr> タグまたはパネル行は、すべてのパネル内の論理行を定義します。
• <pc> タグ： <pc> タグまたはパネル列は、すべての<pr>内の論理列を定義します。
• パネル要素：パネル要素には、テキスト、画像、またはボタンが含まれます。各パネルには、これらの要素の1つ以上を保持することができます。 
  

パネルの構造を解体する

パネルの構造が定義されたので、各要素がいかにして一つの完全なパネルを構成し、コンテンツやビジネスロジックを持たせるかを理解する必要があります。 

上記の画像は、ZMLパネルの様々なレイヤーの3Dビューを示しています。パネルの構造で定義されているように、<panel>タグがプライマリコンテナを定義します。それに続いて、<pr>および<pr>が、見えない論理行および列です。

パネル行とパネル列は、パネル内の要素を整理するのに役立ちます。これは、テキスト、画像、ボタンなどの各要素がセルのようなコンテナに収まっていることを意味しており、スタイルを追加してそれぞれの要素を個別に配置することができます。

 

ZMLでパネルを構築する

以下の画像のパネルを考え、トップダウンアプローチを使用して部品を構築しましょう。

このパネルは以下のものを集めたものです：

• テキストデータ - 静的および取得データ
• 背景色とテキストの配置
• 2カラム
• 画像 - アイコン
• 関連付けられたアクションのテキスト

単純なパネルを作成するには：

テキストを整列した後の出力：

パネル内のテキストを整列するには：

出力:

アプリケーションデータ（テキスト）をパネルに表示するには：

出力：

 

出力：ここのアイコンは「>」記号です

<panel>
<pr height='fill' width='fill'>
<pc width='100%'>
<pr height='fill' width='fill'>
<pc width='80%' bgColor='#20B2E3' paddingTop='10px' paddingLeft='40px' paddingRight='10px' paddingBottom='10px' hAlign='left'>
<text type='Text' value='プロジェクト' size='6' color='#FFFFFF' textAlign='left'> </text>
</pc>
<pc width='20%' bgColor='#20B2E3' paddingTop='10px' paddingLeft='10px' paddingRight='40px' paddingBottom='10px' hAlign='right'>
<text type='Form Data' value='thisapp.New_Product.ID.count' size='8' bold='true'></text>

</pc>
</pr>
<pr height='fill' width='fill'>
<pc width='100%' paddingTop='10px' paddingLeft='40px' paddingRight='10px' paddingBottom='10px' hAlign='left'>
<pr height='auto' width='auto'>
<pc>
<text type='Text' value='リストを表示' size='3' textAlign='left'> </text>
</pc>
<pc>
<image color='#20B2E3' bgColor='#FFFFFF' width='52px' height='52px' type='icon' value='arrows-1-bold-right' size='1' cornerRadius='10px' iconType='solid' /> </pc>
</pr>
</pc>
</pr>
</pc>
</pr>
</panel>

出力：

追加の機能

さらに、アクションに任意のアプリケーションからカスタム機能を追加できます。

「特定の動作にカスタム機能を関連付けるには：」

1. <panel>
2. <pr>（パネル行）
   
3. <pc>（パネル列）
4. <text>
   
5. <prefix>
   
6. <suffix>
   
7. <image>
   
8. <button>