View側になるべく手をつけずUIを作ってみる

4432 ワード
KYOSO SAP SAPUI5 SAP テキストリンク

はじめに

どうも！
SAPUI5の開発にて同じような構成の画面を大量に作る機会があり、
UIをController側で作る機会があったので
自分へのメモとして記事を書かせていただきます。

やりたいこと

View側をいじらずにUIを作成したい

ページを定義し、埋め込む

まず大元となるページを定義していきます。
ViewのXMLファイルは以下のような感じ。

<mvc:View controllerName="controllerName" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
    <Shell id="shell">
        <App id="app">

        </App>
    </Shell>
</mvc:View>

あらかじめAppにidを付与しておきます。(ここではappとしています。)
基本的にここからView側を触ることはありません。

Controller内で以下の内容の関数を定義し,Oninit内で呼び出します。
今回はsap.f.semantic.SemanticPageを使っていきます。

    createPage: function () {

        var app = this.getView().byId("app");

        // ページ定義
        var semanticPage = new sap.f.semantic.SemanticPage({
            id: "semanticPage",
            showFooter: false,
            preserveHeaderStateOnScroll: false,
            toggleHeaderOnTitleClick: true,
            headerPinnable: true,
            titleHeading: new sap.m.Title({
                id: "title",
                text: "テストページ"
            })
        });

        app.addPage(semanticPage);
    }

SemanticPageを定義し、app.addPageでPageを埋め込んでいます。

この段階で画面はこんな感じ。

色々コンテンツを差し込んでみる

showFooterをtrueにするとフッターが出てきたりヘッダにボタンを追加することも可能です。

        // ヘッダ部分に検索ボタンを追加
        var titleMainAction = new sap.f.semantic.TitleMainAction({
            id: "btSearch",
            text: "検索",
            press: function (oEvent) {
                this.onSearch(oEvent);
            }.bind(this)
        });
        semanticPage.setTitleMainAction(titleMainAction);

        // ヘッダ部分に実行ボタンを追加
        var footerCustomActions = new sap.m.Button({
            id: "btExecute",
            text: "実行",
            enabled: false,
            press: function (oEvent) {
                this.onExecution(oEvent);
            }.bind(this)
        });
        semanticPage.addFooterCustomAction(footerCustomActions);

ページのコンテンツ部にテーブルを差し込む関数も入れてみます。

    createTableContents: function () {
        var semanticPage = sap.ui.getCore().byId("semanticPage");

        // テーブル生成
        var Table = new sap.ui.table.Table({
            id: "table",
            visibleRowCount: 10,
            rows: "{path:'data>/results'}",
            width: "100%",
            selectionMode: "None",
            enableSelectAll: true,
            ariaLabelledBy: "title",
            columns: [],
            showNoData: true,
            fixedColumnCount: 1
        });

        //テーブルタイトルを追加
        var Title = new sap.m.Title({
            id: "tableTitle",
            text: "テストテーブル"
        });

        var toolbar = new sap.m.Toolbar({
            content: Title
        });
        Table.addExtension(toolbar);

        // セマンティックページのコンテント部に追加する
        semanticPage.setContent(Table);
    }

ということであっという間にController側で簡易的なUIが完成しました

エラーが出てきて画面が表示されない

以下のようなエラーが出てくる場合は
TypeError: sap.f.semantic.SemanticPage is not a constructor
TypeError: sap.ui.table.Table is not a constructor

manifest.jsonファイルの"dependencies"部分の"libs"に以下の記述を追加します。
"sap.f": {},
"sap.ui.table": {},

終わりに

簡易的なページですがほぼViewには手を加えずにController側のみでページを作ることができました。
上記の関数に少し手を加えて共通関数として定義すれば、各々の画面のOninit内で呼び出すことで簡単に似たページを作ることができます。
もし似た構造のページを複数作成する機会がある方はご参考までに。