簡単なViewSetテンプレート、Viewテンプレート、Model、Actionを用いて画面を構成する方法を説明します。
用語の説明
QuickCodeで使用される用語について説明します。
用語 | 必須有無 | 説明 |
|---|---|---|
ViewSetテンプレート | × | Formテンプレートの一種です。Viewコンポーネントを含むFormテンプレートをViewSetテンプレートと言います。 テンプレートは画面を１つのみ作成する用途ではなく、同じレイアウトを持つ画面を速やかに作成する用途で使用します。 ViewSetテンプレートを適用しにくい個別の画面は、ViewSetテンプレートを使用せずにFormオブジェクトに直接Viewコンポーネントを配置して作成することができます。 |
Viewテンプレート | ○ | Viewコンポーネント内に他のコンポーネントを自動生成してくれるテンプレート（ルール）です。 Viewテンプレートは独立的に使用することはできず、Modelの選択後Viewテンプレートを選択することで、Model情報に基づいて必要なコンポーネントがViewコンポーネント内に自動的に配置されます。 名前はテンプレートですが、主にModel情報とViewテンプレートに作成されたコードによって画面が動的に作成されます。 |
Model | ○ | 画面で扱うデータ情報を設定します。 Modelで設定したlabel、fieldtype内dの情報に基づいて、Viewテンプレートで必要なコンポーネントをViewコンポーネント内に配置します。 |
Action | × | 画面のロード、ユーザーからの入力、データ通信などのイベントを処理します。 Viewコンポーネント内に画面を配置した後、Formオブジェクトもしくは生成されたコンポーネントやオブジェクトにActionを紐づけてイベントを設定します。 |
開発環境の設定
ここでは、Model、ViewSetテンプレート、Viewテンプレート、Actionは既に用意されているものを使用します。既存のプロジェクトに追加する場合には、新規プロジェクトを作成して開始ステップはスキップして、ViewSetテンプレートファイルの取得ステップから進めます。
21.0.0.1701以降のバージョンでは、QuickCodeにてviewdatasetプロパティの処理方式が変更されました。
以下の説明および添付ファイルは21.0.0.1701以降のバージョンで正常に動作します。
新規プロジェクトを作成して開始
xpackageファイルにより必要な項目を一括インポートして開始
xpackageファイルはプロジェクトで必要なリソースをまとめて共有するために作成するファイルです。QuickCodeの演習のためのxpackageファイルを使用することで、以下の作業をまとめて処理することができます。
サービスを追加してフォルダを作成（SvcModelSample, Sample）
モデルのインポート（ModelService.xmodel）
Viewテンプレートのインポート（viewSampleForm.xviewgen、viewSampleGrid.xviewgen）
ViewSetテンプレートのインポート（vieTemplateSample.xtemplate）
sample XMLファイルの作成（sample.xml）
下記の作業については、個別で設定してください。
TypeDefinitionでnexacro.Viewコンポーネントの追加
Actionモジュールインストール
QuickCodeパネルの表示
1
下記のリンクからxpackageファイルをダウンロードします。
下記のリンクからxpackageファイルをダウンロードできます。
xpackage作成については下記のリンクを参照してください。
2
プロジェクトを生成します。
3
メニューの「File > Import」を選択してImport Wizardを実行します。
4
Package Fileにダウンロードしたxpackageファイルを選択して入力します。
5
FileListで選択できる項目を全て選択し、「Import」ボタンをクリックします。
既存の項目と同じファイルである場合には、Overwriteが表示されます。Preview画面の上部にあるオプションを選択して、名前を変更してから追加することができます。
6
Project ExplorerでTypeDefinition > Objects項目を選択し、nexacro.Viewコンポーネントを追加します。
7
QuickCodeパネルが表示されない状態である場合、メニューの[QuickCode > View > QuickCode]を選択し、QuickCodeパネルを表示します。
8
Actionモジュールインストールファイル（Sample Actions.xmodule）を準備します。
9
メニューの[File > Install Module]を選択してInstall Module Wizardを実行します。
10
Install Typeは、「Module Package」をチェックして取得するxmoduleファイルを選択します。
11
モジュールに含まれたAction情報を確認し、[Install]ボタンをクリックします。
モジュールをインストールすると、プロジェクトを更新します。
12
QuickCodeパネルでActionタブを選択して、インストールしたActionモジュールが登録されたか確認します。
13
新しいFormの作成で作業を続きます。
必要な項目を個別で追加して開始
xpackageファイルを使用せず、必要なファイルをそれぞれ追加し設定します。
1
Project ExplorerでTypeDefinition > Objects項目を選択し、nexacro.Viewコンポーネントを追加します。
2
Project ExplorerでTypeDefinition > Services項目を選択して、「SvcModel Sample」という名前でModelサービスを追加します。
3
QuickCodeパネルが表示されない状態である場合、メニューの[QuickCode > View > QuickCode]を選択し、QuickCodeパネルを表示します。
4
Modelファイル（ModelService.xmodel）を準備します。
5
QuickCodeパネルでModelタブを選択し、コンテキストメニューからImportを選択します。
6
ファイルエクスプローラから取得するxmodelファイルを選択します。
7
Modelが追加されたのを確認します。Model項目をダブルクリックすると情報を確認することができます。
8
Actionモジュールインストールファイル（Sample Actions.xmodule）を準備します。
9
メニューの[File > Install Module]を選択してInstall Module Wizardを実行します。
10
Install Typeは、「Module Package」をチェックして取得するxmoduleファイルを選択します。
11
モジュールに含まれたAction情報を確認し、[Install]ボタンをクリックします。
モジュールをインストールすると、プロジェクトを更新します。
12
QuickCodeパネルでActionタブを選択して、インストールしたActionモジュールが登録されたか確認します。
ViewSetテンプレートファイルの取得
1
ViewSetテンプレートファイルを準備します。
下記のリンクからxtemplateファイルをダウンロードできます。
圧縮解除後、フォルダ全体をコピーしてプロジェクトViewsetパスの下へ移動します。sample.zip
Viewsetテンプレート作成は、下記のリンクを参照してください。
2
ViewSet テンプレート ファイルを該当のフォルダにコピーします。
ViewSetテンプレートファイルが保存されるデフォルトフォルダは、メニューの[Tools > Options > QuickCode]に設定されているForm Templateパス配下のviewsetフォルダです。
viewsetフォルダの下にカテゴリーフォルダ（sample）とViewSetテンプレートフォルダ（viewTemplateSample）を生成し、xtemplateファイルをコピーする必要があります。
_preview.xfdl.js ファイルとは、Formの新規作成時にViewSetテンプレートファイルを選択した場合に自動作成されるプレビューファイルです。ViewSetテンプレートファイルと一緒にコピーしても構いません。
Viewテンプレートファイルの取得
1
Viewテンプレートファイルを準備します。
下記のリンクからxviewgenファイルをダウンロードできます。
Viewテンプレートの作成は下記のリンクを参照してください。
2
QuickCodeパネルでView Templateタブを開き、上段のメニューボタンをクリックして「Open Containing Folder」項目をクリックすると、該当のフォルダを開きます。
ViewSetテンプレートファイルと同様に、保存先のデフォルトフォルダはメニューの[Tools > Options > QuickCode > View Template]から確認することもできます。View TemplateタブよりLocationリンク上にあるSettingボタンをクリックすると、該当のオプション画面が表示されます。
3
Viewテンプレートファイルを該当のフォルダにコピーします。
4
ファイルのコピー後、View Templateタブで、上段メニューボタンをクリックして「Refresh All」項目を選択すると、コピーしたViewテンプレートのリストに表示されます。
新しいFormの作成
1
メニューの[File > New > Form]を選択して、Form Wizardを実行します。
2
左側のTemplateリストからViewset Templates項目を選択し、既に追加したViewSetテンプレートを選択します。
例題では、Viewコンポーネントのデザインを含んでいません。画面のデザインによってViewコンポーネントにborderもしくはbackgroundなどのプロパティが決まったら、テーマに追加して反映することができます。
3
Form名を入力し、[Finish]ボタンをクリックします。
ModelとViewテンプレートで画面UIの生成
Modelを選択してViewコンポーネントへドラッグ＆ドロップすると、Viewテンプレートと追加プロパティを選択します。選択した項目に従って画面UIを生成します。
検索UIの生成
1
QuickCodeパネルでModelを選択し、最初のViewコンポーネントにドラッグ＆ドロップします。
Model（mdlSample_Search）をマウスでドラッグしてViewコンポーネントの上に移動すると、黒色でViewコンポーネントの領域が表示されます。
2
使用するフィールドを選択します。
ここではnameフィールドのみ使用します。companyフィールドのチェックを外します。
3
[Next]ボタンをクリックし、View Template ListからviewSampleFormを選択します。
View Templateを選択すると、右側のPreview領域で生成されるUIのイメージを確認することができます。
4
[Next]ボタンをクリックし、フィールドデータを確認します。
fieldtype、datatype値を修正したり、View Templateでfn_GetFieldUserAttributeListとして提供するUser Attributeを設定することができます。
5
[Next]ボタンをクリックし、use_triggerbutton項目では「true」を選択します。
6
[Finish]ボタンをクリックすると、画面が生成されます。
7
生成されたViewコンポーネント情報をQuickCode Design Modeで確認します。
メニューより[QuickCode > Design > QuickCode Design Mode]項目を選択するか、ツールバーよりQuickCode Design Mode項目を選択すると、QuickCode Design Modeが有効化されます。Form画面の右側にView Informationペインが表示され、各Viewオブジェクトに関する情報を表示します。
Grid UIの生成
1
QuickCodeパネルよりModel（mdlSample_Detail）を選択し、2番目のViewコンポーネントにドラッグ＆ドロップします。
2
使用するフィールドを選択します。
初期設定では2つのフィールドにチェックが入っている状態ですが、設定を変えずにそのままにします。
3
[Next]ボタンをクリックし、View Template ListからviewSampleGridを選択します。
4
[Next]ボタンをクリックし、フィールドのデータを確認します。
5
[Finish]ボタンをクリックすると、画面が生成されます。
詳細情報UIの生成
1
QuickCodeパネルよりModel（mdlSample_Detail）を選択し、3番目のViewコンポーネントにドラッグ＆ドロップします。
2
使用するフィールドを選択します。
初期設定では2つのフィールドに両方ともチェックが入っていますが、設定を変えずにそのままにします。
3
[Next]ボタンをクリックし、View Template ListからviewSampleFormを選択します。
4
[Next]ボタンをクリックし、フィールドのデータを確認します。
5
[Next]ボタンをクリックし、use_triggerbutton項目では「false」を選択します。
6
[Finish]ボタンをクリックすると、画面が生成されます。
GridのUIと詳細情報のUIは同じModelを選択し生成したため、Datasetオブジェクトを別途生成せず同じDatasetオブジェクトを使用します。
Actionを使用してデータ照会機能の追加
Buttonコンポーネントをクリックすると、Actionが動作するように機能を追加します。サーバーに接続せずにデータ照会機能を実現するために、XMLファイルを作成してデータを照会します。
Actionに接続
1
QuickCodeパネルでActionタブを選択し、TestQuery Action項目を選択します。
2
選択したTestQueryAction項目を最初のViewコンポーネントに配置された「Search」Buttonコンポーネントにドラッグ＆ドロップします。
3
コンテキストメニューが表示されたら、「Click」項目を選択します。
4
Controller情報を確認し、[OK]ボタンをクリックします。
View00に配置されたbtn_Trigger idを持つButtonコンポーネントをクリックすると、Triggerイベントが発生するようになります。
5
Controller WizardでTriggerイベントの発生時に処理するAction情報およびその他関連情報を入力します。
プロパティ | 設定値 | 説明 |
|---|---|---|
targetview | View01 | Gridコンポーネントが配置されたViewコンポーネント |
samplefilename | sample | 情報の照会対象となるXMLファイル名 |
alerttype | false | データ照会後に処理するActionに渡すプロパティ |
Trigger typeで選択できる項目に関する説明は、下記のリンクを参照してください。
Trigger conditionで追加できる項目に関する説明は、下記のリンクを参照してください。
6
[Next]ボタンをクリックし、Triggerイベント発生時に渡されるフィールド情報を確認します。
7
[Next]ボタンをクリックし、User defined(extra) argumentsを追加します。
例題では、渡された値をtraceメソッドによる出力のみ行います。
8
「Finish」ボタンをクリックします。
Invisible Object領域にActionが追加されたのを確認できます。
QuickCode Designモードで最初のViewコンポーネントのボタンを選択すると、Controller Previewパネルに追加されたController情報を確認することができます。
sample XMLファイルの生成
ローカルで簡単にテストできるようにXMLファイルを配置します。
1
Project ExplorerでTypeDefinition > Services項目を選択し、「Sample」という名前でFileサービスを追加します。
2
メニューの[File > New > XML] を選択し、ファイル名は、「sample」と入力します。
3
該当のフォルダに下記のような内容でXMLコードを作成します。
<?xml version="1.0" encoding="utf-8"?>
<Root xmlns="http://www.nexacroplatform.com/platform/dataset" ver="5000" >
<Parameters>
<Parameter id="ErrorCode" type="int">0</Parameter>
<Parameter id="ErrorMsg" type="string">SUCC</Parameter>
</Parameters>
<Dataset id="ds_TEST_mdlSample_Detail">
<ColumnInfo>
<Column id="name" type="STRING" size="80"/>
<Column id="company" type="STRING" size="80"/>
</ColumnInfo>
<Rows>
<Row>
<Col id="name">john</Col>
<Col id="company">1dollar</Col>
</Row>
<Row>
<Col id="name">donald</Col>
<Col id="company">EBOT</Col>
</Row>
</Rows>
</Dataset>
</Root>画面の実行
1
Quick Viewボタンをクリックし、ブラウザで画面を実行します。
2
Nameフィールドに任意の値を入力し、「Search」ボタンをクリックします。
Gridコンポーネントで選択したRowを変更すると、3番目のViewコンポーネントに表示される情報も変更されるか確認します。
データ照会Actionの成功時に処理されるActionの追加
特定のActionで必要な機能が成功もしくは失敗した場合に連結して処理する必要があるActionを指定できます。前の段階でデータ照会に成功した場合、アラートメッセージを表示するActionを追加します。
Actionに接続
1
QuickCodeパネルでActionタブを選択し、TestAlertAction項目を選択します。
2
選択したTestAlertAction項目を、Invisible ObjectにあるTestQueryAction00項目の上にドラッグします。
3
コンテキストメニューが表示されたら、「Action Success」項目を選択します。
4
Controller情報を確認し、conditionに値を入力した後に[OK]ボタンをクリックします。
conditionとはActionが動作する条件で、データ照会Actionでalerttypeプロパティ値が「true」である場合にのみ動作するように条件を設定します。
triggerobj.alerttype == 'true'
5
Controller Wizardでmessage値を入力します。
messageはalertメソッドの実行時に伝達するパラメータ値です。
Trigger typeで選択できる項目に関する説明は、下記のリンクを参照してください。
Trigger conditionで追加できる項目に関する説明は、下記のリンクを参照してください。
6
イベント発生時に渡されるフィールド情報は使用しません。[Next]ボタンをクリックし、そのまま「Finish」ボタンをクリックすると、Actionが追加されます。
Invisible Object領域にActionが追加されたのを確認できます。
データ照会Actionのプロパティ値を変更
1
Invisible Object領域でTestQueryAction00項目をダブルクリックします。
2
alerttypeプロパティ値を「true」に変更します。
画面の実行
1
Quick Viewボタンをクリックし、ブラウザで画面を実行します。
2
Nameフィールドに任意の値を入力し、「Search」ボタンをクリックします。
データが照会され、アラートダイアログが表示されるのを確認します。
Actionにトリガーのみ追加
上記で、ボタンをクリックしてデータを照会する機能を追加しましたが、ボタンのクリックだけでなくFormがロードされる時点でデータを照会する機能を追加します。
Action設定
1
メニューより[QuickCode > Design > Controller Chain Editor]項目を選択します。
2
Controller Chain Editorの右側の機能ボタンの中から「Add Controller」ボタンをクリックします。
3
下位項目の中から「New Controller」項目を選択します。
「Add Next Controller」項目はController Chain EditorでControllerを選択している場合に活性化します。
4
Trigger View、Trigger Objectの一覧よりFormを選択します。
5
Controllerが選択された状態でコンテキストメニューより「Add Next Controller」項目を選択します。
6
Trigger Type項目は「Form Init」を選択し、「Target Action」項目は「TestQueryAction00」を選択した状態で[OK]ボタンをクリックします。
新たなControllerが追加されていることを確認します。
7
Controller Chain Editorの右側の機能ボタンの中から「Show Perview」ボタンをクリックします。
登録された全体のControllerの動作を先に確認することができます。
画面実行
1
Quick Viewボタンをクリックし、ブラウザで画面を実行します。
Form onloadイベントが発生してトリガーが動作し、データを照会します。ボタンをクリックしなくても、データが照会されることを確認できます。