cancel
Showing results for 
Search instead for 
Did you mean: 

UI5: No output ( Java script not working )

Ajit_K_Panda
Product and Topic Expert
Product and Topic Expert
0 Kudos

Dear Experts,

I am trying to develop my first UI5 application. I have followed the steps written in a book and did the coding part exactly written in that book. and still output is not coming. I am just trying to display a button and on click it should just alert a message. followed the MV pattern and java script paradigm. Can you please tell me what's wrong in the below codes ??

index.html

===================================

<!DOCTYPE HTML>

<html>

  <head>

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

  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

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

  id="sap-ui-bootstrap"

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

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

  </script>

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

  <script>

  sap.ui.localResources("zui5_with_mvc");

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

  var page = sap.ui.view({id:"idmain1", viewName:"zui5_with_mvc.main", 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>

main.view.js

=================================

sap.ui.jsview("zui5_with_mvc.main", {

  /** Specifies the Controller belonging to this View.

  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

  * @memberOf zui5_with_mvc.main

  */

  getControllerName : function() {

  return "zui5_with_mvc.main";

  },

  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

  * Since the Controller is given to this method, its event handlers can be attached right away.

  * @memberOf zui5_with_mvc.main

  */

  createContent : function(oController) {

  /*return new sap.m.Page({

  title: "Title",

  content: [

  ]

  });*/

  var oButton = new sap.ui.commons.Button();

  oButton.setText("Click me");

  oButton.attachPress(oController.handleButtonClicked);

  return oButton;

  }

});

main.controller.js

==========================================

sap.ui.controller("zui5_with_mvc.main", {

/**

* 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.

* @memberOf zui5_with_mvc.main

*/

// 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!).

* @memberOf zui5_with_mvc.main

*/

// 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.

* @memberOf zui5_with_mvc.main

*/

// onAfterRendering: function() {

//

// },

/**

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

* @memberOf zui5_with_mvc.main

*/

// onExit: function() {

//

// }

  handleButtonClicked: function() {

  alert("Pressed");

  }

});

Thanks in advance

Ajit

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Hi Ajit,

Try using

data-sap-ui-libs="sap.m,sap.ui.commons" in your index.html


or use


var oButton = new sap.m.Button();

  oButton.setText("Click me");

  oButton.attachPress(oController.handleButtonClicked);

  return oButton;

Regards,

Naren L Naik

Ajit_K_Panda
Product and Topic Expert
Product and Topic Expert
0 Kudos

Thanks a lot Naren.

Former Member
0 Kudos

Anytime Ajit

Answers (0)