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

#はじめに
どうも！
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内で呼び出すことで簡単に似たページを作ることができます。
もし似た構造のページを複数作成する機会がある方はご参考までに。