Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

UI5 Content not created in sap.m.page?

dear all,

I am creating an simple ui5 app, with 2 pages using the mvc paradigm..But somehow I cant seem to be able to create contents in the Mobile pages

e.g. i have written this in the first page

sap.ui.jsview("abc.Initial", {

      getControllerName : function() {

         return "abc.Initial";

      },

      createContent : function(oController) {

          return new sap.m.Page({

              title: "UI5 First Page",

              content: (new sap.m.Button({

                   text:"Go to Page2",

                   tap: function(){

                        //app.to("abc.SecondPage");

                        alert("Hello");

                   }                   

              })

             

              )  }); }});

while testing the app in Chrome browser with user agent set as Ipad/iphone - the content is not created as shown in the screen shot..

I even created one more page, with some content but same issue..No content is generated..

sap.ui.jsview("abc.SecondPage", {

      getControllerName : function() {

         return "abc.SecondPage";

      },

      createContent : function(oController) {

          return new sap.m.Page({

              title: "UI5 Mobile Second page",

              showNavButton: true,

              navButtonTap: function(){

                  app.back();            // when tapped, the back button should navigate back up to page 1

              },

              icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",

              content : new sap.m.Text({text:"Hello Mobile World!"})

             

          });

      }

});

Did I miss something? Anything else to be done so that the Ui5 content is generated

Appreciate your help

Regards, Sandip

Tags:
replied

Hi Sandip,

I don't think the UI5 runtime you have should be a problem. Let me give you all my code sample to try.

This is the index.html file.

<!DOCTYPE HTML>

<html>

       <head>

              <meta http-equiv="X-UA-Compatible" content="IE=edge">

                                   <script src="resources/sap-ui-core.js"

                      id="sap-ui-bootstrap"

                      data-sap-ui-libs="sap.m"

                      data-sap-ui-theme="sap_mvi" >

              </script>

              <!-- only load the mobile lib "sap.m" and the "sap_mvi" theme -->

                                   <script>

                                       sap.ui.localResources("abc");

                     var app = new sap.m.App({initialPage:"idinitial1"});

                     var page = sap.ui.view({id:"idinitial1", viewName:"abc.initial", type:sap.ui.core.mvc.ViewType.JS});

                     app.addPage(page);

                     app.placeAt("content");

                                   </script>

       </head>

       <body class="sapUiBody" role="application">

              <div id="content"></div>

       </body>

</html>

This is the initial.controller.js - nothing in it of course (note I spelled "initial" with a lowercase 'l')

sap.ui.controller("abc.initial", {

/**

* Called when a controller is instantiated and its View controls (if available) are already created.

* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

*/

//   onInit: function() {

//

//   },

/**

* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered

* (NOT before the first rendering! onInit() is used for that one!).

*/

//   onBeforeRendering: function() {

//

//   },

/**

* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.

* This hook is the same one that SAPUI5 controls get after being rendered.

*/

//   onAfterRendering: function() {

//

//   },

/**

* Called when the Controller is destroyed. Use this one to free resources and finalize activities.

*/

//   onExit: function() {

//

//   }

});


And this is the initial.view.js file

sap.ui.jsview("abc.initial", {

          getControllerName : function() {

  return "abc.initial";

          },

          createContent : function(oController) {

                    return new sap.m.Page({

                              title : "UI5 First Page",

                              content : [ new sap.m.Button({

                                        text : "Go to Page2",

                                        tap : function() {

  // app.to("abc.SecondPage");

                                                  alert("Hello");

                                        }

                              }) ]

                    });

          }

});

Maybe trying these will help you?

Don't worry about asking dumb questions - I am doing exactly the same as I work my way through this. So nothing I say here is necessarily the best way to do it - just where my thinking is at the moment.

In terms of laying out a page I have to say that I have not played with the sap.m libraries at all - I am mainly using the sap.ui and sap.viz libraries.

I have generally been wrapping the contents of the view in a verticalLayout and then when I want to go across the page using the HorizontalLayout. Something like this...

sap.ui.jsview("sandip.layout", {

          getControllerName : function() {

  return "sandip.layout";

          },

          createContent : function(oController) {

                    return new sap.ui.commons.layout.VerticalLayout(

     "layout1", {

                              content : [ new sap.ui.commons.TextView({

                                        text : "Vertical Layout",

                                        design : sap.ui.commons.TextViewDesign.Bold

                              }), new sap.ui.commons.Button({

                                        text : "Hello"

                              }), new sap.ui.commons.HorizontalDivider(),

                                        new sap.ui.commons.Button({

                                                  text : "World"

                                        }),

                                        new sap.ui.commons.HorizontalDivider(),

                                        new sap.ui.commons.layout.HorizontalLayout("layout2", {

                                                  content : [ new sap.ui.commons.TextView({

                                                            text : "Horizontal Layout",

                                                            design : sap.ui.commons.TextViewDesign.Bold

                                                  }), new sap.ui.commons.Button({

                                                            text : "Hello"

                                                  }), new sap.ui.commons.Button({

                                                            text : "World"

                                                  }) ]

                                        }) ]

                    });

          }

});

Cheers

Graham Robbo


1 View this answer in context
Not what you were looking for? View more on this topic or Ask a question