Frame Tree

nexacro platformは、単一のFormのみ持つ簡単な構造の画面、または複数のFormによって複合的に実行する形の画面構造を作成することもできます。複雑な構造では、各画面を構成する要素が互いにどのように接続されるかを理解する必要があります。

この章では、このような接続構造の概念をいくつかの例で説明します。

アプリケーション

// application -> mainframe
this.mainframe
this.id
this.all[n]
this.all['id']

// mainframe -> application
this.mainframe.parent

// mainframe -> childframe
this.mainframe.frame
this.mainframe.all[n]
this.mainframe.all['id']
this.mainframe.id

// childframe -> mainframe
this.mainframe.frame.parent
this.mainframe.frame.getOwnerFrame()

// childframe -> form
this.mainframe.frame.form

// form -> childframe
this.parent
this.getOwnerFrame()
nexacro.getApplication().mainframe.frame

スクリプトの例示画面

frame_tree_script_application

applicationでFormオブジェクトにアクセス

// frm0へのアクセス
this.mainframe.frame.form.name == "frm0"
this.mframe0.frame.form.name == "frm0"
this.mframe0.chdframe0.form.name == "frm0"
this.all[0].all[0].form.name == "frm0"
this.all["mframe0"].all["chdframe0"].form.name == "frm0"

formで上位オブジェクトにアクセス

// frm0からapplicationにアクセス
this.parent.name == "chdframe0"
this.parent.parent.name == "mframe0"
this.getOwnerFrame().getOwnerFrame().name == "mframe0"
nexacro.getApplication().mainframe.name == "mframe0"

フォーム

一つのFormとObject、Bind、Componentの関係は、1:Nの構造です。スクリプトコード上では以下のような形式でアクセスすることができます。

// Form -> Object
this.all[n]
this.all['id']
this.id
this.objects[n]
this.objects['id']

// Form -> Bind
this.all[n]
this.all['id']
this.id
this.binds[n]
this.binds['id']

// Form -> Component
this.all[n]
this.all['id']
this.id
this.components[n]
this.components['id']

// Object, Bind, Component -> Bind
this.all[n].parent

Div、PopupDiv、Tabpageのようなコンテナコンポーネントはurl プロパティを指定してFormを接続することができます。このような場合、コンテナコンポーネントとFormは1:1構造です。スクリプト上でFormに接続されたObject、Bind、Componentは、以下のような形式でアクセスすることができます。

// Container Component -> Object
this.Div.form.all[n]
this.Div.form.all['id']
this.Div.form.id
this.Div.form.objects[n]
this.Div.form.objects['id']

// Container Component -> Bind
this.Div.form.all[n]
this.Div.form.all['id']
this.Div.form.id
this.Div.form.binds[n]
this.Div.form.binds['id']

// Container Component -> Component
this.Div.form.all[n]
this.Div.form.all['id']
this.Div.form.id
this.Div.form.components[n]
this.Div.form.components['id']

// Object, Bind, Component -> Container Component
this.Div.form.all[n].parent.parent

all、objects、binds、components プロパティは、nexacro.Collection 形式で提供されます。コレクションオブジェクト内のインデックスまたはidでアクセスすることができます。

all プロパティにアクセスするコレクションオブジェクト内のインデックスは、次のような順序で指定されます。

1. Object

2. Component

3. Bind

そして、同じ項目内では、ソースコード内の順序に基づいて指定されます。

スクリプトの例示画面

frame_tree_script_01

インデックスの順序はdtset1、btn0、btn1、cmb0、div0、div1、bind1でと仮定します。

一般的なフォームでインデックスの順序は、Datasetが最初に来て、残りコンポーネントは、配置された順に決まって、Bindオブジェクトが最後に指定されます。

1つのフォームの中の同レベルでは、idが重複してはなりません。しかし、btn0とdiv0_btn0とdiv2_btnは同レベルではないので、同じidで指定しても差し支えありません。

component/object/bind

this.name == "frm0"
// btn0へのアクセス
this.all["btn0"].name == "btn0"
this.all[1].name == "btn0"
this.btn0.name == "btn0"
this.components[0].name == "btn0"
this.components["btn0"].name == "btn0"
// dtset1へのアクセス
this.all["dtset1"].name == "dtset1"
this.all[0].name == "dtset1"
this.dtset1.name == "dtset1"
this.objects[0].name == "dtset1"
this.objects["dtset1"].name == "dtset1"
// コンポーネント / invisibleオブジェクト / bindの個数
this.all.length == 7
this.components.length == 5 //btn0, btn1, comb0, div0, div1
this.binds.length == 1

コンテナコンポーネント

フォームを接続していないcontainerコンポーネントも動的にinvisible object/ bindを持つことができます。

// div0内のdiv0_btn0へのアプローチ
this.div0.form.div0_btn0.name == "div0_btn0"
this.div0.form.all[0].name == "div0_btn0"
this.components[3].form.components[0].name == "div0_btn0"
// div2内のdiv2_btn0へのアプローチ
this.div0.form.div2.form.div2_btn0.name == "div2_btn0"
this.all["div0"].form.all["div2"].form.all["div2_btn0"].name == "div2_btn0"
this.components["div0"].form.components["div2"].form.components["div2_btn0"].name == "div2_btn0"

フォームをリンクしたcontainerコンポーネント

// (frm1内のスクリプトである場合) frm1にあるbtn0のアプローチ
this.parent.name == "div1"
this.btn0.name == "btn0"
this.all["btn0"].name == "btn0"
// (frm0内のスクリプトからアプローチする場合) frm1にあるbtn0のアプローチ
this.name == "frm0"
this.div1.form.btn0.name == "btn0"

parent

this.div1.form.dtset2.parent.parent.name == "form" // frm0ではありません。
this.div1.form.dtset2.parent.name == "div1"