SAPUI5 data binding ( sap.m.table control )

Bu yayında daha önceki yayında yazmış olduğumuz rest servis den dönen JSON datayı , SAPUI5 mobile web projesinde table control ümüze bind edeceğiz.

İşe yeni bir proje yaratmakla başlayalım.


Menubar üzerinden File->New->Other ı seçelim.

SAPUI5 Application Development klasörü altından Application Project i seçip Next diyelim.

Projemize bir isim verelim ve Next diyelim.

Initial view imize bir isim verelim ve Finish diyip projeyi oluşturalım.

Projemiz oluştu , sıra geldi javascript sayfalarımızı doldurmaya.

 
sap.ui.jsview("zui5_data_binding.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_data_binding.main
 */ 
 getControllerName : function() {
  return "zui5_data_binding.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_data_binding.main
 */ 
 createContent : function(oController) {
  
  var oTable = new sap.m.Table("oTable", {
   growing : true, //verinin tamamını bir anda render etmemek için paging işlemi yapıyoruz
   growingThreshold : 20,
   growingTriggerText : "Daha Fazla",
   inset : true,
   
   columns : [
              new sap.m.Column({
                    header : new sap.m.Label({
                 text : "Malzeme No",
                    design : "Bold"
                       })
              }),
                       
                    new sap.m.Column({
                     header : new sap.m.Label({
                  text : "Malzeme Tanımı",
                     design : "Bold"
                           })
                    })
              ]
   
  });
  
  
   return new sap.m.Page({
   title: "Malzeme Listesi",
   content: [oTable
   
   ]
  });
 }

});

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

 onInit: function() {

  var oTable = sap.ui.getCore().byId("oTable");
  var oParameters = {
    "method" : "get_materiallist"
  };
  var oModel = new sap.ui.model.json.JSONModel();
  oModel.loadData("/zui501/", oParameters);
  
  //Render edilecek data limitini arttırmak için
  oModel.setSizeLimit(999999);
  oTable.setModel(oModel);
  
   oTable.bindItems("/ITAB", new sap.m.ColumnListItem({
     
      type : sap.m.ListType.Navigation,
     
          cells : [
              
           new sap.m.Label({
              text : "{MATNR}",
            
              wrapping : false
          })
          
          , new sap.m.Label({
              text : "{MAKTX}",
              wrapping : false
          })
         ]
          
         
         
      }));
  
  
 }


});

Projemiz çalıştırılmaya hazır. Projeyi SAP web server a yükleme ile ilgili , daha önceki yayınlarımızdan link deki konuyu inceleyebilirsiniz.

Projemizi SAP web server a da yüklediğimize göre artık test edebiliriz.

Yapmamız gereken aşağıdaki url i kendi hostname ve port bilgilerimiz ile browserda açmak.

http://<hostname:port>/sap/bc/ui5_ui5/sap/zui5_data_bind/

Görüldüğü gibi malzeme verilerimizi browser üzerrinde görüntülemeyi başardık.
sap.m.table kontrolünü sap demo kit üzerinden daha detaylı inceleyebilirsiniz.
Bir sonraki yayında görüşmek üzere...