Close

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

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)

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.

LLenar_Lista_SAPUI5_PHP_MySQL1_desarrollohidrocalido

  • 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)

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

nuestro método getConnection

connector.php

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.