web-dev-qa-db-ja.com

Sencha Touch 2.0MVCチュートリアル

私はSenchaTouchフレームワークに非常に慣れていないので、Sencha Touch 2.0から始めたいのですが、MVCパターンを使用して、特にSenchaTouchバージョン2.0で構築されたアプリケーションを示すチュートリアルが見つかりません。

sencha-touchsencha-touch-2
13
coure2011

これがsencha2011カンファレンスからの2つのビデオです：

SenchaCon 2011：深さのMVCパート1 https://vimeo.com/33311074

そして

SenchaCon 2011：深さのMVCパート2 https://vimeo.com/33430731

また、他の短いチュートリアルについては、彼らのブログをチェックすることができます。

Sencha Touch2をよりよく理解するための別のビデオ

SenchaCon 2011：Senchaクラスシステム https://vimeo.com/33437222

12
ilija139

これはおそらく最も初期のチュートリアルの1つなので、辛抱強く、最終リリースまでに状況が変わる可能性があることを知っておいてください。

MVCの場合、最初にフォルダー構造を設定する必要があります。このようなもの：

MyApp
    app
      controller
      model
      profile
      store
      view
    touch2
    app.js
    index.html

それでは、サンプルアプリから始めましょう。

index.html

<!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sample App</title>

    <link rel="stylesheet" href="touch2/resources/css/sencha-touch.css" type="text/css" title="senchatouch" id="senchatouch" />
    <link rel="stylesheet" href="touch2/resources/css/Android.css" type="text/css" title="Android" id="Android" disabled="true" />
    <link rel="stylesheet" href="touch2/resources/css/Apple.css" type="text/css" title="Apple" id="Apple" disabled="true" />
    <link rel="stylesheet" href="touch2/resources/css/bb6.css" type="text/css" title="blackberry" id="blackberry" disabled="true" />

    <link rel="stylesheet" href="styles/main.css" type="text/css">
    <script type="text/javascript" src="touch2/sencha-touch-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js

Ext.Loader.setConfig({
    enabled : true
});


Ext.application({
    name: 'MyApp',

    profiles: ['Tablet'],

    views: [
        // common Tablet & Phone views 
    ],

    models: [

    ],

    controllers: [
        'Main'
    ],
    launch:function(){
        Ext.Viewport.add(Ext.create('MyApp.view.Main'));        
        //Ext.Viewport.add(Ext.create('MyApp.view.tablet.Main'));
     }        
});

これで、2つの重要なファイルが配置され、Ext.Loaderが必要に応じてフレームワークコンポーネントをフェッチして、デバッグを容易にします。

まず、アプリの名前空間（MyApp）を設定します。つまり、将来のすべてのクラスはMyApp名前空間で定義されます。

次に、2つの主要なプロファイルを定義しました。タブレットと電話。さまざまな環境での動作方法をアプリに指示します。ここで同じ数（またはなし）を指定します。

次に、2つのプロファイル間で共有されるビュー、モデル、およびコントローラーをセットアップしました。彼らはあなたが電話またはタブレットでアプリを使用しているかどうかを気にしません。

タブレットプロファイルを続けましょう

app/profile/Tablet.js

Ext.define('MyApp.profile.Tablet', {
    extend: 'Ext.app.Profile',

    config: {
        views: [
            'Main'
        ]
    },

    isActive: function() {
        return !Ext.os.is('Phone');
    },

    launch: function() {
        Ext.create('MyApp.view.tablet.Main');
    }
});

かなり自明です。構成オブジェクトは、プロファイルに固有のビュー/モデル/コントローラーを保持します。スマートフォンでアプリを実行している場合、これらは使用されません（含まれます）。

isActiveメソッドは、環境を評価した後、trueまたはfalseを返す必要があります。タブレットはすべて電話以外のものだと具体的に言いました。論理的には正しくありませんが、簡単にするためにこの方法でプレイすることにしました。より正しい方法は

return Ext.os.is('Tablet') || Ext.os.is('Desktop');

プロファイルの最後のビットは起動メソッドです。特定のプロファイルでアプリが起動されたときに何をするかをアプリに指示します。 MyAppは、Ext.Viewportにメインビューを作成します。

Ext.Viewportは、アプリの起動時にDOMにすでに追加されているExt.Containerのインスタンスであることに注意してください。

最初のビューを作成しましょう。それはあなたが望むどんなウィジェットでもありえます、そして私はNavigationViewを選びました。

app/views/Main.js

Ext.define('MyApp.view.Main', {
    extend: 'Ext.navigation.View',

    config: {
        fullscreen  : true,

        items: [
            {
                title: 'My Great App'
            }
        ]

    }
});

フルスクリーン（幅と高さ100％）で、すぐにMy GreatAppというタイトルのTitleBarが作成されます。

MyApp.view.Mainを定義したばかりですが、アプリはMyApp.view.tablet.Mainを期待していることに気づきましたか？プロファイル間でビューを再利用する方法を示したかったからです。プロファイルに応じてそれらのビットを変更する場合にのみ役立ちます。

app/views/Tablet/Main.js

Ext.define('MyApp.view.tablet.Main', {
    extend: 'MyApp.view.Main',

    initialize: function() {
        this.add({
           xtype    : 'button',
           action   : 'coolBtn', 
           text     : 'Running on a tablet'
        });
        this.callParent();
    }
});

これはすでに素晴らしく見えます。拡張のために、NavigationViewにボタンを追加しました。ボタンで動作するコントローラーをセットアップします

app/controller/Main.js

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: { 
            coolButton: 'button[action=coolBtn]' 
        },

        control: {
            coolButton: {
                tap: 'onCoolButtonTap'
            }
        },

        routes: {
            'show/:id' : 'showItem'
        }
    },

    onCoolButtonTap: function(button) {
        console.log(button === this.getCoolButton());
    },

    showItem: function(id) {
        console.log('Showing item',id);
    }

});

これは素晴らしい部分です、ここです。参照を使用すると、コンポーネントクエリルールに基づいてコンポーネントにすばやくアクセスできます（button [action = coolBtn]は、プロパティaction = coolBtnを持つxtype = button cmpを見つけることを意味します）。 onCoolButtonTapの例に示されているように、参照はゲッターメソッドも追加します。

次に、ボタンを制御し、タップイベントを監視してハンドラーを割り当てるようにアプリに指示します。

MVCパターンへのもう1つの賢い追加は、ルートです。彼らはあなたのURIパスで「コマンド」を検出します。 http://localhost/#show/7482そして提供されたshowItemハンドラーを介してそれらを実行します。

概要

これで、MVCアプリを開始する方法の基本的な考え方がわかったと思います。好奇心があれば、知識を広げて素晴らしいアプリを作成できます。

私はこれを頭から書き、テストしていないことに注意してください。タイプミスか何かを見つけたら教えてください。

43
Grgur

最新の例が含まれているため、Beta1リリースを使用していることを確認してください。 jog-with-friendsの例を見ると、クラスシステムがどのように機能するかがわかります。

最初に理解することは、コントローラー、モデル、ストア、ビューで構成されるアプリケーション構造と、それらがExt.Application内でどのように定義されているかです。

彼らはまだドキュメントに取り組んでおり、チュートリアルは乏しいです、私はサンプルアプリを見るだけで新しいクラスシステムを学びました、それがおそらくあなたを始めるのに役立つだろうと見てください

また、クラスシステムのドキュメントはここにあります： http://docs.sencha.com/touch/2-0/#!/guide/class_system

編集：これを投稿した後、Beta2がリリースされたことがわかりました

2
Jeff Wooden