| Oracle® Fusion Middleware Oracle Site Studio Designerの使用 12c (12.2.1) E67373-01 |
|
 前 |
 次 |
Oracle Site Studioでは、カスタム・フォームまたはカスタム・スクリプトを要素に適用して、すぐに使用可能な動作以外に、コントリビュータの操作を拡張できます。
この項の内容は次のとおりです。
すぐに使用可能な動作以外に、コントリビュータの操作を拡張するために、要素に適用するカスタム・フォームまたはカスタム・スクリプトを使用できます。
たとえば、WYSIWYG要素でサポートされないオブジェクトの追加をコントリビュータに許可する場合や、コンテンツの要件や制限をコントリビュータに強制する場合に設計者が使用するメカニズムとして、これを行います。
Oracle Site Studioでは、すぐに使用を開始できる複数のサンプルのフォームとスクリプトがコンテンツ・サーバーに含まれます(前述のトピックを参照)。これらのファイルの編成、編集および管理に役立つように、それぞれをサイト・アセットとしてサイトに追加できます。
この項の内容は次のとおりです。
スクリプトは、多くの場合、Webサイトで情報表示やユーザーとの対話をより効果的に行うためにWebサイトで使用されます。スクリプトの追加、スクリプトの編集、スクリプトのコピー、スクリプトのサイトへの追加およびサイトからの削除を行うことができます。
カスタム構成スクリプトは、Contributorでの要素内で編集するためのインタフェースを変更する場合に使用されます。各構成スクリプトを使用して、コマンド、ツールバー・ボタンおよびコンテキスト・メニュー項目を追加または置換できます。エディタのどの部分も、特定の要件を満たすためにカスタマイズできます。
詳細は、第11.1.2項「カスタム構成スクリプトについて」を参照してください。
カスタム要素フォームは、カスタム要素定義を操作するために設計されたもので、他の要素と同様にリージョン・テンプレートとリージョン定義に追加します。カスタム要素フォームは、コントリビュータがWebサイトに各種コンテンツを追加して制御するために使用するカスタム・インタフェースを作成するために使用されます。Oracle Site Studioには、複数の事前定義済カスタム要素フォームが同梱されています([CS-Dir]\custom\SiteStudio\support内)。サンプル・フォームも、インストール時にOracle Content Serverにチェックインされます。
この項の内容は次のとおりです。
サイト・アセット・ペインのメニューで、「スクリプト」を選択します。
「新規作成」アイコン(図11-1)をクリックして、「新規」→「JavaScriptファイル」を選択します。
アイテムをコンテンツ・サーバーにチェックインするための「情報の割当てフォーム」が開きます。
「情報の割当てフォーム」に適切な値を入力します。
Oracle Site Studioアセットの名前に関するガイドラインは、第4.2項「サイト・アセットの命名」を参照してください。
完了したら、「情報の割当て」をクリックします。
スクリプトが作成されます。
新しいスクリプトが追加されたときは、それにコードは存在しません。これは空白です。
リストからコピーするスクリプトを選択することも、コンテンツ・サーバーからコピーするスクリプトを選択することも、ローカル・インスタンスからコピーするスクリプトを選択することもできます。
リストからのスクリプトのコピー
サイト・アセット・ペインのメニューで、「スクリプト」を選択します。
コピーするスクリプトをリストから選択します。
「新規作成」アイコン(図11-2)をクリックして、「コピー」→「選択済」を選択します。
アイテムをコンテンツ・サーバーにチェックインするための「情報の割当てフォーム」が開きます。
「情報の割当てフォーム」に適切な値を入力します。
完了したら、「情報の割当て」をクリックします。
スクリプトがコピーされます。
サーバーからのスクリプトのコピー
サイト・アセット・ペインのメニューで、「スクリプト」を選択します。
「新規作成」アイコン(図11-2)をクリックして、「コピー」→「サーバーから」を選択します。
検索結果ページが開きます。
コピー対象に対応する「選択」ボタンをクリックします。
アイテムをコンテンツ・サーバーにチェックインするための「情報の割当てフォーム」が開きます。
「情報の割当てフォーム」に適切な値を入力します。
完了したら、「情報の割当て」をクリックします。
スクリプトがコピーされます。
ローカル・インスタンスからのスクリプトのコピー
サイト・アセット・ペインのメニューで、「スクリプト」を選択します。
「新規作成」アイコン(図11-2)をクリックして、「コピー」→「ローカルから」を選択します。
ナビゲーション・ウィンドウが開きます。
ローカル・インスタンスで、コピーするスクリプトにナビゲートします。
スクリプトを選択し、「開く」をクリックします。
アイテムをコンテンツ・サーバーにチェックインするための「情報の割当てフォーム」が開きます。
「情報の割当てフォーム」に適切な値を入力します。
完了したら、「情報の割当て」をクリックします。
スクリプトがコピーされます。
スクリプトを編集するには、次のタスクを実行します。
サイト・アセット・ペインのメニューで、「スクリプト」を選択します。
リストから、編集するスクリプトを選択し、「編集」アイコン(図11-3)をクリックします。
選択したスクリプトが開き、ソース・ビューで編集できます。
スクリプトのコンテンツ情報を表示するには、次のタスクを実行します。
サイト・アセット・ペインのメニューで、「スクリプト」を選択します。
リストからスクリプトを選択します。
「ドキュメント情報」アイコン(図11-4)をクリックします。
コンテンツ情報ページが開きます。
サイトにスクリプトを追加するには、次のタスクを実行します。
サイト・アセット・ペインのメニューで、「スクリプト」を選択します。
「サイトに追加」アイコン(図11-5)をクリックします。
検索結果ページが開きます。
追加するスクリプトを選択し、「Oracle Site Studio」→「印の付いたドキュメントを選択」をクリックします。
構成によっては、サイトに追加しようとしているアセットがすでに存在するという注意を受け取る場合があります。「OK」をクリックします。
これで、スクリプトがWebサイトに関連付けられ、それを開いて編集できるようになりました。
サイトからスクリプトを削除するには、次のタスクを実行します。
サイト・アセット・ペインのメニューで、「スクリプト」を選択します。
リストから、削除するスクリプトを選択し、「サイトから削除」アイコン(図11-6)をクリックします。
スクリプトを削除しても、単にサイトからそれが削除されるだけで、コンテンツ・サーバーからは削除されません。
カスタム要素は、ユーザー定義の要素です。他の要素(WYSIWYG、テキストのみ、イメージのみ、静的リスト、動的リスト)に加えて、カスタム要素により、個々のビジネス・ニーズに合せてOracle Site Studioを拡張する1つの方法が提供されます。カスタム要素は、他の要素が適していないときに作成されます。
カスタム要素は、ContributorフォームのIFRAME内に存在する完全なHTMLファイルです。カスタム要素がOracle Site Studio要素として正しく機能するためには、カスタム要素でAPIを使用して複数のコールバックを実装する必要があります。
|
重要: Oracle Site Studioサイトを10g リリース3 (10.1.3.3.3)より前のバージョンからアップグレードする場合は、サイト内のすべてのカスタム要素を手動で更新する必要があります。詳細は、第11.3.2項「下位互換性とアップグレード」を参照してください。 |
カスタム要素フォームは、カスタム要素を操作するために設計されたもので、他の要素と同様にコントリビューション・リージョンに追加します。コントリビュータがWebサイトに各種コンテンツを追加するために使用するカスタム・インタフェースを作成するために使用できるという点が、カスタム要素フォーム固有の特徴です。
たとえば、特定のファイル・タイプについてコンテンツ・サーバーに問合せを実行し、そのいずれかのファイルをユーザーが選択できるようにし、ユーザーをContributorに戻すカスタム・フォームを作成できます。または、コントリビュータがソース・コードや書式設定されたテキストをコピーしてWebページに貼り付けるために使用するテキスト・ボックスを表示するフォームを作成できます。
このフォームはユーザーから任意の情報を収集するブラウザベースの汎用フォームにすることができ、ホスト(この場合はContributor)に値を返します。
この項には次のトピックが含まれます:
カスタム要素がContributorフォームで正しく機能するためには、カスタム要素でAPIを使用していくつかのコールバックを実装する必要があります。次の各ノートでは、カスタム要素を作成するための、ElementAPIとそのメソッドについて説明します。
|
注意: カスタム要素へのパス(URL)は、Contributorフォームと同じドメインである必要があります。これにより、Contributorフォームとカスタム要素が、クロスドメイン・スクリプト・ルールに違反することなく通信できるようになります。 |
ElementAPI
ElementAPIオブジェクトは、Contributorフォームとカスタム要素の間の通信を支援するカスタム要素ページに明示的にロードされるJavaScriptオブジェクトです。ElementAPIにより、カスタム要素がContributorフォームと通信するためのメソッドと、Contributorフォームがカスタム要素に通知を送信するためのコールバック・メカニズムが提供されます。
ElementAPI JavaScriptオブジェクトのロード
ElementAPIとそのサポート・ライブラリを使用する前に、ElementAPIをカスタム要素ページにロードする必要があります。ElementAPIのロード後、カスタム要素は、ページの初期化を継続し、カスタム要素がロードされて使用可能になったことをContributorフォームに通知します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Custom Element</title>
<style type="text/css">
* { padding: 0; margin: 0; }
body { font-size: 10pt; font-family: Tahoma; }
#container { height: 150px; overflow: auto; width: 100%; text-align: center; align: center;}
#content { width: 99%; }
</style>
<script type="text/javascript">
var Custom = {};
Custom.originalData = null;
Custom.Initialize = function()
{
// Set callback methods for the Contributor Form to send notifications to this Element.
ElementAPI.SetCallback('GetElementContent', function(callback) {
callback(Custom.GetData());
});
ElementAPI.SetCallback('ActivateElement', function(callback){ $ID('content').focus(); callback(); });
ElementAPI.SetCallback('CanCloseElement', function(callback){ callback({canClose: true}); });
ElementAPI.SetCallback('Show', function(callback){ callback(); });
ElementAPI.SetCallback('Hide', function(callback){ callback(); });
ElementAPI.SetCallback('IsDirty', function()
{
return { isDirty: (Custom.originalData !== Custom.GetData()) };
});
// Set the height of the Custom Element form's host.
var height = ( ElementAPI.GetElementCount() == 1 ) ? '100%' : '150px';
var flags = ElementAPI.GetElementConfigProperty('flags') || {};
var config = ElementAPI.GetElementConfiguration() || {};
if( flags.canSetHeight && config.height && ( config.height.length > 0 ) )
{
height = config.height;
}
height = ElementAPI.SetHostHeight(height);
// Get the default content stored within the data file.
$ID('content').value = Custom.GetDefaultData();
// Add base styles
WCM.DHTML.AddStyleSheet({path: WCM.path + './base/wcm.base.css', context: window});
// Add a resize handler for when the window is resized.
var ResizeHandler = function()
{
WCM.DHTML.SetStyle('container', 'height', WCM.DHTML.GetViewportHeight() + 'px');
WCM.DHTML.SetStyle('container', 'width', WCM.DHTML.GetViewportWidth() + 'px'); };
ResizeHandler();
WCM.DHTML.AddWindowResizeEvent(window, ResizeHandler);
// Immediately store the original data as a baseline for the IsDirty comparison.
Custom.originalData = Custom.GetData();
// Let the Contributor Form know this Custom Element is ready. (required) ElementAPI.Ready();
};
Custom.GetDefaultData = function()
{
return ElementAPI.GetDefaultData()
.replace(/<pre>/g, '')
.replace(/<\/pre>/g, '')
.replace(/</g, "<")
.replace(/>/g, ">") || 'Some default content.';
};
Custom.GetData = function()
{
return '<pre>' + $ID('content').value.replace(/</g, "<").replace(/>/g, ">") + '</pre>';
};
try {
// Tell the Contributor Form to load the Custom Element dependent JavaScript libraries. (required)
// PARAMETERS
// 1st parameter: The context (window) in which the form loads the Custom Element dependent JavaScript libraries into.
// 2nd parameter: A user defined function pointer for the Contributor Form to call when initialization is complete.
window.top.WCM.InitializeCustomElement(window, Custom.Initialize);
catch(e) { }
</script>
</head>
<body>
<div id="container">
<div id="title">Simple Custom Element</div>
<div><textarea id="content" rows="5"></textarea></div>
</div>
</body>
</html>
|
注意: このコード例は、ElementAPIをロードして、これがロードされて使用可能になったことをContributorフォームに通知しています。ただし、ここではデータの収集または保存は行いません。 |
Contributorフォームからカスタム要素への通信
Contributorフォームは、カスタム要素により実装された関数を実行することでカスタム要素と通信します。初期化プロセスの一部として、カスタム要素では、Contributorフォームにこれらの関数のポインタを渡して各関数を登録する必要があります。
次の表に、Contributorフォームに登録できる関数を示します。これらの関数は、いずれもカスタム要素により実装する必要はありませんが、Contributorユーザーからデータを収集して保存する場合は、いくつかの関数が必要になります。また、IsDirty()関数以外の次のすべての関数は、実行されると、タスク完了時の実行のためにコールバック関数のポインタを渡します。これにより、実行時にカスタム要素で非同期タスクを実行する必要がある場合に、非同期通信を行うことができます。
| 関数シグネチャ | 説明 |
|---|---|
| CanCloseElement(callback); | Contributorフォームは、Contributorユーザーが更新を実行したときにこのメソッドを実行します。関数の実装では、カスタム要素を安全に閉じることができるかどうかを評価する必要があります。たとえば、データが検証に合格しない場合、カスタム要素が閉じられないことを示す必要があります。 |
| GetElementContent(callback); | Contributorフォームは、Contributorユーザーが更新を実行したときにこのメソッドを実行します。関数の実装では、保存される文字列コンテンツを戻す必要があります。 |
| Hide(callback); | Contributorフォームは、カスタム要素の上にHTML要素をオーバーレイ表示するDHTMLタスクをフォームで実行するときに常にこのメソッドを実行します。たとえば、このメソッドは、「メタデータ」タブがアクティブ化され、Contributor要素が隠れたときに実行されます。
このメソッドは、特にEphoxベースの要素向けに導入されています(Javaアプレットには常にtop z-indexが含まれるため)。他のすべての要素(HTMLベースの要素)では、このメソッドを無視できます。 |
| Show(callback); | Contributorフォームは、カスタム要素を再表示する(オーバーレイを削除する) DHTMLタスクをフォームで実行するときに常にこのメソッドを実行します。
このメソッドは、特にEphoxベースの要素向けに導入されています(Javaアプレットには常にtop z-indexが含まれるため)。他のすべての要素(HTMLベースの要素)では、このメソッドを無視できます。 |
| IsDirty(); | Contributorフォームは、更新なしにフォーム・ポップアップが閉じられるときに常にこのメソッドを実行します。カスタム要素は、未保存の変更があるかどうかを評価して、保存していない変更がある場合にContributorユーザーに通知できます。 |
次に、カスタム要素がContributorフォームに関数を登録する方法を示すJavaScriptコード・スニペットを示します。
function CanCloseElement(callback)
{
// No data validation in this sample - just pass back a true value.
callback({canClose: true});
// Here is an example of passing a false value
// callback({canClose: false, reason: 'Failed validation. Use only lowercase
// letters.'};
}
function GetElementContent(callback)
{
// Pass back some sample content for demo purposes.
callback('This is my Custom Element Content.');
}
function Show(callback)
{
// Just handle this notification by executing the callback.
callback();
}
function Hide(callback)
{
// Just handle this notification by executing the callback.
callback();
}
function IsDirty()
{
// This Custom Element is never dirty - so pass a false value.
return {isDirty: false};
}
// Set callback methods for the Contributor Form to send notifications to this
// Element.
ElementAPI.SetCallback('CanCloseElement', CanCloseElement);
ElementAPI.SetCallback('GetElementContent', GetElementContent);
ElementAPI.SetCallback('Show', Show);
ElementAPI.SetCallback('Hide', Hide);
ElementAPI.SetCallback('IsDirty', IsDirty);
カスタム要素からContributorフォームへの通信
カスタム要素では、ElementAPI JavaScriptオブジェクトを使用して、Contributorフォームとの通信を開始します。次に、使用可能なElementAPIメソッドのリストを示します。
| 関数シグネチャ | 説明 |
|---|---|
| ElementAPI.GetDefaultData(); | データ・ファイルに格納されたデフォルト・コンテンツを取得します。 |
| ElementAPI.GetSearchResults(options); | Oracle Content Serverの検索結果の取得ページを開きます。 |
| ElementAPI.GetQueryText(options); | 問合せテキストの取得ユーザー・インタフェースを開きます。 |
| ElementAPI.CaptureQuery(options); | Oracle Content Serverの「問合せの取得」ページを開きます。 |
| ElementAPI.GetHyperlink(options); | ハイパーリンク・ウィザード・ユーザー・インタフェースを開きます。 |
| ElementAPI.FocusForm(options); | 親ウィンドウにフォーカスし、要素ウィンドウを隠蔽します。 |
| ElementAPI.SetHostHeight(height); | IFRAMEを格納する要素の高さを設定します。 |
| ElementAPI.SetRequiredIndicator(isRequired); | コントリビュータ・フォーム・ユーザー・インタフェースで「Required」グラフィック・インジケータを切り替えます。 |
| ElementAPI.GetSite(options); | Webサイトの選択選択ユーザー・インタフェースを開きます。 |
| ElementAPI.GetSection(options); | Webサイト・セクションの選択選択ユーザー・インタフェースを開きます。 |
| ElementAPI.GetColor(options); | 「色」選択ユーザー・インタフェースを開きます。 |
| ElementAPI.GetFont(options); | フォントの取得選択ユーザー・インタフェースを開きます。 |
ElementAPIがカスタム要素ページにロードされる際に、ElementAPI依存スクリプトもロードされます。これらのスクリプトには、JavaScript WCMライブラリのほとんどが含まれており、カスタム要素の作成者が使用することもできます。次のスクリプト・ファイルがカスタム要素にロードされます。
wcm.js
./base/wcm.dhtml.js
./base/wcm.get.js
./base/wcm.http.js
./base/wcm.popup.js
./sitestudio/wcm.contentserver.popup.js
./form/elements/wcm.elementapi.js
./sitestudio/elements/wcm.sitestudio.elementapi.js
./sitestudio/wcm.idc.js
./form/elements/element/wcm.element.js
./form/elements/custom/wcm.custom.js
カスタム要素のソースモード・タイプの例
次の単純なカスタム要素の例では、ContributorユーザーによりTEXTAREAに入力されたコンテンツを保存し、それをレイアウトで直接開いています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Custom Element</title>
<style type="text/css">
* { padding: 0; margin: 0; }
body { font-size: 10pt; font-family: Tahoma; }
#container
{
height: 150px;
overflow: auto;
width: 100%;
text-align: left;
align: left;
padding: 7px;
}
.controls
{
border: 1px solid #B9B9B4;
border-top-color: #DDDDD8;
border-bottom-color: #797975;
vertical-align: middle;
font-family: tahoma,verdana,arial,helvetica,sans-serif;
font-size: 100%; /* 11px @ Normal */
font-color: #000;
}
</style>
<script type="text/javascript">
var Custom = {};
Custom.originalData = null;
Custom.Initialize = function()
{
ElementAPI.SetCallback('GetElementContent', function(callback)
{
callback(Custom.GetData());
});
ElementAPI.SetCallback('ActivateElement', function(callback){ $ID('content').focus(); callback(); });
ElementAPI.SetCallback('CanCloseElement', function(callback){ callback({canClose: true}); });
ElementAPI.SetCallback('Show', function(callback){ callback(); });
ElementAPI.SetCallback('Hide', function(callback){ callback(); });
ElementAPI.SetCallback('IsDirty', function()
{
return { isDirty: (Custom.originalData !== Custom.GetData()) };
});
var height = ( ElementAPI.GetElementCount() == 1 ) ? '100%' : '150px';
var flags = ElementAPI.GetElementConfigProperty('flags') || {};
var config = ElementAPI.GetElementConfiguration() || {};
if( flags.canSetHeight && config.height && ( config.height.length > 0 ) )
{
height = config.height;
}
height = ElementAPI.SetHostHeight(height);
$ID('input-value').value = ElementAPI.GetDefaultData();
WCM.DHTML.AddStyleSheet({path: WCM.path + './base/wcm.base.css', context: window});
var ResizeHandler = function()
{
var viewPortWidth = WCM.DHTML.GetViewportWidth();
var viewPortHeight = WCM.DHTML.GetViewportHeight();
WCM.DHTML.SetStyle('container', 'height', viewPortHeight + 'px');
WCM.DHTML.SetStyle('container', 'width', viewPortWidth + 'px');
WCM.DHTML.SetStyle('input-value', 'height', (viewPortHeight - 15) + 'px');
WCM.DHTML.SetStyle('input-value', 'width', (viewPortWidth - (WCM.IS_IE ? 15 : 15)) + 'px');
};
ResizeHandler();
WCM.DHTML.AddWindowResizeEvent(window, ResizeHandler);
Custom.originalData = Custom.GetData();
ElementAPI.Ready();
};
Custom.GetData = function()
{
return $ID('input-value').value;
};
try {
window.top.WCM.InitializeCustomElement(window, Custom.Initialize);
} catch(e) { }
</script>
</head>
<body>
<div id="container" nowrap>
<textarea id="input-value" class="controls" type="text" title="URL"></textarea>
</div>
</body>
</html>
Site Studio 10g リリース3 (10.1.3.3.3)より前のOracle Site Studioリリースと互換性があるすべてのカスタム要素フォームは、Site Studio 10g リリース4 (10.1.4)以降のリリースとは互換性がないため、これらは手動でアップグレード(再作成)する必要があります。下位互換性が維持されていない主な理由は、以前のOracle Site StudioがInternet Explorerの独自仕様のwindow.external機能に依存しているためです。これは、ContributorでActiveXコントロールが使用されていたためです。window.external機能は、コード実行の時点でブロックされ、クロスブラウザ/プラットフォームのDHTMLソリューションでは簡単に複製できません。下位互換性をなくしたことによるメリットは、新しいカスタム要素がより一層柔軟になり、(クロスブラウザ/プラットフォーム・ソリューションであることに加え) Contributorアプリケーション・アーキテクチャに緊密に統合されることです。
レガシー・カスタム要素フォーム(10g リリース3、10.1.3.3.3より前)は、新しいContributorアプリケーションにロードされると、(デフォルトで)検出され、Contributorフォーム内のその場所にエラー・メッセージが表示されます。Contributorアプリケーションは、これを行うために、まずカスタム要素フォームをダウンロードし、ソース・コードを解析して、カスタム要素フォームが新しいContributorアプリケーションと互換性があるかどうかを確認します。
レガシー・カスタム要素フォームを検出する機能とオーバーヘッドは、本番インストールでは必要ないため、この機能はデフォルトではオフです。アップグレードするレガシー・カスタム要素フォームがある場合は、フラグをオンにする必要があります。レガシー・カスタム要素フォームの検出機能を有効にするには、次の行をOracle Content Serverのconfig.cfgファイルに追加して、サーバーを再起動します。
SSValidateCustomElements=true
Oracle Site Studio 11gR1には、11個のサンプル・カスタム・フォーム(要素)が付属しています。これらのサンプル・フォームは、Contributorフォームのフレームワーク内で動作するカスタム要素の実装例です。
これらのサンプルは、Oracle Site Studioコンポーネントのインストール時に、カスタム要素フォームというxWebsiteObjectTypeメタデータ値とともにコンテンツ・サーバーにチェックインされます。
ss_boolean_checkbox_form.htm
このサンプル・フォームは、チェック・ボックスを含む単純なカスタム要素の例です。
ss_boolean_radio_form.htm
このサンプル・フォームは、ラジオ・ボタンを含む単純なカスタム要素の例です。
ss_docname_form.htm
このサンプル・フォームは、コンテンツ・サーバーの検索でコンテンツIDを選択できるカスタム要素の例です。
ss_option_form.htm
このサンプル・フォームは、オプション・リストを構築できるカスタム要素の例です。この例は、きわめて単純な例です。より複雑な例では、コンテンツ・サーバーのメタデータなどを、他の多くのソースからリストに移入できます。
ss_query_form.htm
このサンプル・フォームは、コンテンツ・サーバーの問合せを取得できるカスタム要素の例です。
ss_url_form.htm
このサンプル・フォームは、コンテンツ・サーバーの検索でWebレイアウトURLが返されるようにすることができるカスタム要素の例です。
このサンプル・フォームは、最小限のコードを含む単純なカスタム要素の例です。この特定の例では、テキストのみのエディタを提供する非常に軽量なメソッドであるTEXTAREA HTML要素を使用して、テキストのみのカスタム要素を実装します。
このサンプル・フォームは、整数値を取得するためのカスタム要素の例です。これは、他の場所で使用するパラメータを取得する場合に便利です。
このサンプル・フォームは、最小限のコードを含む単純なカスタム要素の例です。この特定の例では、テキストのみのエディタを提供する非常に軽量なメソッドであるTEXTAREA HTML要素を使用して、テキストのみのカスタム要素を実装します。
このサンプル・フォームは、Contributorユーザーがコンテンツ・サーバーからFLASHオブジェクトを選択できるカスタム要素の例です。
このサンプル・フォームは、使用可能なすべてのElementAPIメソッドを使用するカスタム要素の例です。これらのメソッドのリストの完全なリストは、第11.3.1項「カスタム要素の実装」を参照してください。
カスタム構成スクリプトは、特に、個々の要素に対するコントリビュータの編集領域を変更するために使用されるJavaScriptファイルです。構成スクリプトには、様々な要素を関連付けることができますが、各要素で個別にスクリプトを呼び出す必要があります。
カスタマイズは、WYSIWYG、テキストのみおよびイメージのみの、FCKeditorおよびEphoxベースの要素に影響します。カスタム構成スクリプトを使用して、コマンド、ツールバー・ボタンおよびコンテキスト・メニュー項目を追加または置換できます。エディタのどの部分も、特定の要件を満たすためにカスタマイズできます。
Oracle Site Studioには、複数のサンプル・カスタム構成スクリプトが付属しています。これらのサンプルは、コンテンツ・サーバーへのOracle Site Studioコンポーネントのインストール時に、カスタム構成スクリプトというxWebsiteObjectTypeメタデータ値とともにコンテンツ・サーバーにチェックインされます。
次のスクリプトがサンプルとして含まれています。
ss_fck_simple_command.js: このサンプル・スクリプトは、単純なFCKeditorコマンドの例です。この特定の例では、FCKeditorコマンド、ツールバー・ボタンおよびメニュー項目を実装します。
ss_fck_image_command.js: このサンプル・スクリプトは、既存のssImageコマンドとImageコマンドをオーバーライドするFCKeditorコマンドの例です。この例では、コマンドが再定義されて、既存のイメージ・ツールバー・ボタンとコンテキスト・メニュー項目が再利用されます。
ss_fck_load_multiple_commands.js: このサンプル・スクリプトは、複数のカスタム構成スクリプトをロードする方法を示しています。
ss_fck_template_command.js: このサンプル・スクリプトでは、ユーザーが定義済のHTMLを挿入できるようになります。
サイト・アセット・ペインのカスタム構成スクリプトの詳細は、第11章「スクリプトとフォームの操作」を参照してください。
要素検証ダイアログには、操作する要素のタイプに応じて異なるデフォルトの検証オプションが表示されます(次を参照)。
