日本語を学び始めたばかりのユーザーにとって、どこから始めていいかわからないこともあるでしょう。時間と労力(そしてもちろんお金!)を無駄にしてしまうのを防ぐために、このガイドの目的は、「なぜ」よりも「どうやって」最初のパネルを作成するかを示すことです。これを読み終えると、基本的なパネルを作成する方法を理解しているはずです。ZMLをさらに深く掘り下げるきっかけになれば幸いです。
概要
ZMLスニペットは、一般的にDelugeを組み合わせてビジネスロジックと共にパネルコンポーネントを構築するために使用されます。以下は、ZMLのパネルの基本構造です。
![](https://www.zohowebstatic.com/sites/default/files/creator/basic-panel-structure.png)
各パネルには以下が含まれている必要があります:
パネルの構造を解体する
パネルの構造が定義されたので、各要素がいかにして一つの完全なパネルを構成し、コンテンツやビジネスロジックを持たせるかを理解する必要があります。
![](https://www.zohowebstatic.com/sites/default/files/creator/panel-layers.png)
上記の画像は、ZMLパネルの様々なレイヤーの3Dビューを示しています。パネルの構造で定義されているように、<panel>タグがプライマリコンテナを定義します。それに続いて、<pr>および<pr>が、見えない論理行および列です。
パネル行とパネル列は、パネル内の要素を整理するのに役立ちます。これは、テキスト、画像、ボタンなどの各要素がセルのようなコンテナに収まっていることを意味しており、スタイルを追加してそれぞれの要素を個別に配置することができます。
![](https://www.zohowebstatic.com/sites/default/files/creator/panel-layers-magnify_0.png)
ZMLでパネルを構築する
以下の画像のパネルを考え、トップダウンアプローチを使用して部品を構築しましょう。
![](https://www.zohowebstatic.com/sites/default/files/creator/zml-snippet-final-op.png)
このパネルは以下のものを集めたものです:
- テキストデータ - 静的および取得データ
- 背景色とテキストの配置
- 2カラム
- 画像 - アイコン
- 関連付けられたアクションのテキスト
ステップ1:パネルの作成と簡単なテキストコンテンツの追加:
これがページ上でシンプルなZMLパネルがどのように表示されるかを示しています:
![](https://www.zohowebstatic.com/sites/default/files/creator/zml-snippet-text-normal-1.png)
単純なパネルを作成するには:
<panel>
<pr height='fill' width='fill'>
<pc width='100%' bgColor='#FFFFFF' padding='20px'>
<text value='プロジェクト' size='4' color='#000000'> </text>
</pc>
</pr>
</panel>
ステップ2:テキストコンテンツを整列する:
テキストを整列した後の出力:
![](https://www.zohowebstatic.com/sites/default/files/creator/zml-snippet-txt-align-2.png)
パネル内のテキストを整列するには:
<panel>
<pr height='fill' width='fill'>
<pc width='100%' bgColor='#FFFFFF' padding='20px' hAlign='left'>
<text value='プロジェクト' size='4' color='#000000'> </text>
</pc>
</pr>
</panel>
ステップ3:アプリケーションから取得したテキストデータの表示:
出力:
![](https://www.zohowebstatic.com/sites/default/files/creator/zml-snippet-formdata-3.png)
アプリケーションデータ(テキスト)をパネルに表示するには:
<panel>
<pr height='fill' width='fill'>
<pc width='80%' padding='20px' hAlign='left'>
<text type='Text' value='プロジェクト' size='4' textAlign='left'> </text>
</pc>
<pc width='20%' padding='20px' hAlign='right'>
<text type='Form Data' value='このアプリ.新しいプロジェクト.ID.数' size='8' bold='true'> </text>
</pc>
</pr>
</panel>
ステップ4:パネルに背景色を追加する:
出力:
![](https://www.zohowebstatic.com/sites/default/files/creator/zml-snippet-panel-bg-4.png)
<panel>
<pr height='fill' width='fill'>
<pc width='80%' bgColor='#20B2E3' padding='20px' hAlign='left'>
<text type='Text' value='プロジェクト' size='4' color='#FFFFFF' textAlign='left'> </text>
</pc>
<pc width='20%' bgColor='#20B2E3' padding='20px' hAlign='right'>
<text type='Form Data' value='thisapp.New_Project.ID.count' size='8' color='#FFFFFF' bold='true'> </text>
</pc>
</pr>
</panel>
ステップ5:パネル内に追加の行を追加し、画像/アイコンを追加する:
出力:ここのアイコンは「>」記号です
![](https://www.zohowebstatic.com/sites/default/files/creator/zml-snippet-duplicate-5.png)
<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>
ステップ6:テキスト、画像、アクションでパネルを完成させます:
出力:
![](https://www.zohowebstatic.com/sites/default/files/creator/zml-snippet-final-6.png)
追加の機能
さらに、アクションに任意のアプリケーションからカスタム機能を追加できます。
「特定の動作にカスタム機能を関連付けるには:」
<panel>
<pr height='fill' width='fill'>
<pc width='100%' bgColor='#FFFFFF' padding='20px'> <text type='Text' value='プロジェクト' size='6' color='#FFFFFF' textAlign='left' action='Function' functionName='leadDetails.getLeadName' parameters=''${view}''> </text>
</pc>
</pr>
</panel>