Sencha Touch 2の旅を始める--Sencha Touch公式ガイドシリーズ

17293 ワード

Sencha Touch

Touch 2の旅を始める
Sencha Touchって何?
Sencha Touch(以下STと略す)は、HTML 5ベースの携帯電話アプリケーションを迅速に構築するのに役立ちます.STによって構築されたプログラムは、オリジナルアプリケーションと一致したユーザー体験を持ち、Android、IOS、ブラックベリーなどの主流プラットフォームを全面的にサポートしています.
準備作業
あまり準備する必要はありません.必要なのは次のとおりです.
無料のSencha Touch SDKです.
ネイティブのWebサーバです.
HTML 5をサポートするブラウザ(ChromeとSafariの使用を推奨).
まず、最新のSencha Touch SDKをダウンロードし、Webサーバのルートディレクトリに解凍します.Webサーバがない場合や、あるかどうか分からない場合は、WAMPやMAMPなどの簡単なインストールをお勧めします.
上記の作業が完了したら、ブラウザで開くだけです.http://localhost/sencha-touch-folderああ、STのウェルカムインタフェースが見えます.すべてOKであれば、STで最初のアプリケーションを作ることができます.
最初のプログラム
STアプリケーションを最も効率的に動作させるには,我々の例を参照して開発を行う.これは、チーム開発において特に重要なメンテナンスしやすいプログラムを書くのに役立つ約束です.
最初に、アプリケーションを保存するフォルダを作成します.この中には少なくとも以下のファイルが含まれています.
index.html-STフレームワークとアプリケーションファイルを導入する簡単なHTMLファイルです.
app.js-アプリケーションファイル.メイン画面のアイコンとプログラムの起動時に必要なことを定義します.
touch-STフレームワークファイルのコピー.
まずindexからhtmlファイルの作成

<!DOCTYPE html>
<html>
<head>
    <title>Getting Started</title>
    <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="touch/sencha-touch-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

これはおそらくあなたが一生書いた最も簡単なHTMLページです.ST(フレームワークのjsファイルとcssファイル)と独自のappしか導入されていません.js.bodyラベルの内容が空-STの場合、自動的にレンダリングされます.次にappを見てみましょうjsファイルの内容.最も簡単な例から始めますが、警告ダイアログボックスが表示されます.

Ext.application({
    name: 'Sencha',

    launch: function() {
        alert('launched');
    }
});

どうですか.簡単でしょう.次にSafari(またはChrome)を起動して、彼が私たちが予想したようにしているかどうかを見てみましょう.(または、コードの左側の目アイコンをクリックして実行の効果を表示します).
今まで、このプログラムは何もできませんでした.しかし、アラームメッセージのポップアップは、STが正しくロードされ、実行されたことを意味する.私たちはインタフェースの構築に着手しました:TabPanel.TabPanelはラベル式のインタフェースで、複数のページ間を閲覧することができます.ここでは、ホームページ(Home page):

Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Welcome'
                }
            ]
        });
    }
});

今、TabPanelはすでにスクリーンに表示されていますが、私たちのホームページでは、内容がもっと豊富になります.ラベルを上部に置くのはちょっと面白くないし、ホームページのボタンも少し単調なようです.手をつけましょう.tabBarPosition構成項目を修正し、HTMLコンテンツを追加します.

Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: [
                        '<img src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch (2.0.0pr1)</h2>'
                    ].join("")
                }
            ]
        });
    }
});

これまでHTMLの内容はいくつかありましたが、あまり面白くありません(プレビューボタンをクリックしてコードの例を表示します).より美しくするためには、panelにcls構成項目を追加すればよい.CSSクラスを1つ増やしただけで、できました.ここでCSSはexamples/getting_に定義されていますstarted/app.cssファイルの.CSSを追加すると、私たちのホームページはこのようになりました.

Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    cls: 'home',

                    html: [
                        '<img src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch (2.0.0pr1)</h2>'
                    ].join("")
                }
            ]
        });
    }
});

今、私たちはすでに体面のあるホームページを持っています.次に、少し拡張します.最新のブログ記事のリストを別のタブに表示したいと考えています.私たちはまず仮想データを使います.ここで私が一番好きなhttp://sencha.com/blogからのポジションをいくつか選びました.リストのコードについては「ホーム」タブの下に書きます.(プレビューボタンをクリックしてコード例を実行)

Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    cls: 'home',
                    html: [
                        '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch (2.0.0pr1)</h2>'
                    ].join("")
                },
                {
                    xtype: 'list',
                    title: 'Blog',
                    iconCls: 'star',

                    itemTpl: '{title}',
                    store: {
                        fields: ['title', 'url'],
                        data: [
                            {title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'},
                            {title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'},
                            {title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'},
                            {title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'}
                        ]
                    }
                }
            ]
        }).setActiveItem(1);
    }
});

これらのリスト項目をクリックするロジックを後で追加します.文章の最後に、連絡表を追加します.私たちの最後のtabには、FromPanelとFieldSetが含まれています.

//We've added a third and final item to our tab panel - scroll down to see it
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    cls: 'home',
                    html: [
                        '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch (2.0.0pr1)</h2>'
                    ].join("")
                },
                {
                    xtype: 'list',
                    title: 'Blog',
                    iconCls: 'star',

                    itemTpl: '{title}',
                    store: {
                        fields: ['title', 'url'],
                        data: [
                            {title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'},
                            {title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'},
                            {title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'},
                            {title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'}
                        ]
                    }
                },
                //this is the new item
                {
                    title: 'Contact',
                    iconCls: 'user',
                    xtype: 'formpanel',
                    url: 'contact.php',
                    layout: 'vbox',

                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Contact Us',
                            instructions: '(email address is optional)',
                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Name'
                                },
                                {
                                    xtype: 'emailfield',
                                    label: 'Email'
                                },
                                {
                                    xtype: 'textareafield',
                                    label: 'Message'
                                }
                            ]
                        },
                        {
                            xtype: 'button',
                            text: 'Send',
                            ui: 'confirm',
                            handler: function() {
                                this.up('formpanel').submit();
                            }
                        }
                    ]
                }
            ]
        }).setActiveItem(2);
    }
});

3番目のtabでは、3つのフィールドと1つのコミットボタンを含むテーブルを追加しました.VBOXレイアウトレイアウトを使用して、下のコミットボタンを位置決めします.Fieldset自体にはtitleといくつか义齿が配置されている.ヒント.最後に、一つtextfield、一つemailfieldもう一つtextareafieldを使いました.
examples/getting_startedフォルダの下に、この例の文書コードが表示されます.
その他
今、私たちはすでに非常に基本的なアプリケーションを解決しました.フレームワークの他の内容を探求する時です.ここでは、開発ガイドとコンポーネントの例を説明します.また、Beta版の発展に伴い、より多くのガイドを発表し、より大規模なアプリケーションを構築します.
本文はSencha Touch 2の公式ガイドから訳された.
威老.
本人の英語のレベルが限られていることを考慮して、どうしても少し漏れて、みんなの指摘を歓迎します.
転載は作者と原文の住所を明記してください.ありがとうございます.
詳細はモバイルWEB開発コミュニティに注目してください
Sencha Touch 2公式ガイド翻訳帖ナビゲーション

HDU-4277(暴力プラス+hash)

Tomcat 7に基づく.0.29 WebSocket実装