Membuat Master Page-Detail Dengan sapui5

Hai sobat Blogger,

pada postingan ini saya akan membahas tentang SAPUI5, mungkin masih sedikit jarang terdengar apa itu SAPUI5 di telinga kita. Yupss memang benar.

SAPUI5 merupakan produk dari SAP, yaitu tools pemrograman berbasis web dimana untuk bahasa pemrogramannya menggunakan Javascript, XML, HTML, JSON,

IDE yang digunakan yaitu Eclipse, untuk mengistall sapui5 di Eclipse caranya klik menu help pada eclipse kemudian pilih install new software seperti pada gambar berikut :



kemudian masukkan url untuk download sapui5 pada tampilan berikut :


kalau kurang jelas linknya pada gambar silahkan copy link ini ; SAPUI5 - https://tools.hana.ondemand.com/luna.

setelah itu centang SAP Hana semuanya lalu ikuti langkah selanjutnya yaitu klik next sampai finish. :D dan saya anggap installnya berhasil. He


Ok. jika sudah mari membuat projek baru sapui5.
ikuti langkah2 berikut untuk membuat projek baru.











jika sudah akan terlihat direktori projek yang kita buat seperti pada gambar berikut :


Ok, sesuai dengan judul kali ini yaitu membuat Master-Page-Detail,

pertama tambahkan satu buah view lagi kedalam folder master detail caranya klik kanan pilih new-other-pilih Sapui5 Application-View seperti pada gambar berikut :


klik next dan buat namanya viewnya dengan nama Detail lalu klik finish dan akan terdapat 2 view dan 2 controller dalam folder masterdetail.

double klik index.html

ganti source codenya dengan source code berikut :

<!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,sap.ui.layout"
                           data-sap-ui-theme="sap_bluecrystal">
              </script>
              <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

              <script>
                           sap.ui.localResources("masterdetail");
                           var app = new sap.m.SplitApp("splitApp",{mode: sap.m.SplitAppMode.ShowHideMode});
      
                           var Master = sap.ui.view({id:"idMaster1", viewName:"masterdetail.Master", type:sap.ui.core.mvc.ViewType.JS});
                           app.addMasterPage(Master);
                          
                           var Detail=sap.ui.view({id:"idDetail", viewName:"masterdetail.Detail", type:sap.ui.core.mvc.ViewType.JS});
                           app.addDetailPage(Detail);
                          
                           app.placeAt("content");
              </script>

       </head>
       <body class="sapUiBody" role="application">
              <div id="content"></div>
       </body>
</html>

kemudian buka master view dan masukkan source code berikut :

sap.ui.jsview("masterdetail.Master", {

       /** 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 masterdetail.Master
       */
       getControllerName : function() {
              return "masterdetail.Master";
       },

       /** 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 masterdetail.Master
       */
       createContent : function(oController) {
             
//Model untuk menampung data dari database yang telah di convert kedalam bentuk JSON
              var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("http://192.168.88.6/ITINV_Service/Service1.svc/getgroupMaterial/HOMOPOLYMER");
      
              var oListCategory=new sap.m.List("idHdr",{
                     includeItemInSelection: true,
                     inset:true,
                     itemPress: function(oEvent){
                           oController.onSelect(oEvent);
                     }
              });
             
              var oTemplate=new sap.m.StandardListItem("idItems",{
                     title:"{CategoryName}",
                     description:"{Description}",
                     type: sap.m.ListType.Navigation,
                     press:function(oEvent){
                           oController.handlePress(oEvent);
                     }
              })
             
              oListCategory.bindAggregation("items", {
                     path: "/value",
                     template: oTemplate
              })
             
              var List = new sap.m.List({
                     inset : false
              })
             
              var items = new sap.m.ObjectListItem({
                     title:"{MatGroup}",
                     type:"Active",
                     press:"onListItemPress",
                     number:"{UnitPrice}",
                     numberUnit:"{Currency}",
                     type:"Active",
                     attributes:[new sap.m.ObjectAttribute({
                           title:"Stock",
                           text:"{StockType}"
                     }),
                     new sap.m.ObjectAttribute({
                           text:"Mr. XXX(Op. Purchaser SRAAI) A"
                     })
                 ],
                
                 firstStatus : new sap.m.ObjectStatus({
                        text:"01-11-2015"
                 })
              })
             
              List.setModel(oModel);
              List.bindAggregation("items","/GetGroupMaterialResult", items);
             
              return new sap.m.Page({
                     title: "CUSTOMER PURCHASER LIST",
                     content: [
                               List
                     ],
                     footer:[ new sap.m.Toolbar({
                           enabled: true
                     })]
              });
       }

});


terus buka detail view dan masukkan source code berikut :

sap.ui.jsview("masterdetail.Detail", {

       /** 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 masterdetail.Detail
       */
       getControllerName : function() {
              return "masterdetail.Detail";
       },

       /** 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 masterdetail.Detail
       */
       createContent : function(oController) {
             
              var simpleForm5 = new  sap.ui.layout.form.SimpleForm({
                     width:"auto",
                     content:[
                           new sap.m.Label({text: "Purchase Order"}),
                           new sap.m.Text({text: "392000222"}),
                          
                           new sap.m.Label({text: "Document Date"}),
                           new sap.m.Text({text: "01.11.2015"}),
                          
                           new sap.m.Label({text: "Location"}),
                           new sap.m.Text({text: "Plan 2000"}),
                          
                           new sap.m.Label({text: "Payment Terms"}),
                           new sap.m.Text({text: "Due Immediately"}),
                          
                           new sap.m.Label({text: "Incoterms"}),
                           new sap.m.Text({text: "Deliveed Duty Paid(DDP) India"}),
                          
                           new sap.m.Label({text: "Company Code"}),
                           new sap.m.Text({text: "9999"}),
              ]
       })
             
              var ObjectHeader = sap.m.ObjectHeader({
                     id:"oh1",
                           responsive:true,
                           fullScreenOptimized:false,
                           icon:"{ProductPicUrl}",
                           iconAlt:"ABC",
                           intro:"Mr. XXX(OP. PURCHASER SRRAAI)",
                           title:"TESTING PR",
                           titleActive:true,
                           titlePress:"handleTitlePress",
                           number:"3.000.000",
                           numberUnit:"USD",
                           titleSelectorPress:"onPress",
                           numberState:"Success",
                           attributes:new sap.m.ObjectAttribute({
                                  title:"PR Num",
                                  text:"C912488"
                           }),
                           statuses : new sap.m.ObjectStatus({
                                  text:"01-11-2015"
                                  //state:"Warning"
                           }),
                           headerContainer:new sap.m.IconTabBar({
                                  id:"itb1",
                                  selectedKey:"key3",
                                  upperCase:true,
                                  class:"sapUiResponsiveContentPadding",
                                  items:new sap.m.IconTabFilter({
                                         icon:"sap-icon://hint"                                
                                  }),
                                  content:[simpleForm5]
                           }),
                          
                          
              })
             
              var Table = new sap.m.Table({
                     selectionChange:"handleSelectionChange",
                     inset:false,
                     id:"idProductsTable",
                     headerToolbar:new sap.m.Toolbar({
                           id:"idCrumbToolbar",
                           text:"gdflfgkd"
                     })
              })
             
             
      
             
              var tot=new sap.m.Label({text: "Items(3)"})
              return new sap.m.Page({
                     title: "PURCHASE ORDER DETAILS",
                     content: [
                         ObjectHeader,tot,Table
                     ],
                     footer:[ new sap.m.Toolbar({
                           enabled: true,
                           content:[new sap.m.Button({
                                  type:"Accept",
                                  text:"Approve",
                                  press:function(){
                                         openFirstDialog();
                                  }
                                  }),
                                  new sap.m.Button({
                                         type:"Reject",
                                         text:"Reject",
                                         press:[oController.handleSuccessMessageBoxPress]
                           }),
                           new sap.m.Button({
                                  type:"Default",
                                  text:"Forward",
                                  press:""
                           })
                        ]
                       
                     })]
              });
       }

});
jalankan aplikasinya dengan cara klik kanan pada index.html pilih Run As-Web App Preview,
dan hasilnya seperti gambar barikut :



ok. sekian sekilas tentang sapui5. untuk referensi belajar sapui5 klik Disini

Semoga Bermanfaat.

Wassalam.

Comments

Post a Comment

Popular Posts