nexacro studioでアプリケーションを開発するときは、XMLベースのnexacro platformプログラミング言語とJavaスクリプトを使用してアプリケーションをテストしたり、配布するときは、JavaScriptに変換されたファイルが配布されます。このように配布されたアプリケーションは、nexacro platform統合フレームワークをベースに作られて動作します。
この章では、nexacro platformの開発時に使用されるファイルと動作について説明します。動作原理に配布プロセスも含まれますが、ここでは配布の部分は言及しません。配布の詳細については、別途配布される管理者ガイド(Administrator's Guide)ドキュメントを参照してください。
nexacro platform応用プログラムのファイル
nexacro platformアプリケーション開発時に使用するファイルは、nexacro studioで使用されるファイルと変換後に使用するファイルに分けられます。モバイルアプリの形で配布したり、外部ライブラリを使用する場合には、追加ファイルが必要とする場合もありますが、ここでは基本的なプロジェクトを基準に説明します。
下記の表ではnexacro studioで作成されたファイルがどのように変換され、配布されるかを示します。
nexacro studio | 変換されたファイル | 備考 |
---|---|---|
A.xprj | nexacro studioで開発時にのみ参照 | |
A.xadl | A.xadl.js | Build > Generate Applicationメニューで変換 |
default_typedef.xml | A.xadl.js内のloadTypedefition関数の処理 | |
globalvars.xml | A.xadl.js内のon_loadGlobalVariables関数で処理 | |
Form_A.xfdl | ./Base/Form_A.xfdl.js | Build > Generate Fileメニューで個別変換可能 |
default.xtheme | ./_theme_/default/theme.css.js |
nexacro platformアプリケーションが実行時には最初に呼び出されるHTML文書から変換されたA.xadl.jsファイルを呼び出して、該当ファイルに設定されたロード過程を経て、残りのファイル情報を取得します。変換されたファイルの詳細についてはここで説明しません。nexacro studioでnexacro platformアプリケーションの作成時に使用されるファイルについて説明します。
ADLファイル
ADLはApplication Definition Languageの略字で、アプリケーションの構成に必要な全ての要素の定義をします。
ADLファイルが定義する主要要素は、以下の通りです。
要素 | 説明 |
---|---|
オブジェクトの配布 (link) | - 応用プログラムの実行に必要なオブジェクト(データセット、グリッドなど)を羅列し、バージョン情報を登録します。 - この情報はType Definitionファイルに保存され、ADLではLink のみを行います。 |
テーマの構成 (link) | - 応用プログラムの画面に出力するグラフィックの詳細内容を定めます。 - テーマはイメージとCSSの組み合わせにより構成されます。 - この情報はThemeファイルに保存され、ADLではLinkのみを行います。 |
CSS (link) | - 応用プログラムのCSSを定義します。 - テーマに登録したCSS以外に、追加でCSSを登録する際に使用します。 - この情報はCSSファイルに保存され、ADLではLinkのみを行います。 |
Global Variable (link) | - 応用プログラム内の様々な画面が使用する共通変数を登録します。 - 共通変数の種類には、Variant変数やデータセットなどを含んだオブジェクトとイメージがあります。 - この情報はグローバル変数ファイルに保存され、ADLではLinkのみを行います。 |
Global Script | - 応用プログラムが使用する共通ファンクションを定義します。 - 応用プログラム自体のイベントファンクションを実装します。. |
ADLファイルはnexacro studioで自動管理します。
nexacro studio上のProject Explorer画面で取り扱う内容のほとんどは、ADLファイルに保存される内容です。以下はnexacro studioのProject Explorer画面です。
説明 | |
---|---|
1 | プロジェクト名です。1つのプロジェクトにいくつかのADLを登録することができます。 |
2 | Type Definitionの情報を保存します。 |
3 | グローバル変数の情報を保存します。 |
4 | ADL名です。画面を配置します。 |
5 | ChildFrameしか登録されていないので、シングルフレームモデルです。 |
6 | スクリーンの構成を保持します。 |
7 | CSSの構成を保持します。 |
8 | テーマの構成を保持します。 |
9 | フォームを定義・登録します。 |
Project Explorerで定義した内容は1つのファイルにのみ保存されるのではなく、いくつかのファイルに分けて保存されます。その中でルートに該当するファイルはADLファイルです。
ADLファイルは、Project Explorer画面以外にもエディット画面で直接に編集することができます。
説明 | |
---|---|
1 | ADLでマウスの右側のボタンをクリックしてから“Edit Source”をクリックすると、ADLの内容を編集することができます。 |
2 | ADLでマウスの右側のボタンをクリックしてから“Edit Script”をクリックすると、ADLのグローバルスクリプトを編集することができます。 |
以下はADLの内容を編集する画面です。
Type Definitionファイル
Type Definitionファイルは、nexacro platformアプリケーションが必要とするファイルに関連する情報を持っています。nexacro platformで使用されるコンポーネントは、Javaスクリプトに基づいて作成されました。ロジックが実装されたJavaScriptファイルをモジュールといい、この中で、アプリケーション開発に使用するオブジェクトを開発時に選択することができます。その他のアプリケーションの開発時にサービスグループを定義し、配布に関連するオプションを設定します。
Type Definitionファイルが定義する主要要素は以下の通りです。
Type Definitionファイルが定義する主要要素は以下の通りです。
要素 | 説明 | |
---|---|---|
1 | モジュール情報 | JavaScriptで開発されたモジュールの情報を持っています。 - 独自開発されたモジュールを追加することができます。 - jsまたはjsonファイル形として登録することができます。各ファイル間の依存関係を持つ場合には、正しい順序で登録する必要があります。 |
2 | オブジェクト情報 | アプリケーションの実行に必要なオブジェクトの情報が含まれています。 - 指定されたオブジェクトが配布に含まれます。 - 各オブジェクトは、モジュールに基づいて指定されます。 |
3 | サービスグループ | プロジェクトの規模によって内部的にサービスグループを定義します。 - 各サービスグループは、個別にキャッシュレベルを設定できます。 |
4 | 配布オプション | アプリケーションの配布に関する情報(ランタイムバージョン)を指定します。 |
グローバル変数ファイル
グローバル変数ファイルは、nexacro platform応用プログラムの様々な画面が使用する共通変数を登録します。
共通変数として登録することができる変数には、Variant変数やデータセットなどを含んだオブジェクトとイメージがあります。
グローバル変数ファイルが定義する変数は、以下の通りです。
要素 | 説明 |
---|---|
データセット変数 | - データセットを登録しエレメントを設定します。 |
Variable変数 | - Variantタイプの変数を登録します。 |
イメージ変数 | - イメージを登録します。 |
以下は、グローバル変数中のデータセットを登録する画面です。
Project > GlobalVariable > Insert GlobalVariables Item > Dataset
Global Variableファイルを一括的に編集しようとするときは、下記のメニューからソースを開いて編集することができます。
Project > GlobalVariable > Edit Source
下図のように追加したグローバル変数をスクリプトからアクセスして使用できます。
// Variable var test = application.all["var_sample"]; var test = application.var_sample; // Dataset var objDs = application.all["dsSample"]; objDs.setColumn(1,"cust_zip","078543"); application.dsSample.setColumn(1,"cust_zip","078543");
applicationオブジェクトのスコープに直接変数を宣言した場合には、allプロパティを使用してアクセスすることはできません。スクリプトで追加した変数をallプロパティを使用してアクセスするには、setVariableメソッドを使用する必要があります。
application.aaa = "TEST"; trace(application.aaa); // TEST trace(application.all["aaa"]); // undefined // setVariable application.setVariable("aaa", "TEST"); trace(application.aaa); // TEST trace(application.all["aaa"]); // TEST
テーマファイル / スタイルファイル
nexacro platformでのスタイルとテーマは、画面上に出力されるUI要素のデザインを定義することを意味します。ボタンを例にあげると、透明度、フォント、カラー、陰影、ぼかし、斜体などの効果をボタンコンポーネントに与えることを意味します。
テーマとスタイルの違いは、イメージが存在するか否かです。テーマはスタイルにイメージを追加した形態です。従って、イメージを使用するテーマはスタイルに比べより多様にUIをデザインすることができます。
FDLファイル
FDLファイルは、使用者の画面のフォームを定義します。使用者の画面に出力する画面の配置だけでなく、UIロジックの実行のためのスクリプトを含む多様な情報を含んでいます。
FDLファイルは、ADLファイルと共にnexacro platform応用プログラムで最も重要なファイルです。
FDLファイルが定義する主要要素は以下の通りです。
要素 | 説明 |
---|---|
コンポーネントの配置 | - Visibleオブジドェクトであるコンポーネントを配置する情報を持っています。 - コンポーネントのプロパティ及びイベントを設定します。 |
オブジェクトの 設定 | - データセットなどのInvisibleオブジェクトのプロパティ及びイベントを設定します。 |
スクリプト | - フォームを含む全てのオブジェクトのイベント関数をスクリプトコーディングします。 - イベント関数以外の関すもスクリプトコーディングします。 |
スタイル | - フォームで使用するスタイルを登録します。ここで使用するスタイルは、ADLで登録したスタイルよりも優先権があります。 |
BindItem | - フォーム、コンポーネント、Invisibleオブジェクトとデータセットを結合するBindItemオブジェクトを設定します。 |
アプリケーション駆動のシナリオ
nexacro platform アプリケーションが実行されるプロセスは、以下のとおりです。
bootstrap
アプリケーションをロードするために関連情報を確認して、必要なリソースを取得するプロセスを説明します。このプロセスをブートストラップと表現します。
HTML5 | Runtime | |
---|---|---|
1 | index.html | start.json start_android.json start_ios.json |
2 | get bootstrap info | |
3 | update engine | |
4 | update resource (data) | |
5 | load framework files | |
6 | load component modules | |
7 | load application |
一般的に、ブートストラップは、コンピュータが外部入力なしで、自ら開始する準備をするプロセスを意味します。主にメモリに含まれる情報に基づいて動作し、起動(booting)と表現することもあります。
https://en.wikipedia.org/wiki/Bootstrapping
nexacro platform アプリケーションの実行プロセスで使用されるブートストラップという用語は、アプリケーションを開始する準備をする過程という表現を含んでいます。
アプリケーションロード
アプリケーションが実行されるためにアプリケーションに接続されたフォームをロードするプロセスは、以下のとおりです。
ADLロード
ADL実行
TypeDefinition 構文解析(parsing)
サービス登録
クラスリスト保存
サブファイルのダウンロードと実行
Application初期化
デフォルトクラス登録
Applicationプロパティ設定
Mainframe生成と初期化
MainFrame内に Frame生成
Formロード
Application, MainFrame, Frameイベントハンドラ登録
イベント発生:
Application.onloadtypedefinition
GlobalVariables生成
イベント発生:
Application.onloadingglobalvariables
メソッド呼び出し:
MainFrame.createComponent
メソッド呼び出し:MainFrame.on_created
イベント発生:
Application.onload
イベント発生:
Form.onload
サブファイルは、include方式で接続されるスクリプトファイルなどを意味します。
ロード順序によって生成されていない項目は使用できません。
たとえば onloadtypedefinitionイベント関数内で GlobalVariablesにアクセスすると、undefinedに表示されます。
this.application_onloadtypedefinition = function(obj:Application, e:nexacro.LoadEventInfo)
{
trace(application.all['Variable0']); //undefined
}
フォームロード
前に説明したアプリケーションのロード項目で「Formロード」から「Form.onloadイベント発生」との間のプロセスをより詳細に見てみると以下の通りです。
Formロード
Form実行
サブファイルのダウンロードと実行
Form初期化
Form Styleプロパティ設定
Formプロパティ設定
オブジェクト、コンポーネント、バインドアイテム(BindItem)の生成
エンジン内部で処理するスクリプトを実行
イベントハンドラの登録
オブジェクト、コンポーネントメソッド呼び出し:
Object.createComponent
イベント発生:
Form.oninit
メソッド呼び出し:
Form.on_created
オブジェクト、コンポーネントメソッド呼び出し:Object.on_created
イメージロード、transaction処理
イベント発生:
Form.onload
Formに含まれたオブジェクト、コンポーネントは指定された Z-Order順に生成します。
div、tabコンポーネントは、urlプロパティにリンクされている Formを取得するネットワーク速度によってロードが終わる時点が異なることがあります。
主要画面の要素
nexacro platformアプリケーションは、ユーザーが操作できるアプリケーションUIを表示するために様々な要素が含まれています。基本的な画面要素は以下の通りです。
フレームを利用した画面配置
nexacro platformアプリケーションは、画面処理のための基本的なフレーム構造を提供します。最上位MainFrameの下にChildFrameを持って、その下に画面を配置します。フレームは、Formを表示するための舞台装置と言えます。各画面を構成するFormが別々に離れていますが、同じ舞台上で表示されるので、共通で使用できる要素を配置して画面間の様々な要素を共有することができます。
デフォルトで提供されるフレームはMainFrame、ChildFrameに分けられ、画面レイアウトによって、FrameSet、VFrameSet、HFrameSet、TileFrameSetを追加することができます。
フレーム種類 | フレーム | 説明 |
---|---|---|
Root Frame | MainFrame | - 最上位のフレームです。つまり、Root Frameに該当します。 - サブにNode FrameまたはChildFrameを持つことができます。 - サブにChildFrameを持っている場合には、フレームを追加することができません。 |
Terminal Frame | ChildFrame | - サブに1つのフレームも持つことができません。 - サブに1つのフォームのみ持つことができます。 |
Node Frame | FrameSet | - 特別な形態なしでサブフレームを配置します。 - 2つ以上のサブフレームが追加されると、カスケードに配置し、位置プロパティ値を指定すると、該当場所に配置します。 - サブにNode FrameまたはChildFrameを持つことができます。 |
VFrameSet | - 縦型で、サブフレームを配置します。 - サブフレームの配置比率をseparatesizeプロパティに指定します。 - サブにNode FrameまたはChildFrameを持つことができます。 | |
HFrameSet | - 横形でサブフレームを配置します。 - サブフレームの配置比率をseparatesizeプロパティに指定します。 - サブにNode FrameまたはChildFrameを持つことができます。 | |
TileFrameSet | - 碁盤形でサブフレームを配置します。 - 縦、横方向に配置されるサブフレームをseparatetype、separatecountプロパティに指定します。 - サブにNode FrameまたはChildFrameを持つことができます。 |
SDI (Single Document Interface)
プロジェクトの作成時にデフォルトテンプレートを選択し、他の付加的な処理をしなかった場合、単一のフレームのみでプロジェクトが構成されます。
MDI (Multi Document Interface)
上部メニュー、サブメニュー、コンテンツ、ツールバー形式で画面を構成する場合には、全体的なレイアウト構造を希望の形式に合わせて設定する必要があります。 nexacro platformでMDIの設定は、デフォルトテンプレートを選択した後、必要なフレームを追加したり、HFrame、VFrameテンプレート、またはユーザーが指定したプロジェクトテンプレートを選択して作成できます。
フレームの追加は、プロジェクトエクスプローラで、MainFrameまたはNode Frameを選択し、コンテキストメニューから[Insert Frame]項目を選択するか、MainFrameまたはNode Frame項目をダブルクリックした後、表示される編集画面のコンテキストメニューから[Add]項目を選択して追加することができます。
フォームの構成
フォームは実質的な画面UIを構成する対象です。このフォームがフレームの上に貼り付けられ、顧客の画面に出力されます
フォームは大きくVisible領域、Invisible領域、Logic領域の3つの領域で構成されています。
Visible領域は画面に出力される部分で、visibleオブジェクト(以下、コンポーネントとする)の配置により作成されます。
Invisible領域は、Invisibleオブジェクトの組み合わせにより作成されます。
Logic領域はスクリプトにより直接にコーディングする部分で、コンポーネントとInvisibleオブジェクトを制御します。
サーバーとのデータ連動
nexacro platformアプリケーションは、企業内で使用するデータをユーザーが簡単に操作できるように画面上に表現してくれる役割を果たしたりします。このような状況でデータを管理するサーバとアプリケーション間の連携作業を必要とします。
X-API
X-APIは、nexacro platformアプリケーションと連動できるデータ型を生成するライブラリです。 X-APIを使用しなくても、決まった仕様に従ってData Serviceを開発する場合、nexacro platformアプリケーションと該当サービス・データと連動することができます。
X-APIは、Java開発環境をベースに提供されます。詳細ドキュメントは、X-APIライブラリに含まれているドキュメントを確認してください。