- SAP Managed Tags:
SAP クラウド演習 BUILD-3 では実際に動かせる画面のプロトタイプを作成します。
既に、デザイン思考ワークショップ、各種 Study で基本的な画面構成は出来上がっている状況です。
参照 YouTube ビデオ：
準備： SAP Document Center からサンプルファイルをダウンロードしてください。ダウンロードできない場合は、Send a Direct Mesage で関原宛に連絡してください。
BUILD にログイン：https://www.build.me/splashapp/
WORKSPACE -> Projects -> New Project -> CREATE NEW PROJECT
画面のプロトタイプを作成します。
今回の HappyKids のアプリは3画面あり、タブレットとスマホでの利用がメインになります。
Page 1 - Responsive
Page 2 - Object Page
Page 3 - Responsive
右上の ＋ アイコンで から Page 2 - Object Page、Page 3 - Responsive をそれぞれ追加します。
Page1を選択すると、プロト作成ツールが立ち上がります。
左上にコントロールの一覧、左下に階層化されたアウトライン、右側にプロパティが配置されています。
最初はツールになれないのでミスしますが、UnDo ボタンを覚えておきましょう。
左上の DATA を選択してあらかじめ作成しておいたデータ・モデルをインポートします。
サンプルデータ をダウンロードして使ってくださいください。ProductCatalog_Sample.zip を展開してProductCatalog_Sample.xlsx をインポートします。
ヒント：メタデータはプログラム内で使われるので英語で定義しておきましょう。
最終的な出来上がりのイメージ、アウトラインはこのようになります。
各オブジェクトの階層関係を頭に入れておくと作業がスムーズです。
RESPONSIVE PAGE
-> TABLE
-> RAW
-> CELL
Responsive Page Title を選択して商品リストに書き換えます。
Show Footer をオフ。
次に RESPONSIVE PAGE の下に テーブル・コントロールを配置します。左のCONTROLSタブでListのグループからTableコントロールをドラック＆ドロップします。
左側のOUTLINEでTableが選択されている事を確認します。
右側のPROPERTIESで以下の設定を行います。
出来上がり：
以下の作業を5セル分繰り返します。
左側のOUTLINEでTableが選択されている事を確認します。
Table が選択されている事を確認。
次に1行目を選択。RAWオブジェクトを編集中である事を確認。
自動設定された最初の3つのCellを削除します。
Before: After:
5つのCellがあるので以下を設定していきます。
1つ目のCellを選択。Cellの下に Content=Imageを追加。
同様に繰り返します。
Table 選択 -> RAW選択 -> CELL 選択 -> 上記の残り4つのCellを設定。
このような画面になります。
各ラベルテキストを何回かクリックして、テキストを変更します。
テーブルにデータをバインドします。
このような画面になります。
次はCell レベルのデータバインドです。
Table 選択 -> RAW選択 -> CELL 選択 -> 以下を設定
以下の名前でサンプル画像をインポートします。ドラッグ＆ドロップでFILES領域にインポートします。
これで Page 1 は完成です。
ハンズオン・シリーズ：クラウドでのアプリ開発: SAP Web IDE on HCP ハンズオン - まとめ
既に、デザイン思考ワークショップ、各種 Study で基本的な画面構成は出来上がっている状況です。
参照 YouTube ビデオ：
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
4.1 RESPONSIVE PAGE の設定
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があるので以下を設定していきます。
- 画像 - Image
- 商品 - Item Identifier
- 価格 - Item Number
- 在庫 - Text
- 評価 - Rating Indicator
1つ目のCellを選択。Cellの下に Content=Imageを追加。
同様に繰り返します。
Table 選択 -> RAW選択 -> CELL 選択 -> 上記の残り4つのCellを設定。
このような画面になります。
各ラベルテキストを何回かクリックして、テキストを変更します。
4.4 データバインド
テーブルにデータをバインドします。
このような画面になります。
次はCell レベルのデータバインドです。
Table 選択 -> RAW選択 -> CELL 選択 -> 以下を設定
- 画像 - Image
- 商品 - Item Identifier (Item Identifier.Text = ID + Item Identifier.Title = Name)
- 価格 - Item Number (Number.Number = Price + Item Number.Unit = Currency)
- 在庫 - Text (Text.Text = Pieces)
- 評価 - Rating Indicator (Rating Indicator.Value = AvgRating)
5. サンプル画像のインポート
以下の名前でサンプル画像をインポートします。ドラッグ＆ドロップでFILES領域にインポートします。
これで Page 1 は完成です。
ハンズオン・シリーズ：クラウドでのアプリ開発: SAP Web IDE on HCP ハンズオン - まとめ
6 Comments
