Nexacroの開発環境を理解し、nexacro studioを扱う基本的な方法を学ぶために簡単なアプリを作成してみましょう。
この章では、次のような内容を説明します。画面に'Hello、Nexacro！'というテキストを表示し、テキストをクリックしたときAlertウィンドウに'Nexacro N'というテキストを表示するアプリを作成します。
nexacro studioの実行
PCにインストールされたnexacro studioを実行します。インストール時にデスクトップにアイコンを作成した場合、アイコンをダブルクリックします。
ショートカットアイコンを作成していない場合、nexacro studioがインストールされたフォルダで実行ファイルをダブルクリックして実行することができます。 nexacro studioがインストールされたパスは次のとおりです。
C:\[Program Files]\NEXAWEB\Nexacro N\Tools\nexacrostudio.exe
nexacro studioのインストール後、初回起動時には、プロジェクトを開いていない状態です。
nexacro studioの画面構成は次のとおりです。
コンポーネント | 説明 |
|---|---|
1 プロジェクト エクスプローラ (Project Explorer) | 作業中のプロジェクトの構成要素を表示します。 最初の実行時には何も表示されません。 |
2 Form Design | nexacro platformアプリ画面のデザイン、スクリプト編集作業が行われるスペースです。 |
3 プロパティ ウィンドウ (Properties) | フォーム、コンポーネント、Datasetコンポーネントの属性が表示され、編集できるスペースです。 |
4 Output | エラーメッセージやGenerateメッセージ、trace()メソッドで設定したメッセージを表示するスペースです。 |
5 Error List | スクリプトの作成中にエラーをリアルタイムで確認して表示します。 |
Nexacroプロジェクトの作成
Nexacroアプリを作成するためには、先にプロジェクトを作成する必要があります。すべてのNexacroアプリは、プロジェクトで指定された属性によってユーザーの画面に表示され、動作することになります。
プロジェクトは、新たに作成したり、既に作成されたプロジェクトテンプレートを使用することができます。この章では、新しいプロジェクトを作成します。
すべての作業は、メニューまたはツールバー、ショートカットキーで実行することができます。この章では、コンポーネントの配置を除くすべての作業は、メニューに基づいて説明します。
Nexacroプロジェクトを作成するためのメニューは、次のとおりです。New Project Wizardが実行され、順番によって新しいプロジェクトを作成します。
[Menu] File > New > Project
新しいプロジェクトを作成するには、プロジェクト名とプロジェクトファイルを保存するパスを指定する必要があります。1 Name項目にプロジェクト名を指定し 2 Location項目に保存するパスを指定します。
今回の例では、次のように設定します。
説明 | 設定値 | |
|---|---|---|
1 Name | プロジェクト名 | Hello |
2 Location | プロジェクトファイル保存パス | [目的のフォルダ]\Hello |
Screen項目とScreen Detail項目を設定します。この章では、デフォルト値をそのまま使用します。Screen項目は「Desktop」を選択し、自動的に生成されたScreenの情報もそのまま使用します。
Frame項目は「Full」オプションを選択します。「Full」オプションを選択すると、基本フレーム構造とFormを生成します。Screen関連の設定やFrameの設定は、プロジェクトの作成後に変更することができます。[Finish]ボタンをクリックしてプロジェクトを作成します。
プロジェクトが作成されると、プロジェクトのナビゲーションウィンドウで、プロジェクトの構成要素が表示されます。今回の例では、各コンポーネントの詳細な説明は行わず、Nexacroアプリの作成に進みます。
この章で説明するパスはWindows 10基準で説明します。OSによって設定されたパスが変更される場合があります。
Location項目を指定しなかった場合には、次のパスが自動的に指定されます。
C:\Users\[User]\Documents\NEXAWEB\Nexacro N\projects\
Nexacroアプリの作成
Nexacroアプリはフォーム(Form)をベースに動作します。
コンポーネントの配置
Project Explorerの下部に生成されたForm_Work項目をダブルクリックすると、Form Designウィンドウが有効になります。
画面に表示されるツールバーは、設定によって異なる場合があります。画面に表示されるツールバーは、[View > Toolbars]メニューで設定することができます。
nexacro studioメニューは、リボンとコマンドメニューのいずれかを選択して使用することができます。このドキュメントでは、コマンドメニューに設定された状態で説明します。
Nexacroアプリで文字を表示するときは、Staticコンポーネントを使用します。'Objects'ツールバーで、Staticコンポーネントをマウスで選択し、Form Designウィンドウで任意の場所をマウスでクリックすると、デフォルト値として設定されているサイズのStaticコンポーネントが配置されます。
コンポーネントをForm Designウィンドウに配置したときにサイズを変更する場合は、「Objects」ツールバーでコンポーネントをマウスで選択して、コンポーネントを描画する位置でマウス左ボタンを押したままマウスをドラッグすると、任意のサイズにコンポーネントを配置することができます。コンポーネントを配置した後も、マウスでコンポーネントを選択し、コンポーネントのサイズを調整することができます。
Staticコンポーネントのテキストを変更するときにはコンポーネントを選択し、ショートカットキー（F2）を押すと、編集モードに切り替わり、直接変更することができます。Form Designウィンドウではなく、プロパティウィンドウでも該当プロパティを変更することができます。 Staticコンポーネントを選択し、プロパティウィンドウで、textプロパティの項目を変更します。
変更するプロパティ名を知っている場合には、検索する文字列を1番ウィンドウに入力すると、目的の項目をすぐに見つけることができます。今回の例では、「text」という文字列を入力しました。そして、textプロパティ値を「Hello, Nexacro N」に修正します。
コンポーネントのテキストをForm Designウィンドウから直接変更するときに、コンポーネントをクリックして選択し、もう一度クリックしてテキスト編集状態になります。クリックの間の間隔が短いダブルクリックとして認識されて、onclickイベントのスクリプト編集ウィンドウに移動します。
デザイン画面でStaticコンポーネント以外の領域をクリックすることで、Formが選択されます。プロパティリストでwidth、heightプロパティ値をそれぞれ300、200に修正し、保存します。
Generate
修正されたNexacroアプリを確認したい場合は、Quick Viewを使用します。 Quick Viewを実行するメニューは以下の通りです。
[Menu] Generate > NRE(Nexacro Runtime Environment)でアプリを実行する
実行オプションを設定できる画面が表示されます。初期設定のままで[Run] ボタンをクリックします。
イベント追加
StaticコンポーネントをクリックしたときAlertウィンドウを表示する機能を追加します。ユーザーの特定の行為や条件によって動作が発生することをイベントといいます。
nexacro studioでStaticコンポーネントを選択し、プロパティウィンドウから1[Event]アイコンを選択した後、onclick項目の2入力ウィンドウをダブルクリックします。
nexacro studioでクリックイベントを追加するときは、Form Designウィンドウで該当コンポーネントをダブルクリックしてください。Form Scriptウィンドウに切り替えながらイベントを指定する関数がタスクウィンドウに自動的に作成されます。
this.Static00_onclick = function(obj:nexacro.Static,e:nexacro.ClickEventInfo)
{
};作成された関数には、該当コンポーネントをクリックしたときに実行する動作を指定することができます。Alertウィンドウに特定の文句を表示するコードを追加します。
this.alert("Nexacro N");メニュー[Generate > Quick View]を選択し、設定画面で[Run]ボタンをクリックし、アプリを実行します。「Hello, Nexacro N」と表示されているテキスト領域をクリックすると、下記のような警告ダイアログが表示されます。
WRE(Web Runtime Environment)でアプリ実行
メニュー[Generate > Quick View]を選択し、設定画面のBrowser項目から実行したいWebブラウザ（例題ではChrome）を選択します。
[Run]ボタンをクリックすると、選択したWebブラウザ（例題ではChrome）が起動され、画面が表示されます。
「Hello, Nexacro N」と表示されているテキスト領域をクリックすると、下記のような警告ダイアログが表示されます。
本章では下記の内容を習得しました。
新規プロジェクトの作成
Staticコンポーネントの配置およびtextプロパティの編集
Formサイズ（width、height）の変更
作成した画面をNREで実行
Staitcコンポーネントでマウスクリック時にイベントを処理する機能の追加
作成した画面をWebブラウザで実行