Scribd Logo
Upload

Welcome to Scribd!

  • Gold Reflection Shell in 21 Seconds

    Uploaded by

    gothanDresden
    429 views7 pages
    SAPUI%

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    SAPUI%

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    429 views7 pages

    Gold Reflection Shell in 21 Seconds

    Uploaded by

    gothanDresden
    SAPUI%

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Gold Reflection Shell in 21 Seconds

    The Hello World example shows how you can create a very simple SAPUI5 application within seconds - without downloading or installing anything. This page takes the same pattern a bit further, showing how the Gold Reflection Shell can be easily used as foundation for a more complex application. Important: This example uses the nightly build of UI5 loaded from our server, but sometimes this server may be down or deploying. You can check this by going to the URL of the sap-ui-core.js bootstrap file: if there is a 404 error or no connection, wait five to ten minutes and try again. If it still fails, please let us know, as we may have to manually restart the server. All the explanations not directly related to the Shell control are covering general UI5 knowledge, so they are more or less the same as in the HelloWorld example. Thus, they have been shortened a bit; for all the details go back to the Hello World example. The Shell:

    Some Background on Gold Reflection and the Shell

    "Gold Reflection" is the name of the new UI design for all new SAP applications. Sales OnDemand and similar applications use it and ByDesign also adapts the visuals (see e.g. the AJP system, user: kjacob, password: INIT69). While most simple UI controls have a rather unobtrusive design in Gold Reflection, the application shell has a striking and impressive look and is often used almost synonymously with "Gold Reflection".

    The SAPUI5 UI library provides a Gold Reflection theme for all standard controls as well as special Ux3 UI components like the Shell. Another commonly found Pattern provided by UI5 is " Exact" (known from BusinessObjects Explorer; press the Search button to see the actual UI) and the " FeedComponent". Other Ux3 components, like the "ThingInspector", will follow. There is no final specification for the GoldReflection theme yet. Actually the current implementations by Sales OnDemand and ByDesign even differ quite a lot. UI5 is working closely with Ux and other parties to come as close to the desired end result as possible. The Shell consists of:

    o o

    a thin golden header bar on top the workset area (providing the main navigation) below

    o o o

    a tool palette on the left (providing frequently-used functionality) a pane bar on the right (which opens a side pane for various topics) the main content area (canvas) in the center of the Shell.

    Usage of the Gold Reflection Shell


    Basic Structure of a SAPUI5 Application

    HTML is the foundation of UI5 applications, so one needs an HTML file. Putting the HTML5 doctype "<!DOCTYPE html>" in the first line and the Internet-Explorerspecific meta tag "<meta http-equiv="X-UA-Compatible" content="IE=edge" />" to the beginning(!) of the <head> ensures that all browsers use the latest version of

    their rendering engine. In the HTML <body> there needs to be a place where the Shell HTML will go. We will just add a <div> element as only content to the HTML. The "sapUiBody" class should always be added to the <body> tag of a UI5 application to initialize font and colors for the whole page:

    <body class="sapUiBody"> <!-- This is where the Shell will live --> <div id="shellArea"></div> </body>
    As UI5 is a JavaScript UI library, the UI5 JS file needs to be loaded. The following script tag in the <head> does this and also takes care of loading the Gold Reflection theme and the "commons" and "ux3" control libraries:

    <script id="sap-ui-bootstrap" type="text/javascript" src="http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5/resources/sap -ui-core.js" data-sap-ui-theme="sap_goldreflection" data-sap-ui-libs="sap.ui.commons,sap.ui.ux3"></script>


    At this point, UI5 is loaded and ready for usage.

    Loading and Initializing the Shell


    Next, we create an instance of the Shell, providing an ID just in case we need to find it later in the page:

    var oShell = new sap.ui.ux3.Shell("myShell");


    While creating the shell like this would be fine and it would already render ok in the page once connected to the HTML (see below), we actually want to provide quite some settings and content. This could be done by calling oShell.addWorksetItem(...) several times. However, there is also a shorthand JSON notation for initialization which we use to reduce the amount of code (this shorthand exists for all UI5 controls):

    var oShell = new sap.ui.ux3.Shell("myShell", { appIcon:"http://www.sap.com/global/images/SAPLogo.gif", // put the SAP logo into the header

    appTitle:"My First GoldReflection App", title

    // give a

    worksetItems:[ // add some items to the top navigation new sap.ui.ux3.NavigationItem({key:"wi_home",text:"Home",subItems:[ // the "Home" workcenter also gets three sub-items new sap.ui.ux3.NavigationItem({key:"wi_home_overview",text:"Overview"}), new sap.ui.ux3.NavigationItem({key:"wi_home_inbox",text:"Inbox"}), new sap.ui.ux3.NavigationItem({key:"wi_home_news",text:"News"}) ]}), new sap.ui.ux3.NavigationItem({key:"wi_so",text:"Sales Orders"}), new sap.ui.ux3.NavigationItem({key:"wi_analyze",text:"Analyze"}), ], paneBarItems:[ // add also one item to the right-side PaneBar new sap.ui.core.Item({key:"pb_people",text:"People"}) ], logout:function() { // create a handler function and attach it to the "logout" event alert("User wants to log out..."); } });
    The second parameter to the constructor is a JSON object, defining Shell properties like the image and "appTitle" appearing in the header, but also populating aggregations. For instance, there is an array of NavigationItems (similar to the workcenters in ByDesign) created on the fly and handed over to the Shell. One of these NavigationItems even gets subitems, so we will see some two-level navigation in the end. In the last part, a function is provided that will be called when the user clicks the Shell's "logout" icon.

    Filling the Shell's Main Content Area


    The most important part of the Shell is its content. For sake of simplicity, there is just an ordinary Button used as content, but of course you can extend this and add a more complex UI:

    // also set some content for the side pane oShell.setPaneContent(new sap.ui.commons.Button({text:"This Button is in the Pane"}));
    The setPaneContent() method is optimized for ease of use (the old content is automatically replaced) and to avoid re-rendering (so animations are smooth and uninterrupted and performance is as good as possible). It is used to give exactly one control as content. If you want several controls, you can use a layout control as root of the content. Other methods like addContent currently cause a complete re-rendering or fail completely and are not recommended to be used.

    Different Content for Different Pages


    When the user clicks a different workset item, the main content needs to be changed and the respective page needs to be displayed. Building a different UI for each workset item is not really part of using the Shell, but still the biggest chunk of the code even though each page is very small (just contains a Button). This test application creates the pages on demand when they are first accessed and then stores each page in the mContent map for later re-use.

    // Page content creation - for each workset the content is defined here // For demo purposes there is just one button on each page var mContent = {}; // a map to remember page content once it is created function getContent(key) { if (mContent[key]) return mContent[key]; // if content is already created, return it directly if (key == "wi_home_overview") { mContent[key] = new sap.ui.commons.Button({text:"This content of the Overview"}); } else if (key == "wi_home_inbox") { mContent[key] = new sap.ui.commons.Button({text:"This content of the Inbox"}); } else if (key == "wi_home_news") { mContent[key] = new sap.ui.commons.Button({text:"This content of the News"}); } else if (key == "wi_so") { mContent[key] = new sap.ui.commons.Button({text:"This content of the Sales Orders Workset"}); } else if (key == "wi_analyze") { mContent[key] = new sap.ui.commons.Button({text:"This content of the Analyze Workset"}); } return mContent[key]; }

    Button is

    the

    Button is

    the

    Button is

    the

    Button is

    the

    Button is

    the

    In a real application, memory required to buffer the pages and CPU cycles required to re-create pages need to be weighted against each other. Depending on the application complexity, size and typical usage, the application may buffer or destroy pages once not displayed anymore, or even lazily create pages in the background before they are actually used. Shell and content are intentionally decoupled so much (there is just an event and no automatic switching when a workset item is triggered) to give the application the flexibility to implement content switching in the best suitable manner. If in the future certain usage patterns prove to be superior, better support for those can be added to the Shell.

    React to Workset switching


    There is no code yet which actually switches the content. This code is written in the event handler for the worksetItemSelected event, finding and supplying the content belonging to the respective workset item:

    // when the user selects a workset, put the respective content into the shell's main area oShell.attachWorksetItemSelected(function(oEvent) { var key = oEvent.getParameter("key"); oShell.setContent(getContent(key)); });
    It accesses the previously explained mContent map.

    Put the Shell into the UI


    The final step is placing the Shell into the <div> which is the only child of the HTML <body>:

    // place the Shell into the <div> element defined below oShell.placeAt("shellArea");
    Now the application code is complete and the Shell is ready to be displayed as depicted above when the page is loaded.

    And how to do it in 21 Seconds?


    Assumption for these instructions to work exactly as described: you have a Windows Computer, Internet Explorer 8 (or newer), FireFox 3.5 (or newer) or Safari 4 (or newer) and an active network connection within the SAP network. (In Internet Explorer you might have to accept a security question or even change the settings. On other operating systems the instructions should work similarly.) 1. Right-click your desktop, select "New" "Text Document" 2. Name the new file e.g. "ui5.html" and accept the extension change warning 3. Right-click the new file and select "Edit" (make sure it opens in Notepad or so, NOT in MS Word!) 4. Copy&Paste the below HTML code and save the file (e.g. press Ctrl-S) 5. Drag the file to this browser window 6. End. Nothing else. That was it.

    <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>GoldReflection in 21 Seconds</title> <!-- Load SAPUI5 (from a remote server), select gold reflection theme and commons+ux3 control libraries --> <script id="sap-ui-bootstrap" type="text/javascript" src="http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5/resources/sapui-core.js" data-sap-ui-theme="sap_goldreflection" data-sap-ui-libs="sap.ui.commons,sap.ui.ux3"></script>

    <script> // Create the ux3 Shell // ...fill several properties and aggregations in JSON syntax; alternatively they could also be set one by one var oShell = new sap.ui.ux3.Shell("myShell", { appIcon:"http://www.sap.com/global/images/SAPLogo.gif", // put the SAP logo into the header appTitle:"My First GoldReflection App", // give a title worksetItems:[ // add some items to the top navigation new sap.ui.ux3.NavigationItem({key:"wi_home",text:"Home",subItems:[ // the "Home" workcenter also gets three sub-items new sap.ui.ux3.NavigationItem({key:"wi_home_overview",text:"Overview"}), new sap.ui.ux3.NavigationItem({key:"wi_home_inbox",text:"Inbox"}), new sap.ui.ux3.NavigationItem({key:"wi_home_news",text:"News"}) ]}), new sap.ui.ux3.NavigationItem({key:"wi_so",text:"Sales Orders"}), new sap.ui.ux3.NavigationItem({key:"wi_analyze",text:"Analyze"}), ], paneBarItems:[ // add also one item to the right-side PaneBar new sap.ui.core.Item({key:"pb_people",text:"People"}) ], logout:function() { // create a handler function and attach it to the "logout" event alert("User wants to log out..."); } }); // also set some content for the side pane oShell.setPaneContent(new sap.ui.commons.Button({text:"This Button is in the Pane"})); // Page content creation - for each workset the content is defined here // For demo purposes there is just one button on each page var mContent = {}; // a map to remember page content once it is created function getContent(key) { if (mContent[key]) return mContent[key]; // if content is already created, return it directly if (key == "wi_home_overview") { mContent[key] = new sap.ui.commons.Button({text:"This Button is the content of the Overview"}); } else if (key == "wi_home_inbox") {

    mContent[key] = new sap.ui.commons.Button({text:"This the content of the Inbox"}); } else if (key == "wi_home_news") { mContent[key] = new sap.ui.commons.Button({text:"This the content of the News"}); } else if (key == "wi_so") { mContent[key] = new sap.ui.commons.Button({text:"This the content of the Sales Orders Workset"}); } else if (key == "wi_analyze") { mContent[key] = new sap.ui.commons.Button({text:"This the content of the Analyze Workset"}); } return mContent[key]; }

    Button is

    Button is

    Button is

    Button is

    // when the user selects a workset, put the respective content into the shell's main area oShell.attachWorksetItemSelected(function(oEvent) { var key = oEvent.getParameter("key"); oShell.setContent(getContent(key)); }); // set the initial content of the Shell - the Home Overview is selected initially oShell.setContent(getContent("wi_home_overview")); // place the Shell into the <div> element defined below oShell.placeAt("shellArea"); </script> </head> <body class="sapUiBody"> <!-- This is where the Shell will live --> <div id="shellArea"></div> </body> </html>

    You might also like