Getting Started

SenchaのAPIドキュメンテーションにある Getting Started を読んでみました。なんか最近こんなことばっかやってんなw。よくわかんないところは飛ばしてますww


I. イントロダクション

Ext JSは4、私たちが今までにはExt JSに行った中で最大のオーバーホールによるもので,今まで作成された中で最も高度なJavaScriptフレームワークを構成しています。HTML生成の部分からクラスシステムまで,フレームワークのほとんど全ての部分はアップグレードされています。APIを統一して,信じられないほどの新機能を追加し,フレームワーク全体のパフォーマンスを改善しました。

II. はじめに

1. 必要条件

1.1 Web ブラウザ

Ext JS4はインターネット・エクスプローラー6からChrome11までほとんどのブラウザをサポートします。開発するには,最良のデバッグ環境がある,以下のブラウザを主として使うことを進めます:

1.2 デバッグツール

開発を支援するための利用方法がわかるように,各ブラウザでのお勧めのツール専用のデバッグ ハンドブック ガイドを参照してください。

1.3 Web Server

ローカルのWebサーバーは,Ext JS 4を使用する上の必要条件ではありませんが,ローカルWebサーバーを使って開発することが強く推奨されます。

1.4. Ext JS 4 SDK

Ext JS 4 SDK をダウンロードしてください。パッケージをWebルート ディレクトリに展開します。このガイドでは,http://localhost/ext-4.0p がトップレベル ディレクトリを指すと仮定します。

ブラウザで http://localhost/ext-4.0/index.html を開いてください。ウェルカムページが表示されたら準備完了です。

2. アプリケーション構造

必須ではありませんが,以下に記載されたすべての提案は,アプリケーションを整然として,拡張性があり,保守性もある状態に保つガイドラインになります。

2.1 基本構造

- appname
    - app
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - resources
        - css
        - images
        - ...
    - app.js
    - index.html

in which:

  • appname は,すべてのソースファイルを格納するディレクトリです。
  • app すべてのクラスを配置します。名前の付け方は Class System ガイドに記載された規則に従います。
  • resources には,プリケーションのルック・アンド・フィールを担当する追加CCSや画像ファイルを配置します。また静的なリソースも(XML、JSONなど)もここに置きます。
  • index.html はエントリーポイントの HTML ファイルです。
  • app.js にはアプリケーションのロジックを記述します。

Ext JS アプリケーションは,単一のHTMLドキュメントで自己完結します。中身のフォーマットは次のとおりです:

<html>
<head>
    <title>Application Name</title>

    <link rel="stylesheet" type="text/css" href="path/to/sdk/resources/css/ext-all.css">
    <script type="text/javascript" src="path/to/sdk/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

whereby:

  • path/to/sdk は,セクション1.4でダウンロードしたExt JS 4 SDK のディレクトリを指します。
  • path/to/sdk/resources/css/ext-all.css はフレームワーク全体で使うスタイル情報。
  • path/to/sdk/ext(-debug).js はExt JS 4 のコアライブラリ (もしくは path/to/sdk/ext-all(-debug).js あとで説明します)

このポイントからは、あなたは、2つの異なったライブラリ包含メソッドを選ぶ必要があります。 それぞれには、以下に記載されたそれ自身の賛否両論があります:

  1. フレームワーク全てが入っている,path/to/sdk/ext-all.js (path/to/sdk/ext-all-debug.js は開発時用)をインクルードする。
    • 長所:
      • デフォルトExt JSのコンポーネント(あなたのカスタム クラスでないもの)を使用するとき依存関係を心配する必要が全くありません。
    • 短所:
      • .アプリケーションがライブラリが提供するものすべてを利用しないのなら,デプロイメントされるファイルサイズが不要に大きくなります。その結果,ネットワークデータ転送オーバーヘッドがあるとともに,不要なスクリプトが実行されるので,アプリケーションの初期化が遅くなります。
      • すべてのソースコードが1個の大きいファイルの中にはいっているので,デバッグが難しくなります。
  2. 最小のコアライブラリだけが入ってる path/to/sdk/ext.js (path/to/sdk/ext-debug.js は開発時用) をインクルードし,Ext.Loaderを使って依存関係の自動解決する。
    • 長所:
      • アプリケーションはあなたが展開するとき、あなたのアプリケーションは、まさにそれが必要とするものをロードするだけです。 配布しているファイルサイズは最小量になるでしょう。 すべてのソースファイルが切り離された状態でロードされるので、デバッグは、簡単であって、簡単です。 誤りメッセージはそれらが起こる正確な行番号とファイル名と共に来ます。
      • アプリケーションは必要なものだけをロードするので,デプロイされるファイルのサイズは最小になります。
      • すべてのソースは分離されているのでデバッグは単純で簡単です。エラーが発生した正確な行番号やファイル名がわかります。
    • 短所:
      • SDKと共に出荷されたデフォルトコンポーネントを使うときに,依存関係に注意が必要です。

要約すると,初期のラーニングカーブを短くしたいのなら ext-all(-debug).js を使うことが推奨されます。一方, ext(-debug).js は実際のアプリケーション開発のほとんどの場合に好まれます。

最後にとても重要なことを,

Last but not least, app.js はアプリケーション ロジックのエントリーポイントです。基本的なアプリケーションでの標準的なフォーマットは次のようになります:

// Register namespaces and their corresponding paths to Ext.Loader

Ext.Loader.setPath({
    'AppName': 'app',
    ... // Other namespaces
});

// Specify a list of classes your application your application needs
Ext.require([
    ...
]);

// Application's initialization
Ext.onReady(function() {

    ...

});

2.2 MVC (Model-View-Controller) 構造

Ext JS 4 shipped with a robust MVC architecture which maximize extensibility and maintainability for medium to large scale applications. Please refer to the MVC Application Architecture guide for detailed instructions.

Ext JS4 は,中規模から大規模なアプリケーションのために拡張性と保守性を最大にする、堅牢なMVCアーキテクチャと共に出荷されました。詳しくは MVC Application Architecture guide を参照してください。

3. デプロイメント

新顔のSehcha SDKツール(ここからダウンロードできます)は,Ext JS4アプリケーションのデプロイメントをこれまでより簡単にします。このツールは全ての依存関係のマニフェストをJSB3ファイル(JSBuilderファイルフォーマット)の形式で生成できます。

SDKツールをインストールしたら,ターミナルウィンドウを開いて,アプリケーションのディレクトリに移動します。

cd path/to/application

ここからいくつかの簡単なコマンドを走らせます。最初はJSB3ファイルを生成します:

sencha create jsb -a index.html -p app.jsb3

index.html をスキャンして,アプリケーションで実際に使われているファイルを調べて,app.jsb3 というJSBファイルを生成します。

ビルドする前に,生成されたファイルを変更することができます。これはコピーするカスタムリソースがある場合に便利ですが,ほとんどの場合,そのまま続けて二番目のコマンドでアプリケーションをビルドします。

sencha build -p app.jsb3 -d .

これはJSB3ファイルを引数にとってapp-all.js ファイルを作ります。このファイルはあなたのアプリケーションに加えて,実行時に必要とされるExt JS クラスの全てのミニマイズビルドです。また,all-classes.js ファイルも作られます。これは app-all.jsと同じクラスですが,ミニファイされていないのでビルドしたアプリケーションのデバッグの時に便利です。つまり app-all.js は all-classes.js と app.js.をミニファイした出荷バージョンです。

ほとんどのアプリケーションでは出荷用バージョンには,別のindex.html が必要になります。通常は,出荷版のindex.htmlファイルは次のようなものになります:

<html>
<head>
    <title>Application Name</title>

    <link rel="stylesheet" type="text/css" href="path/to/sdk/resources/css/ext-all.css">
    <script type="text/javascript" src="path/to/sdk/ext.js"></script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

セクション2.1の開発バージョンと比べてみると,この出荷バージョンでは Notice that path/to/sdk/ext-debug.js が path/to/sdk/ext.js になり, app.js が app-all.js に変わっていることに注目してください。

PHPやRubyASPなどのようなサーバーサイドの動的言語の先頭のビルド

PHP,Ruby,ASPなどのような動的なサーバサイド言語で作られたアプリケーションでは,最初のコマンドの index.html をアプリケーションの実際のURLに変えることができます。このURLは開発中にブラウザに表示されているものと同じにします。例えば:

sencha create jsb -a http://localhost/path/to/application/index.php -p app.jsb3

このガイドは執筆中です

Please check back soon

Getting Started」への1件のフィードバック

  1. ピンバック: scriptタグで読み込むファイルとデプロイについて | Sunvisor Lab. Ext JS 別館

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です