More Related Content
Similar to Ibm worklight デモ環境とサンプルコード (20)
Ibm worklight デモ環境とサンプルコード
- 1. © 2013 IBM Corporation06/04/13
IBM Worklight デモ環境とサンプルコー
ド
- 2. © 2013 IBM Corporation
2
Empowering the IBM ecosystem
06/04/13
デモ環境 その1
IBM Worklight Server
アプ
リ
デバイス
IBM developerWorks (RSS)
アダプ
ター
アダプ
ター
HTTP で RSS(XML) を取得し、
JSON に変換して、アプリケーションに渡
す。
<?xml version=“1.0”?>
<rss version=“2.0”>
<channel>
<title>IBM developerWorks 日本語版 </title>
:
JSON データを HTML5 内の
JavaScript で扱う
- 3. © 2013 IBM Corporation
3
Empowering the IBM ecosystem
06/04/13
アダプターの定義内容
(定義ファイル内)
:
<connectivity>
<connectiionPolicy
xsi:type=“http:HTTPConnectionPolicyType”>
<protocol>http</protocol>
<domain>www.ibm.com</domain>
<port>80</port>
</connectionPolicy>
:
:
</connectivity>
<procedure name=“getStories”/>
:
( .js ファイル内)
:
function getStories(interest){
path = ‘/developerworks/jp/views/’ + interest +
‘/rss/libraryview.jsp’;
var input = {
method: ‘get’,
returnedContentType: ‘xml’,
path: path
};
return WL.Server.invokeHttp( input );
}
:
http://www.ibm.com/ 以下のフィードを取得する、
と宣言
変数を使ってパスを生成し、 get メソッドを実行
( RSS なので)取得データは XML を想定。
JavaScript 関数としては getStories を使うことを宣言
- 4. © 2013 IBM Corporation
4
Empowering the IBM ecosystem
06/04/13
JavaScript でアダプターを呼び出す
(アダプターを呼び出す箇所の JavaScript )
:
var invocationData = {
adapter: ‘dWFeedsAdapter’,
procedure: ‘getStories’,
parameters: [ theme ]
};
WL.Client.invokeProcedure( invocationData, {
onSuccess: loadFeedsSuccess,
onFailure: loadFeedsFailure,
invocationContext: {}
} );
:
(呼び出しが成功した時のハンドラ)
function loadFeedsSuccess( result ){
:
var items =
result.invocationResult.rss.channel.item;
var n = items.length;
for( I = 0; I < n; I ++ ){
var item = items[i];
:
}
}
アダプターと関数、パラメータを指定
成功時、失敗時のハンドラを指定して invoke
成功時の処理(非同期)
- 5. © 2013 IBM Corporation
5
Empowering the IBM ecosystem
06/04/13
デモ環境 その2
IBM Worklight Server
アプ
リ
デバイス
IBM Domino データベース
アダプ
ター
アダプ
ター
HTTP で JSON を取得し、
アプリケーションに渡す。
[ {
“@href”:http://******,
“@link”: { “rel”: “document”, “href”: http://******” },
“@entryid”: “1-*********************”,
:
JSON データを HTML5 内の
JavaScript で扱う
- 6. © 2013 IBM Corporation
6
Empowering the IBM ecosystem
06/04/13
アダプターの定義内容
(定義ファイル内)
:
<connectivity>
<connectiionPolicy
xsi:type=“http:HTTPConnectionPolicyType”>
<protocol>http</protocol>
<domain>XXX.XXX.com</domain>
<port>80</port>
</connectionPolicy>
:
:
</connectivity>
<procedure name=“getStories”/>
:
( .js ファイル内)
:
function getStories(interest){
path = interest + ‘/api/data/collections’;
var input = {
method: ‘get’,
returnedContentType: ‘plain’,
path: path
};
return WL.Server.invokeHttp( input );
}
:
http://XXX.XXX.com/ 以下に対して JSON を取得する、
と宣言
変数を使ってパスを生成し、 get メソッドを実行
取得データは plain text を想定。
JavaScript 関数としては getStories を使うことを宣言
- 7. © 2013 IBM Corporation
7
Empowering the IBM ecosystem
06/04/13
JavaScript でアダプターを呼び出す
(アダプターを呼び出す箇所の JavaScript )
:
var invocationData = {
adapter: ‘DDSAdapter’,
procedure: ‘getStories’,
parameters: [ ‘/testdb.nsf” ]
};
WL.Client.invokeProcedure( invocationData, {
onSuccess: loadDbSuccess,
onFailure: loadDbFailure,
invocationContext: {}
} );
:
(呼び出しが成功した時のハンドラ)
function loadDbSuccess( result ){
:
var objs =
JSON.parse( result.invocationResult.text );
var n = objs.length;
for( I = 0; I < n; I ++ ){
var obj = objs[i];
:
}
}
アダプターと関数、パラメータを指定
成功時、失敗時のハンドラを指定して invoke
成功時の処理(非同期)
(ほぼ先程の例と同じ)
Plain Text を parse
- 8. © 2013 IBM Corporation
8
Empowering the IBM ecosystem
06/04/13
デモ環境 その3
IBM Worklight Server
アプ
リ
デバイス
リレーショナルデータベース
アダプ
ター
アダプ
ター
JDBC で JSON を取得し、
アプリケーションに渡す。
+---------+---------+
| pcode | pref |
+---------+---------+
| 01 | 北海道 |
| 02 | 青森県 |
:
JSON データを HTML5 内の
JavaScript で扱う
- 9. © 2013 IBM Corporation
9
Empowering the IBM ecosystem
06/04/13
アダプターの定義内容
(定義ファイル内)
:
<connectivity>
<connectiionPolicy xsi:type=“sql:SQLConnectionPolicyType”>
<dataSourceDefinition>
<driverClass>com.mysql.jdbc.Driver</driverClass>
<url>jdbc:mysql://XXX.XXX.com:3306/sampledb</url>
<user>username</user>
<password>password</password>
</dataSourceDefinition>
</connectionPolicy>
:
:
</connectivity>
<procedure name=“procedure1”/>
:
( .js ファイル内)
:
var prodecure1Statement =
WL.Server.createSQLStatement( “select * from testdb” );
function procedure1(param){
return WL.Server.invokeSQLStatement({
preparedStatement: procedure1Statement,
parameters: [param]
});
}
:
JDBC の接続先を指定
SQL 文を指定して実行
JavaScript 関数としては procedure1 を使うことを宣言
- 10. © 2013 IBM Corporation
10
Empowering the IBM ecosystem
06/04/13
JavaScript でアダプターを呼び出す
(アダプターを呼び出す箇所の JavaScript )
:
var invocationData = {
adapter: ‘SampleDb’,
procedure: ‘procedure1’,
parameters: []
};
WL.Client.invokeProcedure( invocationData, {
onSuccess: p1Success,
onFailure: p1Failure,
invocationContext: {}
} );
:
(呼び出しが成功した時のハンドラ)
function p1Success( result ){
:
var items =
result.invocationResult.rss.channel.item;
var n = items.length;
for( I = 0; I < n; I ++ ){
var item = items[i];
:
}
}
アダプターと関数、パラメータを指定
成功時、失敗時のハンドラを指定して invoke
成功時の処理(非同期)