nexacro platform 14 / 開発者向けガイド - TOBESOFTdocs.tobesoft.com/developer_guide_nexacro_14_ja_kr.pdfion、MLMについて説明します。拡張機能拡張に必要なプロトコル·アダプタ、拡張モジュール、カスタムコンポーネントについて説明しま

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

14.0.1.1501.2

発行先 | トゥビーソフト株式会社住所 | 〒06083 ソウル市江南区奉恩寺路617インタプスビル2-5F電話 | 08-2-2140-7700ホームページ | www.tobesoft.com

弊社製品のご愛顧について感謝申し上げます。

TOBESOFTは、この文書が提供する情報の正確性を維持するために努力し、特別な言及なしに、変更および補完します。但し、この文書に誤った情報が含まれていないことを保証していません。この文書の記述により発生する可能性がある直接的または間接的な障害や、データおよびプログラム、その他の無形財産に関する損失、使用利益の損失などについて、損害賠償や他の責任を負いません。

使用者は、本文書を購入もしくは電子文書としてダウンロードし、使用を開始することにより、ここに記載された内容を理解して、これに同意したものとみなされます。

各社の製品名を含む各商標は、各開発会社の登録商標であり、特許法と著作権法などにより保護されています。従って、本文書に含まれているすべての製品名および会社名は、それぞれの所有者の商標としてのみ使用されます。

目次

iii

著作権及び免責条項

目次

はじめに

第I部概要

第1章 nexacro platformの紹介

1.1 企業でのUI/UX

1.1.1 BUX: Business User eXperience

1.2 nexacro platform 14

1.2.1 主な特徴

1.2.2 適用対象システム

第2章 nexacro platformの概要

2.1 nexacro platform統合フレームワーク

2.2 nexacro platform構成要素

2.2.1 プログラミング言語

2.2.2 開発環境

2.2.3 実行環境

2.2.4 配布環境

2.3 システム要件

第II部基本

第3章 nexacro platform応用プログラムの構造

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . x

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

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

3.1 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ファイルの構造

4.1 ADL XMLフォーマット

4.2 FDL XMLフォーマット

4.3 Type DefinitionのXMLフォーマット

4.4 グローバル変数のXMLフォーマット

第5章 nexacro platformスクリプト言語

5.1 有効範囲(Scope)

5.1.1 this

5.1.2 Global

5.1.3 Expr

5.1.4 lookup

5.2 イベントハンドラ

5.2.1 メソッド

5.2.2 タイプ

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

目次 | v

5.3 Setter

5.3.1 SetMethod

5.3.2 動的なプロパティ

5.4 その他の変更と制約事項

5.4.1 nexacroメソッド

5.4.2 動作変更

5.4.3 オブジェクト名の生成時の制約

5.4.4 変数、関数名の作成時の制約事項

第6章 Frame Tree

6.1 表記法

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.3 applicationからフォームのスクリプトアクセス

6.3.4 formからapplicationのスクリプトアクセス

第7章スタイル(CSS)とテーマの管理

7.1 スタイル / テーマの概要

7.1.1 スタイルの定義及び適用

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

. . . . . . . . . . . . . . . . . . 60

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

. . . . . . . . . . . . . . . . . . 61

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

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

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 スタイルの生成

7.2.2 スタイルの編集

7.2.3 スタイルの適用

7.2.4 cssclassの適用

7.3 テーマの適用

7.3.1 テーマの生成

7.3.2 テーマの編集

7.3.3 テーマの適用

7.3.4 Deploy Theme

第8章 Position

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 プロジェクト生成及び修正

9.1.1 プロジェクト生成

9.1.2 スクリーン情報の修正

9.2 フォーム生成

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

. . . . . . . . . . . . . . . . . . . . . 73

. . . . . . . . . . . . 74

. . . . . . . . . . . . . 74

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

目次 | vii

9.3 InitValue

9.4 実行

9.5 XML追加 /変更事項

9.5.1 XADL

9.5.2 XFDL

第III部拡張

第10章プロトコルアダプタ

10.1 プロトコルアダプタ

10.1.1 モジュール(Module)登録

10.1.2 プロトコル(Protocol)登録

10.1.3 サービス登録

10.1.4 データ呼び出し

10.2 PluginElement

10.2.1 プロトコル(Protocol)クラスコード

第11章拡張モジュール

11.1 開発環境

11.2 プロジェクト作成と設定

11.2.1 プロジェクト作成

11.2.2 プロジェクト設定

11.3 拡張モジュール製作

11.3.1 Entry Funcs

11.3.2 Initialize

11.3.3 EntryPoint

11.3.4 Shutdown

11.4 nexacro platform API

11.4.1 nexacro._addExtensionModule

11.4.2 nexacro._clearExtensionModule

第12章カスタムコンポーネント

12.1 カスタムコンポーネント構成

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

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


12.1.2 オブジェクト情報

12.1.3 コンポーネントスクリプト

12.2 カスタムコンポーネント適用

12.2.1 コンポーネント登録

12.2.2 コンポーネント使用

第13章 DeviceAPI開発

13.1 ネイティブモジュール

13.1.1 iOSネイティブモジュール開発

プロジェクト生成

プロジェクト環境設定

ソースファイル修正

ビルド

アプリケーションプロジェクトに lib HelloPlugin.aファイル追加

13.1.2 Androidネイティブモジュール開発



jarファイル生成

アプリケーションプロジェクトに Jarファイル追加

13.2 JavaScriptのインターフェイス開発

13.3 nexacro platformプロジェクト適用

13.3.1 カスタムコンポーネント

ユーザーコンポーネントの構成

モジュール登録

オブジェクト情報

カスタムコンポーネント登録

13.3.2 テストフォーム作成

HelloTest.xfdl作成

onhelloイベント

13.4 実行テスト

第14章ウィジェット（Widget）

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

. . . . . . . . . . . . . . . . . . . . . . . . . 161

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

目次 | ix

14.1 ウィジェットの作成

14.1.1 Layeredウィジェット

14.1.2 単独実行形態のウィジェット

14.2 ウィジェットの制御

14.2.1 ウィジェットのchild frame取得

14.2.2 ウィジェットの移動とサイズ変更

14.2.3 ウィジェットプロパティの使用

14.2.4 ウィジェットメソッドの使用

14.2.5 ウィジェットのための deviceAPI

14.3 ウィジェットの終了

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

はじめに

x

本マニュアルは、nexacro platformの基本的な概要とnexacro platformアプリケーションを作成する開発プロセスについて説明します。

対象読者

対象読者

nexacro platformアプリケーションを開発したり、運営する開発者がプログラミングのために参照することができます。

nexacro platform配布

nexacro platformアプリケーションを配布したり、実行する手順の詳細は、管理者ガイド(Administrator Guide)を参照してください。

nexacro studio

nexacro studioインストールと構成、オプションに関する詳細については、nexacro studioガイド(nexacro studio Guide)を参照してください。

その他の開発ツール

当社が提供していないWebサーバーまたはその他の開発ツールについては、概略的な部分だけを説明しています。各メーカーのマニュアルを別途参照してください。

はじめに | xi

マニュアルの構成

詳細項目の構成は以下のとおりです。

nexacro platform紹介

nexacro platformについて概要を説明します。

nexacro platform概要

nexacro platformの基本的な構造と構成要素について説明します。

基本

nexacro platformアプリケーションの構造と動作、スクリプト言語、スタイル、テーマの管理、Position、MLMについて説明します。

拡張

機能拡張に必要なプロトコル·アダプタ、拡張モジュール、カスタムコンポーネントについて説明します。

マニュアルの表記法

本マニュアルは、読者の理解を高めるために特別な意味を持つ単語や文章を別途の表記法により表現しました。以下はその表記法についての説明です。

ノート、ヒント、注意は次のように提供されます。

ノートは、本体に簡単に追加する短い説明や参照、論評を提供するために使用します。.

ヒントは、ヘルプなどのヒントを提供するために使用します。

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

注意は、読者やユーザーの注意を喚起する文章を提供するために使用します。

概要

第I部

1

nexacro platformの紹介

第1章

2

業務に最適化されたシステム、必要な情報に簡単にアクセスすることができるシステム、直感的に実行できるシステム、そしてデータ入力作業のような面倒な作業に時間がかからず、必要な業務に集中できるシステムは、画期的な生産性の向上をもたらすことができます。このような変化は、システムのUI/ UX環境をどのように構築するかにかかっています。

UI/ UXの革新は、システムを単に見栄え良く作ることではなく、効率的に総所有コスト(TCO、Total Cost of Ownership)を削減し、投下資本利益率(ROI、Return On Investment)を高めながら、ユーザビリティも一緒に高めて経営者、システム管理者、そしてユーザーといったみんなの満足度を上げる必要があります。

nexacro platformは、機能、性能、デザイン要素が企業の要求水準に合わせて調和を成すように構成されていて、企業のために生まれたビジネスユーザーエクスペリエンスソリューションです。

1.1 企業でのUI/UX

RIA(Rich Internet Application)、そしてREA(Rich Enterprise Application)に至るまで、企業と個人のより豊かなユーザーエクスペリエンスを実現するためのWebアプリケーションの概念は続いて発展してきました。

C/S(Client Server)環境は処理速度は満足だったものの、インストール、配布、保守管理の難しさがあって、ウェブの登場によってこのような問題は解決されましたが、データ処理速度と制限されたUIといった限界を持つようになりました。それを克服するために、2002年Adobeと合併されたマクロメディアで使用していたRIAという用語が拡散されて全体の市場が拡大されました。RIAは一般ユーザーを対象にする広告やデザイン、アニメーションを強調して発展してきました。

時間が経つにつれて、企業用アプリケーション市場でも、より豊かで高度のユーザーインターフェイスを要求し始め、企業のためのRIAという意味のREAソリューションが企業向け市場で脚光を浴び始めています。ただし、REAは一般ユーザーを対象にしたRIAとは根本的なアプローチが異なっていました。徹底的に企業環境の分析と複雑な開発ニーズの理解、そして企業への高い理解度と数多くの構築経験に基づいて作られて

nexacro platformの紹介 | 3

きた独自的な領域です。

最近、"UX(User eXperience)"という用語が注目され、企業のビジネス環境に最適化されたUI/UXの実現を通じた企業の価値のあるビジネスビュー(VIEW)への関心が高まりました。このような新たな企業ユーザーのニーズに対応し、REAの概念を超えて拡張された概念でBUX(Business User eXperience：ビジネスユーザー経験)を定義しました。BUXは、直感的な業務環境、ユーザーの経験をベースにしたUIの実装を通じて、業務の生産性を高め、速やかな意思決定を可能にすることによって、何よりも企業顧客のビジネス価値を実現することに重心を置いています。

1.1.1 BUX: Business User eXperience

BUXは、以下の3つの統合によって実現されます。

一つ目は、プラットフォームの統合(Unified Platform)です。さまざまなオペレーティングシステム、ブラウザ、およびデバイスはもちろん、それぞれ異なる画面サイズに対して1つのソースで実行され、最適化された結果が得られるOSMU(One Source Multi Use)を指向しています。

二つ目は、開発環境の統合(Unified Development Process)です。同じ開発環境内でインハウス(In House)開発やSAPのようなUI高度化パッケージの開発作業を全て実行することができ、開発からテストおよび配布まで、ソフトウェア開発の全プロセスを統合できるようにする開発ツールである"nexacro studio"を提供することにより、開発生産性を向上させます。

三つ目は、データ中心の統合(Unified Data Frame)です。定型、非定型データとOLTP(Online Transaction Processing)関連業務とビッグデータの可視化を含めたOLAP(Online Analysis Processing)関連業務の両方をサポートすることを意味します。これは、データ指向の企業用システムUI/ UXにおいて、業務効率性と生産性の向上に直結することであるので、特に重要な意味があります。

企業システムのUI/ UXの改善は投資コストの業務生産性向上と満足度向上効果が一番高い方法です。既存のシステムをほぼ変更することなく、大幅な改善効果を創出することができるためです。最小のコストを通じた最大の技術革新効果、そして、モバイル、クラウド、ビッグデータ技術を積極的に受け入れて、企業用UI/UXを統合的にサポートするという意志こそ、BUXプラットフォームであるnexacro platformが追求する方向です。

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

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で提供します。ウィジウィグ(WYSIWYG)方式の画面開発と共に知能的なエディタを提供し、開発者に便利な機能をサポートします。

● 標準の準拠

nexacro platformで使用するスクリプト言語は、ECMA、CSS、XML、DOMなどの国際標準に準拠した汎用技術を適用することにより、他のシステムまたはソリューションとの柔軟なインターフェイスをサポートします。

標準技術を使用して新しい言語を学ばなければならないという負担を減らすことができ、nexacro platformの開発環境を迅速に習得して簡単に開発および保守が可能です。

● 統合されたデバイスのイベント処理

PCでのマウスイベント処理とスマートデバイスでのタッチイベント処理を標準化して、一つのコードでさまざまなデバイスをサポートするイベント処理を実装することができます。

nexacro platformの紹介 | 5

● 高速のデータ処理

nexacro platformは、サーバーとクライアント間のデータ処理時の画面と情報を除いたデータのみ送受信することにより、サーバーの負荷を削減し、ネットワークの効率を高め、高速の通信速度を実現することができます。

非同期通信技術を利用したデータ通信をサポートし、業務によって最適な実行環境を作ることができます。

● 企業に特化した豊富なコンポーネント

アプリケーションですぐに使用できるさまざまな企業用コンポーネントを提供してアプリケーションに必要なコンポーネントの開発期間を最小限に抑えることで、開発期間を短縮し、変化するビジネス環境に速やかに対応できます。特に最も多く使われるGridは、企業で主に使う機能を内蔵して提供しています。

nexacro studioでは、コーディングせずに、ドラッグ&ドロップ操作だけで各コンポーネントとのデータバインディングすることができ、クリック操作だけで新しいイベントを作成することができます。

● 視覚効果

さまざまな視覚効果を処理したり、スタイルやテーマを編集する作業をnexacro studio内で簡単に実装することができ、開発者とデザイナーの両方に柔軟なコラボレーションプロセスをサポートします。

● 企業専用ブラウザ(ランタイムバージョン)

Real Time Enterprise(RTE)の実現のために企業で使用するアプリケーションで、機能や性能は重要な要素です。ウェブブラウザの性能は持続的に向上してきているが、企業が必要とする安定した性能への期待を満たすことができない限界を持っています。それらの限界から脱皮するために、ランタイムバージョンで提供する企業専用ブラウザ機能を活用することができます。

1.2.2 適用対象システム

● 既存のシステムのUI高度化によるTCOの削減とROIの向上

○ メインフレーム環境など既存のシステムをウェブに移行

○ 使用が複雑なSAP UIの改善/高度化

○ 既存のシステムの老朽化でUI構成が複雑になるにつれ使用度が低下されたシステムを改編

○ コールセンターシステムのようにUIの改善/再構築時に顧客満足度の向上、人当たり処理速度向上によるコスト削減

○ ERP、CRM、PLM、SCMなどに対するシステムアクセシビリティを向上

● クライアント/サーバーシステムをインターネットベースのシステムに移行

○ クライアント/サーバーシステムのインストール、配布、更新時の問題を根本的に解決


○ 純粋なウェブでサポートされていないオフライン駆動とLocal DBMSやLocal Fileとの連動業務

● スマートフォンやタブレットなど、さまざまな機器のサポートが必要なシステム構築

○ PCとスマートフォン、タブレットまで共にサポート

○ BYOD(Bring Your Own Device)環境サポートシステムの構築

● 数値、統計データ中心の対顧客ウェブサービスやアプリケーションの開発

● 代表取締役、役員または意思決定者を対象に、直感的で流麗なEISや状況板などのシステム構築

● HTML5を収容した次世代のシステム構築

nexacro platformの概要

第2章

7

nexacro platformは、さまざまなデバイスやオペレーティング環境をサポートするために、統合フレームワーク(Unified Framework)とJavaScriptベースのコンポーネントを提供します。一つのコードでどのような環境でも動作するアプリケーションを作成することができ、各動作環境によって最適化された実行環境を提供します。

2.1 nexacro platform統合フレームワーク

nexacro platform統合フレームワークは、さまざまな実行環境で最適なパフォーマンスを提供し、新しいオペレーティングシステムが登場してもすぐに対応できる構造に作られました。

バージョンによって、パッケージや配布方法は異なることもありますが、内部的に動作するアプリケーションは同じなので、どんな環境でも同じ動作を保証することができます。アプリケーションで使用するすべてのコンポーネントは、JavaScriptベースに作られ、Webブラウザとnexacro platformランナー(Runner)で同じように動作します。ただし、Webブラウザは、ユーザーが使用しているバージョンによって性能が異なる場合があります。

統合フレームワークは、他の要素と一緒にnexacro platformエンジンの役割を果たします。主な要素は次の通りです。


構成要素説明

統合フレームワーク(Unified Framework)

プロジェクトとアプリケーションを構成する基本的なフレームワークを提供します。データ通信(XML、CSVなど)、画面間の連携のような作業を処理し、設定されたテーマに基づいて全体のスタイルを処理する機能が含まれています。

UIコンポーネント(UI Components)

画面上に表示されるUIコンポーネントとDatasetのようなオブジェクトを提供します。内部的にはUIコンポーネントは、基本コンポーネントを組み合わせて作成されます。- UIコンポーネント：Button、Calendar、Checkbox、Gridなど- デフォルトコンポーネント：EditBase, FormBase, FrameBase, ScrollBarなど- オブジェクト：Dataset

統合フレームワークAPI アプリケーションは、統合フレームワークで構成され、ランタイムとHTML5バージョンが同じ方式で動作し、開発者は、どのバージョンを使っても同じ方法で開発します。内部要素であるエレメント(Element)は、それぞれの環境に最適化された方式で開発されました。ランタイムバージョンはCをベースに作成され、HTML5バージョンはJavaスクリプトをベースに作成されます。但し、開発者がカスタムコンポーネントを作成したり、プロジェクトに必要な共通の作業を行うときは、JavaScriptベースとして、一つのコードのみを使用します。残りは、統合フレームワーク内で、使用環境によっ

nexacro platformの概要 | 9

て必要な要素を適用して処理します。

Device API サードパーティが開発したモジュール(Extension DLL)との連携時に使用する機能です。外部機器連動などの処理をサポートします。

Device API(Camera...)

モバイル機器の使用時にカメラやダイヤルなどの機器自体の機能との連携時に使用する機能です。機械によってサポートされる機能が制限されることがあります。- Webブラウザによって、一部の機能を提供しますが、まだ実験段階のため、HTML5バージョンではサポートしておりません。

Local Database アプリケーション内でデータを保存して処理することができる機能をサポートします。SQLiteをサポートし、デスクトップだけでなく、モバイル機器でも使用できます。-WebブラウザでもIndexed Database(http://www.w3.org/TR/IndexedDB/)をサポートしますが、まだ実験段階のため、HTML5バージョンではサポートしておりません。

バイナリデータ通信

データ通信時にXML、CSV、SSVなどの形式は、ランタイム、HTML5バージョンの共に基本的にサポートし、ランタイムバージョンではバイナリ通信をさらにサポートします。- Webブラウザでもバイナリデータ通信処理が可能ですが、まだ実験段階のためHTML5のバージョンではサポートしておりません。

構成要素説明

http://www.w3.org/TR/IndexedDB/


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 platformApplication Definition

*.xadl • アプリケーション実行環境• TypeDefinition• グローバル変数• テーマ情報• フレームプロパティ• スクリーン情報(ScreenInfo)

nexacro platformForm Definition

*.xfdl • 画面レイアウト• 画面フォームプロパティ• コンポーネントプロパティ• 追加レイアウト• スクリプト

TypeDefinition default_typedef.xml • モジュール• コンポーネント


• サービス• アップデート

GlobalVariable globalvars.xml • グロバール変数

Theme *.xtheme • スタイルシート(フレーム、フォーム、コンポーネントなど)• イメージ

区分ファイル名(拡張子) 用途

生成されたアプリケーションは、ビルドプロセスを経て、JavaScriptベースのコードに変換されます。実際の実行環境では、変換されたJavaScriptコードを実行するようになります。


2.2.2 開発環境

nexacro platformは、ウィジウィグ(WYSIWYG)ベースの開発ツールであるnexacro studioを提供します。nexacro studio内で実行環境に関係なく、アプリケーションを開発することができ、生成されたコードは、nexacro platformのプログラミング言語で保存されます。

nexacro studioは、Microsoft Windowsオペレーティングシステムのみサポートしますが、開発されたアプリケーションは、どんなオペレーティングシステムやどんなデバイスでも関係なく、最適化された使用環境で配布することができます。

配布環境によって、nexacro studio以外の開発ツールで追加的な作業を必要とすることができ、別々の認証を受けなければなりません。たとえば、iOSをサポートするアプリを開発する場合には、配布時にXcode環境が必要であり、アンドロイドOSをサポートするアプリを開発する場合には、配布時にEclipse環境が必要となります。


2.2.3 実行環境

nexacro platformは、統合フレームワーク(Unified Framework)を元に、アプリケーションが実行され、各実行環境によって最適化された構造を提供します。

アプリケーションを実行する主体によってランタイムとHTML5の2つのバージョンが提供されます。ランタイムバージョンは、各オペレーティング·システムによって最適化された実行環境を提供します。新しいオペレーティングシステムが発売されても、必要なAPIを追加してサポートすることができます。 HTML5バージョンは、ユーザーのWebブラウザ基に動作します。

nexacro platformが実行される環境を簡単に表現すると次の通りです。

ランタイムバージョンは、独自に開発されたレンダリングエンジンを含むnexacro platformランナー(Runner)を提供します。そのため、一般的なWebブラウザよりも高速安定した性能を保証することができます。

ランタイムバージョンでも、オペレーティングシステム上の制約がある場合があります。たとえばiOSで実行されるアプリはUIWebViewというオブジェクトのみ使用しなければなりません。同じフレームワークを使用しますが、オペレーティングシステムメーカーのポリシー上で、UIWebViewオブジェクトを使ってもう一度包み込む形式をとります。


2.2.4 配布環境

配布とは、アプリケーションが実行されるために必要なリソースをクライアントにインストールするための一連の作業を意味します。使用環境によって、nexacro platformで開発されたアプリケーションと必要なモジュールをダウンロードしてクライアントにインストールするようになります。

nexacro platformのアプリケーションは、ユーザーが使用するクライアントで動作します。ただし、データ処理などの作業のために、アプリケーション·サーバー(Application Server)を必要とすることがあります。nexacro platformは、データ処理のためのX-APIモジュールを共に提供します。また、必要によってデータをリアルタイムで処理する必要がある場合、X-PUSHと同じような付加的な技術を使用することができます。

基本的な配布作業は、HTTPプロトコルを使用します。ただし、インターネット接続をサポートしていない環境では、アプリケーションの実行に必要なリソースを別々のメディアに配布して使用することができます。

各配布環境によって、追加の作業が必要になることがあります。配布と関連した詳細内容は管理者ガイド(Administrator Guide)で提供される各バージョンごとの詳細を参照してください。

X-PUSHは、ランタイムバージョンのみサポートします。ランタイムバージョンでは、インストールモジュールが実行環境によって配布されます。


テーマファイルは、組み込みテーマを使用する場合には、nexacro studioで別々に作成せずにデフォルトテーマを変換する処理だけ行います。


2.3 システム要件

nexacro platformアプリケーションが動作するための環境は、次のとおりです。

● Runtime

項目仕様 Windows Android iOS

CPU 最小 Intel® Pentium® 4 1.4GHz ARM Cortex-A8600 MHz

ARM Cortex-A8600 MHz

推奨 Intel® Core™ i3-330M 2.13GHz ARM Cortex-A81GHz以上

ARM Cortex-A81GHz以上

ディスプレイ最小 - HVGA HVGA

推奨 - HVGA以上 HVGA以上

メモリ最小 1GB 256M 256M

推奨 4GB DDR3 512M 512M

HDD(ROM) 最小 8GB 4M 4M

推奨 30GB - 5400rpm 10M 10M

プラットフォーム Windows XP SP3以上Windows 10 V1703（10.0.15063.413）以下

Android 2.3以上Android 7.0以下

iOS 4以上iOS 10.1以下

nexacro platform サポート端末は下記のとおりです。これらの端末は当社で検証済みの製品であり、お客様から別途の問合せなしでサポートが可能な端末です。

• Android Smart PhoneSamsung 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- Aquos Phone (Andriod 4.0.4)


• Android TabletSamsung Electronics- Galaxy Tab 10.1 (Android 3.2)Fujitsu Mobile- Arrows Tab Wi-Fi FAR70A (Android 3.2)

• iOSiPhone5 (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 11.0

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 Google Chromeブラウザ

Android Chrome (Android4.0)

Android Chrome (Android4.4)

Android Chrome最新バージョン

iOSデフォルトブラウザ iOS 4 デフォルトブラウザ iOS 6.0.1 デフォルトブラウザ

iOS 10.1 デフォルトブラウザ

基本

第II部

18

nexacro platform応用プログラムの構造

第3章

19

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 変換されたファイル備考

A.xprj nexacro studioで開発時にのみ参照

A.xadl A.xadl.js Build > Generate Applicationメニューで変換

default_typedef.xml A.xadl.js内のloadTypedefition関数の処理

globalvars.xml A.xadl.js内のon_loadGlobalVariables関数で処理

Form_A.xfdl ./Base/Form_A.xfdl.js Build > Generate Fileメニューで個別変換可能

default.xtheme ./_theme_/default/theme.css.js


nexacro platformアプリケーションが実行時には最初に呼び出されるHTML文書から変換されたA.xadl.jsファイルを呼び出して、該当ファイルに設定されたロード過程を経て、残りのファイル情報を取得します。変換されたファイルの詳細についてはここで説明しません。nexacro studioでnexacro platformアプリケーションの作成時に使用されるファイルについて説明します。

3.1.1 ADLファイル

ADLはApplication Definition Languageの略字で、アプリケーションの構成に必要な全ての要素の定義をします。

ADLファイルが定義する主要要素は、以下の通りです。

要素説明

オブジェクトの配布(link)

- 応用プログラムの実行に必要なオブジェクト(データセット、グリッドなど)を羅列し、バージョン情報を登録します。- この情報はType Definitionファイルに保存され、ADLではLink のみを行います。

テーマの構成(link)

- 応用プログラムの画面に出力するグラフィックの詳細内容を定めます。- テーマはイメージとCSSの組み合わせにより構成されます。- この情報はThemeファイルに保存され、ADLではLinkのみを行います。

CSS(link)

- 応用プログラムのCSSを定義します。- テーマに登録したCSS以外に、追加でCSSを登録する際に使用します。- この情報はCSSファイルに保存され、ADLではLinkのみを行います。

Global Variable(link)

- 応用プログラム内の様々な画面が使用する共通変数を登録します。- 共通変数の種類には、Variant変数やデータセットなどを含んだオブジェクトとイメージがあります。- この情報はグローバル変数ファイルに保存され、ADLではLinkのみを行います。

Global Script - 応用プログラムが使用する共通ファンクションを定義します。- 応用プログラム自体のイベントファンクションを実装します。.

ADLファイルはnexacro studioで自動管理します。

nexacro platform応用プログラムの構造 | 21

nexacro studio上のProject Explorer画面で取り扱う内容のほとんどは、ADLファイルに保存される内容です。以下はnexacro studioのProject Explorer画面です。

説明

1 プロジェクト名です。1つのプロジェクトにいくつかのADLを登録することができます。

2 Type Definitionの情報を保存します。

3 グローバル変数の情報を保存します。

4 ADL名です。画面を配置します。

5 ChildFrameしか登録されていないので、シングルフレームモデルです。

6 スクリーンの構成を保持します。

7 CSSの構成を保持します。

8 テーマの構成を保持します。

9 フォームを定義・登録します。


Project Explorerで定義した内容は1つのファイルにのみ保存されるのではなく、いくつかのファイルに分けて保存されます。その中でルートに該当するファイルはADLファイルです。

ADLファイルは、Project Explorer画面以外にもエディット画面で直接に編集することができます。

説明

1 ADLでマウスの右側のボタンをクリックしてから“Edit Source”をクリックすると、ADLの内容を編集することができます。

2 ADLでマウスの右側のボタンをクリックしてから“Edit Script”をクリックすると、ADLのグローバルスクリプトを編集することができます。

以下はADLの内容を編集する画面です。


3.1.2 Type Definitionファイル

Type Definitionファイルは、nexacro platformアプリケーションが必要とするファイルに関連する情報を持っています。nexacro platformで使用されるコンポーネントは、Javaスクリプトに基づいて作成されました。ロジックが実装されたJavaScriptファイルをモジュールといい、この中で、アプリケーション開発に使用するオブジェクトを開発時に選択することができます。その他のアプリケーションの開発時にサービスグループを定義し、配布に関連するオプションを設定します。

Type Definitionファイルが定義する主要要素は以下の通りです。

Type Definitionファイルが定義する主要要素は以下の通りです。

要素説明

1 モジュール情報 JavaScriptで開発されたモジュールの情報を持っています。- 独自開発されたモジュールを追加することができます。- jsまたはjsonファイル形として登録することができます。各ファイル間の依存関係を持つ場合には、正しい順序で登録する必要があります。

2 オブジェクト情報アプリケーションの実行に必要なオブジェクトの情報が含まれています。


- 指定されたオブジェクトが配布に含まれます。- 各オブジェクトは、モジュールに基づいて指定されます。

3 サービスグループプロジェクトの規模によって内部的にサービスグループを定義します。- 各サービスグループは、個別にキャッシュレベルを設定できます。

4 配布オプションアプリケーションの配布に関する情報(ランタイムバージョン)を指定します。

要素説明


3.1.3 グローバル変数ファイル

グローバル変数ファイルは、nexacro platform応用プログラムの様々な画面が使用する共通変数を登録します。

共通変数として登録することができる変数には、Variant変数やデータセットなどを含んだオブジェクトとイメージがあります。

グローバル変数ファイルが定義する変数は、以下の通りです。

要素説明

データセット変数 - データセットを登録しエレメントを設定します。

Variable変数 - Variantタイプの変数を登録します。

イメージ変数 - イメージを登録します。

以下は、グローバル変数中のデータセットを登録する画面です。

Project > GlobalVariable > Insert GlobalVariables Item > Dataset

Global Variableファイルを一括的に編集しようとするときは、下記のメニューからソースを開いて編集することができます。

Project > GlobalVariable > Edit Source

下図のように追加したグローバル変数をスクリプトからアクセスして使用できます。


// Variable

var test = application.all["var_sample"];

var test = application.var_sample;

// Dataset

var objDs = application.all["dsSample"];

objDs.setColumn(1,"cust_zip","078543");

application.dsSample.setColumn(1,"cust_zip","078543");

applicationオブジェクトのスコープに直接変数を宣言した場合には、allプロパティを使用してアクセスすることはできません。スクリプトで追加した変数をallプロパティを使用してアクセスするには、setVariableメソッドを使用する必要があります。

application.aaa = "TEST";

trace(application.aaa); // TEST

trace(application.all["aaa"]); // undefined

// setVariable

application.setVariable("aaa", "TEST");

trace(application.aaa); // TEST

trace(application.all["aaa"]); // TEST


3.1.4 テーマファイル / スタイルファイル

nexacro platformでのスタイルとテーマは、画面上に出力されるUI要素のデザインを定義することを意味します。ボタンを例にあげると、透明度、フォント、カラー、陰影、ぼかし、斜体などの効果をボタンコンポーネントに与えることを意味します。

テーマとスタイルの違いは、イメージが存在するか否かです。テーマはスタイルにイメージを追加した形態です。従って、イメージを使用するテーマはスタイルに比べより多様にUIをデザインすることができます。

3.1.5 FDLファイル

FDLファイルは、使用者の画面のフォームを定義します。使用者の画面に出力する画面の配置だけでなく、UIロジックの実行のためのスクリプトを含む多様な情報を含んでいます。

FDLファイルは、ADLファイルと共にnexacro platform応用プログラムで最も重要なファイルです。

FDLファイルが定義する主要要素は以下の通りです。

要素説明

コンポーネントの配置 - Visibleオブジドェクトであるコンポーネントを配置する情報を持っています。- コンポーネントのプロパティ及びイベントを設定します。

オブジェクトの設定

- データセットなどのInvisibleオブジェクトのプロパティ及びイベントを設定します。

スクリプト - フォームを含む全てのオブジェクトのイベント関数をスクリプトコーディングします。- イベント関数以外の関すもスクリプトコーディングします。

スタイル - フォームで使用するスタイルを登録します。ここで使用するスタイルは、ADLで登録したスタイルよりも優先権があります。

BindItem - フォーム、コンポーネント、Invisibleオブジェクトとデータセットを結合するBindItemオブジェクトを設定します。


3.2 アプリケーション駆動のシナリオ

nexacro platform アプリケーションが実行されるプロセスは、以下のとおりです。

3.2.1 bootstrap

アプリケーションをロードするために関連情報を確認して、必要なリソースを取得するプロセスを説明します。このプロセスをブートストラップと表現します。

HTML5 Runtime

1 index.html start.jsonstart_android.jsonstart_ios.json

2 get bootstrap info

3 update engine

4 update resource (data)

5 load framework files

6 load component modules

7 load application

一般的に、ブートストラップは、コンピュータが外部入力なしで、自ら開始する準備をするプロセスを意味します。主にメモリに含まれる情報に基づいて動作し、起動（booting）と表現することもあります。https://en.wikipedia.org/wiki/Bootstrappingnexacro platform アプリケーションの実行プロセスで使用されるブートストラップという用語は、アプリケーションを開始する準備をする過程という表現を含んでいます。

3.2.2 アプリケーションロード

アプリケーションが実行されるためにアプリケーションに接続されたフォームをロードするプロセスは、以下のとおりです。

https://en.wikipedia.org/wiki/Bootstrapping


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:nexac

ro.LoadEventInfo)

{trace(application.all['Variable0']); //undefined}


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を取得するネットワーク速度によってロードが終わる時点が異なることがあります。


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を持っている場合には、フレームを追加することができません。

TerminalFrame

ChildFrame - サブに1つのフレームも持つことができません。- サブに1つのフォームのみ持つことができます。

Node Frame FrameSet - 特別な形態なしでサブフレームを配置します。- 2つ以上のサブフレームが追加されると、カスケードに配置し、位置プロパティ値を指定すると、該当場所に配置します。- サブにNode FrameまたはChildFrameを持つことができます。

VFrameSet - 縦型で、サブフレームを配置します。- サブフレームの配置比率をseparatesizeプロパティに指定します。- サブにNode FrameまたはChildFrameを持つことができます。

HFrameSet - 横形でサブフレームを配置します。- サブフレームの配置比率をseparatesizeプロパティに指定します。- サブにNode FrameまたはChildFrameを持つことができます。

TileFrameSet - 碁盤形でサブフレームを配置します。- 縦、横方向に配置されるサブフレームをseparatetype、separatecountプロパティに指定します。- サブにNode FrameまたはChildFrameを持つことができます。


SDI (Single Document Interface)

プロジェクトの作成時にデフォルトテンプレートを選択し、他の付加的な処理をしなかった場合、単一のフレームのみでプロジェクトが構成されます。

MDI (Multi Document Interface)

上部メニュー、サブメニュー、コンテンツ、ツールバー形式で画面を構成する場合には、全体的なレイアウト構造を希望の形式に合わせて設定する必要があります。 nexacro platformでMDIの設定は、デフォルトテンプレートを選択した後、必要なフレームを追加したり、HFrame、VFrameテンプレート、またはユーザーが指定したプロジェクトテンプレートを選択して作成できます。

フレームの追加は、プロジェクトエクスプローラで、MainFrameまたはNode Frameを選択し、コンテキストメニューから[Insert Frame]項目を選択するか、MainFrameまたはNode Frame項目をダブルクリックした後、表示される編集画面のコンテキストメニューから[Add]項目を選択して追加することができます。



3.3.2 フォームの構成

フォームは実質的な画面UIを構成する対象です。このフォームがフレームの上に貼り付けられ、顧客の画面に出力されます

フォームは大きくVisible領域、Invisible領域、Logic領域の3つの領域で構成されています。

● Visible領域は画面に出力される部分で、visibleオブジェクト(以下、コンポーネントとする)の配置により作成されます。

● Invisible領域は、Invisibleオブジェクトの組み合わせにより作成されます。

● Logic領域はスクリプトにより直接にコーディングする部分で、コンポーネントとInvisibleオブジェクトを制御します。


3.4 サーバーとのデータ連動

nexacro platformアプリケーションは、企業内で使用するデータをユーザーが簡単に操作できるように画面上に表現してくれる役割を果たしたりします。このような状況でデータを管理するサーバとアプリケーション間の連携作業を必要とします。

3.4.1 X-API

X-APIは、nexacro platformアプリケーションと連動できるデータ型を生成するライブラリです。 X-APIを使用しなくても、決まった仕様に従ってData Serviceを開発する場合、nexacro platformアプリケーションと該当サービス･データと連動することができます。

X-APIは、Java開発環境をベースに提供されます。詳細ドキュメントは、X-APIライブラリに含まれているドキュメントを確認してください。

XMLファイルの構造

第4章

36

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>

XMLファイルの構造 | 37

<Application>

<Style/>

<Layout>

<MainFrame>

<FrameSet>

<ChildFrame/>

</FrameSet>

</MainFrame>

</Layout>

</Application>

4.2 FDL XMLフォーマット

<FDL>

<TypeDefinition/>

<Form>

<Style/>

<Layouts>

<Layout>



<Layout>

</Layouts>

<Objects>



</Objects>

<Bind>

<BindItem/>

</Bind>

<Script><![CDATA[ ]]></Script>

</Form>

</FDL>


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>

nexacro platformスクリプト言語

第5章

39

nexacro platformでは、アプリケーションの開発時に使用するスクリプトは、HTML5仕様で使用されるスクリプトに基づいて開発されました。このため、既存のWeb開発者が個別にスクリプト言語を身につけなくても、nexacro platformスクリプトを作成することができます。

ただし、HTML5仕様はまだ開発されており、まだ提供されていませんが、企業内で必要な機能をサポートするために、nexacro platform自体でサポートしているスクリプトも提供されます。そのため、最適の性能を出すアプリケーションを作成するためには、基本的なスクリプト言語と共にnexacro platformスクリプト言語の基本的な知識が必要です。

この章では、既存のバージョンから変更されたスクリプト言語を説明します。

5.1 有効範囲(Scope)

有効範囲は、アクセス可能な変数の範囲と関連した内容を説明します。有効範囲または領域と表記し、英語表記そのまま使用する場合もあります。業務に使用するアプリケーションは、複数の画面を同時に操作し、一つの変数を複数の画面で参照する場合が多いが、このような場合、どのように必要なリソースにアクセスできるかどうか有効範囲を通じて調べられます。

5.1.1 this

ADLやフォームで使用されるアイテムの有効範囲を指定するときは、常にthisを使用します。変数だけでなく、プロパティ、フォーム間の参照時にも適切な有効範囲を指定する必要があります。

フォーム内の変数は、次のように宣言します。


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);

}

但し、関数内で宣言された変数は、有効範囲を個別に指定せずに使用可能であり、パラメータとして渡された値も有効範囲を指定せずに使用することができます。


{

obj.set_text("button");

var a = 3;

trace(a); // 3

}

関数の宣言時にも有効範囲を指定して該当するアプリケーションやフォームのメンバーに含まれるようにします。


{

...

}

nexacro platformスクリプト言語 | 41

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キーワードを使用して定義した変数は、関数の外で使用することができません。


{

trace(globalvar); //2

trace(globalvar2); //3

value = 4;

var localvar = 5;

}


{


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関数を呼び出します。



{

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("");

//Formthis.close("");this.go("");

//ADLthis.open("");this.exit("");this.transaction("");


アプリケーション全体で使用したい変数は、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 text="expr:dataset.rowcount"/> 

<Cell text="expr:comp.currentcell"/> 

<Cell text="expr:dataset.parent.func1()"/> 

<Cell text="expr:comp.parent.func1()"/> 

フォームに関するディレクティブが別々に提供されず、必要によりcomp.parentまたはdataset.parentのようにアクセスします。


フォーム内の関数にアクセスするとき、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 );


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"/>


該当コードは、ビルド処理後、変換されたJavaScriptコードでは、下記のようにthisのディレクティブを付けて生成されます。this.Button00.addEventHandler("onclick", this.Button00_onclick, this);

5.2.2 タイプ

nexacro studioでイベントハンドラ関数にパラメータを設定するときに、オブジェクトのタイプを指定できます。タイプは、JavaScriptの標準的な構文ではなくnexacro studioの内部で開発のしやすさを提供するためにサポートされる形式です。


{

trace(obj.text);

}

入力されたタイプの値を基準にnexacro studioでコードヒント機能をサポートします。

該当コードをJavaScriptコードに変換するときは、タイプの値を削除します。

this.Button00_onclick = function(obj, e)

{

trace(obj.text);

}


オブジェクトタイプを指定しなくても、アプリケーションの実行には影響を与えません。

イベントハンドラ関数以外の関数では、オブジェクトタイプをサポートせず、アプリケーションの動作に影響を与えることがあります。


5.3 Setter

ECMAScript5からSetter/Getterを使用して変数のアクセス制限を処理することができます。但し、IE8以下のウェブブラウザでサポートできない仕様であるため、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'


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ではない場合は、次のプロパティにアクセスすることができません。


this.Calendar.spindownbutton

this.Calendar.spinupbutton

Calendarコンポーネントでspindownbuttonプロパティは、コントロールプロパティ(Control Property)と呼ばれ、プロパティ自体を文字列として出力すると、[object ButtonControl]と表示されます。


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()


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で指定することができません。以下のような場合、カラム(列)が生成されません。


<Objects>

<Dataset id="Dataset00">

<ColumnInfo>

<Column id="length" type="STRING" size="256"/>

</ColumnInfo>

5.4.4 変数、関数名の作成時の制約事項

変数名や関数名の前にアンダーバー（_）が含まれている場合、nexacro platformライブラリで使用する変数や関数と競合することがあります。これにより、画面が表示されないか、またはアプリケーションが意図と異なる方向に動作することがあります。

例えば、次の場合、ロードが完了せず、画面が表示されません。nexacro platformライブラリで使用される_is_loading変数と同じ名前で変数名を作成しました。

this._is_loading = true;


{

trace(this._is_loading);

}

アンダーバー（_）を含んでいなくても、nexacro platformライブラリで使用されるいくつかの変数名や関数名と競合することがあります。

例えば、次の場合、コンポーネントの作成が完了せず、画面が表示されません。nexacro platformライブラリで使用されるcreateComponent関数と同じ名前で関数名を作成しました。

this.createComponent = function()

{

trace('createComponent ');

}

Frame Tree

第6章

55

“3.3.2章”でフレームの用途と簡単な使用法を説明しました。この章では、フォームの相互関係をもう少し具体的に図式化して説明します。

6.1 表記法

フレームの相互関係を図式化する際に使用する表記法を説明します。

6.1.1 ボックス

コレクション上の項目です。ここの’Item’という文字は実際の名前とは関係ありません。

6.1.2 連結線

● 1:1接続を表記します。円形の接続アイコンがある部分がChildになります。


● 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

Frame Tree | 57

● '[', ']'の内には、indexまたは'id'を入れることができます。

つまり、 this.all[0]とthis.all['btn0']は全て同じコンポーネントを指すことができます。


6.2 フォーム

6.2.1 関係図

● 一般のフォームの場合

● コンテナコンポーネントの場合

Frame Tree | 59


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

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


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

Frame Tree | 61

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 親スクリプトの使用


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"

Frame Tree | 63

6.2.7 コンテナコンポーネントのエレメントの使用

フォームを持ったコンテナコンポーネントは、フォームのようにコンポーネント、invisibleオブジェクト、bind(以下、エレメント)を持つことができます

フォームを持たないコンテナコンポーネントはinvisibleオブジェクトとbindを持つことができず、コンポーネントのみ持つことができます。

コンテナ機能のないコンポーネント、invisibleオブジェクト、bindはエレメントを持つことができません。

コンテナコンポーネントは乗せられたフォームの特性を持つようになります。

● フォームスクリプトにてthisでアクセスする場合には、フォーム内部のエレメントのみならずコンテナコンポーネントのエレメントにもアクセスすることができます。

● コンテナコンポーネントが属するフォームにthis.コンポーネント名でアクセスする場合に乗っているフォームの全てのエレメントにアクセスすることができます。


6.3 アプリケーション

6.3.1 関係図

フォーム内のコンポーネント / bind / invisibleオブジドェクトは.getOwnerFrame()ですが、.getOwnerForm()はありません。


Frame Tree | 65

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"

スタイル(CSS)とテーマの管理

第7章

66

スタイル(CSS: Cascading Style Sheets)とテーマは、nexacro platformの画面を構成する画面要素をデザインする機能です。

スタイルとテーマを適用することができる画面要素には、コンポーネント、画面フォーム、フレーム、タイトルバー、ステータスバー、スクロールバーなどがあります。

7.1 スタイル / テーマの概要

nexacro platformでのスタイルとテーマとは、画面上に出力されるUI要素のデザインを定義することを言います。ボタンを例にあげると、透明度、フォント、陰影、ぼかし、斜体などの効果をボタンコンポーネントに与えることを意味します。

7.1.1 スタイルの定義及び適用

スタイルはコンポーネント毎に定義します。

それぞれのコンポーネントにはスタイルの適用が可能なプロパティがあり、該当プロパティのスタイル値を設定することによってスタイルを定義します。

Button

{

color : "red";

}

Static

スタイル(CSS)とテーマの管理 | 67

{

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カラーを適用します


以下のようにコンポーネントごとにクラスセレクタを指定することができます。Button.BlueButton {color : blue;}


● 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となれば、該当するボタンの色を黒色と定義します。


● Grouping：同じ値(declarations)を持ついくつかのセレクターをコンポーネント名で指定します。

Syntax ,(Comma)

例 Button, Combo, Calendar {font : Arial,9;}

意味全てのボタン、コンボ、カレンダーのフォントを「Arial 9」で定義します。


7.1.2 テーマの定義

テーマは、スタイルとイメージを組み合わせた形態です。

1. テーマで使用するスタイルを定義します。

2. スタイルで使用しているイメージを含みます。

応用プログラムは1つのテーマのみを使用することができます。

nexacro platformは、default、black、gray、blueの4種類のテーマファイルを提供します。

該当するテーマは、nexacro studioのテーマとスタイルエディタ画面により必要な部分を修正することができます。

Themeはnexacro platformで必ず必要な基本情報を持っているため、使用者は必要な部分のみを選定して追加・修正作業をしなければなりません。

基本情報が削除されたり変更する場合には、それにより画面出力に問題が生じることがあります。例えば、“#combolist”のようなエディット形式のコンポーネント(Edit, MaskEdit, TextAreaなど)などで発生しますが、ポップアップメニューの設定がない場合にはポップアップメニューが表示されないことがあります。

従って、テーマは新しく生成するよりもなるべく基本として提供されるテーマを修正して他の名前で保存したり、コピーして使用するようにします。


7.1.3 スタイル/テーマの登録及び適用

1. ADLに属するテーマ内のスタイル

2. ADLに属するスタイル

3. FDLに属するスタイル

4. FDL内のコンポーネントのスタイル

コンポーネントにスタイルが適用される順序は 1 > 2 > 3 > 4 です。従って、重複したスタイル値を定義した場合には、最後のスタイルである 4番のスタイルが画面に適用・出力されます。


7.1.4 スタイルとテーマの適用対象

スタイルは1つのフォームに宣言して使用することができ、グローバルに使用するためにはプロジェクト(ADL)に登録するかテーマに含めて使用することができます。

スタイルの適用対象は単純なコンポーネントだけでなく、多様な画面要素に適用されます。以下はその適用対象を表で表したものです。

以下はスタイルの適用が可能な対象です。

種類適用対象

コンポーネント(Visibleオブジェクト)

Button, Calendar, CheckBox, Combo, Div, Edit, Grid, GroupBox, ImageViewerListBox, MaskEdit, Menu, Progressbar, Radio, Spin, Static, Tab, TextArea

画面フレーム Form, MainFrame, ChildFrame, FrameSet, HFrameSet, VFrameSet, TileFrameSetTitleBarControl, 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)


タイプセレクタ(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"」が一つのクラス名として認識されてクラスセレクタが正常に処理されません。


7.2 スタイルの適用

スタイルの概要については前で簡単に言及しました。

これからスタイルの作成方法、適用、活用方法について説明します。

7.2.1 スタイルの生成

ADLでテーマを活用しない場合やフォームにスタイルを与えたい時には、新しく生成するか以前に作成したスタイルファイルを登録します。

ステップ1：新しいフォームを作成します。

New Formでフォームを作成し、フォーム名をStyleFormにします。


ステップ2：作成されたフォームに新しいスタイルファイルを生成します。

作成されたStyleFormにInsert Styleで1つのスタイルを生成し、スタイル名FormStyle.cssで追加します。フォームが開かれているとスタイルを生成することができません。


メインメニュー(File > New > File > Style Sheet)で新しいCSSを作成Formに含めたいならば'Insert to Form"の項目をチェックして、追加するFormの名前を指定する必要があります。

ステップ3：ADLにスタイルファイルを生成します。

Insert ADL ItemによりADLに1つのスタイルを生成し、スタイル名ADLStyle.cssで追加します。


ADLに追加されたスタイルは、プロジェクトをRefreshすることで適用されます。スタイルを追加して、プロジェクトのコンテキストメニューからRefreshを選択してください。

7.2.2 スタイルの編集

テーマ内のスタイル、ADLのスタイル、フォームのスタイルの編集方法は全て同じです。

スタイルの編集は、スタイルエディタにより行うことができます。

スタイルエディタはセレクターリストをツリー形式で提供して追加/削除ができるようにし、ソースコード画面で内容の編集ができるようにしています。

スタイル編集機ではプロパティ画面を提供し、便利に入力と修正ができます。

この時にプロパティ画面に入力された内容はソースコード画面に即時に反映され、確認することができます。

ステップ1：スタイルエディタによりセレクタを登録します。

生成したADLStyle.cssを、編集画面によりボタンセレクタ(タイプセレクタ、Pseudoセレクタ、クラスセレクタ)に登録します。まず、Type SelectorとPseudo Selector(mouseover, focused)を登録します。



クラスセレクターを登録します。

生成されたソースコードは以下の通りです。

Button

{

...

}

Button:focused

{

...

}

Button:mouseover

{

...

}

.Blue

{

}


ステップ2：スタイルエディタにより登録したセレクターの内容を作成します。

生成したボタンセレクター(タイプセレクター、Pseudoセレクター、クラスセレクター)の情報を作成します。

編集するSelectorを選択して、スクリプトソースを直接編集するか、プロパティ･ウィンドウで、該当する項目を変更することができます。スクリプトソースを以下のように変更します。

Button

{

background: lightskyblue;

border: 1px solid red;

color: yellow;

font: Arial,9,bold ;

}

Button:focused

{


border: 1px solid yellow;

color: black;

font: Arial,9,underline;

}

Button:mouseover

{



border: 1px solid black;

color: red;

font: Arial,9;

}

.Blue

{

background: lime;

border: 1px solid blue;

color: blue;

font:Arial,10,bold;

}


7.2.3 スタイルの適用

フォームにボタンを生成し、ADLにあるスタイルとフォームにあるスタイルによりデザインが反映されるようにします。

ステップ1：新しいフォームを作成します。

New Formでフォームを作成し、、フォーム名をStyleFormにします。(“スタイルの生成”段階で作成したフォームを活用します。)

ステップ2：ボタンを生成しスタイルの適用を確認します。

StyleFormにボタンを生成し、ADLに作成されたスタイルに合わせてスタイルが適用されるのかを確認します。


ステップ3：フォームを実行し、ボタンのPseudoセレクターの適用を確認します。

ADLStyleに設定したPseudoセレクター(mouseover, focused)のフォームに適用されるものをQuickViewにより実行し確認します。


ステップ4：前でフォームに生成したフォームスタイルを編集し、適用を確認します。

フォームスタイルに作成されたPseudoセレクター中のfocused情報をADLStyleと異なった設定にし、異なって適用されるのをQuickViewで実行して確認します。

Button:focused

{


border: 4px solid green;

color: black;

font: Arial,9,underline;

}


7.2.4 cssclassの適用

同一フォームで同一コンポーネントに互いに異なるスタイルを適用させるために、登録されたクラスセレクターを使用して異なった表現をすることができます。

ステップ1：ADLStyleに生成したクラスセレクターを編集し適用を確認します。

ADLStyleにクラスセレクター(Blue)を編集します。

.Blue

{

background: lime;

border: 1px solid blue;

color: blue;

font:Arial,10,bold;

}

ステップ2：フォームのボタンにクラスプロパティを活用してスタイルの適用を確認します。

フォームのクラスプロパティにADLStyleに作成されたクラスセレクターであるBlueを設定し、スタイルの適用を確認します。


7.3 テーマの適用

テーマの概要については前で簡単に言及しました。

これからテーマの作成方法、適用、活用方法について説明します。

7.3.1 テーマの生成

テーマの生成方法は、Insert Theme(Insert ADL Item)により事前に作成したテーマを選択して登録することができます。

テーマエディタはイメージとスタイルファイルを追加・削除することができ、スタイルの場合にはスタイルエディタによる管理ができます。

スタイルが変更される場合には、必ずテーマも保存しなければなりません。

ステップ1 : 新しいテーマを作成します。

メニュー(File > New > File > XTheme)でexampleというタイトルで新しいテーマを作成します。新しく作成されたテーマは、デフォルトテーマを基本にコピーされます。

ステップ2：既に作成されたテーマを指定します。

ADLにInsert ADL Itemメニューからテーマを指定して追加します。


7.3.2 テーマの編集

テーマファイルは、イメージとスタイルが互いに分かれているため別途に編集します。

フォルダーの生成、スタイルの生成、イメージとスタイルの追加/削除は、テーマエディタのTheme Treeview下段のボタンを活用します。

1段階：Theme Treeviewの内容を確認しスタイルファイルを編集します。

テーマファイルであるexample.xthemeを開き、Theme Treeviewによりイメージリストとスタイルファイル(theme.css)を確認し、スタイルエディタでスタイルファイルを編集します。


2段階：テーマ編集機によりイメージ、フォルダー、スタイルの生成/追加/削除作業を行います。

Theme Treeview下段のボタンによりテーマの内容を編集します。

メニュー機能

New Folder テーマ内に新しいフォルダーを生成

New CSS テーマ内に新しいスタイルファイルを生成

Insert イメージまたはスタイルファイルを追加

Delete Treeviewで選択されたファイルを削除


7.3.3 テーマの適用

基本で提供されるデフォルトテーマのイメージとスタイルが反映される様子と、Set Activeに変更しながらコンポーネントに反映され内容を確認することができます。

作成はコンボコンポーネントを基準とします。

1段階：デフォルトテーマのコンボスタイルを確認します。

スタイルフォームを開き、変更前のコンボを生成してスタイルを確認します。


2段階：Active Themeをexample Themeに変更し、変化を確認します。

新しく生成したexample テーマをSet Active Themeで有効にし、スタイルフォームのスタイルの変化を確認します。


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状態です。


● 保存

Deploy Themeの保存は、従来の保存方法と同じように保存ボタンを押すことです。保存時に DeployThemeと Extern Fileの保存内容及びパスは次のようです。

区分保存内容保存パス

Deploy Theme Extern Fileを除いたTheme

従来の themeパス及びファイル名と同一例) 従来のthemeをC:\a.xthemeというとC:\a.xthemeに保存される。

Extern File 分離されたImage

従来の themeパス/images/分離した 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表示も表示されません。

Position

第8章

94

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"/>

Position | 95

<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"/>


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%");

Position | 97

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"


8.3.2 Ruler / Dot Grid

Positionは、パーセント入力をサポートするため、Form Design上で簡単に確認することができるようにパーセント単位で情報を表示する機能が追加されました。

ルーラのポップアップメニューで、Show Pixel Ruler / Show Percent Rulerを選択した場合、該当単位でルーラと Dot Gridの表示方法が変更されます。

Position | 99


8.3.3 Component Resize Info

コンポーネントを1つだけ選択してサイズを変更するときは、サイズ情報を表示します。このとき表記されるサイズ単位は、ルーラーの表示単位によって、該当する単位で表示します。

もし、ルーラ単位がパーセントで表示中ならば Resize Infoもパーセント単位で表示されます。

Position | 101

8.3.4 Position Editor

ユーザーが簡単にPosition情報を設定できるように、別のエディタを提供しています。ポジションエディタはコンポーネントを選択したときに表示されるミニツールバーで実行できます。

ミニツールバーは、よく使用されるスタイルプロパティメニューをすぐに変更できる機能を提供します。

ポジションエディタで修正された値は、該当コンポーネントのleft、top、right、bottom、width、heightプロパティ値に反映されます。


8.4 Position関連注意事項

レイアウトマネージャ機能を使って追加のレイアウトを使用する場合は、left、top、right、bottomプロパティだけで座標値を指定すると、追加されたレイアウトのサイズによってコンポーネントが表示されない場合も発生します。

たとえば、以下のようにleft、top、right、bottomプロパティを指定してボタンコンポーネントの位置を指定すると、Defaultレイアウトでは、正常にコンポーネントが表示されます。

Position | 103

ただし、追加レイアウトでは、right、bottomプロパティに指定された値がフォームのサイズを超えるため、正常にボタンが表示されません。コンポーネントのleft、topの位置が固定された状態で、フォームよりも大きいrigth、bottomプロパティ値が適用されるため、画面から消えたように表示されます。

MLM

第9章

104

開発されたアプリケーションを使用する環境が多様化されて、各デバイスに最適化されたデザインと機能を提供しなければならない課題が発生しています。要求されるデバイスの数どおりアプリケーションを開発する場合、その費用と時間を従来のシステムで手におえません。nexacro platformでは、このようなニーズによって、1つのソースで様々な状況に合うデザインと機能を実装できるマルチレイアウトマネージャ機能をサポートします。

9.1 プロジェクト生成及び修正

9.1.1 プロジェクト生成

‘iPhone’, ‘iPad’, ‘GalaxyTab’の Layout情報を持つプロジェクトを生成する方法を例として説明します。nexacro studioで、File > New > Project メニューを呼出す場合、以下のようにプロジェクトを生成するウィザードが表示され、各ステップことに情報を入力して生成することができます。

MLM | 105

New Project Wizard – ステップ1

生成されるプロジェクトの Frame Templateと生成されるパス及びプロジェクト名を入力するステップです。プロジェクト名は、必ず入力する必要がある必須項目であり、生成されるパスに同じプロジェクト名が存在している場合は、生成することができません。


TypeDefinition情報を設定するステップです。



プロジェクトで使用するスクリーン情報を入力するステップです。I-Phone, I-Pad, GalaxyTabを開発する目的のため、各項目を入力し、該当スクリーンで使用するテーマを指定します。‘Finish’をクリックして‘I-Phone’,‘I-Pad’,‘GalaxyTab’のスクリーン情報を持つプロジェクトを生成します。

Screenプロパティ説明

name Screen名(一意識別子)

type 使用装備タイプ- 'desktop', 'phone', 'tablet'の中で複数の項目を選択することができます。

screenwidth Screen幅(入力制限：0~65536)

sizeorientation screenwidthプロパティを処理する方向を指定します。- 'landscape', 'portrait'の中でいずれかの項目を選択します。- デフォルト値：'landscape' (typeプロパティに'desktop'または'tablet'項目が含まれた場合)- デフォルト値：'portrait' (typeプロパティが'phone'の場合)

autozoom 自動拡大、縮小機能を使用するかどうかを指定します。- true、falseのいずれかの項目を選択します。(デフォルト値：false）- typeプロパティ値が'desktop'の場合には、autozoom設定は適用しません。

zoommin autozoom機能使用時の最小値情報を指定します。

MLM | 107

- 負の指定時に無制限、デフォルト値は-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の高さを指定します。

Screenプロパティ説明


9.1.2 スクリーン情報の修正

‘New Project Wizard’で入力したスクリーン情報を修正したり、新たなスクリーン情報を入力できるようなEditor機能が追加されました。

‘Project Explorer’で、ADL Itemから提供されるポップアップメニューを使用して新たなスクリーン情報を追加したり、ADL Itemのサブ情報に表示される‘ScreenInfo’などを選択して編集することができます。

MLM | 109

9.2 フォーム生成

‘I-Phone’, ‘I-Pad’, ‘GalaxyTab’ の3か所で使用するFDLファイルの作成方法を例として説明します。 File >New > Item > Form メニューを選択する場合、以下のように FDLを生成するウィザードが表示され、各ステップことに情報を入力して生成することができます。

New Form Wizard – ステップ1

生成されるフォームのパスと名を入力するステップです。フォーム名は、必ず入力する必要がある必須項目であり、生成されるパスに同じフォーム名が存在している場合は、生成することができません。



生成されるフォームの‘Default’Layout Formのサイズを入力するステップです。初期入力値はオプションで変更することができます。

New Form Wizard – Step3

生成されるフォームでコンポーネントの生成時に適用するPosition単位を指定するステップです。

MLM | 111


生成されるフォームでデザインする Layout情報を入力するステップです。スクリーンの種類別、横、縦サイズに合わせた Layout情報を設定します。

テンプレートボタンを押すと、下の図のようなScreen Templateダイアログが表示され、必要なタイプの情報を選択し、OKボタンを押すと、選択したScreenの情報がNew Form Wizardに適用されます。


生成されたフォームに関する詳細なオプションは、nexacro studioガイドを参照してください。

MLM | 113

9.3 InitValue

MLMを適用したアプリケーションが特定の値を持った状態で起動する場合があります。たとえば、各レイアウトごとに異なるデザインプロパティを持つ場合、レイアウトごとに異なるプロパティ値を指定する必要があります。

ただし、ユーザーが入力したり、変更可能なプロパティは、レイアウトが変わるとしても入力されたり、修正された値が最初に設定した値に変更されてはいけません。これらの項目にプロパティ値を直接指定せずにInitValueを宣言しておけば、最初にアプリケーションを呼び出すときにのみ、該当値を使用し、レイアウトの変更するにかかわらず、修正された値を保持できます。

● nexacro studioのプロパティ･ウィンドウにInit Infoという項目が追加されました。必要なときに下の図のようにInitValueを適用することができます。修正された値は、xfdlファイルに<InitValue>タグに追加されます。

● InitValueで指定された値は、フォームがロードされる前に適用され、プロパティ値は、フォームがロードされながら適用されます。InitValueとプロパティ値を一緒に指定する場合は、プロパティ値がInitValueを上書きします。

● レイアウトによって、InitValueを別々に指定することはできません。

● コンポーネントのプロパティ値がランダムに変更されていない状態(Default Value)であるときは、レイアウトの変更がプロパティ値に影響を与えません。


9.4 実行

● Quick Viewは、現在活性化された Layout Tabを基準に表示するようになっています。

● Launch Projectは、Standard Toolbarから選択したスクリーンの情報を基準に表示するようになっています。

● スクリーンの情報を入力しないか、ADLにないスクリーンの場合、 Active ADLのテーマを適用して表示するようになっています。

MLM | 115

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に保存されます。


<FDL version="1.5">

<TypeDefinition url="..\default_typedef.xml"/>

<Form id="LayoutForm">

<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>

‘Default’タブで、フォームのプロパティが変更された場合は <Form>タグに保存されます。


<FDL version="1.5">


<Form id="LayoutForm" style="background:red;">

<Layouts>




</Layouts>

</Form>

</FDL>

追加された Layoutタブで、フォームのプロパティが変更された場合は、該当する <Layout>タグに保存されます。


<FDL version="1.5">


<Form id="LayoutForm" style="background:red;">

<Layouts>


<Layout name="iPad_P" screenid="iPad" width="768" height="1024"

style="background:yellow;"/>


</Layouts>

</Form>

</FDL>

追加された Layoutタブでコンポーネントのプロパティが変更された場合、該当する<Layout>タグに下位に変更されたプロパティ値のみ保存されます。

MLM | 117


<FDL version="1.5">



<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>


</Layouts>

</Form>

</FDL>

InitValueが追加されると<InitValue>タグとして保存されます。フォームのInitValueを指定する場合には、InitValueタグ自体のプロパティとして処理され、各コンポーネントのInitValueは<InitValue>タグ内に変更されたプロパティ値が処理されます。


<FDL version="1.5">



<Layouts>

</Layouts>

<InitValue>


</InitValue>

</Form>

</FDL>

サブレイアウトはフォームを構成するXMLと基本構造は同じです。対象コンポーネントの下位にdefaultレイアウトがあり、その下位にサブレイアウトが作成されます。各サブレイアウトで修正されたプロパティは、<Layout>タグの下位に変更されたプロパティ値のみが保存されます。


<FDL version="1.5">




<Layouts>


<Div id="Div00" taborder="0" left="20" top="20" width="300" height

="300">

<Layouts>


<Button id="Button00" left="17" top="67" width="120" height

="50"/>

</Layout>

<Layout name="SubLayout00" width="200" height="200">


</Layout>

</Layouts>

</Div>

</Layout>



</Layouts>

</Form>

</FDL>

拡張

第III部

119

プロトコルアダプタ

第10章

120

nexacro platformで提供されるデータ処理は、データ自体を変換して処理しません。基本的なプロトコルであるHTTPを使用して、要求と応答を処理します。但し、ユーザー環境によってデータを暗号化して通信したり、必要な形式に変換して処理する過程を必要とすることがあります。

プロトコル·アダプタは、他のデータ構造を必要とする関係を相互に接続して希望する形で動作するように作成するツールです。簡単な設定だけで、必要な機能を簡単に作成することができます。

10.1 プロトコルアダプタ

プロトコル、モジュール、サービス項目は、プロジェクトフォルダ内のdefault_typedef.xmlファイルを直接登録するか、プロジェクトナビゲーションウィンドウでTypeDefinition項目をダブルクリックして開かれる[Edit TypeDefinition]ウィンドウで、該当する項目を追加することができます。


プロジェクトフォルダ内の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]で別のパスに変更することができます。

プロトコルアダプタ | 121


モジュールは、下記のような形で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"/>


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");


};

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;

};


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 ()


{

return this._httpheaders;

};


{

trace("encrypt url=" + url + ";data=" + data);

return data;

};


{

trace("decrypt url=" + url + ";data=" + data);

return data;

};


{


};


{

trace("_pXecureAdp.finalize");

};

delete _pXecureAdp;

}


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');


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. コールバック関数またはデータ処理

呼び出しの種類によってデータを処理します。


10.2 PluginElement

データ処理時に、暗号化などの追加のセキュリティが必要な場合は、スクリプトで処理せずに外部プラグインを設定する必要があります。このような場合には、PluginElementを使用して外部プラグインを適用することができます。

外部プラグインの適用は、該当ソリューションで提供されるルールによって追加のコードを必要とすることがあります。下記の説明は、一般的にPluginElementを使用するガイドを提供します。

以下の説明は、Web区間の暗号化処理のためにXecureWebを適用する場合についての説明です。参考に作成された例として、一部の内容が欠落されたことがあります。製品の詳細については、下記のリンク(韓国語)を参照してください。http://www.softforum.co.kr/02product/pro_sub01_02.asp

ランタイムのバージョンを使用する場合、外部のプラグインは、アプリケーションの最初の実行時にインストールウェブページを読み込んでインストールする形をお勧めします。インストール時に問題が発生した場合、プラグインの問題なのかnexacro platformの問題かを確認するにはウェブブラウザを使用してインストールする必要があります。

http://www.softforum.co.kr/02product/pro_sub01_02.asp


10.2.1 プロトコル(Protocol)クラスコード

PluginElementを使用するときにプロトコルアダプタを使用する方法は同じで、プロトコルに登録されるクラスのコードのみ一部変更されます。

1. オブジェクトが生成される時点で、initialize関数が呼び出されます。

内部で使用するプラグインは、nexacro.PluginElementを使用することができます。

Parent_elementなしで作成してフレームワークの内部hidden領域に追加するので画面に表示されません。


{


var parent_elem = null;

this.xecure = new nexacro.PluginElement();

this.xecure.setElementClassId("{7E9FDB80-5316-11D4-B02C-00C04F0CD404}");

this.xecure.create();

};

2. オブジェクトが削除される時点でfinalize関数が呼び出されます。

アプリケーションが閉じられる時点で呼び出されます。


{

this.xecure.destroy();

delete this.xecure;

};

3. 内部では、実際の通信が呼び出される前にencrypt関数が呼び出されます。

通信が発生する前に、送信するデータを暗号化します。


{

return data;

};

4. 内部で実際の通信が終わった後にdecrypt関数が呼び出されます。


受信したデータを復号化します。


{

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章

132

外部モジュール(Extension DLL)を使用するためには、指定された手順に従って、拡張モジュール(DLL)を作成する必要があります。新規モジュールを作成したり、既存のモジュールを使用するために必要な内容を説明します。

11.1 開発環境

nexacro platformで使用可能な外部モジュールを作成するには、以下のツールとライブラリが必要です。

1. Microsoft Visual Studio2005

Visual Studioのバージョンが2005よりも高い場合には、プラットフォームのツールセットをv80にビルドします。

2. V8 JavaScriptエンジン

https://code.google.com/p/v8/

https://code.google.com/p/v8/

拡張モジュール | 133

11.2 プロジェクト作成と設定

11.2.1 プロジェクト作成

1. [新しいプロジェクト]を実行した後、[テンプレート > Visual C++ > Win32]項目の[Win32プロジェクト]を選択します。名前の項目に、プロジェクト名を入れて、[確認]をクリックします。


2. 設定を確認した後 [次へ]ボタンをクリックします。


3. [アプリケーション設定]で、アプリケーションの種類にDLLを選択し、[完了]ボタンをクリックします。

11.2.2 プロジェクト設定

1. [追加のインクルードディレクトリ]にV8 Javascript Engineのv8.hパスを追加します。

2. [追加の依存ファイル]に「v8.lib」を追加します。

3. [追加のライブラリディレクトリ]に、[追加の依存関係]のv8 Libのパスを追加します。


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などを設定します。


extern "C" __declspec(dllexport) bool ExtensionEntryPoint(EXTENSIONENTRYFUNCS*)

11.3.4 Shutdown

● nexacro platformで、nexacro._clearExtensionModuleを実行して呼び出されます。

● 拡張モジュールをこれ以上使用しないときに必要な作業を進めます。

extern "C" __declspec(dllexport) void ExtensionShutdown()


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を使用することができます。値が与えられないと、ロードされた拡張モジュールをすべて終了します。


nexacro._clearExtensionModule関数で削除された拡張モジュールのオブジェクトを継続使用する場合、メモリリーク(memory leak)が発生することがありますので、ロードされていないモジュールのオブジェクトは使用しないでください。

カスタムコンポーネント

第12章

140

nexacro platformでは、基本的にユーザーが必要とするコンポーネントを提供しています。但し、ユーザー環境によって特化した機能を必要とする場合があります。こういう場合は、当社のパートナー開発会社や開発者が作成したカスタムコンポーネントを使用するか、直接必要な機能を追加したカスタムコンポーネントを作成することができます。

今回の章では、ユーザーコンポーネントが提供される形式と、それを使用する方法についてのガイドを提供します。

カスタムコンポーネントを作成するためのガイドは、パートナー開発会社に一部提供されており、今後、すべてのユーザーに提供される予定です。この文書では、カスタムコンポーネントを作成する具体的な方法については説明せず、すでに開発されたカスタムコンポーネントを適用する方法のみ説明します。

12.1 カスタムコンポーネント構成

カスタムコンポーネントは、下記のような形式で構成されます。カスタムコンポーネントは、プロトコルアダプタでモジュールとプロトコルを登録する方法と似ていますが、やや違います。

カスタムコンポーネントは、構成によって提供されるファイルの数が異なりますが、基本的に提供されるファイルは3つあります。

1. モジュールファイル (*.json)

2. オブジェクト情報ファイル (*.info)

3. コンポーネントスクリプトファイル (*.js)

カスタムコンポーネント | 141


プロジェクトフォルダ内の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]で別のパスに変更することができます。


モジュールは、以下のような形で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

プロトコルアダプタと異なる点は、カスタムコンポーネントで提供されるプロパティ、メソッド、イベント、Enumの関連情報を「objInfo」項目に設定しています。


<Module url="ExtComp.json"/>


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

提供されたコードは、理解を助けるために提供されており、特定の機能を実行するための用途ではありません。

<?xml version='1.0' encoding='utf-8'?>

<MetaInfo version="1.0">

<Object id="nexacro.ExtCombo">




<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>



<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=""


description="this is desc"

/>



<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=""



/>



<Property

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=""



/>

</PropertyInfo>

<MethodInfo>

<Method

name="testFunc"

group=""

async="false"

deprecated="false"

unused="false"


description="this is test method"

>

<Syntax

text = "testFunc(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"


/>

</Arguments>

</Syntax>

</Method>

</MethodInfo>

<EventHandlerInfo>



<EventHandler

name="ontest"

group="Event"

deprecated="false"

unused="false"


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"

/>

<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」ファイルから確認することができます。





<EnumInfo

id="enum_ext_test"

composite="false"

delimiter=""

description="abc, 123"

>

<Enum


name="abc"

description="abc"

/>

<Enum

name="123"

description="123"

/>

</EnumInfo>

</MetaInfo>

Enum項目を指定したときに、プロパティウィンドウで該当プロパティの入力領域は、選択リストの形で表示されます。


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;

}


_pExtCombo.set_itemopacity = function (v)

{

this.itemopacity = v;

}

_pExtCombo.testFunc = function (a,b)

{

return a+b;

}

delete _pExtCombo;

}


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」に設定します。



<Object id="nexacro.ExtCombo">



<ObjectInfo

inheritance="nexacro.Combo"

typename="nexacro.ExtCombo"


設定されたコンポーネントの基本的な情報は、default_typedef.xmlファイルに保存されます。

<Component type="JavaScript" id="ExtCombo" classname="nexacro.ExtCombo"/>

追加的なコンポーネントの配置時、デフォルト設定されている高さ、幅、アイコンの情報は、プロジェクト設定ファイル(*.xprj)に保存されます。


<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>


12.2.2 コンポーネント使用

基本的なコンポーネントを使用することと同じように、ツールバーにあるコンポーネントのアイコンを選択し、フォームに適切なサイズで配置します。

設定ウィンドウで必要なプロパティを追加したり、イベントを定義することができ、スクリプトウィンドウでは、指定されたプロパティやメソッドの自動補完機能を提供します。

DeviceAPI開発

第13章

156

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)

DeviceAPI開発 | 157


1. Xcodeを実行し、次のメニューからプロジェクトを生成します。

File > New > Project

2. デフォルトテンプレートに「Cocoa Touch static Library」を選択します。


3. Product Name(HelloPlugin)と必要な項目を作成した後、プロジェクトの生成を完了します。

プロジェクト環境設定

プロジェクトが生成されると Targets項目で「Hello Plugin」プロジェクトを選択し、Build Phases項目に3つのフレームワークを追加します。追加するフレームワークは以下のとおりです。

nexacro14.framework

UIKit.framework

Foundation.framework



自動生成された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


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ファイルが生成されていることを確認することができます。


アプリケーションプロジェクトに lib HelloPlugin.aファイル追加

アプリケーションプロジェクトで、既存のFrameworkを追加しながら、libHelloPlugin.aファイルも追加します。下図は、NX14という名前のアプリケーションプロジェクトに生成した libHelloPlugin.aファイルを追加した画面です。


iOSプロジェクトの開発についての説明は、管理者ガイド「アプリ開発と実行(iOS)」の内容を参照してください。

シミュレータでテストする場合は、別途の認証過程なしでテストを進めることができます。但し、実際の端末に接続するには、追加の設定が必要です。'Code Signing' の項目の'Code Signing Identity'を以下のように適切なプロファイルとして設定します。[管理者ガイド > アプリ開発と実行(iOS) > Code Singing]


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」に指定し、新しいプロジェクトを生成します。


アンドロイド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ファイルを生成します。下図のような構造が構成されます。

http://developer.android.com/tools/support-library/features.html



生成された HelloPlugin.javaファイルを次のように変更します。HelloPluginモジュールを生成し、paramsにメッセージを込めて Androidの Toast形式でメッセージを示します。

Toastshttp://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

http://developer.android.com/guide/topics/ui/notifiers/toasts.html


}

@Override

public void release(JSONObject paramObject) {


}

@Override

//helloメソッドが存在すると、'helloMsg'文字列値を保存します。public void execute(String method, JSONObject paramObject) {


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", "{}");

}


}

jarファイル生成

Pluginで使用できるように jarファイルを生成します。

1. Hello Pluginプロジェクトにマウス右ボタンをクリックした後、表示されるポップアップメニューから[Export]項目を選択します。

2. 'Export'ウィンドウから [Java > JAR file]項目を選択します。


3. 'JAR Export'ウィンドウから HelloPluginプロジェクトの'src'フォルダのみ選択し、他の項目はすべてチェックを解除します。


アプリケーションプロジェクトに Jarファイル追加

1. アプリケーションプロジェクトのxmlフォルダに Plugin.xmlファイルを生成します。前に生成した Androidネイティブモジュールを使用するために、nameと classを指定します。



<plugin-config>

<plugin name="HelloPlugin" class="com.example.helloplugin.HelloPlugin"/>

</plugin-config>

2. libhelloplugin.jarファイルを'libs'フォルダに下にドラッグします。


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);


_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 + '}';


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.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);

}


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プロジェクトで使用する方法を簡単に説明します。


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

カスタムコンポーネントの説明は、カスタムコンポーネント項目を参照してください。

モジュール登録

1. 以下のような形で Ext Device API.jsonファイルを作成します。「scripts」、「objInfo」項目に指定したフォルダのパスとファイルは、[Base Lib Path > component]に指定されたフォルダの下に位置する必要があります。

{

"name": "ComComp",

"version": "14.0.0.0",

"description": "nexacro platform Common Component Library",


"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ファイルをモジュールとして登録します。


オブジェクト情報

nexacro.Helloカスタムコンポーネントは、モジュールの設定時に「Hello.info」、「Hello Enum.info」の2つのObjInfoファイルを設定しました。「Hello.info」ファイルは、コンポーネントに必要な情報を含んでおり、「HelloEnum.info」ファイルは、Enumプロパティに関する情報を含んでいます。

● Hello.info

コンポーネントに必要な情報を含んでいます。



<Object id="nexacro.Hello">



<ObjectInfo

typename="nexacro.Hello"

csstypename="Hello,HelloABC[userprop='abc']"

csscontrolname="HelloControl,HelloControlABC[userprop='abc']"

group="Object"

csspseudo="true"

container="false"


composite="true"

tabstop="true"

cssstyle="true"

contents="true"

formats="false"

contentseditor="auto"

defaultwidth="300"

defaultheight="200"


description=""/>

<PseudoInfo>

<Pseudo

name="pushed"

control="true"

deprecated="false"

unused="false"

/>

<Pseudo

name="focused"

control="true"

deprecated="false"

unused="true"

/>

</PseudoInfo>

<ControlInfo>

</ControlInfo>

<PropertyInfo>



<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=""



/>



<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=""



/>



<Property

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=""



/>

</PropertyInfo>

<MethodInfo>

<Method

name="hello"

group=""

async="false"

deprecated="false"

unused="false"


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"


/>

<Argument

name="b"

type="String"

in="true"

out="false"

option="true"

variable="false"


/>


</Arguments>

</Syntax>

</Method>

</MethodInfo>

<EventHandlerInfo>



<EventHandler

name="onhello"

group="Event"

deprecated="false"

unused="false"


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>


</EventHandlerInfo>

</Object>

</MetaInfo>

● HelloEnum.info

Enumプロパティに関する情報を含んでいます。





<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)を追加します。


コンポーネントツールバーにHelloオブジェクトのアイコンが生成されていることを確認します。


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メソッドがコードヒントに表示されることを確認することができます。



{

this.Hello00.hello("Hello World");

}

onhelloイベント

Hello.infoで定義した onhelloイベントを Propertiesウィンドウから確認することができます。

helloメソッドに"Hello world"という文字列を入れて helloメソッドが実行されて、helloイベントを呼び出します。そして TextArea00オブジェクトに"onhello Event call"文字列を出力します。

//hello Method


{

this.Hello00.hello("Hello World");

}

//onhello Event

this.Hello00_onhello = function(obj:Hello, e:nexacro.EventInfo)

{


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() {


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デバイステスト


● Androidデバイステスト


ウィジェット（Widget）

第14章

189

ウィジェット（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]])


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メソッドを使用して、ウィジェットを生成するため、一般的なウィジェットアプリケーションを実行する場合のように、ウィジェットフォームをアプリケーションのスタートアップフォームとして指定することができません。したがって単独実行形態のウィジェットを生成するには、次のよう

ウィジェット（Widget） | 191

に処理します。

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にアクセスする方法は、アクセスしようとする場所に応じて、メインフォーム（ウィジェットを作成したフォーム）からアクセスする場合とウィジェットフォームからアクセスする場合に分けられます。


● メインフォームでウィジェットの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");

}


14.2.4 ウィジェットメソッドの使用

ウィジェットのメソッドは、child frameメソッドと同じです。したがって、ウィジェットのメソッドを使用するためには、まず、ウィジェットの child frameオブジェクトを取得した後、そのメソッドを使用します。


if (widgetFrame)

{

widgetFrame.setFocus();

}


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 Description

strWidgetId String アイコンが設定されるウィジェットの id

strWidgetIconPath String タスクバーに表示するアイコンの 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 Description

strWidgetId String 画面最上位に表示するかを設定するウィジェットの id

bWidgetTopmost Boolean ウィジェットを画面の最上位に表示するかどうか

使用例：

nexacro.Application.setTopmostWidget("NewWidget", true);

14.3 ウィジェットの終了

一般的に、ウィジェットを終了するには、ウィジェットの child frameオブジェクトにアクセスして、ウィジェットフォームの closeメソッドを呼び出します。


if (widgetFrame && widgetFrame.form)

{

widgetFrame.form.close();

}

単独実行形態のウィジェットを終了するには、ウィジェットを終了するとき、ウィジェットを作成したアプリケーションも終了させる必要があります。したがって、ウィジェットフォーム（例での WidgetMainを指す）の oncloseイベントハンドラで exitメソッドを呼び出して、アプリケーションを終了します。


this.WidgetMain_onclose = function(obj:Form, e:nexacro.CloseEventInfo)

{

if(!application.mainframe.visible)

{

application.exit();

}

}

Documents

nexacro platform 14 / 開発者向けガイド - TOBESOFTdocs.tobesoft.com/developer_guide_nexacro_14_ja_kr.pdfion、MLMについて説明します。 拡張 機能拡張に必要なプロトコル·アダプタ、拡張モジュール、カスタムコンポーネントについて説明しま

nexacro platform 14 / 開発者向けガイド - TOBESOFTdocs.tobesoft.com/developer_guide_nexacro_14_ja_kr.pdfion、MLMについて説明します。拡張機能拡張に必要なプロトコル·アダプタ、拡張モジュール、カスタムコンポーネントについて説明しま