nexacro platformの開発環境を理解し、nexacro studioを扱う基本的な方法を学ぶために簡単なアプリを作成してみましょう。
この章では、次のような内容を説明します。画面に'Hello、nexacro platform！'というテキストを表示し、テキストをクリックしたときAlertウィンドウに'nexacro platform 17'というテキストを表示するアプリを作成します。
nexacro studioの実行
PCにインストールされたnexacro studioを実行します。インストール時にデスクトップにアイコンを作成した場合、アイコンをダブルクリックします。
ショートカットアイコンを作成していない場合、nexacro studioがインストールされたフォルダで実行ファイルをダブルクリックして実行することができます。 nexacro studioがインストールされたパスは次のとおりです。
C:\Program Files (x86)\nexacro\17.1N\nexacrostudio17.exe
nexacro studioのインストール後、初回起動時には、プロジェクトを開いていない状態です。
nexacro studioの画面構成は次のとおりです。
コンポーネント | 説明 |
|---|---|
1 プロジェクト エクスプローラ (Project Explorer) | 作業中のプロジェクトの構成要素を表示します。 最初の実行時には何も表示されません。 |
2 Form Design | nexacro platformアプリ画面のデザイン、スクリプト編集作業が行われるスペースです。 |
3 プロパティ ウィンドウ (Properties) | フォーム、コンポーネント、Datasetコンポーネントの属性が表示され、編集できるスペースです。 |
4 Output | エラーメッセージやGenerateメッセージ、trace()メソッドで設定したメッセージを表示するスペースです。 |
5 Error List | スクリプトの作成中にエラーをリアルタイムで確認して表示します。 |
nexacro platformプロジェクトの作成
nexacro platformアプリを作成するためには、先にプロジェクトを作成する必要があります。すべてのnexacro platformアプリは、プロジェクトで指定された属性によってユーザーの画面に表示され、動作することになります。
プロジェクトは、新たに作成したり、既に作成されたプロジェクトテンプレートを使用することができます。この章では、新しいプロジェクトを作成します。
すべての作業は、メニューまたはツールバー、ショートカットキーで実行することができます。この章では、コンポーネントの配置を除くすべての作業は、メニューに基づいて説明します。
nexacro platformプロジェクトを作成するためのメニューは、次のとおりです。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 platformアプリの作成に進みます。
この章で説明するパスはWindows 10基準で説明します。OSによって設定されたパスが変更される場合があります。
Location項目を指定しなかった場合には、次のパスが自動的に指定されます。
C:\Users\[User]\Documents\nexacro\[Install Version]\projects\
nexacro platformアプリの作成
nexacro platformアプリはフォーム(Form)をベースに動作します。
コンポーネントの配置
Project Explorerの下部に生成されたForm_Work項目をダブルクリックすると、Form Designウィンドウが有効になります。
画面に表示されるツールバーは、設定によって異なる場合があります。画面に表示されるツールバーは、[View > Toolbars]メニューで設定することができます。
nexacro studioメニューは、リボンとコマンドメニューのいずれかを選択して使用することができます。このドキュメントでは、コマンドメニューに設定された状態で説明します。
nexacro platformアプリで文字を表示するときは、Staticコンポーネントを使用します。'Objects'ツールバーで、Staticコンポーネントをマウスで選択し、Form Designウィンドウで任意の場所をマウスでクリックすると、デフォルト値として設定されているサイズのStaticコンポーネントが配置されます。
コンポーネントをForm Designウィンドウに配置したときにサイズを変更する場合は、「Objects」ツールバーでコンポーネントをマウスで選択して、コンポーネントを描画する位置でマウス左ボタンを押したままマウスをドラッグすると、任意のサイズにコンポーネントを配置することができます。コンポーネントを配置した後も、マウスでコンポーネントを選択し、コンポーネントのサイズを調整することができます。
Staticコンポーネントのテキストを変更するときにはコンポーネントを選択し、ショートカットキー（F2）を押すと、編集モードに切り替わり、直接変更することができます。Form Designウィンドウではなく、プロパティウィンドウでも該当プロパティを変更することができます。 Staticコンポーネントを選択し、プロパティウィンドウで、textプロパティの項目を変更します。
変更するプロパティ名を知っている場合には、検索する文字列を1番ウィンドウに入力すると、目的の項目をすぐに見つけることができます。今回の例では、「text」という文字列を入力しました。
コンポーネントのテキストをForm Designウィンドウから直接変更するときに、コンポーネントをクリックして選択し、もう一度クリックしてテキスト編集状態になります。クリックの間の間隔が短いダブルクリックとして認識されて、onclickイベントのスクリプト編集ウィンドウに移動します。
디자인 화면에서 Static 컴포넌트를 제외한 영역을 클릭하면 Form이 선택됩니다. 속성창에서 width, height 속성값을 300, 200으로 수정하고 저장합니다.
Generate
修正されたnexacro platformアプリを確認したい場合は、Quick Viewを使用します。 Quick Viewを実行するメニューは以下の通りです。
[Menu] Generate > Quick View
실행 옵션을 설정할 수 있는 창이 표시됩니다. 기본 설정으로 [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 platform 17");메뉴 [Generate > Quick View]를 선택하고 설정창에서 [Run] 버튼을 클릭해 앱을 실행하고 "Hello, nexacro platform"라는 텍스트 영역을 클릭하면 아래와 같이 경고창이 표시됩니다.
WRE(web runtime environment)에서 앱 실행하기
메뉴 [Generate > Quick View]를 선택하고 설정창에서 Browser 항목에서 실행할 웹브라우저를 선택합니다.
웹브라우저를 선택하면 Run Enviroment 항목이 Local Web Server로 변경됩니다. [Run] 버튼을 클릭합니다.
선택한 웹브라우저(Chrome)이 실행되고 화면이 표시됩니다.
"Hello, nexacro platform"라는 텍스트 영역을 클릭하면 아래와 같이 경고창이 표시됩니다.
이번 장에서는 아래와 같은 내용을 살펴보았습니다.
새로운 프로젝트 만들기
Static 컴포넌트 배치하고 text 속성 수정하기
Form 크기(width, height) 수정하기
만든 화면 NRE에서 실행하기
Staitc 컴포넌트에 마우스 클릭 시 이벤트 처리하는 기능 추가하기
만든 화면 웹브라우저에서 실행하기