cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

UI 5 Mobile FlexBox is not rendering

Go to solution
Former Member

on ‎01-10-2013 3:56 PM

0 Kudos

Hi All,

I  have created a mobile app using UI-5 in which i have used FlexBox  which is not rendering


Below is the code of My Index.html file

what i have done wrong ?

<!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("ui5-m1");

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

                     var page = sap.ui.view({id:"idmyview1", viewName:"ui5-m1.myview", type:sap.ui.core.mvc.ViewType.JS});

                     app.addPage(page);

                     app.placeAt("content");

                 </script>

                  <script>

      // create a mobile App

      // it initializes the HTML page for mobile use and provides animated page handling

      var app = new sap.m.App("myApp", {initialPage:"page1"}); // page1 should be displayed first

      // create the first page of your application

      var page1 = new sap.m.Page("page1", {

          title: "Initial Page",

          content : new sap.m.Button({   // content is just one Button

              text : "Go to Page 2",

              tap : function() {

                  app.to("page2");   // when tapped, it triggers drilldown to page 2

              }

          })               

      });

      // create the second page of your application

      var page2 = new sap.m.Page("page2", {

          title: "Page 2",

          showNavButton: true,       // page 2 should display a back button

          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 :  this.createContentD()

      });

      var oMyFlexbox = new sap.m.FlexBox("fB");

      oMyFlexbox.setVisible(true);

         oMyFlexbox.addItem( new sap.m.T );

         oMyFlexbox.addItem( new sap.m.Button({text: "Button 2"}) );

         oMyFlexbox.setJustifyContent('Start');

      oMyFlexbox.setAlignItems('Start');

      function createContentD(){

          var arr = [

                    oMyFlexbox

                ];

          return arr;

      }

      app.addPage(page1).addPage(page2); // add both pages to the App

      app.placeAt("content"); // place the App into the HTML document

    </script>

       </head>

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

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

       </body>

</html>

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

AndreasKunz
Advisor
Advisor
‎01-10-2013 4:11 PM
0 Kudos

Hi,

the <div> wapping the whole <html> document is surely only an accident?

You do not need to load "sap.ui.core" as a library, it is always present.

What is a "sap.m.T"?

Using this as constructor will cause a JavaScript error.

The first thing you should check when something does not work is whether there is a JS error...

The other main issue is that createContentD() is invoked before the code is executed which creates the oMyFlexbox. If you move the oMyFlexbox code up, it will be defined and contain the Button.

Another issue is that your first script block creates an App and adds a View, but then a second App is created. This doesn't break the application, but the first one is of course ignored, as it is not added to the UI.

This version works:

http://jsbin.com/ebegal/1/edit

(try in Chrome or Safari, as IE8/9 don't support loading UI5 from a remote server)

Regards

Andreas

Show replies
Show replies
Former Member
‎01-10-2013 4:28 PM
0 Kudos

Thanks for your reply.   It is working now,

One more thing suppose i have created two pages in myview.view.js file  how will add this paged to app which is created in my html file 

AndreasKunz
Advisor
Advisor
‎01-10-2013 4:35 PM
0 Kudos

Hi,

if your two pages are somehow in one unit, like in one common Carousel, add them to it and return the Carousel.

If they are really separate pages, you should create two separate Views.

If you want to keep things closer together and avoid too many different entities and files, you could also create ONE View for the whole application, though (creating the App and the two Pages) - this depends on how you want to structure the application.

Regards

Andreas

Answers (0)

Ask a Question