Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
        
        <title>GoldReflection Shell in 21 Seconds</title>
        
        <style>
            .fullHeight {
                height : 100%;
            }
        </style>
        
        <!-- 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://vesapui5.dhcp.wdf.sap.corp:8080/sapui5-1.16/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            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", {
                appTitle:"My First GoldReflection App",  
                fullHeightContent : true,
                worksetItems:[                                          // add some items to the top navigation
                    new sap.ui.ux3.NavigationItem({key:"wi_home",text:"Home"})
                ],
                    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 Button is the content of the Inbox"});
                } else if (key == "wi_home_news") {
                    mContent[key] = new sap.ui.commons.Button({text:"This Button is the content of the News"});
                } else if (key == "wi_so") {
                    mContent[key] = new sap.ui.commons.Button({text:"This Button is the content of the Sales Orders Workset"});
                } else if (key == "wi_analyze") {
                    mContent[key] = new sap.ui.commons.Button({text:"This Button is the content of the Analyze Workset"});
                }
                return mContent[key];       
            }
            
            // 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));
            });
            
            
            sap.ui.controller("my.own.controller2", {
            
            // implement an event handler in the Controller
            doSomething: function() {
                alert("Hello World!");
            }
        });
        
        
        // define a new (simple) View type
        // ...alternatively this can be done in an XML file without JavaScript!
        sap.ui.jsview("my.own.view2", {
            
            // define the (default) controller type for this View
            getControllerName: function() {
                return "my.own.controller2";
            },
            
            // defines the UI of this View
            createContent: function(oController) {
                this.addStyleClass("fullHeight")
                // button text is bound to Model, "press" action is bound to Controller's event handler
                var oT =  new sap.ui.commons.TextView({
                    text : "Abc"
                });
                var oBLayout = new sap.ui.commons.layout.BorderLayout({
                });
                oBLayout.createArea(sap.ui.commons.layout.BorderLayoutAreaTypes.center, oT);
                return oBLayout;
            }
        });
            
            var v2 = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewName:"my.own.view2"});
            
            // set the initial content of the Shell - the Home Overview is selected initially
            oShell.setContent(v2);
            
        
            
            
            
            
            // define a new (simple) Controller type
        sap.ui.controller("my.own.controller", {
            
            // implement an event handler in the Controller
            doSomething: function() {
                alert("Hello World!");
            }
        });
        
        
        // define a new (simple) View type
        // ...alternatively this can be done in an XML file without JavaScript!
        sap.ui.jsview("my.own.view", {
            
            // define the (default) controller type for this View
            getControllerName: function() {
                return "my.own.controller";
            },
            
            // defines the UI of this View
            createContent: function(oController) {
                // button text is bound to Model, "press" action is bound to Controller's event handler
                return oShell;
            }
        });
        
        
    
        
        // instantiate the View
        var v = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewName:"my.own.view"});
            
            // place the Shell into the <div> element defined below
            v.placeAt("shellArea");
            
        </script>
        
    </head>
    <body class="sapUiBody">
        
        <!-- This is where the Shell will live -->
        <div id="shellArea"></div>
        
    </body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sakthipro
0viewers