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 name="description" content="OpenUI5 MVC and EventBus Example" />
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    
    <title>OpenUI5 MVC and EventBus Example</title>
    
    <!-- Load UI5, select gold reflection theme and the "commons" control library -->
    <script id='sap-ui-bootstrap' type='text/javascript'
        src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
        data-sap-ui-theme='sap_bluecrystal'
        data-sap-ui-libs='sap.ui.commons'></script>
    
    <script>
        /*** DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES ***/
        
        sap.ui.controller("com.yqu.controller.Left", {
            handleRightPresense: function() {
              var oCB = sap.ui.getCore().byId("check1");
              sap.ui.getCore().getEventBus().publish("rightViewChannel","setRightPanelVisible",{visible:oCB.getChecked()});  
            },
            
            handleButton: function() {
              sap.ui.getCore().getEventBus().publish("rightViewChannel","doSomething");  
            }
        });
​
    
        sap.ui.jsview("com.yqu.view.Left", {
            
            getControllerName: function() {
                return "com.yqu.controller.Left";
            },
            
            createContent: function(oController) {
                var oPanel = new sap.ui.commons.Panel("panel1");
                                
                var oCB = new sap.ui.commons.CheckBox("check1", {
                    text : 'Right view presense control',
                    checked : true,
                    change : [oController.handleRightPresense, oController]
                    });
​
                var oBTN = new sap.ui.commons.Button("button1", {
                    text : "Button",
                    tooltip : "This is a test tooltip",
                    press : [oController.handleButton, oController]
                });
​
                oPanel.addContent(oCB);
                oPanel.addContent(oBTN);
                return oPanel;
            }
        });
        
        sap.ui.controller("com.yqu.controller.Right", {
            onInit: function() {  
                sap.ui.getCore().getEventBus().subscribe("rightViewChannel","setRightPanelVisible", this._handlePanelVisibility, this);  
                sap.ui.getCore().getEventBus().subscribe("rightViewChannel","doSomething", this._doSomething, this);  
            },  
​
            _handlePanelVisibility: function(channelId, eventId, data) {
                console.log("_handlePanelVisibility(channelId="+channelId+",eventId="+eventId+",data="+data+")");
                if(data) {
                    var rightPanel = sap.ui.getCore().byId("panel2");
                  if(data.visible && !rightPanel.getVisible()) {
                    rightPanel.setVisible(true);
                  } else if(!data.visible && rightPanel.getVisible()){
                    rightPanel.setVisible(false);
                  }
                }
            },
            
            _doSomething: function(channelId, eventId, data) {
                console.log("_doSomething(channelId="+channelId+",eventId="+eventId+",data="+data+")");
              alert("It is right to do something???!!!");
            }
        });
​
    
        sap.ui.jsview("com.yqu.view.Right", {
            
            getControllerName: function() {
                return "com.yqu.controller.Right";
            },
            
            createContent: function(oController) {
                var oPanel = new sap.ui.commons.Panel("panel2");
                                
                oInput = new sap.ui.commons.TextArea('input1');
                oInput.setValue("Here is some Text. I hope you like it.");
                oInput.setTooltip("This is a tooltip");
                oInput.setRows(3);
                oInput.attachChange(function(){alert('Text changed to :'+ oInput.getValue());});
                
                oPanel.addContent(oInput);
​
                return oPanel;
            }
        });
                
        sap.ui.controller("com.yqu.controller.Application", {
        }); 
        
        sap.ui.jsview("com.yqu.view.Application", {
            getControllerName: function() {
                return "com.yqu.controller.Application";
            },
            
​
            createContent: function(oController) {
                var oViewLeft = sap.ui.jsview("leftView", "com.yqu.view.Left");
                var oViewRight = sap.ui.jsview("rightView", "com.yqu.view.Right");
                
                var oSplitter = new sap.ui.commons.Splitter("Splitter1");
        oSplitter.setSplitterOrientation(sap.ui.commons.Orientation.vertical);
        oSplitter.setSplitterPosition("50%");
        oSplitter.setMinSizeFirstPane("20%");
        oSplitter.setMinSizeSecondPane("20%");
        oSplitter.setWidth("100%");
        oSplitter.setHeight("100%");
        
        oSplitter.addFirstPaneContent(oViewLeft);
        oSplitter.addSecondPaneContent(oViewRight);
​
                return oSplitter;
            }
        });         
            
        // instantiate the View
        var myAppView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewName:"com.yqu.view.Application"});
        
        
        // put the View onto the screen
        myAppView.placeAt('content');       
    </script>
    
    </head>
    <body class='sapUiBody'>
        <div id='content'></div>
    </body>
</html>
Output

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

Dismiss x
public
Bin info
mryqupro
0viewers