13

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

4

3 に答える 3

43

これはおそらく最も初期のチュートリアルの 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 つのプロファイル間で共有されるビュー、モデル、およびコントローラーをセットアップしました。アプリを携帯電話で使用しているかタブレットで使用しているかは気にしません。

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

アプリ/プロファイル/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');
    }
});

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

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

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

プロファイルの最後の部分は起動方法です。アプリが特定のプロファイルで起動されたときに何をすべきかをアプリに伝えます。MyApp は Ext.Viewport にメイン ビューを作成します。

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

最初のビューを作成しましょう。どんなウィジェットでも構いませんが、私は NavigationView を選びました。

アプリ/ビュー/Main.js

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

    config: {
        fullscreen  : true,

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

    }
});

フルスクリーン (幅と高さ 100%) で、My Great App というタイトルの TitleBar がすぐに作成されます。

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

アプリ/ビュー/タブレット/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 にボタンを追加しました。ボタンで動作するコントローラーをセットアップします

アプリ/コントローラー/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 = ボタン cmp を見つけることを意味します)。onCoolButtonTap の例に見られるように、Refs は getter メソッドも追加します。

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

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

概要

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

これは私の頭から書いたものであり、テストしていないことに注意してください。誤字脱字等ありましたらお知らせください。

于 2012-02-12T07:44:37.917 に答える
12

以下は、sencha 2011 カンファレンスの 2 つのビデオです。

SenchaCon 2011: MVC の詳細パート 1 https://vimeo.com/33311074

と

SenchaCon 2011: MVC の詳細パート 2 https://vimeo.com/33430731

また、ブログで他の短いチュートリアルを確認することもできます。

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

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

于 2012-02-10T15:17:36.820 に答える
2

Beta1 リリースには最新のサンプル セットが含まれているため、必ず Beta1 リリースを使用してください。ジョグ・ウィズ・フレンズの例を見ると、クラス・システムがどのように機能するかがわかります。

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

彼らはまだドキュメンテーションに取り組んでおり、チュートリアルはほとんどありません。私は新しいクラス システムをサンプル アプリを見て学んだだけです。見てみると、おそらく作業を進めるのに役立つでしょう。

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

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

于 2012-02-10T15:28:50.950 に答える