ストアとモデル

Architect プロジェクトでは、アプリケーションにおけるデータ操作にストアとモデルを使用します。Ext JS および Sencha Touch アプリは共にストアとモデルのパラダイムを使用してデータの保存と操作を行います。Sencha Architect では、シンプルで統一的なインターフェイスを双方に提供しています。

本ガイドでは、このトピックについて紹介します。

• Ext JS データパッケージに関する情報は Ext JS データガイドを参照し、記載されているリンクを使用して詳細をご覧ください。
• Sencha Touch データパッケージに関する情報は Sencha Touch データガイドを参照し、記載されているリンクを使用して詳細をご覧ください。

では、モデルから始めましょう。モデルの最も基本的なレベルでは、特定の種類のデータについて、フィールドセットの構造と各フィールドのタイプを記述しています。たとえば、「User」のモデルに含まれると考えられるフィールドとして「username」、「department」、「date_joined」、「manager」があり、「date_joined」フィールドは日付型、その他のフィールドは文字列型です。言い換えると、モデルとは作成するアプリケーションでアクセスするデータのスキーマを定義するものです。

ストアはデータレコードの集合体を保持するオブジェクトであり、アプリケーションでレコードを走査し、検索し、操作できるようにします。各ストアのレコードは、ストアに関連付けられている特定モデルのインスタンスです。次の例では、「User」用のフィールドを記述するモデルを作成します。この「Users」ストアには全ユーザーの一覧が格納されます。

Ext JS や Sencha Touch のビューは、ストアにアクセスして、各レコードに対応する視覚的表現を表示します。たとえば、「user details」ビューは「Users」ストアにアクセスし、特定のユーザーをクエリしてアプリケーションのフィールドにコンテンツ（ユーザー名や加入日など）をセットします。

ストアには、データの取得元となるソースが必要です。最も初歩的なストアは、一連のデータを静的にハードコーディングしたものですが、このようなデータはウェブから取得する方が普通です。これを行うため、2 つのツールが用意されています。

• プロキシは、外部ソースからデータを取得する際の場所と方法をストアに伝達します。最近のアプリケーションでは、ウェブサーバーから要求される JSON データであることが一般的です。
• リーダーは、データの検索先をアプリケーションに伝達します。たとえば、ウェブサーバーから返されたオブジェクトが user_list というルートレベルにデータを返した場合、そのリーダーのルートには user_list が設定されます。

次に JSON ファイルの例を示します。

{
"response_code": 200,
"response_message": "OK",
"response_timestamp": 1363208209,
"user_list": [
  {
    "username": "bob",
    "date_created": 1363148384,
    "profile": "Bob is from Arkansas. He enjoys reading, live music, and cookies."
  },
  {
    "username": "jane",
    "date_created": 1363106223,
    "profile": "Jane is from Virginia. She loves math, cooking, and this application!"
  }
]
}

データのパラダイムをまとめます。

• ストア では、クライアントサイドのデータキャッシュをUIコンポーネントへ提供します。
• Architect のストアは、ローカルまたはリモートのソースからデータを取得し、Ext JS プロジェクトのグリッドパネルやツリーパネルやコンボボックス、あるいは、Sencha Touch プロジェクトのデータビューやリストやネストされたリストといった UI コンポーネントで表示できるようにします。
• ストアは、データをロードするためのプロキシ、および、そのデータを解析して適切なスキーマ（このスキーマはモデルによって決まる）に読み込むリーダーと連携して動作します。
• ストアは基本的にモデルのインスタンスの集合体です。
• また、ストアでは、その中に含まれるモデルのインスタンスの並べ替えやフィルタリング、クエリを行う関数を提供します。

ストアに関する詳細は、適切なリファレンスページを参照してください: Ext.data.Store または Touch Data Store。

ストアとモデルを設定する基本的な手順は次のとおりです。

1. モデルの追加と設定を行います。モデルにフィールドを追加し、フィールドをデータにマッピングします。
2. 適切なプロキシおよびリーダーと共にストアを追加します。Architect では、ストアのタイプを選択する際に適切なプロキシとリーダーが自動的に追加されます。
3. ストア、プロキシ、リーダーを設定します。
4. モデルとストアを関連付けます。
5. ストアとビューコンポーネントを関連付けます。

このガイド以降では、これらの各手順を完了するための説明を行っています。

さらに詳しく知りたい方は、 - このガイドの最後に記載された 3 通りのストアの例をご覧下さい。 - これらの手順すべてを実際のアプリケーションに含めた例は、デスクトップ端末向けのアプリケーションの構築および モバイル端末向けのアプリの構築を参照してください。

モデル

Architect では、アプリケーションで使われるデータオブジェクトをモデルを使って表現するための、完全な MVC パッケージを提供しています。Architect の他のコンポーネントと同じように、モデルを追加して設定できます。

モデルの追加

[Project Inspector（プロジェクトインスペクタ）] の右上にある追加ボタン (「+」) をクリックし、モデルを選択してプロジェクトに追加するか、ツールボックスの「Data」カテゴリからモデルを選択します。

[Project Inspector（プロジェクトインスペクタ）] の Models ノードに追加したモデルが表示されます。

モデルの設定:基本

[Project Inspector（プロジェクトインスペクタ）] でモデルを選択し、[Config（コンフィグ）] パネルでコンフィグを開きます。モデルを有効化し関連付けられているストアでデータをロードするために設定する基本的なコンフィグを次に示します。

userClassName – モデルに一意の名前を付与します。

Fields – モデルにフィールドを追加するために使用します。フィールドを追加する手順は次のとおりです。

1. [Value（値）] で、右の追加ボタン（「+」）をクリックし、フィールドを追加します。
2. フィールド名を付与します。レコードフィールド名と一致する必要があります。複数のフィールドをカンマで区切って入力すると、一括で追加して名前を付けることができます。（たとえば「name, birthday, hobbies」など）。
3. [Project Inspector（プロジェクトインスペクタ）] では、各コンフィグが対応するモデルに表示されます。
4. フィールドを追加したら、[Project Inspector（プロジェクトインスペクタ）] で選択してさらに詳細な設定を行えます。たとえば、「mapping」コンフィグは、リクエストするデータソースから返される「user_name」というフィールドを「username」と呼びたいといった場合に使用します。この場合、「username」フィールドの「mapping」コンフィグに「user_name」をセットします。

この例については、モバイル端末向けのアプリの構築の「データを定義するモデルとストアのビルド」を参照してください。

その他のモデルのコンフィグ

ストアにデータを読み込むために必須というわけではありませんが、[Config（コンフィグ）] パネルからモデルにアソシエーション、プロキシ、バリデーションなどを追加することもできます。その他のモデルのコンフィグのうち代表的なものを紹介します。

Associations（アソシエーション）:モデルにアソシエーションを追加します。BelongsTo,、HasMany、HasOne のいずれかを選択します。詳細については Ext.data.schema.Association を参照してください。

Proxy（プロキシ）:プロキシをモデルに追加します。通常、プロキシはストアに定義しますが、モデルに定義することもできます。プロジェクトに同一モデルを使用する複数のストアがあり、同一のプロキシを共有している場合、モデルに定義するとストアごとに再定義せずに済むため、便利です。以下の種類から選択します。

• Ajax
• Direct
• JsonP
• LocalStorage
• Memory
• Rest
• SessionStorage

Validations（バリデーション）:バリデーションをモデルに追加します。以下の種類から選択します。

• Email
• Exclusion
• Format
• Inclusion
• Length
• Presence

詳細については Ext.data.validator.Validator を参照してください。

フィールドの構成

インスペクタ内でフィールドを選択します。 以下の設定を行います。

• name
• type
• mapping
• sortDir
• sortType

詳細については Ext.data.field.Field を参照してください。

ストア

ストアには、実際のアプリケーション用の情報が格納されています。Architect では、プロジェクトに追加できる汎用ストアをツールボックスに用意しています。ストアには、データの取得方法と取得元（URL、プロトコルなど）を教えるプロキシを割り当てることができます。また、入力される生データのフォーマットを把握しており、ターゲットとなるモデルレコードに解析できるリーダーを割り当てることもできます。

またArchitect では、最も一般的なプロキシ/リーダーの組み合わせをあらかじめ定義した、ストアの特殊化をいくつか用意しています。たとえば、JsonP ストアは Ajax プロキシと JSON リーダーを使って自動的に設定されます。これは初期設定に過ぎません。設定されているプロキシやリーダーは必要に応じて自由に削除したり入れ替えたりできます。

[Project Inspector（プロジェクトインスペクタ）] の右上にある追加ボタン (「+」) をクリックして表示されるドロップダウンメニューを使用してストアを追加することもできます。

次のタイプのストアがツールボックスに用意されています。

ストア

プロキシやリーダーが初期設定されていない汎用ストア。

• Store クラス - Sencha Ext JS | Touch
• Proxy クラス - なし
• Reader クラス - なし

JSON ストア

Ajax プロキシと Json リーダーを使用して初期設定されているストア。AJAX 呼び出しで JSON エンコードされたデータを取得する場合によく使用されます。

• Store クラス - Ext JS | Touch
• Proxy クラス - Ext JS | Touch
• Reader クラス - Ext JS | Touch

JsonP ストア

JsonP プロキシと Json リーダーを使用して初期設定されているストア。スクリプトタグを使用して JSON-P でラッピングされた JSON データを取得する場合によく使用されます。データが異なるドメインからロードされる場合に特に便利です。

• Store クラス - Ext JS | Touch
• Proxy クラス - Ext JS | Touch
• Reader クラス - Ext JS | Touch

Array ストア

Ajax プロキシと Array リーダーを使用して初期設定されているストア。Json Store に似ていますが、こちらはターゲットの JSON データの各レコードがオブジェクトではなく配列としてエンコードされている場合に使用します。

• Store クラス - Ext JS | Touch
• Proxy クラス - Ext JS | Touch
• Reader クラス - Ext JS | Touch

XML ストア

Ajax プロキシと Xml リーダーを使用して初期設定されているストア。データが XML エンコードされている場合によく使用されます。このガイドの末尾には、Xml Store の使用例を記載しています。

• Store クラス - Ext JS | Touch
• Proxy クラス - Ext JS | Touch
• Reader クラス - Ext JS | Touch

Direct ストア

Direct プロキシと Json リーダーを使用して初期設定されているストア。データソースが Ext Direct プロトコルを使用して公開されている場合によく使用されます。

• Store クラス - Ext JS | Touch
• Proxy クラス - Ext JS | Touch
• Reader クラス - Ext JS | Touch

Tree ストア

Architect ではまた、データを平面的ではなくネストしたツリー状の構造で格納する、次のツリーストアタイプを提供しています。これらは通常、ツリー状のデータの表示方法を認識しているビューコンポーネント（たとえば、Ext JS ではツリーパネル、Sencha Touch ではネストされたリスト）と共にのみ使用します。

Tree ストア

Ajax プロキシと Json リーダーを使用して初期設定されているツリーストア。AJAX 呼び出しで JSON エンコードされたツリーデータを取得する場合によく使用されます。

• Store クラス - Ext JS | Touch
• Proxy クラス - Ext JS | Touch
• Reader クラス - Ext JS | Touch

JsonP Tree ストア

JsonP プロキシと Json リーダーを使用して初期設定されているツリーストア。スクリプトタグを使用して JSON-P でラッピングされた JSON ツリーデータを取得する場合によく使用されます。データが異なるドメインからロードされる場合に特に便利です。

• Store クラス - Ext JS | Touch
• Proxy クラス - Ext JS | Touch
• Reader クラス - Ext JS | Touch

XML Tree ストア

Ajax プロキシと Xml リーダーを使用して初期設定されているツリーストア。ツリーデータが XML エンコードされている場合によく使用されます。

• Store クラス - Ext JS / Touch
• Proxy クラス - Ext JS / Touch
• Reader クラス - Ext JS / Touch

Architect の実行中に各ストアが果たす役割に関するその他の詳細については、ツールボックスで各タイプのストアの隣にある ? をマウスでポイントしてください。クラスの簡単な説明と対象の API ドキュメントへのリンクが表示されます。

ストアの追加

ストアをプロジェクトに追加する方法には 2 つのオプションがあります。1 つ目は、[Project Inspector（プロジェクトインスペクタ）] の右上にある追加ボタン (「+」) をクリックし、Store の上へカーソルをドラッグして、アルファベット順に並ぶストアタイプの一覧を開く方法です。

もう 1 つは、ツールボックスで Store をドラッグする方法です。「Data」カテゴリをクリックして、表示されるドロップダウンメニューで [Data Stores（データストア）] グループにスクロールします。[Project Inspector（プロジェクトインスペクタ）] パネルにドラッグするストアを選択し、「Stores」ノードにドロップします。

ストアを選択すると、[Project Inspector（プロジェクトインスペクタ）] の Stores ノードにストアおよび適切なプロキシとリーダーが追加されます。生成されるコードを見るには、中央のパネルにあるコードビューを参照します。

作成されたデフォルトのプロキシやリーダーのタイプを使用する必要はありません。別のタイプを選択する手順は次のとおりです。

• [Project Inspector（プロジェクトインスペクタ）] パネルに移動します。
• 置換するプロキシやリーダーを右クリックします。
• 表示されるドロップダウンメニューで [Transform（変換）] を選択します。
• ドロップダウンメニューで使用するプロキシやリーダーを選択します。

ストアの設定: 基本

[Project Inspector（プロジェクトインスペクタ）] でストアを選択し、[Config（コンフィグ）] パネルでコンフィグを開きます。プロキシとリーダーを選択します。

ストア、プロキシ、リーダーには多くのコンフィグがありますが、初期段階で設定が必要なものはごく少数の基本的なものだけです。

以下の手順を正しく完了するまでは、ストアにデータを読み込むことはできません。Architect では、これを [Project Inspector（プロジェクトインスペクタ）] のストアの右側に感嘆符を表示することで通知します。

（Config内の各プロパティについての詳細の説明は、プロパティ名の横に表示されるクエスチョンマークにカーソルを合わせるとAPIドキュメンテーションへのリンクと一緒に表示されます。

ストアで次の項目を設定します。

userClassName – ストアに一意の名前を付与します。生成するコードにおいて、ストアのクラス名となります。

storeId – ストアに使用するメインの識別子です。Sencha Touch では、ストアとビューを関連付ける際、これがドロップダウンメニューにリストされます。Ext JS では、これに userClassName と同じ値をセットすることが必要です。

autoLoad – アプリケーションの起動時にストアからデータを自動的にロードできるようにするオプションの設定です。有効化するには、コンフィグの右にあるチェックボックスにチェックマークをつけ、autoLoad を true にします。なお、このためにはbufferedの項目のチェックが外れていることを確認してください。

model – Value フィールドには、プロジェクトに追加されたモデルの一覧が表示されます。このストアに関連付けるモデルを選択します。このプロパティは、モデルがプロジェクトに追加されると有効化されます。モデルの追加および設定の方法については、本ガイドの次のセクションで説明します。ストアとモデルを関連付ける手順については、後述する「ストアとビューの関連付け」の項で詳細に説明しています。

プロキシでは、以下の項目を設定します。

url – リモートデータのロード元となる URL です。通常、プロキシの設定は相対パスで設定されます。JsonPプロキシの場合、絶対パスとして設定する場合もあります。URL が解決しないと、Architect にデータをロードできません。URL が相対パスである場合、Architect で URLプレフィックスが設定されていることが必要です。これはリモートデータをロードするプロキシにのみ当てはまり、ローカルのメモリプロキシなどには関係ありません。

リーダーでは、以下の項目を設定します。

root/rootProperty – 行オブジェクトの集合体を保持する応答データに、この集合体がルートにある場合を除き、プロパティまたは要素を指定します。Array リーダーは対象外です。

カスタムのストアコンフィグの追加

[Config（コンフィグ）] の最上部にある Filter フィールドにコンフィグ名を入力して [Add（追加）] をクリックすると、表示されている他のストアコンフィグに加えて、カスタムのコンフィグを追加できます。追加されたカスタムのコンフィグは、[Config（コンフィグ）] パネルに表示され、設定できるようになります。

高度なメモ

ほとんどの場合、ここで説明したコンフィグを使用すれば十分ですが、必要であれば他にもオプションがあります。

• アプリケーションのニーズに合う標準的なストアがない場合、汎用的なストアを使用できます。汎用的なストアを追加するには、追加ボタンを押して Store をクリックします。ストアが Stores ノードに追加されます。汎用的なストアにはデフォルトのプロキシやリーダーが定義されていませんが、必要に応じて追加できます。[Project Inspector（プロジェクトインスペクタ）] でストアを選択し、Proxy コンフィグを探します。右にある追加ボタンをクリックし、ストアに追加するプロキシを選択します。[Project Inspector（プロジェクトインスペクタ）] のストアに追加したプロキシが表示されます。そこでプロキシを選択し、Reader コンフィグを探し、追加ボタンを選択してストアにリーダーを追加します。

ストアへのデータのロード

ストアを正しく設定したら、[Project Inspector（プロジェクトインスペクタ）] のストアの横から感嘆符が消えて、ストアにデータをロードできるようになります。データをロードするには、ストアを右クリックし、コンテキストメニューで [Load Data（データのロード）] を選択します。データが正常にロードされると、[Project Inspector（プロジェクトインスペクタ）] のストアの横に目のアイコンが表示されます。カーソルをそのアイコンに乗せると、いくつのレコードを読み込んだかが表示されます。アイコンをクリックすると、別のウィンドウで生のデータを見ることができます。

ストアにデータをロードできない場合、ストアの横に感嘆符が表示されます。感嘆符をクリックすると、ストアにデータをロードするための解決策を示したエラーメッセージが表示されます。

ストアとビューの関連付け

ストアおよび関連するモデルを作成したら、ストアをビューコンポーネントに関連付けて、データを表示できるようにします。

ストアとビューを関連付けるには、[Project Inspector（プロジェクトインスペクタ）] でビューを選択し、キャンバスに表示します。キャンバスで、ビューの Flyout Config ボタンをクリックし、プロジェクトに作成したストアの一覧を表示します。ビューに関連付けるストアを選択します。この処理は、ビューコンポーネントを選択中に [Config（コンフィグ）] パネルで「store」を見つけて行うこともできます。

データストアに関連付けられるビューコンポーネントは限られているということに注意してください。次に例を挙げます。 - データビュー - チャート - リスト（Sencha Touch のみ） - グリッドパネル（Ext JS のみ） - ツリーパネル（Ext JS のみ）

データを正しく表示するため、ビューに追加の設定を行うことが必要となることがあります。たとえば、グリッドを使用する場合、グリッドのカラムとストアの適切なフィールドとを関連付ける必要があります。その場合、インスペクタ内でグリッドを右クリックし、Auto columnsを選択します。チャートを使用する場合、使用するデータの種類に応じて series コンフィグと axis コンフィグを設定することが必要です。

データベースとの連携

Sencha フレームワークでは JSON または XML フォーマットでデータをロードする方法を認識しているリーダーを提供しています。データがデータベースに保存されていれば、任意のサーバーサイドの言語を使用して、JSON または XML ファイルを生成し、Sencha Architect アプリケーションに渡すことができます。

モックデータの使用

Architect では、「ダミーデータ」をストアやビューに入力できるモックデータ機能をサポートしています。これにより、アプリケーションの生成コードにデータを含めなくてもキャンバスで外観を確認できます。もちろん、ストアを設定してデータをサーバーから取得することもできます。これにより、たとえば実際のデータにアクセスするには追加の情報（ログイントークンや地理位置情報など）が必要となる場合など、データのアクセスや保存が困難であったり経費がかかる場合に、テスト目的でデータのシミュレーションを行えます。

次の 2 種類のモックデータ機能を提供しています。

• 使用するモックデータをユーザーが作成（Architect 2.2 以降で可能）
• モデルとストアの定義に適合するデータを Architect で生成（Architect 3.0 以降で可能）

モックデータの仕組みを確認するには Sencha Touch の「Task List」テンプレートを使用して新しいプロジェクトを作成します。「Tasks」ストアを選択し、「data」コンフィグを見つけて「Edit（編集）」アイコンをクリックします。

表示された情報に対応する JSON 形式のオブジェクト配列を記述した [Code Editor（コードエディタ）] パネルが表示されます。この情報は変更できます。たとえば、最初のアイテムを「Write a song」に変更します。変更を加えたら、エディタの右上隅にある [Mock up data（データのモックアップ）] というラベルのチェックボックスにチェックマークを付けます。

デザインビューに戻ると、変更後の情報が表示されます。

Architect 3 以降では、このストアに関連付けられているモデルに定義されているフィールドとタイプに基づいて Architect がデータを生成することができます。これを実行するには、[Generate Data（データを生成）] ボタンをクリックします。使用するフィールドとタイプが Architect に表示され、作成するレコードの数をユーザーが選択できます。

各フィールドに使用するタイプを変更して、生成するデータを微調整することもできます。たとえば、モデルに文字列型の「first_name」フィールドがある場合、このフィールドには無作為の文字列ではなく名前を生成することを選択できます。ここで選択したタイプは生成するモックデータのみに影響することに注意してください。モデルに定義されているフィールドとタイプは変わりません。

タイプを選択したら、[Generate Data（データを生成）] ボタンをクリックします。Architect により、作成した JSON ファイルが表示されます。必要に応じてこれを編集することができます。デザインビューに戻ると、新しいデータが画面に表示されます。

例1：Json Store

1 つ目の例では、Jsonストアをビルドする方法を示します。ストアにはデータが必要ですので、プロジェクトにロードするデータを格納するダミーの JSON ファイルを作成します。この例では、customers.jsonという名前で次のものを含むファイルを作成します。

{
    "customers": [
    {"name": "Bradley Banks", "age": 36, "zip": "10573"},  
    {"name": "Sarah Carlson", "age": 59, "zip": "48075"},
    {"name": "Annmarie Wright", "age": 53, "zip": "48226"}
    ]
}

プロジェクトのURL prefixで指定されたホスト上にcustomers.jsonを保存します。たとえば、URL prefixにhttp://localhostであるなら、http://localhost/data/customers.jsonで使用可能なファイルを作成します。

モデルの追加と設定

モデルをプロジェクトに追加し、userClassName に覚えやすい名前を設定します。プロジェクトのモデルとストアを関連付けるので、ストアの名前に類似した名前を使用すると良いでしょう。

ここで、customers 配列の要素からアクセスするため、それぞれの name:value ペアに対して 1 つずつ、3 つのフィールドをモデルに追加します。ConfigでFieldsプロパティを使用して追加します。最初のフィールドの名前にはnameを設定しまます。２つ目のフィールドの名前にはage、typeにはintを設定します。フィールドのタイプを設定すると、ソートが正しくソートされるようになります。３つ目のフィールドの名前にはzipcodeと設定します。これはJSONファイルでこの値を参照するために使用する名前とは異なっているので、この場合フィールドのmapping属性はzipに変更する必要があります。

Json Storeの追加と設定

Architectで、インスペクタに移動し、追加ボタンをクリックして、Json Storeを選択して、プロジェクトにリーダーとプロキシと共にストアを追加します。Architectは、インスペクタのストアの横に、データがロードする準備ができていないことを示す感嘆符を表示していることに注意してください。

インスペクタでJson Storeを選択します。ConfigのuserClassNameに覚えやすい名前を設定します。このサンプルデータのオブジェクトタイプは customer ですので、モデル名は「Customer」、ストア名は「Customers」が良いでしょう。この命名方法は大変優れています。すなわち、モデルにはそれがどのようなタイプのものであるかを説明するような名前を付け、ストアにはその名前を複数形にした名前を付けます。ストアのデータを自動的にロードするように、autoLoad コンフィグの横にあるボックスにチェックを入れます。

インスペクタ内のプロキシを選択し、ConfigでプロジェクトのURL prefixで指定されたホスト上のソースファイルの場所に、そのurl属性を設定します。この場合、Json Store は localhost の data ディレクトリに保存されているため、url 属性に data/customers.json をセットします。

インスペクタ内のリーダーを選択し、root（TouchではrootPropety）設定にcustomersを設定します。これはさきほど作成したJSONファイルで指定されていた配列の名前と一致します。

モデルとストアの関連付け

ここで、ストアとモデルを関連付けます。[Project Inspector（プロジェクトインスペクタ）] のストアに戻ります。[Config（コンフィグ）] の Value で Model コンフィグを探し、右にあるフィールドを開きます。先ほど追加したモデルの名前を探し、これを選択します。

手順をすべて正しく完了している場合、[Project Inspector（プロジェクトインスペクタ）] のストアの横から感嘆符が消えて、customers.json ファイルからデータをロードできます。

データのロード

ストアを選択した状態で、右クリックでLoad Dataを選択します。データがソースから正常にロードされたとき、Architectはインスペクタ内のストアの横に目のアイコンを表示します。カーソルをそのアイコンに乗せると、いくつのレコードを読み込んだかが表示されます。アイコンをクリックすると、別のウィンドウで生のデータを見ることができます。

ストアにデータをロードできない場合、ストアの横に感嘆符が表示されます。感嘆符をクリックすると、ストアにデータをロードするための解決策を示したエラーメッセージが表示されます。問題を修正し、再度ロードを試してください。

例2：Array Store

次の例では、配列のストアをビルドする方法を示します。そのデータとして、次のデータ配列を含む contacts.json という名前のJSONファイルを作成します。

[
    ["Ace Supplies", "Emma Knauer", "555-3529"],
    ["Best Goods", "Joseph Kahn", "555-8797"],
    ["First Choice", "Matthew Willbanks", "555-4954"]
]

プロジェクトのURL prefixで指定されたホスト上で、contacts.jsonを保存します。たとえば、URL prefix を http://localhost に設定している場合、http://localhost/data/contacts.json からファイルにアクセスできるようにします。

モデルの追加と設定

モデルをプロジェクトに追加し、userClassName に覚えやすい名前を設定します。アプリケーションがソースファイルの行の配列からアクセスする必要がある各要素に対して 1 つずつ、3 つのフィールドをモデルに追加します。3 つのフィールドの名前は name、contact、phone です。

Array Storeの追加と設定

プロジェクトに、Array Storeをそのリーダーとプロキシと共に追加し、インスペクタでArray Storeを選択します。userClassName と storeId に同じ名前を設定し、autoLoad コンフィグの横にあるボックスにチェックを入れます。プロキシの url 属性に、プロジェクトの URL プレフィックスで指定されているホスト上のソースファイルの場所をセットします（この場合 data/contacts.json）。

モデルとストアの関連付け

[Project Inspector（プロジェクトインスペクタ）] で Array Store を選択し、Model コンフィグに先ほど追加したモデルの名前を設定します。

データのロード

ストアを選択した状態で、右クリックでLoad Dataを選択します。アイコンをクリックすると、別のウィンドウで生のデータを見ることができます。ストアがデータをロードできない場合、感嘆符をクリックして解決策を探します。問題を修正し、再度ロードを試してください。

例3：XML Store

この例では、XML Store の使用方法を示します。データとして、次のデータを含む products.xml という名前の XML ファイルを作成します。

<?xml version="1.0" encoding="UTF-8"?>
<Products xmlns="http://example.org">
    <Product>
       <Name>Widget</Name>
       <Price>11.95</Price>
         <ImageData>
          <Url>widget.png</Url>
          <Width>300</Width>
          <Height>400</Height>
         </ImageData>
    </Product>
    <Product>
       <Name>Sprocket</Name>
       <Price>5.95</Price>
         <ImageData>
          <Url>sc.png</Url>
          <Width>300</Width>
          <Height>400</Height>
         </ImageData>
    </Product>
    <Product>
       <Name>Gadget</Name>
       <Price>19.95</Price>
         <ImageData>
          <Url>widget.png</Url>
          <Width>300</Width>
          <Height>400</Height>
         </ImageData>
    </Product>
</Products>

プロジェクトのURL prefixで指定されたホスト上に、http://localhost/data/products.xmlとなるようにproducts.xmlを保存します。

モデルの追加と設定

モデルを作成して名前を付け、３つのフィールドを追加します。最初のフィールドには、名前にname、mapping設定にNameを設定します。マッピングは大文字小文字が区別され、要素名と一致しなければならないことに注意してください。2つ目のフィールドには、名前にprice、mapping設定にPriceを、typeにfloatを設定します。3つ目のフィールドには名前属性にimageUrl、mapping属性にImageData > Urlを設定します。ImageDataデータのサブ要素であるUrlへアクセスするためのDomQueryセレクタであることに注意してください。

XML Storeの追加と設定

プロジェクトに、Xml Storeをそのリーダーとプロキシと共に追加します。プロキシの url コンフィグにプロジェクトの URL プレフィックスで指定されているホスト上のソースファイルの場所をセットします（たとえば data/contacts.json）。リーダーの record コンフィグにロードするデータを保持する XML 要素の名前をセットします（この場合は Product）。

モデルとストアの関連づけ、データのロード

インスペクタでXML storeを選択し、model設定に先ほど追加したモデルの名前を設定します。前の例で行ったように、データをロードします。