S部

超美麗UI 超高速開発ツールWavemakerで遊ぶために英語のマニュアルをさくっと読もうと思ったけど飽きたから何か作ってみる

前回、WaveMakerで遊んでみようと思ったけど行き詰まってしまったので、まずはマニュアルを読んでみます。漠然と読んでもナンなので、大事そうなところを日本語でメモってみようと思います。

www.cycle-g.info

チュートリアルを読む

前回の記事にも書きましたが、チュートリアルの資料(googleスライド 翻訳できない?)の構成はこんな感じ。

タイトル ページ数
App Building Essentials 92
Database Integration Database Integration Essentials 11
Create Database from Designer 24
Import Database 18

まずは、App Building Essentials の資料から読んでみます。

Jump Start - WaveMaker App Building Essentials - WaveMaker

P5. アプリケーションのビルドのプロセス

大事っぽいトコだけ、雰囲気で訳してみます。

f:id:cycle8b:20170428141354p:plain

  1. まずは、ページを作ってね。
  2. コンテナとしてMainエリアを区切ってね。
  3. ウィジットをコンテナにドラッグ&ドロップしてね。
  4. DatabaseかREST APIをインポートしてね。
  5. WM(WaveMakerの略かな?)が、ORMとサービスを生成するよ。
  6. Java書いて、サービスとかクエリとか拡張してね。
  7. WMが、REST-APIと、統合のためのValiables(?)を生成するよ。Valiablesは、UIのコンポーネントとバックエンドのサービスを統合するよ。
  8. ウィジットをデータのためのVariablesと結びつけてね。

P25. Import Database - Providors

f:id:cycle8b:20170428141653p:plain

主要ドコロのDBは使えるよ.

P31. Variables Types

f:id:cycle8b:20170428152037p:plain

Variablesってのは、データとウィジットの統合を提供するよ。Variablesってのは、4種類あるよ。

  • Live Variable: 独立したデータベースへのコネクタ。自動生成されたCRUDのAPIを投げるよ。
  • Service variable: webサービスからDBにつなぐときに使うコネクタ。カスタマイズしたロジックが必要なら、javaのコード書いてどーのこーの(exposed through a service valiable.)
  • static variable: 定義されたクライアント、UI、でもってviewやページに配置されたプロセッシングデータ(?) に、簡単にアクセスするよ。たとえば、国のリストや、ログインユーザーのプロフィールとかね。
  • Device Variables: クライアントのデバイスからデータを取得するよ。たとえば、モバイルデバイスの位置情報とかね。

・・・飽きた

ここまで、飛ばし飛ばし読んだけど、92ページ中32ページ。飽きた。

超高速で飽きた。

・・・つまり、アレでしょ。『UIを先に作ってね。で、DBとかAPIを定義してね。ウィジットとデータを関連付ければアプリが動くよ。足りない分はJava書いてね。データとウィジットの関連付けを個別にやると大変だから、抽象化したVariablesってのを用意してるから、コレを使ってね。』ってコトでしょ。英検4級ナメんな。

OK。十分だ。やってみよう。

作ってみる

ページ作ってウィジットを配置するが失敗

デフォルトのページが用意されてるので、これを利用します。手始めにデータグリッドを配置します。

f:id:cycle8b:20170428143050p:plain

そして、"IMPORT DATABASE"

f:id:cycle8b:20170428143146p:plain

いろいろ選べるけど、MySQLで。

f:id:cycle8b:20170428143216p:plain

・・・で、Databaseの設定画面が表示されますが、"DatabaseName"が選択できません。。。

f:id:cycle8b:20170428143256p:plain

ダメじゃん。先にデータを用意しろと。ごもっともだけど。

先にDatabseを作成する

気を取り直して、Databaseを作成します。

f:id:cycle8b:20170428143948p:plain

MySQLで。

f:id:cycle8b:20170428144023p:plain

DatabaseNameを指定します。DDL書いたファイルをアップロードしてもイケるっぽいですね。

DB名は、『花の名前シリーズ』でいきます。

www.cycle-g.info

f:id:cycle8b:20170428144248p:plain

で、CREATEボタンを押すと、ER図が書けるっぽい画面に。"+TABLE"ボタンを押して、テーブルを定義します。

f:id:cycle8b:20170428144423p:plain

f:id:cycle8b:20170428144508p:plain

まずは、id, name列を持つclientテーブルを作りました。まずはこれだけにしましょう。

※ここでいろいろやりたくなるんですけど、うまくいかないときに原因が探りづらくなるので我慢します。

すると、画面の上の方にメッセージが。

f:id:cycle8b:20170428144859p:plain

DB Schema is in draft state. Click here to update database with the schema changes.

まだドラフトだから、databaseに反映させてね てコトでしょうか。迷わずクリック。

f:id:cycle8b:20170428145150p:plain

・・・すると、DBの変更点が表示されました。Railsのdb/migrate的なヤツでしょうか。ここも迷わず"PROCEED UPDATE"ボタンを押すと、画面右下に"SUCCEED"の表示が。これでDBが作成されたようです。

f:id:cycle8b:20170428145331p:plain

試しにデータを入れてみる

“Query"タブがあるので、SQLが実行できるのかな?試してみます。

f:id:cycle8b:20170428145612p:plain

“RUN"ボタンを押したら、うまく行ってるっぽいですが、よくわかりません。2件目の●●建設も追加してみます。

f:id:cycle8b:20170428145729p:plain

今度はSELECTしてみます。

f:id:cycle8b:20170428145826p:plain

ちゃんと2件表示されました。なんか、右下に警告が表示されてます。

Single record option has been checked but the Query returns multiple records.

1件しか結果返さないってオプションで指定してるのに、複数行結果が返ってるよ らしいです。

ま、今は気にしないでおきましょう。

気を取り直して、DataTableを配置する。

DBからviewの画面に戻って、再びDataTableのウィジットを配置します。

f:id:cycle8b:20170428150357p:plain

こんどは、ちゃんとデータセットを指定できました。

次にレイアウトを指定します。

f:id:cycle8b:20170428150448p:plain

編集or読み取り専用も指定できるようです。ここでは、Excelライクっぽい"Quick Edit"を選択します。

次に、ページネーションを指定します。

f:id:cycle8b:20170428150612p:plain

次に、列のタイトルと、"View As"を指定します。buttonとかcheckboxとか選べるんですが、"Quick Edit"の場合はどれを選んだら良いんだろう・・・。とりあえず無難(?)に、"label"を指定します。

f:id:cycle8b:20170428150637p:plain

f:id:cycle8b:20170428150822p:plain

動作確認

“DONE"ボタンを押すと、すでにデータが表示されます。

f:id:cycle8b:20170428150949p:plain

で、"RUN"を押すと、clientテーブルを編集できるDataTableが動きました。

f:id:cycle8b:20170428151041p:plain

もちろんレスポンシブルです。

f:id:cycle8b:20170428151100p:plain

もちろん編集・行追加・削除できます。

f:id:cycle8b:20170428151143p:plain

で、画面上の余計なものを取り除いたのがコチラ。

f:id:cycle8b:20170428151210p:plain

ちょっと楽しくなってきました。

残り26日ですけど。