Crud Abap

Construir una Aplicación CRUD con SAPUI5 e ICF REST-JSON
En el presente tutorial se explica cómo crear una simple aplicación CRUD desde cero
utilizando SAPUI5 y un servicio ICF basado en REST y JSON.
Contenido
1. Requisitos previos ......................................................................................................................... 2
2. Visión General ............................................................................................................................... 2
3. Descargar el Proyecto en Eclipse. .................................................................................................. 2
4. Referencias .................................................................................................................................... 2
4.1. SAPUI5 .................................................................................................................................. 2
4.2. Copia y Corrección de la clase CL_TREX_JSON_SERIALIZER .................................................... 3
4.3. Extendiendo Modelo SAPUI5 JSON ....................................................................................... 4
5. Creación del Servicio ICF REST ....................................................................................................... 4
5.1. Creación de una clase controladora personalizada ................................................................ 4
5.2. Creación del nodo ICF............................................................................................................ 6
5.3. Recuperando el método de solicitud y los parámetros pasados en la URL. ......................... 10
6. Implementación del servicio REST ............................................................................................... 14
6.1. Objetos del Diccionario y Clase Modelo .............................................................................. 14
6.2. Implantación del método Create (verbo HTTP POST) .......................................................... 19
6.3. Implantación del método Read (verbo HTTP GET) ............................................................... 24
6.4. Implantación del método Update (verbo HTTP PUT) ........................................................... 25
6.5. Implementación del método Delete (verbo HTTP DELETE) .................................................. 26
7. Creación de la interfaz de usuario ............................................................................................... 28
7.1. Installar plugin SAPUI5 en Eclipse. ...................................................................................... 28
7.2. Creación del proyecto ......................................................................................................... 29
7.3. Configuración del arranque SAPUI5 y bibliotecas necesarias .............................................. 31
7.4. Creación de los componentes de vista ................................................................................ 31
7.5. Creación de los BSP para implementar la aplicación y el framework SAPUI5. ..................... 35
7.6. Implementación de los métodos del controlador ................................................................ 40
7.6.1. Create ......................................................................................................................... 41
7.6.2. Read ........................................................................................................................... 45
7.6.3. Update ........................................................................................................................ 46
7.6.4. Delete ......................................................................................................................... 47
7.6.5. Find............................................................................................................................. 49
8. Anexos ........................................................................................................................................ 52
8.1. Configurar FQDN. ................................................................................................................. 52
1. Requisitos previos
 Instalar SAPUI5 Application Development Tool en el IDE Eclipse
 UI Development Toolkit for HTML5
 SAP NetWeaver ABAP 7.01 Stack Level 7 o Posterior.
 Copia de la Clase CL_TREX_JSON_SERIALIZER con correción.
2. Visión General
En este documento se muestra cómo crear una simple aplicación CRUD usando
el servicio SAPUI5 e ICF REST / JSON. Las aplicaciones cliente se desarrollarán
utilizando el framework SAPUI5 mediante el uso de las herramientas de
desarrollo de aplicaciones SAPUI5 (herramienta basada en Eclipse). La
comunicación se basa en un servicio REST construida desde cero en ABAP con ICF
(Internet Connection Framework). Todas las respuestas se basan en JSON. El
objetivo de la aplicación será dar mantenimiento a una simple lista de contactos
que se persistirá en una tabla con la estructura siguiente.
Field Key Data Element Data Type Length Description
MANDT X MANDT CLNT 3 Client
EMAIL X AD_SMTPADR CHAR 241 E-Mail Address
FIRSTNAME AD_NAMEFIR CHAR 40 First name
LASTNAME AD_NAMELAS CHAR 40 Last name
3. Descargar el Proyecto en Eclipse.

El proyecto SAPUI5 en eclipse que se realizara a lo largo del tutorial está
disponible en el siguiente enlace, https://drive.google.com/file/d/0B-
SiXv7WB3o9Q0dVMUpwVWJ2RGs/view
4. Referencias
4.1.SAPUI5
 How to Build a SAP HTML5 Application Using MVC with the SAPUI5
Application
 UI Development Toolkit for HTML5
4.2. Copia y Corrección de la clase CL_TREX_JSON_SERIALIZER
Ingresar a la transacción se24 y realizar una copia de la clase standard

CL_TREX_JSON_SERIALIZER, el nombre de la copia será
ZCL_JSON_SERIALIZER.
En adelante trabajaremos con clase ZCL_JSON_SERIALIZER que acabamos

de copiar.
Ingresar a la implementación de la clase, realizaremos una modificación
en el método SERIALIZE.
En el código del método SERIALIZE ubicarse en la línea 5 e ingresar al
metodo recurse, luego ingresar el siguiente código en la línea 52 como se
muestra en la imagen.
Esta modificación permitirá convertir la información ABAP a JSON en el

formato correcto.
4.3.Extendiendo Modelo SAPUI5 JSON

https://blogs.sap.com/2012/11/20/extending-sapui5-json-model/
5. Creación del Servicio ICF REST

5.1.Creación de una clase controladora personalizada
Lo primero que tenemos que hacer es crear una clase controladora

personalizada que nos permita manejar las peticiones de la interfaz REST.
La clase debe ser creada heredando de la Interfaz IF_HTTP_EXTENSION.
Ir a la transacción SE24, ingresar como nombre de la clase ZCL_SCNBLOG.
Llenar la descripción y pulsa en el botón guardar.
Ahora ubicarse en la pestaña “Interfaces” e escribir IF_HTTP_EXTENSION

que será la interfaz a implementar más adelante.
Ahora ubicarse en la ficha Métodos y hacer doble clic en el método

HANDLE_REQUEST para poder implementarla posteriormente.
Solo para probar, introduzca el código de abajo con el fin de comprobar
si el servicio funciona correctamente. No se olvide de guardar y activarlo.
METHOD if_http_extension~handle_request.
CALL METHOD server->response->set_cdata( data = ‘Service Ok!’ ).
ENDMETHOD.
Vamos a crear el Servicio ICF a continuación.
5.2.Creación del nodo ICF

Ir a la transacción “SICF” y pulsar el botón de ejecución.
Ampliar los nodos "default_host" y "sap". Hacer clic derecho en el nodo
"BC" y seleccione la opción Nuevo subelemento en el menú contextual.
Llenamos el nombre del servicio (zscnblog2).

Llenar la descripción del servicio, seleccione la pestaña “Handler List”
e ingresamos la clase controladora personalizada ZCL_SCNBLOG2, que
creamos anteriormente en la handler list.
Guardar los cambios, vuelva a la pantalla anterior, desplácese hacia

abajo, seleccione el servicio zscnblog2, haga clic derecho en él y
seleccione la opción Activar servicio en el menú contextual.
Ahora vamos a probar el servicio. Haga derecho clic en él y seleccione
la opción “Verificar Servicio” en el menú contextual. Si la ventana
emergente de seguridad SAP GUI aparece seleccione la opción
"Permitir siempre".
El navegador predeterminado se abrirá solicitando su nombre de
usuario y contraseña de SAP. Tenga en cuenta que usted tiene que
informar las credenciales del cliente correcto. Como resultado, usted
debe ver el texto "Service OK!" En su navegador.
5.3.Recuperando el método de solicitud y los parámetros pasados

en la URL.
La primera cosa que el método handle_request debe hacer es identificar lo

que se está solicitando. Para ello, tenemos que recuperar dos informaciones
básicas: el método de solicitud (verbo HTTP) y los parámetros pasados en la
URL. El método de la petición describe la acción a realizar. Los parámetros
pasados en la URL tienen la información sobre el recurso donde se debe
realizar la acción.
* Variables
DATA: l_verb TYPE string,
l_path_info TYPE string,
l_resource TYPE string,
l_param_1 TYPE string,
l_param_2 TYPE string.
* Recuperando los request method (POST, GET, PUT, DELETE)

l_verb = server->request->get_header_field( name = ‘~request_method’ ).
* Recuperando los parámetros pasados en la URL

l_path_info = server->request->get_header_field( name = ‘~path_info’ ).
SHIFT l_path_info LEFT BY 1 PLACES.
SPLIT l_path_info AT ‘/’ INTO l_resource
l_param_1
l_param_2.
* Solo metodos GET, POST, PUT, DELETE son permitidos

IF ( l_verb NE ‘GET’ ) AND ( l_verb NE ‘POST’ ) AND
( l_verb NE ‘PUT’ ) AND ( l_verb NE ‘DELETE’ ).
”Para cualquier otro método el servicio debería retornar el error con
código 405
CALL METHOD server->response->set_status( code = ‘405’
reason = ‘Method not allowed’ ).
CALL METHOD server->response->set_header_field( name = ‘Allow’
value = ‘POST, GET, PUT, DELETE’ ).
EXIT.
ENDIF.
CASE l_verb.
WHEN ‘POST’. ” C (Create/Crear)
“TODO: call method CREATE of the model
WHEN ‘GET’. ” R (Read/Leer)

“TODO: call method GET of the model
WHEN ‘PUT’. ” U (Update/Actualizar)

“TODO: call method UPDATE of the model
WHEN ‘DELETE’. ” D (Delete/Eliminar)

“TODO: call method DELETE of the model
ENDCASE.
“Solo para probar!

CALL METHOD server->response->set_cdata( data = l_verb ).
ENDMETHOD.
Para probar el servicio, necesitamos un cliente REST. Aquí vamos a utilizar una
extensión de Chrome llamada POSTMAN.
El servicio debe aceptar GET, POST, PUT y DELETE y devolver el código de error
405 por cualquier otro método. Vamos a ver.
Antes de ejecutar nuestras pruebas, es necesario llenar la autenticación
básica y refrescar las cabeceras.
 GET
 POST
 PUT
 DELETE
Para cualquier otro verbo HTTP, la respuesta esperada es el retorno del código
de error 405 con el mensaje " Method not allowed". Vamos a tratar con el
verbo PATCH.
6. Implementación del servicio REST
6.1. Objetos del Diccionario y Clase Modelo
6.1.1. Objetos del Diccionario

Crearemos una tabla ZTB_SCNBLOG2 y un tipo tabla ZTT_SCNBLOG2 de
ZTB_SCNBLOG2 para el desarrollo de la aplicación.
 Tabla ZTB_SCNBLOG2.
Ingresaremos a la transacción SE11 y crearemos la tabla como se
 Tipo Tabla ZTT_SCNBLOG2.

Ingresaremos a la transacción SE11 y crearemos el tipo tabla como se
6.1.2. Clase Modelo
Para poder persistir los cambios en nuestra lista de contactos vamos a
crear una clase que será llamada ZCL_SCNBLOG2_CONTACT. Ingresamos
a la transacción se24 y creamos la clase, deberá tener un atributo de
instancia STATUS y los métodos create, read, update, delete y
get_message.
 Parámetros de los respectivos métodos.
o Parámetros del método CREATE.
o Parámetros del método READ.
o Parámetros del método UPDATE.
o Parámetros del método DELETE.

o Parámetros del método GET_MESSAGE.
 Implementación de los métodos de la clase.

o CREATE
method CREATE.
DATA: l_email TYPE ztb_scnblog2-email.
* Verifica si el contacto ya existe
SELECT SINGLE email FROM ztb_scnblog2
INTO l_email
WHERE email = i_s_contact-email.
IF sy-subrc = 0.
e_rc = 4.
me->status = text-001. " El contacto ya existe
EXIT.
ENDIF.
* Crear contacto
INSERT ztb_scnblog2 FROM i_s_contact.
e_rc = sy-subrc.
endmethod.
o READ
method READ.
DATA: l_cond(72) TYPE c,

lt_cond LIKE STANDARD TABLE OF l_cond.
CLEAR: l_cond, lt_cond[].
IF NOT i_s_contact-email IS INITIAL.

CONCATENATE 'EMAIL = ''' i_s_contact-email '''' INTO l_cond.
APPEND l_cond TO lt_cond.
ENDIF.
IF NOT i_s_contact-firstname IS INITIAL.

IF l_cond IS INITIAL.
CONCATENATE 'FIRSTNAME LIKE ''%' i_s_contact-
firstname '%''' INTO l_cond.
ELSE.
CONCATENATE 'OR FIRSTNAME LIKE ''%' i_s_contact-
firstname '%''' INTO l_cond.
ENDIF.
ENDIF.
IF NOT i_s_contact-lastname IS INITIAL.

IF l_cond IS INITIAL.
CONCATENATE 'LASTNAME LIKE ''%' i_s_contact-
lastname '%''' INTO l_cond.
ELSE.
CONCATENATE 'OR LASTNAME LIKE ''%' i_s_contact-
lastname '%''' INTO l_cond.
ENDIF.
ENDIF.
IF NOT lt_cond[] IS INITIAL.
SELECT email firstname lastname FROM ztb_scnblog2

INTO CORRESPONDING FIELDS OF TABLE e_t_contacts
WHERE (lt_cond).
ELSE.
SELECT email firstname lastname FROM ztb_scnblog2

INTO CORRESPONDING FIELDS OF TABLE e_t_contacts.
ENDIF.
endmethod.
o UPDATE
method UPDATE.
* Perform validations
UPDATE ztb_scnblog2 FROM i_s_contact.
e_rc = sy-subrc.
endmethod.
o DELETE
method DELETE.
DELETE FROM ztb_scnblog2 WHERE email = i_s_contact-email.
e_rc = sy-subrc.
endmethod.
o GET_MESSAGE
method GET_MESSAGE.
r_msg = me->status.
endmethod.
6.2. Implantación del método Create (verbo HTTP POST)

En primer lugar tenemos que declarar los tipos y variables locales
necesarios.
TYPES: BEGIN OF local_type_response,
success TYPE string,
msg TYPE string,
data TYPE ztt_scnblog2,
END OF local_type_response.
* Objetos
DATA: lo_contact TYPE REF TO zcl_scnblog2_contact,
lo_json_serializer TYPE REF TO zcl_json_serializer. ”Copia de
la clase standard CL_TREX_JSON_SERIALIZER
* Tablas internas
DATA: lt_contacts TYPE STANDARD TABLE OF ztb_scnblog2.
* Estructuras
DATA: ls_contact TYPE ztb_scnblog2,
ls_response TYPE local_type_response.
* Variables
DATA: l_rc TYPE i,
l_json TYPE string.
* Variables
DATA: l_verb TYPE string,
l_path_info TYPE string,
l_resource TYPE string,
l_param_1 TYPE string,
l_param_2 TYPE string.
…..
A continuación implementamos el código para manejar el método de

solicitud POST que corresponde a la acción Crear contacto.
WHEN ‘POST’. ” C (Create)

CLEAR: ls_contact,
ls_response,
l_rc.
*Recuperamos los datos del formulario

ls_contact-email = server->request->get_form_field(’email’).
ls_contact-firstname = server->request->get_form_field(‘firstname’).
ls_contact-lastname = server->request->get_form_field(‘lastname’).
*Creamos una instancia de la clase para persistir los datos del contacto en
la base de datos
CREATE OBJECT lo_contact.
*Creamos el Contacto
CALL METHOD lo_contact->create
EXPORTING
i_s_contact = ls_contact
IMPORTING
e_rc = l_rc.
IF l_rc IS INITIAL.
ls_response-success = ‘true’.
ls_response-msg = ‘User created successfully!’.
ELSE.
ls_response-success = ‘false’.
ls_response-msg = lo_contact->get_message( ).
ENDIF.
* Retornamos los datos recibidos del formulario de regreso al cliente
APPEND ls_contact TO ls_response-data.
……
ENDCASE.
CREATE OBJECT lo_json_serializer
EXPORTING
DATA = ls_response. ” Data to be serialized
* Serializamos los datos ABAP a JSON

CALL METHOD lo_json_serializer->serialize.
* Obtenemos el JSON string

CALL METHOD lo_json_serializer->get_data
RECEIVING
rval = l_json.
* Establecemos el content type de la respuesta

CALL METHOD server->response->set_header_field( name = ‘Content-Type’
value = ‘application/json; charset=iso-8859-1’ ).
* Retornamo el resutlado en formato JSON

CALL METHOD server->response->set_cdata( data = l_json ).
ENDMETHOD.
Vamos a entender lo que hace el código anterior (sólo las partes

pertinentes).
 Primero consultamos los datos del formulario recibidos desde la

aplicación cliente utilizando el método de get_form_field del objeto
request.
*Recuperamos los datos del formulario
ls_contact-email = server->request->get_form_field(’email’).
 A continuación, creamos una instancia de la clase

zcl_scnblog2_contact que persistirá los datos de contacto en la base
de datos y llamamos al método de crear.
*Creamos una instancia de la clase para persistir los datos del

contacto en la base de datos
*Creamos al contacto
CALL METHOD lo_contact->create
EXPORTING
IMPORTING
e_rc = l_rc.
 A continuación necesitamos manejar el resultado de la acción basado

en el código de retorno (l_rc). Entonces, establecemos el valor de los
atributos “success” y “msg” en consecuencia.
IF l_rc IS INITIAL.
ls_response-msg = ‘User created successfully!’.
ELSE.
ENDIF.
 La información recibida se devuelve de nuevo a la aplicación cliente.
* Retornamos los datos recibidos del formulario de regreso al cliente

 Finalmente los datos son serializados en una cadena JSON.
ENDCASE.
CREATE OBJECT lo_json_serializer
EXPORTING
DATA = ls_response. ” Data to be serialized
* Serializamos los datos ABAP a JSON

CALL METHOD lo_json_serializer->serialize.
* Obtenemos el JSON string

CALL METHOD lo_json_serializer->get_data
RECEIVING
rval = l_json.
 Para enviar la respuesta JSON a el cliente necesitamos este último

código.
* Establecemos el content type de la respuesta

CALL METHOD server->response->set_header_field( name = ‘Content-Type’
value = ‘application/json; charset=iso-8859-1’ ).
* Devolvemos el resultado en formato JSON.

CALL METHOD server->response->set_cdata( data = l_json ).
ENDMETHOD.
Vamos a probar nuestro primer método usando el cliente POSTMAN

REST.
Seleccione el método POST y escriba la dirección URL y los campos del
formulario. Tenga en cuenta el uso de los nombres de los campos
correctos (email, firstname, lastname).
Haga clic en el botón Enviar para probar el servicio. El servicio debe devolver
una respuesta JSON con el mensaje " Contact created successfully!”
Vamos a comprobar la tabla de base de datos utilizando la SE16.
Si se pulsa el botón enviar de nuevo sin cambiar los datos del formulario que
el servicio debería devolver un mensaje que informa de que el contacto ya
existe.
El método CREATE está terminado. Vamos a ir al siguiente método, leer

contacto.
6.3. Implantación del método Read (verbo HTTP GET)
A continuación se muestra el código que tenemos que implementar para
manejar el método de lectura. Su estructura es muy similar al método de
crear.
WHEN ‘GET’. ” R (Read/Leer)

CLEAR: ls_contact,
ls_response.
*Recuperando el email del contacto pasado en la URL

ls_contact-email = l_param_1.
*Recuperando datos querystring

*Leyendo datos del contacto

CALL METHOD lo_contact->read
EXPORTING
IMPORTING
e_t_contacts = lt_contacts.
IF NOT lt_contacts[] IS INITIAL.
ls_response-data[] = lt_contacts[].
ELSE.
ENDIF.
Vamos a probar nuestro método de lectura.

6.4. Implantación del método Update (verbo HTTP PUT)
manejar el método de actualización.
WHEN ‘PUT’. ” U (Update/Actualizar)
CLEAR: ls_contact,
ls_response,
l_rc.
* Recuperando el email del contacto pasado en la URL

* Recuperando datos del formulario

* Actualizando contacto
CALL METHOD lo_contact->update
EXPORTING
IMPORTING
e_rc = l_rc.
IF l_rc IS INITIAL.
ls_response-msg = ‘Contact updated successfully!’.
ELSE.
ENDIF.
* Retornamos los datos recibidos del cliente a el cliente

Vamos a probar nuestro método de actualización. Vamos a poner una "X"

al final del nombre y apellido del contacto.
Vamos a comprobar nuestra tabla en el SE16.
6.5. Implementación del método Delete (verbo HTTP DELETE)

manejar el método de eliminación.
WHEN ‘DELETE’. ” D (Delete/Eliminar)
CLEAR: ls_contact,
ls_response,
l_rc.
* Recuperamos el email del contacto pasado en la URL

* Eliminamos el contacto
CALL METHOD lo_contact->delete
EXPORTING
IMPORTING
e_rc = l_rc.
IF l_rc IS INITIAL.
ls_response-msg = ‘Contact deleted successfully!’.
ELSE.
ENDIF.
Vamos a probar nuestro método de eliminación.

Ahora nuestra tabla debe estar vacía. Vamos a comprobarlo en el SE16.
7. Creación de la interfaz de usuario
7.1. Installar plugin SAPUI5 en Eclipse.
Para poder usar el framework sapui5 en eclipse deberemos seguir los
siguientes pasos.
 Ingresar a Eclipse (para este tutorial se trabajó con Eclipse Neo para
Java EE)
 Ir al menú “Help” y elegir la opción “Install new Software”.
 Pegar una de las siguientes direcciones URL en el campo de entrada
“Work With”, para obtener una lista de opciones de descargar
disponibles. Puedes encontrar una lista de todas las URL del sitio de
actualización en el siguiente click aquí:
https://tools.hana.ondemand.com/luna para Eclipse Luna (4.4)
https://tools.hana.ondemand.com/kepler para Eclipse Kepler (4.3)
En el presente tutorial se trabajó con la url:
https://tools.hana.ondemand.com/neon para Eclipse NEon (4.6)
 Seleccione la entrada "UI development toolkit for HTML5", finalizar el

asistente. Reinicie Eclipse después de completar la instalación.
7.2. Creación del proyecto
Nota: Existe un muy buen documento publicado en SCN que explica cómo
crear un proyecto SAPUI5 MVC desde cero mediante el uso de la
herramienta de desarrollo de aplicaciones SAPUI5.
http://scn.sap.com/docs/DOC-29890
Creamos un nuevo proyecto que se llamara “scnblog2” y una vista que

será llamada “main”. La vista se creara usando JavaScript como
paradigma de desarrollo.
En el IDE Eclipse vaya al menú File->New-> Others ... -> SAPUI5
Application Development -> Application Project:
Especificar los datos relacionados con el proyecto.

Especificar los datos relacionados con la vista.
La estructura del proyecto debería tener la siguiente apariencia.

7.3. Configuración del arranque SAPUI5 y bibliotecas necesarias
Informar a la ruta correcta del archivo "sap.ui.core.js" en su servidor y
añadir las bibliotecas necesarias "sap.ui.core" y "sap.ui.table".
7.4. Creación de los componentes de vista

La aplicación estará compuesto por un solo una vista y esta vista estará
compuesta por un control table con cinco botones en su barra de
herramientas. Su aspecto final se ilustra en la siguiente figura.
El control table se creará dentro del método "createContent" de la vista
main.
A continuación se muestra el código para crear el control table y su barra

de herramientas.
// Creando el table control
var oTable = new sap.ui.table.Table(“tblctrl”, {
title: “CRUD Application Example”,
visibleRowCount: 10,
firstVisibleRow: 0,
selectionMode: sap.ui.table.SelectionMode.Single,
toolbar: new sap.ui.commons.Toolbar({
items: [
new sap.ui.commons.Button({
text: “Create”,
press: function() {
oController.Create();
}
}),
text: “Read (All)”,
press: function() {
oController.Read();
}
}),
text: “Update”,
press: function() {
oController.Update();
}
}),
text: “Delete”,
press: function() {
oController.Delete();
}
}),
text: “Find”,
press: function() {
oController.Find();
}
})]
})
});
// Agregando columnas al table control
// Columna E-mail
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: “Email”}),
template: new sap.ui.commons.Label()
.bindProperty(“text”, “email”),
sortProperty: “email”,
filterProperty: “email”,
width: “50%”
}));
// Columna Last Name

label: new sap.ui.commons.Label({text: “Last Name”}),
template: new sap.ui.commons.TextField()
.bindProperty(“value”, “lastname”),
sortProperty: “lastname”,
filterProperty: “lastname”,
width: “25%”
}));
// Columna First Name

label: new sap.ui.commons.Label({text: “First Name”}),
template: new sap.ui.commons.TextField()
.bindProperty(“value”, “firstname”),
sortProperty: “firstname”,
filterProperty: “firstname”,
width: “25%”
}));
// Creando el JSON Model – ser concientes de que myJSONModel es una

personalización extendida de el sap.ui.model.json.JSONModel
var oModel = new myJSONModel;
// Deiniendo nuestro model como global

sap.ui.getCore().setModel(oModel);
// Vinculando datos – aquí nosotros vinculamos el table control al

atributo “data” de el JSON Model
oTable.bindRows(“/data”);
// Retornando los control(s) para colocarlos en la vista

return [oTable];
Cada botón tiene un evento "press" que maneja la implementación de

una función anónima que llama al método respectivo del controlador
(oController.Create () , por ejemplo). En este punto no se aplican todavía
los métodos del controlador.
Estamos utilizando una versión ampliada del
sap.ui.model.json.JSONModel. El archivo myJSONModel.js está
disponible en https://gist.github.com/4218856 . Para usarlo en nuestro
proyecto Necesitamos crear una nueva carpeta con el nombre "js" y crear
el archivo myJSONModel.js dentro de esta carpeta. Necesitamos también
incluir una nueva etiqueta <script> en el archivo index.html.
La ejecución de la aplicación en este punto debería tener una apariencia

como la que se ilustra en la siguiente figura.
7.5. Creación de los BSP para implementar la aplicación y el framework SAPUI5.
Antes de poner en práctica los métodos del controlador, tenemos que

subir nuestra aplicación y el framework SAPUI5 en el servidor de
aplicaciones ABAP. Debemos hacerlo para queremos evitar problemas
causados por CORS (Cross Origin Resource Sharing).
Vaya a la transacción SE80, seleccione Aplicación BSP, ingrese el nombre
de la aplicación BSP que vamos a crear (ZSCNBLOG2) y pulsa el botón Sí.
Haga clic derecho en el nombre de la aplicación BSP y seleccione la opción
de menú Crear -> Página.
Proporcionar una breve descripción. Guardar y activar.

Eliminar el código generado automáticamente. Copiar el código
index.html desde Eclipse y pegar en la página BSP. Guardar y activar.
Para importar los archivos .js vamos a utilizar el programa report

BSP_UPDATE_MIMEREPOS. Proporcione la ruta de la Aplicación BSP.
Seleccione la carpeta WebContent y pulsa el botón Aceptar.
Actualizar la estructura de la Aplicación BSP. Seleccione las carpetas
META-INF y WEB-INF y el index.html, haga clic derecho sobre ellos y
seleccione la opción de menú "Delete".
Actualizar la estructura de la aplicación BSP de nuevo. La estructura final

debe ser como el que se ilustra en la figura siguiente.
Ahora tenemos que hacer lo mismo con el framework SAPUI5. Es muy
similar a las etapas descritas anteriormente.
Puede obtener el framework desde aquí, Los archivos que necesita
están en sapui5-static.zip.
Necesitamos:
 Crear una aplicación BSP denominada ZSAPUI5

 Crear una página index.html
 Eliminar el código generado automáticamente. Copia y pega el
código index.html de la SAPUI5 en el index.html del BSP.
 Utilice el programa report BSP_UPDATE_MIMEREPOS para importar
los archivos SAPUI5.
La estructura final debe ser como el que se ilustra en la figura siguiente.
El paso final antes de ejecutar la primera prueba de la Aplicación BSP
ZSCNBLOG2 es ajustar el path del SAPUI5.
Ahora podemos probar nuestra aplicación. Abrir la Herramienta para

desarrolladores del navegador para comprobar si todos los archivos se
han descargado correctamente.
Ahora estamos listos para iniciar la implementación de los métodos del
controlador.
7.6. Implementación de los métodos del controlador

Abra el archivo main.controller.js en Eclipse e implementa el código de abajo.
/**
* Called when the Controller is destroyed. Use this one to free resources
and finalize activities.
*/
// onExit: function() {
// }
Create: function() {
},
Read : function() {
},
Update : function() {
},
Delete : function() {
},
Find : function() {
}
});
7.6.1. Create
A continuación se muestra el código que tenemos que implementar
para manejar el método de crear.
// Crreando un dialog para ingresar la información del contacto a crear
var oDialog = new sap.ui.commons.Dialog(“Dialog”, {
modal: true,
closed: function(oControlEvent){
sap.ui.getCore().getElementById(‘Dialog’).destroy();
}
});
oDialog.setTitle(“New Contact”);
// Crear un layout para colocar los controles en el dialogo

var oLayout = new sap.ui.commons.layout.MatrixLayout({
columns: 2,
width: “100%”
});
// Crear un campo de texto para e-mail

var oTF = new sap.ui.commons.TextField(“tfEmail”, {
tooltip: ‘E-mail’,
editable: true,
width: ‘200px’
});
// Etiqueta para el campo e-mail

var oLabel = new sap.ui.commons.Label(“lbEmail”, {
text: ‘E-mail’,
labelFor: oTF
});
// Creando la primera fila

oLayout.createRow(oLabel, oTF);
// Repetimos lo mismo para los campos Last Name y First Name

// Creando campo de texto para el last name
oTF = new sap.ui.commons.TextField(“tfLastName”, {
tooltip: ‘Last Name’,
editable: true,
width: ‘200px’
});
// Etiqueta para el campo last name

oLabel = new sap.ui.commons.Label(“lbLastName”, {
text: ‘Last Name’,
labelFor: oTF
});
// Creando la segunda fila

// Creando un campo de texto para fist name

oTF = new sap.ui.commons.TextField(“tfFirstName”, {
tooltip: ‘First Name’,
editable: true,
width: ‘200px’
});
// Etiqueta para el campo first name

oLabel = new sap.ui.commons.Label(“lbFirstName”, {
text: ‘First Name’,
labelFor: oTF
});
// Creando la tercera fila

// Agregamos el layout a el dialog

oDialog.addContent(oLayout);
// Agregamos un botón para enviar los datos del contacto a la interfaz REST
oDialog.addButton(new sap.ui.commons.Button({text: “OK”, press:function(){
var oModel2 = new myJSONModel;
// Recuperamos los datos del contacto desde los campos de texto

var oParameters = {
“email” : sap.ui.getCore().getElementById(‘tfEmail’).getValue(),
“lastname” : sap.ui.getCore().getElementById(‘tfLastName’).getValue(),
“firstname” : sap.ui.getCore().getElementById(‘tfFirstName’).getValue()
};
// enviamos los datos a la interfaz REST

oModel2.loadDataNew(“../../../zscnblog2/contact/”, handleSuccess, handleError,
oParameters, true, ‘POST’);
function handleSuccess(oData){
if(oData.success===’true’){
// Recuperando los datos desde el global model

var oData2 = sap.ui.getCore().getModel().getData();
// si el global model contiene datos entonces los modelos son unidos

// si no, entonces el global model es llenado con el nuevo contacto
if(jQuery.isArray(oData2.data)){
oData2.data = jQuery.merge(oData2.data, oData.data);
}else{
oData2.data = jQuery.merge([], oData.data);
}
// Actualiza los datos del Global Model

sap.ui.getCore().getModel().setData(oData2, false);
// Cerra el Dialog
sap.ui.getCore().getElementById(‘Dialog’).close();
// Mostrar mensaje
sap.ui.commons.MessageBox.alert(oData.msg);
function handleError(){
// Mostrar mensaje
sap.ui.commons.MessageBox.alert(arguments[0].statusText);
}
}}));
oDialog.open();
},
Ahora vamos a probarlo. Abrir la Aplicación BSP ZSCNBLOG2 y

elimine el archivo main.controller.js.
Importe el archivo de nuevo.
Ir al navegador y actualiza la página. Pulse el botón "Crear". Rellene todos

los campos. Pulse el botón "OK"
7.6.2. Read
A continuación se muestra el código que tenemos que poner en
práctica para manejar el método de lectura.
// Recuperando el Global Model

var oModel = sap.ui.getCore().getModel();
// Enviando el GET request

oModel.loadDataNew(“../../../zscnblog2/contact/”, handleSuccess,
handleError, {}, true, 'GET', {}, false);
if(oData.success===’false’){
// Mostrar mensaje
}
// Mostrar mensaje
sap.ui.commons.MessageBox.alert(arguments[0].statusText
);
}
Vamos a probarlo. Repita los pasos de eliminación e importación

del main.controller.js. Ir al navegador y actualizar la página. Pulse
el botón "Read (All)".
7.6.3. Update
A continuación se muestra el código que tenemos que
implementar para manejar el método de edición.
// Obtener la referencia del table control

var oTable = sap.ui.getCore().getElementById(‘tblctrl’);
// Recuperando el índice seleccionado. Es decir, el índice de la fila

seleccionada
var i = oTable.getSelectedIndex();
// URL base de el REST service

var ServiceURL = “../../../zscnblog2/contact/”;
if(i>=0){
// Recuperando la fila seleccionada

var selectedRow = oTable.getRows()[i];
// Concatenando la URL base y el email del contact

// Ejemplo: “../../../zscnblog2/contact/christianjianelli@gmail.com“
ServiceURL = ServiceURL + selectedRow.getCells()[0].getText();
// Los parámetros que se enviarán a el servidor como campos de

formulario
var oParameters = {
“email” : selectedRow.getCells()[0].getText(),
“lastname” : selectedRow.getCells()[1].getValue(),
“firstname” : selectedRow.getCells()[2].getValue()
};
// Enviando PUT request

oModel.loadDataNew(ServiceURL, handleSuccess, handleError, oParameters,
true, ‘PUT’);
}else{
// Si el usuario no selección ninguna fila
sap.ui.commons.MessageBox.alert(‘No record selected’);
}
// Mostrar mensaje
}
// Mostrar mensaje
}

el botón "Update", cambiar el apellido y nombre, seleccione la fila
y pulsa el botón "Actualizar".
7.6.4. Delete
implementar para manejar el método Delete.
// Obtener una referencia del table control

var oTable = sap.ui.getCore().getElementById(‘tblctrl’);
// Recuperar el índice de la fila seleccionada

var selIndex = oTable.getSelectedIndex();
// URL base del REST service

var oParameters = {};
if(selIndex >= 0){
// Recuperar la fila seleccionada

var selectedRow = oTable.getRows()[selIndex];
// Concatenar la URL base y el email del contacto

// Ejemplo: “../../../zscnblog2/contact/christianjianelli@gmail.com“
ServiceURL = ServiceURL + selectedRow.getCells()[0].getText();
// enviar DELETE request

oModel.loadDataNew(ServiceURL, handleSuccess, handleError, oParameters,
true, ‘DELETE’);
}else{
// usuario no selecciono ninguna fila
sap.ui.commons.MessageBox.alert(‘No record selected’);
}
if(oData.success===’true’){
// Recuperando la fila seleccionada

var selectedRow = oTable.getRows()[selIndex];
// Recuperando Global Model

var oData2 = sap.ui.getCore().getModel().getData();
if(jQuery.isArray(oData2.data)){
// Removiendo el cotacto eliminado de los datos del Global Model data

oData2.data = jQuery.grep(oData2.data, function(n,i){
return n.email !== selectedRow.getCells()[0].getText();
});
// Actualizando los datos del Global Model

sap.ui.getCore().getModel().setData(oData2, false);
}
}
// Mostrar mensaje
}
// Mostrar mensaje
}

el botón "Delete", seleccione la fila y pulsa el botón "Borrar".
7.6.5. Find
De hecho, este método es el método de lectura, pero una vez que
nuestro método de lectura devuelva todos los registros, veremos
cómo podemos buscar un contacto específico.
implementar para manejar el método Find.
// Crear un dialog para obtener la información del contacto a buscar

var oDialog = new sap.ui.commons.Dialog(“Dialog”, {
modal: true,
closed: function(oControlEvent){
sap.ui.getCore().getElementById(‘Dialog’).destroy();
}
});
oDialog.setTitle(“Find Contact”);
// Crear un layout para colocar los controles en el dialg

var oLayout = new sap.ui.commons.layout.MatrixLayout({
columns: 2,
width: “100%”
});
// Creando un campo de texto para el e-mail

var oTF = new sap.ui.commons.TextField(“tfEmail”, {
tooltip: ‘E-mail’,
editable: true,
width: ‘200px’
});

var oLabel = new sap.ui.commons.Label(“lbEmail”, {
text: ‘E-mail’,
labelFor: oTF
});
// Crear la primera fila

// Repetir lo mismo para los campos Last Name y First Name
// Crear el campo de texto para el last name

oTF = new sap.ui.commons.TextField(“tfLastName”, {
tooltip: ‘Last Name’,
editable: true,
width: ‘200px’
});
// Etiqueta para el campo last name
oLabel = new sap.ui.commons.Label(“lbLastName”, {
text: ‘Last Name’,
labelFor: oTF
});
// Crear la segunda fila

// Crear el campo de texto para el e-mail

oTF = new sap.ui.commons.TextField(“tfFirstName”, {
tooltip: ‘First Name’,
editable: true,
width: ‘200px’
});

oLabel = new sap.ui.commons.Label(“lbFirstName”, {
text: ‘First Name’,
labelFor: oTF
});
// Crear la tercera fila

// Agregar el layout para dialog

oDialog.addContent(oLayout);
// Agregar un button para enviar los datos del contacto a el REST

interface
oDialog.addButton(new sap.ui.commons.Button({text: “OK”,
press:function(){
// Obtener una referencia del Global Model

var oModel = sap.ui.getCore().getModel();
// los parametos que se enviaran al server

// como query string en la URL
var oParameters = {
“lastname”: sap.ui.getCore().getElementById(‘tfLastName’).getValue(),
“firstname”: sap.ui.getCore().getElementById(‘tfFirstName’).getValue()
};
// URL base del REST service

// Concatenamos la URL base y el email del contact’s

//Ejemplo:“../../../zscnblog2/contact/christianjianelli@gmail.com“
ServiceURL = ServiceURL +
sap.ui.getCore().getElementById(‘tfEmail’).getValue();
// Enviamos la peticion
oModel.loadDataNew(ServiceURL, handleSuccess, handleError,
oParameters);
if(oData.success===’false’){
// Mostrar mensaje
}else{
// Mostrar mensaje
sap.ui.getCore().getElementById(‘Dialog’).close();
}
// Mostrar mensaje
}
}}));
oDialog.open();

del main.controller.js. Ir al navegador y actualizar la página. Crear
dos nuevos contactos. Actualizar la página de nuevo. Pulse el
botón "Buscar", elija uno de los 3 campos para buscar al contacto
y pulse el botón "OK".
8. Anexos
8.1. Configurar FQDN.
Realizar los siguientes pasos para poder visualizar correctamente las pruebas
de la aplicación BSP en el navegador.
1. En tu PC, ir a la carpeta C:\Windows\System32\drivers\etc\
Editar el archivo "hosts" y añadir lo siguiente al final:
192.168.1.15 vmsapides.axelera.com.pe
2. En internet explorer ingresar con la url:
http://vmsapides.axelera.com.pe:8000/sap/bc/bsp/sap/zscnblog2/index.htm

Crud Abap

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Crud Abap

Diunggah oleh

Hak Cipta:

Format Tersedia

Construir una Aplicación CRUD con SAPUI5 e ICF REST-JSON

Field Key Data Element Data Type Length Description

MANDT X MANDT CLNT 3 Client

EMAIL X AD_SMTPADR CHAR 241 E-Mail Address

FIRSTNAME AD_NAMEFIR CHAR 40 First name

LASTNAME AD_NAMELAS CHAR 40 Last name

3. Descargar el Proyecto en Eclipse.

Ingresar a la transacción se24 y realizar una copia de la clase standard

En adelante trabajaremos con clase ZCL_JSON_SERIALIZER que acabamos

Esta modificación permitirá convertir la información ABAP a JSON en el

4.3.Extendiendo Modelo SAPUI5 JSON

5. Creación del Servicio ICF REST

Lo primero que tenemos que hacer es crear una clase controladora

Ahora ubicarse en la pestaña “Interfaces” e escribir IF_HTTP_EXTENSION

Ahora ubicarse en la ficha Métodos y hacer doble clic en el método

CALL METHOD server->response->set_cdata( data = ‘Service Ok!’ ).

Vamos a crear el Servicio ICF a continuación.

5.2.Creación del nodo ICF

Llenamos el nombre del servicio (zscnblog2).

Guardar los cambios, vuelva a la pantalla anterior, desplácese hacia

5.3.Recuperando el método de solicitud y los parámetros pasados

La primera cosa que el método handle_request debe hacer es identificar lo

* Recuperando los request method (POST, GET, PUT, DELETE)

* Recuperando los parámetros pasados en la URL

* Solo metodos GET, POST, PUT, DELETE son permitidos

WHEN ‘GET’. ” R (Read/Leer)

WHEN ‘PUT’. ” U (Update/Actualizar)

WHEN ‘DELETE’. ” D (Delete/Eliminar)

“Solo para probar!

6.1.1. Objetos del Diccionario

 Tipo Tabla ZTT_SCNBLOG2.

o Parámetros del método CREATE.

o Parámetros del método READ.

o Parámetros del método UPDATE.

o Parámetros del método DELETE.

 Implementación de los métodos de la clase.

DATA: l_cond(72) TYPE c,

CLEAR: l_cond, lt_cond[].

IF NOT i_s_contact-email IS INITIAL.

IF NOT i_s_contact-firstname IS INITIAL.

IF NOT i_s_contact-lastname IS INITIAL.

IF NOT lt_cond[] IS INITIAL.

SELECT email firstname lastname FROM ztb_scnblog2

SELECT email firstname lastname FROM ztb_scnblog2

UPDATE ztb_scnblog2 FROM i_s_contact.

DELETE FROM ztb_scnblog2 WHERE email = i_s_contact-email.

6.2. Implantación del método Create (verbo HTTP POST)

A continuación implementamos el código para manejar el método de

WHEN ‘POST’. ” C (Create)

*Recuperamos los datos del formulario

CREATE OBJECT lo_contact.

* Serializamos los datos ABAP a JSON

* Obtenemos el JSON string

* Establecemos el content type de la respuesta

* Retornamo el resutlado en formato JSON

Vamos a entender lo que hace el código anterior (sólo las partes

 Primero consultamos los datos del formulario recibidos desde la

 A continuación, creamos una instancia de la clase

*Creamos una instancia de la clase para persistir los datos del

 A continuación necesitamos manejar el resultado de la acción basado

 La información recibida se devuelve de nuevo a la aplicación cliente.

* Retornamos los datos recibidos del formulario de regreso al cliente

 Finalmente los datos son serializados en una cadena JSON.