SAPクラウド演習 BUILD-3. 画面のプロトタイプ Page 1

1.  プロジェクトの作成

準備： SAP Document Center からサンプルファイルをダウンロードしてください。ダウンロードできない場合は、Send a Direct Mesage で関原宛に連絡してください。

BUILD にログイン：https://www.build.me/splashapp/

WORKSPACE -> Projects -> New Project -> CREATE NEW PROJECT

画面のプロトタイプを作成します。

2.  画面フロー、画面テンプレートの指定

今回の HappyKids のアプリは3画面あり、タブレットとスマホでの利用がメインになります。

Page 1 – Responsive

Page 2 – Object Page

Page 3 – Responsive

右上の ＋ アイコンで から Page 2 – Object Page、Page 3 – Responsive をそれぞれ追加します。

3.  オブジェクト・モデル、データのインポート

Page1を選択すると、プロト作成ツールが立ち上がります。

左上にコントロールの一覧、左下に階層化されたアウトライン、右側にプロパティが配置されています。

最初はツールになれないのでミスしますが、UnDo ボタンを覚えておきましょう。

左上の DATA を選択してあらかじめ作成しておいたデータ・モデルをインポートします。

サンプルデータ をダウンロードして使ってくださいください。ProductCatalog_Sample.zip を展開してProductCatalog_Sample.xlsx をインポートします。

ヒント：メタデータはプログラム内で使われるので英語で定義しておきましょう。

4.  Page 1 の作成

最終的な出来上がりのイメージ、アウトラインはこのようになります。

各オブジェクトの階層関係を頭に入れておくと作業がスムーズです。

RESPONSIVE PAGE

-> TABLE

-> RAW

-> CELL

Responsive Page Title を選択して商品リストに書き換えます。

Show Footer をオフ。

次に RESPONSIVE PAGE の下に テーブル・コントロールを配置します。左のCONTROLSタブでListのグループからTableコントロールをドラック＆ドロップします。

4.２  TABLE の設定

左側のOUTLINEでTableが選択されている事を確認します。

右側のPROPERTIESで以下の設定を行います。

• 行がクリックされたら次のページへ行く
• Columns を5列に (2 Column 追加）
• Raw を１行に(2行削除)

出来上がり：

4.3 RAW-CELL の設定

以下の作業を5セル分繰り返します。

左側のOUTLINEでTableが選択されている事を確認します。

Table が選択されている事を確認。

次に1行目を選択。RAWオブジェクトを編集中である事を確認。

自動設定された最初の3つのCellを削除します。

Before:                                           After:

5つのCellがあるので以下を設定していきます。

1. 画像 – Image
2. 商品 – Item Identifier
3. 価格 – Item Number
4. 在庫 – Text
5. 評価 – Rating Indicator

1つ目のCellを選択。Cellの下に Content=Imageを追加。

同様に繰り返します。

Table 選択 -> RAW選択 -> CELL 選択 -> 上記の残り4つのCellを設定。

このような画面になります。

各ラベルテキストを何回かクリックして、テキストを変更します。

4.4 データバインド

テーブルにデータをバインドします。

このような画面になります。

次はCell レベルのデータバインドです。

Table 選択 -> RAW選択 -> CELL 選択 -> 以下を設定

1. 画像 – Image
2. 商品 – Item Identifier (Item Identifier.Text = ID + Item Identifier.Title = Name)
3. 価格 – Item Number (Number.Number = Price + Item Number.Unit = Currency)
4. 在庫 – Text (Text.Text = Pieces)
5. 評価 – Rating Indicator (Rating Indicator.Value = AvgRating)

5.  サンプル画像のインポート

以下の名前でサンプル画像をインポートします。ドラッグ＆ドロップでFILES領域にインポートします。