この章の全体を通して「Articles」サンプル・アプリケーションを使用し、RESTコールを実行するアプリケーションの基本アーキテクチャについて説明します。
この章には次の項が含まれます。
図72-1は、「Articles」サンプル・アプリケーションのソース構造を示しています。デプロイメント時に、次のディレクトリはソースからターゲットにコピーされます。lib
ディレクトリの内容は/WEB-INF/lib/
にコピーされます。resources
ディレクトリの内容は、/WEB-INF/classes/
にコピーされます。
「Articles」は、Spring MVCで開発されたJava Webアプリケーションです。次のページが提供されます。
/install.app
は、「Articles」のインストール・ページです。また、アプリケーションが正常にインストールされた場合に確認メッセージが表示されます。
/home.app
は、「Articles」アプリケーションのホーム・ページです(図72-3)。
applicationContext.xml
(/WEB-INF/
)には、SSO構成およびアプリケーション固有の構成(事前定義済ユーザーや、データ・モデルおよびアセットが有効化されるサイトなど)が保持されます。
spring-servlet.xml
(/WEB-INF/
)は、デフォルトのSpring構成ファイルです。このファイルはSpring構成を格納し、次のコントローラを参照します(「ソース・ファイル」を参照)。
HomeController
InstallController
LayoutController
ProxyController
log4j.properties
(/resources/
)は、ロギング構成ファイルです。アプリケーションのデプロイ時に、/resources/
から/WEB-INF/classes/
にコピーされます。
ソース・ファイル
/sample app/articles/src/main/java/
/sample/
フォルダには、次に示すソース・ファイルが含まれます。
Configuration.java
は、(Springフレームワークによって)applicationContext.xml
ファイルから移入されます(第72.2項「構成ファイル」を参照)。
HomeController.java
は、単一のホーム・ページをレンダリングするホーム・ページ・コントローラです。このコントローラは、REST APIを使用してWebCenter Sitesプラットフォームからサンプル記事のリストを読み込み、それらをホーム・ページに表示します。
サンプル記事は、/sample app/articles/src/main/resources/install
に格納されているイメージとテキストで構成されます。サンプル記事は、InstallController.java
によって、WebCenter Sitesデータベースにインストールされます。
InstallController.java
は「Articles」アプリケーションを登録し、アプリケーションのアセット・モデルとサンプル・アセットをデータベースに書き込みます。
LayoutController.java
は、WEM UIフレームワークで使用されるアプリケーションのレイアウト・ページ(layout.app
)を表示します。LayoutController.java
は、アプリケーションの登録時にも使用されます。
ProxyController.java
は、AJAXリクエストをWebCenter Sites RESTサーブレットに委任します。
TldUtil.java
ユーティリティ・クラスにはTLD機能の実装が含まれます。
インストーラのリソース
/sample app/articles/src/main/resources/install
/install/
フォルダには次のリソースが含まれます。これらのリソースはホーム・ページを構成する際に、InstallController
で使用されます(図72-3)。
strategies.png
strategies.txt
tips.png
tips.txt
ホーム・ページ・ファイル
/sample app/articles/src/main/webapp/images
/images/
フォルダには次のファイルが含まれます。
articles.png
アイコン(図72-2)。アプリケーション・バーで「Articles」アプリケーションを表します。
図72-3のファイル:
edit.png
は、「編集」機能用のアイコンです。
save.png
は、「保存」機能用のアイコンです。
cancel.png
は、「取消」機能用のアイコンです。
スクリプト
/sample app/articles/src/main/webapp/scripts
/scripts/
フォルダには、文字列とJSONオブジェクトとの変換に使用されるjson2.js
ユーティリティ・スクリプトが含まれます。
スタイル
/sample app/articles/src/main/webapp/styles
/styles/
フォルダには、このWebアプリケーションで使用されるCSSスタイルを指定するためのmain.css
が含まれます。
ビュー
/sample app/articles/src/main/WEB-INF/jsp
/jsp/
フォルダには次のファイルが含まれます。
home.jsp
。「Articles」アプリケーションのホーム・ページ・ビューをレンダリングする際に使用されます(図72-3)
layout.jsp
。アプリケーションのレイアウトを定義します。
WEB-INF
/sample app/articles/src/main/WEB-INF
/WEB-INF/
フォルダには次のファイルが含まれます。
articles.tld
。TLD宣言ファイルです。
spring-servlet.xml
。Spring構成ファイルです。
web.xml
。Webアプリケーションのデプロイメント・ディスクリプタです。
WebCenter Sites RESTリソースは、XMLおよびJSONという2種類の入出力フォーマットをサポートしています。目的の戻りフォーマットを取得するには、MIMEタイプapplication/xml
またはapplication/json
を指定するHTTPヘッダーを設定する必要があります。
たとえば、入力フォーマットをXMLに指定する場合は、Content-Type
をapplication/xml
に設定します。出力フォーマットを指定する場合は、Accept
(予期されるフォーマット)をapplication/xml
に設定します。その他の出力フォーマットを指定すると、それらは無視されます。Content-Type
またはAccept
で何も指定されていない場合のデフォルトはXML
です(サンプル・コードについては、第72.3.1項「JavaScriptからのRESTコールの実行」の行64および66を参照)。
RESTコールの詳細は、この項の次のトピックを参照してください。
次のコード(home.jsp
)は、アセットのRESTサービスに対してAJAXコールを実行して、アセット・データを保存します。実際には、プロキシ・コントローラに対してリクエストが実行され、プロキシ・コントローラから宛先のRESTサービスにリクエストがリダイレクトされます。
注意: JSONのstringifyライブラリ( |
// Form the URL pointing to the asset service
// to the proxy controller, which will redirect this request to the CS REST servlet.
var idarr = assetId.split(":");
var assetUrl = "${pageContext.request.contextPath}/REST/sites/${config.csSiteName}/types/" + idarr[0] + "/assets/" + idarr[1];
// For the data object to be posted.
var data =
{
"attribute" :
[
{
"name" : "source",
"data" :
{
"stringValue" : document.getElementById("source_e_" + assetId).value
}
},
{
"name" : "cat",
"data" :
{
"stringValue" : document.getElementById("cat_e_" + assetId).value
}
}
],
"name" : document.getElementById("name_e_" + assetId).value,
"description" : document.getElementById("desc_e_" + assetId).value,
// This should be removed.
"publist" : "${config.csSiteName}"
};
// Convert JSON data to string.
var strdata = JSON.stringify(data);
// Perform AJAX request.
var req = getXmlHttpObject();
req.onreadystatechange = function ()
{
if (req.readyState == 4)
{
if (req.status == 200)
{
// On successful result
// update the view controls with new values and switch the mode to 'view'.
for (c in controls)
{
document.getElementById(controls[c] + "_v_" + assetId).innerHTML =
document.getElementById(controls[c] + "_e_" + assetId).value;
}
switchMode(assetId, false);
}
else
{
// Error happened or the session timed out,
// reload the current page to re-acquire the session.
alert("Failed to call " + assetUrl + ", " + req.status + " " + req.statusText);
window.location.reload( false );
}
}
};
// We put Content-Type and Accept headers
// to tell CS REST API which format we are posting
// and which one we are expecting to get.
req.open("POST", assetUrl, true);
req.setRequestHeader("Content-Type", "application/json;charset=utf-8");
req.setRequestHeader("Content-Length", strdata.length);
req.setRequestHeader("Accept", "application/json");
req.send(strdata);
}
次のコード(HomeController.java
)はアセット検索サービスをコールして、FW_Article
タイプのすべてのアセットをリストします。このコードでは、Jersey Clientライブラリを使用して、WEMフレームワークが提供するrest-api-<version>.jar
ライブラリからオブジェクトを渡します。この方法を利用すると、Javaでの入力が強化されます。
SSOAssertion.get().createToken()
メソッドをコールして、トークンをJavaコードから取得する必要がある点に注意してください。JavaScript側ではWEMのSSOに対してすでに認証が行われているため、同様の処理を行う必要はありません。
// Use Jersey client to query CS assets. Client client = Client.create(); String url = config.getRestUrl() + "/types/FW_Article/search"; WebResource res = client.resource( url ); // Construct URL and add token (for authentication purposes) // and fields (specify which fields to retrieve back) parameters. res = res.queryParam("fields", URLEncoder.encode("name,description,content,cat,source", "UTF-8")); res = res.queryParam("ticket", SSO.getSSOSession().getTicket(res.getURI().toString(), config.getCsUsername(), config.getCsPassword())); // Put Pragma: auth-redirect=false to avoid redirects to the CAS login page. Builder bld = res.header("Pragma", "auth-redirect=false"); // Make a network call. AssetsBean assets = bld.get(AssetsBean.class);
注意: カスタム・ヘッダー |
「Articles」アプリケーションは、WebCenter SitesのBlobサーバーを使用してBLOBデータを処理します。次のユーティリティ関数は、特定のアセットの特定の属性のバイナリ・データを指すURLを作成する場合に使用できます。blobUrl
には、Blobサーバー(デフォルトはhttp://localhost:8080/cs/BlobServer
)を指定します。
public String getBlobUrl(String assetType, String assetId, String attrName, String contentType) throws Exception { String contentTypeEnc = URLEncoder.encode(contentType, "UTF-8"); return blobUrl + "?" + "blobkey=id" + "&blobnocache=true" + "&blobcol=thumbnail" + "&blobwhere=" + assetId + "&blobtable=" + assetType + "&blobheader=" + contentTypeEnc + "&blobheadername1=content-type" + "&blobheadervalue1=" + contentTypeEnc; }
バイナリ・データを取得する別の方法は、リソース/sites/{sitename}/types/{assettype}/assets/{id}
を使用してアセットをロードすることです。ロードされたアセットには、BLOBサーバーを指すURLが格納されます。
UIコンテナは、コンテナ内のすべてのアプリケーションにJavaScriptコンテキスト・オブジェクト(WemContext
)を提供します。コンテキスト・オブジェクトは、アプリケーションでログイン済ユーザーやサイトに関する詳細情報をWEMフレームワークから取得するために使用します(通常は、UIコンテナから現在のサイトの名前を取得します)。また、コンテキスト・オブジェクトは、アプリケーションでデータを共有する際に使用する各種ユーティリティ・メソッドも提供します。コンテキスト・オブジェクトは、WebCenter Sitesと同一ドメインまたは異なるドメインで実行されているアプリケーションで使用できます。
この項の内容は、次のとおりです。
WebCenter Sitesドメイン内にあるアプリケーションのコンテキスト・オブジェクトを初期化して使用するには:
wemcontext.js
を含めます(次のサンプル・コードの行1では、wemcontext.js
は<cs webapp path>/wemresources/js/WemContext.js
にあります)。
WemContext
オブジェクトのインスタンスを取得します(行3)。
例72-1 同一ドメイン用の実装のサンプル・コード
<script src='http://<csinstalldomain>/<contextpath>/wemresources/js/WemContext.js'></script>
<script type="text/javascript">
var wemContext = WemContext.getInstance(); // Instantiate Context Object
var siteName = wemContext.getSiteName(); // Get Site Name
var userName = wemContext.getUserName(); // Get UserName
</script>
クロスドメイン・アプリケーションのコンテキスト・オブジェクトを初期化して使用するには:
wemxdm.js
、json2.jsおよびhash.html
を(Misc/Samples
フォルダから)アプリケーションにコピーします。
クロスドメイン・コールを実行するために、sample.html
ファイルを開いて、次のように変更します。
wemxdm.js
、json.js
およびhash.html
のパスを、アプリケーション内でのそれぞれのパスに変更します(後述のコードの行1から4を参照)。
wemcontext.html
のパスを、WebCenter Sites内でのこのファイルの場所に変更します(wemcontext.html
は/wemresources/wemcontext.html
にあります。WebCenter Sitesのホスト名とコンテキスト・パスを使用します。行14を参照してください。)
インタフェース宣言で、フレームワークで使用するメソッドを指定します(行15)。
このメソッドをローカル・スコープに実装し、リモート・メソッドを起動します(行30)。
例72-2 クロスドメイン・コール用のsample.html
<script type="text/javascript" src="../js/wemxdm.js"></script>
<script type="text/javascript">
// Request the use of the JSON object
WemXDM.ImportJSON("../js/json2.js");
var remote;
window.onload = function() {
// When the window is finished loading start setting up the interface
remote = WemXDM.Interface(/** The channel configuration */
{
// Register the url to hash.html.
local: "../hash.html",
// Register the url to the remote interface
remote: "http://localhost:8080/cs/wemresources/wemcontext.html"
}, /** The interface configuration */
{
remote: {
getSiteName :{},
...
}
},/**The onReady handler*/ function(){
// This function will be loaded as soon as the page is loaded
populateAttributes();
});
}
</script>
<script type="text/javascript">
/** Define local methods for accessing remote methods */
function getSiteName(){
remote.getSiteName(function(result){
alert("result = " + result);
});
}
...
</script>
表72-1 コンテキスト・オブジェクトで使用可能なメソッド
戻り型 | メソッド名および説明 |
---|---|
|
指定された属性名の属性値を返します。 |
|
すべての属性名を返します。 |
|
指定された名前のCookie値を返します。通常のブラウザのCookieの制限がすべて適用されます。 |
|
すべてのCookieを返します。 |
|
ロケールを返します。 |
|
サイトIDを返します。 |
|
サイト名を返します。 |
|
ユーザー・オブジェクトを返します。 |
|
ユーザー名を返します。 |
|
Cookieを削除します。 |
|
属性を設定します。これらの属性には、他のアプリケーションからアクセスできます。 |
|
Cookieを設定します。 |
第70.5項「認可モデル」で説明しているように、アプリケーションは登録することによってWEMフレームワークで公開されます。アプリケーションを登録すると、FW_Application
タイプのアセットと、アプリケーションに関連付けられた各ビューに対してFW_View
タイプのアセットが作成されます。アセット・タイプは、AdminSiteで有効になります。アセット・タイプの属性の定義は、Oracle Fusion Middleware WebCenter Sites REST API Beanリファレンスを参照してください。プログラムによる登録をお薦めします。手動登録の例は、第78章「WEMフレームワーク: アプリケーションの手動登録」を参照してください。
この項の内容は、次のとおりです。
この項では、「Articles」サンプル・アプリケーションのコードを使用して登録プロセスについて説明します。「Articles」には、iframeタイプの単一ビューが含まれます。JavaScriptおよびHTMLのビューにも同じ手順が適用されます。
アプリケーションを登録するには:
アプリケーションを表すアイコンを作成または取得します。(アイコンは、アプリケーション・バーに表示されます。)
(「Articles」サンプル・アプリケーションは、次の場所にあるarticles.png
イメージ・ファイルを使用します。/sample app/articles/src/main/webapp/images/)
アプリケーションのレイアウト(つまり各ビュー)をHTMLで指定するファイルを作成し、ビューでレンダリングされるコンテンツを保持するためのプレースホルダ・エレメントを作成します。図72-4に、アプリケーションとビューの関係を示します。
たとえば、「Articles」サンプル・アプリケーションのlayout.jsp
には次の行が含まれます。
<div id="articles" style="float:left;height:100%;width:100%" class="wemholder"></div>
ビューのコンテンツは、アプリケーションが表示される際にプレースホルダ・エレメント内にレンダリングされます(layout.app
がアプリケーションのレイアウトをレンダリングし、home.app
がビューをレンダリングします)。
注意: レイアウト・ファイルの作成時に、プレースホルダ・エレメントに一意の |
アプリケーションとビューは、多対多の関係にあります(図72-4)。1つのアプリケーションで複数のビューを使用でき、各ビューは複数のアプリケーションで使用できます。登録済のビューは(ビューのアセットIDによって)共有可能です。アセットIDが省略されている場合は、そのアプリケーションのコンテキスト内にビューが作成されます。ベーシックの場合、1つのアプリケーションに関連付けられるビューは1つのみです。
PUT
wem/applications/{applicationid}
RESTサービスを起動して、アプリケーションBeanを指定します。Beanにビュー・アセットとアプリケーション・アセットに移入します。
iframeビューの場合、「Articles」サンプル・アプリケーションのコード(InstallController.java
)を使用します(コメント行// Create a new view object
および// Create a new application object
を見つけます)。layouturl
属性を設定して、アプリケーションのレイアウト・ページのURLを指定します。
「Articles」アプリケーションで、次のように、layouturl
属性をlayout.app
(LayoutController.java
で実装)のURLに指定します。
app.setLayouturl(config.getArticlesUrl() + "/layout.app");
登録プロセスの結果をテストするには、WEM Adminインタフェースに一般管理者としてログインし、メニュー・バーで「アプリケーション」を選択します。このページにアプリケーションが一覧表示されるはずです。
HTMLビューおよびJavaScriptビューを使用するアプリケーションの場合、前の項の手順に従いますが、次に示すサンプル・コードと属性を使用します。
注意: ビューで指定したJavaScriptは、アプリケーションがレンダリングされるときにレンダリング(実行)されます。JavaScriptが他のビューと競合しないようにしてください。 |
サンプル・コード:
window.onload = function () { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.setUIToDefault(); } }
ソースURLからのJavaScriptビューのレンダリング
次の属性を設定します。
name
: ビューの名前
parentnode
: (第72.6.1項「iframeビューを使用したアプリケーションの登録」の手順2からの)プレースホルダ・エレメントのID
viewtype
: fw.wem.framework.ScriptRenderer
。プレースホルダ・エレメントにJavaScriptをレンダリングします。
sourceurl
: .js
ファイルのパス。ビューのコンテンツを提供します。例: http://example.com:8080/js/drawTree.js
ソース・コードからのJavaScriptビューのレンダリング
次の属性を設定します。
name
: ビューの名前
parentnode
: (第72.6.1項「iframeビューを使用したアプリケーションの登録」の手順2からの)プレースホルダ・エレメントのID
viewtype
: fw.wem.framework.ScriptRenderer
。プレースホルダ・エレメントにJavaScriptをレンダリングします。
javascriptcontent
: JavaScriptコード(前述のサンプル。<script>
タグはコードに含めないでください。)
注意: ビューで指定したHTMLは、アプリケーションがレンダリングされるときにレンダリング(実行)されます。 |
サンプル・コード:
<object width="480" height="385"> <param name="movie" value="http://www.localhost:8080/jspx/flash_slider_main.swf"></param> <param name="allowFullScreen" value="true"></param> <embed src=" http://www.localhost:8080/jspx/flash_slider_main.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"> </embed> </object>
ソースURLからのHTMLビューのレンダリング
次の属性を設定します。
name
: ビューの名前
parentnode
: (第72.6.1項「iframeビューを使用したアプリケーションの登録」の手順2からの)プレースホルダ・エレメントのID
viewtype
: fw.wem.framework.IncludeRenderer
。プレースホルダ・エレメントにJavaScriptをレンダリングします。
sourceurl
: ビューのコンテンツを提供するHTMLファイルのパスです。例: http://example.com:8080/js/drawTree.jsp
ソース・コードからのHTMLビューのレンダリング
次の属性を設定します。
view
: ビューの名前
parentnode
: (第72.6.1項「iframeビューを使用したアプリケーションの登録」の手順2からの)プレースホルダ・エレメントのID
viewtype
: fw.wem.framework.IncludeRenderer
。プレースホルダ・エレメントにJavaScriptをレンダリングします。
includecontent
: HTMLコンテンツ(前述のサンプル。<html
>または<body>
タグはコードに含めないでください。)