[Mobile] ADF Mobile - In the Dojo!

原文はこちら。
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フォルダにあります）。
Adding the Local HTML featutre to the project
この設定のあと、ローカル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>
では、コンパイルしてエミュレータもしくは実機にデプロイします。結果は期待通りですね。
The Dojo project in the iOS simulator
ご覧になったように、非常に簡単です。次回はADF MobileインターフェースをDojoページから呼び出す方法をご紹介したいと思います。
-
カテゴリ

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)