SAPUI5 mobile web projesi

Bu yayında basit bir SAPUI5 mobile web sayfası oluşturacağız.
Örneğin ; girilen iki sayıyı input field lar yardımıyla alıp bir button un  press  olayı ile toplatıp yeni bir input field içerisine dolduralım.



Bunun için aşağıdaki gibi 3 adet inputfield ve bir tane button tanımlayalım.Ve tamınladığımız nesneleri sayfamızın content ine atayalım.

main.view.js

sap.ui.jsview("zui5_test001.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_test001.main 
    */  
    getControllerName : function() { 
        return "zui5_test001.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_test001.main 
    */  
    createContent : function(oController) { 
         
         
        var oInput1 = new sap.m.Input("Input1", { 
             
            placeholder : "İlk Sayı", 
            type : sap.m.InputType.Number 
             
        }); 
         
       var oInput2 = new sap.m.Input("Input2", { 
             
            placeholder : "İkinci Sayı", 
            type : sap.m.InputType.Number 
             
        }); 
        
       var oInput3 = new sap.m.Input("Input3", { 
             
            placeholder : "Sonuç", 
            type : sap.m.InputType.Number 
             
        }); 
         
        var oButton = new sap.m.Button("oButton",{ 
             
            text : "HESAPLA" , 
           press : [oController,oController.topla] 
             
        }); 
         
         return new sap.m.Page({
            title: "SAP mobile Project", 
            content: [oInput1, 
                      oInput2, 
                      oButton, 
                      oInput3 
             
            ] 
        }); 
    } 

});

View sayfamızı kodladıktan sonra , sıra geldi button press olayını yazmaya , bunun için view ın controller sayfası içerisinde topla event function ımızı tanımlamamız gerekmekte.

main.controller.js

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

topla:function(){ 
     
    var oInput1 = sap.ui.getCore().byId("Input1"); 
    var oInput2 = sap.ui.getCore().byId("Input2"); 
    var oInput3 = sap.ui.getCore().byId("Input3"); 
     
    var sayi1 = parseInt(oInput1.getValue()); 
    var sayi2 = parseInt(oInput2.getValue()); 
    var sonuc = sayi1 + sayi2 ; 
     
    oInput3.setValue(sonuc); 
     
} 

});

Function içerisinde   view üzerindeki nesnelere id leri yardımıyla ulaşıp ,değerlerini alıp int tipine dönüştürdükten sonra toplayıp sonuç değerini göstereceğimiz input field a atıyoruz.

Artık  projeyi çalıştırabiliriz.

Bunun için projemizin index html sayfasına sağ tıklayıp Run As->Web App Preview seçeneği seçmemiz yeterli.

Sonuç ;

Farklı contoller ile ilgili detaylı bilgiye sapuı5 demo kit sayfasından ulaşabilirsiniz.
Api Reference başlığı altında contollerin proporties lerine , event larına , methodlarına ulaşmanız mümkün ,

Ayrıca  SAPUI5 Explored sayfasında çeşitli kontrollerle ilgili örnek proje kodlarına erişmeniz mümkün.

Bir sonraki yayında oluşturmuş olduğumuz SAPUI5 projesini SAP web server a yükleyip , web server ımız üzerinden çalıştırmayı deneyeceğiz.

Görüşmek üzere...