SAP Toolkit for HTML5

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "SAP Toolkit for HTML5"

Gino Bonelli
6 anni fa
Visualizzazioni

1 Costruire un ambiente integrato per lo sviluppo con il SAP Toolkit for HTML 5 è semplice. Non è strettamente necessario un sistema SAP backend, in questa fase utilizzeremo un ben più economico mock file JSON al suo posto. In un documento successivo analizzeremo l interazione con un sistema backend ed il protocollo ODATA. Step 1 Eclipse download Il primo passo per sviluppare con SAPUI5 è installare l ambiente di sviluppo Eclipse. In questo momento NEON è l ultima versione scaricabile. Step 2 La pagina SAP DevelopmentTools mette a disposizioni tutte le informazioni necessarie a installare e configurare l UI development toolkit for HTML5 (SAPUI5 Tools) in Eclipse. In particolare:

Step 3 Scaricare ed installare Apache Tomcat, un application server sviluppato dalla Apache Software Foundation. http://tomcat.apache.org/download-90.

2 Step 3 Scaricare ed installare Apache Tomcat, un application server sviluppato dalla Apache Software Foundation. The Apache Tomcat software is an open source implementation of the Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket technologies.

html ma ai fini del debug si consiglia di utilizzare un qualsiasi browser moderno che offra tools per lo

3 Dopo aver eseguito i 3 step di base siete pronti per sviluppare con SAP Toolkit for HTML5. N.B. Eclipse ha a disposizione il tool di preview di una pagina.html ma ai fini del debug si consiglia di utilizzare un qualsiasi browser moderno che offra tools per lo sviluppatore (firefox, chrome, etc.). Step 4 Creazione di un progetto su Eclipse File -> New -> Other Ovviamente nel passo successivo selezionare: SAPUi5 Application Development -> Application Project.

settiamo a true il checkbox Create an initial View in modo

4 Selezioniamo la libreria sap.ui.commons per lo sviluppo di una applicazione desktop e settiamo a true il checkbox Create an initial View in modo tale che il framework crei in automatico una View iniziale (seguiamo, quindi, il paradigma MVC).

5 Inseriamo il nome per il progetto, uno per il nome dell applicazione e scegliamo JavaScript come paradigma per lo sviluppo. La finestra successiva ci indica che il progetto è stato creato con successo e le librerie che vengono aggiunte in maniera automatica.

6 Il risultato iniziale nella J2EE perspective di Eclipse:

7 In particolare avremo, in ottica paradigma MVC, una pagina index.html, un controller.js ed una view.js. La struttura del progetto è la seguente: All interno della cartella WebContent creiamo la cartella JSON ed al suo interno inseriamo il file mock.json. { "guitarrists": [ { "name": "Jimi Hendrix", "guitar": "Fender Stratocaster",

8 } ] "aka": "God" }, { "name": "Paco De Lucia", "guitar": "Hermanos Conde Guitarras", "aka": "The Master" }, { "name": "Jimmy Page", "guitar": "Gibson Les Paul", "aka": "Rock and Roll" } Il file 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.ui.commons, sap.ui.table" data-sap-ui-theme="sap_bluecrystal"> </script>  <script> sap.ui.localresources("zui5_app4_ui5_test"); var view = sap.ui.view({id:"idzui5_test1", viewname:"zui5_app4_ui5_test.zui5_test", type:sap.ui.core.mvc.viewtype.js}); view.placeat("content"); </script> </head> <nav id="art"></nav> <body class="sapuibody" role="application"> <div id="content"></div> </body> </html> Nella prima sezione script vengono inseriti in automatico le librerie necessarie all esecuzione di base dell applicazione. Aggiungiamo la libreria sap.ui.table. L oggetto view punta alla view che andremo a implementare. Il metodo placeat permette di inserirla all interno della div con id = content. Il controller, in particolare il metodo onafterrendering (gli altri non li utilizziamo al momento):

9 onafterrendering: function() { $("#art").text( "Una tabella dei miei chitarristi preferisti con Ui5 Table, questo messaggio è stato scritto utilizzando JQUERY." + " La sorgente dati è un file mock Json."); }, Nella view ed in particolare nel metodo createcontent: 1. Creiamo un oggetto model che punta al nostro file mock json 2. Creiamo una tabella per la visualizzazione dei dati presenti nel file sap.ui.jsview("zui5_app4_ui5_test.zui5_test", { /** 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. zui5_app4_ui5_test.zui5_test */ getcontrollername : function() { return "zui5_app4_ui5_test.zui5_test"; }, /** 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. zui5_app4_ui5_test.zui5_test */ createcontent : function(ocontroller) { // Create instance of JSON model var omodel = new sap.ui.model.json.jsonmodel(); // Load JSON in model omodel.loaddata("json/mock.json"); // Create instance of table control var otable = new sap.ui.table.table({ title : "My favourite guitarrists", visiblerowcount : 3, firstvisiblerow : 0 }); "name"), // First column "Name" otable.addcolumn(new sap.ui.table.column({ label : new sap.ui.commons.label({ text : "name" }), template : new sap.ui.commons.textview().bindproperty("text", })); width : "150px" // Second column "guitar" otable.addcolumn(new sap.ui.table.column({ label : new sap.ui.commons.label({ text : "Guitar" }),

"guitar"), })); template : new sap.ui.commons.textview().bindproperty("text", width : "150px" "aka"), // Third column "aka" otable.addcolumn(new sap.ui.table.column({ label : new sap.ui.commons.label({ text : "Aka" }), template : new sap.

10 "guitar"), })); template : new sap.ui.commons.textview().bindproperty("text", width : "150px" "aka"), // Third column "aka" otable.addcolumn(new sap.ui.table.column({ label : new sap.ui.commons.label({ text : "Aka" }), template : new sap.ui.commons.textview().bindproperty("text", })); width : "150px" // Bind model to table control otable.setmodel(omodel); otable.bindrows("/guitarrists"); } return otable; }); Il risultato in preview di Eclipse:

Il risultato è il seguente: All interno della view abbiamo utilizzato l oggetto

11 Copiamo il link della preview ed inseriamolo nella barra degli indirizzi di firefox ed abilitiamo gli strumenti per lo sviluppatore. Il risultato è il seguente: All interno della view abbiamo utilizzato l oggetto Table. Se non avessimo inserito la relativa libreria nel file index.html avremmo ottenuto un errore a runtime.

12 <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons, sap.ui.table" data-sap-ui-theme="sap_bluecrystal"> </script>

Documenti analoghi

Laboratorio di Basi di Dati

Laboratorio di Basi di Dati Docente: Alberto Belussi Lezione 10 Architettura Model-View-Controller (MVC) L'architettura MVC può essere applicata anche alla tecnologia PHP secondo diversi approcci. In questa