第3回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方
Javascript2012年12月20日
前回の第2回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方に引き続き、Sencha TouchによるUIの実装例についてご紹介していきたいと思います。
記事の最後にも記載していますが、今回ご紹介したUIを実際に実装したサンプルページもご用意していますので下記もあわせご覧いただければと思います。
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系のブラウザで閲覧してください）
この記事を読んでいる方にオススメの記事
- Javascript第1回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方
- JavascriptJavascriptの読み込みをひとつのファイルにまとめる「import.js」
- JavascriptPNG透過ライブラリにまつわる問題を全て解決したuupaa-suketrans.js
- Javascript第2回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方
- JavascriptIEで右クリックを禁止するJavascript
- JavascriptIE6以下をIE7と同じ解釈にするjavascript「IE7.js」
- ※承認制のため、即時には反映されません。
この記事にコメントする