Question

我想为sap.m.Page过渡编写自定义过渡。我该如何开始呢？我想知道任何文档，如何创建自定义转换并注册它们，以便它可以在SAP UI5应用程序中使用。

先谢谢

Answer 1

App导航时自定义转换的示例实现。单击列表项以查找转换。没有关于它的文件。这只是一个黑客攻击。

＆＃13;

        jQuery.sap.require('sap.m.NavContainer');
		jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
		jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-effect')
		jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-effects-core');
		jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-effects-clip');
		
                sap.m.NavContainer.transitions["custom"] = {
	
			to: function(oFromPage, oToPage, fCallback) {
				window.setTimeout(function(){
					oFromPage.$().toggle("clip");
					oToPage.$().toggle("clip");
					fCallback();
				},600);
				
			},
	
			back: function(oFromPage, oToPage, fCallback) {
				window.setTimeout(function(){
					debugger;
					oFromPage.$().toggle("clip");
					oToPage.$().toggle("clip");
					fCallback();
				},600);
			}
	};/* code for transition */


var data = {
				names: [
					{firstName: "Peter", lastName: "Mueller"},
					{firstName: "Petra", lastName: "Maier"},
					{firstName: "Thomas", lastName: "Smith"},
					{firstName: "John", lastName: "Williams"},
					{firstName: "Maria", lastName: "Jones"}
				]
			};
			
			// create a Model with this data
			var model = new sap.ui.model.json.JSONModel();
			model.setData(data);
	
			var list = new sap.m.List({
				headerText:"Names"
			});
			
			list.bindItems({
				path : "/names", 
				sorter : new sap.ui.model.Sorter("lastName"),
				template : new sap.m.StandardListItem({
					title: "{lastName}",
					description: "{firstName}",
					type: sap.m.ListType.Navigation,
					press:function(evt){
						var oBindingContext = evt.getSource().getBindingContext(); 
						page2.setBindingContext(oBindingContext); 
						app.to("page2","custom");
					}
				})
			});
			
			// create the page holding the List
			var page1 = new sap.m.Page("page1",{
				title: "List Page",
				content : list
			});
			
			// create the detail page
			var page2 = new sap.m.Page("page2", {
				title: "Detail Page",
				showNavButton: true,
				navButtonPress: function(){
					app.back();
				},
				content : [
					new sap.ui.layout.form.SimpleForm({ 
						title: "Details for {firstName} {lastName}",
						content: [
							new sap.m.Label({text: "First Name"}),
							new sap.m.Text({text: "{firstName}"}),
							new sap.m.Label({text: "Last Name"}),
							new sap.m.Text({text: "{lastName}"})
						]
					})
				]
			});
			
			// create a mobile App holding the pages and place the App into the HTML document
			var app = new sap.m.App({
				pages: [page1, page2]
			}).placeAt("content");
			
			// set the model to the App; it will be propagated to the children
			app.setModel(model);

＆＃13;

<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
		<title>Custom jQuery transition</title>
		
		<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m,sap.ui.layout" 
				data-sap-ui-xx-bindingSyntax="complex"
				data-sap-ui-theme="sap_bluecrystal"></script>
		
	</head>
	<body id="content" class="sapUiBody">
	</body>
</html>

＆＃13;

sap.m.App的自定义转换

1 个答案: