SAPUI5: LLenar Lista con SAPUI5, PHP y MySQL

El día de hoy vengo a mostrarles un pequeño ejemplo sobre como podemos conectar nuestra APP de SAPUI5 con PHP y con la base de datos MySQL de una manera muy practica.

Lo único que requerimos es tener nuestro XAMPP, tener alguna base de datos arrumbada o crearla para este ejemplo.

En nuestro index.html solo tenemos la importación de nuestra librería de SAPUI5 para poder trabajar y por supuesto nuestro div donde se muestra todo el contenido de nuestra App. Si ustedes quieren cargar toda la librería de SAPUI5 la pueden descargar directamente de la pagina de SAPUI5 ya que son muchos archivos.

index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta charset="UTF-8">
  <title>Desarrollo Hidrocálido</title>
  <script
    id="sap-ui-bootstrap"
    src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m"
    data-sap-ui-bindingSyntax="complex"
    data-sap-ui-compatVersion="edge"
    data-sap-ui-preload="async" >
  </script>
  <script>
     sap.ui.localResources("apps");
     sap.ui.getCore().attachInit(function () {
       sap.ui.jsview("idAppDH","apps.App").placeAt("content");
     }); 
  </script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Desarrollo Hidrocálido</title>

<script

id="sap-ui-bootstrap"

src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"

data-sap-ui-theme="sap_bluecrystal"

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

data-sap-ui-bindingSyntax="complex"

data-sap-ui-compatVersion="edge"

data-sap-ui-preload="async" >

</script>

sap.ui.localResources("apps");

sap.ui.getCore().attachInit(function () {

sap.ui.jsview("idAppDH","apps.App").placeAt("content");

});

</script>

</head>

</body>

</html>

En nuestro view solo agregamos un objeto sap.m.List donde lo único que hacemos es crearlo(«vacio»), después lo iremos llenando, una vez creada esa lista la agregamos a nuestro objeto sap.m.Page para posteriormente ese mismo objeto lo encapsulamos y lo agregamos a nuestro objeto sap.m.App

Nuestra Vista(App.view.js)

sap.ui.jsview("apps.App", {
	getControllerName: function() {
		return "apps.App";
	},
	createContent: function(oController) {
		var currentView,footer,miFooter,miPagina,miLista,miApp;
		currentView=this;

        miFooter = new sap.m.Bar("idMiBar");
		miPagina = new sap.m.Page("idMiPagina", {
            title: "Ejemplo Llenar Lista - Desarrollo Hidrocálido",
            showNavButton: false,
            showHeader: true,
            showFooter: true
        });
        var miLista = new sap.m.List("listaBebidas", {
            headerText: "Lista de Bebidas",
            mode: sap.m.ListMode.SingleSelectMaster,
            itemPress: [oController.eventoPress, oController]
        });           
        miPagina.setFooter(miFooter);
        miPagina.addContent(miLista);
     
        miApp = new sap.m.App("idMiApp");
        miApp.addPage(miPagina);

        currentView.destroyContent();
        currentView.addContent(miApp);
    }    
});

sap.ui.jsview("apps.App", {

getControllerName: function() {

return "apps.App";

createContent: function(oController) {

var currentView,footer,miFooter,miPagina,miLista,miApp;

currentView=this;

miFooter = new sap.m.Bar("idMiBar");

miPagina = new sap.m.Page("idMiPagina", {

title: "Ejemplo Llenar Lista - Desarrollo Hidrocálido",

showNavButton: false,

showHeader: true,

showFooter: true

});

var miLista = new sap.m.List("listaBebidas", {

headerText: "Lista de Bebidas",

mode: sap.m.ListMode.SingleSelectMaster,

itemPress: [oController.eventoPress, oController]

});

miPagina.setFooter(miFooter);

miPagina.addContent(miLista);

miApp = new sap.m.App("idMiApp");

miApp.addPage(miPagina);

currentView.destroyContent();

currentView.addContent(miApp);

}

});

La parte de nuestro controller es la más interesante pues es aquí donde llenaremos nuestra lista y ¿como?

Pues Como verán tenemos lo siguiente:

En el método onInit(Se ejecuta después de cargar nuestra vista) es donde mandamos a ejecutar a simple vista un AJAX, donde solamente apuntamos a un archivo PHP alojado dentro de mi host(para ver este archivo favor de leer más abajo).
En el Success apuntamos a un método de nuestro controller llamado renderDataCat donde el data que recibimos en nuestro success lo parseamos a un objeto tipo model para que así pueda interactuar con nuestra lista.

En nuestra lista iniciamos el método bindAggregation donde recibe como parametro el path de nuestro JSON que en este caso es categorías(como se muestra en la imagen de arriba), y el metodo factory() que viene siendo un ciclo donde recorre nuestro modelo(recuerden que ahora ya no es un objeto JSON , se parseo y ahora es un objeto model)
Dentro del método factory agregamos un objeto ObjectListItem lo que hace es agregar una celda a nuestra lista.
Al presionar un objeto de la lista mandamos a llamar un método dentro de nuestro controller llamado «eventoPress» donde cachamos el objeto seleccionado y mostramos en un MesssageToast el objeto seleccionado de nuestra lista.

Nuestro Controlador(App.controller.js)

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
], function (Controller, MessageToast, JSONModel) {
	"use strict";
	return Controller.extend("apps.App", {
		onInit : function () {
                var oController = this;
	        var aData = jQuery.ajax({
	            type : "GET",
	            contentType : "application/json",
	            url : "php/index.php",
	            dataType : "json",
	            async: false, 
	            success : oController.renderDataCat,
                    error: function (xhr, ajaxOptions, thrownError) {
                     console.log(xhr);
                     console.log(ajaxOptions);
                     console.log(thrownError);
                    }

	        });
		},
		renderDataCat: function (data) {
                    var listaBebidas,oModel;
   	            oModel = new sap.ui.model.json.JSONModel(data);
  		    listaBebidas = sap.ui.getCore().byId("listaBebidas");
                    listaBebidas.setModel(oModel);
                    listaBebidas.bindAggregation("items", {
                        path: "/categorias",
                        factory: function(id,data) {
                            var items = new sap.m.ObjectListItem({
                              type : "Active",
                              productId: data.getProperty("idCategoria"),
                              attributes: [new sap.m.ObjectAttribute({
                              text: data.getProperty("descripcion")
                              })]
                            });
                            return items;
                        }
                    });
		},
                eventoPress: function(evt){
                    var idbebidaSeleccionada,bebidaSeleccionada;
                    bebidaSeleccionada = evt.getParameter("listItem").getBindingContext().getProperty("descripcion");
                    idbebidaSeleccionada = evt.getParameter("listItem").getBindingContext().getProperty("idCategoria");
		    MessageToast.show("bebida seleccionada: "+bebidaSeleccionada+" Y su ID: "+idbebidaSeleccionada  );
                }	
	});

});

sap.ui.define([

"sap/ui/core/mvc/Controller",

"sap/m/MessageToast"

], function (Controller, MessageToast, JSONModel) {

"use strict";

return Controller.extend("apps.App", {

onInit : function () {

var oController = this;

var aData = jQuery.ajax({

type : "GET",

contentType : "application/json",

url : "php/index.php",

dataType : "json",

async: false,

success : oController.renderDataCat,

error: function (xhr, ajaxOptions, thrownError) {

console.log(xhr);

console.log(ajaxOptions);

console.log(thrownError);

}

});

renderDataCat: function (data) {

var listaBebidas,oModel;

oModel = new sap.ui.model.json.JSONModel(data);

listaBebidas = sap.ui.getCore().byId("listaBebidas");

listaBebidas.setModel(oModel);

listaBebidas.bindAggregation("items", {

path: "/categorias",

factory: function(id,data) {

var items = new sap.m.ObjectListItem({

type : "Active",

productId: data.getProperty("idCategoria"),

attributes: [new sap.m.ObjectAttribute({

text: data.getProperty("descripcion")

})]

});

return items;

}

});

eventoPress: function(evt){

var idbebidaSeleccionada,bebidaSeleccionada;

bebidaSeleccionada = evt.getParameter("listItem").getBindingContext().getProperty("descripcion");

idbebidaSeleccionada = evt.getParameter("listItem").getBindingContext().getProperty("idCategoria");

MessageToast.show("bebida seleccionada: "+bebidaSeleccionada+" Y su ID: "+idbebidaSeleccionada );

}

});

Aquí tenemos nuestros archivos PHP que requerimos, que realmente no hay mucho que explicar.

Tenemos un método llamado obtenerCategorias() que hace una consulta a nuestra base de datos donde tenemos una tabla llamada categorías.

nuestro index.php

<?php
/*****************************/
/***DESARROLLO HIDROCALIDO****/
/*****************************/
require 'connector.php';
obtenerCategorias();
function obtenerCategorias(){
    $sql ="SELECT * FROM categorias"; 
    try {
        $db = getConnection();
        $stmt = $db->query($sql);  
        $detalle = $stmt->fetchAll(PDO::FETCH_OBJ);
        $db = null;
        echo '{"categorias": ' . json_encode($detalle) . '}';
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    }
}
?>

<?php

/*****************************/

/***DESARROLLO HIDROCALIDO****/

/*****************************/

require 'connector.php';

obtenerCategorias();

function obtenerCategorias(){

$sql ="SELECT * FROM categorias";

try {

$db = getConnection();

$stmt = $db->query($sql);

$detalle = $stmt->fetchAll(PDO::FETCH_OBJ);

$db = null;

echo '{"categorias": ' . json_encode($detalle) . '}';

} catch(PDOException $e) {

echo '{"error":{"text":'. $e->getMessage() .'}}';

}

nuestro método getConnection

connector.php

<?php
function getConnection() {
	$dbhost="localhost";
	$dbuser="";
	$dbpass="";
	$dbname="";
	$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);	
	$dbh -> exec("set names utf8");
	$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
	return $dbh;
}
?>

<?php

function getConnection() {

$dbhost="localhost";

$dbuser="";

$dbpass="";

$dbname="";

$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);

$dbh -> exec("set names utf8");

$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

return $dbh;

}

Ver DEMO

Descargar EJEMPLO

Vamos a ir alimentando este ejemplo y los vamos a ir complementando con más cosas hasta hacer un CRUD donde podremos crear, actualizar y eliminar elementos de nuestra lista.

SAPUI5: LLenar Lista con SAPUI5, PHP y MySQL

More from my site

Leave a Reply Cancel reply