https://blogs.oracle.com/mobile/entry/adf_mobile_in_the_dojo
先日誰かがMobile SuiteはDojoを扱えない、と言っていたのを聞いたのですが、DokoはHTML5テクノロジーで構築されており、Mobile SuiteはHTML5をネイティブサポートしていることを考えると、理解できませんでした。そんなわけで、ちょっとしたコンセプト検証(PoC、Proof of concept)を実施し、とても簡単にDojoプロジェクトをローカルHTMLページに作成できることをご紹介しようと考えました。
まず、JDeveloperで新たにADF Mobileプロジェクトを作成し、一つのローカルHTML機能をadmf-features.xmlファイルに追加しました(View Controller/Application Sources/META-INFフォルダにあります)。
この設定のあと、ローカルHTML機能を追加したときに作成した、dojoExample.htmlファイルを開き、デフォルトのHTMLを以下の内容で書き換えました。
では、コンパイルしてエミュレータもしくは実機にデプロイします。結果は期待通りですね。<!DOCTYPE html> <!-- ADF Mobile Dojo tutorial | Part I --> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <title>Dojo ADF Mobile tutorial</title> <!-- application stylesheet will go here --> <!-- dynamically apply native visual theme according to the browser user agent --> <script type="text/freezescript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/mobile/deviceTheme.js"></script> <!-- dojo configuration options --> <script type="text/freezescript"> dojoConfig = { async: true, parseOnLoad: false }; </script> <!-- dojo bootstrap --> <script type="text/freezescript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script> <!-- dojo application code --> <script type="text/freezescript"> require([ "dojox/mobile/parser", "dojox/mobile/compat", "dojo/domReady!", "dojox/mobile/View", "dojox/mobile/Heading", "dojox/mobile/RoundRectList", "dojox/mobile/ListItem", "dojox/mobile/Switch" ], function (parser) { // now parse the page for widgets parser.parse(); }); </script> </head> <body style="visibility:hidden;"> <!-- the view or "page"; select it as the "home" screen --> <div id="settings" data-dojo-type="dojox/mobile/View" data-dojo-props="selected:true"> <!-- a sample heading --> <h1 data-dojo-type="dojox/mobile/Heading">ADF Mobile Dojo!</h1> <!-- a rounded rectangle list container --> <ul data-dojo-type="dojox/mobile/RoundRectList"> <!-- list item with an icon containing a switch --> <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon: 'images/ic-Airline-red48.png'">Airplane Mode <!-- the switch --> <div data-dojo-type="dojox/mobile/Switch"></div> </li> <!-- list item with an icon that slides this view away and then loads another page --> <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon: 'images/ic_wireless.png', rightText:'mac'">Wi-Fi</li> <!-- list item with an icon that slides to a view called "general" --> <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon: 'images/ic_crm.png', rightText:'AcmePhone'">Carrier</li> </ul> </div> </body> </html>
ご覧になったように、非常に簡単です。次回はADF MobileインターフェースをDojoページから呼び出す方法をご紹介したいと思います。
0 件のコメント:
コメントを投稿