開発の推奨事項
Related information
HTML
TIBCO EBX® のデフォルトスタイルをカスタムインターフェイスに適用できるように、特定の HTML スタイルとタグの包含を最小限に抑えることをお勧めします。API のアプローチは、開発者の実装プロセスを簡素化しながら、HTML ページのすべてのエレメントに標準化されたスタイルを自動的に適用することです。
XHTML
EBX® は、XHTML 1.0 Transitional で開発されたリッチインターネットアプリケーションです。つまり、HTML の構造は厳密な XML ファイルであり、"br" タグを含むすべてのタグを閉じる必要があります。この構造により、CSS ルールをより細かく制御でき、ブラウザーのレンダリングの違いが少なくなります。
iFrame
EBX®では、特に
UIHttpManagerComponent の URL と連携して iFrame を使用できます。技術的な理由から、JavaScript のみを使用して iFrame の src 属性を設定することをお勧めします。この方法では、ページが完全にレンダリングされ、すべてのビルトイン HTML コンポーネントが準備できた時点で iFrame が読み込まれます。
例
任意の
UIComponentWriter から開発された次の例では、UIHttpManagerComponent を使用して iFrame の URL を構築し、正しい方法で設定します。
// using iFrame in the current page requires a sub session component
UIHttpManagerComponent managerComponent = writer.createWebComponentForSubSession();
// [...] managerComponent configuration
String iFrameURL = managerComponent.getURIWithParameters();
String iFrameId = "mySweetIFrame";
// place the iFrame in the page, with an empty src attribute
writer.add("<iframe id=\"").add(iFrameId).add("\" src=\"\" >").add("</iframe>");
// launch the iFrame from JavaScript
writer.addJS("document.getElementById(\"").addJS(iFrameId).addJS("\").src = \"").addJS(iFrameURL).addJS("\";");
CSS
パブリック CSS クラス
定数カタログ
UICSSClasses は、ソフトウェアでコンポーネントのスタイルを設定するために使用される主要な CSS クラスを提供します。これらの CSS クラスは、背景色、境界線、管理内のカスタマイズ可能なテキストに従うため、ソフトウェアへの適切な長期的な統合が保証されます。フローティングマージンとパディングは、可変密度、アイコンのスタイルなどに応じて変動します。
以下も参照してください。:
高度な CSS
EBX® では、すべてのページに 1 つ以上の外部カスケーディング スタイル シートを統合できます。これらの外部 CSS はリソースとして見なされ、モジュール登録で宣言する必要があります。
ソフトウェアを変更せずに CSS ルールとプロパティが適切に機能するようにするには、次の推奨事項に従う必要があります。これらのルールを守らないと、次のような結果を招く可能性があります。
-
ソフトウェアが美観的にも機能的にも適切に動作しない：一部のデータの表示が失われるリスクがあり、一部の入力コンポーネントが機能しなくなる可能性があります
-
ネイティブ CSS ルールが CSS 実装に影響するため、CSS ルールとプロパティが適切に機能しません
CSS 識別子とクラス名の予約済みプレフィックス
次のプレフィックスは、CSS #ids および .classes を作成するために使用しないでください。
|
ebx_
|
Internal built-in
|
|
yui
|
Yahoo User Interface global
|
|
ygtv
|
Yahoo User Interface tree view
|
|
layout-doc
|
Yahoo User Interface layout
|
|
cke_
|
CK editor (HTML エディターウィジェットで使用)
|
|
fa
|
Font Awesome (パースペクティブやツールバーで使用されるアイコン)
|
EBX® 内部で使用される CSS クラス
次の CSS クラスは、コンテキストセレクターのないルールセットには含めないでください。
以下のいずれかの CSS クラスを使用して CSS セレクターにプレフィックスを付けないと、競合が発生し、EBX®の UI が破損します。
|
selected
|
YUI selected tree node
|
|
hd
|
YUI floating pane header
|
|
bd
|
YUI floating pane body
|
|
ft
|
YUI floating pane footer
|
|
container-close
|
YUI inner popup close button
|
|
underlay
|
YUI inner popup shadow
|
|
hastitle
|
YUI menu group with title
|
|
topscrollbar
|
YUI menu top scroll zone
|
|
bottomscrollbar
|
YUI menu bottom scroll zone
|
|
withtitle
|
YUI calendar
|
|
link-close
|
YUI calendar close button
|
|
collapse
|
YUI layout closed pane indicator
|
|
pull-right
|
Font Awesome parameter
|
|
pull-left
|
Font Awesome parameter
|
競合を避けるための例
避けるべき例
.selected {
background-color: red;
}
正しい例
#myCustomComponent li.selected {
background-color: red;
}
JavaScript
パブリック JS 関数
JavaScript 関数のカタログ
JavaScriptCatalog には、JS ファイルで直接 (コピーと貼り付けで) 使用できる関数のリストが用意されています。
Java でのページ生成中の JavaScript の呼び出し
Java コンポーネントの HTML を生成するときに、API
UIJavaScriptWriter を使用して特定の JavaScript コードを追加できます。
この JavaScript はページ全体がロードされると実行されます。
UIBodyWriter.add で記述された HTML エレメントを即座に管理できます。実行コンテキストが on-load イベントの後に来るため、on-load 関数 (window.onload = myFunctionToCallOnload;など) の設定はサポートされていません。
高度な JavaScript
EBX® では、1 つ以上の外部 JavaScript ファイルを含めることができます。これらの外部 JavaScript ファイルはリソースと見なされ、モジュール登録 で宣言する必要があります。パフォーマンス上の理由から、JavaScript リソースは必要な場合にのみ含めることをお勧めします (たとえば、ユーザーサービスや特定のフォーム内など)。API
UIDependencyRegisterer を使用すると、開発者はコンテキストに応じて特定のページに JavaScript リソースを統合する条件を指定できます。
ソフトウェアを変更せずに JavaScript リソースが適切に機能するようにするには、次の推奨事項に従う必要があります。これらを守らないと、次のような結果を招く可能性があります。
-
ソフトウェアの不適切な機能：ソフトウェアの機能またはグローバル変数が消去されると、一部の入力または表示コンポーネント (画面全体を含む) が機能しなくなる可能性があります
-
グローバル変数または関数名が消去される可能性があるため、JavaScript 命令が適切に機能しません
予約済みの JS プレフィックス
次のプレフィックスは予約されており、変数、関数、メソッド、クラスなどの作成には使用しないでください。
|
ebx_
|
内部ビルトイン API
|
|
EBX_
|
内部ビルトイン API
|
|
YAHOO
|
Yahoo ユーザーインターフェイス API
|