最新バージョンDojo 1.7のdojox/mobileを使ってモバイルデバイスのウェブアプリケーションを開発しました.
9620 ワード
日付:2012-8-14 ソース:GBin 1.com
オンラインデモンストレーション ローカルダウンロード
科学技術の進歩に伴い、多くのjavascriptクラスがモバイル向けのライブラリを開発しました.例えば、jQuery Mobile、Secha touchなど、Dojo最新バージョン1.7のリリースに伴い、Dojoバージョンのモバイル開発フレームワークDojox/mobileも持ってきました.このフレームワークは、controllerとCSS 3テーマに基づくアーキテクチャを使用して、あなたの高速な開発知能を助けます.今日はこの記事で、Dojox/mobileを使って簡単なモバイルサイトのアプリケーションを開発する方法を紹介します.この前発表したjQueryを使ってiPhoneスタイルのナビゲーションを作ったのを覚えてください.ここではdojox/mobileを使って同様の効果を実現します.
dojox/mobileについて
関連する特性:ライト級、依存性が非常に小さい はiOS、AndriodとBlackberryのテーマを提供しています. を選択できます.は、CSS 3に基づく動画を用いて を展示する.はiOS、AndriodとBlackberryの異なるスタイルのコンポーネント を提供しています. CSS 3がサポートされていない場合は、javascriptをfallbackとして使用します. は、縦横スクリーンの切り替えに対応しています. 完全なコンポーネントサポートは、他の を必要としません.新規Dojo 1.7に追加しました.クライアントを自動的に検出し、正しいテーマを表示できるところが最高です.もちろん、この機能をオフにしてもいいです. 新しくDojo 1.7の中のいくつかのコンポーネントに参加して、バーをヒントにして、浮遊するウィンドウ、コンボボックス、textarea、改ページ、スライドのブロックなどを拡張することができます.http://livedocs.dojotoolkit.org/releasenotes/1.7#mobile メインページ構造
一般的なwebアプリケーションと同様に、dojox/mobileも関連構造を丹念に設計しました.含む: DOCTYPE METAタグ Body元素 コード構造は以下の通りです.
その中にはdojox/mobile/parserとdojox/mobileが含まれています.次にdojox/mobile/deviceThe meをロードして、異なるテーマを生成します.最後にdojox/mobile/comppactをロードして、css 3アニメを支持しないとjavascriptを使って代替します.これは必要ではありませんが、異なる設備の互換性のために追加しなければなりません.
ビューとコンポーネントの処理は以下の通りです. Viewは、類似ページの定義 である. Scrlling viewは、スクロール可能なページ である. Button:ボタン Listitem:リスト内容 スイッチコンポーネント より多くのドキュメント を参照してください.
以下のコードは簡単なviewを作成しました.
完全コードは以下の通りです.
異なるモバイルデバイスでデモを見ると、異なるテーマが見られます.
みんながdojo mobileが好きなことを望んでいます.もし何か考えがあれば、メッセージをください.ありがとうございます.
ソース:最新バージョンDojo 1.7を使用したdojox/mobileのモバイルデバイスwebアプリケーションを開発しました.
オンラインデモンストレーション ローカルダウンロード
科学技術の進歩に伴い、多くのjavascriptクラスがモバイル向けのライブラリを開発しました.例えば、jQuery Mobile、Secha touchなど、Dojo最新バージョン1.7のリリースに伴い、Dojoバージョンのモバイル開発フレームワークDojox/mobileも持ってきました.このフレームワークは、controllerとCSS 3テーマに基づくアーキテクチャを使用して、あなたの高速な開発知能を助けます.今日はこの記事で、Dojox/mobileを使って簡単なモバイルサイトのアプリケーションを開発する方法を紹介します.この前発表したjQueryを使ってiPhoneスタイルのナビゲーションを作ったのを覚えてください.ここではdojox/mobileを使って同様の効果を実現します.
dojox/mobileについて
関連する特性:
一般的なwebアプリケーションと同様に、dojox/mobileも関連構造を丹念に設計しました.含む:
<!DOCTYPE html>
<html>
<head>
<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>dojox/mobile Demo</title>
<!-- dojo javascript code and CSS code -->
</head>
<body>
<!-- mobile -->
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">
require(["dojox/mobile/parser", "dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/compat", "dojo/domReady!"], function(parser) {
parser.parse();
});
</script>
その中にはdojox/mobile/parserとdojox/mobileが含まれています.次にdojox/mobile/deviceThe meをロードして、異なるテーマを生成します.最後にdojox/mobile/comppactをロードして、css 3アニメを支持しないとjavascriptを使って代替します.これは必要ではありませんが、異なる設備の互換性のために追加しなければなりません.
ビューとコンポーネントの処理は以下の通りです.
以下のコードは簡単なviewを作成しました.
<div id="home" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">
<h1 data-dojo-type="dojox.mobile.Heading">Dojo/Mobile GBin1.com</h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:' ', moveTo: 'article'">
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:' ', moveTo: 'tutorial'">
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:' ', moveTo: 'technology'">
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:' ', moveTo: 'icon'">
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg'">
<div class="mblItemSwitch" data-dojo-type="dojox.mobile.Switch"></div>
</li>
</ul>
</div>完全コードは以下の通りです.
<!DOCTYPE html>
<html>
<head>
<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" />
<meta name="article" id="articlelink" content="/technology/jquerymobile/20120814-dojo-mobile/" />
<title>dojox/mobile Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">
require(["dojox/mobile/parser", "dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/compat", "dojo/domReady!"], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<div id="home" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">
<h1 data-dojo-type="dojox.mobile.Heading">Dojo/Mobile GBin1.com</h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:' ', moveTo: 'article'">
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:' ', moveTo: 'tutorial'">
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:' ', moveTo: 'technology'">
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:' ', moveTo: 'icon'">
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg'">
<div class="mblItemSwitch" data-dojo-type="dojox.mobile.Switch"></div>
</li>
</ul>
</div>
<div id="tutorial" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:' ', moveTo:'home'"> </h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">
<a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-introduction">GBin1 HTML5 - ：HTML5 </a>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-new-elements">GBin1 HTML5 - ：HTML5 </a>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video">GBin1 HTML5 - ：HTML5 Video </a>
</li>
</ul>
</div>
<div id="technology" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:' ', moveTo:'home'"> </h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" >
<a href="http://www.gbin1.com/technology/html/20120521html5-tutorials-new-feature"> ：GBin1 HTML5 </a>
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText: '2h 40m'">
<a href="http://www.gbin1.com/technology/html/20120417html5draganddrop"> HTML5 drag and drop API </a>
</li>
</ul>
</div>
<div id="icon" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:' ', moveTo:'home'"> </h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" >
<a href="http://www.gbin1.com/tools/icon/20120706freebieuikit"> ： UI </a>
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText: '2h 40m'">
<a href="http://www.gbin1.com/tools/icon/20120705-dark-searchbox"> ： UI </a>
</li>
</ul>
</div>
<div id="article" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:' ', moveTo:'home'"> </h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" >
， ！
</li>
</ul>
</div>
</body>
</html>
異なるモバイルデバイスでデモを見ると、異なるテーマが見られます.
みんながdojo mobileが好きなことを望んでいます.もし何か考えがあれば、メッセージをください.ありがとうございます.
ソース:最新バージョンDojo 1.7を使用したdojox/mobileのモバイルデバイスwebアプリケーションを開発しました.