2012年5月21日月曜日

Sencha Touch 2 の始め方 View 編

View の基本

View の基本は、Component の基本ですので、まずは "Using Components in Sencha Touch 2" を読みます。ここでは以下の項目にターゲットを絞って読みます。

  • Component について
  • Container について
  • 3つの Panel を使ったレイアウトサンプル
  • configuration options について
  • Container に子供を追加する方法
  • defaults について
  • Component を表示させたり非表示にしたりする方法
  • イベントについて
  • destroy 重要

Component について

  • View の最小単位がコンポーネントである
  • テンプレートを使って html をレンダリングできる

Container について

  • コンテナは複数のコンポーネントを内包することができる特殊なコンポーネント
  • コンテナに内包されたコンポーネントは右寄せ、左寄せなど自由にレイアウトできる
  • ほとんどのアプリは Viewport と呼ばれる、画面全体を表すルートコンテナを持っている

3つのPanel を使ったレイアウトサンプル

ここではコンテナの内包機能とレイアウト機能をサンプルコードを見ながら説明してみます。Instantiating Components の項に掲載されている以下のコードを引用します。

var panel = Ext.create('Ext.Panel', {
    layout: 'hbox',

    items: [
        {
            xtype: 'panel',
            flex: 1,
            html: 'Left Panel, 1/3rd of total size',
            style: 'background-color: #5E99CC;'
        },
        {
            xtype: 'panel',
            flex: 2,
            html: 'Right Panel, 2/3rds of total size',
            style: 'background-color: #759E60;'
        }
    ]
});

Ext.Viewport.add(panel);

このコードを通して以下の4点を把握します。

  • items config について
  • layout config について
  • xtype について
  • flex について

ところで説明に入る前に、1つまめ知識を。 Sencha Touch の公式ドキュメントに掲載されているサンプルコードは、即座に実行して結果を確認できます。


サンプルコードの上部にある Live Preview というボタンを押すとコード掲載部分が以下のように切り替わり、実行結果が表示されます。さらに Live Preview の隣の Code Editor を押すとエディタになり、ブラウザ上でサンプルコードを少し編集して実行することもできます。


では本題に戻って、サンプルコードについて上で挙げた4点を順に見ていきます。

items config について

コンテナ内に子要素を内包するための仕組みです。

このサンプルでは、Ext.create で生成されている親の Panel コンポーネントの items config 配列に2つのPanel コンポーネントが内包されてること分かると思います。また内包された Panel コンポーネントは xtype を使ってインラインで生成されています。xtype についてはこの下で解説します。

xtype について

コンポーネントに付けられているショートカットです。例えば、Button コンポーネントというボタン部品がありますが、完全なコンポーネント名称は Ext.Button で、それに対するショートカットとして button という短縮名称があります。

items config 内でコンポーネントを指定する場合や ComponentQuery でも使います。ComponentQuery は Controller 編でもさらっと紹介しますが、CSS セレクタのようなものです。

layout config について

親の Panel コンポーネントの layout config に 'hbox' が指定されています。子供要素は横に並びます。ここを 'vbox' に変更してみると子要素は縦に並びます。つまり子供を横に並べるか、縦に並べるかを指定しています。CSS3 で言うところの display: box ですね。

折角なのでドキュメントのサンプルコードの Code Editor を押して編集モードに移行して、hbox を vbox に書き換えて Live Preview して確認してみましょう。

flex について

これは子要素を表すオブジェクトリテラル({}のこと)内で指定されていて、子要素達の分割比を設定しています。このケースだと画面の横幅に対して1:2で分割されることを意味します。flex を 1 と 3 に変更すると 1:3 で分割されます。

ということで、レイアウトサンプルの解説は終わります。初歩的なレイアウトの考え方、書き方は掴めたのではないかと思います。

config option について

  • Ext.create でコンポーネントを生成する際に config option を指定することができる(items config によるインラインでの生成時も同じ)
  • 指定できるオプションは、コンポーネントごとの異なっているので、API ドキュメントの "Configs" を確認する


  • 例えば Button コンポーネントでは text という名前の config option があるがこれは、Button に表示されるラベルテキストを意味する
  • 生成時に指定したオプションは生成後も好きなタイミングで変更できる
  • config option で指定できる値には setter と getter が自動生成されている
  • 例えば、htmlという名前の config option があれば getHtml メソッドと setHtml メソッドは暗黙的に存在する


Container に子供を追加する方法

  • items config を使ってインラインで追加する方法の他に オブジェクトに対して add する方法もある

defaults config について

  • defaults config では指定した config option は内包する全ての子供要素にも適応される
  • インラインで生成した子供も後から add された子供にも影響する

Component を表示させたり非表示にしたりする方法

  • 全てのコンポーネントが show メソッド、hide メソッド を持ってる
  • コンテナの場合、内包する子供も一緒に表示、非表示される

イベントについて

(イベントは Controller 編でもう少し詳細に説明します)

  • コンポーネントでイベントハンドリングしたい場合は listeners config を使う
  • 生成済みのコンポーネントにイベントリスナを追加する場合は on メソッドを使う

destroy 重要

  • メモリを無駄遣いしないために使わなくなったコンポーネントはマメに掃除しましょう
  • destroyメソッドは内部で使っていたオブジェクトのインスタンスや関連するイベントリスナーと子供を掃除してくれる

レイアウトについて

Component に続いて、レイアウトについて把握します。"Using Layouts in Sencha Touch 2" を見ますが、レイアウトは実際にアプリを作る上で何度も立ち返って確認することになると思うので、ここではあえて深追いしません。ここではサンプルをさらっと確認する程度でいいと思います。

各コンポーネントについて

ここでは各コンポーネントの使い方は説明しませんが、いくつかのコンポーネントについては、Guides タブの Components に使い方の解説があるので、必要に応じて確認してみて下さい。




0 件のコメント :

コメントを投稿