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

Javascript2012年12月18日

前回の第1回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方では、とりあえず1画面をSencha Touchで作るところまでご紹介しました。
今回はもっとスマホライクなUIの記述方法や、Javascriptならではの簡単なギミックなどをご紹介していきたいと思います。

Sencha Touchの記述方法

基本的にHTMLのbody要素には何も書きません。全てjavascriptで内容も記述します。ここがSencha Touch最大の特徴と言えるでしょう。

基本的なHTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>アプリテスト</title>
<link rel="stylesheet" href="/lib/resources/css/sencha-touch.css" type="text/css">
<link rel="stylesheet" href="app.css" type="text/css">
<script type="text/javascript" src="/lib/sencha-touch-all.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',
items: [{

//UIを記述

}]
});
}
});

ここではSencha Touchのライブラリフォルダを「lib」としてルートディレクトリに配置しています。
HTMLはライブラリに格納されている「sencha-touch.css」および「sencha-touch.css」を読み込みます。
また、jsファイルを「app.js」として外部ファイル化しています。

container

sencha-touchで画面を構成するための、基本的なコンポーネントになります。

Ext.application({   
launch: function() {
Ext.Viewport.add({
xtype: 'container',
html: 'Sencha TouchでWebアプリを開発'
});
}
});

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

また、「layout」を併用することで入れ子構造にしたり、左寄せなどのカラム設定も可能です。

label

文字を表示するシンプルな画面に使用します。

Ext.application({   
launch: function() {
Ext.Viewport.add({
xtype: 'container',
defaults: {
margin: 5
},
items: [{
xtype: 'label',
html: 'Sencha TouchでWebアプリを開発'
}]
});
}
});

button

ページ遷移に使用するボタンです。「ui」の値を変更することでボタンの形状や色を変更することができます。

Ext.application({   
launch: function() {
Ext.Viewport.add({
xtype: 'container',
defaults: {
margin:10
},
items: [{
xtype:'button',
text:'ノーマルなボタン'
}, {
xtype:'button',
ui:'action',
text:'ui:action'
}, {
xtype:'button',
ui:'confirm',
text:'ui:confirm'
}, {
xtype:'button',
ui:'decline',
text:'ui:decline'
},  {
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'
}]
});
}
});

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

map

Googleマップを表示させることが可能です。
但し、GoogleマップのAPIを読み込まないと動作しませんのでご注意ください。

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

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

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

tab

タブによってページ遷移するUIを実装できます。
画面上部、画面下部両方のUIが用意されており、プロパティ「iconCls」を記述を加えることで画面下部にUIを配置できます。

画面上部に配置する場合

Ext.application({   
launch: function() {
Ext.Viewport.add({
xtype: 'tabpanel',
items: [{
xtype: 'container',
margin:10,
title: 'メニュー1',
html: 'テキスト1が入りますテキスト1が入りますテキスト1が入りますテキスト1が入ります'
}, {
xtype: 'container',
margin:10,
title: 'メニュー2',
html: 'テキスト2が入りますテキスト2が入りますテキスト2が入りますテキスト2が入ります'
}]
});
}
});

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

画面下部に配置する場合

Ext.application({   
launch: function() {
Ext.Viewport.add({
xtype: 'tabpanel',
tabBarPosition: 'bottom',
items: [{
xtype: 'container',
margin:10,
title: 'メニュー1',
iconCls: 'home',
html: 'テキスト1が入りますテキスト1が入りますテキスト1が入りますテキスト1が入ります'
}, {
xtype: 'container',
margin:10,
title: 'メニュー2',
iconCls: 'user',
html: 'テキスト2が入りますテキスト2が入りますテキスト2が入りますテキスト2が入ります'
}]
});
}
});

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

ちょっと長くなってしまったので、今回はここまで。まだまだ魅力的なUIがSencha Touchには数多く用意されています。次回はさらに色々なUIをご紹介していきます。

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

「Javascript」の他の記事を読む

この記事にコメントする

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