今回はCDP Studio Tutorialの第2話になります。前回は簡単なプロジェクトを作成しましたが、次はGUI(Graphic User Interface)の作り方について紹介します。
さ、始めよう！
Reference Link
CDP Studio UI designer?
CDP Studio UI Designerは、開発者がUIデザインの知識がなくてもユーザーインターフェイスをドラッグ＆ドロップで簡単に操作できますから、デザインできるように作られています。また、部品のプロパティを使ってカスタマイズが可能で、コーディングやスクリプトの作成は不要です。UIはスケーラブルなグラフィックスで作られており、あらゆるスクリーンサイズに自動的に対応できます。。
No-code Web HMI
コード不要のCDP Studio UI Designerを使用して、デバイスやブラウザで動作するWebユーザーインターフェースを作成できます。ドラッグ＆ドロップのエディターだけでhtml5のコーディングや知識を必要とせず、ウェブHMIを作成できます。
Built-in web server
Web UI / HTML5をサポートし、Webサーバーを内蔵してされ、Javascriptや任意のWebデザインツールを使用したWeb UIを作成し、これを制御システムのロジックと統合することができます。
Implementation
Add new
Tutorial1で作られたプロジェクトを右クリック>Add Newします。
CDP Applicationを選び>Chhoseで進みます。
DefaultのApplication TypeはConsoleです。
そのApplication TypeをGUIに変更し、Next>で進みます。
Finishでプロジェクトを作成しましょう。
GUI アプリケーションが作成されました。
Design
画面を作るため、”Design”をクリックします。
CDP StudioがScreen作成の画面になります。
Add label
右のDisplay WidgetsからLabelを追加してみましょう。
Done!
Labelを選択すると、Property画面が表示されます。TextのFieldからラベルの表示文字を変更できます。
例えばTextがMyvalueに入力すると、Labelの表示文字もMyValueに反映されています。
Add button
次はボタンを追加してみましょう。Buttons>Message Buttonを選び、画面に追加します、
ボタン2つ画面に追加しましょう。
それぞれのボタンが異なるイベントをTriggerします。
Event
イベントを追加するにはボタンを選択して右のPropertiesからcdpPressedRoutingのFiledから、ボタンがクリックされたときの動作Tagを設定できます。
Tutorial1Appは最初にの記事で作られたプロジェクトです。
Tutorial1App.SendMessage.Triggerを設定しました。
Link Label
次はLabelを表示するTagを接続します。Labelを選択し>cdpRoutingから接続するTagを設定しましょう。
こちらが設定したプロジェクトの結果です。AppNameは今回Tutorialで新規作成したGUIアプリケーションで、Tutorial1で作成したプロジェクトのSendSubMessage・SendAddMessageのTriggerと繋がっていて、MessageoutはGUI アプリケーションのLabelと紐ついています。
Deloy
プロジェクトをRuntimeにDeloyしBinary FileをDownloadしましょう。
