IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation

(1)

WebSphere

IBM Business Process Manager

CSSによるCoachレイアウト制御ガイド

(2)

1. はじめに (資料の目的) 2. Coach View構造の基本 2.1 CSSの基礎 2.2 CoachにおけるCSS記述場所 2.3 標準Coach View構造の基本 2.4 CoachにおけるCSSセレクター指定の基本 3. 実践Coachレイアウト制御の実現 3.1 CSSレイアウトに対するよくある要望 3.2.レイアウト実現例 4. 参照情報 4.1 ブラウザ開発ツールによるHTML/CSS要素の調べ方

(3)

WebSphere

(4)

1. はじめに (資料の目的)

目的

–IBM BPMでは、Coach Viewの組み合わせによって、ユーザー・インタフェース(画面)を構

築する。 IBM BPMはHTML/CSSの技術に基づいているため、レイアウト装飾の変更を⾏うだけであれば、標準のCoach Viewに対してCSSを適用することにより実現が可能である（Coach Viewの動作そのものを変更・定義したい場合にはカスタムCoach Viewの追加開発が必要となる）。 –本資料では、CSSの指定によって可能となるレイアウト装飾方法の基本と、よくある要望に基づく実現例を提供することによって、画面の開発や標準化作業をより迅速に⾏えるための情報を提供することを目的とする。対象者 –新規にBPMを用いて開発を⾏う開発担当者

（Process Designerの使用法やCoach Viewの開発方法を理解している方）想定バージョン

–製品：Business Process Manager 8.5.5 –ブラウザ：Internet Explorer 10

(5)

WebSphere

(6)

2.1 CSSの基礎

CSSとは HTMLデータ構造とは分離した形で、スタイル（⽂書の⾒え方）を指定する⾔語/仕組みです。基本的な書式 <セレクタ>： HTMLデータ構造内における特定の要素を選択する例 <プロパティ>：スタイルの種類（例：⽂字色、要素の高さなど）を指定する例 color (⽂字色), width(幅) <値>：プロパティで指定されたスタイルの具体的な値（赤色、高さ100ptなど）を指定する例: red (赤色), 100px (100ピクセル) ※ CSSそのものの詳細は、専門書/Webページなどでご確認ください <セレクタ> { <プロパティ> : <値>; } 名前 セレクタ書式 スタイルの適用対象 要素型セレクタ 要素名 同要素名のタグ全てが対象になります classセレクタ .クラス名 同クラス名が付与された要素全てが対象になります

idセレクタ #ID名 Id属性が一致する要素全てが対象になります

子孫セレクタ セレクタ1 セレクタ2 セレクタ1で選択される要素の子、孫要素についてセレクタ

(7)

2.2 CoachにおけるCSS記述場所

Coach View定義内の「インラインCSS」

– Coach Viewをテンプレートとして使用し、CSSもテンプレートの一部として提供したい場合 – 新規Coach View部品を作成し、そのCoach View部品に依存するCSSを提供したい場合

カスタムHTML

– 特定のページにのみ定義したい場合

– cssファイルをWebファイルとして準備し、共有したい場合 (ファイルと組み合わせて使用)

「テキスト」にて<style>タグを挿入可能。

(8)

2.3 標準Coach View構造の基本

DIV CLASS=“CoachView <CV種別> <ユーザ指定クラス>“ ID=“<コントロールID>”

10進数 Decimal ボタン Button 選択 Select

イメージ Image ラジオ・ボタン Radio_Buttons テーブル Table

チェック・ボックス Checkbox 出⼒テキスト Output_Text 垂直セクション Vertical_Section

テキスト Text 整数 Integer 水平セクション Horizontal_Section

テキスト域 Text_Area 日付ピッカー Date_Time_Picker タブ Tabs <CV種別>： Coach Viewごとに事前定義されたCSSクラス名

Process Designerにおいて、Coach Viewごとに開発者が指定するID。

Coach View部品化により重複の可能性があるが、プロジェクト単位では重複しない命名規則とすることを推奨。 <コントロールID>： <ユーザー指定クラス>： Process Designerにおいて、HTML属性のオーバーライドにより指定するCSSクラス名。 DIV CLASS=“textLabel” LABEL CLASS=“controlLabel” DIV CLASS=“content” CoachView依存コンテンツ DIV CLASS=“coachValidationDiv”

(9)

2.4 CoachにおけるCSSセレクター指定の基本

1. 全体セレクター指定適用範囲をしぼらず、全てのHTMLタグ対して直接CSSが適用されるよう記述する 2. Coach View種別を利用したセレクター指定 Coach Viewの種類に範囲を限定して、CSSが適用されるよう記述する 3. ユーザー指定クラスを利用したセレクター指定

Process Designerにおいて、Coach ViewのHTML属性にCSSのクラス名を指定した上で、それが指定されたCoach Viewの範囲に限定し、CSSが適用されるよう記述する

4. コントロールIDを利用したセレクター指定

Process Designerにおいて、Coach Viewに指定されたコントロールIDに限定し、CSSが適用されるよう記述する body { color: red; } 全体の⽂字色を赤に変更（※他の優先CSSがある場合、反映されないケースはあり） .Decimal .controlLabel{ color: red; } Coach View「10進数」のテキストラベルの⽂字色を赤に変更 .MyClass .textLabel { color: red; } HTML属性にMyClassが指定されたCoach Viewのテキストラベルの⽂字色を赤に変更 #MyControl .textLabel { color: red; } コントロールIDがMyControlであるCoach Viewのテキストラベルの⽂字色を赤に変更

(10)

WebSphere

(11)

3.1 Coachレイアウトに対するよくある要望

# よくある要望 適用対象 1 ボディーの背景色を変更したい全般 2 フォントの種類、サイズを変更したい全般 3 ラベルの位置、幅を設定したいラベル全般 4 入⼒項目の幅を設定したい入⼒域全般 5 入⼒項目の角に丸みをつけたい入⼒域全般 6 右寄せで表示したい入⼒域全般 7 テキスト域の幅・高さを固定化したいテキスト域 8 水平・垂直セクションのマージンを設定したいセクション 9 タブの幅・高さを設定したり、色を変更したいタブ 10 表のヘッダーやスクロールを制御したい表

(12)

3.2 レイアウト実現例

#1 ボディーの背景色を変更したい

body{ background-color: #b2cfec; } デフォルトの表示

(13)

3.2 レイアウト実現例

#2 フォントの種類、サイズを変更したい

body{

(29)

4.1 ブラウザ開発ツールによるHTML/CSS要素の調べ方

1. Webブラウザで解析対象のHTMLを開いたうえで、

(30)

4.1 ブラウザ開発ツールによるHTML/CSS要素の調べ方

(31)

3. 元のブラウザ画面において、解析対象の要素を選択する

4.1 ブラウザ開発ツールによるHTML/CSS要素の調べ方

(32)

4.1 ブラウザ開発ツールによるHTML/CSS要素の調べ方

4. 開発者ツールにて、選択された要素をHTMLタブで閲覧・解析する HTMLタブ側に選択されたHTML要素を確認可能スタイル・タブ側で、現在適用されているスタイルの確認や、スタイルのon/off、属性値の変更を試すことが可能

(33)

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation

WebSphere