PL-200 学習メモ (2) : キャンバス アプリ（一覧画面、詳細画面）

※ この投稿について

キャンバス アプリ

• キャンバスにボタンやテキストを配置することでコードを書かずにアプリが作れる
• アプリの作成時にレイアウトを「タブレット」向けか「携帯 (スマホ)」向けかを指定する
  • 「タブレット」を選ぶと、設定からサイズも変更できる
    • 16:9 (既定)
    • 4:3 iPad など
• Dataverse のデータから自動的にアプリを作ることができる
• 既定で 2 分ごとに自動保存される

キャンバス アプリの作成

Dataverse から作成

1. [作成] - [Dataverse] をクリック
   

2. [新しい接続] から Dataverse を選び、サンプルデータのテーブルを選択して [接続]
   

3. 自動的に一覧画面、編集画面、新規作成画面の 3 つの画面をもつアプリが作成される

4. 

空のアプリから作成

同じキャンバスアプリを空のアプリから作成してみます。

一覧画面

1. [作成] - [空のアプリ] をクリック

2. [空のキャンバスアプリ] をクリックし、形式で [タブレット] か [携帯] を選択して [作成]
   

3. [挿入] - [垂直ギャラリー] をクリック
   ※[レイアウト] 配下からそのほかのギャラリーも選択できる
   

4. [データソース] を選択
   

5. ギャラリーが追加される
   

6. 表示する項目の配置は [プロパティ] の [レイアウト]、各項目に表示する内容は [フィールド] から指定できる
   
   

7. ギャラリー内のラベルの文字の色やサイズといったプロパティも任意に変更できる
   ※ ギャラリーでは 1 行目の項目についてプロパティを変更すれば、すべての行に反映される。
   

詳細画面

1. [新しい画面] から空の画面を追加
   

2. [挿入] - [表示フォーム] をクリック
   

3. 一覧画面と同様にデータソースを選択し、[フィールド] から表示する列を選択
   

4. [詳細設定] - [Item] に以下を入力することにより、一覧画面で選択した行を表示することができる

Item 欄：
【一覧画面のギャラリーの名前】.Selected

例：
Gallery1.Selected

一覧画面からの画面遷移

一覧画面をクリックした際に、詳細画面に遷移するように変更します。
画面をクリックした際の動作は onSelect プロパティで制御します。

1. 一覧画面の Garallery の onSelect に以下を設定する

Navigate(DetailScreen)

2. Garallery 配下のラベルなどの onSelect に以下を設定する
※ 初めから設定されています。

Select(Parent)

これで Garallery 内のどこをクリックしても、Garallery の onSelect に設定されている Navigation により、詳細画面に遷移するようになります。

戻るボタン

詳細画面から一覧画面に戻るためのボタンを追加します。

1. [挿入] - [図形] - [戻る矢印] をクリック
   
2. 配置した 戻る矢印 の onSelect プロパティに以下を設定する

Back()

これで一覧画面から詳細画面に遷移した後で、戻るボタンで元の一覧画面に戻ることができるようになりました。

画面遷移におけるアニメーション

Navigation() / Back() ではクリックした際のアニメーションを設定することもできます。

例：
Grallery と 戻る矢印 の onSelect を以下に変更すると、ページがスライドして遷移する効果を設定できます。

Navigate(DetailScreen, ScreenTransition.Cover)

Back(ScreenTransition.UnCover)