App Makerのウィジェットにデフォルトで仕込まれているバインディングとアクションが超ありがたい

ui

photo credit: MadFishDigital Wireframes via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

初心者向けにApp Makerのチュートリアルをお送りしています。

前回の記事はこちら。

App Makerでアプリに簡単なフォームとテーブルを設置する
初心者向けApp Makerチュートリアルをお送りしています。今回は、App Makerでモデルと連携したフォームとテーブルのウィジェットの設置の方法、またそれらのUIや動作についてお伝えします。

モデルと連携したフォームウィジェットとテーブルウィジェットの設置方法についてお伝えしました。

このような便利なUIをすぐさま利用できるのがApp Makerの魅力なのですが、さらに観察するとそのありがたさがわかるというもの。

今回は、App Makerのウィジェットにデフォルトで仕込まれているバインディング、またはアクションという機能を通して、App Makerの底力をより深掘りしていきたいと思います。

では、行ってみましょう!

スポンサーリンク

前回までのおさらい

前回までで、「従業員データベース」というアプリにフォームウィジェットと、テーブルウィジェットを作成しました。

こんなやつです。

App Makerによる従業員データベース

そして、これらのフォームは「EmployeeData」という名前のモデルをデータソースとしたもので、それとガッツリ連携しています。

EmployeeDataのフィールド構成は以下の通りです。

Type Name Display Name
String Name 名前
String Email Emailアドレス
Date HireDate 入社日
Boolean Active アクティブ

今回は、このアプリをベースに、デフォルトのウィジェットについて、そのナイスな機能を観察をしてきます。

バインディングとは

App MakerのUIでは超強力な機能があります。その一つがバインディングです。

バインディングはウィジェットのプロパティと別のプロパティを相互にリンクする機能です。

片方のプロパティを変更すると、もう一方のプロパティが変更されます。

フォームウィジェットのバインディングを確認する

例として、フォームウィジェットの名前欄をクリックしてProperty Editorを眺めてみましょう。

App Makerのバインディング

valueプロパティのところに

@datasource.item.Name

とありますね。

これがバインディングパスです。

どういう意味かというと、分解すると以下のような意味があります。

  • datasource:ウィジェットのデータソース。 今回はモデルとして連携している「EmployeeData」になります。
  • item:現在選択されているレコード。
  • Name:フィールドの値。

ということで、「データソースの今選択されているレコードのNameフィールドの値」を意味しているというわけですね。

テーブルのこの欄で変更をしたらデータソースの該当の値も変更される、というわけですね。

バインディングのうち、データソースの値へのバインディングは、データバインディングと呼ばれます。

また、labelプロパティには

@models.EmployeeData.fields.Name.displayName

とあります。

ここもバインディングなんですね。

  • models.EmployeeData:EmployeeDataモデルのこと
  • fields.Name.displayName:NameフィールドのdisplayNameプロパティ

フォームウィジェットではラベルを編集する機能がないので、モデルから引っ張ってくる一方ですが、バインディングしているということですね。

イベントとアクションとは

App MakerのUIに関して、もう一つの強力な機能がイベントとアクションです。

イベントは特定の出来事の発生のことで、以下のようなものがあります。

  • アプリが始まる
  • データソースがロードされる
  • アプリが権限をチェックする
  • ユーザーがボタンをクリックする
  • アプリがデータにアクセスまたは変更する
  • アプリがデータを検証する

それで、このようなイベントが発生したときに、何らかの動作を発生させることができ、それをアクションといいます。

例えば以下のようなものです。

  • 新しい項目を作成する
  • 現在のアイテムを削除する
  • データソースのリロード
  • クライアントスクリプトの実行

アクションはイベントが発生したときに発動する動作のことです。

フォームとテーブルのデフォルトアクション

それで、App Makerのウィジェットには、デフォルトでイベントに対するアクションが定義されているので、見てみましょう。

例えば、以下の図に示すフォームウィジェットの「CREATE」ボタンです。

Property EditorでonClickの箇所をクリックすると中身を確認できます。

App MakerのフォームのCREATEボタンのアクション

アクションとして新たなアイテムを生成するコードが埋め込まれています。

もう一つ見てみましょう。

テーブルウィジェットの「名前」をクリックして、Property EditorのonClickを確認します。

App Makerのテーブルのラベルのアクション

Nameフィールドでテーブルの並び順をソートするコードが仕込まれています。

まとめ

以上、App Makerのウィジェットに仕込まれているステキな機能、バインディングとアクションについてお伝えしました。

Google Apps ScriptでUIを作るのは本当に大変だったのですが、App Makerは超協力にその機能が補完されています。

デフォルトであったほうが良いバインディングやアクションがすでに用意されていて、不要であればProperty Editorで編集できますし、必要に応じてカスタマイズすることも可能です。

超ありがたいですね~

次回からは、アプリの「スタイル」を変更するチュートリアルを紹介していきますよ。

App Makerのスタイルの基本とテーマを使って全体のスタイルを変更する方法
初心者向けApp Makerのチュートリアルをお送りしています。今回はApp Makerのスタイルの基本について、またテーマという機能を使って全体のスタイルを設定する方法についてお伝えします。

どうぞお楽しみに!

連載目次:はじめてのモデル~AppMaker初心者向けチュートリアル~

初心者向けチュートリアルの第2弾。このシリーズではApp Makerで「モデル」を作成してデータベースと連携したフォームやテーブルの設置の仕方について体験をします。
  1. App Makerでデータベースを作成する「モデル」への最初の一歩
  2. App Makerでアプリに簡単なフォームとテーブルを設置する
  3. App Makerのウィジェットにデフォルトで仕込まれているバインディングとアクションが超ありがたい

コメント

  1. howdy39 より:

    >バインディングはウィジェットのプロパティと別のプロパティを相互にリンクする機能です。

    正確に書くと、相互にリンクするのは `データバインディング` ですね。

    バインディングは `式が書ける` のがポイントですね。
    データソースのプロパティを書いても良いし(データバインディング)
    ウィジェットのプロパティ同士をつなげても良い。

    面白い使い方だと
    Client Scriptにfunctionを書いておいてそれを呼んだって良いのです
    // Client Script
    function addTax(number) {
    return Math.floor(number * 1.08);
    }
    // バインディング
    addTax(@datasource.item.Number)

    バインディングは、スプレッドシートのセルに入れる式をイメージしてもらうのが良いかなーと思います!
    ※セルと違って相互参照も出来る

    • コメントありがとうございます!

      いただいた例のようにスクリプトをかますと、本当に幅が広がりますね。
      これはかなり有用ですね…!

タイトルとURLをコピーしました