ep1 - Dynamic create element

18328 ワード
ui5 JavaScript SAP テキストリンク

1、動的要素の作成

<Button type="Default" text="button"/>
通常、このようにXMLでタグを使用して記述されるが、jsコントローラ側で動的に作成してViewに送信する必要がある場合がある.

2、作成ボタン


<mvc:View controllerName="rain.com.step1.controller.button"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	xmlns:ce="sap.ui.codeeditor"
	xmlns:core="sap.ui.core">
	<ScrollContainer
		height="100%"
		width="100%"
		vertical="true"
		focusable="true">

		<!-- example1 -->

		<Panel id="buttonPanel" width="auto" headerText ="버튼 생성하기"></Panel>
		<ce:CodeEditor id="example1" height="10rem" type="javascript" />
		<MessageStrip showIcon="true" text="js에서 동적으로 버튼 elements를 생성해서 id가 buttonPanel인 Panel에 붙여주는 코드이다."/>


	</ScrollContainer>
</mvc:View>
View.xml
			// ex1
			example1 : function(){

				const button = new sap.m.Button({
					type : "Default",
					text : "Button1"
				});

				this.byId("buttonPanel").insertContent(button, 0)

				// code
				const example1 = `		const button = new sap.m.Button({
					type : "Default",
					text : "Button1"
				});

				this.byId("buttonPanel").insertContent(button, 0)`;

				this.byId("example1").setValue(example1);
			},
controller.js

https://ui5.sap.com/#/api/sap.m.Button
オブジェクトを作成する場合、sIdは一意のid値を表し、mSettingsは要素に設定属性を追加します.

https://ui5.sap.com/#/api/sap.m.Panel%23methods
ボタンのtypeやtextなどの属性に値を追加することで生成します.
パネルを表示する方法で、addContent()、insertContent()関数を使用して追加できます.

3、複数種類のボタンを作成する



選択ボックスでボタンタイプを選択し、生成ボタンでボタンを追加し、削除ボタンでパネルのコードをクリアします.

https://ui5.sap.com/#/api/sap.m.ButtonType
ボタンの種類はいろいろありますが、あまり使われていません.

どれも一度印刷しました.
<mvc:View controllerName="rain.com.step1.controller.button"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	xmlns:ce="sap.ui.codeeditor"
	xmlns:core="sap.ui.core">
	<ScrollContainer
		height="100%"
		width="100%"
		vertical="true"
		focusable="true">

		<!-- example1 -->

		<Panel id="buttonPanel" width="auto" headerText ="버튼 생성하기"></Panel>
		<ce:CodeEditor id="example1" height="10rem" type="javascript" />
		<MessageStrip showIcon="true" text="js에서 동적으로 버튼 elements를 생성해서 id가 buttonPanel인 Panel에 붙여주는 코드이다."/>


		<!-- example2 -->

		<Panel id="buttonPanel2" width="auto" headerText ="여러 타입의 버튼 생성하기"></Panel>
		<Panel id="example2Panel" width="auto"></Panel>



	</ScrollContainer>
</mvc:View>
View.xml
			// ex2
				example2 : function(){
	
					const codeEditor = new CodeEditor(this.createId("example2"),{
						height : "20rem",
						type : "javascript"
					});
	
					const button1 = new sap.m.Button({
						type : "Success",
						text : "생성",
						press : function () {_this.ex2createBtnPress()}
					});
	
					const button2 = new sap.m.Button({
						type : "Negative",
						text : "삭제",
						press : function () {_this.ex2delBtnPress()}
					});
	
					const select1 = new sap.m.Select(this.createId("ex2sel"));
					select1.addItem(new sap.ui.core.Item({key : "Accept", text : "Accept"}));
					select1.addItem(new sap.ui.core.Item({key : "Attention", text : "Attention"}));
					select1.addItem(new sap.ui.core.Item({key : "Back", text : "Back"}));
					select1.addItem(new sap.ui.core.Item({key : "Critical", text : "Critical"}));
					select1.addItem(new sap.ui.core.Item({key : "Default", text : "Default"}));
					select1.addItem(new sap.ui.core.Item({key : "Emphasized", text : "Emphasized"}));
					select1.addItem(new sap.ui.core.Item({key : "Ghost", text : "Ghost"}));
					select1.addItem(new sap.ui.core.Item({key : "Negative", text : "Negative"}));
					select1.addItem(new sap.ui.core.Item({key : "Neutral", text : "Neutral"}));
					select1.addItem(new sap.ui.core.Item({key : "Reject", text : "Reject"}));
					select1.addItem(new sap.ui.core.Item({key : "Success", text : "Success"}));
					select1.addItem(new sap.ui.core.Item({key : "Transparent", text : "Transparent"}));
					select1.addItem(new sap.ui.core.Item({key : "Unstyled", text : "Unstyled"}));
					select1.addItem(new sap.ui.core.Item({key : "Up", text : "Up"}));
	
					const message = new sap.m.MessageStrip({
						showIcon : true,
						text : "동적으로 생성한 셀렉트 박스와 버튼을 이용해서 여러 타입의 Button을 생성하는 코드이다."
					});
	
					this.byId("example2Panel").insertContent(codeEditor, 0);
					this.byId("example2Panel").insertContent(message, 1);
					this.byId("example2Panel").insertContent(button2, 1);
					this.byId("example2Panel").insertContent(button1, 1);
					this.byId("example2Panel").insertContent(select1, 1);
	
				},
	
				// 버튼 클릭시 셀렉트 박스 값을 가져와서 함수에 파라미터로 전달하여 호출
				ex2createBtnPress : function(){
					this.buttonCreate(this.byId("ex2sel").getSelectedItem().getText());
				},
	
				// 전달받은 값으로 type에 대입해서 Button을 생성 후 Panel에 붙임
				buttonCreate : function(type){
					const button = new sap.m.Button({
						type : type,
						text : "Button2"
					});
	
					this.byId("buttonPanel2").insertContent(button, 0);
				},
	
				// Panel안에 있는 요소 삭제
				ex2delBtnPress : function(){
					this.byId("buttonPanel2").destroyContent();
				}
controller.js
これにより、ボタンや選択ボックスなどの複数の要素を動的に生成し、ビュー端にこぼすことができます.
gitHub
文字列の使用
ViewStateのキャッシュによるネットワーク転送の削減