一緒に始めようSencha Touch 2.0 入門編: 第2回 Sencha Touchで作れるUI

ホーム技術発信DoRuby一緒に始めようSencha Touch 2.0 入門編: 第2回 Sencha Touchで作れるUI

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

お久しぶりです。だーますです。

前回の投稿から5ヶ月程空いてしまいましたが、今回はSencha Touch 2.0で作ることができるUIについてざっくり解説させていただこうと思います。

■ 基本の書き方

前回と同じように、Sencha Touchのフォルダ(sencha-touch-2.0.1.1)が入った適当なフォルダを作ります。

※本稿執筆時点での最新版は2.1ですがそちらでもOKです

そこに、以下のようなファイルを置きます。

index.html

<!DOCTYPE html>
<html>
    <head>
        
        <title>Sencha Touch App</title>
        <link rel="stylesheet" type="text/css" href="sencha-touch-2.0.1.1/resources/css/sencha-touch.css" />
        <script type="text/javascript" src="sencha-touch-2.0.1.1/sencha-touch-all-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body></body>
</html>

app.js

Ext.application({
    viewport: {
        autoMaximize: true
    },
    launch: function() {
        Ext.Viewport.add({
            xtype: 'container',
            defaults: {
                margin: 5
            },
            items: [{
                // ここにUIを記述
            }]
        });
    }
});

要するに、sencha-touch.cssとsencha-touch-all-debug.jsが読み込まれ、その上でapp.jsの内容を実行できればOKです。

ここより先のソースコードは、Ext.Viewport.addの中身だけ記述させていただきます。

なお、”autoMaximize: true”はスマートフォンで閲覧した際にナビゲーションバーを隠す記述、

“defaults”内の”margin: 5″は子コンポーネントすべてにデフォルトで5pxのマージンを設定する記述です。

■ Sencha Touch 2.0 のUI (一例)

コンテナー (container)

様々なUIを配置するための、基本となるコンポーネントです。

Ext.Viewport.add({
    xtype: 'container',
    html: 'Hello,World!'
});

入れ子構造もできます。”layout”で区切る方向を指定できます。

Ext.Viewport.add({
    xtype: 'container',
    defaults: {
        margin: 5,
    },
    items: [{
        xtype: 'container',
        layout: 'vbox',
        items: [{
            xtype: 'container',
            html: 'コンテナ1'
        }, {
            xtype: 'container',
            layout: 'hbox',
            items: [{
                xtype: 'container',
                html: 'コンテナ2'
            }, {
                xtype: 'container',
                html: 'コンテナ3'
            }]
        }]
    }]
});

ラベル (label)

ラベルです。文字を表示することに特化したコンポーネントです。

Ext.Viewport.add({
    xtype: 'container',
    defaults: {
        margin: 5
    },
    items: [{
        xtype: 'label',
        html: 'Hello,World!'
    }, {
        xtype: 'label',
        html: 'This is Sencha Touch 2.0'
    }]
});

ボタン (button)

ボタンです。”ui”を変えることで色や形状が変えられます。

Ext.Viewport.add({
    xtype: 'container',
    defaults: {
        margin: 5
    },
    items: [{
        xtype: 'button',
        text: 'button'
    }, {
        xtype: 'button',
        ui: 'action',
        text: 'ui:action'
    }, {
        xtype: 'button',
        ui: 'decline',
        text: 'ui:decline'
    }, {
        xtype: 'button',
        ui: 'confirm',
        text: 'ui:confirm'
    }, {
        xtype: 'button',
        ui: 'forward',
        text: 'ui:forward'
    }, {
        xtype: 'button',
        ui: 'back',
        text: 'ui:back'
    }, {
        xtype: 'button',
        ui: 'round',
        text: 'ui:round'
    }, {
        xtype: 'button',
        ui: 'small',
        text: 'ui:small'
    }]
});

テキストボックス (textfield)

テキストボックスです。”placeHolder”でプレースホルダを設定できます。

Ext.Viewport.add({
    xtype: 'container',
    defaults: {
        margin: 5
    },
    items: [{
        xtype: 'textfield'
    }, {
        xtype: 'textfield',
        placeHolder: 'this is textfield'
    }]
});

イメージ (img)

画像を表示するためのコンポーネントです。高さ・幅を、表示する画像に合わせて設定しておく必要があります。

Ext.Viewport.add({
    xtype: 'container',
    defaults: {
        margin: 5
    },
    items: [{
        xtype: 'img',
        src: 'icon.png',
        width: 57,
        height: 57
    }]
});

マップ (map)

Googleマップを表示できます。

Ext.Viewport.add({
    xtype: 'map',
    layout: 'fit'
});

http://doruby.kbmj.com/darmasu/files/002061.PNG

使うにはindex.htmlでGoogleマップのAPIを読み込んでおく必要があります。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

ツールバー (toolbar)

ツールバーです。”docked”によって画面の上や下に配置できます。

“ui”で色を変えられる他、ツールバー内にボタンやテキストボックスを設定することもできます。

Ext.Viewport.add({
    xtype: 'container',
    html: 'コンテナ',
    items: [{
        xtype: 'toolbar',
        docked: 'top',
        title: 'toolbar',
        items: [{
            xtype: 'button',
            ui: 'back',
            text: 'back'
        }]
    }, {
        xtype: 'toolbar',
        docked: 'bottom',
        ui: 'light',
        title: 'ui:light',
        items: [{
            xtype: 'button',
            text: 'button'
        }]
    }, {
        xtype: 'toolbar',
        docked: 'top',
        ui: 'neutral',
        items: [{
            xtype: 'textfield',
            placeHolder: 'textfield inside toolbar'
        }]
    }]
});

タイトルバー (titlebar)

toolbarの仲間ですが、役割が若干違います。

子コンポーネントの配置を”align”で変えられるのが大きな違いでしょうか。

Ext.Viewport.add({
    xtype: 'container',
    items: [{
        xtype: 'titlebar',
        title: 'TitleBar',
        items: [{
            xtype: 'button',
            align: 'left',
            text: 'left button'
        },{
            xtype: 'button',
            align: 'right',
            text: 'right button'
        }]
    }]
});

タブバー (tab)

タブによってページを切り替えるコンポーネントです。

画面上に配置する他、iOSでお馴染みの画面下タブもつくれます。

上に配置する場合

Ext.Viewport.add({
    xtype: 'tabpanel',
    items: [{
        xtype: 'container',
        title: 'tab 1',
        html: 'コンテナ1'
    }, {
        xtype: 'container',
        title: 'tab 2',
        html: 'コンテナ2'
    }]
});

下に配置する場合

Ext.Viewport.add({
    xtype: 'tabpanel',
    tabBarPosition: 'bottom',
    items: [{
        xtype: 'container',
        title: 'tab 1',
        iconCls: 'home',
        html: 'コンテナ1'
    }, {
        xtype: 'container',
        title: 'tab 2',
        iconCls: 'user',
        html: 'コンテナ2'
    }]
});

カルーセル (carousel)

フリックでページ切り替えを行うコンポーネントです。

Ext.Viewport.add({
    xtype: 'carousel',
    items: [{
        xtype: 'container',
        html: 'page 1',
        style: {
            // わかりやすいように各ページに色を付けてます
            'background-color': '#FFFFFF'
        }
    }, {
        xtype: 'container',
        html: 'page 2',
        style: {
            'background-color': '#AAAAAA'
        }
    }]
});

画面だけでは動きがわかりづらいので写真も用意しました。

フォーム (form)

色々な入力形式が使えるフォームです。以下は一例です。

Ext.Viewport.add({
    xtype: 'formpanel',
    items: [{
        xtype: 'fieldset',
        title: 'Form',
        items: [{
            xtype: 'textfield',
            label: 'text'
        }, {
            xtype: 'spinnerfield',
            label: 'spinner'
        }, {
            xtype: 'selectfield',
            label: 'select',
            options: [
                {text: 'option 1'},
                {text: 'option 2'},
                {text: 'option 3'}
            ]
        }, {
            xtype: 'datepickerfield',
            label: 'date'
        }, {
            xtype: 'sliderfield',
            label: 'slider'
        }, {
            xtype: 'togglefield',
            label: 'toggle'
        }]
    }]
});

selectfieldを呼び出した画面

datepickerfieldを呼び出した画面

リストビュー (list)

様々なデータを表示できるリストです。

Ext.Viewport.add({
    xtype: 'list',
    data: [
        {text: 'エインヘリアル'},
        {text: '黄金航路'},
        {text: '式姫草子'},
        {text: '星海'},
        {text: 'リトルデビルズダイアリー'}
    ]
});

この画像では、「式姫草子」をタップして選択状態にしました。

store, proxy, readerと組み合わせればAjaxやJSONPリクエストで取得したものを動的に表示できたりしますが、

それについてはいつかまた説明します。

■ 他にも魅力的なUIがいっぱい

Sencha Touch 2.0には他にも、前回取り上げたナビゲーションビューや、

ポップアップダイアログ、アクションシート、モーダルなどといった

魅力的なUIが揃っています。

そのすべてをここに記述するのは難しいので、

もっと知りたいという方は、是非ドキュメントやKitchen Sink(サンプル集)をチェックしてみてください。(WebKitブラウザで見てください)

■ 次回予告

次回は、今回一緒に説明させていただく予定だったコンポーネントをクラス定義する方法も含め、

Sencha Touchのクラスシステムについて触れようと思います。

近日中に更新します。

アピリッツ広報担当