Sencha Touch#02【Hello Worldを表示させる】：印刷とWebの制作ノート：So-netブログ

	ブログをはじめるログイン

サーバをどこにするか（WordPress.. ｜Sencha Touch#03【Hell.. ブログトップ

Sencha Touch#02【Hello Worldを表示させる】

Sencha TouchにXcodeに…書きたい投稿が溜まってしまっています。

Sencha Touchの続きです。

ちなみに、今回の（前回も）Sencha TouchはVersion 1.x です。
次から2.xでおさらいをしたいと思います。

前回はSencha Touchのインストールまでしました。

今日はHello Worldを表示させたいと思います。
参考にしたページは、Sencha Touch公式サイトの
・Taking Sencha Touch Apps Offline
・Hello World
です。でも英語…
手順は若干変えてあります。

(1)ディレクトリ構成
ダウンロード、解凍しただけの状態から、ローカルのサーバ環境（WAMPやWebMatrix）にサイトを構成しなおします。
必要なファイルだけコピーして使えばいいようなものですが、まだ初めの一歩なので最も簡単な方法を用います。

・適当なフォルダを作成する（今回はhello-world）
・hello-worldフォルダの中に「lib」「app」フォルダを作成する。
・今作ったlibフォルダの中に「touch」フォルダを作る。
・今作ったtouchフォルダの中に、解凍したSencha Touchの中身を丸ごとコピーする。
こんな感じになる。

(2)index.htmlを作る
hello-worldフォルダ直下に「index.html」を作ります。
Taking Sencha Touch Apps Offlineの「Getting Set Up」の下にある以下のソースコードをコピーして貼り付けます。

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
 
        <script type="text/javascript" src="lib/touch/sencha-touch.js"></script>
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
 
        <script type="text/javascript" src="app/app.js"></script>
 
        <style>
            .hello {
                background:#ffffff;
                background-image:url(http://src.sencha.io/320/http://chuvachienes.com/wp-content/uploads/2009/07/hello.jpg);
            }
            .world {
                background:#ffffff;
                background-image:url(http://src.sencha.io/320/http://www.unc.edu/world/College_Updates_2009/world-globe.jpg);
                background-repeat:no-repeat;
            }
        </style>
 
    </head><body></body>
</html>

(3)app.jsを作る
appフォルダ内に「app.js」を作ります。
先ほどの「Getting Set Up」のHTMLコードの下にあるJavaScriptコードをコピーして貼り付けます。

 
var helloWorld = new Ext.Application({
    launch: function() {
        this.tabs = new Ext.TabPanel({
            fullscreen: true,
            dockedItems: [{xtype:'toolbar', title:'Hello World'}],
            tabBar: {
                ui: 'light',
                layout: {
                    pack: 'center'
                }
            },
            items: [
                {cls:'hello', title:'Hello'},
                {cls:'world', title:'World'}
            ]
        });
    }
});