リソースとは、作成するアプリケーションが正常に動作するために必要な「追加的」なファイルです。たとえば、アプリの視覚的なコンポーネントのスタイルを設定するカスタムの CSS は、アプリケーション用のビジネスロジックを含む JavaScript ユーティリティファイルであるため、リソースにあたります。Architect では、このような外部リソースは、[Project Inspector(プロジェクトインスペクタ)] ウィンドウ経由でリソースノード配下のアイテムとして追加することによって含めることができます。
新しいリソースをプロジェクトに追加するには、ツールボックスの [Resources(リソース)] セクションからドラッグするか、[Project Inspector(プロジェクトインスペクタ)] ウィンドウの上にある [Add(追加)] ボタン(+)をクリックして追加するリソースのタイプを選択します。アプリでリソースをロードする順序をコントロールするには、[Project Inspector(プロジェクトインスペクタ)] ウィンドウで上下にリソースをドラッグします。
Architect では次のタイプのリソースを認識します。それぞれのタイプについては、ここで個別に説明します。
テーマおよび CSS/SCSS ファイルもリソースとしてプロジェクトに含めることができます。
Architect では、リソースからクラスをインスタンス化できます。方法については、このガイドの末尾に記載しています。
ライブラリリソース
すべてのプロジェクトには特別な「ライブラリ」リソースがあり、削除はできません。このリソースには、ベースとなる Ext JS や Sencha Touch のライブラリの JS および CSS ファイルの場所に関する情報が格納されています。デフォルトでは、これらは Sencha の CDN がある場所からロードするように設定されていますが、たとえばライブラリのカスタムビルドやローカルネットワークのパスといった別の場所からロードするように変更することもできます。
ライブラリオプション
その他のリソース同様、ライブラリオプションの変更は、[Project Inspector(プロジェクトインスペクタ)] ウィンドウでライブラリを選択して [Config (コンフィグ)] パネルで値を変更することで行えます。オプションには次のようなものがあります。
- ライブラリのロード先を変更する
- ライブラリ JS のデバッグ版を含める
- ライブラリ JS を含める(または含めない)
- ライブラリ CSS を含める(または含めない)
これらの設定を使用すると、完全にカスタマイズしたテーマの使用、異なるドメインにあるライブラリの使用、デバッグ版ライブラリの有効化などを行えます。完全にカスタマイズしたテーマの使用に関する詳細は、アプリケーションのスタイル設定を参照してください。
ライブラリのアップグレード
Architect では、ユーザーが同一フレームワークのマイナーなバージョンアップ(たとえば Ext JS 4.1 から 4.2 など)を行えるように最大限配慮しています。たとえば Architect 2.2 では、Ext JS 4.2 のサポートが追加されました。[Project Inspector(プロジェクトインスペクタ)] ウィンドウでライブラリリソースを右クリックして [Upgrade to Ext42(Ext42 にアップグレード)] を選択することにより、4.1 のプロジェクトを 4.2 にアップグレードできます。アップグレード処理を行うと、新しいフレームワークに合うように、コンフィグや設定に必要な変更が行われます。通常、変更は最小限となります。
Architect では、アップグレード後に下位のフレームワークへのダウングレードを行うことができない点に注意してください。アップグレード時にはプロジェクトのアーカイブが保存されますので、必要に応じて元のバージョンに戻せます。
JavaScript リソース
サードパーティ製のユーティリティライブラリといった JavaScript ファイルをアプリケーションに含めるには、JavaScript リソースを使用します。JavaScript リソースを[Project Inspector(プロジェクトインスペクタ)] ウィンドウのリソースノードに含めたら、url コンフィグに JavaScript ファイルの場所を設定します。オプションとして、ID 属性を追加したり、遅延コンフィグをチェックして遅延実行を行うように設定したりできます。
Architect ではカスタムの JavaScript リソースをキャンバスにロードしませんので、実装したアプリケーションに含まれるだけとなります。
url コンフィグに相対パスを指定すると、実装時にメインの app.html ファイルに相対するものとして解釈されます。相対パスは、また、Architect のコードエディタを使用したファイルコンテンツの編集も可能にします。[Project Inspector(プロジェクトインスペクタ)] ウィンドウで JS リソースを選択してコードビューに切り替え、JavaScript コードを編集して、ターゲットの .js ファイルを更新します。指定したローカルパスにファイルがない場合、プロジェクトの保存時またはビルド時に Architect によって作成されます。
ダイレクトリソース
外部にある Ext.Direct API ディスクリプタの場所を設定するには、ダイレクトリソースを使用します。データストアでダイレクトプロキシを使用する場合には、この対応が必須となります。ダイレクトリソースは、1 つのプロジェクトに 1 つのみ追加できます。
ダイレクトリソースを [Project Inspector(プロジェクトインスペクタ)] ウィンドウのリソースノードに含めたら、url
コンフィグに Ext.Direct API の場所を設定します。この URL では適切な Direct REMOTING_API ディスクリプタを返すことが必要です。Architect でロードを試み、応答が有効であった場合には「Successfully Updated Ext.Direct API(Ext.Direct API のアップデートに成功しました)」というメッセージが返されます。アプリケーションの任意のダイレクトプロキシでこの API のメソッドを directFn
コンフィグのオプションとして提供できるようになります。ロードが失敗した場合、「Ext.Direct Remoting Specification failed to load.(Ext.Direct リモート仕様のロードに失敗しました)」というメッセージが返されます。
リソースの編集
Architect では特定のリソースをコードエディタで編集できます。リソースがローカルのものであれば、リソースをダブルクリックするか、リソースのコンテキストメニューまたは [Action(アクション)] メニュ-で [Edit Code(コードの編集)] を選択することにより、編集できます。新しいファイルでない限り、リソースは初回編集時にロックされています。
リロードボタンまたはリソースのコンテキストメニューにあるアクション(下の画像を参照)を選択すると、リソースのコードがリソースからロードされます。
警告:_この動作により現在の変更は上書きされます。_
リソースからのクラスのインスタンス化
Architect では、リソースからのクラスのインスタンス化をサポートしています。これにより、ユーザーが createAlias を Base.js
に実装されている任意の子コンポーネント(つまり、ビュー、モデル、ストア、コントローラの一部)で指定できるようになります。描画できるようにするため、最上位のコンポーネントでは継承するクラスを指定し、先祖の情報を維持することが必要です。
たとえば、Grid Panel を継承する DynamicGridPanel を使用している MyCustomGrid
という名前の最上位のクラスを作成し、 ツールボックスから GridPanel をドラッグして、DynamicGridPanel への継承を設定します。これにより、コンポーネントでは親子に関するすべてのバリデーションルールを使用でき、描画を続行できます。
createAlias 機能の使用に関する詳細は、クラスの働き を参照してください。
Google Maps API リソース(Sencha Touch のみ)
作成する Sencha Touch アプリに Google Maps API を含めるには、Google Maps API リソースを使用します。この処理は、地図コンポーネントを使用する場合に必要です。Architect では、プロジェクトに地図コンポーネントを追加すると、これを自動的にリソースに追加します。Google Maps API リソースは、1 つのプロジェクトに 1 つのみ追加できます。
リソースでは、標準的な Google Maps API v3 の URL をセンサーを有効化して設定します。異なるオプションを指定したい場合(たとえば API キーを追加するなど)、URL は Google のドキュメントに従ってカスタマイズできます。