{"id":18879,"date":"2015-12-21T08:00:31","date_gmt":"2015-12-21T07:00:31","guid":{"rendered":"http:\/\/192.168.20.3\/?p=18879"},"modified":"2024-12-13T10:35:09","modified_gmt":"2024-12-13T09:35:09","slug":"creacion-de-una-aplicacion-sapui5-1-2-2","status":"publish","type":"post","link":"https:\/\/orekait.com\/es\/creacion-de-una-aplicacion-sapui5-1-2-2\/","title":{"rendered":"Creaci\u00f3n de una aplicaci\u00f3n SAPUI5
(1 \/ 2)<\/span>"},"content":{"rendered":"

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”4.25.2″ global_colors_info=”{}”][et_pb_row admin_label=”Imagen principal” _builder_version=”4.25.2″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_image alt=”cloud-public” title_text=”Reclamacio\u0301n-de-facturas-vencidas-en-SAP-FI-1″ admin_label=”Imagen principal” module_class=”post-img” _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”Cuerpo” _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 content_last_edited=”off|desktop” admin_label=”Texto” _builder_version=”4.25.2″ header_2_font_size=”24px” header_3_font_size=”20px” header_4_font_size=”17px” background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”%22671%22″ height=”%22251%22″ global_colors_info=”{}” content__hover_enabled=”off|hover”]<\/p>\n

Ahora que ya conocemos qu\u00e9 es\u00a0SAPUI5<\/strong>\u00a0y qu\u00e9 librer\u00edas SAPUI5 tenemos a nuestra disposici\u00f3n, nos ponemos manos a la obra y vamos a explicar c\u00f3mo\u00a0crear una aplicaci\u00f3n SAPUI5<\/strong>. Para ello, vamos a ver qu\u00e9 herramientas necesitamos y cu\u00e1les son los primeros pasos que debemos dar para ver en funcionamiento una\u00a0aplicaci\u00f3n SAPUI5<\/strong>.<\/p>\n

 <\/p>\n

1. Entorno de desarrollo SAPUI5<\/strong><\/h2>\n

En primer lugar, para ponernos a\u00a0desarrollar una aplicaci\u00f3n SAPUI5<\/strong>\u00a0deberemos tener instalado el entorno de desarrollo por excelencia:\u00a0Eclipse<\/strong>, para el que deberemos instalar dos plugins especiales propios de SAPUI5:<\/p>\n

\"\"<\/p>\n

    \n
  • SAPUI5 ABAP Repository Team Provider<\/em><\/strong>: Nos proveer\u00e1 de la funcionalidad necesaria para deployar nuestra aplicaci\u00f3n SAPUI5 a un repository ABAP.<\/li>\n
  • UI Development toolkit for HTML5:\u00a0<\/em><\/strong>Descargar\u00e1 todas las librer\u00edas y recursos necesarios para el desarrollo de aplicaciones SAPUI5.<\/li>\n<\/ul>\n

    2. Creaci\u00f3n de un proyecto SAPUI5<\/strong><\/h2>\n

    Una vez que disponemos del entorno de desarrollo Eclipse, con los componentes necesarios instalados, el siguiente paso es crear un\u00a0proyecto SAPUI5<\/strong>. Para ello, seguimos los siguientes pasos:<\/p>\n

    1. Desde el men\u00fa File de Eclipse:\u00a0File \u2013> New \u2013> Project<\/em>
    2. Dentro de la carpeta\u00a0SAPUI5 Application Development<\/em>, elegir la opci\u00f3n\u00a0Application Project<\/em>:<\/p>\n

    \"\"<\/p>\n

    3. En la siguiente pantalla, adem\u00e1s de elegir el nombre del proyecto, es el momento de elegir la\u00a0librer\u00eda SAPUI5<\/strong>\u00a0base del proyecto:\u00a0ui.commons<\/em>\u00a0(aplicaci\u00f3n escritorio) o\u00a0sap.m<\/em>\u00a0(aplicaci\u00f3n m\u00f3vil). Adem\u00e1s, tenemos la opci\u00f3n de crear una vista inicial o no. Normalmente, seleccionamos esta opci\u00f3n para que autom\u00e1ticamente nos cree la primera vista donde vamos a ir creando la interfaz de nuestra\u00a0aplicaci\u00f3n SAPUI5<\/strong>, as\u00ed como el controlador asociado a esta.<\/p>\n

    \"\"<\/p>\n

    4. Si hemos seleccionado la opci\u00f3n \u201cCreate an Initial View<\/em>\u201d tendremos que dar un nombre a esta vista inicial adem\u00e1s de elegir el\u00a0tipo de vista SAP UI5<\/strong>\u00a0que queremos que sea. Las vistas pueden desarrollarse en los siguientes formatos: Javascript, XML, JSON y HTML.<\/p>\n

    La elecci\u00f3n de un formato u otro depende principalmente de las preferencias del desarrollador. Aunque es cierto que las vistas de tipo Javascript son las que m\u00e1s potencia tienen, pero por otra parte, las vistas XML son las m\u00e1s ligeras en cuanto a lo que a carga de la p\u00e1gina se refiere. Para este ejemplo elegiremos Javascript.<\/p>\n

    \"\"<\/p>\n

    5. Por \u00faltimo, pulsando \u201cFinalizar<\/em>\u201d el wizard de creaci\u00f3n de\u00a0proyecto SAPUI5\u00a0<\/strong>terminar\u00e1 y en el explorador de proyectos de Explorer ya dispondremos de la estructura inicial de nuestro nuevo proyecto SAPUI5.<\/p>\n

    3. Estructura b\u00e1sica del proyecto SAPUI5<\/strong><\/h2>\n

    Nada m\u00e1s crear un\u00a0proyecto SAPUI5<\/strong>\u00a0nos encontraremos con la estructura de ficheros que se puede observar en la siguiente imagen.<\/p>\n

    \"\"<\/p>\n

    En ella podemos encontrar todas las librer\u00edas y recursos necesarios para el\u00a0desarrollo SAPUI5<\/strong>, pero donde tenemos que prestar especial atenci\u00f3n es en la carpeta\u00a0WebContent<\/em>\u00a0del proyecto, en la que se encontrar\u00e1n todos los ficheros que tendremos que manipular para ir desarrollando nuestra aplicaci\u00f3n SAPUI5.<\/p>\n

      \n
    • html:<\/em>\u00a0Es el punto de acceso a la aplicaci\u00f3n, donde se cargar\u00e1n todos los recursos necesarios y en donde se encontrar\u00e1 el HTML al que se ir\u00e1 a\u00f1adiendo contenido para crear la interfaz final de la aplicaci\u00f3n.<\/li>\n
    • \/proyectodeprueba\/Prueba.view.js<\/em>: Fichero Javascript en el que se desarrollar\u00e1 la vista inicial de la aplicaci\u00f3n. Como ya se ha comentado, las vistas pueden ser ficheros Javascript, XML, JSON o HTML.<\/li>\n
    • \/proyectodeprueba\/Prueba.controller.js:\u00a0<\/em>Fichero Javascript correspondiente al controlador asociado a la vista inicial de la aplicaci\u00f3n SAPUI5. En \u00e9l se implementar\u00e1 la funcionalidad propia de la vista: respuesta a eventos, validaciones, etc. En el caso de los controladores, siempre ser\u00e1n ficheros Javascript.<\/li>\n<\/ul>\n

      En la segunda parte de este art\u00edculo, incidiremos m\u00e1s en cada uno de estos ficheros y veremos con qu\u00e9 elementos clave cuenta cada uno de ellos, adem\u00e1s de empezar a dise\u00f1ar una interfaz para esta\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":"

      Ahora que ya conocemos qu\u00e9 es\u00a0SAPUI5\u00a0y qu\u00e9 librer\u00edas SAPUI5 tenemos a nuestra disposici\u00f3n, nos ponemos manos a la obra y vamos a explicar c\u00f3mo\u00a0crear una aplicaci\u00f3n SAPUI5. Para ello, vamos a ver qu\u00e9 herramientas necesitamos y cu\u00e1les son los primeros pasos que debemos dar para ver en funcionamiento una\u00a0aplicaci\u00f3n SAPUI5.   1. Entorno de desarrollo […]<\/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-18879","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\/18879","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=18879"}],"version-history":[{"count":4,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/18879\/revisions"}],"predecessor-version":[{"id":22601,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/18879\/revisions\/22601"}],"wp:attachment":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/media?parent=18879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/categories?post=18879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/tags?post=18879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}