スマートフォンでのwebアプリ開発で評判のよさげなSencha Touchをいじってみた。
わりとクセがあるけれども、結構面白いし色々とできそうなので、これも覚えていこうとおもう。
つい最近-2011/11/10-に開発者向けSencha Touch2.0.0が出ている。
Sencha Touch 2 Developer Preview
Sencha Touch1.1の場合は、日本語サイトからもダウンロードできる。
Sencha Touch 1.1

当初はドキュメントも日本語なので、日本語サイトからダウンロードできるSencha Touch1.1を試していた。
ところがサンプルのpull to refreshでおかしくなり、それはsafariの再起動できちんと見れるようになった。その調査過程でSencha英語サイトの方も調べていたら、日本語サイトにはないSencha Touch2.0.0というのがあり、ディスカッションフォーラムまで用意されていた。
Sencha Touch 2.x: Discussion
検索してみると日本語情報として重要そうなのは下記の２つくらいだった。
Sencha Touch 2とはどのようなものか
Sencha Touch 2 First Look
ありえるえりあさんの記事にあったコードがキレイに書ける点及び、こちらのサンプルで明らかに2.0の方が早いことから、
Sencha Touch 1.1 vs. 2.0 layout in slow motion
日本語ドキュメントが無いのがやっかいだけど、どうせなら2.0から覚えていこうと決めた。

2.0.0をダウンロードするとドキュメントやサンプルが入っている。
同じものは、こちらからでも確認できる。
Sencha Docs – Touch 2.0
そうしたサンプル類を見ると、通常のhtmlとcssで作るのではなくSencha Touchがjavascriptで組み上げていくものだと言うことが理解できるだろう。
まずは画面表示前にアラートでHello Worldから始める。
ココで迷ったのがサンプルコードにExt.application({から始まるものとExt.setup({から始まるものの二種類があったことだ。その二種類両方書いて試してみた。
Hello 01
Hello 01b
どちらでも動くようだ。ただし、Ext.application内でもExt.setupされるらしく、
Ext.setup({・・・・
Ext.application({・・・
と書いてみると、既にExt.applicationのところでExt.setupが呼ばれた後だとデバッグでメッセージが出てくる。
また、ドキュメントの検索ボックスにExt.setupと書いても何も出てこないが、Ext.applicationだと語句が出てくるところから、Ext.applicationなのだろうなと推察し、当面はこれで組んで行こうと決める。
問題が出てきたら、もしくは正しいのが何か判明したら、また報告するつもりだ。

Sencha Touchでの組み上げ方だが、UIは大体下記のように、Ext.application({内の
launch: function() {にコンポーネントを組み込んでいくことで可能となるようだ。

Ext.application({
  name: 'hellow sencha',
  icon: 'resources/images/icon.png',
  glossOnIcon: false,
  phoneStartupScreen: 'resources/images/phone_startup.png',
  tabletStartupScreen: 'resources/images/tablet_startup.png',
  
   launch: function() {
    Ext.create('Ext.TabPanel', {
      fullscreen: true,
      tabBarPosition: 'bottom',
      
      items: [
        {
          title: 'Hello Ext',
          iconCls: 'home',
          cls: 'home',
          html: [
            '<h1>Hellow world</h1>',
            '<br>',
            'Hellow SenchaTouch'
          ].join("")
        },
        {
          title: 'Hello Ext',
          iconCls: 'star',
          cls: 'home2',
          html : 'Hello SenchaTouch.'
        }
      ]
    });
  }
});

このjsは
Hello 02
で使用している。
以下の物も、同じようにlaunch: function() {内にコンポーネントを組み込んでいくことで作り上げている。
Hello 03
Hello 03b
Hello 04

Hello 02は画面表示と切り替えテスト、Hello 03とHello 03bは切り替えアニメーションのテスト、Hello 04はオーバーレイのテストだ。

今後だが、イベントハンドラ周り、データロード周りを理解した後に、SenchaTouchで良く使われるらしいMVCでの作り方あたりに入るつもりだ。
その後にeasel.jsとの組みわせ実験などをできたらと考えている。