第3回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方

Javascript2012年12月20日

前回の第2回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方に引き続き、Sencha TouchによるUIの実装例についてご紹介していきたいと思います。

記事の最後にも記載していますが、今回ご紹介したUIを実際に実装したサンプルページもご用意していますので下記もあわせご覧いただければと思います。

• Sencha Touchコーディングサンプル

img

画像を配置するためのコンポーネントになります。

Ext.application({
launch: function() {
Ext.Viewport.add({
xtype: 'container',
defaults: {
margin: 5
},
items: [{
xtype: 'img',
src: 'hoge.gif',
width: 298,
height: 127
}]
});
}
});

下記のような画面が表示されます。

toolbar

ツールバーを、「docked」の値によって上部や下部に配置できます。ボタンなどと同じく、「ui」の値を変えることでボタンの色を変更することも可能です。

Ext.application({
launch: function() {
Ext.Viewport.add({
xtype: 'container',
items: [{
xtype: 'toolbar',
docked: 'top',
title: '上部ツールバー',
items: [{
xtype: 'button',
ui: 'back',
text: '戻る'
}]
}, {
xtype: 'toolbar',
docked: 'bottom',
ui: 'light',
title: '下部ツールバー',
items: [{
xtype: 'button',
text: 'ほげ'
}]
}]
});
}
});

下記のような画面が表示されます。

titlebar

ツールバーと似ていますが、こちらは少し役割が異なり、ボタンの位置を右寄せ、左寄せにコントロールすることが可能です。

Ext.application({
launch: function() {
Ext.Viewport.add({
xtype: 'container',
items: [{
xtype: 'titlebar',
title: 'タイトルバー',
items: [{
xtype: 'button',
align: 'left',
text: '左ボタン'
},{
xtype: 'button',
align: 'right',
text: '右ボタン'
}]
}]
});
}
});

下記のような画面が表示されます。

carousel

フリック操作でページの遷移を行うことができるコンポーネントです。

Ext.application({
launch: function() {
Ext.Viewport.add({
xtype: 'carousel',
items: [{
xtype: 'container',
html: '1ページ目',
style: {
'padding':'20px',
'background-color': '#efefef'
}
}, {
xtype: 'container',
html: '2ページ目',
style: {
'padding':'20px',
'background-color': '#fff'
}
}]
});
}
});

下記のようなカルーセルが実装できます。

form

フォームの入力についてもバリエーションが多く用意されています。ここでは一部を抜粋したものをご紹介します。

Ext.application({
launch: function() {
Ext.Viewport.add({
xtype: 'formpanel',
items: [{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
label: 'テキストフィールド'
}, {
xtype: 'selectfield',
label: '選択肢',
options: [
{text: 'ほげ'},
{text: 'もげ'},
{text: 'ふが'}
]
}, {
xtype: 'spinnerfield',
label: 'スピナー'
}, {
xtype: 'datepickerfield',
label: '日付'
}, {
xtype: 'sliderfield',
label: 'スライダー'
}, {
xtype: 'togglefield',
label: 'トグル'
}]
}]
});
}
});

下記のような画面が表示されます。

リスト

アイテムをリスト要素で配置するコンポーネントになります。

Ext.application({
launch: function() {
Ext.Viewport.add({
xtype: 'list',
data: [
{text: 'ほげほげほげ'},
{text: 'もげもげもげ'},
{text: 'ふがふがふが'}		    
]
});
}
});

下記のような画面が表示されます。

まとめ

いかがだったでしょうか。Sencha Touchはまだまだ自分も勉強中ですが、他にも様々な機能やUIがいっぱいありますので、使いこなすことでフロントエンドエンジニアの知識があればアプリライクなものを作ることも不可能ではなさそうです。
機会があれば、そういったものもご紹介できればと思います。いつになるかわかりませんが。。。

また参考までに、今回ご紹介したUIや機能を凝縮したサンプルページもご用意しましたので、ご参考になればと思います。（Webkit系のブラウザで閲覧してください）

• Sencha Touchコーディングサンプル

• 第2回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方
• 意外と便利！Javascriptでurlのフォルダパスを取得

この記事を読んでいる方にオススメの記事

• JavascriptPNG透過ライブラリにまつわる問題を全て解決したuupaa-suketrans.js
• JavascriptIE6以下をIE7と同じ解釈にするjavascript「IE7.js」
• JavascriptJavascriptの読み込みをひとつのファイルにまとめる「import.js」
• Javascript意外と便利！Javascriptでurlのフォルダパスを取得
• Javascript第2回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方
• Javascriptテーブルをセルごとにハイライト「tablecloth」

「Javascript」の他の記事を読む

• ※承認制のため、即時には反映されません。