Created
April 25, 2012 10:41
-
-
Save elsewhat/2488898 to your computer and use it in GitHub Desktop.
sapui5 beta - Shell component running on phonegap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <title>sap.ui.ux3.Shell Test</title> | |
| <script src="sapui5/resources/sap-ui-core.js" | |
| type="text/javascript" | |
| id="sap-ui-bootstrap" | |
| data-sap-ui-libs="sap.ui.ux3,sap.ui.commons" | |
| data-sap-ui-theme="sap_goldreflection"> | |
| </script> | |
| <style> | |
| .sapUiPanel .sapUiLnk { /* hacky! this should be done in the layout around the links! Do not copy! */ | |
| display: block; | |
| margin-bottom: 3px; | |
| } | |
| </style> | |
| <script> | |
| var c = sap.ui.commons; /* shorthand */ | |
| var aContent = {}; | |
| /* SHELL FRAMEWORK - THE CORE */ | |
| var oShell = new sap.ui.ux3.Shell("myShell", { | |
| appIcon:"app_resources/bouvet_logo.png", | |
| appIconTooltip:"Bouvet, an SAP Partner", | |
| appTitle:"Pingvinen - Bouvet intranet mockup med SAPUI5", | |
| logout:function(){ | |
| alert("Logout Button has been clicked.\nThe application can now do whatever is required.\nThis example page will just clear the screen."); | |
| oShell.forceInvalidation(); | |
| oShell.destroy(); | |
| sap.ui.getCore().applyChanges(); | |
| jQuery(document.body).html("<span>Logout had been pressed, screen has been cleared.</span>"); | |
| }, | |
| search:function(oEvent){ | |
| alert("Search triggered: " + oEvent.getParameter("text")); | |
| }, | |
| feedSubmit:function(oEvent){ | |
| alert("Feed entry submitted: " + oEvent.getParameter("text")); | |
| } | |
| }); | |
| /*HEADER FUNCTIONS*/ | |
| oShell.addHeaderItem(new c.TextView({text:"Dagfinn Parnas",tooltip:"dapa"})); | |
| oShell.addHeaderItem(new c.Button({text:"Personalize",tooltip:"Personalize",press:function(){oShell.openPersonalizationDialog();}})); | |
| oShell.addHeaderItem(new c.MenuButton({ | |
| text:"Help", | |
| tooltip:"Help Menu", | |
| menu:new c.Menu("menu1",{ | |
| items:[ | |
| new c.MenuItem("menuitem1",{text:"Help"}), | |
| new c.MenuItem("menuitem2",{text:"Report Incident"}), | |
| new c.MenuItem("menuitem3",{text:"About"}) | |
| ] | |
| }) | |
| })); | |
| /*NAVIGATION MENU*/ | |
| var WI = sap.ui.ux3.NavigationItem; | |
| oShell.addWorksetItem(new WI("wi_news", {key:"wi_news",text:"Nyheter",subItems:[ | |
| new WI("wi_news_enhet", {key:"wi_news_enhet",text:"Enhet"}), | |
| new WI("wi_news_region", {key:"wi_news_region",text:"Region"}), | |
| new WI("wi_news_company", {key:"wi_news_company",text:"Selskap"}) | |
| ]})); | |
| oShell.addWorksetItem(new WI({key:"wi_me",text:"Me"})); | |
| // first application-level ToolPopup ("New Contact") - UI content is completely pre-populated | |
| var layout = new c.layout.MatrixLayout({width:"auto"}); | |
| layout.createRow(new c.Label({text:"Title:"}), new c.TextField("titleTextField")); | |
| layout.createRow(new c.Label({text:"Name:"}), new c.TextField("nameTextField")); | |
| layout.createRow(new c.Label({text:"Address:"}), new c.TextField("addressTextField")); | |
| layout.createRow(new c.Label({text:"City:"}), new c.TextField("cityTextField")); | |
| layout.createRow(new c.Label({text:"Country:"}), new c.TextField("countryTextField")); | |
| layout.createRow(new c.Label({text:"E-Mail:"}), new c.TextField("emailTextField")); | |
| // second application-level ToolPopup ("New Appointment") - UI content is created on-demand and could be thrown away/destroyed after closing (but is not) | |
| jQuery.sap.require("sap.ui.commons.MessageBox"); // for success message when closing the tool | |
| var oAppointmentTool = new sap.ui.ux3.ToolPopup("appointmentTool", { | |
| title: "New Appointment", | |
| /* no tooltip - testing the automatic tooltip generation tooltip: "Create New Appointment", */ | |
| icon: "app_resources/Appointment_regular.png", | |
| iconHover: "app_resources/Appointment_hover.png" | |
| }); | |
| oShell.addToolPopup(oAppointmentTool); | |
| var appointmentPopupInitialized = false; | |
| oAppointmentTool.attachOpen(function() { | |
| if (!appointmentPopupInitialized) { | |
| var layout = new c.layout.MatrixLayout({width:"auto"}); | |
| layout.createRow(new c.Label({text:"Subject:"}), new c.TextField("subjectTextField")); | |
| layout.createRow(new c.Label({text:"Location:"}), new c.TextField("locationTextField")); | |
| layout.createRow(new c.Label({text:"Start Time:"}), new c.TextField("startTimeTextField")); | |
| layout.createRow(new c.Label({text:"Duration:"}), new c.TextField("durationTextField")); | |
| layout.createRow(null, new c.CheckBox("privateCheckBox", {text:"Private"})); | |
| oAppointmentTool.addContent(layout); | |
| oAppointmentTool.addButton(new c.Button("saveAppointmentButton", {text:"Save",press:function(){ | |
| oAppointmentTool.close(); | |
| c.MessageBox.show("Appointment saved successfully.", sap.ui.commons.MessageBox.Icon.SUCCESS, "Appointment Saved", sap.ui.commons.MessageBox.Action.OK); | |
| }})); | |
| oAppointmentTool.addButton(new c.Button("cancelAppointmentButton", {text:"Cancel",press:function(){ | |
| oAppointmentTool.close(); | |
| }})); | |
| appointmentPopupInitialized = true; | |
| } | |
| }); | |
| oAppointmentTool.attachEnter(function(oEvent){ | |
| var text = "Application receives 'Enter' event from AppointmentTool.\n"; | |
| if (oEvent.getParameter("originalSrcControl")) { | |
| text += "Enter was pressed on the control: '" + oEvent.getParameter("originalSrcControl").getId() + "'.\n"; | |
| } | |
| text += "The application can now read the entered data and save or cancel and could close the popup."; | |
| alert(text); | |
| }); | |
| oShell.addPaneBarItem(new sap.ui.core.Item("pane_feed",{text:"Feed"})); | |
| oShell.addPaneBarItem(new sap.ui.core.Item("pane_people",{text:"People"})); | |
| oShell.attachPaneBarItemSelected(function(oEvent) { | |
| var paneId = oEvent.mParameters.id; | |
| oShell.setPaneContent(getPaneContent(paneId)); | |
| }); | |
| oShell.attachWorksetItemSelected(function(oEvent) { | |
| var itemKey = oEvent.getParameter("key"); | |
| // special code for lazy loading of sub-items | |
| if (itemKey == "wi_pd") { | |
| var wi = oEvent.getParameter("item"); | |
| if (wi.getSubItems().length == 0) { // subitems not yet populated | |
| wi.addSubItem(new sap.ui.ux3.NavigationItem({key:"wi_pd_one",text:"One"})); | |
| wi.addSubItem(new sap.ui.ux3.NavigationItem({key:"wi_pd_two",text:"Two"})); | |
| wi.addSubItem(new sap.ui.ux3.NavigationItem({key:"wi_pd_three",text:"Three"})); | |
| itemKey = "wi_pd_one"; // the parent was selected, but now there are children and the first one should be selected, so use the ID of that one for getContent later on | |
| } | |
| } | |
| oShell.setContent(getContent(itemKey)); | |
| }); | |
| // EXPERIMENTAL - THIS WILL CHANGE!! | |
| oShell._getPersonalization().attachPersonalizationChange(function(oEvent){ | |
| var data = oEvent.getParameter("settings"); // retrieve the personalization data object | |
| // ...now persist this data on the server or wherever personalization data is stored | |
| // (in-browser is not enough because the user wants his settings when logging in from another browser as well) | |
| // browser-only: | |
| if (JSON && window["localStorage"]) { // only in browsers with native JSON and offline storage support | |
| var string = JSON.stringify(data); | |
| localStorage.setItem("sapUiShellTestSettings", string); | |
| } | |
| }); | |
| // initialize settings | |
| if (JSON && window["localStorage"]) { // only in browsers with native JSON and offline storage support | |
| var sSettings = localStorage.getItem("sapUiShellTestSettings"); | |
| if (sSettings) { | |
| oShell.initializePersonalization(JSON.parse(sSettings)); | |
| } | |
| } | |
| oShell.setContent(getContent("wi_news_company")); | |
| oShell.placeAt("shellArea"); | |
| // content generation and buffering | |
| function getContent(id) { | |
| if (!aContent[id]) { | |
| if (id == "wi_news_company") { | |
| var layout = new c.layout.MatrixLayout(); | |
| // | |
| var p1 = new c.Panel().setText("Home Quick Links"); | |
| p1.addContent(new c.Link({text:"Open Activities (5)"})); | |
| p1.addContent(new c.Link({text:"Open Alerts (0)"})); | |
| p1.addContent(new c.Link({text:"Open Tasks (8)"})); | |
| p1.addContent(new c.Link({text:"Open Notifications (0)"})); | |
| var cell1 = new c.layout.MatrixLayoutCell({vAlign:c.layout.VAlign.Top}).addContent(p1); | |
| var p2 = new c.Panel().setText("My Top Worklists"); | |
| p2.addContent(new c.Link({text:"Open Activities - Activities - Account Management (1)"})); | |
| p2.addContent(new c.Link({text:"Open Tasks - Sales Quotes - New Business (2)"})); | |
| p2.addContent(new c.Link({text:"Open Tasks - Returns - Sales Orders (2)"})); | |
| var cell2 = new c.layout.MatrixLayoutCell({vAlign:c.layout.VAlign.Top}).addContent(p2); | |
| layout.createRow(cell1, cell2); | |
| var cell = new c.layout.MatrixLayoutCell({colSpan:2}); | |
| var p3 = new c.Panel().setText("Latest News"); | |
| p3.addContent(new c.TextView({text:"No news available."})); | |
| cell.addContent(p3); | |
| layout.createRow(cell); | |
| aContent[id] = layout; | |
| } else if (id == "wi_news_region") { | |
| aContent[id] = [new c.Button({text:"This Button is the content of the Inbox"}), | |
| new c.Button({text:"Change the Shell Title",press:function(){ | |
| oShell.setAppTitle("New Title"); | |
| }}), | |
| new c.Button({text:"Change Appointment Tool Icon",press:function(){ | |
| oAppointmentTool.setIcon("img/sap_18.png"); | |
| }}), | |
| new c.Button({text:"Add Dummy WorksetItem",press:function(){ | |
| oShell.addWorksetItem(new sap.ui.ux3.NavigationItem({text:"Dummy WorksetItem"})); | |
| }}), | |
| new c.Button({text:"Add Dummy Facet",press:function(){ | |
| var homeItem = sap.ui.getCore().byId("wi_home"); | |
| homeItem.addSubItem(new sap.ui.ux3.NavigationItem({text:"Dummy Facet"})); | |
| }})]; | |
| } else if (id == "wi_news_enhet") { | |
| aContent[id] = new c.Button({text:"This Button is the content of the News"}); | |
| } else { | |
| aContent[id] = null; | |
| } | |
| } | |
| return aContent[id]; | |
| } | |
| // Pane content generation and buffering | |
| function getPaneContent(id) { | |
| if (!aContent[id]) { | |
| if (id == "pane_feed") { | |
| aContent[id] = new c.Button({text:id}); | |
| } else if (id == "pane_people") { | |
| aContent[id] = new c.Button({text:id}); | |
| } | |
| } | |
| return aContent[id]; | |
| } | |
| </script> | |
| </head> | |
| <body class="sapUiBody" role="application"> | |
| <div id="shellArea"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment