[ Siena 目次 ]

コレクションの追加・更新・削除の
サンプル

コレクション内のデータをギャラリーに表示して、データの追加・更新・削除を行うアプリを試作します。
検索・照会画面の機能と合わせると、業務アプリケーションを設計する際のプロトタイプになりそうです。 Export / Import のサンプルに機能を追加して試作しました。


実際の画面を確認

シンプルなオープニング画面で始まります。数秒したら、自動で次画面に移ります。
このあたりのテクニックは、表紙画面のサンプルに詳細を記述していますので、興味のある方はご覧ください。
スクリーン1
オープニング画面を挿入したのは、初期モード(今回は追加モード)を設定するタイミングとして使用するためです。初期処理のつもりです。
右下のカウントダウンが０になったとき、次画面に遷移します。
スクリーン2
追加モードが表示されました。ここで項目を入力後、追加ボタンをタッチ(クリック)すると、データが右側のギャラリーに追加されます。
スクリーン3
データを何件か追加しました。次に、画面左側のモード選択用ドロップダウンを使用して、更新モードにします。
スクリーン4
更新モードになりました。ギャラリー内の一件を選択すると、入力用ボックスにデータが表示されます。データを変更して、更新ボタンをタッチ(クリック)します。
スクリーン5
三件目のデータが更新されました。本来であれば、削除後も選択行を３件目にしたいのですが、その方法がわからないので、選択行が１行目に戻っています。今度は、削除モードに移ります。
スクリーン6
削除モードになりました。削除ボタンを２種類、サンプルとして用意しました。ギャラリー内とギャラリー外です。処理の記述が少し異なります。この辺りは後述します。
４件目を選んで、削除ボタンをタッチ(クリック)します。
スクリーン7
４件目が削除されました。本来であれば、削除後も選択行を４件目にしたいのですが、その方法がわからないので、選択行が１行目に戻っています。


以下に、作成時のポイントを記述します。

[ 目次 ]
  1. 実際の画面を確認
  2. 事前準備
  3. 仕様確認
  4. 今回の特徴
  5. 仕組みの解説



事前準備

エクセルシートや画像・動画を使用しないので、準備は不要です。



仕様確認

  1. 画面左端に、モード選択用ドロップダウンを配置します。
  2. 画面左側に、入力・選択用ボックスと、モードごとのボタン(追加・更新・削除)を配置します。
  3. 画面右側に、コレクションの内容を表示するギャラリーを配置します。
  4. 追加モードの時、追加ボタンが押されたら、入力された内容をコレクションに追加します。
  5. 更新モードの時、ギャラリー内の選択されたデータを入力・選択用ボックスに表示します。データ変更後に更新ボタンを押すことで、データの更新を行います。
    ID 項目はキー項目のつもりなので、更新できないようにします。
  6. 削除モードの時、ギャラリー内の選択されたデータを入力・選択用ボックスに表示します。削除ボタンを押すことで、対象データをコレクションから削除します。



今回の特徴

視覚要素を重ね合わせて配置し、動作モードによって表示/非表示をコントロールしています。

例えば追加・更新・削除ボタンはすべて同じ位置に配置しており、表示/非表示を Visible 属性でコントロールしています。 これは、ID入力ボックス・性別ドロップダウン・名前入力ボックス・生年月日入力ボックスも同様です。

追加処理用の視覚要素は、 Visible 属性で、 Mode="追加モード" と指定し、
更新・削除用は、 Or(Mode="更新モード",Mode="削除モード") と指定しています。
どちらの場合も、式が true の時に表示されます。

次の「仕組みの解説」では、この説明が重複するため、 Visible 属性をいくつか省略しています。ご了承ください。



仕組みの解説

ここでは、貼り付けた部品の属性を ExpressView で確認します。
部品を選んで右下の ExpressView ボタンをクリックすれば、画面右に開きます。
以下、画像をクリックすると拡大画面が表示されます。

  1. タイマー
    2. タイマーが終了したら次画面に遷移します。
    TimerEnd 属性で、
    If(Timer1!Value=Timer1!End,Navigate(Main,ScreenTransition!Fade,{Mode:"追加モード"}))
    と指定している部分がそれです。 ナビゲート処理の時に {Mode:"追加モード"} と指定することにより、次画面が追加モードで表示されます。
    オープニング画面の処理については、表紙画面のサンプルに詳述してますので、そちらをご覧ください。
    タイマー1

  2. モード選択用ドロップダウン
    3. 選択項目の中身を Items 属性で指定しています。
    ["追加モード","更新モード","削除モード"] と指定している部分がそれです。

    モードが選択されたら、 Mode 変数にモード名を入れています。
    OnSelect 属性で、
    UpdateContext({Mode:ModeDropdown!Selected!Value})
    と指定している部分がそれです。
    モード選択用ドロップダウン1
    ドロップダウンの中身は、今回のように直打ち指定もできますが、検索・照会画面の時のように、コレクションやデータソースを指定することもできます。

  3. ID入力ボックス(追加用)
    4. 追加モードの時のみ、表示されるようにしています。
    Visible 属性で、 Mode="追加モード" と指定している部分がそれです。
    この式が true であれば、表示されます。
    ID入力ボックス(追加用)1
    名前入力ボックス(追加用)と生年月日入力ボックス(追加用)も、同様の指定をしています。

  4. 性別ドロップダウン(追加用)
    5. 選択項目の中身を Items 属性で指定しています。
    ["男","女"] と指定している部分がそれです。
    性別ドロップダウン(追加用)1
    Visible 属性の指定は、名前入力ボックス(追加用)と同様です。

  5. 追加ボタン
    6. このボタンが押されたときに、入力内容をコレクション Members に追加しています。
    OnSelect 属性で、
    Collect(Members, {ID:IDBox!Text,Name:NameBox!Text,
    Sex:SexBox!Selected!Value,DateOfBirth:DateOfBirthBox!Text})
    と指定している部分がそれです。
    追加ボタン1

  6. ID入力ボックス(更新・削除用)
    7. ギャラリー内で選択されたデータの ID 項目を表示します。
    Default 属性で、 Gallery1!Selected!ID と指定している部分がそれです。

    更新・削除時に入力できないようにします。
    Disable 属性で、 true と指定している部分がそれです。
    ID入力ボックス(更新・削除用)1
    Visible 属性の指定は、今回の特徴で確認してください。

  7. 名前入力ボックス(更新・削除用)
    8. ギャラリー内で選択されたデータの Name 項目を表示します。
    Default 属性で、 Gallery1!Selected!Name と指定している部分がそれです。

    削除モード時に入力できないようにし、背景色も変えます。
    Disable 属性で、 Mode="削除モード" と指定し、
    Fill 属性で、 If(Mode="削除モード",RGBA(127, 127, 127, 0.5),RGBA(255, 255, 255, 1)) と指定します。
    名前入力ボックス(更新・削除用)1
    生年月日入力ボックス(更新・削除用)も、同様の指定をしています。

  8. 性別ドロップダウン(更新・削除用)
    9. ギャラリー内で選択されたデータの Sex 項目を表示します。
    Default 属性で、 Gallery1!Selected!Sex と指定している部分がそれです。

    選択項目の中身を Items 属性で指定しています。
    ["男","女"] と指定している部分がそれです。
    性別ドロップダウン(更新・削除用)1
    削除モード時に入力できないようにし、背景色も変えるために、 Disable 属性と Fill 属性は、名前入力ボックス(更新・削除用)と同様にしています。

  9. 更新ボタン
    10. ギャラリー内で選択されているデータを、入力内容で更新します。
    OnSelect 属性で、
    UpdateIf(Members,ID=Gallery1!Selected!ID,{Name:NameBox_Upd!Text,
    Sex:SexBox_Upd!Selected!Value,DateOfBirth:DateBox_Upd!Text})
    と指定している部分がそれです。

    更新モードの時のみ、表示します。
    Visible 属性で、 Mode="更新モード" と指定している部分がそれです。
    更新ボタン1
    ID 項目の値をキーにして、更新しています。

  10. 削除ボタン(ギャラリー外)
    11. ギャラリー内で選択されているデータを削除します。
    OnSelect 属性で、 RemoveIf(Members,ID=Gallery1!Selected!ID)
    と指定している部分がそれです。

    削除モードの時のみ、表示します。
    Visible 属性で、 Mode="削除モード" と指定している部分がそれです。
    削除ボタン(ギャラリー外)1
    この削除ボタンは、 ID 項目の値をキーにして、削除しています。

  11. 削除ボタン(ギャラリー内)
    12. ギャラリー内で選択されているデータを削除します。
    OnSelect 属性で、 Remove(Members,ThisItem) と指定している部分がそれです。
    関数に Remove を使用しています。 RemoveIf 関数を使用した前記の削除ボタンと比較してみてください。

    削除モードの時のみ、表示します。
    Visible 属性で、 Mode="削除モード" と指定している部分がそれです。
    削除ボタン(ギャラリー内)1
    こちらはギャラリー内に配置されているので、 ThisItem キーワードで簡単に指定できます。ネットショップの商品確認画面を連想させます。画面の性質やデータ数によっては、こちらの方がふさわしいケースもありそうです。

  12. ギャラリー
    13. データ登録用のコレクション Members を、ギャラリーに結びつけます。
    Items 属性で、 Members と指定している部分がそれです。
    ギャラリー1



感想

こうした画面を作成すると、ついつい Excel のユーザーフォームなどと比較してしまいます。

作成しやすさは Project Siena に軍配が上がります。特に、画像も楽に使えるギャラリー機能の充実は秀逸ですし、属性の指定しやすさもあります。

しかし、実際の定型業務利用(長期利用)を想像すると、 Excel に軍配が上がりそうです。
細かい属性は ExcelVBA の方が充実している気がします。

また、特にデータの入出力について、 Project Siena は xml による入出力なので、Excel 及び ExcelVBA でまとめたほうが、定型業務には強そうです。(仮に、メトロアプリが直接エクセルシートを編集できるとしたら、このあたりの感想は変わる部分があります)

もし定型業務の設計などで利用するならば、プロトタイプ作成ツールとして出番があるのではないかと思っています。

やはり、メトロアプリ(及び Project Siena )には、もっと異なる斬新な活用法を開拓したいところです。