Building your First App

Sencha Touch 2.0 のRCが公開されています。 そのドキュメントのガイドにある Building your First App を翻訳しました。

最初のアプリを作る

準備

このガイドは Getting Started Guide (翻訳はこちら) で設定されたSDKがセットアップされ環境が完全に機能している前提に立脚しています。

まだでしたら、まず先のガイドを読んでから(数分しかかかりません)ここに戻ってきて、 最初のアプリケーションを作成することを勧めます。

何を作るか

あなたの会社のモバイルサイトに使えるような、 簡単なWebサイトのようなモバイルアプリケーションを作成しようと思います。 ホームページ、コンタクトフォーム、最新のブログポストを取得するシンプルなリストを追加し、 それらを携帯電話で読めるようにします。

This is what we’re going to build (it’s interactive, try it yourself): これが作ろうとするものです(インタラクティブです実際に試してください)

本家のガイドへ行って見てみましょう

はじめに

最初にするのは Getting Started Guide でやったようなアプリケーションのセットアップです。 アプリケーションでは4つのページを持つタブパネル(Ext.tab.Panel)を使います。 最初は次のようにします。

[js] Ext.application({ name: ‘Sencha’, launch: function() { Ext.create("Ext.tab.Panel", { fullscreen: true, items: [ { title: ‘Home’, iconCls: ‘home’, html: ‘Welcome’ } ] }); } }); [/js]

これをブラウザーで実行すると(本家のガイドではLive Previewボタンで実行できるようになっています)、 TabPanelがスクリーンの上部に表示されます。 ホームページはもうちょっといらっしゃいな幹事にしたいので、内容を追加してタブバーをページの下部に変更しましょう。 tabBarPositionコンフィグを追加して、htmlコンフィグにコンテンツを追加します。

[js] Ext.application({ name: ‘Sencha’, launch: function() { Ext.create("Ext.tab.Panel", { fullscreen: true, tabBarPosition: ‘bottom’, items: [ { title: ‘Home’, iconCls: ‘home’, html: [ ‘<img src="http://staging.sencha.com/img/sencha.png" />’, ‘<h1>Welcome to Sencha Touch</h1>’, "<p>You’re creating the Getting Started app. This demonstrates how ", "to use tabs, lists and forms to create a simple app</p>", ‘<h2>Sencha Touch (2.0.0)</h2>’ ].join("") } ] }); } }); [/js]

Previewボタンをクリックして見てみると、HTMLのコンテンツが表示されますが、あんまりかっこよくありません。 clsコンフィグを追加して、CSSクラスを追加して見栄えを良くします。 ここで追加したCSSは、ダウンロードしたSDKのexmaples/getting_started/index.htmlファイルの中にあります。 それでは、ホームページを見てみます。

(実際の画面は本家でお確かめください)

ブログページを追加する

これでちゃんとした見た目のホームページができました、次の画面に移りましょう。 各ページのコードを簡単に追えるように、 一度に一つの退部を作成することにし、、最後にすべてをまとめることにします。

最初のタブを削除してかわりにListを配置します。 フィードをフェッチするのにはGoogleの Feed API service を使うことにします。 ここにもう少しの関係するコードがありますが、まず実行結果を見てみましょう。 そうすればどのように完成したか見ることができます。

(例によって実行結果は本家を参照してください)

Code Editorボタンをクリックすると全てのコードを見ることができますが、部分部分にわけで見ていきましょう。 パネルの代わりにExt.dataview.NestedListをを今回は使います、 そしてsencha.com/blogから最新のブログポストをフェッチします。 NestedListを使って、ただリストをタップするだけでブログエントリーの中にドリルダウンできます。

上記のコードをリストだけにしぼって見てみましょう。

[js] Ext.application({ name: ‘Sencha’, launch: function() { Ext.create("Ext.tab.Panel", { fullscreen: true, tabBarPosition: ‘bottom’, items: [ { xtype: ‘nestedlist’, title: ‘Blog’, iconCls: ‘star’, displayField: ‘title’, store: { type: ‘tree’, fields: [ ‘title’, ‘link’, ‘author’, ‘contentSnippet’, ‘content’, {name: ‘leaf’, defaultValue: true} ], root: { leaf: false }, proxy: { type: ‘jsonp’, url: ‘https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog’, reader: { type: ‘json’, rootProperty: ‘responseData.feed.entries’ } } } } ] }); } }); [/js]

NestedListに少しのコンフィグレーションを与えています – title, iconCls, displayField – そしてちょっと複雑なのがstore。 storeコンフィグはNestedListにデータをフェッチする方法を指示します。 次にstoreの各コンフィグを見てみましょう。

  • type: tree NestedListが使うExt.data.TreeStoreを生成します。
  • fields ストアにブログデータの中から取り出したいフィールド(title, content, author など)を指定します。
  • proxy ストアにどこからデータをフェッチするのかを指示します。これつにいては後で詳述します。
  • root ルートノードはleafではないと指定しています。 前のコードでdefaultValueをtrueと指定しているので、ここでそれを上書きする必要があります。

全てのStoreコンフィグによりプロキシーはほぼ動作します。 プロキシーにGoogleの Feed API service を使い、ブログデータをJSON-Pフォーマットで返すように指示しています。

これによりあらゆるブログのフィードデータを簡単に取得でき、それをこのアプリケーションに表示できます。 (例えばSenchaブログのURLを http://rss.slashdot.org/Slashdot/slashdot に変えて、Slashdotのフィードを見るようにできます)

プロキシー定義の最後の部分はReaderです。 ReaderはGoogleからのレスポンスデータを使えるデータにデコードします。 Googleがブログデータを返すときには、次のようなJSONオブジェクトの中に入って返されます。

[js] { responseData: { feed: { entries: [ {author: ‘Bob’, title: ‘Great Post’, content: ‘Really good content…’} ] } } } [/js]

必要なのはentries配列ですから、ReaderのrootPropertyに’responseData.feed.entries’と設定しあとはフレームワークにやらせます。

掘る

これでNestedListのフェッチと表示ができました。最後にするべきなのはユーザーがエントリーを開いて読めるようにすることです。 あと2つのコンフィグをNestedListに追加して終わりです。

[js] { xtype: ‘nestedlist’, //all other configurations as above detailCard: { xtype: ‘panel’, scrollable: true, styleHtmlContent: true }, listeners: { itemtap: function(nestedList, list, index, element, post) { this.getDetailCard().setHtml(post.get(‘content’)); } } } [/js]

ここでは、detailCardを設定しています。detailCardはNestedListの便利な機能で、 ユーザーがアイテムをタップしたときに違うビューに表示させることができます。 上記で設定したdetailCardは、スクローラブルなパネルで、styleHtmlContentを使ってテキストの見栄えを良くできます。

パズルの最後のピースはitemtapリスナーを追加することです。これはアイテムがタップされた時に起動する関数です。 この関数がやっているのはdetailCardのhtmlにタップされたポストの内容をセットしているだけです。 フレームワークが残りを処理して、ポストの内容が表示される詳細カードにアニメートさせます。 ブログリーダーが動作するために書いたコードはこの1行だけです。

コンタクトフォームを作る

最後にこのアプリケーションにコンタクトフォームを作りましょう。 ユーザー名、E-mailアドレス、メッセージを取得するようにします。またExt.form.FieldSetを使って見栄えを良くします。 この機能のコードは簡単です。

[js] Ext.application({ name: ‘Sencha’, launch: function() { Ext.create("Ext.tab.Panel", { fullscreen: true, tabBarPosition: ‘bottom’, items: [ { title: ‘Contact’, iconCls: ‘user’, xtype: ‘formpanel’, url: ‘contact.php’, layout: ‘vbox’, items: [ { xtype: ‘fieldset’, title: ‘Contact Us’, instructions: ‘(email address is optional)’, items: [ { xtype: ‘textfield’, label: ‘Name’ }, { xtype: ‘emailfield’, label: ‘Email’ }, { xtype: ‘textareafield’, label: ‘Message’ } ] }, { xtype: ‘button’, text: ‘Send’, ui: ‘confirm’, handler: function() { this.up(‘formpanel’).submit(); } } ] } ] }); } }); [/js]

今回は、Ext.form.FieldSetを配置したExt.form.Panelを生成しているだけです。 フィールドセットには3つのフィールドがあり、1つはname、1つはemail、そしてもう1つはmessageです。 VBoxレイアウトを使って、アイテムをページ上に単純に縦に配置します。

一番下にtapハンドラーが設定されたButtonを配置します。 ボタンが配置されているformパネルを返す、便利なupメソッドがあります。 そしてフォームのsubmitメソッドをコールし、上記で指定したURL(‘contact.php’)に送信します。

すべてをまとめましょう

ここで別々に作成したビューを一緒にまとめてアプリケーションを完成させましょう。

[js] //We’ve added a third and final item to our tab panel – scroll down to see it Ext.application({ name: ‘Sencha’, launch: function() { Ext.create("Ext.tab.Panel", { fullscreen: true, tabBarPosition: ‘bottom’, items: [ { title: ‘Home’, iconCls: ‘home’, cls: ‘home’, html: [ ‘<img width="65%" src="http://staging.sencha.com/img/sencha.png" />’, ‘<h1>Welcome to Sencha Touch</h1>’, "<p>You’re creating the Getting Started app. This demonstrates how ", "to use tabs, lists and forms to create a simple app</p>", ‘<h2>Sencha Touch 2</h2>’ ].join("") }, { xtype: ‘nestedlist’, title: ‘Blog’, iconCls: ‘star’, displayField: ‘title’, store: { type: ‘tree’, fields: [ ‘title’, ‘link’, ‘author’, ‘contentSnippet’, ‘content’, {name: ‘leaf’, defaultValue: true} ], root: { leaf: false }, proxy: { type: ‘jsonp’, url: ‘https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog’, reader: { type: ‘json’, rootProperty: ‘responseData.feed.entries’ } } }, detailCard: { xtype: ‘panel’, scrollable: true, styleHtmlContent: true }, listeners: { itemtap: function(nestedList, list, index, element, post) { this.getDetailCard().setHtml(post.get(‘content’)); } } }, //this is the new item { title: ‘Contact’, iconCls: ‘user’, xtype: ‘formpanel’, url: ‘contact.php’, layout: ‘vbox’, items: [ { xtype: ‘fieldset’, title: ‘Contact Us’, instructions: ‘(email address is optional)’, items: [ { xtype: ‘textfield’, label: ‘Name’ }, { xtype: ‘emailfield’, label: ‘Email’ }, { xtype: ‘textareafield’, label: ‘Message’ } ] }, { xtype: ‘button’, text: ‘Send’, ui: ‘confirm’, handler: function() { this.up(‘formpanel’).submit(); } } ] } ] }); } }); [/js]

このガイドの全てのソースコードは、ダウンロードしたSenca Touch 2.0 SDK の examples/getting_started にあります。