nexacro platform 14 / 開発者向けガイド

nexacro platform 14 /
開発者向けガイド
14.0.1.500.3
弊社製品のご愛顧について感謝申し上げます。
NEXAWEBは、この文書が提供する情報の正確性を維持するために努力し、特別な言及なしに、
変更および補完します。但し、この文書に誤った情報が含まれていないことを保証していません。
この文書の記述により発生する可能性がある直接的または間接的な障害や、データおよびプログ
ラム、その他の無形財産に関する損失、使用利益の損失などについて、損害賠償や他の責任を負
いません。
使用者は、本文書を購入もしくは電子文書としてダウンロードし、使用を開始することにより、
ここに記載された内容を理解して、これに同意したものとみなされます。
各社の製品名を含む各商標は、各開発会社の登録商標であり、特許法と著作権法などにより保護
されています。従って、本文書に含まれているすべての製品名および会社名は、それぞれの所有
者の商標としてのみ使用されます。
発行先 | 日本ネクサウェブ株式会社
住所 | 〒101-0021 東京都千代田区外神田5-3-1秋葉原OSビル10F
電話 | 03-5812-6358
ホームページ | www.nexaweb.co.jp
履歴
バージョン
14.0.1.500.3
変更日
2016-09-20
内容
誤打訂正
iii
目次
著作権及び免責条項
.....................................................
ii
履歴
...............................................................
iii
目次
...............................................................
iv
はじめに
............................................................
xi
第I部
概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
第1章
nexacro platform 紹介
1.1
企業でのUI/UX
1.1.1
1.2
2
........................................................
2
.........................................
3
....................................................
4
..........................................................
4
....................................................
5
BUX: Business User eXperience
nexacro platform 14
1.2.1
主な特徴
1.2.2
適用対象システム
第2章
............................................
nexacro platform 概要
............................................
7
.........................................
7
.................................................
10
..................................................
10
2.1
nexacro platform統合フレームワーク
2.2
nexacro platform構成要素
2.2.1
プログラミング言語
2.2.2
開発環境
..........................................................
12
2.2.3
実行環境
..........................................................
13
2.2.4
配布環境
..........................................................
15
システム要件
..........................................................
17
2.3
第II部
基本
..................................
iv
19
目次 | v
第3章 nexacro platform応用プログラムの構造
3.1
.................................
20
.....................................
20
.......................................................
21
...............................................
24
................................................
26
........................................
27
.......................................................
27
.............................................
28
.........................................................
28
................................................
28
.....................................................
30
........................................................
31
.............................................
31
............................................
32
.............................................
32
.....................................................
34
..................................................
35
...........................................................
35
nexacro platform応用プログラムのファイル
3.1.1
ADLファイル
3.1.2
Type Definitionファイル
3.1.3
グローバル変数ファイル
3.1.4
テーマファイル / スタイルファイル
3.1.5
FDLファイル
3.2
アプリケーション駆動のシナリオ
3.2.1
bootstrap
3.2.2
アプリケーションロード
3.2.3
フォームロード
3.3
主要画面の要素
3.3.1
フレームを利用した画面配置
SDI (Single Document Interface)
MDI (Multi Document Interface)
3.3.2
3.4
フォームの構成
サーバーとのデータ連動
3.4.1
X-API
第4章 XMLファイルの構造
...............................................
36
4.1
ADL XMLフォーマット
...................................................
36
4.2
FDL XMLフォーマット
...................................................
37
4.3
Type DefinitionのXMLフォーマット
...........................................
38
4.4
グローバル変数のXMLフォーマット
...........................................
38
第5章 nexacro platformスクリプト言語
5.1
39
.............................................................
39
...........................................................
41
............................................................
44
...........................................................
45
.......................................................
46
..........................................................
46
this
5.1.2
Global
5.1.3
Expr
5.1.4
lookup
イベントハンドラ
5.2.1
39
.......................................................
有効範囲(Scope)
5.1.1
5.2
.....................................
メソッド
vi | nexacro platform 14 / 開発者向けガイド
5.2.2
5.3
...........................................................
47
..............................................................
49
........................................................
49
....................................................
50
........................................................
52
....................................................
52
..........................................................
53
...........................................
53
タイプ
Setter
5.3.1
SetMethod
5.3.2
動的なプロパティ
5.4
その他の変更点
5.4.1
nexacroメソッド
5.4.2
動作変更
5.4.3
オブジェクト名の生成時の制約
第6章 Frame Tree
6.1
表記法
....................................................
..............................................................
55
..........................................................
55
...........................................................
55
.............................................................
56
........................................................
56
.................................................
56
.............................................................
58
...........................................................
58
.................................................
59
..................
60
..............................
61
..................
61
..................................................
61
..................................
63
.......................................................
64
...........................................................
64
.................................................
64
.................................
65
...................................
65
6.1.1
ボックス
6.1.2
連結線
6.1.3
説明
6.1.4
用語の定義
6.1.5
共通で使用するSyntax
6.2
フォーム
6.2.1
関係図
6.2.2
スクリプトの例示画面
6.2.3
コンポーネント / invisibleオブジェクト / bindのスクリプトアクセス
6.2.4
コンテナコンポーネントへのスクリプトアプローチ
6.2.5
フォームを乗せたコンテナコンポーネントへのスクリプトアプローチ
6.2.6
親スクリプトの使用
6.2.7
コンテナコンポーネントのエレメントの使用
6.3
アプリケーション
6.3.1
関係図
6.3.2
スクリプトの例示画面
6.3.3
applicationからフォームのスクリプトアクセス
6.3.4
formからapplicationのスクリプトアクセス
第7章 スタイル(CSS)とテーマの管理
7.1
スタイル / テーマの概要
7.1.1
55
........................................
66
..................................................
66
................................................
66
スタイルの定義及び適用
目次 | vii
.......................................................
71
...........................................
72
.............................................
73
..................................................
73
.....................
73
............
74
.............
74
........................................................
75
7.1.2
テーマの定義
7.1.3
スタイル/テーマの登録及び適用
7.1.4
スタイルとテーマの適用対象
7.1.5
スタイルの制約事項
CSSセレクタ(Selector)のデプスは、最大4つまでサポートします。
タイプセレクタ(Type Selector)は、1段階のセレクタのみ指定することができます。
クラスセレクタ(Class Selector)は、1つのクラスのみを指定することができます。
7.2
スタイルの適用
7.2.1
スタイルの生成
.....................................................
75
7.2.2
スタイルの編集
.....................................................
78
7.2.3
スタイルの適用
.....................................................
83
7.2.4
cssclassの適用
......................................................
86
..........................................................
87
7.3
テーマの適用
7.3.1
テーマの生成
.......................................................
87
7.3.2
テーマの編集
.......................................................
88
7.3.3
テーマの適用
.......................................................
90
7.3.4
Deploy Theme
.....................................................
92
第8章 Position
......................................................
...........................................................
94
..............................................
96
.......................................................
97
..........................................................
97
....................................................
98
8.1
座標系説明
8.2
コンポーネントの Position設定
8.3
フォームデザイン
8.3.1
Tracker
8.3.2
Ruler / Dot Grid
8.3.3
Component Resize Info
8.3.4
Position Editor
8.4
Position関連注意事項
第9章 MLM
9.1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
プロジェクト生成及び修正
プロジェクト生成
9.1.2
スクリーン情報の修正
フォーム生成
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
9.1.1
9.2
94
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
viii | nexacro platform 14 / 開発者向けガイド
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
9.3
InitValue
9.4
実行
9.5
XML追加 /変更事項
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
9.5.1
XADL
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
9.5.2
XFDL
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
第III部 拡張
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
第10章 プロトコルアダプタ
10.1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
プロトコルアダプタ
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
10.1.1
モジュール(Module)登録
10.1.2
プロトコル(Protocol)登録
10.1.3
サービス登録
10.1.4
データ呼び出し
10.2
第11章
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
PluginElement
10.2.1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
プロトコル(Protocol)クラスコード
拡張モジュール
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
11.1
開発環境
11.2
プロジェクト作成と設定
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
11.2.1
プロジェクト作成
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
11.2.2
プロジェクト設定
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
11.3
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
拡張モジュール製作
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
11.3.1
Entry Funcs
11.3.2
Initialize
11.3.3
EntryPoint
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
11.3.4
Shutdown
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
11.4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
nexacro platform API
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
11.4.1
nexacro._addExtensionModule
11.4.2
nexacro._clearExtensionModule
第12章
12.1
カスタムコンポーネント
カスタムコンポーネント構成
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
目次 | ix
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
12.1.1
モジュール(Module)登録
12.1.2
オブジェクト情報
12.1.3
コンポーネントスクリプト
12.2
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
カスタムコンポーネント適用
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
12.2.1
コンポーネント登録
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
12.2.2
コンポーネント使用
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
第13章 DeviceAPI開発
13.1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
ネイティブモジュール
13.1.1
iOSネイティブモジュール開発
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
プロジェクト生成
プロジェクト環境設定
ソースファイル修正
ビルド
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
アプリケーションプロジェクトに lib HelloPlugin.aファイル追加
13.1.2
Androidネイティブモジュール開発
. . . . . . . . . . . . . . . . . . . . . . . . . 161
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
プロジェクト生成
ソースファイル修正
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
jarファイル生成
アプリケーションプロジェクトに Jarファイル追加
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
13.2
JavaScriptのインターフェイス開発
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
13.3
nexacro platformプロジェクト適用
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
カスタムコンポーネント
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
ユーザーコンポーネントの構成
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
13.3.1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
モジュール登録
オブジェクト情報
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
カスタムコンポーネント登録
13.3.2
テストフォーム作成
HelloTest.xfdl作成
onhelloイベント
13.4
実行テスト
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
第14章 ウィジェット(Widget)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
x | nexacro platform 14 / 開発者向けガイド
14.1
ウィジェットの作成
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
14.1.1
Layeredウィジェット
14.1.2
単独実行形態のウィジェット
14.2
ウィジェットの制御
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
14.2.1
ウィジェットのchild frame取得
14.2.2
ウィジェットの移動とサイズ変更
14.2.3
ウィジェットプロパティの使用
14.2.4
ウィジェットメソッドの使用
14.2.5
ウィジェットのための deviceAPI
14.3
ウィジェットの終了
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
はじめに
本マニュアルは、nexacro platformの基本的な概要とnexacro platformアプリケーションを作成する開発
プロセスについて説明します。
対象読者
対象読者
nexacro platformアプリケーションを開発したり、運営する開発者がプログラミングのために参照
することができます。
nexacro platform配布
nexacro platformアプリケーションを配布したり、実行する手順の詳細は、管理者ガイド(Administrator Guide)を参照してください。
nexacro studio
nexacro studioインストールと構成、オプションに関する詳細については、nexacro studioガイド(
nexacro studio Guide)を参照してください。
その他の開発ツール
NEXAWEBで提供していないWebサーバーまたはその他の開発ツールについては、概略的な部分だ
けを説明しています。各メーカーのマニュアルを別途参照してください。
xi
xii | nexacro platform 14 / 開発者向けガイド
マニュアルの構成
詳細項目の構成は以下のとおりです。
nexacro platform紹介
nexacro platformについて概要を説明します。
nexacro platform概要
nexacro platformの基本的な構造と構成要素について説明します。
基本
nexacro platformアプリケーションの構造と動作、スクリプト言語、スタイル、テーマの管理、Position、MLMについて説明します。
拡張
機能拡張に必要なプロトコル·アダプタ、拡張モジュール、カスタムコンポーネントについて説明し
ます。
マニュアルの表記法
本マニュアルは、読者の理解を高めるために特別な意味を持つ単語や文章を別途の表記法により表現しま
した。以下はその表記法についての説明です。
ノート、ヒント、注意は次のように提供されます。
ノートは、本体に簡単に追加する短い説明や参照、論評を提供するために使用します。.
ヒントは、ヘルプなどのヒントを提供するために使用します。
はじめに | xiii
注意は、読者やユーザーの注意を喚起する文章を提供するために使用します。
第I部
概要
1
第1章
nexacro platform 紹介
業務に最適化されたシステム、必要な情報に簡単にアクセスすることができるシステム、直感的に実行で
きるシステム、そしてデータ入力作業のような面倒な作業に時間がかからず、必要な業務に集中できるシ
ステムは、画期的な生産性の向上をもたらすことができます。このような変化は、システムのUI/ UX
環境をどのように構築するかにかかっています。
UI/ UXの革新は、システムを単に見事に作ることではなく、効率的に総所有コスト(TCO、Total Cost of
Ownership)を削減し、投下資本利益率(ROI、Return On Investment)を高めながら、使用性も一緒に高
めて経営者とシステム管理者、ユーザーの両方の満足度を上げる必要があります。
nexacro platformは、機能、性能、デザイン要素が企業の要求水準に合わせて調和を成すように構成され
ており、ひたすら企業だけのために生まれた、ビジネスユーザーエクスペリエンスソリューションであり
ます。
1.1
企業でのUI/UX
XインターネットでRIA(Rich Internet Application)、そしてREA(Rich Enterprise Application)に至るまで、
企業と個人のより豊かなユーザーエクスペリエンスを実現するためのWebアプリケーションの概念は続い
て発展してきました。
C/S(Client Server)環境は処理速度は満足でしたが、インストール、配布、保守管理の難しさがあって、
ウェブの登場によってこのような問題は解決されましたが、データ処理速度と制限されたUIの限界を持つ
ようになりました。これを超えるために、国内ではXインターネットが企業向けシステム開発に広く導入さ
れて、安定したシステムを必要とする企業内の業務のユーザーインターフェイスをデスクトップレベルのイ
ンターフェイスに提供するソリューションと位置づけました。国外では2002年Adobeと合併されたマクロ
メディアで使用していたRIAという用語が拡散されて全体的な市場が拡大されました。Xインターネットは
より企業的な用途を強調し、性能と機能を向上させることに焦点を当てたし、RIAは一般ユーザーを対象
にする広告やデザイン、アニメーションを強調して発展してきました。
2
3 | nexacro platform 14 / 開発者向けガイド
時間が経つにつれて、企業用アプリケーション市場でも、より豊かで高度のユーザーインターフェイスを
要求し始めたし、企業のためのRIAという意味のREAソリューションが企業向け市場で脚光を浴び始めて
います。ただし、REAは一般ユーザーを対象にしたRIAとは根本的なアプローチが違いました。徹底的に
企業環境の分析と複雑な開発ニーズの理解、そして企業についた高い理解度と数多くの構築経験に基づい
て作られた独自的な領域と見られます。
最近、国内外で"UX(User eXperience)"という用語が注目され、企業のビジネス環境に最適化されたUI/UX
の実装を通じた企業の価値のあるビジネスビュー(VIEW)への関心が高まりました。このような新たな企業
ユーザーのニーズに対応し、REAの概念を超えて拡張された概念でBUX(Business User eXperience
:ビジネスユーザー経験)を定義しました。BUXは、直感的な業務環境、ユーザーの経験をベースにしたUI
の実装を通じて、業務の生産性を高め、速やかな意思決定を可能にすることによって、何よりも企業顧客
のビジネス価値を実現することに集中しています。
1.1.1 BUX: Business User eXperience
BUXは、以下の3つの統合によって実現されます。
1番目はプラットフォームの統合(Unified Platform)です。
様々なオペレーティングシステム、ブラウザ、およびデバイスはもちろん、それぞれ異なる画面サイズごと
に1つのソースで駆動され、最適化された結果が得られるOSMU(One Source Multi Use)を指向しています。
2番目は、開発環境の統合(Unified Development Process)です。
同じ開発環境内でインハウス(In House)開発やSAPのようなUI高度化パッケージの開発作業をすべて実行す
ることができ、開発からテスト及び配布まで、ソフトウェア開発の全プロセスを統合できるようにする開発
ツールである"nexacro studio"を提供することにより、開発生産性を向上させます。
三番目は、データ中心の統合(Unified Data Frame)です。
定型、非定型データとOLTP(Online Transaction Processing)関連業務とビッグデータの可視化を含めたOL
AP(Online Analysis Processing)関連業務の両方をサポートすることを意味します。これは、データ指向の
企業用システムUI/ UXにおいて、業務効率性と生産性の向上に直結することであるので、特に重要な意味が
あります。
企業システムのUI/ UXの改善は投資コストの業務生産性向上と満足度向上効果が一番高い方法です。
既存のシステムをほぼ変更することなく、大幅な改善効果を創出することができるためです。最小のコス
トを通じた最大の技術革新効果、そして、モバイル、クラウド、ビッグデータ技術を積極的に受け入れて、
企業用UI/UXを統合的にサポートするという意志こそ、BUXプラットフォームであるnexacro platform
が追求する方向です。
nexacro platform 紹介 | 4
1.2
nexacro platform 14
nexacro platform 14は、BUXプラットフォームで、企業の様々な開発ニーズに対応するために、
JavaScriptベースの独自の統合フレームワークで開発されました。nexacro platformで開発されたアプリ
ケーションは、別の追加開発なしに、様々なオペレーティングシステム、ブラウザ、デバイスで同じ機能
を実装することができます。
nexacro platform 14から提供する、ウィジウィグ(WYSIWYG)ベースの開発ツールであるnexacro studio
は、RTE(Real Time Enterprise)実現のための開発生産性を最大化するために、HTML5、ランタイムバー
ジョンに関係なく開発することができ、開発者の利便性を最大化すると同時に、様々なデザイン効果を簡
単に与えることができるようにサポートします。
nexacro platform 14は、システムのUIにアクセスする状況によってHTML5とランタイムバージョンに区
分され、同じ開発プロセスと設定ファイルを使用します。HTML5バージョンは、別の追加インストールせ
ずに配布の問題から非常に自由なのが特徴であり、ランタイムバージョンは仮想エンジンのインストール
によってデスクトップ、スマートフォン、タブレットなど、さまざまな環境で相対的に高い性能と信頼を
確保することができます。ランタイムバージョンは、オペレーティングシステムによって、最適化された
仮想エンジンを提供します。
1.2.1 主な特徴
●
強力な開発ツール
既存の4GL開発ツールのように、開発に必要な多様で便利な機能をnexacro platform専用開発ツール
であるnexacro studioで提供します。ウィジウィグ(WISWIG)方式の画面開発と共に知能的なエディ
タを提供し、開発者に様々で便利な機能をサポートします。
●
標準の準拠
nexacro platformで使用するスクリプト言語は、ECMA、CSS、XML、DOMなどの国際標準に従う汎
用技術を適用することにより、他のシステムまたはソリューションと柔軟なインターフェイスをサポ
ートします。
標準技術を使用して新しい言語を学ばなければならないという負担を減らすことができ、nexacro platformの開発環境を迅速に習得して簡単な開発および保守が可能です。
●
統合されたデバイスのイベント処理
PCでのマウスイベントの処理とスマートデバイスでのタッチイベント処理を標準化して一つのコードで、
様々なデバイスをサポートするイベント処理を実装することができます。
5 | nexacro platform 14 / 開発者向けガイド
●
高速のデータ処理
nexacro platformは、サーバーとクライアント間のデータ処理時の画面と情報を除いたデータのみ送
受信することにより、サーバーの負荷を削減し、ネットワークの効率を高め、高速の通信速度を実現
することができます。
非同期通信技術を利用したデータ通信をサポートし、業務によって最適な実行環境を作成できます。
●
企業に特化された豊富なコンポーネント
アプリケーションですぐに使用できる様々な企業用コンポーネントを提供してアプリケーションに必要
なコンポーネントの開発期間を最小限に抑えることで、開発期間を短縮し、変化するビジネス環境に
速やかに対応できます。特に最も多く活用されるGridは、企業で主に使う機能を内蔵して提供してい
ます。
nexacro studioで、別のコーディングなしにドラッグ&ドロップするだけで、各コンポーネントに関
するデータバインディング及びクリックするだけで、新しいイベントを作成することができます。
●
視覚効果
さまざまな視覚効果を処理したり、スタイルやテーマを編集する作業をnexacro studio内で簡単に実
装することができ、開発者とデザイナーの両方に柔軟なコラボレーションプロセスをサポートします。
●
企業専用ブラウザ(ランタイムバージョン)
Real Time Enterprise(RTE)の実現のために企業で使用するアプリケーションで、機能や性能は重要
な要素です。ウェブブラウザの性能が持続的に向上されているが、企業が必要とする安定した性能へ
の期待を満たすことができない限界を持っています。これらの限界を脱皮するために、ランタイムバ
ージョンで提供している企業専用ブラウザ機能を活用することができます。
1.2.2 適用対象システム
●
既存のシステムのUI高度化によるTCOの削減とROIの向上
○
メインフレーム環境など既存のシステムをWebに移行
○
使用が複雑なSAP UIの改善/高度化
○
既存のシステムの老朽化でUI構成が複雑になるにつれ使用度が低下されたシステムを改編
○
○
●
コールセンターシステムのようにUIの改善/再構築時に顧客満足度の向上、人当たり処理速度向上
によるコスト削減
ERP、CRM、PLM、SCMなどに対するシステムアクセシビリティを向上
クライアント/サーバーシステムをインターネットベースのシステムに移行
○
クライアント/サーバーシステムのインストール、配布、更新時の問題を根本的に解決
○
純粋なWebでサポートされていないオフライン駆動とLocal DBMSやLocal Fileとの連動業務
nexacro platform 紹介 | 6
●
スマートフォンやタブレットなど、さまざまな機器のサポートが必要なシステム構築
○
PCとスマートフォン、タブレットまで共にサポート
○
BYOD(Bring Your Own Device)環境サポートシステムの構築
●
数値、統計データ中心の対顧客Webサービスやアプリケーションの開発
●
代表取締役、役員または意思決定者を対象に、直感的で流麗なEISや状況板などのシステム構築
●
HTML5を収容した次世代のシステム構築
第2章
nexacro platform 概要
nexacro platformは、さまざまなデバイスやオペレーティング環境をサポートするために、統合フレーム
ワーク(Unified Framework)とJavaScriptベースのコンポーネントを提供します。一つのコードでどのよ
うな環境でも動作するアプリケーションを作成することができ、各動作環境によって最適化された実行環
境を提供します。
2.1
nexacro platform統合フレームワーク
nexacro platform統合フレームワークは、さまざまな実行環境で最適なパフォーマンスを提供し、新しい
オペレーティングシステムが登場してもすぐに対応できる構造に作られました。
バージョンによって、パッケージや配布方法は異なることもありますが、内部的に動作するアプリケーシ
ョンは同じなので、どんな環境でも同じ動作を保証することができます。アプリケーションで使用するす
べてのコンポーネントは、JavaScriptベースに作られ、Webブラウザとnexacro platformランナー(Runner
)で同じように動作します。ただし、Webブラウザは、ユーザーが使用しているバージョンによって性能が
異なる場合があります。
統合フレームワークは、他の要素と一緒にnexacro platformエンジンの役割を果たします。主な要素は次
の通りです。
7
nexacro platform 概要 | 8
構成要素
説明
統合フレームワーク
プロジェクトとアプリケーションを構成する基本的なフレームワークを提供します。
(Unified Framework)
データ通信(XML、CSVなど)、画面間の連携のような作業を処理し、設定されたテ
ーマに基づいて全体のスタイルを処理する機能が含まれています。
UIコンポーネント
画面上に表示されるUIコンポーネントとDatasetのようなオブジェクトを提供します。
(UI Components)
内部的にはUIコンポーネントは、基本コンポーネントを組み合わせて作成されます。
- UIコンポーネント:Button、Calendar、Checkbox、Gridなど
- デフォルトコンポーネント:EditBase, FormBase, FrameBase, ScrollBarなど
- オブジェクト:Dataset
統合フレームワークAPI
アプリケーションは、統合フレームワークで構成され、ランタイムとHTML5バージ
ョンが同じ方式で動作し、開発者は、どのバージョンを使っても同じ方法で開発し
ます。
内部要素であるエレメント(Element)は、それぞれの環境に最適化された方式で開
発されました。ランタイムバージョンはCをベースに作成され、HTML5バージョンは
Javaスクリプトをベースに作成されます。但し、開発者がカスタムコンポーネント
を作成したり、プロジェクトに必要な共通の作業を行うときは、JavaScriptベース
9 | nexacro platform 14 / 開発者向けガイド
構成要素
説明
と し て 、一 つ の コ ー ド の み を 使 用 し ま す 。残 り は 、統 合 フ レ ー ム ワ ー ク 内 で 、
使用環境によって必要な要素を適用して処理します。
Device API
サードパーティが開発したモジュール(Extension DLL)との連携時に使用する機能です。
外部機器連動などの処理をサポートします。
Device API
モバイル機器の使用時にカメラやダイヤルなどの機器自体の機能との連携時に使用す
(Camera...)
る機能です。機械によってサポートされる機能が制限されることがあります。
- Webブラウザによって、一部の機能を提供しますが、まだ実験段階のため、HTML
5バージョンではサポートしておりません。
Local Database
アプリケーション内でデータを保存して処理することができる機能をサポートします。
SQLiteをサポートし、デスクトップだけでなく、モバイル機器でも使用できます。WebブラウザでもIndexed Database(http://www.w3.org/TR/IndexedDB/)をサ
ポートしますが、まだ実験段階のため、HTML5バージョンではサポートしておりま
せん。
バイナリデータ
データ通信時にXML、CSV、SSVなどの形式は、ランタイム、HTML5バージョンの
通信
共に基本的にサポートし、ランタイムバージョンではバイナリ通信をさらにサポー
トします。
- Webブラウザでもバイナリデータ通信処理が可能ですが、まだ実験段階のためHTML
5のバージョンではサポートしておりません。
nexacro platform 概要 | 10
2.2
nexacro platform構成要素
nexacro platformは、4つの要素で区切られます。プログラミング言語と開発環境は、製品のバージョン
に関係なく同じであり、実行環境と開発環境は、バージョンによって異なる場合があります。
2.2.1 プログラミング言語
nexacro platformは、他のプログラミング言語とは異なり、ユーザーに表示される画面を定義する部分と
ビジネスロジックを処理するスクリプトで区切られます。また、画面に好きなデザインを適用するために、
スタイルとテーマを適用することができる機能を提供します。
画面を配置する部分は、XMLベースで各コンポーネントのプロパティとバインド、イベントなどの情報を
管理します。また、様々な実行環境をサポートできるようにMLM(Multi Layout Manager)機能をサポートし、
関連するプロパティを管理します。また、アプリケーションの実行に必要な環境情報を管理する別のファ
イル構造を提供します。
以下は、nexacro platformでのアプリケーション開発時にデフォルトで作成されるファイルに関する説明
です。
区分
nexacro platform Project
ファイル名(拡張子)
*.xprj
用途
• プロジェクト情報
• TypeDefinition
• グローバル変数
• ADL (アプリケーション)
nexacro platform
*.xadl
Application Definition
• アプリケーション実行環境
• TypeDefinition
• グローバル変数
• テーマ情報
• フレームプロパティ
• スクリーン情報(ScreenInfo)
nexacro platform
*.xfdl
• 画面レイアウト
• 画面フォームプロパティ
Form Definition
• コンポーネントプロパティ
• 追加レイアウト
• スクリプト
TypeDefinition
default_typedef.xml
• モジュール
• コンポーネント
11 | nexacro platform 14 / 開発者向けガイド
区分
ファイル名(拡張子)
用途
• サービス
• アップデート
GlobalVariable
globalvars.xml
• グロバール変数
Theme
*.xtheme
• スタイルシート
(フレーム、フォーム、コンポーネントなど)
• イメージ
生成されたアプリケーションは、ビルドプロセスを経て、JavaScriptベースのコードに変換されます。
実際の実行環境では、変換されたJavaScriptコードを実行するようになります。
nexacro platform 概要 | 12
2.2.2 開発環境
nexacro platformは、ウィジウィグ(WYSIWYG)ベースの開発ツールであるnexacro studioを提供します。
nexacro studio内で実行環境に関係なく、アプリケーションを開発することができ、生成されたコードは、
nexacro platformのプログラミング言語で保存されます。
nexacro studioは、Microsoft Windowsオペレーティングシステムのみサポートしますが、開発されたア
プリケーションは、どんなオペレーティングシステムやどんなデバイスでも関係なく、最適化された使用
環境で配布することができます。
配布環境によって、nexacro studio以外の開発ツールで追加的な作業を必要とすることができ、
別々の認証を受けなければなりません。たとえば、iOSをサポートするアプリを開発する場合
には、配布時にXCode環境が必要であり、アンドロイドOSをサポートするアプリを開発する
場合には、配布時にEclipse環境が必要となります。
13 | nexacro platform 14 / 開発者向けガイド
2.2.3 実行環境
nexacro platformは、統合フレームワーク(Unified Framework)を元に、アプリケーションが実行され、
各実行環境によって最適化された構造を提供します。
アプリケーションを実行する主体によってランタイムとHTML5の2つのバージョンが提供されます。
ランタイムバージョンは、各オペレーティング·システムによって最適化された実行環境を提供します。
新しいオペレーティングシステムが発売されても、必要なAPIを追加してサポートすることができます。
HTML5バージョンは、ユーザーのWebブラウザ基に動作します。
nexacro platformが実行される環境を簡単に表現すると次の通りです。
ランタイムバージョンは、独自に開発されたレンダリングエンジンを含むnexacro platform
ランナー(Runner)を提供します。そのため、一般的なWebブラウザよりも高速安定した性能
を保証することができます。
ランタイムバージョンでも、オペレーティングシステム上の制約がある場合があります。
たとえばiOSで実行されるアプリはUIWebViewというオブジェクトのみ使用しなければなり
ません。同じフレームワークを使用しますが、オペレーティングシステムメーカーのポリシー
上で、UIWebViewオブジェクトを使ってもう一度包み込む形式をとります。
HTML5バージョンは、Webブラウザによって、アプリケーションの実行性能が異なる場合が
あります。特にIE6は、マイクロソフトからにも2014年4月からは正式にサポートが終了され
るため、最新技術についた性能保証がされず、予想されるセキュリティ上の脅威をこれ以上防
nexacro platform 概要 | 14
ぐことができるません。
15 | nexacro platform 14 / 開発者向けガイド
2.2.4 配布環境
配布とは、アプリケーションが実行されるために必要なリソースをクライアントにインストールするための
一連の作業を意味します。使用環境によって、nexacro platformで開発されたアプリケーションと必要なモ
ジュールをダウンロードしてクライアントにインストールするようになります。
nexacro platformのアプリケーションは、ユーザーが使用するクライアントで動作します。ただし、
データ処理などの作業のために、アプリケーション·サーバー(Application Server)を必要とすることがあ
ります。 nexacro platformは、データ処理のためのX-APIモジュールを共に提供します。また、必要によ
ってデータをリアルタイムで処理する必要がある場合、X-PUSHと同じような付加的な技術を使用するこ
とができます。
基本的な配布作業は、HTTPプロトコルを使用します。ただし、インターネット接続をサポートしていない
環境では、アプリケーションの実行に必要なリソースを別々のメディアに配布して使用することができます。
各配布環境によって、追加の作業が必要になることがあります。配布と関連した詳細内容は管理者ガイド(
Administrator Guide)で提供される各バージョンごとの詳細を参照してください。
X-PUSHは、ランタイムバージョンのみサポートします。
ランタイムバージョンでは、インストールモジュールが実行環境によって配布されます。
nexacro platform 概要 | 16
テーマファイルは、組み込みテーマを使用する場合には、nexacro studioで別々に作成せずに
デフォルトテーマを変換する処理だけ行います。
17 | nexacro platform 14 / 開発者向けガイド
2.3
システム要件
nexacro platformアプリケーションが動作するための環境は、次のとおりです。
●
Runtime
項目
CPU
仕様
最小
メモリ
HDD(ROM)
プラットフォーム
Android
iOS
Intel® Pentium® 4
ARM Cortex-A8
ARM Cortex-A8
1.4GHz
600 MHz
600 MHz
Intel® Pentium
ARM Cortex-A8
ARM Cortex-A8
i3-330M 2.13GHz
1GHz以上
1GHz以上
最小
-
HVGA
HVGA
推奨
-
HVGA以上
HVGA以上
最小
1GB
256M
256M
推奨
4GB DDR3
512M
512M
最小
8GB
4M
4M
推奨
30GB - 5400rpm
10M
10M
最小
Windows XP SP3
Android 2.3
iOS 4
推奨
Windows7 Home Premium
Android 4.1.2
iOS 6
推奨
ディスプレイ
Windows
(32bit) SP1
nexacro platform サポート端末は下記のとおりです。
これらの端末は当社で検証済みの製品であり、お客様から別途の問合せなしでサポートが可能
な端末です。
• Android Smart Phone
Samsung Electronics
- Galaxy S3 (Android 4.1.2)
- Galaxy S4 (Android 4.2.2)
- Galaxy Note 8.0 (Android 4.1.2)
- Galaxy Note 10.1 (Android 4.1.1)
LG Electronics
- Optimus G2 (Andriod 4.2.2)
- Optimus Vu2 (Andriod 4.0.4)
SHARP
nexacro platform 概要 | 18
- Aquos Phone (Andriod 4.0.4)
• Android Tablet
Samsung Electronics
- Galaxy Tab 10.1 (Android 3.2)
Fujitsu Mobile
- Arrows Tab Wi-Fi FAR70A (Android 3.2)
• iOS
iPhone5 (iOS 6.0.1)
iPhone5s (iOS 7.1)
iPad2 (iOS 7.1.1)
iPad4 (iOS 7.1.1)
iPad mini (iOS 6.0.1, 7.1)
●
HTML5
Webブラウザ
最小仕様
推奨仕様
Google Chrome
10.0.648.127
22.0.1229.79
Firefox
8.0.1
14.0.1
Internet Explorer
8.0
10.0.9200.16521
Edge
25.10586.63.0
25.10586.63.0
Safari
4
6.0.2
モバイルWebブラウザは、下記のブラウザのみをサポートします。
• Androidデフォルトブラウザ
• Android Google Chromeブラウザ
• iOSデフォルトブラウザ
モバイルWebブラウザ
最小仕様
推奨仕様
Androidデフォルトブラウザ
Android 2.3 デフォルトブラウザ
Android 6.0 デフォルトブラウザ
Android Google Chromeブラウザ
Android Chrome (Android 4.0)
Android Chrome (Android 4.4)
iOSデフォルトブラウザ
iOS 4 デフォルトブラウザ
iOS 6.0.1 デフォルトブラウザ
第II部
基本
19
第3章
nexacro platform応用プログラムの構造
nexacro studioでアプリケーションを開発するときは、XMLベースのnexacro platformプログラミング言
語とJavaスクリプトを使用してアプリケーションをテストしたり、配布するときは、JavaScriptに変換さ
れたファイルが配布されます。このように配布されたアプリケーションは、nexacro platform統合フレー
ムワークをベースに作られて動作します。
この章では、nexacro platformの開発時に使用されるファイルと動作について説明します。動作原理に配
布プロセスも含まれますが、ここでは配布の部分は言及しません。配布の詳細については、別途配布され
る管理者ガイド(Administrator's Guide)ドキュメントを参照してください。
3.1
nexacro platform応用プログラムのファイル
nexacro platformアプリケーション開発時に使用するファイルは、nexacro studioで使用されるファイル
と変換後に使用するファイルに分けられます。モバイルアプリの形で配布したり、外部ライブラリを使用
する場合には、追加ファイルが必要とする場合もありますが、ここでは基本的なプロジェクトを基準に説
明します。
下記の表ではnexacro studioで作成されたファイルがどのように変換され、配布されるかを示します。
nexacro studio
変換されたファイル
備考
nexacro studioで開発時にのみ参照
A.xprj
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
20
21 | nexacro platform 14 / 開発者向けガイド
nexacro platformアプリケーションが実行時には最初に呼び出されるHTML文書から変換されたA.xadl.js
ファイルを呼び出して、該当ファイルに設定されたロード過程を経て、残りのファイル情報を取得します。
変換されたファイルの詳細についてはここで説明しません。nexacro studioでnexacro platformアプリケ
ーションの作成時に使用されるファイルについて説明します。
3.1.1 ADLファイル
ADLはApplication Definition Languageの略字で、アプリケーションの構成に必要な全ての要素の定義を
します。
ADLファイルが定義する主要要素は、以下の通りです。
要素
説明
オブジェクトの配布
- 応用プログラムの実行に必要なオブジェクト(データセット、グリッドなど)を羅列し、
(link)
バージョン情報を登録します。
- この情報はType Definitionファイルに保存され、ADLではLink のみを行います。
テーマの構成
- 応用プログラムの画面に出力するグラフィックの詳細内容を定めます。
(link)
- テーマはイメージとCSSの組み合わせにより構成されます。
- この情報はThemeファイルに保存され、ADLではLinkのみを行います。
CSS
- 応用プログラムのCSSを定義します。
(link)
- テーマに登録したCSS以外に、追加でCSSを登録する際に使用します。
- この情報はCSSファイルに保存され、ADLではLinkのみを行います。
Global Variable
- 応用プログラム内の様々な画面が使用する共通変数を登録します。
(link)
- 共通変数の種類には、Variant変数やデータセットなどを含んだオブジェクトとイメ
ージがあります。
- この情報はグローバル変数ファイルに保存され、ADLではLinkのみを行います。
Global Script
- 応用プログラムが使用する共通ファンクションを定義します。
- 応用プログラム自体のイベントファンクションを実装します。.
ADLファイルはnexacro studioで自動管理します。
nexacro platform応用プログラムの構造 | 22
nexacro studio上のProject Explorer画面で取り扱う内容のほとんどは、ADLファイルに保存される内容
です。以下はUXStuioのProject Explorer画面です。
説明
1
プロジェクト名です。1つのプロジェクトにいくつかのADLを登録することができます。
2
Type Definitionの情報を保存します。
3
グローバル変数の情報を保存します。
4
ADL名です。画面を配置します。
5
ChildFrameしか登録されていないので、シングルフレームモデルです。
6
スクリーンの構成を保持します。
7
CSSの構成を保持します。
8
テーマの構成を保持します。
9
フォームを定義・登録します。
23 | nexacro platform 14 / 開発者向けガイド
Project Explorerで定義した内容は1つのファイルにのみ保存されるのではなく、いくつかのファイルに分
けて保存されます。その中でルートに該当するファイルはADLファイルです。
ADLファイルは、Project Explorer画面以外にもエディット画面で直接に編集することができます。
説明
1
ADLでマウスの右側のボタンをクリックしてから“Edit Source”をクリックすると、ADLの内容を編集する
ことができます。
2
ADLでマウスの右側のボタンをクリックしてから“Edit Script”をクリックすると、ADLのグローバルスク
リプトを編集することができます。
以下はADLの内容を編集する画面です。
nexacro platform応用プログラムの構造 | 24
3.1.2 Type Definitionファイル
Type Definitionファイルは、nexacro platformアプリケーションが必要とするファイルに関連する情報を
持っています。nexacro platformで使用されるコンポーネントは、Javaスクリプトに基づいて作成されま
した。ロジックが実装されたJavaScriptファイルをモジュールといい、この中で、アプリケーション開発
に使用するオブジェクトを開発時に選択することができます。その他のアプリケーションの開発時にサー
ビスグループを定義し、配布に関連するオプションを設定します。
Type Definitionファイルが定義する主要要素は以下の通りです。
Type Definitionファイルが定義する主要要素は以下の通りです。
要素
1
モジュール情報
説明
JavaScriptで開発されたモジュールの情報を持っています。
- 独自開発されたモジュールを追加することができます。
- jsまたはjsonファイル形として登録することができます。各ファイル間
の依存関係を持つ場合には、正しい順序で登録する必要があります。
2
オブジェクト情報
アプリケーションの実行に必要なオブジェクトの情報が含まれています。
25 | nexacro platform 14 / 開発者向けガイド
要素
説明
- 指定されたオブジェクトが配布に含まれます。
- 各オブジェクトは、モジュールに基づいて指定されます。
3
サービスグループ
プロジェクトの規模によって内部的にサービスグループを定義します。
- 各サービスグループは、個別にキャッシュレベルを設定できます。
4
配布オプション
アプリケーションの配布に関する情報(ランタイムバージョン)を指定します。
nexacro platform応用プログラムの構造 | 26
3.1.3 グローバル変数ファイル
グローバル変数ファイルは、nexacro platform応用プログラムの様々な画面が使用する共通変数を登録し
ます。
共通変数として登録することができる変数には、Variant変数やデータセットなどを含んだオブジェクトと
イメージがあります。
グローバル変数ファイルが定義する変数は、以下の通りです。
要素
説明
データセット変数
- データセットを登録しエレメントを設定します。
Variable変数
- Variantタイプの変数を登録します。
イメージ変数
- イメージを登録します。
以下は、グローバル変数中のデータセットを登録する画面です。
Project > GlobalVariable > Insert GlobalVariables Item > Dataset
Global Variableファイルを一括的に編集しようとするときは、下記のメニューからソースを開いて編集す
ることができます。
Project > GlobalVariable > Edit Source
27 | nexacro platform 14 / 開発者向けガイド
3.1.4 テーマファイル / スタイルファイル
nexacro platformでのスタイルとテーマは、画面上に出力されるUI要素のデザインを定義することを意味
します。ボタンを例にあげると、透明度、フォント、カラー、陰影、ぼかし、斜体などの効果をボタンコ
ンポーネントに与えることを意味します。
テーマとスタイルの違いは、イメージが存在するか否かです。テーマはスタイルにイメージを追加した形
態です。従って、イメージを使用するテーマはスタイルに比べより多様にUIをデザインすることができます。
3.1.5 FDLファイル
FDLファイルは、使用者の画面のフォームを定義します。使用者の画面に出力する画面の配置だけでなく、
UIロジックの実行のためのスクリプトを含む多様な情報を含んでいます。
FDLファイルは、ADLファイルと共にnexacro platform応用プログラムで最も重要なファイルです。
FDLファイルが定義する主要要素は以下の通りです。
要素
コンポーネントの配置
説明
- Visibleオブジドェクトであるコンポーネントを配置する情報を持っています。
- コンポーネントのプロパティ及びイベントを設定します。
オブジェクトの
- データセットなどのInvisibleオブジェクトのプロパティ及びイベントを設定します。
設定
スクリプト
- フォームを含む全てのオブジェクトのイベント関数をスクリプトコーディングします。
- イベント関数以外の関すもスクリプトコーディングします。
スタイル
- フ ォ ー ム で 使 用 す る ス タ イ ル を 登 録 し ま す 。こ こ で 使 用 す る ス タ イ ル は 、A D L
で登録したスタイルよりも優先権があります。
BindItem
- フォーム、コンポーネント、Invisibleオブジェクトとデータセットを結合するBindItemオブジェクトを設定します。
nexacro platform応用プログラムの構造 | 28
3.2
アプリケーション駆動のシナリオ
nexacro platform アプリケーションが実行されるプロセスは、以下のとおりです。
3.2.1 bootstrap
アプリケーションをロードするために関連情報を確認して、必要なリソースを取得するプロセスを説明し
ます。このプロセスをブートストラップと表現します。
HTML5
1
index.html
Runtime
start.json
start_android.json
start_ios.json
get bootstrap info
2
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 アプリケーションの実行プロセスで使用されるブートストラップという用
語は、アプリケーションを開始する準備をする過程という表現を含んでいます。
3.2.2 アプリケーションロード
アプリケーションが実行されるためにアプリケーションに接続されたフォームをロードするプロセスは、
以下のとおりです。
29 | nexacro platform 14 / 開発者向けガイド
1.
ADLロード
2.
ADL実行
3.
TypeDefinition 構文解析(parsing)
4.
サービス登録
5.
クラスリスト保存
6.
サブファイルのダウンロードと実行
7.
Application初期化
8.
デフォルトクラス登録
9.
Applicationプロパティ設定
10.
Mainframe生成と初期化
11.
MainFrame内に Frame生成
12.
Formロード
13.
Application, MainFrame, Frameイベントハンドラ登録
14.
イベント発生: Application.onloadtypedefinition
15.
GlobalVariables生成
16.
イベント発生: Application.onloadingglobalvariables
17.
メソッド呼び出し:MainFrame.createComponent
18.
メソッド呼び出し:MainFrame.on_created
19.
イベント発生:Application.onload
20.
イベント発生:Form.onload
サブファイルは、include方式で接続されるスクリプトファイルなどを意味します。
ロード順序によって生成されていない項目は使用できません。
たとえば onloadtypedefinitionイベント関数内で GlobalVariablesにアクセスすると、undefinedに表示されます。
this.application_onloadtypedefinition = function(obj:Application, e:
nexacro.LoadEventInfo)
{
trace(application.all['Variable0']); //undefined
}
nexacro platform応用プログラムの構造 | 30
3.2.3 フォームロード
前に説明したアプリケーションのロード項目で「Formロード」から「Form.onloadイベント発生」との間
のプロセスをより詳細に見てみると以下の通りです。
1.
Formロード
2.
Form実行
3.
サブファイルのダウンロードと実行
4.
Form初期化
5.
Form Styleプロパティ設定
6.
Formプロパティ設定
7.
オブジェクト、コンポーネント、バインドアイテム(BindItem)の生成
8.
エンジン内部で処理するスクリプトを実行
9.
イベントハンドラの登録
10.
オブジェクト、コンポーネントメソッド呼び出し:Object.createComponent
11.
イベント発生: Form.oninit
12.
メソッド呼び出し:Form.on_created
13.
オブジェクト、コンポーネントメソッド呼び出し:Object.on_created
14.
イメージロード、transaction処理
15.
イベント発生: Form.onload
Formに含まれたオブジェクト、コンポーネントは指定された Z-Order順に生成します。
div、tabコンポーネントは、urlプロパティにリンクされている Formを取得するネットワーク
速度によってロードが終わる時点が異なることがあります。
31 | nexacro platform 14 / 開発者向けガイド
3.3
主要画面の要素
nexacro platformアプリケーションは、ユーザーが操作できるアプリケーションUIを表示するために様々
な要素が含まれています。基本的な画面要素は以下の通りです。
3.3.1 フレームを利用した画面配置
nexacro platformアプリケーションは、画面処理のための基本的なフレーム構造を提供します。最上位MainFrameの下にChildFrameを持って、その下に画面を配置します。フレームは、Formを表示するための舞
台装置と言えます。各画面を構成するFormが別々に離れていますが、同じ舞台上で表示されるので、
共通で使用できる要素を配置して画面間の様々な要素を共有することができます。
デフォルトで提供されるフレームはMainFrame、ChildFrameに分けられ、画面レイアウトによって、
FrameSet、VFrameSet、HFrameSet、TileFrameSetを追加することができます。
フレーム種類
Root Frame
フレーム
MainFrame
説明
- 最上位のフレームです。つまり、Root Frameに該当します。
- サブにNode FrameまたはChildFrameを持つことができます。
- サブにChildFrameを持っている場合には、フレームを追加することがで
きません。
Terminal
ChildFrame
Frame
Node Frame
- サブに1つのフレームも持つことができません。
- サブに1つのフォームのみ持つことができます。
FrameSet
- 特別な形態なしでサブフレームを配置します。
- 2つ以上のサブフレームが追加されると、カスケードに配置し、位置プロ
パティ値を指定すると、該当場所に配置します。
- サブにNode FrameまたはChildFrameを持つことができます。
VFrameSet
- 縦型で、サブフレームを配置します。
- サブフレームの配置比率をseparatesizeプロパティに指定します。
- サブにNode FrameまたはChildFrameを持つことができます。
HFrameSet
- 横形でサブフレームを配置します。
- サブフレームの配置比率をseparatesizeプロパティに指定します。
- サブにNode FrameまたはChildFrameを持つことができます。
TileFrameSet
- 碁盤形でサブフレームを配置します。
- 縦、横方向に配置されるサブフレームをseparatetype、separatecount
プロパティに指定します。
- サブにNode FrameまたはChildFrameを持つことができます。
nexacro platform応用プログラムの構造 | 32
SDI (Single Document Interface)
プロジェクトの作成時にデフォルトテンプレートを選択し、他の付加的な処理をしなかった場合、単一の
フレームのみでプロジェクトが構成されます。
MDI (Multi Document Interface)
上部メニュー、サブメニュー、コンテンツ、ツールバー形式で画面を構成する場合には、全体的なレイア
ウト構造を希望の形式に合わせて設定する必要があります。 nexacro platformでMDIの設定は、デフォル
トテンプレートを選択した後、必要なフレームを追加したり、HFrame、VFrameテンプレート、またはユ
ーザーが指定したプロジェクトテンプレートを選択して作成できます。
フレームの追加は、プロジェクトエクスプローラで、MainFrameまたはNode Frameを選択し、コンテキ
ストメニューから[Insert Frame]項目を選択するか、MainFrameまたはNode Frame項目をダブルクリッ
クした後、表示される編集画面のコンテキストメニューから[Add]項目を選択して追加することができます。
33 | nexacro platform 14 / 開発者向けガイド
nexacro platform応用プログラムの構造 | 34
3.3.2 フォームの構成
フォームは実質的な画面UIを構成する対象です。このフォームがフレームの上に貼り付けられ、顧客の画
面に出力されます
フォームは大きくVisible領域、Invisible領域、Logic領域の3つの領域で構成されています。
●
●
●
Visible領域は画面に出力される部分で、visibleオブジェクト(以下、コンポーネントとする)の配置に
より作成されます。
Invisible領域は、Invisibleオブジェクトの組み合わせにより作成されます。
Logic領域はスクリプトにより直接にコーディングする部分で、コンポーネントとInvisibleオブジェク
トを制御します。
35 | nexacro platform 14 / 開発者向けガイド
3.4
サーバーとのデータ連動
nexacro platformアプリケーションは、企業内で使用するデータをユーザーが簡単に操作できるように画面
上に表現してくれる役割を果たしたりします。このような状況でデータを管理するサーバとアプリケーシ
ョン間の連携作業を必要とします。
3.4.1 X-API
X-APIは、nexacro platformアプリケーションと連動できるデータ型を生成するライブラリです。 X-API
を使用しなくても、決まった仕様に従ってData Serviceを開発する場合、nexacro platformアプリケーシ
ョンと該当サービス・データと連動することができます。
X-APIは、Java開発環境をベースに提供されます。詳細ドキュメントは、X-APIライブラリに
含まれているドキュメントを確認してください。
第4章
XMLファイルの構造
nexacro platformランタイムは応用プログラムの実行のためにフォームファイル以外にも多くのファイル
を必要とし、nexacro studioはこのファイルを自動で生成・管理します。
このファイルは全てXMLフォーマットで形成されています。ここでは、nexacro platformが提示するXML
の構造を説明します。
4.1
ADL XMLフォーマット
<ADL>
<TypeDefinition/>
<GlobalVariables/>
<Application></Application>
<Script><![CDATA[ … }]]></Script>
</ADL>
<Application>
<Style/>
<Layout>
<MainFrame>
<ChildFrame/>
</MainFrame>
</Layout>
</Application>
36
37 | nexacro platform 14 / 開発者向けガイド
<Application>
<Style/>
<Layout>
<MainFrame>
<FrameSet>
<ChildFrame/>
</FrameSet>
</MainFrame>
</Layout>
</Application>
4.2
FDL XMLフォーマット
<FDL>
<TypeDefinition/>
<Form>
<Style/>
<Layouts>
<Layout>
<!-- UI Component -->
<Layout>
</Layouts>
<Objects>
<!-- Invisible Object -->
</Objects>
<Bind>
<BindItem/>
</Bind>
<Script><![CDATA[ ]]></Script>
</Form>
</FDL>
XMLファイルの構造 | 38
4.3
Type DefinitionのXMLフォーマット
<TypeDefinition>
<Modules>
<Module/>
</Modules>
<Components>
<Component/>
</Components>
<Services>
<Service/>
</Services>
<Update>
<item/>
</Update>
</TypeDefinition>
4.4
グローバル変数のXMLフォーマット
<GlobalVariables>
<Images>
<Image/>
</Images>
<Dataset/>
<Variable/>
</GlobalVariables>
第5章
nexacro platformスクリプト言語
nexacro platformでは、アプリケーションの開発時に使用するスクリプトは、HTML5仕様で使用されるス
クリプトに基づいて開発されました。このため、既存のWeb開発者が個別にスクリプト言語を身につけな
くても、nexacro platformスクリプトを作成することができます。
ただし、HTML5仕様はまだ開発されており、まだ提供されていませんが、企業内で必要な機能をサポート
するために、nexacro platform自体でサポートしているスクリプトも提供されます。そのため、最適の性
能を出すアプリケーションを作成するためには、基本的なスクリプト言語と共にnexacro platformスクリ
プト言語の基本的な知識が必要です。
この章では、既存のバージョンから変更されたスクリプト言語を説明します。
5.1
有効範囲(Scope)
有効範囲は、アクセス可能な変数の範囲と関連した内容を説明します。有効範囲または領域と表記し、
英語表記そのまま使用する場合もあります。業務に使用するアプリケーションは、複数の画面を同時に操
作し、一つの変数を複数の画面で参照する場合が多いが、このような場合、どのように必要なリソースに
アクセスできるかどうか有効範囲を通じて調べられます。
5.1.1 this
ADLやフォームで使用されるアイテムの有効範囲を指定するときは、常にthisを使用します。変数だけでなく、
プロパティ、フォーム間の参照時にも適切な有効範囲を指定する必要があります。
フォーム内の変数は、次のように宣言します。
39
nexacro platformスクリプト言語 | 40
this.formvalue = 4;
関数を宣言する場合にも有効範囲を指定する必要があります。また、関数内でフォーム内に宣言された変
数を参照するときも、有効範囲を指定する必要があります。
this.formvalue = 4;
this.test = function()
{
this.formvalue = 3;
this.parent.value = 3;
this.parent.parent.value = 3;
}
traceやalertのようなメソッドは、指定された有効範囲によって他のメソッドが実行されます。alert()のみ
使用することとthis.alret()を使用することは、お互いに別々のメソッドを実行することです。
this.Button00_onclick = function(obj:Button, e:nexacro.ClickEventInfo)
{
alert(e.button);
this.alert(e.button);
}
但し、関数内で宣言された変数は、有効範囲を個別に指定せずに使用可能であり、パラメータとして渡さ
れた値も有効範囲を指定せずに使用することができます。
this.Button00_onclick = function(obj:Button, e:nexacro.ClickEventInfo)
{
obj.set_text("button");
var a = 3;
trace(a); // 3
}
関数の宣言時にも有効範囲を指定して該当するアプリケーションやフォームのメンバーに含まれるようにし
ます。
this.Button00_onclick = function(obj:Button, e:nexacro.ClickEventInfo)
{
...
}
41 | nexacro platform 14 / 開発者向けガイド
eval関数でフォームにアクセスする場合にもthisを使用する必要があります。
eval("this.formfunc()");
以前のバージョンで使用していたことと同じように関数を宣言することもできますが、Global
で処理され、以降のサポートが中止されることがあるのでお勧めしません。
function Button00_onclick(obj:Button, e:nexacro.ClickEventInfo)
{
...
}
5.1.2 Global
nexacro platformスクリプト内で有効範囲を指定していない変数や関数はすべて、最上位Globalメンバー
として扱われます。
以下のように有効範囲を指定せずに使用されたスクリプトは、すべてGlobalに処理されます。関数の外で
varキーワードを使用する場合でも、Globalとして処理されます。
globalvar = 2;
var globalvar2 = 3;
関数内で使用された変数でも有効範囲を指定しない場合は、すべてGlobalとして処理されます。ただし、var
キーワードを使用して定義した変数は、関数の外で使用することができません。
this.test = function()
{
trace(globalvar); //2
trace(globalvar2); //3
value = 4;
var localvar = 5;
}
this.test = function()
{
nexacro platformスクリプト言語 | 42
trace(value); // 4
trace(localvar); // ReferenceError: localvar is not defined
}
Form内で他のスクリプトファイルを includeする場合には、内部的にスクリプトを関数とし
て処理します。そのため、varキーワードを使用する場合にはご注意ください。
たとえば、includecode.xjsファイル内に定義された変数が実際にgenerateされた includecode.
xjs.jsコードは、以下の通りです。(generateされたコードは、バージョンによって異なる場
合があります。)
includecode.xjs
bbb = "bbb";
var ccc = "ccc";
includecode.xjs.js
(function()
{
return function(path)
{
var obj;
// User Script
this.registerScript(path, function() {
bbb = "bbb";
var ccc = "ccc";
});
this.loadIncludeScript(path);
obj = null;
};
}
)();
関数を宣言するか、呼び出すときにも有効範囲を指定する必要があります。次のスクリプトで test()とthis.
test()は、別の関数を呼び出します。有効範囲を指定せずにtest()を呼び出すことになると、Globalに宣言
されたtest関数を呼び出します。
43 | nexacro platform 14 / 開発者向けガイド
this.Button00_onclick = function(obj:Button, e:nexacro.ClickEventInfo)
{
test();
this.test();
}
以下のように有効範囲なしに指定された関数は、Globalとして処理されます。
Button00_onclick = function(obj:Button, e:nexacro.ClickEventInfo)
{
...
}
function Button00_onclick(obj:Button, e:nexacro.ClickEventInfo)
{
...
}
Alert()、Confirm()、Trace()メソッドをGlobalに使用することができます。以前のバージョ
ンのようにフォームメソッドで使用するには、thisを使って有効範囲を指定する必要があります。
dialog(), open(), exit(), transaction()のようなアプリケーションやフォームメソッドは、
該当する有効範囲を指定する必要があります。
//application
application.open("");
application.exit("");
application.transaction("");
//Form
this.close("");
this.go("");
//ADL
this.open("");
this.exit("");
this.transaction("");
nexacro platformスクリプト言語 | 44
アプリケーション全体で使用したい変数は、Global変数ではなく、アプリケーション変数とし
て登録して使用することをお勧めします。
5.1.3 Expr
exprスクリプトはnexacro platformの内部的にバインドされたDatasetに基づいて処理されるため、
別の有効範囲を指定しなくても使用することができます。但し、バインドされていないDatasetに直接ア
クセスするには、有効範囲を指定する必要があります。
以下のようにバインドされたDatasetにexprを使用する場合には、thisをつけません。
<Cell text="expr:Column00"/>
<Cell text="expr:Column00.min"/>
<Cell text="expr:currow"/>
<Cell text="expr:rowposition"/>
<Cell text="expr:getSumNF('col0')"/>
Dataset.set_filterstr("Column00=='test'");
Dataset.filter("Column00=='test'");
バインドされたGrid、Dataset、Cellを指定する場合には、下記のようなディレクティブを使用します。
Grid: comp
dataset: dataset
Cell: this
<Cell text="expr:this.col"/> <!-- cell -->
<Cell text="expr:dataset.rowcount"/> <!-- binded dataset -->
<Cell text="expr:comp.currentcell"/> <!-- grid -->
<Cell text="expr:dataset.parent.func1()"/> <!-- form -->
<Cell text="expr:comp.parent.func1()"/> <!-- form -->
フォームに関するディレクティブが別々に提供されず、必要によりcomp.parentまたはdataset.
parentのようにアクセスします。
45 | nexacro platform 14 / 開発者向けガイド
フォーム内の関数にアクセスするとき、comp.parent.func()の形式を使用せずにthisを使用
すると、エラーとして処理されます。exprスクリプトで、thisはcellを指します。
<Cell text="expr:this.func01()"/>
コンポーネントのプロパティにExprとTextが一緒にある場合、画面に表示されるテキストを返すdisplaytext
プロパティを使用することができます
this.Button00.set_text("text");
this.Button00.set_expr("1+1");
trace(this.Button00.text); // "text"
trace(this.Button00.expr); // "1+1"
trace(this.Button00.displaytext); // "2"
5.1.4 lookup
lookupメソッドは、有効範囲を指定してアクセスが困難な場合に使用できるように設計された追加メソッ
ドです。idまたは関数名を使用して必要なオブジェクトや関数を検索することができます。
lookupメソッドは、次の形式で使用できます。
Form.lookup( strid );
Frame.lookup( strid );
Application.lookup( strid );
EventSyncObject.addEventHandlerLookup( eventid, funcid, target );
実際のコードでは、次のように使用されます。
// thisから上位に検索してobjectidに該当するオブジェクトを返す
var obj = this.lookup("objectid");
// thisから上位に検索してfn_onclickに該当するオブジェクトを返す
this.lookup("fn_onclick")();
// thisから上位に検索してfn_onclickに該当する関数をイベントハンドラで処理
btn00.addEventHandlerLookup( "onclick", "fn_onclick", this );
nexacro platformスクリプト言語 | 46
5.2
イベントハンドラ
イベント処理のためのイベントハンドラは、nexacro studioプロパティウィンドウで追加したり、各コン
ポーネント、オブジェクトに提供するメソッドを使用してスクリプトから追加することができます。
5.2.1 メソッド
スクリプト内でイベントの処理のためにイベントハンドラを追加、設定、削除することができるメソッド
を提供します。既存のバージョンでは、addHandler、setHandler、removeHandlerの3つのメソッドを
提供しましたが、該当メソッドはこれ以上サポートしておりません。
1.
addEventHandler( eventid, funcobj, target )
2.
addEventHandlerLookup( eventid, funcstr, target )
3.
setEventHandler( eventid, funcobj, target )
4.
setEventHandlerLookup( eventid, functstr, target )
5.
removeEventHandler( eventid, funcobj, target )
6.
removeEventHandlerLookup( eventid, funcstr, target )
イベントを処理する関数の有効範囲によって、適切なメソッドを選択して使用します。
this.btn00.setEventHandler("onclick", this.fn_onclick, this);
this.dataset00.addEventHandlerLookup("onrowposchange", "fn_onchange", this);
addEventHandlerLookup, setEventHandlerLookup, removeEventHandlerLookupメソッ
ドは、アプリケーションの性能に影響を与える可能性があるので、必要な場合のみ使用をお勧
めします。
btn00.onclick.addHandler(button00_onclick) 形式はもうサポートしません。
イベントをプロパティウィンドウで作成すると、下記のように文字列に設定されます。
<Button id="Button00" ... onclick="Button00_onclick"/>
47 | nexacro platform 14 / 開発者向けガイド
該当コードは、ビルド処理後、変換されたJavaScriptコードでは、下記のようにthisのディレ
クティブを付けて生成されます。
this.Button00.addEventHandler("onclick", this.Button00_onclick, this);
5.2.2 タイプ
nexacro studioでイベントハンドラ関数にパラメータを設定するときに、オブジェクトのタイプを指定で
きます。タイプは、JavaScriptの標準的な構文ではなくnexacro studioの内部で開発のしやすさを提供す
るためにサポートされる形式です。
this.Button00_onclick = function(obj:Button,
e:nexacro.ClickEventInfo)
{
trace(obj.text);
}
入力されたタイプの値を基準にnexacro studioでコードヒント機能をサポートします。
該当コードをJavaScriptコードに変換するときは、タイプの値を削除します。
this.Button00_onclick = function(obj,
{
trace(obj.text);
}
e)
nexacro platformスクリプト言語 | 48
オブジェクトタイプを指定しなくても、アプリケーションの実行には影響を与えません。
イベントハンドラ関数以外の関数では、オブジェクトタイプをサポートせず、アプリケーショ
ンの動作に影響を与えることがあります。
49 | nexacro platform 14 / 開発者向けガイド
5.3
Setter
ECMAScript5からSetter/Getterを使用して変数のアクセス制限を処理することができます。但し、IE
8以下のウェブブラウザでサポートできない仕様であるため、nexacro platformでは、別のSetMethod
を提供します。
5.3.1 SetMethod
たとえば、Buttonコンポーネントのtextプロパティを使用するときは、以下のように使用することができ
ます。
this.Button00.set_text("text");
trace(this.Button00.text);
以下のようにプロパティの値を直接アクセスする方法はこれ以上サポートされません。
Button00.text = "text";
ユーザーが手動で追加したオブジェクトのプロパティにアクセスする場合は、既存のようにア
クセスすることができます。
<Button myprop="333">
Button00.myprop = "333";
Button00.mytext = "text";
スタイルのプロパティにアクセスする方法もSetMethodを使用する必要があります。追加されたSetMethod
には、サブプロパティまで含まれています。既存のプロパティは、値を取得する場合にのみ使用すること
ができます。
this.Button00.style.set_color('aqua');
trace(this.Button00.style.color); // 'aqua'
nexacro platformスクリプト言語 | 50
setメソッドを呼び出す前に、スタイルプロパティ値を取得しようとすると、null値が出ること
があります。
但し、CSSコードは、既存と同じです。
Button
{
background : red;
}
ActiveX(プラグイン)やアプレットコンポーネントを使用するとき、プロパティを指定したり、
メソッドを呼び出す方法も下記のように使用します。
this.ActiveX00.setProperty("prop1", 3 );
var v = this.ActiveX00.getProperty("prop1");
this.ActiveX00.callMethod("method1", arg1, arg2 );
var v = this.ActiveX00.callMethod("method2");
5.3.2 動的なプロパティ
プロパティ値を取得することは、既存と同じですが、例外的に動的にプロパティ値が変更されたオブジェ
クトは、別のGetMethodを提供します。Systemオブジェクトのcurx、cury、screenwidth、screenheight
の4つのプロパティは追加されたメソッドを使用する必要があります。
System.getCursorX();
System.getCursorY();
System.getScreenWidth();
System.getScreenHeight();
コンポーネントタイプによって使用していないプロパティにアクセスすることができません。例えば、Calendarコンポーネントのタイプがspinではない場合は、次のプロパティにアクセスすることができません。
51 | nexacro platform 14 / 開発者向けガイド
this.Calendar.spindownbutton
this.Calendar.spinupbutton
Calendarコンポーネントでspindownbuttonプロパティは、コントロールプロパティ(Control
Property)と呼ばれ、プロパティ自体を文字列として出力すると、[object ButtonControl
]と表示されます。
nexacro platformスクリプト言語 | 52
5.4
その他の変更点
5.4.1 nexacroメソッド
ECMAScriptでサポートされていないメソッドをnexacro platform自体に追加して使用していたことを、
基準に従って変更しながら、これ以上サポートしておりません。その代わりに該当メソッドは、nexacro
メソッドとして別途提供します。
例えば、Mathオブジェクトで提供していたメソッドのうちに二つの引数をサポートするfloor、ceil、round
メソッドは、これ以上提供されません。該当メソッドを使用するには、nexacroメソッドで使用する必要
があります。
//Math.floor( v, digit );
nexacro.floor( v, digit );
//Math.ceil( v, digit );
nexacro.ceil( v, digit );
//Math.round( v, digit );
nexacro.round( v, digit );
また、JavaScriptで予約語として使用されるいくつかのオブジェクト名称が変更されました。
//new Image();
new nexacro.Image();
予約語と重複していない残りコンポーネントもTypeDefinition内のclassnameがnexacro.Buttonのような
形式に変更されました。ただし、既存のようにButtonをそのまま使用することもできます。
this.button00 = new Button();
or
this.button00 = new nexacro.Button();
プロパティやオブジェクトも予約語と衝突して一部変更されました。
Component.class→ Component.cssclass
Export.export() → Export.exportData()
53 | nexacro platform 14 / 開発者向けガイド
Buffer.delete() → Buffer.remove()
VirtualFile.delete() → VirtualFile.remove()
5.4.2 動作変更
JavaScriptでサポートしていないか、別の方法で動作するいくつかの項目が修正されました。
<> 比較演算子をサポートしません。
<> 比較演算子をこれ以上はサポートしません。他の値を比較するときは != 演算子を使用してく
ださい。
switch文内の文字列処理方法の変更
以前のバージョンでは、switch文内で、case "2"とcase 2が同じ方法で処理れていたことを、
別々の値として処理します。
正規表現 /gオプションの適用方法の変更
正規表現で /gオプションを使用せずreplaceを適用すると、一つの項目のみ変更されます。すべて
の項目を変更するためには、/gオプションを適用する必要があります。
5.4.3 オブジェクト名の生成時の制約
コンテナのメンバであるプロパティ、メソッド名と同じChildNameを作成することができません。たとえば、
フォームは、textというプロパティを持っていますが追加されたボタンコンポーネントのidをtextに指定す
ることができません。以下のような場合は、ボタンが作成されません。
<Form text="formtext">
<Layouts>
<Layout>
<Button id="text'>
DatasetのようなInvisibleオブジェクトも、Arrayのメンバーで処理されてlengthのようなプロパティをid
で指定することができません。以下のような場合、カラム(列)が生成されません。
nexacro platformスクリプト言語 | 54
<Objects>
<Dataset id="Dataset00">
<ColumnInfo>
<Column id="length" type="STRING" size="256"/>
</ColumnInfo>
第6章
Frame Tree
“3.3.2章”でフレームの用途と簡単な使用法を説明しました。この章では、フォームの相互関係をもう少し
具体的に図式化して説明します。
6.1
表記法
フレームの相互関係を図式化する際に使用する表記法を説明します。
6.1.1 ボックス
コレクション上の項目です。ここの’Item’という文字は実際の名前とは関係ありません。
6.1.2 連結線
●
1:1接続を表記します。円形の接続アイコンがある部分がChildになります。
55
Frame Tree | 56
●
1:N接続を表記します。カラスの足(Crow's foot)接続アイコンがある部分がChildになります。
6.1.3 説明
●
アイテム間のスクリプト構文は、接続線上に表記します。
●
ParentsからChildへのスクリプトは、接続線上に表記します。
●
ChildからParentsへのスクリプトは、接続線下に表記します。
上の表記は以下のような意味です。
●
parentとchildが1:Nの関係です。
●
parents.id スクリプトでchildにアクセスできます。
●
parents.child[index]スクリプトでchildにアクセスできます。
●
child.parent スクリプトでparentにアクセスできます。
6.1.4 用語の定義
用語
エレメント
説明
コンポーネントのプロパティ、メソッド、イベントを総称してコンポーネントのエレ
メントと言います。
6.1.5 共通で使用するSyntax
57 | nexacro platform 14 / 開発者向けガイド
●
'[', ']'の内には、indexまたは'id'を入れることができます。
つまり、 this.all[0]とthis.all['btn0']は全て同じコンポーネントを指すことができます。
Frame Tree | 58
6.2
フォーム
6.2.1 関係図
●
一般のフォームの場合
●
コンテナコンポーネントの場合
59 | nexacro platform 14 / 開発者向けガイド
6.2.2 スクリプトの例示画面
インデックスの順序はdtset1、btn0、btn1、cmb0、div0、div1、bind1でと仮定します。
一般的なフォームでインデックスの順序は、Datasetが最初に来て、残りコンポーネントは、
配置された順に決まって、Bindオブジェクトが最後に指定されます。
1つのフォームの中の同レベルでは、idが重複してはなりません。しかし、btn0とdiv0_btn0と
div2_btnは同レベルではないので、同じidで指定しても差し支えありません。
Frame Tree | 60
6.2.3
コンポーネント / invisibleオブジェクト / bind
のスクリプトアクセス
this.classname == "frm0"
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
61 | nexacro platform 14 / 開発者向けガイド
6.2.4 コンテナコンポーネントへのスクリプトアプローチ
フォームを接続していないcontainerコンポーネントも動的にinvisible object/ bindを持つことができます。
// div0内のdiv0_btn0へのアプローチ
this.div0.div0_btn0.name == "div0_btn0"
this.div0.all[0].name == "div0_btn0"
this.components[3].components[0].name == "div0_btn0"
// div2内のdiv2_btn0へのアプローチ
this.div0.div2.div2_btn0.name == "div2_btn0"
this.all["div0"].all["div2"].all["div2_btn0"].name == "div2_btn0"
this.components["div0"].components["div2"].components["div2_btn0"].name == "div
2_btn0"
6.2.5
フォームを乗せたコンテナコンポーネントへのスクリ
プトアプローチ
// (frm1内のスクリプトである場合) frm1にあるbtn0のアプローチ
this.name == "div1"
this.btn0.name == "btn0"
this.all["btn0"].name == "btn0"
// (frm0内のスクリプトからアプローチする場合) frm1にあるbtn0のアプローチ
this.name == "frm0"
this.div1.btn0.name == "btn0" //"frm1"を含んでいる“div1”
でのみアクセスすることができます。
6.2.6 親スクリプトの使用
Frame Tree | 62
this.div1.dtset2.parent.parent.classname == "frm0"
this.div1.dtset2.parent.name == "div1" // frm1はdiv1
に乗ることによってその特性を失います。
this.div1.dtset2.parent.classname == undefined // frm1はdiv1
に乗せながらその特性を失い、classnameが存在しなくなります。
this.div1.dtset2.parent.name == "div1"
63 | nexacro platform 14 / 開発者向けガイド
6.2.7 コンテナコンポーネントのエレメントの使用
フォームを持ったコンテナコンポーネントは、フォームのようにコンポーネント、invisibleオブジェクト、
bind(以下、エレメント)を持つことができます
フォームを持たないコンテナコンポーネントはinvisibleオブジェクトとbindを持つことができず、コンポ
ーネントのみ持つことができます。
コンテナ機能のないコンポーネント、invisibleオブジェクト、bindはエレメントを持つことができません。
コンテナコンポーネントは乗せられたフォームの特性を持つようになります。
●
●
フォームスクリプトにてthisでアクセスする場合には、フォーム内部のエレメントのみならずコンテナコ
ンポーネントのエレメントにもアクセスすることができます。
コンテナコンポーネントが属するフォームにthis.コンポーネント名でアクセスする場合に乗っているフ
ォームの全てのエレメントにアクセスすることができます。
Frame Tree | 64
6.3
アプリケーション
6.3.1 関係図
フォーム内のコンポーネント / bind / invisibleオブジドェクトは.getOwnerFrame()ですが、.
getOwnerForm()はありません。
6.3.2 スクリプトの例示画面
65 | nexacro platform 14 / 開発者向けガイド
6.3.3 applicationからフォームのスクリプトアクセス
// frm0へのアクセス(ChildFrameの場合)
application.mainframe.frame.form.name =="frm0"
application.mframe0.frame.form.name == "frm0"
application.mframe0.chdframe0.form.name == "frm0"
application.all[0].all[0].form.name == "frm0"
application.all["mframe0"].all["chdframe0"].form.name == "frm0"
this.mainframe.frame.form.name == "frm0"
6.3.4 formからapplicationのスクリプトアクセス
// frm0からapplicationにアクセス(ChildFrameの場合)
this.parent.name == "chdframe0"
this.parent.parent.name == "mframe0"
this.getOwnerFrame().getOwnerFrame().name == "mframe0"
this.getOwnerFrame().getOwnerFrame().parent.mainframe.name == "mframe0"
第7章
スタイル(CSS)とテーマの管理
スタイル(CSS: Cascading Style Sheets)とテーマは、nexacro platformの画面を構成する画面要素をデ
ザインする機能です。
スタイルとテーマを適用することができる画面要素には、コンポーネント、画面フォーム、フレーム、
タイトルバー、ステータスバー、スクロールバーなどがあります。
7.1
スタイル / テーマの概要
nexacro platformでのスタイルとテーマとは、画面上に出力されるUI要素のデザインを定義することを言
います。ボタンを例にあげると、透明度、フォント、陰影、ぼかし、斜体などの効果をボタンコンポーネ
ントに与えることを意味します。
7.1.1 スタイルの定義及び適用
スタイルはコンポーネント毎に定義します。
それぞれのコンポーネントにはスタイルの適用が可能なプロパティがあり、該当プロパティのスタイル値
を設定することによってスタイルを定義します。
Button
{
color : "red";
}
Static
66
67 | nexacro platform 14 / 開発者向けガイド
{
color : "blue";
}
スタイルの定義はセレクターを利用します。ここでは、CSSについての事前知識があると仮定して説明し
ます。
nexacro platformがサポートするセレクターは以下の通りです。
デフォルトセレクタ
Type Selector, Class Selector, ID Selector, Child Selector
その他
Grouping, Pseudo-Classes
●
Type Selector:“ボタン”のようにコンポーネント名を指定します。
Syntax
Name (Element)
例
Button {color : green;}
意味
全てのボタンの色を緑色と定義します。
●
クラスセレクタ(Class Selector) : 特定のクラスに指定された項目のスタイルを適用します。
<Button id="Button00" text="Button00" left="50" top="20" width="100" height
="40"
cssclass="BlueButton"/>
Syntax
.(Period)
例
.BlueButton {color : blue;}
意味
BlueButtonに指定されたクラスに対してblueカラーを適用します
スタイル(CSS)とテーマの管理 | 68
以下のようにコンポーネントごとにクラスセレクタを指定することができます。
Button.BlueButton {color : blue;}
69 | nexacro platform 14 / 開発者向けガイド
●
ID Selector:“Button00”のようにコンポーネントのIDを指定します。
<Button id="Button01" text="Button00" left="50" top="20" width="100" height
="40"/>
Syntax
#
例
Button#Button00 {color : yellow;}
意味
全てのボタンの中でButton00というIDを持つボタンの色を黄色と定義します。
●
Child Selector:全てのコンポーネントの下位を指定します。
Syntax
>
例
Div>Button { color : blue; }
意味
全てのDiv内のボタンの色を青色と定義します。
チャイルドセレクタは、最上位のレイアウトに属しているコンポーネントのみを使用すること
ができます。例えば、Div内に含まれているButtonのスタイルをコンポーネントレベルのchild
セレクタに指定できないことです。必要な場合には、IDセレクタを使用する必要があります。
Form>Button (O)
Form>Div>Button (X)
Form>#div00>#button00 (O)
●
Pseudo-classes : セレクタとして指定できないステータス情報を指定します。
コンポーネントによって選択することができるステータス情報は異なります。
○
UI element states pseudo-classes
enabled(default), disabled, focused, mouseover, pushed, selected, readonly
○
Structural pseudo-classes
root, nth-child(), nth-last-child(), first-child, last-child, only-child, empty
Syntax
:
例
Button:focused {color : black;}
意味
全てのボタンがfocusとなれば、該当するボタンの色を黒色と定義します。
スタイル(CSS)とテーマの管理 | 70
●
Grouping:同じ値(declarations)を持ついくつかのセレクターをコンポーネント名で指定します。
Syntax
,(Comma)
例
Button, Combo, Calendar {font : Arial,9;}
意味
全てのボタン、コンボ、カレンダーのフォントを「Arial 9」で定義します。
71 | nexacro platform 14 / 開発者向けガイド
7.1.2 テーマの定義
テーマは、スタイルとイメージを組み合わせた形態です。
1.
テーマで使用するスタイルを定義します。
2.
スタイルで使用しているイメージを含みます。
応用プログラムは1つのテーマのみを使用することができます。
nexacro platformは、default、black、gray、blueの4種類のテーマファイルを提供します。
該当するテーマは、nexacro studioのテーマとスタイルエディタ画面により必要な部分を修正することが
できます。
Themeはnexacro platformで必ず必要な基本情報を持っているため、使用者は必要な部分のみを選定して
追加・修正作業をしなければなりません。
基本情報が削除されたり変更する場合には、それにより画面出力に問題が生じることがあります。例えば、
“#combolist”のようなエディット形式のコンポーネント(Edit, MaskEdit, TextAreaなど)などで発生しま
すが、ポップアップメニューの設定がない場合にはポップアップメニューが表示されないことがあります。
従って、テーマは新しく生成するよりもなるべく基本として提供されるテーマを修正して他の名前で保存
したり、コピーして使用するようにします。
スタイル(CSS)とテーマの管理 | 72
7.1.3 スタイル/テーマの登録及び適用
1.
ADLに属するテーマ内のスタイル
2.
ADLに属するスタイル
3.
FDLに属するスタイル
4.
FDL内のコンポーネントのスタイル
コンポーネントにスタイルが適用される順序は 1 > 2 > 3 > 4 です。従って、重複したスタイル値を定義
した場合には、最後のスタイルである 4番のスタイルが画面に適用・出力されます。
73 | nexacro platform 14 / 開発者向けガイド
7.1.4 スタイルとテーマの適用対象
スタイルは1つのフォームに宣言して使用することができ、グローバルに使用するためにはプロジェクト(
ADL)に登録するかテーマに含めて使用することができます。
スタイルの適用対象は単純なコンポーネントだけでなく、多様な画面要素に適用されます。以下はその適
用対象を表で表したものです。
以下はスタイルの適用が可能な対象です。
種類
適用対象
コンポーネント
Button, Calendar, CheckBox, Combo, Div, Edit, Grid, GroupBox, ImageViewer
(Visibleオブジェクト)
ListBox, MaskEdit, Menu, Progressbar, Radio, Spin, Static, Tab, TextArea
画面フレーム
Form, MainFrame, ChildFrame, FrameSet, HFrameSet, VFrameSet, TileFrameSet
TitleBarControl, StatusBarControl
その他
ScrollBar
7.1.5 スタイルの制約事項
下記の制約事項を無視して、ユーザーが任意に CSSコードを直接変更する場合には、正確な
動作が保証できません。
一部のスタイルプロパティを適用したときに nexacro studioのデザインモードで表示される
のと、実際のアプリケーションを実行したときに表示されるのが異なる場合もあります。
CSSセレクタ(Selector)のデプスは、最大4つまでサポートします。
CSSセレクタのデプスは、4つ以下に指定する必要があります。
Form>#id>#id>#id>#id ------ (O)
Form>#id>#id>#id>#id>#id -- (X)
スタイル(CSS)とテーマの管理 | 74
タイプセレクタ(Type Selector)は、1段階のセレクタのみ指定する
ことができます。
タイプセレクタは、1段階のセレクタのみ指定する必要があります。2段階以降の CSSセレクタは、タイプ
セレクタ以外の他のセレクタを使用する必要があります。
Form>Div>Button -------- (X)
Form>#div00>#button00 -- (O)
Div>#button00 ---------- (O)
EditControl ------------ (O)
nexacro studioの CSSエディタでは、2段階のセレクタに子セレクタを追加する機能を制限し
ています。ただし、エディタの機能を使用せずに直接 CSSコードを変更する場合には、2段階
のセレクタに子セレクタを追加する機能を制限していないため、開発者が制約事項を参考する
必要があります。
クラスセレクタ(Class Selector)は、1つのクラスのみを指定するこ
とができます。
クラスセレクタは、1つのクラスのみを指定することができます。
Button.set_cssclass("TestClass"); ------------- (O)
Button.set_cssclass("TestClass,TestClass2"); -- (X)
複数のクラスセレクタを指定しても、エラーは発生しません。
上記のソースの場合、「"TestClass,TestClass2"」が一つのクラス名として認識されてクラス
セレクタが正常に処理されません。
75 | nexacro platform 14 / 開発者向けガイド
7.2
スタイルの適用
スタイルの概要については前で簡単に言及しました。
これからスタイルの作成方法、適用、活用方法について説明します。
7.2.1 スタイルの生成
ADLでテーマを活用しない場合やフォームにスタイルを与えたい時には、新しく生成するか以前に作成し
たスタイルファイルを登録します。
ステップ1:新しいフォームを作成します。
New Formでフォームを作成し、フォーム名をStyleFormにします。
スタイル(CSS)とテーマの管理 | 76
ステップ2:作成されたフォームに新しいスタイルファイルを生成します。
作成されたStyleFormにInsert Styleで1つのスタイルを生成し、スタイル名FormStyle.cssで追加
します。フォームが開かれているとスタイルを生成することができません。
77 | nexacro platform 14 / 開発者向けガイド
メインメニュー(File > New > File > Style Sheet)で新しいCSSを作成Formに含めたいならば'Insert to
Form"の項目をチェックして、追加するFormの名前を指定する必要があります。
ステップ3:ADLにスタイルファイルを生成します。
Insert ADL ItemによりADLに1つのスタイルを生成し、スタイル名ADLStyle.cssで追加します。
スタイル(CSS)とテーマの管理 | 78
ADLに追加されたスタイルは、プロジェクトをRefreshすることで適用されます。スタイルを
追加して、プロジェクトのコンテキストメニューからRefreshを選択してください。
7.2.2 スタイルの編集
テーマ内のスタイル、ADLのスタイル、フォームのスタイルの編集方法は全て同じです。
スタイルの編集は、スタイルエディタにより行うことができます。
スタイルエディタはセレクターリストをツリー形式で提供して追加/削除ができるようにし、ソースコード
画面で内容の編集ができるようにしています。
スタイル編集機ではプロパティ画面を提供し、便利に入力と修正ができます。
この時にプロパティ画面に入力された内容はソースコード画面に即時に反映され、確認することができます。
ステップ1:スタイルエディタによりセレクタを登録します。
生成したADLStyle.cssを、編集画面によりボタンセレクタ(タイプセレクタ、Pseudoセレクタ、
クラスセレクタ)に登録します。まず、Type SelectorとPseudo Selector(mouseover, focused
)を登録します。
79 | nexacro platform 14 / 開発者向けガイド
スタイル(CSS)とテーマの管理 | 80
クラスセレクターを登録します。
生成されたソースコードは以下の通りです。
Button
{
...
}
Button:focused
{
...
}
Button:mouseover
{
...
}
.Blue
{
}
81 | nexacro platform 14 / 開発者向けガイド
ステップ2:スタイルエディタにより登録したセレクターの内容を作成します。
生成したボタンセレクター(タイプセレクター、Pseudoセレクター、クラスセレクター)の情報を作
成します。
編集するSelectorを選択して、スクリプトソースを直接編集するか、プロパティ・ウィンドウで、該当する
項目を変更することができます。スクリプトソースを以下のように変更します。
Button
{
background: lightskyblue;
border: 1px solid red;
color: yellow;
font: Arial,9,bold ;
}
Button:focused
{
background: lightskyblue;
border: 1px solid yellow;
color: black;
font: Arial,9,underline;
}
Button:mouseover
{
background: lightskyblue;
スタイル(CSS)とテーマの管理 | 82
border: 1px solid black;
color: red;
font: Arial,9;
}
.Blue
{
background: lime;
border: 1px solid blue;
color: blue;
font:Arial,10,bold;
}
83 | nexacro platform 14 / 開発者向けガイド
7.2.3 スタイルの適用
フォームにボタンを生成し、ADLにあるスタイルとフォームにあるスタイルにより デザインが反映される
ようにします。
ステップ1:新しいフォームを作成します。
New Formでフォームを作成し、、フォーム名をStyleFormにします。(“スタイルの生成”段階で作
成したフォームを活用します。)
ステップ2:ボタンを生成しスタイルの適用を確認します。
StyleFormにボタンを生成し、ADLに作成されたスタイルに合わせてスタイルが適用されるのかを
確認します。
スタイル(CSS)とテーマの管理 | 84
ステップ3:フォームを実行し、ボタンのPseudoセレクターの適用を確認します。
ADLStyleに設定したPseudoセレクター(mouseover, focused)のフォームに適用されるものをQuickViewにより実行し確認します。
85 | nexacro platform 14 / 開発者向けガイド
ステップ4:前でフォームに生成したフォームスタイルを編集し、適用を確認します。
フォームスタイルに作成されたPseudoセレクター中のfocused情報をADLStyleと異なった設定にし、
異なって適用されるのをQuickViewで実行して確認します。
Button:focused
{
background: lightskyblue;
border: 4px solid green;
color: black;
font: Arial,9,underline;
}
スタイル(CSS)とテーマの管理 | 86
7.2.4 cssclassの適用
同一フォームで同一コンポーネントに互いに異なるスタイルを適用させるために、登録されたクラスセレ
クターを使用して異なった表現をすることができます。
ステップ1:ADLStyleに生成したクラスセレクターを編集し適用を確認します。
ADLStyleにクラスセレクター(Blue)を編集します。
.Blue
{
background: lime;
border: 1px solid blue;
color: blue;
font:Arial,10,bold;
}
ステップ2:フォームのボタンにクラスプロパティを活用してスタイルの適用を確認します。
フォームのクラスプロパティにADLStyleに作成されたクラスセレクターであるBlueを設定し、スタイルの
適用を確認します。
87 | nexacro platform 14 / 開発者向けガイド
7.3
テーマの適用
テーマの概要については前で簡単に言及しました。
これからテーマの作成方法、適用、活用方法について説明します。
7.3.1 テーマの生成
テーマの生成方法は、Insert Theme(Insert ADL Item)により事前に作成したテーマを選択して登録する
ことができます。
テーマエディタはイメージとスタイルファイルを追加・削除することができ、スタイルの場合にはスタイ
ルエディタによる管理ができます。
スタイルが変更される場合には、必ずテーマも保存しなければなりません。
ステップ1 : 新しいテーマを作成します。
メニュー(File > New > File > XTheme)でexampleというタイトルで新しいテーマを作成します。
新しく作成されたテーマは、デフォルトテーマを基本にコピーされます。
ステップ2:既に作成されたテーマを指定します。
ADLにInsert ADL Itemメニューからテーマを指定して追加します。
スタイル(CSS)とテーマの管理 | 88
7.3.2 テーマの編集
テーマファイルは、イメージとスタイルが互いに分かれているため別途に編集します。
フォルダーの生成、スタイルの生成、イメージとスタイルの追加/削除は、テーマエディタのTheme Treeview下段のボタンを活用します。
1段階:Theme Treeviewの内容を確認しスタイルファイルを編集します。
テーマファイルであるexample.xthemeを開き、Theme Treeviewによりイメージリストとスタイ
ルファイル(theme.css)を確認し、スタイルエディタでスタイルファイルを編集します。
89 | nexacro platform 14 / 開発者向けガイド
2段階:テーマ編集機によりイメージ、フォルダー、スタイルの生成/追加/削除作業を行います。
Theme Treeview下段のボタンによりテーマの内容を編集します。
メニュー
機能
New Folder
テーマ内に新しいフォルダーを生成
New CSS
テーマ内に新しいスタイルファイルを生成
Insert
イメージまたはスタイルファイルを追加
Delete
Treeviewで選択されたファイルを削除
スタイル(CSS)とテーマの管理 | 90
7.3.3 テーマの適用
基本で提供されるデフォルトテーマのイメージとスタイルが反映される様子と、Set Activeに変更しなが
らコンポーネントに反映され内容を確認することができます。
作成はコンボコンポーネントを基準とします。
1段階:デフォルトテーマのコンボスタイルを確認します。
スタイルフォームを開き、変更前のコンボを生成してスタイルを確認します。
91 | nexacro platform 14 / 開発者向けガイド
2段階:Active Themeをexample Themeに変更し、変化を確認します。
新しく生成したexample テーマをSet Active Themeで有効にし、スタイルフォームのスタイルの
変化を確認します。
スタイル(CSS)とテーマの管理 | 92
7.3.4 Deploy Theme
従来の Themeは、Imageと Styleが結合されたため、そのサイズが大きい欠点がありました。Deploy
Themeとは、従来の xthemeから Imageを分離させて、Themeのサイズを減らすために作った機能です。
Imageは、選択して分離することができ、このように分離された xthemeファイルを“Deploy Theme” 、
分離されたImageを"Extern File"といいます。
●
Extern Fileとして分離する Imageを選択
チェックボックスを使用して、Extern Fileに分離するImageを選択することができます。
○
○
○
○
チェックボックスで UnCheck状態にある Imageのみ、extern fileとして分離され、Check状態の
Imageは、従来方式のように Themeに含まれます。また、UnCheck状態にある Imageそれぞれを
Extern Itemといいます。
default.xthemeのようにデフォルトで提供されるThemeはチェックボックスが表示されません。
つまり、デフォルト組み込みのThemeはImageを分離することができません。
スペースバーを使用してチェックボックスを選択することもできます。Multi Selectも可能であり、
選択した最初のアイテムのステータスに基づいて変更されます。
マウス右ボタンクリック後、ポップアップメニューを使用してチェックボックスを選択すること
もできます。Multi Selectも可能です。Set Externメニューが UnCheck状態で、Unset Extern
メニューが Check状態です。
93 | nexacro platform 14 / 開発者向けガイド
●
保存
Deploy Themeの保存は、従来の保存方法と同じように保存ボタンを押すことです。 保存時に Deploy
Themeと Extern Fileの保存内容及びパスは次のようです。
区分
Deploy Theme
保存内容
保存パス
Extern Fileを除いた
従来の themeパス及びファイル名と同一
Theme
例) 従来のthemeをC:\a.xthemeというと
C:\a.xthemeに保存される。
Extern File
分離された
従来の themeパス/images/分離した Image
Image
(ファイル名は同一)
例) 従来の themeをC:\a.xtheme、分離するImageがb.pngというと
C:\a\images\b.pngに保存される。
●
Deploy Themeの表示
Extern Itemがある状態に保存すると、Project Explorerに Deploy Themeが表示され、Extern Item
を削除してから保存すると、Deploy Theme表示も表示されません。
第8章
Position
nexacro platformでは、フォームや各のコンポーネントの位置をleft、top、right、bottom、width、heightのプロパティ値を指定して指定することができます。各プロパティの値は、ピクセル単位(px)またはパ
ーセント(%)のいずれかを選択して使用できています。nexacro studioでは、ポジション·エディター、
ルーラー、DotGrid(レイアウトの配置のために画面の背景に表示されるポイント)、ガイドラインなど、
レイアウトの配置をサポートする機能を提供します。
8.1
座標系説明
nexacro platformで使用する座標系は、下の図のようにleft、right、width、top、bottom、height
のプロパティ値のうち4つのプロパティ値を選択して使用できます。
<Button id="Button00" text="Button00" width="120" height="50" left="20" top
="20"/>
94
95 | nexacro platform 14 / 開発者向けガイド
<Button id="Button00" text="Button00" left="20" top="20" right="260" bottom
="230"/>
<Button id="Button00" text="Button00" right="260" bottom="230" width="120"
height="50"/>
Position | 96
8.2
コンポーネントの Position設定
コンポーネントの位置を設定するときは、left、right、width、top、bottom、heightのプロパティ値のう
ちに4つの値を選択して使用します。フォームは、位置設定なく、width、heightの2つのプロパティ値の
み設定します。
プロパティ・ウィンドウで、Position関連のプロパティの単位であるピクセル(px)とパーセント(%)を簡単
に変更することができます。プロパティ単位が変更されると、そのプロパティ値が自動的に変更されます。
フォームはパーセント単位を指定することができず、ピクセルのみ使用してサイズを指定します。
スクリプトで位置を指定するときは、以下のようにsetterメソッドを使用します。単位を指定することが
でき、指定された単位が存在しない場合、ピクセル単位値として処理されます。
this.Button.set_left(10);
this.Button.set_left("10px");
this.Button.set_left("30%");
97 | nexacro platform 14 / 開発者向けガイド
8.3
フォームデザイン
8.3.1 Tracker
マウスでコンポーネントを選択したとき、コンポーネントの固定された辺によってトラッカーが赤い色で
表示されます。トラッカーを見れば、該当コンポーネントのプロパティ値がどのように指定されているか
を知ることができます。
トラッカー
プロパティ値
left="20" top="20" width="120" height="50"
left="20" top="90" right="260" bottom="160"
width="120" height="50" right="260" bottom="90"
Position | 98
8.3.2 Ruler / Dot Grid
Positionは、パーセント入力をサポートするため、Form Design上で簡単に確認することができるように
パーセント単位で情報を表示する機能が追加されました。
ルーラのポップアップメニューで、Show Pixel Ruler / Show Percent Rulerを選択した場合、該当単位
でルーラと Dot Gridの表示方法が変更されます。
99 | nexacro platform 14 / 開発者向けガイド
Position | 100
8.3.3 Component Resize Info
コンポーネントを1つだけ選択してサイズを変更するときは、サイズ情報を表示します。このとき表記され
るサイズ単位は、ルーラーの表示単位によって、該当する単位で表示します。
もし、ルーラ単位がパーセントで表示中ならば Resize Infoもパーセント単位で表示されます。
101 | nexacro platform 14 / 開発者向けガイド
8.3.4 Position Editor
ユーザーが簡単にPosition情報を設定できるように、別のエディタを提供しています。ポジションエディ
タはコンポーネントを選択したときに表示されるミニツールバーで実行できます。
ミニツールバーは、よく使用されるスタイルプロパティメニューをすぐに変更できる機能を提
供します。
ポジションエディタで修正された値は、該当コンポーネントのleft、top、right、bottom、width、height
プロパティ値に反映されます。
Position | 102
8.4
Position関連注意事項
レイアウトマネージャ機能を使って追加のレイアウトを使用する場合は、left、top、right、bottom
プロパティだけで座標値を指定すると、追加されたレイアウトのサイズによってコンポーネントが表示さ
れない場合も発生します。
たとえば、以下のようにleft、top、right、bottomプロパティを指定してボタンコンポーネントの位置を
指定すると、Defaultレイアウトでは、正常にコンポーネントが表示されます。
103 | nexacro platform 14 / 開発者向けガイド
ただし、追加レイアウトでは、right、bottomプロパティに指定された値がフォームのサイズを超えるため、
正常にボタンが表示されません。コンポーネントのleft、topの位置が固定された状態で、フォームよりも
大きいrigth、bottomプロパティ値が適用されるため、画面から消えたように表示されます。
第9章
MLM
開発されたアプリケーションを使用する環境が多様化されて、各デバイスに最適化されたデザインと機能
を提供しなければならない課題が発生しています。要求されるデバイスの数どおりアプリケーションを開
発する場合、その費用と時間を従来のシステムで手におえません。nexacro platformでは、このようなニ
ーズによって、1つのソースで様々な状況に合うデザインと機能を実装できるマルチレイアウトマネージャ機
能をサポートします。
9.1
プロジェクト生成及び修正
9.1.1 プロジェクト生成
‘iPhone’, ‘iPad’, ‘GalaxyTab’の Layout情報を持つプロジェクトを生成する方法を例として説明します。
nexacro studioで、File > New > Project メニューを呼出す場合、以下のようにプロジェクトを生成する
ウィザードが表示され、各ステップことに情報を入力して生成することができます。
104
105 | nexacro platform 14 / 開発者向けガイド
New Project Wizard – ステップ1
生成されるプロジェクトの Frame Templateと生成されるパス及びプロジェクト名を入力するステ
ップです。プロジェクト名は、必ず入力する必要がある必須項目であり、生成されるパスに同じプ
ロジェクト名が存在している場合は、生成することができません。
New Project Wizard – ステップ2
TypeDefinition情報を設定するステップです。
MLM | 106
New Project Wizard – ステップ3
プロジェクトで使用するスクリーン情報を入力するステップです。I-Phone, I-Pad, GalaxyTab
を開発する目的のため、各項目を入力し、該当スクリーンで使用するテーマを指定します。‘Finish
’をクリックして‘I-Phone’,‘I-Pad’,‘GalaxyTab’のスクリーン情報を持つプロジェクトを生成します。
Screenプロパティ
説明
name
Screen名(一意識別子)
type
使用装備タイプ
- 'desktop', 'phone', 'tablet'の中で複数の項目を選択することができます。
screenwidth
sizeorientation
Screen幅(入力制限:0~65536)
screenwidthプロパティを処理する方向を指定します。
- 'landscape', 'portrait'の中でいずれかの項目を選択します。
- デフォルト値:'landscape' (typeプロパティに'desktop'または'tablet'項目が含ま
れた場合)
- デフォルト値:'portrait' (typeプロパティが'phone'の場合)
autozoom
自動拡大、縮小機能を使用するかどうかを指定します。
- true、falseのいずれかの項目を選択します。(デフォルト値:false)
- typeプロパティ値が'desktop'の場合には、autozoom設定は適用しません。
zoommin
autozoom機能使用時の最小値情報を指定します。
107 | nexacro platform 14 / 開発者向けガイド
Screenプロパティ
説明
- 負の指定時に無制限、デフォルト値は-1
zoommax
autozoom機能使用時の最大値情報を指定します。
- 負の指定時に無制限、デフォルト値は-1
systemos
Screenで使用するOS情報
- 'windows', 'android', 'ios'の複数の項目を選択することができます。
- デフォルトはすべてのOSのプロパティ値が含まれます。
systemlocale
Screenで使用するLocale情報
- 'af_ZA' … "zh_TW"の中で複数の項目を選択することができます。
- デフォルトはすべてのLocaleのプロパティ値が含まれます。
formlayoutwidth
Screenで使用するForm Layoutの幅を指定します。
formlayoutheight
Screenで使用するForm Layoutの高さを指定します。
MLM | 108
9.1.2 スクリーン情報の修正
‘New Project Wizard’で入力したスクリーン情報を修正したり、新たなスクリーン情報を入力できるような
Editor機能が追加されました。
‘Project Explorer’で、ADL Itemから提供されるポップアップメニューを使用して新たなスクリーン情報
を追加したり、ADL Itemのサブ情報に表示される‘ScreenInfo’などを選択して編集することができます。
109 | nexacro platform 14 / 開発者向けガイド
9.2
フォーム生成
‘I-Phone’, ‘I-Pad’, ‘GalaxyTab’ の3か所で使用するFDLファイルの作成方法を例として説明します。 File >
New > Item > Form メニューを選択する場合、以下のように FDLを生成するウィザードが表示され、
各ステップことに情報を入力して生成することができます。
New Form Wizard – ステップ1
生成されるフォームのパスと名を入力するステップです。フォーム名は、 必ず入力する必要がある
必須項目であり、生成されるパスに同じフォーム名が存在している場合は、生成することができま
せん。
MLM | 110
New Form Wizard – ステップ2
生成されるフォームの‘Default’Layout Formのサイズを入力するステップです。初期入力値はオプ
ションで変更することができます。
New Form Wizard – Step3
生成されるフォームでコンポーネントの生成時に適用するPosition単位を指定するステップです。
111 | nexacro platform 14 / 開発者向けガイド
New Form Wizard – ステップ4
生成されるフォームでデザインする Layout情報を入力するステップです。スクリーンの種類別、横、
縦サイズに合わせた Layout情報を設定します。
テンプレートボタンを押すと、下の図のようなScreen Templateダイアログが表示され、必要なタイプの
情報を選択し、OKボタンを押すと、選択したScreenの情報がNew Form Wizardに適用されます。
MLM | 112
生成されたフォームに関する詳細なオプションは、nexacro studioガイドを参照してください。
113 | nexacro platform 14 / 開発者向けガイド
9.3
InitValue
MLMを適用したアプリケーションが特定の値を持った状態で起動する場合があります。たとえば、各レイ
アウトごとに異なるデザインプロパティを持つ場合、レイアウトごとに異なるプロパティ値を指定する必
要があります。
ただし、ユーザーが入力したり、変更可能なプロパティは、レイアウトが変わるとしても入力されたり、
修正された値が最初に設定した値に変更されてはいけません。これらの項目にプロパティ値を直接指定せ
ずにInitValueを宣言しておけば、最初にアプリケーションを呼び出すときにのみ、該当値を使用し、
レイアウトの変更するにかかわらず、修正された値を保持できます。
●
●
●
●
nexacro studioのプロパティ・ウィンドウにInit Infoという項目が追加されました。必要なときに下の
図のようにInitValueを適用することができます。修正された値は、xfdlファイルに<InitValue>タグ
に追加されます。
InitValueで指定された値は、フォームがロードされる前に適用され、プロパティ値は、フォームがロ
ードされながら適用されます。InitValueとプロパティ値を一緒に指定する場合は、プロパティ値がInitValueを上書きします。
レイアウトによって、InitValueを別々に指定することはできません。
コンポーネントのプロパティ値がランダムに変更されていない状態(Default Value)であるときは、
レイアウトの変更がプロパティ値に影響を与えません。
MLM | 114
9.4
●
●
●
実行
Quick Viewは、現在活性化された Layout Tabを基準に表示するようになっています。
Launch Projectは、Standard Toolbarから選択したスクリーンの情報を基準に 表示するようになっ
ています。
スクリーンの情報を入力しないか、ADLにないスクリーンの場合、 Active ADLのテーマを適用して表
示するようになっています。
115 | nexacro platform 14 / 開発者向けガイド
9.5
XML追加 /変更事項
9.5.1 XADL
プロジェクト作成時またはScreenInfo Editで生成される情報は、XADLファイルに保存されます。
<?xml version="1.0" encoding="utf-8"?>
<ADL version="1.2">
<TypeDefinition url="default_typedef.xml"/>
<GlobalVariables url="globalvars.xml"/>
<Application id="TEST2">
<Layout>
...
</Layout>
<ScreenInfo>
<Screen name="iphone" type="phone" screenwidth="1280"
sizeorientation="landscape" autozoom="false"
zoommin="100%" zoommax="" systemos=""
systemlocale="" formlayoutwidth=""
formlayoutheight="" themeid="default.xtheme"/>
</ScreenInfo>
</Application>
</ADL>
9.5.2 XFDL
フォームの Layout情報及びコンポーネントのプロパティ値は、XFDLに保存されます。
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
<TypeDefinition url="..\default_typedef.xml"/>
<Form id="LayoutForm">
<Layouts>
<Layout width="1024" height="768"/>
MLM | 116
<Layout name="iPad_P" screenid="iPad" width="768" height="1024"/>
<Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
</Layouts>
</Form>
</FDL>
‘Default’タブで、フォームのプロパティが変更された場合は <Form>タグに保存されます。
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
<TypeDefinition url="..\default_typedef.xml"/>
<Form id="LayoutForm" style="background:red;">
<Layouts>
<Layout width="1024" height="768"/>
<Layout name="iPad_P" screenid="iPad" width="768" height="1024"/>
<Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
</Layouts>
</Form>
</FDL>
追加された Layoutタブで、フォームのプロパティが変更された場合は、該当する <Layout>タグに保存
されます。
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
<TypeDefinition url="..\default_typedef.xml"/>
<Form id="LayoutForm" style="background:red;">
<Layouts>
<Layout width="1024" height="768"/>
<Layout name="iPad_P" screenid="iPad" width="768" height="1024"
style="background:yellow;"/>
<Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
</Layouts>
</Form>
</FDL>
追加された Layoutタブでコンポーネントのプロパティが変更された場合、該当する<Layout>タグに下位
に変更されたプロパティ値のみ保存されます。
117 | nexacro platform 14 / 開発者向けガイド
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
<TypeDefinition url="..\default_typedef.xml"/>
<Form id="LayoutForm">
<Layouts>
<Layout width="1024" height="768">
<Button id="Button00" text="Button00"
left="20" top="20" width="120" height="50"/>
</Layout>
<Layout name="iPad_P" screenid="iPad" width="768" height="1024">
<Button id="Button00" style="color:blue;"/>
</Layout>
<Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
</Layouts>
</Form>
</FDL>
InitValueが追加されると<InitValue>タグとして保存されます。フォームのInitValueを指定する場合には、
InitValueタグ自体のプロパティとして処理され、各コンポーネントのInitValueは<InitValue>タグ内に変
更されたプロパティ値が処理されます。
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
<TypeDefinition url="..\default_typedef.xml"/>
<Form id="LayoutForm">
<Layouts>
</Layouts>
<InitValue>
<Button id="Button00" style="color:blue;"/>
</InitValue>
</Form>
</FDL>
サブレイアウトはフォームを構成するXMLと基本構造は同じです。対象コンポーネントの下位にdefault
レイアウトがあり、その下位にサブレイアウトが作成されます。各サブレイアウトで修正されたプロパテ
ィは、<Layout>タグの下位に変更されたプロパティ値のみが保存されます。
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
<TypeDefinition url="..\default_typedef.xml"/>
MLM | 118
<Form id="LayoutForm">
<Layouts>
<Layout width="1024" height="768">
<Div id="Div00" taborder="0" left="20" top="20" width="300" height
="300">
<Layouts>
<Layout width="300" height="300">
<Button id="Button00" left="17" top="67" width="120" height
="50"/>
</Layout>
<Layout name="SubLayout00" width="200" height="200">
<Button id="Button00" style="color:blue;"/>
</Layout>
</Layouts>
</Div>
</Layout>
<Layout name="iPad_P" screenid="iPad" width="768" height="1024"/>
<Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
</Layouts>
</Form>
</FDL>
第III部
拡張
119
第10章
プロトコルアダプタ
nexacro platformで提供されるデータ処理は、データ自体を変換して処理しません。基本的なプロトコル
であるHTTPを使用して、要求と応答を処理します。但し、ユーザー環境によってデータを暗号化して通信
したり、必要な形式に変換して処理する過程を必要とすることがあります。
プロトコル·アダプタは、他のデータ構造を必要とする関係を相互に接続して希望する形で動作するように
作成するツールです。簡単な設定だけで、必要な機能を簡単に作成することができます。
10.1
プロトコルアダプタ
プロトコル、モジュール、サービス項目は、プロジェクトフォルダ内のdefault_typedef.xmlファイルを直
接登録するか、プロジェクトナビゲーションウィンドウでTypeDefinition項目をダブルクリックして開か
れる[Edit TypeDefinition]ウィンドウで、該当する項目を追加することができます。
10.1.1
モジュール(Module)登録
プロジェクトフォルダ内のdefault_typedef.xmlファイルを直接変更したり、[Edit TypeDefinition >
Modules]ウィンドウで、該当する項目を追加します。
登録するモジュールとスクリプトは、nexacro studioでBase Lib Pathに指定されたパスの下の[
component]フォルダのサブパスにファイルがある必要があります。
デフォルト設定は、nexacro platformのインストールパスの下のnexacro14libフォルダです。
Base Lib Pathは、[Tools >Options > Environment > Build > Base Lib Path]で別のパス
に変更することができます。
120
121 | nexacro platform 14 / 開発者向けガイド
プロトコルアダプタ | 122
モジュールは、下記のような形でJSONファイルを作成します。「scripts」項目に指定されたJavaScript
のパスは、[Base Lib Path > component]フォルダの下の該当フォルダとスクリプトファイルがある必要
があります。
{
"name": "Xecure",
"version": "14.0.0.0",
"description": "nexacro platform XecureAdp Protocol Library",
"license": "",
"scripts": [
"Xecure/Xecure.js",
]
}
//@ sourceURL=Xecure.json
<Module url="Xecure.json"/>
123 | nexacro platform 14 / 開発者向けガイド
10.1.2
プロトコル(Protocol)登録
プロジェクトフォルダ内のdefault_typedef.xmlファイルを直接変更したり、[Edit TypeDefinition>
Objects]ウィンドウで該当する項目を追加します。
<Component type="Protocol" id="Xecure" classname="nexacro.XecureAdp"/>
プロトコルに登録されたクラスに定義されたインターフェイスを該当時点に合わせて呼び出す方式で動作し
ます。フレームワーク内部で動作する方式は下記のとおりです。
1.
nexacro.ProtocolAdpを継承したクラスとして作成します。
登録されたプロトコルが最初に呼び出された時点でProtocolAdptorオブジェクトを生成します。
該当オブジェクトは、アプリケーションが終了する前まで、通信が呼び出される時点で使用されます。
var _pXecureAdp = nexacro._createPrototype(nexacro.ProtocolAdp);
nexacro.XecureAdp.prototype = _pXecureAdp;
2.
オブジェクトが生成される時点で、initialize関数が呼び出されます。
_pXecureAdp.initialize = function ()
{
trace("_pXecureAdp.initialize");
プロトコルアダプタ | 124
};
3.
オブジェクトが削除される時点で、finalize関数が呼び出されます。
アプリケーションが閉じられる時点で呼び出されます。
_pXecureAdp.finalize = function ()
{
trace("_pXecureAdp.finalize");
};
4. プロトコルアダプタのバージョン情報を提供します。この関数がない場合、「1.0」として認識します。
getHTTPHeader()関数を使用するためには、必ずこの関数が必要であり、「1.1」以上の値を持つ必
要があります。version()関数が存在しないか、値が「1.1」よりも小さい場合、getHTTPHeader()関
数を処理しません。
_pXecureHttp.version = function ()
{
return "1.1";
};
5.
HTTP通信のヘッダ情報を提供します。_httpheadersは、HTTPヘッダ情報を含む配列オブジェクト
です。
_pXecureHttp.getHTTPHeader = function ()
{
return this._httpheaders;
};
6.
内部で実際の通信が呼び出される前にencrypt関数が呼び出されます。
通信が発生する前に、送信するデータを暗号化したり、好きな形に変換します。
_pXecureAdp.encrypt= function(url, data)
{
trace("encrypt url=" + url + ";data=" + data);
return data;
};
125 | nexacro platform 14 / 開発者向けガイド
encrypt関数は、要求方式(Request Method)がPOST方式である場合にのみ呼び出されます。
transactionやloadメソッドを使用するとき、GlobalVariablesに関連付けられている別の設定
がない場合には、POST方式で動作します。
7.
内部で実際の通信が終わった後にdecrypt関数が呼び出されます。
受信したデータを復号化したり、好きな形に変換します。
_pXecureAdp.decrypt = function (url, data)
{
trace("decrypt url=" + url + ";data=" + data);
return data;
};
プロトコルで登録されるクラスの完全なコードは下記の通りです。使用環境によって実際のコードは修正
して使用する必要があります。
if (!nexacro.XecureAdp)
{
nexacro.XecureAdp
= function ()
{
};
var _pXecureAdp = nexacro._createPrototype(nexacro.ProtocolAdp);
nexacro.XecureAdp.prototype = _pXecureAdp;
_pXecureAdp._type = "nexacroXecureAdp";
_pXecureAdp._type_name = "XecureAdp";
_pXecureHttp._httpheaders = [];
_pXecureHttp._httpheaders.push({ id: "X-Requested-With", value: "
XMLHttpRequest"});
_pXecureHttp._httpheaders.push({ id: "Accept", value: "application/json,
text/json, */*"});
_pXecureHttp._httpheaders.push({ id: "Content-Type", value: "application/
json"});
_pXecureHttp.version = function ()
{
return "1.1";
};
_pXecureHttp.getHTTPHeader = function ()
プロトコルアダプタ | 126
{
return this._httpheaders;
};
_pXecureAdp.encrypt= function(url, data)
{
trace("encrypt url=" + url + ";data=" + data);
return data;
};
_pXecureAdp.decrypt = function (url, data)
{
trace("decrypt url=" + url + ";data=" + data);
return data;
};
_pXecureAdp.initialize = function ()
{
trace("_pXecureAdp.initialize");
};
_pXecureAdp.finalize = function ()
{
trace("_pXecureAdp.finalize");
};
delete _pXecureAdp;
}
127 | nexacro platform 14 / 開発者向けガイド
10.1.3
サービス登録
プロジェクトフォルダ内のdefault_typedef.xmlファイルを直接変更したり、[Edit TypeDefinition >
Services]ウィンドウで該当する項目を追加します。
<Service prefixid="xecuredata" type="js" url="Xecure://localhost/" version="0"
communicationversion="0"/>
プロトコルアダプタを使用してサービスグループに登録されたフォームを呼び出すには、サービスグルー
プの登録時にurlを下記のように登録して使用することができます。
<Service prefixid="Base" type="form" url="Xecure://localhost/Base" version="0"
communicationversion="0"/>
this.Div00.set_url('Base:test.xfdl');
プロトコルアダプタ | 128
10.1.4
データ呼び出し
登録されたサービスを呼び出すと、該当プロトコルで通信が行われます。
application.transaction("MyService01", "xecuredata::test.js", "dsIn=dsIn:A","
dsOut=dsIn","a=b","fnCallback");
データ処理の全体の流れを整理すると下記の通りです。
1.
該当プロトコルでデータを呼び出す
Application.transaction(), Dataset.load(), Div.set_url();
2.
プロトコル初期化
initialize
3.
送信データ変換
encrypt
4.
サーバー呼び出し
変換されたデータを指定されたサーバーに送信します。
5.
サーバー応答
6.
受信データ変換
decrypt
7.
コールバック関数またはデータ処理
呼び出しの種類によってデータを処理します。
129 | nexacro platform 14 / 開発者向けガイド
10.2
PluginElement
データ処理時に、暗号化などの追加のセキュリティが必要な場合は、スクリプトで処理せずに外部プラグ
インを設定する必要があります。このような場合には、PluginElementを使用して外部プラグインを適用
することができます。
外部プラグインの適用は、該当ソリューションで提供されるルールによって追加のコードを必要とするこ
とがあります。下記の説明は、一般的にPluginElementを使用するガイドを提供します。
以下の説明は、Web区間の暗号化処理のためにXecureWebを適用する場合についての説明です。
参考に作成された例として、一部の内容が欠落されたことがあります。 製品の詳細については、
下記のリンク(韓国語)を参照してください。
http://www.softforum.co.kr/02product/pro_sub01_02.asp
ランタイムのバージョンを使用する場合、外部のプラグインは、アプリケーションの最初の実行
時にインストールウェブページを読み込んでインストールする形をお勧めします。
インストール時に問題が発生した場合、プラグインの問題なのかnexacro platformの問題か
を確認するにはウェブブラウザを使用してインストールする必要があります。
プロトコルアダプタ | 130
10.2.1
プロトコル(Protocol)クラスコード
PluginElementを使用するときにプロトコルアダプタを使用する方法は同じで、プロトコルに登録される
クラスのコードのみ一部変更されます。
1.
オブジェクトが生成される時点で、initialize関数が呼び出されます。
内部で使用するプラグインは、nexacro.PluginElementを使用することができます。
Parent_elementなしで作成してフレームワークの内部hidden領域に追加するので画面に表示されま
せん。
_pXecureAdp.initialize = function ()
{
trace("_pXecureAdp.initialize");
var parent_elem = null;
this.xecure = new nexacro.PluginElement();
this.xecure.setElementClassId("{7E9FDB80-5316-11D4-B02C-00C04F0CD404}");
this.xecure.create();
};
2.
オブジェクトが削除される時点でfinalize関数が呼び出されます。
アプリケーションが閉じられる時点で呼び出されます。
_pXecureAdp.finalize = function ()
{
this.xecure.destroy();
delete this.xecure;
};
3.
内部では、実際の通信が呼び出される前にencrypt関数が呼び出されます。
通信が発生する前に、送信するデータを暗号化します。
_pXecureAdp.encrypt= function(url, data)
{
return data;
};
4.
内部で実際の通信が終わった後にdecrypt関数が呼び出されます。
131 | nexacro platform 14 / 開発者向けガイド
受信したデータを復号化します。
_pXecureAdp.decrypt = function (url, data)
{
return data;
};
5.
通信時に使用するプロトコルは、getUsingProtocol関数から返されます。
デフォルトで設定されたプロトコルは、httpです。
_pXecureAdp.getUsingProtocol = function (url)
{
return "http";
};
6.
通信時に追加でクッキーに入る情報は、getCommunicationHeaders関数から返されます。
_pXecureAdp.getCommunicationHeaders = function (url)
{
var headers = [];
headers.push({id:"test", value:"test1"});
return headers;
};
第11章
拡張モジュール
外部モジュール(Extension DLL)を使用するためには、指定された手順に従って、拡張モジュール(DLL
)を作成する必要があります。新規モジュールを作成したり、既存のモジュールを使用するために必要な内
容を説明します。
11.1
開発環境
nexacro platformで使用可能な外部モジュールを作成するには、以下のツールとライブラリが必要です。
1.
Microsoft Visual Studio2005
Visual Studioのバージョンが2005よりも高い場合には、プラットフォームのツールセットをv80にビ
ルドします。
2.
V8 JavaScriptエンジン
https://code.google.com/p/v8/
132
133 | nexacro platform 14 / 開発者向けガイド
11.2
11.2.1
1.
プロジェクト作成と設定
プロジェクト作成
[新しいプロジェクト]を実行した後、[テンプレート > Visual C++ > Win32]項目の[Win32プロジ
ェクト]を選択します。名前の項目に、プロジェクト名を入れて、[確認]をクリックします。
拡張モジュール | 134
2.
設定を確認した後 [次へ]ボタンをクリックします。
135 | nexacro platform 14 / 開発者向けガイド
3.
[アプリケーション設定]で、アプリケーションの種類にDLLを選択し、[完了]ボタンをクリックします。
11.2.2
プロジェクト設定
1.
[追加のインクルードディレクトリ]にV8 Javascript Engineのv8.hパスを追加します。
2.
[追加の依存ファイル]に「v8.lib」を追加します。
3.
[追加のライブラリディレクトリ]に、[追加の依存関係]のv8 Libのパスを追加します。
拡張モジュール | 136
11.3
拡張モジュール製作
nexacro platformエンジンでは、拡張モジュールのExtensionInitialize情報を読み込み、設定します。
ExtensionInitializeでDLLに必要な初期化処理とattachオブジェクトのようなfunctionポインタ値を設定し
ます。
11.3.1
Entry Funcs
v8::Objectにv8::Functionを設定する関数を指定します。
typedef bool (*pFnAttachObject)( v8::Handle<v8::Object>*);
11.3.2
Initialize
初期化段階では、下記のようなタスクを処理します。
●
nexacro platformで、nexacro._addExtensionModule関数で拡張モジュールを最初にロードすると
きに呼び出されます。
●
nexacro._clearExtensionModule関数が呼び出される前まで、呼び出されません。
●
拡張モジュールで初期化に必要な作業を進めます。
extern "C" __declspec(dllexport) bool ExtensionInitialize()
11.3.3
EntryPoint
EntryPoint段階では、下記のような作業を処理します。
●
●
EXTENSIONENTRYFUNCSを設定します。
nexacro platformでnexacro._addExtensionModule関数に毎回呼び出され、引数として渡された
JavaScriptオブジェクトにv8::Functionなどを設定します。
137 | nexacro platform 14 / 開発者向けガイド
extern "C" __declspec(dllexport) bool ExtensionEntryPoint(EXTENSIONENTRYFUNCS*)
11.3.4
Shutdown
●
nexacro platformで、nexacro._clearExtensionModuleを実行して呼び出されます。
●
拡張モジュールをこれ以上使用しないときに必要な作業を進めます。
extern "C" __declspec(dllexport) void ExtensionShutdown()
拡張モジュール | 138
11.4
nexacro platform API
拡張モジュールの開発に関するnexacro platform APIは下記の通りです
11.4.1
nexacro._addExtensionModule
拡張モジュールのロード時に使用するAPIです。
nexacro._addExtensionModule = function(object, modulepath)
Argument
説明
object
拡張モジュールのプロパティ、関数などを保存するオブジェクト
modulepath
拡張モジュールのフルパスを指定します。
nexacro platformでサポートされるPath Aliasを使用することができます。
var ext = {};
nexacro._addExtensionModule(ext, "c:/extension.dll");
nexacro._addExtensionModule(ext, "%COMPONENT%\extension.dll");
11.4.2
nexacro._clearExtensionModule
拡張モジュールをこれ以上使用せず、ロードされたモジュールを終了させるときに使用するAPIです。
nexacro._clearExtensionModule = function(modulepath)
Argument
説明
modulepath
終了する拡張モジュールの完全パスを指定します。
nexacro platformでサポートされるPath Aliasを使用することができます。
値が与えられないと、ロードされた拡張モジュールをすべて終了します。
139 | nexacro platform 14 / 開発者向けガイド
nexacro._clearExtensionModule関数で削除された拡張モジュールのオブジェクトを継続使
用する場合、メモリリーク(memory leak)が発生することがありますので、ロードされてい
ないモジュールのオブジェクトは使用しないでください。
第12章
カスタムコンポーネント
nexacro platformでは、基本的にユーザーが必要とするコンポーネントを提供しています。但し、ユーザ
ー環境によって特化した機能を必要とする場合があります。こういう場合は、NEXAWEBパートナー開発
会社や開発者が作成したカスタムコンポーネントを使用するか、直接必要な機能を追加したカスタムコン
ポーネントを作成することができます。
今回の章では、ユーザーコンポーネントが提供される形式と、それを使用する方法についてのガイドを提
供します。
カスタムコンポーネントを作成するためのガイドは、パートナー開発会社に一部提供されており、
今後、すべてのユーザーに提供される予定です。
この文書では、カスタムコンポーネントを作成する具体的な方法については説明せず、すでに
開発されたカスタムコンポーネントを適用する方法のみ説明します。
12.1
カスタムコンポーネント構成
カスタムコンポーネントは、下記のような形式で構成されます。カスタムコンポーネントは、第10章
プロトコルアダプタでモジュールとプロトコルを登録する方法と似ていますが、やや違います。
カスタムコンポーネントは、構成によって提供されるファイルの数が異なりますが、基本的に提供される
ファイルは3つあります。
1.
モジュールファイル (*.json)
2.
オブジェクト情報ファイル (*.info)
3.
コンポーネントスクリプトファイル (*.js)
140
141 | nexacro platform 14 / 開発者向けガイド
12.1.1
モジュール(Module)登録
プロジェクトフォルダ内のdefault_typedef.xmlファイルを直接変更したり、[Edit TypeDefinition>
Modules]ウィンドウで該当する項目を追加します。
登録するモジュールとスクリプトは、nexacro studioでBase Lib Pathに指定されたパスの下の[
component]フォルダーのサブパスにファイルが必要です。
デフォルト設定は、nexacro platformインストール·パスの下にnexacro14libフォルダです。
Base Lib Pathは、[Tools> Options> Environment> Build> Base Lib Path]で別のパスに
変更することができます。
カスタムコンポーネント | 142
モジュールは、以下のような形でJSONファイルを作成します。「scripts」、「objInfo」項目に指定された
JavaScriptのパスは、[Base Lib Path> component]フォルダの下に該当フォルダとスクリプトファイル
が必要です。
{
"name": "ExtComp",
"version": "14.0.0.0",
"description": "nexacro platform Common Component Library",
"license": "",
"scripts": [
"ExtComp/ExtCombo.js"
],
"objInfo": [
"ExtComp/ExtCombo.info",
"ExtComp/ExtEnum.info"
]
}
//@ sourceURL=ExtComp.json
第10章 プロトコルアダプタと異なる点は、カスタムコンポーネントで提供されるプロパティ、メソッド、
イベント、Enumの関連情報を「objInfo」項目に設定しています。
143 | nexacro platform 14 / 開発者向けガイド
<Module url="ExtComp.json"/>
カスタムコンポーネント | 144
12.1.2
オブジェクト情報
nexacro.ExtComboコンポーネントは、モジュールの設定時に「ExtCombo.info」、「ExtEnum.info
」の2つのObjInfoファイルを設定します。「ExtCombo.info」ファイルは、コンポーネントに必要な情報
を含んでおり、「ExtEnum.info」ファイルは、Enumプロパティに関する情報を含んでいます。 Enum
プロパティ情報は、用途によってコンポーネントinfoファイルに含めたり、別のファイルとして作成でき
ます。
nexacro studioはObjInfoに指定されたファイルの内容によってコンポーネントを追加し、
[プロパティ]ウィンドウに情報が表示され、実際に実行されるアプリケーションの動作は、
scriptsに設定されたJavaScriptファイルに定義された内容によって処理されます。
ExtCombo.infoファイルで追加またはオーバーライドされた項目は下記の通りです。詳細については、
完全なコードを参照してください。
●
新たに追加されたプロパティ
userprop
itemopacity
●
新たに追加されたPseudo
pushed
focused
●
継承されたプロパティをオーバーライド
tooltiptext
●
追加されたメソッド
testFunc
●
追加されたイベント
ontest
提供されたコードは、理解を助けるために提供されており、特定の機能を実行するための用途
ではありません。
145 | nexacro platform 14 / 開発者向けガイド
<?xml version='1.0' encoding='utf-8'?>
<MetaInfo version="1.0">
<Object id="nexacro.ExtCombo">
<!-- define extend component based nexacro.Combo -->
<ObjectInfo
inheritance="nexacro.Combo"
typename="nexacro.ExtCombo"
csstypename="ExtCombo,ExtComboABC[userprop='abc']"
csscontrolname="ExtComboControl,ExtComboControlABC[userprop='abc']"
group="UIComponent"
csspseudo="true"
container="false"
composite="true"
tabstop="true"
cssstyle="true"
contents="true"
formats="false"
contentseditor="auto"
defaultwidth="300"
defaultheight="200"
requirement="Runtime,HTML5"
description=""/>
<PseudoInfo>
<Pseudo
name="pushed"
control="true"
deprecated="false"
unused="false"
/>
<Pseudo
name="focused"
control="true"
deprecated="false"
unused="true"
/>
</PseudoInfo>
<ControlInfo>
</ControlInfo>
<PropertyInfo>
<!-- define new property -->
カスタムコンポーネント | 146
<Property
name="userprop"
group="Misc"
type="Enum"
defaultvalue="abc"
readonly="false"
initonly="false"
hidden="false"
control="false"
style="false"
expr="false"
deprecated="false"
unused="false"
objectinfo=""
enuminfo="enum_ext_test"
unitinfo=""
requirement="Runtime,HTML5"
description="this is desc"
/>
<!-- re-define super's property -->
<Property
name="tooltiptext"
group="Misc"
type="String"
defaultvalue="1111111"
readonly="false"
initonly="false"
hidden="false"
control="false"
style="false"
expr="false"
deprecated="false"
unused="false"
objectinfo=""
enuminfo=""
unitinfo=""
requirement="Runtime,HTML5"
description="this is desc"
/>
<!-- define new style property -->
<Property
147 | nexacro platform 14 / 開発者向けガイド
name="itemopacity"
group="Style"
type="Opacity"
defaultvalue=""
readonly="false"
initonly="false"
hidden="false"
control="false"
style="true"
expr="false"
deprecated="false"
unused="false"
objectinfo="nexacro.Style_opacity"
enuminfo=""
unitinfo=""
requirement="Runtime,HTML5"
description="this is desc"
/>
</PropertyInfo>
<MethodInfo>
<Method
name="testFunc"
group=""
async="false"
deprecated="false"
unused="false"
requirement="Runtime,HTML5"
description="this is test method"
>
<Syntax
text = "testFunc(a [, b])"
>
<Return/>
<Arguments>
<Argument
name="a"
type="String"
in="true"
out="false"
option="false"
カスタムコンポーネント | 148
variable="false"
description="any string"
/>
<Argument
name="b"
type="String"
in="true"
out="false"
option="true"
variable="false"
description="any string"
/>
</Arguments>
</Syntax>
</Method>
</MethodInfo>
<EventHandlerInfo>
<!-- define event -->
<EventHandler
name="ontest"
group="Event"
deprecated="false"
unused="false"
requirement="Runtime,HTML5"
description="this is test event"
>
<Syntax
text="ontest(obj:Object, e:nexacro.EventInfo)"
>
<Return/>
<Arguments>
<Argument
name="obj"
type="Object"
in="true"
out="false"
option="false"
variable="false"
description="Event Source Object"
/>
149 | nexacro platform 14 / 開発者向けガイド
<Argument
name="e"
type="nexacro.EventInfo"
in="true"
out="false"
option="false"
variable="false"
description="Event Information Object"
/>
</Arguments>
</Syntax>
</EventHandler>
</EventHandlerInfo>
</Object>
</MetaInfo>
カスタムコンポーネントを画面上に配置すると、プロパティウィンドウに追加されたPseudo項目やプロパ
ティ、イベントを確認することができます。
サンプルコードで、userpropプロパティを設定する項目の中でenuminfoは、値を直接入力せずに「enum_
ext_test」というEnum項目を指定します。該当項目についての内容は、「ExtEnum.info」ファイルから
確認することができます。
<?xml version='1.0' encoding='utf-8'?>
<MetaInfo version="1.0">
<!-- define enum information -->
<EnumInfo
id="enum_ext_test"
composite="false"
delimiter=""
カスタムコンポーネント | 150
description="abc, 123"
>
<Enum
name="abc"
description="abc"
/>
<Enum
name="123"
description="123"
/>
</EnumInfo>
</MetaInfo>
Enum項目を指定したときに、プロパティウィンドウで該当プロパティの入力領域は、選択リストの形で
表示されます。
151 | nexacro platform 14 / 開発者向けガイド
12.1.3
コンポーネントスクリプト
アプリケーションの実行時コンポーネントの各プロパティとメソッド、イベントをどのように処理するか
についての内容は、Javaスクリプトで作成されたファイルに追加する必要があります。
ExtCombo.jsファイルの完全なコードは下記の通りです。
提供されたコードでは、理解を助けるために提供されており、特定の機能を実行するための用
途ではありません。
if (!nexacro.ExtCombo)
{
//
==============================================================================
// nexacro.ExtCombo
//
==============================================================================
nexacro.ExtCombo = function(id, position, left, top, width, height, right,
bottom, parent)
{
nexacro.Combo.call(this, id, position, left, top, width, height, right,
bottom, parent);
this.userprop = "abc";
this.itemopacity ="";
this.onclick = null;
};
var _pExtCombo = nexacro._createPrototype(nexacro.Combo);
nexacro.ExtCombo.prototype = _pExtCombo;
_pExtCombo._type = "nexacroExtCombo";
_pExtCombo._type_name = "ExtCombo";
_pExtCombo.set_userprpo = function (v)
{
this.userprop = v;
}
カスタムコンポーネント | 152
_pExtCombo.set_itemopacity = function (v)
{
this.itemopacity = v;
}
_pExtCombo.testFunc = function (a,b)
{
return a+b;
}
delete _pExtCombo;
}
153 | nexacro platform 14 / 開発者向けガイド
12.2
カスタムコンポーネント適用
12.2.1
コンポーネント登録
プロジェクトフォルダ内のdefault_typedef.xmlファイルを直接変更したり、[Edit TypeDefinition>
Objects]ウィンドウで該当する項目を追加します。
idはユーザーが任意に指定できますが、classname値はカスタムコンポーネントの作成時に指定したクラ
ス名を指定する必要があります。クラス名は、カスタムコンポーネントに添付されているマニュアル文書
を参照するか、infoファイルのObject id項目を参照します。
モジュールの登録時に使用したExtCombo.infoファイルでは、Object id値を「nexacro.ExtCombo」に設
定したため、コンポーネントの登録時にclassname値を「nexacro.ExtCombo」に設定します。
<?xml version='1.0' encoding='utf-8'?>
<MetaInfo version="1.0">
<Object id="nexacro.ExtCombo">
<!-- define extend component based nexacro.Combo -->
<ObjectInfo
inheritance="nexacro.Combo"
typename="nexacro.ExtCombo"
カスタムコンポーネント | 154
設定されたコンポーネントの基本的な情報は、default_typedef.xmlファイルに保存されます。
<Component type="JavaScript" id="ExtCombo" classname="nexacro.ExtCombo"/>
追加的なコンポーネントの配置時、デフォルト設定されている高さ、幅、アイコンの情報は、プロジェク
ト設定ファイル(*.xprj)に保存されます。
<?xml version="1.0" encoding="utf-8"?>
<Project active_adl="dd" version="1.2">
<TypeDefinition url="default_typedef.xml"/>
<GlobalVariables url="globalvars.xml"/>
<ADL id="dd" url="dd.xadl"/>
<ComponentInfoGroup>
<ComponentInfo name="ExtCombo" defaultwidth="100" defaultheight="20" image
="5"/>
</ComponentInfoGroup>
155 | nexacro platform 14 / 開発者向けガイド
12.2.2
コンポーネント使用
基本的なコンポーネントを使用することと同じように、ツールバーにあるコンポーネントのアイコンを選
択し、フォームに適切なサイズで配置します。
設定ウィンドウで必要なプロパティを追加したり、イベントを定義することができ、スクリプトウィンド
ウでは、指定されたプロパティやメソッドの自動補完機能を提供します。
第13章
DeviceAPI開発
Device APIは、nexacro platformアプリケーションでデバイスの特化された機能を使用できる方法を提供
します。開発者は、DeviceAPIを使用して、モバイルプラットフォーム(iOS / Android)の拡張された機能
を使用することができます。
Device APIは、大きく二つの部分に分かれています。一つは、ネクサクロプロジェクトに適用するための
Javaスクリプトインタフェースであり、他の部分はモバイルプラットフォーム環境で開発されたネイティ
ブモジュールです。
この章では、入力された文字列を画面に表示する簡単な例を介して Device APIを開発及び適用する方法を
紹介します。
13.1
13.1.1
ネイティブモジュール
iOSネイティブモジュール開発
Xcodeを使って iOSネイティブモジュールを開発する方法を説明します。提供する DeviceAPIクラスを継
承して機能を実装します。
例題の開発時にテスト行った開発環境は以下のとおりです。
開発 OS:OSX 10.9.3
Xcode:Version 5.1.1
テストデバイス:iPad Mini (iOS 7.1)
156
157 | nexacro platform 14 / 開発者向けガイド
プロジェクト生成
1.
Xcodeを実行し、次のメニューからプロジェクトを生成します。
File > New > Project
2.
デフォルトテンプレートに「Cocoa Touch static Library」を選択します。
DeviceAPI開発 | 158
3.
Product Name(HelloPlugin)と必要な項目を作成した後、プロジェクトの生成を完了します。
プロジェクト環境設定
プロジェクトが生成されると Targets項目で「Hello Plugin」プロジェクトを選択し、Build Phases項目に
3つのフレームワークを追加します。追加するフレームワークは以下のとおりです。
nexacro14.framework
UIKit.framework
Foundation.framework
159 | nexacro platform 14 / 開発者向けガイド
ソースファイル修正
自動生成されたHello Plugin.hヘッダファイルと Hello Plugin.mソースファイルを以下のように変更します。
// HelloPlugin.h
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <nexacro14/DeviceAPI.h>
@interface HelloPlugin : DeviceAPI {
NSInteger nID;
NSString *helloMsg;
}
@property (nonatomic) NSInteger nID;
@property (nonatomic, retain) NSString * helloMsg;
- (void)hello:(NSString*)lid withDict:(NSMutableDictionary*)options;
@end
DeviceAPI開発 | 160
64bitビルド時に上の図で19行目の書式指定子の警告が発生することがあります。 64bit
ビルド時には、以下のソースの内容のように self.nIDを (int)self.nIDに変更してください。
// HelloPlugin.m
#import "HelloPlugin.h"
@implementation HelloPlugin
@synthesize nID, helloMsg;
//hello Method
- (void)hello:(NSString*)lid withDict:(NSMutableDictionary*)options
{
self.helloMsg = [options objectForKey:@"helloMsg"];
self.nID = [lid integerValue];
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:nil message:self.
helloMsg delegate:nil cancelButtonTitle:nil otherButtonTitles:@"OK", nil];
[alert show];
//Event
NSString *callbackResult = [NSString stringWithFormat:@"runCallback(\"%d
\",\"_onhello\",{'eventid':\"onhello\",'msg':\"%@\"});", self.nID, self.
helloMsg];
//64bit build
/*
NSString *callbackResult = [NSString stringWithFormat:@"runCallback(\"%ld
\",\"_onhello\",{'eventid':\"onhello\",'msg':\"%@\"});", (int)self.nID, self.
helloMsg];
*/
[self writeJavascript:callbackResult];
}
@end
ビルド
Xcodeでビルドした後 Productsフォルダに libHelloPlugin.aファイルが生成されます。Finderでも .a
ファイルが生成されていることを確認することができます。
161 | nexacro platform 14 / 開発者向けガイド
アプリケーションプロジェクトに lib HelloPlugin.aファイル追加
アプリケーションプロジェクトで、既存のFrameworkを追加しながら、libHelloPlugin.aファイルも追加
します。下図は、NX14という名前のアプリケーションプロジェクトに生成した libHelloPlugin.aファイル
を追加した画面です。
DeviceAPI開発 | 162
iOSプロジェクトの開発についての説明は、管理者ガイド「アプリ開発と実行(iOS)」の内容を
参照してください。
シミュレータでテストする場合は、別途の認証過程なしでテストを進めることができます。但し、
実際の端末に接続するには、追加の設定が必要です。
'Code Signing' の項目の'Code Signing Identity'を以下のように適切なプロファイルとして
設定します。
[管理者ガイド > アプリ開発と実行(iOS) > Code Singing]
163 | nexacro platform 14 / 開発者向けガイド
13.1.2
Androidネイティブモジュール開発
Eclipseを使って Androidネイティブモジュールを開発する方法を説明します。提供する Nexacro Plugin
クラスを継承して機能を実装します。
例題の開発時にテストした開発環境は以下のとおりです。
JDK(Java SE Development Kit)
Eclipse
Android SDK
ADTプラグイン
テストデバイス:LGオプティマスG(Android 4.4.2)
プロジェクト生成
1.
Eclipseを実行して、下記のメニューからプロジェクトを生成します。
File > New > Android Application Project
2.
Project Nameを「HelloPlugin」に指定し、新しいプロジェクトを生成します。
DeviceAPI開発 | 164
アンドロイド4.4(Kitkat)以上のSDKを使用時にMinumum Required SDKを3.2(Honeycomb
)以下に設定すると、下位互換性を維持するためにappcompat_v7プロジェクトを自動生成し
ます。
http://developer.android.com/tools/support-library/features.html
ただし、nexacrp platformアプリケーションの作成時には影響を受けないため、プロジェク
トを作成しないことをお勧めします。このような現象を回避するにはMinumum Required SDK
を4.0(IceCreamSandwich)に設定し、プロジェクトを作成した後、AndroidManifest.xml
の設定時に使用するサブバージョンを再指定することができます。
3.
HelloPlugin.javaファイルを生成します。下図のような構造が構成されます。
165 | nexacro platform 14 / 開発者向けガイド
ソースファイル修正
生成された HelloPlugin.javaファイルを次のように変更します。HelloPluginモジュールを生成し、params
にメッセージを込めて Androidの Toast形式でメッセージを示します。
Toasts
http://developer.android.com/guide/topics/ui/notifiers/toasts.html
package com.example.helloplugin;
import org.json.JSONException;
import org.json.JSONObject;
import android.os.Handler;
import android.os.Looper;
import android.os.Message;
import android.widget.Toast;
import com.nexacro.Native;
import com.nexacro.plugin.NexacroPlugin;
import com.nexacro.plugin.NexacroPluginManager;
import com.nexacro.util.Log;
public class HelloPlugin extends NexacroPlugin {
private static String LOG_TAG = "HelloPlugin";
private static HelloPlugin helloplugin = null;
public HelloPlugin(String objectId) {
super(objectId);
// TODO Auto-generated constructor stub
}
@Override
public void init(JSONObject paramObject) {
// TODO Auto-generated method stub
DeviceAPI開発 | 166
}
@Override
public void release(JSONObject paramObject) {
// TODO Auto-generated method stub
}
@Override
//helloメソッドが存在すると、'helloMsg'文字列値を保存します。
public void execute(String method, JSONObject paramObject) {
// TODO Auto-generated method stub
Log.w(LOG_TAG, "execute paramObject:" + paramObject.toString());
if (method.equals("hello")) {
String msg = "";
try {
JSONObject params = paramObject.getJSONObject("params");
msg = params.getString("helloMsg"); // repeatcount
}
catch (JSONException e) {
e.printStackTrace();
}
show(msg);
}
}
//excute()メソッドに込められた変数を Toast形式で示します。
public void show(String message) {
final String msg = message;
new Thread(new Runnable() {
@Override
public void run() {
new Handler(Looper.getMainLooper()).post(new Runnable() {
@Override
public void run() {
Toast.makeText(
NexacroPluginManager.getInstance()
.getActivity(), msg, Toast.LENGTH_LONG)
.show();
}
});
}
}).start();
Native.SendDeviceEvent(getObjectId(), "_onhello", "{}");
}
167 | nexacro platform 14 / 開発者向けガイド
}
jarファイル生成
Pluginで使用できるように jarファイルを生成します。
1.
Hello Pluginプロジェクトにマウス右ボタンをクリックした後、表示されるポップアップメニューから[
Export]項目を選択します。
2.
'Export'ウィンドウから [Java > JAR file]項目を選択します。
DeviceAPI開発 | 168
3.
'JAR Export'ウィンドウから HelloPluginプロジェクトの'src'フォルダのみ選択し、他の項目はすべて
チェックを解除します。
169 | nexacro platform 14 / 開発者向けガイド
アプリケーションプロジェクトに Jarファイル追加
1.
アプリケーションプロジェクトのxmlフォルダに Plugin.xmlファイルを生成します。前に生成した
Androidネイティブモジュールを使用するために、nameと classを指定します。
DeviceAPI開発 | 170
<?xml version="1.0" encoding="utf-8"?>
<plugin-config>
<plugin name="HelloPlugin" class="com.example.helloplugin.HelloPlugin"/>
</plugin-config>
2.
libhelloplugin.jarファイルを'libs'フォルダに下にドラッグします。
171 | nexacro platform 14 / 開発者向けガイド
Androidプロジェクトの開発についての説明は、管理者ガイドの「アプリ開発と実行(Android
)」の内容を参照してください。
13.2
JavaScriptのインターフェイス開発
JavaScriptのインターフェイスとして使用する Hello.jsファイルは、nexacro studioでnexacro.Hello
ユーザーコンポーネントを呼び出すことができるように作成します。_pHello.hello関数がこの例で使用し
た実際の関数の実装コードです。
JavaScriptのインターフェイスは、次のように三つの部分で構成されます。
●
オブジェクトの生成時に呼び出される関数
●
オブジェクト消滅時に呼び出される関数
●
ユーザーが定義した Device API機能を実行する関数
//Hello.js
if (!nexacro.Hello) {
nexacro.Hello = function(name, obj)
{
this._id = nexacro.Device.makeID();
nexacro.Device._userCreatedObj[this._id] = this;
this.name = name || "";
this.enableevent = true;
this._event_list = {
"onhello": 1
};
var params = '""';
var jsonstr = '{"id":' + this._id + ', "div":"HelloPlugin","method":"
constructor", "params":' + params + '}';
nexacro.Device.exec(jsonstr);
};
var _pHello = nexacro.Hello.prototype = nexacro._createPrototype(nexacro.
EventSinkObject, nexacro.Hello);
DeviceAPI開発 | 172
_pHello._type_name = "Hello";
_pHello.destroy = function ()
{
var params = '""';
var jsonstr;
delete nexacro.Device._userCreatedObj[this._id];
jsonstr = '{"id":' + this._id + ', "div":"HelloPlugin", "method":"
destroy", "params":' + params + '}';
nexacro.Device.exec(jsonstr);
return true;
};
_pHello.on_created = function () { };
//===============================================================
// nexacro.Hello : Methods
//===============================================================
_pHello.hello = function(strHelloMsg)
{
var msg = strHelloMsg;
var params = '{"helloMsg":"' + msg + '"}';
var jsonstr = '{"id":' + this._id + ', "div":"HelloPlugin", "method":"
hello", "params":' + params + '}';
nexacro.Device.exec(jsonstr);
};
//===============================================================
// nexacro.Hello : Event
//===============================================================
_pHello._onhello = function(objData)
{
var e = new nexacro.HelloEventInfo(objData.eventid, objData.msg);
this._fire_onhello(this, e);
};
_pHello._fire_onhello = function(objHello, eHelloEventInfo)
{
if (this.onhello && this.onhello._has_handlers)
{
return this.onhello._fireEvent(this, eHelloEventInfo);
}
173 | nexacro platform 14 / 開発者向けガイド
return true;
};
//===============================================================
//nexacro.HelloEventInfo
//===============================================================
nexacro.HelloEventInfo = function(strEventId, strMsg) {
this.eventid = strEventId;
this.msg = strMsg;
};
var _pHelloEvnetInfo = nexacro._createPrototype(nexacro.Event, nexacro.
HelloEventInfo);
nexacro.HelloEventInfo.prototype = _pHelloEvnetInfo;
_pHelloEvnetInfo._type_name = "HelloEventInfo";
delete _pHelloEvnetInfo;
delete _pHello;
}
実際Device APIの実装オブジェクト(Java、Objective-Cでの実装)の生成と消滅は、スクリプ
トで約束されたメソッド名である"constructor"と"destroy"で行われます。
ただし、現在の時点では、Android / iOS DeviceAPIのインタフェースの違いで"constructor"、
"destroy"メソッドの呼び出し時にパラメータを渡すことができません。必要な値を設定する
には、別のユーザーメソッドを定義して処理する必要があります。
13.3
nexacro platformプロジェクト適用
JavaScriptのインターフェースを適用するために、カスタムコンポーネントを構成し、それをnexacro platformプロジェクトに適用します。カスタムコンポーネントの作成とnexacro platformプロジェクトで使用
する方法を簡単に説明します。
DeviceAPI開発 | 174
13.3.1
カスタムコンポーネント
ユーザーコンポーネントの構成
例題で使用したファイルは、特定の機能の実装のためではなく理解を助けるために作成したファイルです。
下記のように4つのファイルを使用します。
●
モジュールファイル(*.json)
ExtDeviceAPI.json
●
オブジェクト情報ファイル(*.info)
Hello.info
HelloEnum.info
●
コンポーネントスクリプトファイル(*.js)
Hello.js
登録するモジュールとスクリプトファイルは、nexacro studioで Base Lib Pathに指定されたパス内の「
component」フォルダのサブパスに位置する必要があります。
Base Lib Pathのデフォルト設定は、nexacro platformのインストールパスの下の「nexacro14lib」フォ
ルダです。使用環境に応じて、nexacro studioオプションで別のパスに変更することができます。
Options > Environment > Base Lib Path
カスタムコンポーネントの説明は、第12章 カスタムコンポーネント 項目を参照してください。
モジュール登録
1.
以下のような形で Ext Device API.jsonファイルを作成します。「scripts」、「objInfo」項目に指定
したフォルダのパスとファイルは、[Base Lib Path > component]に指定されたフォルダの下に位置
する必要があります。
{
"name": "ComComp",
"version": "14.0.0.0",
"description": "nexacro platform Common Component Library",
175 | nexacro platform 14 / 開発者向けガイド
"license": "",
"scripts": [
"ExtDeviceAPI/Hello.js"
],
"objInfo": [
"ExtDeviceAPI/Hello.info",
"ExtDeviceAPI/HelloEnum.info"
]
}
//@ sourceURL=ExtDeviceAPI.json
2.
Ext Device API.jsonファイルで「scripts」、「objInfo」項目に指定した「Ext Device API」フォル
ダを作成し、該当フォルダの下に3つのファイルを生成します。
3.
nexacro studioで作成したExt Device API.jsonモジュールを登録します。「Project Explorer」ウィ
ンドウで、TypeDefinition項目を右クリックし、ポップアップメニューから[Edit]項目を選択します。
「Edit TypeDefinition」ウィンドウで、[Add]ボタンをクリックして ExtDeviceAPI.jsonファイルを
モジュールとして登録します。
DeviceAPI開発 | 176
オブジェクト情報
nexacro.Helloカスタムコンポーネントは、モジュールの設定時に「Hello.info」、「Hello Enum.info
」の2つのObjInfoファイルを設定しました。 「Hello.info」ファイルは、コンポーネントに必要な情報を
含んでおり、「HelloEnum.info」ファイルは、Enumプロパティに関する情報を含んでいます。
●
Hello.info
コンポーネントに必要な情報を含んでいます。
<?xml version='1.0' encoding='utf-8'?>
<MetaInfo version="1.0">
<Object id="nexacro.Hello">
<!-- define extend component based nexacro.Object -->
<ObjectInfo
typename="nexacro.Hello"
csstypename="Hello,HelloABC[userprop='abc']"
csscontrolname="HelloControl,HelloControlABC[userprop='abc']"
group="Object"
csspseudo="true"
container="false"
177 | nexacro platform 14 / 開発者向けガイド
composite="true"
tabstop="true"
cssstyle="true"
contents="true"
formats="false"
contentseditor="auto"
defaultwidth="300"
defaultheight="200"
requirement="Runtime,HTML5"
description=""/>
<PseudoInfo>
<Pseudo
name="pushed"
control="true"
deprecated="false"
unused="false"
/>
<Pseudo
name="focused"
control="true"
deprecated="false"
unused="true"
/>
</PseudoInfo>
<ControlInfo>
</ControlInfo>
<PropertyInfo>
<!-- define new property -->
<Property
name="userprop"
group="Misc"
type="Enum"
defaultvalue="abc"
readonly="false"
initonly="false"
hidden="false"
control="false"
style="false"
expr="false"
deprecated="false"
DeviceAPI開発 | 178
unused="false"
objectinfo=""
enuminfo="enum_ext_test"
unitinfo=""
requirement="Runtime,HTML5"
description="this is desc"
/>
<!-- re-define super's property -->
<Property
name="tooltiptext"
group="Misc"
type="String"
defaultvalue="1111111"
readonly="false"
initonly="false"
hidden="false"
control="false"
style="false"
expr="false"
deprecated="false"
unused="false"
objectinfo=""
enuminfo=""
unitinfo=""
requirement="Runtime,HTML5"
description="this is desc"
/>
<!-- define new style property -->
<Property
name="itemopacity"
group="Style"
type="Opacity"
defaultvalue=""
readonly="false"
initonly="false"
hidden="false"
control="false"
style="true"
expr="false"
deprecated="false"
unused="false"
179 | nexacro platform 14 / 開発者向けガイド
objectinfo="nexacro.Style_opacity"
enuminfo=""
unitinfo=""
requirement="Runtime,HTML5"
description="this is desc"
/>
</PropertyInfo>
<MethodInfo>
<Method
name="hello"
group=""
async="false"
deprecated="false"
unused="false"
requirement="Runtime,HTML5"
description="this is test method"
>
<Syntax
text = "hello(a [, b])"
>
<Return/>
<Arguments>
<Argument
name="a"
type="String"
in="true"
out="false"
option="false"
variable="false"
description="any string"
/>
<Argument
name="b"
type="String"
in="true"
out="false"
option="true"
variable="false"
description="any string"
/>
DeviceAPI開発 | 180
</Arguments>
</Syntax>
</Method>
</MethodInfo>
<EventHandlerInfo>
<!-- define event -->
<EventHandler
name="onhello"
group="Event"
deprecated="false"
unused="false"
requirement="Runtime,HTML5"
description="this is test event"
>
<Syntax
text="onhello(obj:Object, e:nexacro.EventInfo)"
>
<Return/>
<Arguments>
<Argument
name="obj"
type="Object"
in="true"
out="false"
option="false"
variable="false"
description="Event Source Object"
/>
<Argument
name="e"
type="nexacro.EventInfo"
in="true"
out="false"
option="false"
variable="false"
description="Event Information Object"
/>
</Arguments>
</Syntax>
</EventHandler>
181 | nexacro platform 14 / 開発者向けガイド
</EventHandlerInfo>
</Object>
</MetaInfo>
●
HelloEnum.info
Enumプロパティに関する情報を含んでいます。
<?xml version='1.0' encoding='utf-8'?>
<MetaInfo version="1.0">
<!-- define enum information -->
<EnumInfo
id="enum_ext_test"
composite="false"
delimiter=""
description="abc, 123"
>
<Enum
name="abc"
description="abc"
/>
<Enum
name="123"
description="123"
/>
</EnumInfo>
</MetaInfo>
カスタムコンポーネント登録
「Edit TypeDefinition」ウィンドウを実行して「Objects」タブで、[Add]ボタンをクリックして、カスタ
ムコンポーネント(nexacro.Hello)を追加します。
DeviceAPI開発 | 182
コンポーネントツールバーにHelloオブジェクトのアイコンが生成されていることを確認します。
183 | nexacro platform 14 / 開発者向けガイド
13.3.2
テストフォーム作成
HelloTest.xfdl作成
1.
nexacro studioでテストできる簡単なフォーム(HelloTest.xfdl)を新規作成します。
2.
フォーム上に Helloオブジェクトを置くと、Invisible Objects項目に表示され Hello.infoファイルに
設定した内容が Propertiesウィンドウに表示されます。Helloオブジェクトが正常に登録されている
ことを確認した場合は、画面の上部にボタンコンポーネントを追加します。
3.
ボタンをコンポーネントにonclickイベントを追加し、コードを作成します。'this.Hello00.'
と入力すると、Hello.js、Hello.infoで定義した helloメソッドがコードヒントに表示されることを確
認することができます。
DeviceAPI開発 | 184
this.Button00_onclick = function(obj:Button,
e:nexacro.ClickEventInfo)
{
this.Hello00.hello("Hello World");
}
onhelloイベント
Hello.infoで定義した onhelloイベントを Propertiesウィンドウから確認することができます。
helloメソッドに"Hello world"という文字列を入れて helloメソッドが実行されて、helloイベントを呼び出
します。そして TextArea00オブジェクトに"onhello Event call"文字列を出力します。
//hello Method
this.Button00_onclick = function(obj:Button,
e:nexacro.ClickEventInfo)
{
this.Hello00.hello("Hello World");
}
//onhello Event
this.Hello00_onhello = function(obj:Hello,
{
e:nexacro.EventInfo)
185 | nexacro platform 14 / 開発者向けガイド
this.TextArea00.set_value("onhello Event call");
}
ユーザーが Hello Testボタンをクリックすると _onhelloイベントを呼び出すように iOSと Android
のネイティブモジュールソースを変更します。
●
HelloPlugin.m (iOSネイティブモジュール)
下記のように run callbackメソッドを使用して _onhelloイベントの呼び出しコードを追加した後、
リビルド作業を経て libHelloPlugin.aファイルを生成します。
...
//hello Method
- (void)hello:(NSString*)lid withDict:(NSMutableDictionary*)options
{
self.helloMsg = [options objectForKey:@"helloMsg"];
self.nID = [lid integerValue];
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:nil message:self.
helloMsg delegate:nil cancelButtonTitle:nil otherButtonTitles:@"OK", nil];
[alert show];
//HelloTestボタンクリック時 runcallbackメソッドを使用して _onhelloイベントを呼び出す
NSString *callbackResult = [NSString stringWithFormat:@"runCallback(\"%d
\",\"_onhello\",{'eventid':\"onhello\",'msg':\"%@\"});", self.nID, self.
helloMsg];
[self writeJavascript:callbackResult];
}
@end
●
HelloPlguin.java (Androidネイティブモジュール)
下記のように _onhelloイベントの呼び出しコードを追加した後、libhelloplugin.jarファイルを再生成
します。
...
public void show(String message) {
final String msg = message;
new Thread(new Runnable() {
@Override
public void run() {
new Handler(Looper.getMainLooper()).post(new Runnable() {
@Override
public void run() {
DeviceAPI開発 | 186
Toast.makeText(
NexacroPluginManager.getInstance()
.getActivity(), msg, Toast.LENGTH_LONG)
.show();
}
});
}
}).start();
// HelloTestボタンクリック時、_onhelloイベントを呼び出す
Native.SendDeviceEvent(getObjectId(), "_onhello", "{}");
}
}
13.4
実行テスト
nexacro studioで作成した Form上にある [Hello Test]ボタンをクリックすると、helloメソッドが呼び出
され、メッセージが Alertの形式で表示されます。hello関数が呼び出されて onhelloイベントが発生し、
TextArea領域に"hello_onhello call"という文字列が表示されることを確認することができます。
●
iOSデバイステスト
187 | nexacro platform 14 / 開発者向けガイド
●
Androidデバイステスト
DeviceAPI開発 | 188
第14章
ウィジェット(Widget)
ウィジェット(Widget)は、単純な機能を実行するための小さなサイズのアプリケーションです。
nexacro platformでは、ウィジェットコンポーネントを提供しませんが、Applicationオブジェクトのopen
メソッドを使用して、ウィジェットを実装する方法を提供します。開発者は、ウィジェットで使用するフ
ォームを実装した後、openメソッドを使用してフォームをウィジェットで動作させることができます。
この章では、開発者が nexacro platformでウィジェットを作成、終了する方法と動作する方法について説
明します。
14.1
ウィジェットの作成
ウィジェットを作成するためには、nexacro platformアプリケーションの実行中 strOpenStyle引数の
widgetプロパティを trueに設定して openメソッドを呼び出します。
nexacro.Application.open("NewWidget", "Base::WidgetMain1.xfdl", null, "", "
showontaskbar=false showtitlebar=false showstatusbar=false widget=true", 0, 0,
678, 530, this);
Applicationオブジェクトのopenメソッドの使用法は次のとおりです。詳しくは、nexacro platform
リファレンスガイドを参照してください。
application.open(strName, strFormURL, objParentFrame, {objArgumentList},
strOpenStyle, nLeft, nTop[,nWidth, nHeight[, objOpener]])
189
ウィジェット(Widget) | 190
14.1.1
Layeredウィジェット
ウィジェットの場合には、ウィンドウの形が長方形ではなく、様々な形態が見られる場合が多いです。
このような時、layered機能を使用します。 layered機能とは、ウィジェットの外観に該当する領域のみを
使用するようにする機能として、nexacro platformでは、プロパティの設定を介して簡単に適用すること
ができます。
ひとつ注意すべき点として、ウィジェットの形に該当する領域のみを使用するために、必ず背景を透明(
transparent)に設定する必要があります。
1.
メインフォーム(ウィジェットを作成するフォーム)で openメソッドを呼び出すときに strOpenStyle
引数の layeredプロパティを trueに設定します。
nexacro.Application.open("NewWidget", "Base:WidgetMain.xfdl", null, "", "
showontaskbar=false showtitlebar=false showstatusbar=false layered=true widget=
true", 0, 0, 678, 530, this);
2.
ウィジェットフォーム(例では、WidgetMainを指す)の oninitイベントハンドラでウィジェットフ
ォームの parent frame(openメソッドで生成される child frame)の背景を透明に設定します。
this.WidgetMain_oninit = function(obj:Form, e:nexacro.InitEventInfo)
{
var parentFrame = this.parent;
if (parentFrame.layered == true)
{
parentFrame.style.set_background("transparent");
}
}
14.1.2
単独実行形態のウィジェット
nexacro platformでは、openメソッドを使用して、ウィジェットを生成するため、一般的なウィジェット
アプリケーションを実行する場合のように、ウィジェットフォームをアプリケーションのスタートアップ
フォームとして指定することができません。したがって単独実行形態のウィジェットを生成するには、
191 | nexacro platform 14 / 開発者向けガイド
次のように処理します。
1.
アプリケーションのメインフォーム(例では、AppMainを指す)を生成した後、スタートアップフォ
ームとして指定します。
2.
メインフォームの oninitイベントハンドラでメインフォームのvisibleプロパティをfalseに設定します。
3.
openメソッドを使用して、ウィジェットを生成します。
this.AppMain_oninit = function(obj:Form, e:nexacro.InitEventInfo)
{
application.mainframe.set_visible(false);
nexacro.Application.open("NewWidget", "Base::WidgetMain.xfdl",null, "", "
widget=true", 0, 0, 678, 530, this);
}
単独実行形態のウィジェットを使用する場合に注意する点は、ウィジェットを終了させてもウィ
ジェットを生成したメインフォームは終了されずに残っているということです。このような場
合には、メインフォームを終了する別の手順が必要ですが、詳しくは、ウィジェットの終了
を参照してください。
14.2
ウィジェットの制御
ウィジェットは、openメソッドを使用して生成されるので、child frameと同じメソッドとプロパティを
持っています。
14.2.1
ウィジェットのchild frame取得
ウィジェットのchild frameにアクセスする方法は、アクセスしようとする場所に応じて、メインフォーム(
ウィジェットを作成したフォーム)からアクセスする場合とウィジェットフォームからアクセスする場合に
分けられます。
ウィジェット(Widget) | 192
●
メインフォームでウィジェットのchild frameを取得するためには、popupframesプロパティを使用
します。popupframesプロパティは、アプリケーションでopenメソッドによってモードレスで生成さ
れたフレームに関する情報をコレクション(collection)の形で含まれているオブジェクトです。
開発者は、popupframesオブジェクトとget_itemメソッドを使用して、ウィジェットのchild frame
にアクセスすることができます。 get_itemメソッドの呼び出し時の引数として渡されるインデックス
あるいはウィジェットの名前は openメソッドの呼び出し時に使用する引数と同じです。
var widgetFrame = nexacro.Application.popupframes.get_item("NewWidget");
●
ウィジェットフォーム(例では、WidgetMainを指す)から child frameを取得するためには、parent
オブジェクトを使用します。
var wigetFrame = this.parent;
14.2.2
ウィジェットの移動とサイズ変更
ウィジェットの位置やサイズを変更するには、ウィジェットの child frameオブジェクトを取得した後、child frameの moveメソッドを使用します。
var widgetFrame = nexacro.Application.popupframes.get_item("NewWidget");
widgetFrame.move(100, 100);
widgetFrame.move(100, 100, 200, 500);
14.2.3
ウィジェットプロパティの使用
ウィジェットのプロパティは、child frameプロパティと同じです。したがって、ウィジェットのプロパテ
ィにアクセスするには、まず、ウィジェットの child frameオブジェクトを取得した後、そのプロパティ
を使用します。
var widgetFrame = nexacro.Application.popupframes.get_item(widgetId);
if (widgetFrame && widgetFrame.openstatus == “normal”)
{
widgetFrame.set_openstatus("maximize");
}
193 | nexacro platform 14 / 開発者向けガイド
14.2.4
ウィジェットメソッドの使用
ウィジェットのメソッドは、child frameメソッドと同じです。したがって、ウィジェットのメソッドを使
用するためには、まず、ウィジェットの child frameオブジェクトを取得した後、そのメソッドを使用し
ます。
var widgetFrame = nexacro.Application.popupframes.get_item(widgetId);
if (widgetFrame)
{
widgetFrame.setFocus();
}
var widgetFrame = nexacro.Application.popupframes.get_item(widgetId);
var widgetForm = widgetFrame.form;
if (widgetForm)
{
var newButton = new Button("NewButton", "absolute", 10, 10, 110, 100, null,
null);
if (newButton)
{
newButton.set_text("NewButton");
widgetForm.addChild("NewButton", newButton);
newButton.show();
}
}
14.2.5
●
ウィジェットのための deviceAPI
setIconWidget(widgetId, strWidgetIconPath)
ウィジェットのshowontaskbarプロパティが trueの場合には、タスクバーに表示するアイコンを設定する
メソッドです。
Parameter
Type
strWidgetId
String
Description
アイコンが設定されるウィジェットの id
ウィジェット(Widget) | 194
Parameter
Type
strWidgetIconPath
String
Description
タスクバーに表示するアイコンの URL
使用例:
nexacro.Application.setIconWidget("NewWidget", “URL(‘Img::Widget_Icon.png’)”);
nexacro.Application.setIconWidget("NewWidget", “URL(‘http://localhost:8080/XP
13/WidgetTest/Img/Widget_Icon.png’)”);
●
setTopmostWidget(strWidgetId, bWidgetTopmost)
ウィジェットを画面の最上位に表示するかを設定するメソッドです。
Parameter
Type
strWidgetId
String
bWidgetTopmost
Boolean
Description
画面最上位に表示するかを設定するウィジェットの id
ウィジェットを画面の最上位に表示するかどうか
使用例:
nexacro.Application.setTopmostWidget("NewWidget", true);
14.3
ウィジェットの終了
一般的に、ウィジェットを終了するには、ウィジェットの child frameオブジェクトにアクセスして、
ウィジェットフォームの closeメソッドを呼び出します。
var widgetFrame = nexacro.Application.popupframes.get_item(widgetId);
if (widgetFrame && widgetFrame.form)
{
widgetFrame.form.close();
}
単独実行形態のウィジェットを終了するには、ウィジェットを終了するとき、ウィジェットを作成したア
195 | nexacro platform 14 / 開発者向けガイド
プリケーションも終了させる必要があります。したがって、ウィジェットフォーム(例での WidgetMain
を指す)の oncloseイベントハンドラで exitメソッドを呼び出して、アプリケーションを終了します。
this.WidgetMain_onclose = function(obj:Form, e:nexacro.CloseEventInfo)
{
if(!application.mainframe.visible)
{
application.exit();
}
}