UI部品の使い方として、UI部品の記述方法、およびスタイルの設定方法について説明します。
UI部品は、HTMLの<div>タグおよび<span>タグを使って記述します。
記述形式: <div>タグの場合
<div rcf:id="部品ID" rcf:type="部品タイプ" rcf:プロパティ名="値" ... ></div>
記述形式: <span>タグの場合
<span rcf:id="部品ID" rcf:type="部品タイプ" rcf:プロパティ名="値" ... ></span>
属性 | 説明 |
|---|---|
rcf:id | 部品IDを指定します。(省略可) Systemwalker Runbook Automation Studioでは、このプロパティにユーザ定義属性(UDA)を指定することができます。UDAを指定した場合、部品が初期化される際に、指定したUDAの値が特定のプロパティの値として使用されます。また、そのプロパティの値は、UDAの値として保存されます。 UDAを指定する場合、uda_<UDAの識別子> の形式で記述します。 UDAの指定方法についての詳細は、“4.2.4 画面部品共通プロパティ”を参照してください。 |
rcf:type | 部品タイプを指定します。 |
rcf:プロパティ名 | 部品ごとに定義されているプロパティ、スタイルプロパティなどを指定します。 |
例えば、TextInputに、UDA(UDAの識別子はVariable1)を関連づけて、maxLengthプロパティ、colorプロパティを指定する場合は、以下のように記述します。
<span rcf:id="uda_Variable1" rcf:type="IBPMTextInput" rcf:maxLength="10" rcf:color="blue"> </span>
画面部品は、<div>タグおよび<span>タグの両方で記述できる部品と、<div>タグでだけ記述できる部品があります。<div>タグ、<span>タグの両方で記述できる部品に関しては、表示上、以下の違いがあります。
<div>タグ
部品の前後に改行コードが挿入されます。
<span>タグ
部品の前後に改行コードは挿入されません。
各画面部品の詳細は、“4.2 画面部品”を参照してください。
機能付加部品は、<div>タグおよび<span>タグのどちらで記述しても違いはありません。
ポイント
UI部品を記述する際には、以下の事柄に注意してください。
終了タグの記述
UI部品を記述する場合、子要素を持たない部品を空要素で記述せずに、必ず終了タグを記述してください。
空要素で記述した場合、それ以降の部品が表示されない場合があります。
正しい例
<span rcf:id="id1" rcf:type="IBPMTextInput"></span>
間違った例(空要素記述)
<span rcf:id="id2" rcf:type="IBPMTextInput"/>
“rcf-”から始まる文字列
QuickFormでは“rcf-”から始まる文字列を特別な意味で利用しています。そのため、以下の値に“rcf-”から始まる文字列は指定しないでください。
HTMLのid属性
HTMLのstyle属性
rcf:id属性
rcf:id属性およびHTMLのid属性
rcf:id属性により部品IDを指定する場合、指定する値は以下の条件を満たしている必要があります。
画面で一意であること
例えば、画面の遅延読込み(画面の一部分だけを別に用意しておき、ユーザーが画面操作をしている間に裏で画面情報を読み込むこと)を行う場合、遅延読込みで読み込んだ画面情報を含めて、部品IDは一意である必要があります。
画面のHTMLのid属性の値と重複しないこと
HTML要素にid属性でIDを指定する場合、その画面で指定する部品IDと重複する値は指定できません。重複する値を指定した場合、動作が不定になります。
配列要素の記述
StringやNumberの配列を値として指定するプロパティの場合、属性値を“;”で区切って配列の要素を指定することができます。
例: SelectListのoptionsプロパティの場合
<div rcf:type="IBPMSelectList" rcf:options="item1;item2;item3"></div>
配列の要素が空の場合は、属性値に空文字列("")を指定してください。
そのほかの型(Object型など)の配列を、属性値として直接指定することはできません。
画面部品のスタイルの指定には、以下の2つの方法があります。
スタイルプロパティでの設定
画面部品では、その部品で指定できるスタイルをプロパティ(スタイルプロパティ)として設定できます。
例えば、TextInput部品で背景色、文字色、フォントの大きさを変更したい場合は、以下のように指定します。
<span rcf:type="IBPMTextInput" rcf:backgroundColor="#FFFFFF" rcf:color="#000000" rcf:fontSize="large"></span>
その画面部品で指定できないスタイルプロパティが指定された場合は、無視されます。
スタイルプロパティには、部品全体に対するスタイルプロパティと部品の特定のパーツに対するスタイルプロパティがあります。
スタイルプロパティの命名規則については、“4.2.5 スタイルプロパティ”のポイントを参照してください。
また、各部品のスタイルプロパティについては、各部品の説明を参照してください。
CSSでの設定
各画面部品は、styleClassプロパティによってクラス名が指定できます。クラス名を利用することで、スタイルをCSSによって記述できます。
以下に、SelectList部品での記述例を示します。
<style type="text/css">
.myClass .rcf-SelectList{
width: 100px;
height: 200px;
color: blue;
border-color: black;
background-color: lightgrey;
}
.myClass .rcf-SelectList-optionSelected {
color: red;
}
</style>
<div rcf:type="IBPMSelectList" rcf:styleClass="myClass" rcf:options="foo;bar">
</div>
styleClassプロパティによってクラス名を指定すると、その部品のスタイルプロパティで指定できるスタイルをCSSで記述することができます。
CSSで指定する場合のルールは、以下のとおりです。
スタイルプロパティ名がすべて小文字のもの (例: width、height)
CSSでは、同じ名前で指定できます。
スタイルプロパティ名に大文字を含んでいるもの (例: backgroundColor、fontSize)
CSSでは、大文字の前に“-”を挿入し、大文字を小文字にした名前になります。
backgroundColor → background-color
fontSize → font-size
スタイルプロパティでプレフィックス(パーツ名)が前にあるもの (例: titleHeight、bodyPadding)
特定のクラス名とCSSで指定できます。(.myClassは、styleClassで指定したクラス名)
PanelのtitleHeightの場合
.myClass .rcf-Panel-title {
height: 30px;
}PanelのbodyBackgroundColorの場合
.myClass .rcf-Panel-body {
background-color: white;
}なお、画面部品のスタイルプロパティで指定できないスタイルをCSSに記述した場合の動作は不定です。
UI部品の<div>タグおよび<span>タグには、“rcf:”で始まる属性とstyle属性だけが記述できます。
style属性に記述可能なCSSスタイルプロパティは以下に限定されます。
position
top
left
z-index
PopupCalendarでは、styleプロパティが利用できません。
ViewStackやFragmentContainerなどにより最初は表示しない部分も含め、ページあたりの画面部品数は50個以下を推奨します。
部品数が多い場合、初期表示に時間がかかったり、初期表示およびページ切替え時にエラーになったりする場合があります。
なお、Calendarなどの複雑な部品を多用した場合や、マシン性能などの要因で、画面部品が50個以下であっても、初期表示に時間がかかったり、エラーになったりする場合があります。