6 Oracle JETのユーザー・インタフェースの基礎の理解
htmlElementプロトタイプが拡張され、World Wide Web Consortium (W3C)のカスタム要素に関するWebコンポーネント仕様が実装されています。 カスタム要素を使用すると、Oracle JETコンポーネントをより宣言的な方法で操作し、DOMレイヤーで直接プロパティとメソッドにアクセスできるようになります。 Oracle JETのユーザー・インタフェースについて
Oracle JETには、アプリケーションで使用するコンポーネント、パターンおよびユーティリティが含まれています。 また、このツールキットにはAPI仕様(該当する場合)およびOracle JETクックブックの1つ以上のコード例も含まれています。
Oracle JETのUIコンポーネント、パターンおよびユーティリティの識別
Oracle JETクックブックには、使用可能なコンポーネント、デザイン・パターンおよびユーティリティがすべてリストされています。 デフォルトでは、クックブックは機能セクションに分かれていますが、「Sort」をクリックして、コンテンツをアルファベット順に並べ替えることもできます。
クックブックに含まれているサンプルは、オンラインで編集して変更の効果を即座に確認できます。 また、APIドキュメントのリンクもあります(該当する場合)。
Oracle JETコンポーネントの共通機能について
すべてのOracle JETコンポーネントはカスタムHTML要素として実装されているため、これらのコンポーネントにプログラムによってアクセスすることは、HTML要素と対話することと似ています。
カスタム要素の構造
Oracle JETカスタム要素名はoj-、またはより新しいCore Packコンポーネントの場合はoj-c-で始まり、その他のHTML要素を追加する場合と同じ方法でページに追加できます。 次の例では、oj-labelおよびoj-input-date-timeカスタム要素が、標準のHTML div要素に子要素として追加されています。
<div id="div1">
<oj-label for="dateTime">Default</oj-label>
<oj-input-date-time id="dateTime" value='{{value}}'>
</oj-input-date-time>
</div>各カスタム要素には、次のうち1つ以上を含めることができます。
-
属性: 要素の機能に影響を与える修飾子です。
文字列リテラルは解析され、プロパティ・タイプに強制変換されます。 Oracle JETでは、ブール、数値、文字列、オブジェクト、配列および任意の文字列リテラル型の強制がサポートされています。 任意型は、要素で使用される場合、要素のAPIドキュメント内でアスタリスク(*)を使用してマークされ、オブジェクト、配列または文字列に強制変換されます。
上で定義されている
oj-input-date-time要素において、valueは日付オブジェクトを含む属性です。 これは、属性の値が更新された場合に要素のViewModelを更新する必要があるかどうかを示すバインディング式を使用して定義されています。<oj-input-date-time id="dateTime" value='{{value}}'>{{...}}構文は、要素のvalueプロパティが変更された場合に、要素のViewModel内で更新されることを示します。 属性の値によって対応するViewModelが更新されないようにするには、[[...]]構文を使用します。 -
メソッド: サポートされているメソッド
各カスタム要素のサポートされているメソッドは、そのAPIに記述されています。
-
イベント: サポートされているイベント
カスタム要素に固有のイベントは、そのAPIに記述されています。 要素のViewModelでリスナーのメソッドを定義します。
var listener = function( event ) { // Check if this is the end of "inline-open" animation for inline message if (event.detail.action == "inline-open") { // Add any processing here } };カスタム要素のDOM属性、JavaScriptプロパティまたは
addEventListener()を使用して、リスナーを参照します。-
DOM属性を使用します。
on-event-name構文を使用して、カスタム要素でリスナーを宣言します。<oj-input-date-time on-oj-animate-start='[[listener]]'</oj-input-date-time>この例では、リスナーの値が変更されることを予期していないため、リスナーが
[[...]]構文を使用して宣言されていることに注意してください。 -
JavaScriptプロパティを使用します。
.onEventNameプロパティにViewModelのリスナーを指定します。myInputDateTime.onOjAnimateEnd = listenerJavaScriptプロパティで
onOjAnimateEndプロパティにcamelCaseが使用されていることに注意してください。 camelCasedのプロパティは、たとえば、on-oj-animate-endのように、大文字の前にダッシュを挿入してその文字を小文字に変換することによって、属性名にマップされます。 -
addEventListener()APIを使用します。myInputDateTime.addEventListener('ojAnimateEnd', listener);
デフォルトでは、
valueChangedなどのプロパティが更新されるたびに、JETコンポーネントでpropertyChangedカスタム・イベントも起動されます。 前述の3つの方法のいずれかを使用して、リスナーを定義および追加できます。propertyChangedイベントを宣言的に参照する場合は、on-property-changed構文を使用します。<oj-input-date-time value="{{currentValue}}" on-value-changed="{{valueChangedListener}}" </oj-input-date-time> -
-
スロット
Oracle JET要素には、要素内でのコンテンツの配置を決定する2つのタイプの子コンテンツを含めることができます。
-
サポートされているslot属性を含むすべての子要素は、該当する名前付きスロットに移動されます。 サポートされているすべての名前付きスロットは、要素のAPIに記述されています。 サポートされていない名前付きスロットを含む子要素は、DOMから削除されます。
<oj-table> <div slot='bottom'<oj-paging-control></oj-paging-control></div> </oj-table> -
slot属性がないすべての子要素は、通常の子とも呼ばれるデフォルトのスロットに移動されます。
-
カスタム要素は、そのモジュールがアプリケーションによってロードされた後にのみ認識されます。 要素が認識されると、Oracle JETではその要素のビジー状態が登録され、標準要素からカスタム要素に要素をアップグレードするプロセスが開始されます。 アップグレード・プロセスが完了するまで、要素を対話に使用することはできません。 アプリケーションでJETカスタム要素を操作する前に、ページレベルまたは要素が範囲のBusyContextをリスニングする必要があります。 ただし、(プロパティの取得ではなく)プロパティの設定が可能なのはBusyContextが初期化される前です。 ビジー・コンテキストの範囲指定方法については、 BusyContext APIドキュメントを参照してください。
カスタム要素のアップグレードは、データ・バインディングを管理するバインディング・プロバイダに依存します。 バインディング・プロバイダで属性式を設定および更新する必要があります。 その管理対象サブツリー内のすべてのカスタム要素のアップグレードは、プロバイダによって該当のサブツリーにバインディングが適用されるまで完了しません。 デフォルトでは、ページの場合にはバインディング・プロバイダは1つですが、サブツリー固有のバインディング・プロバイダは、data-oj-binding-provider属性に値noneおよびknockoutを指定して使用することで追加できます。 デフォルト・バインディング・プロバイダはknockoutですが、ページまたはDOMのサブツリーで式構文またはknockoutを使用しない場合、アプリケーションで要素にdata-oj-binding-provider=”none"を設定し、依存するJETカスタム要素でバインディングが適用されてアップグレードが終了するのを待機しないようにすることができます。
その他の共通機能
Oracle JETカスタム要素にも、次の共通機能があります。
-
コンテキスト・メニュー
カスタム要素では、各要素のAPIドキュメントに説明されている、Oracle JETカスタム要素にコンテキスト・メニューを追加する
slot属性がサポートされています。<oj-some-element> <-- use the contextMenu slot to designate this as the context menu for this component --> <oj-menu slot="contextMenu" style="display:none" aria-label="Some element's context menu" ... </oj-menu> </oj-some-element> -
キーボード・ナビゲーションおよびその他のアクセシビリティ機能
キーボード・ナビゲーションをサポートするOracle JETコンポーネントには、そのAPIドキュメントにエンド・ユーザー情報がリストされています。 Oracle JETおよびアクセシビリティの詳細は、「アクセシブルなOracle JETアプリケーションの開発」を参照してください。
-
ドラッグ・アンド・ドロップ
Oracle JETは、標準HTML5のドラッグ・アンド・ドロップのサポートが含まれており、HTML5のドラッグ・アンド・ドロップ動作を、サポートされているモバイルおよびデスクトップ・ブラウザに拡張するために、
dnd-polyfillライブラリが用意されています。 さらに、oj-tableなどの一部のOracle JETカスタム要素では、dnd属性を介してドラッグ・アンド・ドロップ動作がサポートされています。 特定の詳細は、コンポーネントのAPIドキュメントおよびクックブックの例を参照してください。 HTML5のドラッグ・アンド・ドロップについてさらに学習するには、http://www.w3schools.com/html/html5_draganddrop.aspを参照してください。 -
遅延レンダリング
多くのOracle JETカスタム要素では、コンテンツが表示されるまで
oj-deferを使用してレンダリングを遅延する機能がサポートされています。oj-deferを使用するには、カスタム要素の周囲でラップします。<oj-collapsible id="defer"> <h4 id="hd" slot="header">Deferred Content</h4> <oj-defer> <oj-module config='[[deferredRendering/content]]'> </oj-module> </oj-defer> </oj-collapsible>oj-module定義の指定に従って、遅延コンテンツをアプリケーションのビューおよびViewModel (content.htmlおよびcontent.js)に追加します。 完全なコード例は、折りたたみ-レンダリングの遅延を参照してください。oj deferをサポートするカスタム要素のリストは、 oj-deferを参照してください。
カスタム要素の例および参照
Oracle JETクックブックおよび『Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンス』には、カスタム要素の使用方法を示す例があります。 さらに、クックブックには、サンプルをダウンロードせずにサンプル・コードを直接変更し、結果を表示できる編集機能のデモがあります。
カスタム要素のWorld Wide Web Consortium (W3C) Webコンポーネント仕様についてさらに学習するには、Custom Elementsを参照してください。
バインディングおよび制御フローについて
Oracle JETには、Knockoutを使用してアプリケーション内のページに動的要素を簡単にバインドするためのコンポーネントと式が含まれています。
oj-bind-textを使用したテキスト・ノードのバインド
Oracle JETは、oj-bind-text要素の使用とojknockoutモジュールのインポートにより、テキスト・ノードの変数へのバインディングをサポートします。
oj-bind-text要素は、バインディングが適用された後、DOMから削除されます。 たとえば、次のコード・サンプルは、oj-input-textとoj-buttonの両方でテキスト・ノードがbuttonLabel変数にバインドされている例を示しています。 入力テキストが更新されると、ボタン・テキストも自動的に更新されます。
<div id='button-container'>
<oj-button id='button1'>
<span><oj-bind-text value="[[buttonLabel]]"></oj-bind-text></span>
</oj-button>
<br><br>
<oj-label for="text-input">Update Button Label:</oj-label>
<oj-input-text id="text-input" value="{{buttonLabel}}"></oj-input-text>
</div>次に、この例のviewModelを作成するためのスクリプトを示します。
import * as ko from "knockout";
import "ojs/ojinputtext";
import "ojs/ojlabel";
import "ojs/ojbutton";
class ButtonModel {
buttonLabel: ko.Observable<string>;
constructor() {
this.buttonLabel = ko.observable("My Button");
}
}
export = ButtonModel;define(["knockout", "ojs/ojknockout", "ojs/ojbutton",
"ojs/ojinputtext", "ojs/ojlabel"],
function (ko) {
function ButtonModel() {
this.buttonLabel = ko.observable("My Button");
}
return ButtonModel;
});次の図は、サンプル・コードの出力を示しています。
Oracle JETクックブックには、この項で使用されている完全な例があります。 テキスト・バインディングに関する項を参照してください。
HTML属性のバインド
Oracle JETは、属性名に":"という接頭辞を付けることとojknockoutモジュールをインポートすることにより、任意のHTML要素の属性に対する一方向属性データ・バインディングをサポートします。
HTMLまたはJET要素内のHTML属性を使用するには、接頭辞としてコロンを付けます。 JETコンポーネント固有の属性には接頭辞は必要ありません。
次のコード・サンプルは、接頭辞がある構文と接頭辞がない構文の両方を使用した、2つのJET要素と2つのHTML要素を示しています。 ラベルおよび入力要素はネイティブなHTML要素であるため、それらのデータがバインドされたすべての属性に接頭辞としてコロンを付ける必要があります。 oj-labelとoj-input-text要素は、ネイティブなHTML要素属性についてのみ接頭辞を使用し、コンポーネント固有の属性には接頭辞なしの構文を使用します。
<div id="demo-container"> <oj-label for="[[inputId1]]">oj-input-text element</oj-label> <oj-input-text :id="[[inputId1]]" value="{{value}}"></oj-input-text> <br><br> <label :for="[[inputId2]]">HTML input element</label> <br> <input :id="[[inputId2]]" :value="[[value]]" style="width:100%;max-width:18em"/> </div>
次に、この例のviewModelを作成するためのスクリプトを示します。
import * as ko from "knockout";
import "ojs/ojinputtext";
import "ojs/ojlabel";
import 'ojs/ojknockout';
class ViewModel {
inputId1: ko.Observable<string>;
inputId2: ko.Observable<string>;
value: ko.Observable<string>;
constructor() {
this.inputId1 = ko.observable("text-input1");
this.inputId2 = ko.observable("text-input2");
this.value = ko.observable("This text value is bound.");
}
}
export = ViewModel;define(["knockout", "ojs/ojknockout", "ojs/ojinputtext", "ojs/ojlabel"],
function (ko) {
function ViewModel() {
this.inputId1 = ko.observable("text-input1");
this.inputId2 = ko.observable("text-input2");
this.value = ko.observable("This text value is bound.");
}
return ViewModel;
});
oj-bind-ifを使用した条件の処理
Oracle JETは、oj-bind-if要素の使用とojknockoutモジュールのインポートにより、要素の条件付きレンダリングをサポートします。
oj-bind-if要素は、バインディングが適用された後でDOMから削除されます。スロッティングに使用する場合はdivなどの別の要素でラップする必要があります。 slot属性はoj-bind-ifでサポートされていないため、ラッパーに適用する必要があります。 たとえば、次のコード・サンプルは、oj-buttonsetで選択されたオプションに基づいて、条件付きでレンダリングされるイメージを示しています。
<div id="demo-container">
<oj-buttonset-one class="oj-buttonset-width-auto" value="{{buttonValue}}">
<oj-option id="onOption" value="on">On</oj-option>
<oj-option id="offOption" value="off">Off</oj-option>
</oj-buttonset-one>
<br><br>
<div>Image will be rendered if the button is on:</div>
<oj-bind-if test="[[buttonValue() === 'on']]">
<oj-avatar role="img" aria-label="Avatar of Amy Bartlet" size="md" initials="AB"
src="../css/images/avatar-image.jpg" class="oj-avatar-image"></oj-avatar>
</oj-bind-if>
</div>上の例では、oj-avatar要素は、カスタムまたはプレースホルダ・イメージを表示できるアイコンです。 oj-avatarに関する項を参照してください。
次に、この例のビュー・モデルを作成するためのスクリプトを示します。
import * as ko from "knockout";
import "ojs/ojknockout";
import "ojs/ojbutton";
import "ojs/ojavatar";
class ViewModel {
buttonValue = ko.observable("off");
}
export = ViewModel;define(['knockout', 'ojs/ojknockout', 'ojs/ojbutton', 'ojs/ojavatar'],
function (ko) {
function ViewModel() {
this.buttonValue = ko.observable("off");
}
return ViewModel;
}
);次の図は、サンプル・コードの出力を示しています。 oj-buttonsetが'on'に設定されている場合、oj-avatar要素がレンダリングされて表示されます。
Oracle JETクックブックには、この項で使用されている完全な例があります。 Ifバインディングに関する項を参照してください。
oj-bind-for-eachを使用したループ命令の処理
Oracle JETは、oj-bind-for-each要素の使用とojknockoutモジュールのインポートにより、配列のアイテムのバインディングなどのループ命令の処理をサポートします。
oj-bind-for-each要素は、単一のtemplate要素をその直接の子としてのみ受け入れます。 liタグなどの繰り返されるマークアップは、すべてtemplateタグの内部に配置する必要があります。 たとえば、次のコード・サンプルは、順序なしリストの中にネストされた別の順序なしリストを示しています。 リスト・アイテムは、ネストされたoj-bind-for-each要素内のoj-bind-textタグを使用して作成されます。
<div id="form-container">
<ul>
<oj-bind-for-each data="[[categories]]">
<template data-oj-as="category">
<li>
<ul>
<oj-bind-for-each data="[[category.data.items]]">
<template data-oj-as="item">
<li>
<oj-bind-text value="[[category.data.name
+ ' : ' + item.data]]"></oj-bind-text>
</li>
</template>
</oj-bind-for-each>
</ul>
</li>
</template>
</oj-bind-for-each>
</ul>
</div>上の例では、data-oj-as属性は、バインドされたデータの別名を提供しています。 これらの別名(categoryおよびitem)は、ネストされたoj-bind-for-each要素およびoj-bind-text要素で参照されます。 data-oj-as属性を使用して別名を指定しない場合は、かわりに$currentを使用する必要があります。 その場合、コードは次のようになります。
. . .
<oj-bind-for-each data="[[categories]]">
<template>
<li>
<ul>
<oj-bind-for-each data="[[$current.data.items]]">
. . .次に、この例のviewModelを作成するためのスクリプトを示します。
import 'ojs/ojknockout';
import "ojs/ojbutton";
class ViewModel {
categories: Array<Object>;
constructor() {
this.categories =
[{ name: "Fruit", items: ["Apple", "Orange", "Banana"] },
{ name: "Vegetables", items: ["Celery", "Corn", "Spinach"] }
];
}
}
export = ViewModel;define(["ojs/ojknockout", "ojs/ojbutton"],
function () {
function ViewModel() {
this.categories =
[{ name: "Fruit", items: ["Apple", "Orange", "Banana"] },
{ name: "Vegetables", items: ["Celery", "Corn", "Spinach"] }
];
}
return ViewModel;
});次の図は、サンプル・コードの出力を示しています。
図binding-foreach-rw.pngの説明
Oracle JETクックブックには、この項で使用されている完全な例があります。 Foreachバインディングに関する項を参照してください。
スタイル・プロパティのバインディング
Oracle JETの属性バインディング構文は、オブジェクトとして渡すかドット表記法で設定することができるスタイル属性もサポートしています。 ojknockoutモジュールをインポートする必要があります。
スタイル属性バインディング構文で使用するオブジェクトは、そのスタイル・プロパティがJavaScript名により参照されている必要があります。 アプリケーションでは、ドット表記法を使用してスタイル・サブプロパティを設定することもできます。これは、プロパティにCSS名を使用します。 次のコード・サンプルは、style属性を含む2つのブロック要素を示しています。 最初の要素はstyleオブジェクトをバインドし、2番目の要素は定義済のstyle属性にプロパティを直接バインドしています。
<div id="demo-container"> <div :style="[[style]]">Data bound style attribute</div> <br> <div :style.color="[[fontColor]]" :style.font-style="[[fontStyle]]">Data bound style using dot notation</div> </div>
次に、この例のviewModelを作成するためのスクリプトを示します。 上で参照されているstyleオブジェクトは、次のように強調表示されます。
import 'ojs/ojknockout';
import 'ojs/ojlabel';
import 'ojs/ojinputtext';
class ViewModel {
fontColor = 'blue';
fontStyle = 'italic';
style = { fontWeight: 'bold',
color: 'red' };
}
export = ViewModel;define(["ojs/ojknockout", "ojs/ojlabel", "ojs/ojinputtext" ],
function () {
function ViewModel() {
this.fontColor = 'blue';
this.fontStyle = 'italic';
this.style = {
fontWeight: 'bold',
color: 'red'
};
}
}
return ViewModel;
});次の図は、サンプル・コードの出力を示しています。
図binding-style-rw.pngの説明
Oracle JETクックブックには、この項で使用されている完全な例があります。 スタイル・バインディングに関する項を参照してください。
イベント・リスナーのJETおよびHTML要素へのバインド
Oracle JETは、on-[eventname]構文の使用とojknockoutモジュールのインポートにより、JETおよびHTML要素へのイベント・リスナーの一方向属性データ・バインディングを提供します。
Oracle JETのイベント属性は、ネイティブHTMLイベント・リスナーについて2つの重要な利点を提供します。 第1に、リスナーに次の3つのパラメータを提供します。
-
event: クリックやマウスオーバーなどのDOMイベント。 -
data: このパラメータはbindingContext['$data']と同じです。oj-bind-for-eachなどの繰り返し処理内で使用される場合、このパラメータはbindingContext['$current']と同じです。 -
bindingContext: 要素に適用されているデータ・バインディング・コンテキスト(またはスコープ)の全体。
第2に、モデル状態へのアクセス権があり、dataおよびbindingContextパラメータを使用して、ViewModelに定義されている関数にアクセスできます。
ノート:
thisコンテキストはイベント・リスナーに直接使用できません。 これは、ネイティブHTMLイベント・リスナーと同じ動作です。
たとえば、次のコード・サンプルは、oj-c-button要素ではon-oj-actionイベント属性を使用し、HTMLボタン要素ではon-clickイベント属性を使用して、次に示すViewModelで定義されたカスタム関数にアクセスしている例を示しています。
<div id="demo-container">
<oj-label for="button1">oj-c-button element</oj-label>
<oj-c-button id="button1" label="Click me!" on-oj-action="[[clickListener1]]"></oj-c-button>
<br><br>
<label for="button2">HTML button element</label>
<br>
<button id="button2" on-click="[[clickListener2]]">Click me!</button>
<br><br>
<div style="font-weight:bold;color:#ea5b3f;">
<oj-bind-text value="[[message]]"></oj-bind-text>
</div></div>ノート:
HTMLイベントには、onclickやonloadのように、接頭辞"on"を使用します。 JETイベントには、on-clickやon-loadのように、接頭辞"on-"を使用します。
次に、この例のviewModelを作成するためのスクリプトを示します。 messageパラメータにアクセスするためdata属性を使用することに注意してください。
import * as ko from 'knockout';
import "oj-c/button";
import 'ojs/ojlabel';
import 'ojs/ojknockout';
class ViewModel {
message = ko.observable();
clickListener1 = (
event: Event,
data: { message: ko.Observable },
bindingContext: ko.BindingContext
) => {
data.message('oj-c-button is clicked');
};
clickListener2 = (
event: Event,
data: { message: ko.Observable },
bindingContext: ko.BindingContext
) => {
data.message('HTML button is clicked');
};
}define(["knockout", "ojs/ojknockout", "oj-c/button", "ojs/ojlabel"],
function (ko) {
function ViewModel() {
this.message = ko.observable();
this.clickListener1 = (event, data, bindingContext) => {
data.message('oj-c-button is clicked');
};
this.clickListener2 = (event, data, bindingContext) => {
data.message('HTML button is clicked');
};
}
return ViewModel;
});次の図は、サンプル・コードの出力を示しています。
図binding-event.pngの説明
Oracle JETクックブックには、この項で使用されている完全な例があります。 イベント・バインディングに関する項を参照してください。
クラスのバインド
Oracle JET属性バインディング構文では、コンポーネントにクラスを設定するために使用できるclass属性のサポートが強化されています。 属性は、文字列、オブジェクトまたは配列を受け入れます。 ojknockoutモジュールをインポートする必要があります。
:class属性バインディングは、スペース区切りの文字列、クラスの配列、またはキーが個々のスタイル・クラスであり、その値がブール値またはDOM内のクラスの追加および削除に使用される式であるオブジェクトに解決される式をサポートします。 オブジェクト値のみがクラスのオン/オフの切替えに使用できますが、配列および文字列値はクラスの設定にのみ使用されます。
たとえば、次のコード・サンプルは、oj-input-textとHTMLのinputの両方で、:class属性を使用している例を示しています。
<oj-label for="input1">oj-input-text element</oj-label>
<oj-input-text
id="input1"
:class="[[{'oj-form-control-text-align-right': alignRight}]]"
value="Text Content"></oj-input-text>
<br />
<br />
<oj-c-button
id="button2"
label="Toggle Alignment"
on-oj-action="[[clickListener2]]">
</oj-c-button>
<br />
<br />
<br />
<label for="input2">HTML input element</label>
<br />
<input
id="input2"
:class="[[classArrayObs]]"
value="Text Content"
class="demo-width"/>
<br />
<br />
<oj-c-button
id="button1"
label="Add Class"
on-oj-action="[[clickListener1]]">
</oj-c-button>次に、この例のviewModelを作成するためのスクリプトを示します。
import * as ko from 'knockout';
import 'ojs/ojknockout';
import "oj-c/button";
import {CButtonElement } from "oj-c/button";
import 'ojs/ojlabel';
import 'ojs/ojinputtext';
class ViewModel {
alignRight = ko.observable(false);
classArrayObs = ko.observableArray();
private classList = ['oj-text-color-danger', 'oj-typography-bold', 'demo-italic'];
clickListener1 = () => {
this.classArrayObs.push(this.classList.pop()); // Disable the add button once we're out of classes
if (this.classList.length === 0) {
(document.getElementById('button1') as CButtonElement).disabled = true;
}
};
clickListener2 = () => {
this.alignRight(!this.alignRight());
};
}
export = ViewModel;define(["knockout", "ojs/ojknockout", "oj-c/button", "ojs/ojlabel", "ojs/ojinputtext"],
function (ko) {
function ViewModel() {
this.alignRight = ko.observable(false);
this.classArrayObs = ko.observableArray();
this.classList = ["oj-text-color-danger", "oj-typography-bold", "demo-italic",];
this.clickListener1 = (event, data, bindingContext) => {
this.classArrayObs.push(this.classList.pop());
if (this.classList.length === 0) {
document.getElementById("button1").disabled = true;
}
};
this.clickListener2 = (event, data, bindingContext) => {
this.alignRight(!this.alignRight());
};
}
return ViewModel;
});次の図は、サンプル・コードの2つの出力のうち、最初の出力を示しています。 ボタンはoj-form-control-text-align-rightクラス・プロパティのオン/オフを切り替えるトグルとして機能し、テキストの位置合せを変更します。
図binding-class-2-rw.pngの説明
次の図は、サンプル・コードの2つの出力のうち、2番目の出力を示しています。 ボタンは関数をコールして事前定義済のクラスの配列を取得し、それをinput要素に追加します。 各クラスにはCSS変更が含まれ、これらの変更はクラスが追加されると有効になります。
図binding-class-1-rw.pngの説明
Oracle JETクックブックには、この項で使用されている完全な例があります。 クラス・バインディングに関する項を参照してください。
ページへのOracle JETコンポーネントの追加
Oracle JETクックブックのレシピおよびAPIドキュメントを使用して、ページに追加する特定の要素および機能を示す例を識別します。
まだ使用していない場合は、この演習で使用するアプリケーションを作成します。
次の手順を使用して、Oracle JETカスタム要素をページに追加します。
アニメーション効果の追加
oj-moduleコンポーネントのanimationプロパティをModuleAnimationsネームスペースとともに使用して、あるビューから別のビューにユーザーが遷移またはドリルする際のアニメーション効果を構成できます。 oj-moduleを使用していない場合は、AnimationUtilsネームスペースをかわりに使用して、Oracle JETコンポーネントまたはHTML要素にアニメーションを追加できます。
oj-moduleコンポーネントを使用したアニメーション効果の追加
ModuleAnimationsネームスペースには、次のアニメーション効果の構成に使用できる事前構成済の実装が含まれています。
-
coverStart: 古いビューを隠すように新しいビューが横にスライドします。 -
coverUp: 古いビューを隠すように新しいビューが上にスライドします。 -
drillIn: アニメーション効果はプラットフォームに依存します。-
WebおよびiOS:
coverStart -
Android:
coverUp
-
-
drillOut: アニメーション効果はプラットフォームに依存します。-
WebおよびiOS:
revealEnd -
Android:
revealDown
-
-
fade: 新しいビューがフェード・インし、古いビューがフェード・アウトします。 -
goLeft: 左側の兄弟ビューに移動します。 デフォルトの効果はプラットフォームに応じて異なります。-
WebおよびiOS: なし
-
Android:
pushRight
-
-
goRight: 右側の兄弟ビューに移動します。 デフォルトの効果はプラットフォームに応じて異なります。-
WebおよびiOS: なし
-
Android:
pushLeft
-
-
pushLeft: 新しいビューが古いビューを左に押し出します。 -
pushRight: 新しいビューが古いビューを右に押し出します。 -
revealDown: 新しいビューが見えるように古いビューが下にスライドします。 -
revealEnd: ロケールに従って、新しいビューが見えるように、新しいビューが右または左にスライドします。 -
zoomIn: 新しいビューがズーム・インします。 -
zoomOut: 古いビューがズーム・アウトします。
oj-moduleコンポーネントを使用してアニメーションを追加する方法を示す例は、モジュール・コンポーネントによるアニメーション効果を参照してください。
AnimationUtilsを使用したアニメーション効果の追加
AnimationUtilsネームスペースには、HTML要素およびOracle JETコンポーネントで次のアニメーション効果を構成するために使用できるメソッドが含まれています。
-
collapse: 要素の縮小に使用します -
expand: 要素の展開に使用します -
fadeInおよびfadeOut: 要素のフェード・インとフェード・アウトに使用します。 -
flipInおよびflipOut: 要素を回転させて表示したり、非表示にするために使用します。 -
ripple: 要素に波紋を広げるために使用します。 -
slideInおよびslideOut: 要素のスライド・インとスライド・アウトに使用します。 -
zoomInおよびzoomOut: 要素のズーム・インとズーム・アウトに使用します。
メソッドのオプションに応じて、delay、durationおよびdirectionなどのプロパティを構成できます。 AnimationUtilsネームスペースを使用してアニメーションを構成する方法を示す例は、アニメーション効果を参照してください。
追加したコンポーネントの表示の管理
DOM内のOracle JETコンポーネントの表示をプログラムで管理する場合は、推奨されるベスト・プラクティスに従ってください。
コレクション・コンポーネントやその他の複雑なコンポーネントの表示を、noneまたはblockのCSS displayプロパティ値で管理する場合、コンポーネントを非表示にするにはComponents.subtreeHidden(node)を、コンポーネントを表示するにはComponents.subtreeShown(node)の使用が必要になる場合もあります。 nodeパラメータは、表示または非表示にするコンポーネントのDOM内のサブツリーのルートを参照します。 これらのタイプのコンポーネントの表示ステータスを変更した場合は、アプリケーションでコンポーネント・インスタンスが引き続き正しく機能するよう、Oracle JETに通知する必要があります。
表示の管理をプログラムで行っているコンポーネントの表示状態を変更する場合、必ずしもOracle JETに通知が必要というわけではありません。 oj-collapsible、oj-dialog、oj-popupなどのコンポーネントは、Components.subtreeHidden(node)またはComponents.subtreeShown(node)をコールする必要がないコンポーネントの例です。 これらのコンポーネントは、表示が変更されたときのレンダリングを管理し、その中に含まれるコンポーネントも管理します。 同様に、Oracle JETはoj-bind-ifコンポーネントのtest条件の評価に応じて、DOMの適切な部分をリライトするため、これらのメソッドをoj-bind-ifコンポーネントと組み合せて使用する必要はありません。
コンポーネントを表示または非表示にする際に、subtreeHiddenおよびsubtreeShownメソッドでOracle JETに通知しない場合、データのレンダリングが失敗したり、他のコンポーネント属性の設定が優先されなかったりするなど、コンポーネントで予期しない動作が発生する可能性があります。 subtreeHiddenおよびsubtreeShownメソッドの詳細は、『Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンス』を参照してください。