開発の推奨事項
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_
|
内部ビルトイン
|
|
yui
|
Yahooユーザーインターフェイスグローバル
|
|
ygtv
|
Yahooユーザーインターフェイスツリービュー
|
|
layout-doc
|
Yahooユーザーインターフェイスのレイアウト
|
|
cke_
|
CKエディター（HTMLエディターウィジェットで使用）
|
|
fa
|
Font Awesome（パースペクティブとツールバーで使用されるアイコン）
|
EBX®によって内部的に使用されるCSSクラス
次のCSSクラスは、コンテキストセレクターのないルールセットに含めないでください。
以下のCSSクラスのいずれかを使用してCSSセレクターのプレフィックスを付けないと、競合が発生し、EBX®のUIが破損します。
|
selected
|
YUIが選択したツリーノード
|
|
hd
|
YUIフローティングペインヘッダー
|
|
bd
|
YUIフローティングペイン本体
|
|
ft
|
YUIフローティングペインフッター
|
|
container-close
|
YUI内部ポップアップ閉じるボタン
|
|
underlay
|
YUI内部ポップアップシャドウ
|
|
hastitle
|
タイトル付きのYUIメニューグループ
|
|
topscrollbar
|
YUIメニュートップスクロールゾーン
|
|
bottomscrollbar
|
YUIメニュー下部スクロールゾーン
|
|
withtitle
|
YUIカレンダー
|
|
link-close
|
YUIカレンダー閉じるボタン
|
|
collapse
|
YUIレイアウトクローズドペインインジケーター
|
|
pull-right
|
FontAwesomeパラメーター
|
|
pull-left
|
FontAwesomeパラメーター
|
競合を回避するための例
次のようには記述しません。
.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エレメントを即座に管理することができます。オンロード関数（ window.onload = myFunctionToCallOnload;など）の設定は、実行コンテキストがオンロードイベントの後に来るため、サポートされていません。
高度なJavaScript
EBX®では、1つ以上の外部JavaScriptファイルを含めることができます。リソースと見なされるこれらの外部JavaScriptファイルは、モジュール登録で宣言する必要があります。パフォーマンス上の理由から、JavaScriptリソースは、必要な場合にのみ含めることをお勧めします（たとえば、ユーザーサービスまたは特定のフォームに）。 API
UIDependencyRegisterer を使用すると、開発者は、コンテキストに応じてJavaScriptリソースを特定のページに統合する条件を指定できます。
ソフトウェアを変更せずにJavaScriptリソースが適切に機能するようにするには、次の推奨事項に従う必要があります。そうでない場合、次のような事態につながる可能性があります。
-
ソフトウェアの不適切な機能：ソフトウェアの機能またはグローバル変数が消去された場合、一部の入力または表示コンポーネント（画面全体を含む）が機能しなくなる可能性があります。
-
グローバル変数または関数名が消去される可能性があるため、JavaScriptの指示が適切に機能しなくなる可能性があります。
予約済みのJSプレフィックス
次のプレフィックスは予約済みであり、変数、関数、メソッド、クラスなどを作成するために使用しないでください。
|
ebx_
|
内部ビルトインAPI
|
|
EBX_
|
内部ビルトインAPI
|
|
YAHOO
|
YahooユーザーインターフェイスAPI
|