4. Ficheros principales de una aplicaci\u00f3n SAPUI5<\/strong><\/h2>\nindex.html<\/h3>\n
Como introdujimos en el art\u00edculo anterior, este fichero es el punto de entrada a la\u00a0aplicaci\u00f3n SAPUI5<\/strong>. En \u00e9l encontramos tres partes principales:<\/p>\n\n- Bootstrap:\u00a0<\/strong>El\u00a0bootstrap\u00a0<\/em>es el primer\u00a0script<\/em>\u00a0que se ejecuta al cargar la\u00a0aplicaci\u00f3n SAPUI5<\/strong>. En \u00e9l se establecen valores de configuraci\u00f3n tales como el idioma (data-sap-ui-language)<\/em>\u00a0o el tema (data-sap-ui-theme)<\/em>\u00a0por defecto a utilizar. As\u00ed mismo, se cargan las librer\u00edas necesarias para la aplicaci\u00f3n (data-sap<\/em>, tanto las del\u00a0core<\/em>\u00a0como las opcionales que vimos en el art\u00edculo sobre\u00a0librer\u00edas SAPUI5: en este caso, al haber elegido\u00a0m<\/em>\u00a0como librer\u00eda base, la encontramos ya entre las librer\u00edas a incluir.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2016\/01\/sapui5-bootstrap-1.png\")
<\/p>\n
\n- L\u00f3gica de negocio:\u00a0<\/strong>Despu\u00e9s del\u00a0bootstrap\u00a0<\/em>se encuentra un segundo\u00a0script<\/em>\u00a0en el que ya s\u00ed se comienzan a declarar e instanciar los elementos SAPUI5 necesarios: controles, vistas, etc. para despu\u00e9s colocar estas en el \u00e1rea UI. En este casovemos c\u00f3mo crea un control\u00a0App<\/em>\u00a0a la que se a\u00f1ade la\u00a0vista SAPUI<\/strong>5 que hemos creado como vista inicial. Despu\u00e9s, mediante el m\u00e9todo\u00a0placeAt<\/em>\u00a0coloca esta\u00a0App<\/em>\u00a0en\u00a0content,\u00a0<\/em>que no es otra cosa que un DIV HTML declarado en el \u00e1rea UI.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2016\/01\/sapui5-bootstrap-2.png\")
<\/p>\n
\n- Area UI:\u00a0<\/strong>El \u00e1rea UI es un bloque de c\u00f3digo HTML que es la base de la aplicaci\u00f3n SAPUI5 a la que se le ir\u00e1 a\u00f1adiendo c\u00f3digo din\u00e1micamente. Inicialmente cuenta \u00fanicamente con el elemento <BODY> y un <DIV> cuyo ID es\u00a0content,<\/em>\u00a0al que como hemos visto anteriormente se hace referencia desde la l\u00f3gica de negocio. Este c\u00f3digo HTML se puede modificar c\u00f3mo se desee, borrando o creando bloques HTML. Mediante el m\u00e9todo\u00a0addContent<\/em>\u00a0se ir\u00e1 pegando el c\u00f3digo derivado de controles, vistas etc. en estos bloques HTML indicando siempre el ID de cada bloque.<\/li>\n<\/ul>\n
Prueba.view.js<\/h3>\n
Como hemos visto, al haber generado una vista inicial en el proyecto, desde el index.html autom\u00e1ticamente se hace referencia a una\u00a0vista SAPUI5<\/strong>, la cual se corresponde directamente con este fichero\u00a0Prueba.view.js<\/em>. En esta vista podemos crear diferentes controles que compondr\u00e1n la\u00a0interfaz de la aplicaci\u00f3n SAPUI5<\/strong>: botones, textos, tablas, listas etc.<\/p>\nEn una\u00a0vista SAPUI5<\/strong>, sea el lenguaje que sea, veremos siempre dos elementos importantes: la referencia al controlador y el contenido.<\/p>\nEn este caso al ser una vista Javascript, estos dos elementos se corresponden con dos funciones:<\/p>\n
\n- getControllerName:<\/strong>\u00a0En esta funci\u00f3n obtenemos la referencia al controlador que dotar\u00e1 de funcionalidad a la vista.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2016\/01\/sapui5-bootstrap-3.png\")
<\/p>\n
\n- createContent:<\/strong>\u00a0Funci\u00f3n en la que iremos creando y a\u00f1adiendo\u00a0controles SAPUI5<\/strong>. Para ver un ejemplo sencillo, vamos a a\u00f1adir una p\u00e1gina que dentro tendr\u00e1 un bot\u00f3n de la librer\u00eda\u00a0m<\/em>. y rellenaremos sus propiedades y eventos.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2016\/01\/sapui5-bootstrap-4.png\")
<\/p>\n
Prueba.controller.js<\/h3>\n
Como podemos ver en el ejemplo anterior, a la vista Prueba se le ha asignado un controlador en el que se implementar\u00e1 la l\u00f3gica necesaria para atender a eventos, realizar validaciones etc. El fichero Prueba.controller.js es el fichero que se corresponde con este controlador.<\/p>\n
Por defecto, al crear autom\u00e1ticamente el controlador con el wizard este crea ya una serie de funciones comentadas que se corresponden con los eventos b\u00e1sicos de la aplicaci\u00f3n (onInit, onBeforeRendering, onAfterRendering y onExit).<\/p>\n
En el c\u00f3digo del bot\u00f3n anteriormente creado en la vista, podemos ver que el control\u00a0sap.m.Button<\/strong>\u00a0responde a un evento press, para el cual se indica una funci\u00f3n propia del controlador. Es decir, cuando se pulse el bot\u00f3n, la aplicaci\u00f3n buscar\u00e1 el controlador asociado a la vista y ejecutar\u00e1 la funci\u00f3n onPress que este tenga implementado. A continuaci\u00f3n vemos el c\u00f3digo del controlador:<\/p>\n![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2016\/01\/sapui5-bootstrap-5.png\")
<\/p>\n
Con todo esto, ya podemos ver en funcionamiento nuestro primer\u00a0proyecto SAPUI5<\/strong>. Para ello, pulsamos con el bot\u00f3n derecho sobre el proyecto en el\u00a0Project Explorer\u00a0<\/em>y seleccionamos la opci\u00f3n\u00a0Run As \u2013> Web App Preview\u00a0<\/em>con lo que se abrir\u00e1 un navegador integrado en\u00a0Eclipse<\/strong>\u00a0donde podremos ver la\u00a0aplicaci\u00f3n SAPUI5<\/strong>\u00a0en funcionamiento:<\/p>\n![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2016\/01\/sapui5-bootstrap-6.png\")
<\/p>\n
Con esto ya hemos creado nuestra primera\u00a0aplicaci\u00f3n SAPUI5<\/strong>.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”M\u00e1s informaci\u00f3n” _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n
M\u00e1s informaci\u00f3n:<\/p>\n
[\/et_pb_text][et_pb_button button_url=”https:\/\/orekait.com\/es\/area-personalizacion” button_text=”M\u00e1s informaci\u00f3n” module_class=”entrada-btn” _builder_version=”4.25.2″ _module_preset=”default” custom_button=”on” button_text_color=”#8156EA” button_bg_color=”RGBA(255,255,255,0)” button_border_color=”#8156EA” button_border_radius=”30px” button_font=”Plus Jakarta Sans|600|||||||” button_icon=”$||divi||400″ button_icon_color=”#8156EA” button_on_hover=”off” hover_enabled=”0″ global_colors_info=”{}” button_text_color__hover_enabled=”on|desktop” button_text_color__hover=”#8156EA” button_bg_color__hover_enabled=”on|hover” button_bg_color__hover=”#8156EA” button_bg_enable_color__hover=”on” button_icon_color__hover_enabled=”on|hover” button_icon_color__hover=”#ffffff” url_new_window=”on” sticky_enabled=”0″][\/et_pb_button][et_pb_divider show_divider=”off” _builder_version=”4.25.2″ _module_preset=”default” custom_margin=”||40px||false|false” global_colors_info=”{}”][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=”on” admin_label=”Noticias relacionadas titulo” module_id=”fondo-articulos” _builder_version=”4.25.2″ _module_preset=”default” background_color=”#f7f7f7″ width=”100%” collapsed=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_divider show_divider=”off” _builder_version=”4.25.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” custom_margin=”||40px||false|false” global_colors_info=”{}”][\/et_pb_divider][et_pb_heading title=”Quizas te pueda interesar” _builder_version=”4.25.2″ _module_preset=”default” title_level=”h2″ title_text_align=”center” global_colors_info=”{}”][\/et_pb_heading][et_pb_divider show_divider=”off” _builder_version=”4.25.2″ _module_preset=”default” custom_margin=”||30px||false|false” global_colors_info=”{}”][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”Noticias relacionadas” _builder_version=”4.25.2″ _module_preset=”default” width=”100%” custom_margin=”-150px||||false|false” custom_margin_tablet=”0px||||false|false” custom_margin_phone=”0px||||false|false” custom_margin_last_edited=”on|desktop” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_blog fullwidth=”off” posts_number=”3″ include_categories=”current” show_author=”off” show_date=”off” show_pagination=”off” _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_blog][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"
Siguiendo con lo comentado en el art\u00edculo anterior sobre\u00a0creaci\u00f3n de aplicaciones SAPUI5, en esta segunda parte vamos a ver con m\u00e1s detalle los ficheros m\u00e1s importantes que forman la base de un\u00a0proyecto SAPUI5\u00a0y los modificaremos para ver en funcionamiento nuestra primera\u00a0aplicaci\u00f3n SAPUI5. 4. Ficheros principales de una aplicaci\u00f3n SAPUI5 index.html Como introdujimos en el […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"Lorem ipsum dolor sit amet consectetur adipiscing elit congue montes, imperdiet taciti erat elementum fermentum sem ante ultrices ridiculus, sagittis sociis egestas quisque ac semper quis odio. Aenean hendrerit ac metus dis nascetur aliquet mollis integer, rutrum vel laoreet posuere proin sagittis luctus est, tempus duis nisl ultrices parturient tempor praesent. Dignissim curabitur nascetur pellentesque augue fringilla pulvinar eros, tempus fames vehicula maecenas cubilia id, rutrum euismod integer ut scelerisque mus.\r\n\r\nVivamus auctor odio aenean rhoncus natoque dictum purus, volutpat pellentesque laoreet ridiculus consequat nisi varius euismod, augue platea convallis curae magnis taciti. Imperdiet nibh curabitur quisque orci consequat aenean pellentesque, cubilia duis senectus felis sed posuere tortor, magnis enim diam a odio sociis. Enim tellus nisl nec molestie augue luctus tempor habitant, nunc dictumst phasellus volutpat sem facilisis taciti, habitasse laoreet at turpis vel fermentum vulputate.","_et_gb_content_width":"","footnotes":""},"categories":[57,52,51],"tags":[],"class_list":["post-18843","post","type-post","status-publish","format-standard","hentry","category-sap-netweaver","category-sapui5","category-user-experience-integracion"],"_links":{"self":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/18843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/comments?post=18843"}],"version-history":[{"count":4,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/18843\/revisions"}],"predecessor-version":[{"id":22599,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/18843\/revisions\/22599"}],"wp:attachment":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/media?parent=18843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/categories?post=18843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/tags?post=18843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}