目次
この記事はアピリッツの技術ブログ「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'
}]
});
ボタンです。”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'
});
使うには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のクラスシステムについて触れようと思います。
近日中に更新します。