天翼云_香港云服务器vps_免费1年

物联网 虚拟云 浏览

小编:我刚开始学习UI5,在我的学习过程中,我在写完Hello world程序后浏览了很多博客和you tube视频 然后我开始创建2个视图,并将数据从第一个视图传递到第二个视图。我搜索了很多,但是

我刚开始学习UI5,在我的学习过程中,我在写完Hello world程序后浏览了很多博客和you tube视频

然后我开始创建2个视图,并将数据从第一个视图传递到第二个视图。我搜索了很多,但是很多人建议使用高级控件,比如Shell

但是我想使用简单的方法(主要是Eclipse生成的代码)

如果有人想尝试这个例子,不要只是复制代码,要理解概念,这样在学习UI5的过程中就很容易了概念

目标:

我有第1页,云服务器高配,有3个输入栏,我可以输入数据。

一旦用户输入数据,使用按钮提交数据,然后它必须移动第二页并且需要显示我们在第1页

中输入的数据在第2页我们页面导航设置为back Page1

信息:请观察内联代码注释以获得更多关于概念的信息。

项目:

您可以添加如下所示的2页

索引.html

—————-

第1页。查看.js

------

在这一页我使用布局矩阵,因为我是显示3个输入字段。

我建议如果你是初学者,真正云服务器,只使用一个输入框和按钮

如果你对矩阵布局没有问题,数据库安全,你可以使用

此代码将在createContent函数

var oLayout=new中sap.ui.commons.布局.MatrixLayout();  oLayout.setLayoutFixed(正确)oLayout.setColumns设置(2);  oLayout.setWidth设置宽度("500像素");  oLayout.setWidths设置宽度(["150px","150px"])//名称var oText=newsap.ui.commons.TextView({text:"输入您的姓名:"});var oInput=newsap.ui.commons.TextField({id:"input1",值:"?"});//将行添加到布局oLayout.createRow文件(oText,oInput)

//Age var oText=新sap.ui.commons.TextView({text:"年龄:"});var oInput=newsap.ui.commons.TextField({id:"input2",值:"?"});  oLayout.createRow文件(oText,oInput)

//***var oText=新sap.ui.commons.TextView({text:"***"});var oInput=newsap.ui.commons.TextField({id:"input3",值:"?"});  oLayout.createRow文件(oText,oInput)

//Submit Button var oButton=新建sap.ui.commons.Button("BtnId2",{text:"提交详细信息"});

//cotroller

//oController.导航表示导航函数在控制器类

//中可用,云播服务器,如果这样写函数(oEvent){Navigate(oEvent)},则导航函数应在本地显示

//表示页本身

oButton.attachPress附件(功能(oEvent){oController.导航(oEvent)})

//Create Cell,因为我们需要将两列合并到一个var oCell=new,将按钮放在中间sap.ui.commons.布局.MatrixLayoutCell();  oCell.setRowSpan文件(2);  oCell.addContent文件(按钮)欧塞尔.塞塔利恩(sap.ui.commons.布局中心);

oLayout.createRow文件(oCell);

//在content add Layout object//中随意更改标题//如果不使用布局,则添加文本和按钮对象(用逗号分隔);[oInput,oButton]返回新的sap.m.Page({title:"Home Page",content:[oLayout]});

----------------------------------------------第1页。控制器.js

首先在OnInit方法中创建模型

在同一控制器中启用OnInit功能创建模型

OnInit:function(){

此.myModel=新建sap.ui.model模型.json.JSONModel文件();

},

OnInit方法在整个应用程序中只调用一次

在控制器类中最后添加以下函数

导航:功能(oEvent){var事件ID=oEvent.getSource文件().getId();//警报("Hello");//警报(EventID);

//使用索引页App=sap.ui.getCore().byId("myApp1");//警报(app);

//从输入字段var InputText1获取值=sap.ui.getCore().byId("input1").getValue();var inputExt2=sap.ui.getCore().byId("input2").getValue();var inputext3=sap.ui.getCore().byId("input3").getValue();//警报(InputText);

//var context=oEvent.oSource.getBindingContext();变量oView2=应用程序获取页面("idpage22");//oView2.setBindingContext(context);

//获取视图2的引用//oView2=sap.ui.getCore().byId("idpage22");//告警(oView2);

//现在我们需要将Page1到Page2所需的值传递给array//收集它们并将该数组赋给模型var myArray={};myArray.input1=输入ext1;myArray.input2=输入ext2;myArray.input3=inputExt3;

//对于上述代码,数组具有带有变量input1、input2和input3//的值为清晰起见,您可以取消对下一行//控制台.log(myArray);

this.myModel.setData文件(myArray);

sap.ui.getCore().设置模型(此.myModel); //控制台.log(此.myModel); 应用于(oView2);

//告警(sap.ui.getCore().byId("pg2_btn");}

------------------------------------------------

同样在第2页

第2页添加以下代码。查看,js

var oLayout=newsap.ui.commons.布局.MatrixLayout();  oLayout.setColumns设置(2);  oLayout.setLayoutFixed(正确);  oLayout.setWidth设置宽度("400像素")oLayout.setWidths设置宽度(["150px","250px"]);var oTextLabel=新sap.ui.commons.TextView({text:"名称:"});var oText=newsap.ui.commons.TextView({text:"{/input1}"})oLayout.createRow文件(oTextLabel,oText);var oTextLabel=新建sap.ui.commons.TextView({text:"年龄:"});var oText=新建sap.ui.commons.TextView({text:"{/input2}"})oLayout.createRow文件(oTextLabel,云服务器永久,oText);var oTextLabel=新建sap.ui.commons.TextView({text:"***:"});var oText=newsap.ui.commons.TextView({text:"{/input3}"})oLayout.createRow文件(oTextLabel,oText);

文章来源:www.vmchk.com

 
你可能喜欢的: