LoginSignup
2
2

More than 5 years have passed since last update.

【SAPUI5】OData(8) ODataを使ったSAPUI5アプリケーションの作り方 開発編-1

Last updated at Posted at 2019-01-18

概要

WebIDEを使うと、ウィザードに従って設定するだけでODataを使ったアプリケーションを作ることができます。(ほぼプログラミング不要!)
各構成要素(ファイルなど)にどのような設定があって、どうやってODataがつながるのか理解したいので、まずはウィザードで作成してそのあと設定内容を確認していこうと思います。

※OData関連の投稿一覧は以下の記事をご参照ください。
【SAPUI5】OData(1) ODataとは

ゴール

SAP Gateway Demo SystemのODataを使って、受注伝票のリストを表示します。
(SAP Gateway Demo Systemについては、前回の記事をご参照ください)

ステップ

  1. テンプレートからアプリを作成
  2. データソース(OData)を指定
    ---このページではここまで---

  3. ビューのレイアウトを作成

1. テンプレートからアプリを作成

WebIDEのホーム画面で、New Project from Templateを選択します。
image.png

SAPUI5 Applicationを選択します。色々なテンプレートがありますが、このテンプレートはシンプルなガラだけを作ってくれます。
image.png

プロジェクト名、名前空間を入力します。
image.png

ビュー名を入力してFinishを押します。
image.png

以下のようにフォルダ、ファイルが作られました。
これらのファイルの意味については以下の記事を参考にしてください。(説明がないものもありますが)
【SAPUI5】入門編の記事まとめ
image.png

この段階で実行してみます。
image.png

ポップアップが出たら、index.htmlを選択します。
image.png

タイトルだけのシンプルなアプリができました。
image.png

2. データソース(OData)を指定

manifest.jsonファイルを開いて画面下にある"Descriptor Editor"のタブを開きます。
これまではjson形式で編集していましたが、実は設定画面が用意されていたのです。
manifest.png

"Data Sources"タブを開き、+ボタンを押します。
manifest2.png

"Service Catalog"を選択し、プルダウンからES5を選択します。
Servicesのところに"GWSAMPLE_BASIC"と打ち込んで検索するとサービスが表示されるのでそれを選択します。
image.png

"Use default model"を選択すると、選択したデータソースがデフォルトのモデルに設定されます。デフォルトのモデルはアプリ実行時に自動的に読み込まれます。
image.png

これでデータソースの指定が完了しました。
image.png

Data Sourcesタブでは以下のように見えます。
image.png

Modelsタブでは"Default"の行が追加され、データソースに上記のサービスが設定されています。
image.png

自動登録されたもの

ここまでの設定の結果、自動で登録されたものを確認します。

manifest.json

manifest.jsonファイルをDescriptor EditorからCode Editorに切り替えて見てみます。
"sap.app"配下に以下のコードが追加されています。ODataの取得元やバージョンに関する情報であることがわかります。

        "dataSources": {
            "GWSAMPLE_BASIC": {
                "uri": "/ES5/sap/opu/odata/iwbep/GWSAMPLE_BASIC/",
                "type": "OData",
                "settings": {
                    "odataVersion": "2.0",
                    "localUri": "localService/metadata.xml"
                }
            }
        }

"models"配下に以下のようにデフォルトのモデルが設定されています。デフォルトのモデルなのでモデル名がブランク""になっています。

            "": {
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "defaultOperationMode": "Server",
                    "defaultBindingMode": "OneWay",
                    "defaultCountMode": "Request"
                },
                "dataSource": "GWSAMPLE_BASIC",
                "preload": true
            }

localServiceフォルダ

localServiceフォルダと、metadata.xmlファイルが作成されています。
これは、サーバに接続しない状態でもテストができるようにするための設定です。
image.png

metadata.xmlの中身は以下のようになっています。前回紹介したEntity Setがすべて含まれています。
image.png

参考

SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application

関連記事

OData(7) ODataを使ったSAPUI5アプリケーションの作り方 準備編
OData(9) ODataを使ったSAPUI5アプリケーションの作り方 開発編-2

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2