{"id":14853,"date":"2018-08-27T08:00:31","date_gmt":"2018-08-27T06:00:31","guid":{"rendered":"http:\/\/192.168.20.3\/?p=14853"},"modified":"2024-12-12T13:11:44","modified_gmt":"2024-12-12T12:11:44","slug":"sapui5-funcionamiento-navegacion-y-enrutamiento","status":"publish","type":"post","link":"https:\/\/orekait.com\/es\/sapui5-funcionamiento-navegacion-y-enrutamiento\/","title":{"rendered":"SAP UI5: <br><span class=\"font-300\">Navegaci\u00f3n y Enrutamiento<\/span>"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;4.25.2&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_row admin_label=&#8221;Imagen principal&#8221; _builder_version=&#8221;4.16&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_image alt=&#8221;cloud-public&#8221; title_text=&#8221;sap-process-orchestration-1&#8243; admin_label=&#8221;Imagen principal&#8221; module_class=&#8221;post-img&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;Cuerpo&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text content_last_edited=&#8221;off|desktop&#8221; admin_label=&#8221;Texto&#8221; _builder_version=&#8221;4.25.2&#8243; header_2_font_size=&#8221;24px&#8221; header_3_font_size=&#8221;20px&#8221; header_4_font_size=&#8221;17px&#8221; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; width=&#8221;%22671%22&#8243; height=&#8221;%22251%22&#8243; global_colors_info=&#8221;{}&#8221; content__hover_enabled=&#8221;off|hover&#8221;]<\/p>\n<p>En un art\u00edculo anterior expliqu\u00e9\u00a0<a href=\"https:\/\/orekait.com\/blog\/sapui5-y-el-nuevo-archivo-de-configuracion-manifest-json\/\">c\u00f3mo configurar nuestra aplicaci\u00f3n SAPUI5 mediante el manifest.json<\/a>. En este art\u00edculo explicar\u00e9\u00a0<strong>c\u00f3mo funciona la navegaci\u00f3n en las aplicaciones SAPUI5.<\/strong><span id=\"more-5993\"><\/span><\/p>\n<h2>Funcionamiento de la navegaci\u00f3n<\/h2>\n<p><strong>SAPUI5 ofrece una navegaci\u00f3n basada en rutas<\/strong>, esto nos permite crear aplicaci\u00f3n de p\u00e1gina \u00fanica (single-page) donde la navegaci\u00f3n funciona cambiando la ruta. De esta forma\u00a0<strong>el navegador no tiene que recargar la p\u00e1gina<\/strong>.<\/p>\n<p>Para utilizar la navegaci\u00f3n en SAPUI5 deberemos implementar un router.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-14858 size-full\" src=\"https:\/\/orekait.com\/wp-content\/uploads\/2018\/09\/SAP-IU5-Navegacion-y-enrutamiento-1.png\" alt=\"\" width=\"1029\" height=\"553\" srcset=\"https:\/\/orekait.com\/wp-content\/uploads\/2018\/09\/SAP-IU5-Navegacion-y-enrutamiento-1.png 1029w, https:\/\/orekait.com\/wp-content\/uploads\/2018\/09\/SAP-IU5-Navegacion-y-enrutamiento-1-980x527.png 980w, https:\/\/orekait.com\/wp-content\/uploads\/2018\/09\/SAP-IU5-Navegacion-y-enrutamiento-1-480x258.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1029px, 100vw\" \/><\/p>\n<p>El router es encargado de controlar la navegaci\u00f3n, para realizar dicho control realizara las siguientes funciones:<\/p>\n<ul>\n<li>Escuchar los cambios el hash<\/li>\n<li>Manipular es hash<\/li>\n<li>Comparar el hash con los patrones de las rutas<\/li>\n<\/ul>\n<p>Cada vez que hash cambia, el router compara los patrones de las rutas. Si hay alg\u00fan patr\u00f3n coincide, se mostrar\u00e1 la vista correspondiente. Adem\u00e1s, si junto al hash tiene par\u00e1metros, estos se enviar\u00e1n a la vista.<\/p>\n<p>Para que router funcione correctamente, deberemos<strong>\u00a0configurar las rutas y los targest<\/strong>.<\/p>\n<ul>\n<li>Las rutas tendr\u00e1n definido un patr\u00f3n con el que comparemos el hash. Si coinciden, la ruta indicara que targests deben visualizarse.<\/li>\n<li>Los targets, definir\u00e1n que vistas deben visualizarse.<\/li>\n<\/ul>\n<p>Dicha configuraci\u00f3n puede realizarse globalmente, para toda la aplicaci\u00f3n, o local.\u00a0<strong>Para realizar la configuraci\u00f3n global deberemos utilizar el manifest.json<\/strong>\u00a0o Component.js, en cambio si desea hacer la configuraci\u00f3n local deber\u00e1 utilizar las clases, Route y Target ubicadas en los namespaces sap.ui.core.routing y sap.m.routing.<\/p>\n<p>Gracias del router,<strong>\u00a0podemos implementar la navegaci\u00f3n en nuestras aplicaciones<\/strong>\u00a0de una manera sencilla.<\/p>\n<p>En el pr\u00f3ximo art\u00edculo explicare los diferentes tipos de patrones que podemos crear.<\/p>\n<p>Si tienes cualquier duda d\u00e9janos un comentario en este post o\u00a0<a href=\"https:\/\/orekait.com\/contacto\">contacta con nosotros.<\/a><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;M\u00e1s informaci\u00f3n&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p class=\"morado\">M\u00e1s informaci\u00f3n:<\/p>\n<p>[\/et_pb_text][et_pb_button button_url=&#8221;https:\/\/orekait.com\/es\/area-finanzas&#8221; button_text=&#8221;M\u00e1s informaci\u00f3n&#8221; module_class=&#8221;entrada-btn&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#8156EA&#8221; button_bg_color=&#8221;RGBA(255,255,255,0)&#8221; button_border_color=&#8221;#8156EA&#8221; button_border_radius=&#8221;30px&#8221; button_font=&#8221;Plus Jakarta Sans|600|||||||&#8221; button_icon=&#8221;&#x24;||divi||400&#8243; button_icon_color=&#8221;#8156EA&#8221; button_on_hover=&#8221;off&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; button_text_color__hover_enabled=&#8221;on|desktop&#8221; button_text_color__hover=&#8221;#8156EA&#8221; button_bg_color__hover_enabled=&#8221;on|hover&#8221; button_bg_color__hover=&#8221;#8156EA&#8221; button_bg_enable_color__hover=&#8221;on&#8221; button_icon_color__hover_enabled=&#8221;on|hover&#8221; button_icon_color__hover=&#8221;#ffffff&#8221; url_new_window=&#8221;on&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_button][et_pb_divider show_divider=&#8221;off&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||40px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=&#8221;on&#8221; admin_label=&#8221;Noticias relacionadas titulo&#8221; module_id=&#8221;fondo-articulos&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#f7f7f7&#8243; width=&#8221;100%&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_divider show_divider=&#8221;off&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;RGBA(255,255,255,0)&#8221; custom_margin=&#8221;||40px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_divider][et_pb_heading title=&#8221;Quizas te pueda interesar&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; title_level=&#8221;h2&#8243; title_text_align=&#8221;center&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_divider show_divider=&#8221;off&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||30px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=&#8221;Noticias relacionadas&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; width=&#8221;100%&#8221; custom_margin=&#8221;-150px||||false|false&#8221; custom_margin_tablet=&#8221;0px||||false|false&#8221; custom_margin_phone=&#8221;0px||||false|false&#8221; custom_margin_last_edited=&#8221;on|desktop&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_blog fullwidth=&#8221;off&#8221; posts_number=&#8221;3&#8243; include_categories=&#8221;current&#8221; show_author=&#8221;off&#8221; show_date=&#8221;off&#8221; show_pagination=&#8221;off&#8221; _builder_version=&#8221;4.25.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_blog][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En un art\u00edculo anterior expliqu\u00e9\u00a0c\u00f3mo configurar nuestra aplicaci\u00f3n SAPUI5 mediante el manifest.json. En este art\u00edculo explicar\u00e9\u00a0c\u00f3mo funciona la navegaci\u00f3n en las aplicaciones SAPUI5. Funcionamiento de la navegaci\u00f3n SAPUI5 ofrece una navegaci\u00f3n basada en rutas, esto nos permite crear aplicaci\u00f3n de p\u00e1gina \u00fanica (single-page) donde la navegaci\u00f3n funciona cambiando la ruta. De esta forma\u00a0el navegador no [&hellip;]<\/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":[51,39,40,42],"tags":[],"class_list":["post-14853","post","type-post","status-publish","format-standard","hentry","category-user-experience-integracion","category-finanzas","category-sap-fi","category-sap-ps-project-system"],"_links":{"self":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/14853","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=14853"}],"version-history":[{"count":7,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/14853\/revisions"}],"predecessor-version":[{"id":22292,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/14853\/revisions\/22292"}],"wp:attachment":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/media?parent=14853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/categories?post=14853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/tags?post=14853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}