[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
Al desarrollar una nueva\u00a0aplicaci\u00f3n SAPUI5<\/strong>\u00a0una de las cosas que debemos pensar es c\u00f3mo queremos estructurar dicha aplicaci\u00f3n, y por tanto, qu\u00e9\u00a0controles SAPUI5<\/strong>\u00a0vamos a necesitar.<\/p>\n Los controles SAPUI5, son los elementos de interfaz de usuario con los que se va a llevar a cabo la interacci\u00f3n, ya sea de una manera pasiva o activa. En este art\u00edculo, vamos a estudiar y dar ejemplos de algunos de esos\u00a0controles de una aplicaci\u00f3n SAPUI5<\/strong>.<\/p>\n <\/p>\n Actualmente existen infinidad de controles distribuidos en las diferentes\u00a0librer\u00edas SAPUI5<\/a>\u00a0(sap.ui.commons, sap.m\u2026<\/em>). En este art\u00edculo, s\u00f3lo vamos a introducir algunos de ellos, pero es posible encontrar todo tipo de informaci\u00f3n \u00fatil sobre propiedades, eventos y agregaciones relacionada con cada\u00a0control SAPUI5<\/strong>\u00a0en los siguientes enlaces:<\/p>\n La forma de crear un\u00a0control SAPUI5<\/strong>\u00a0depender\u00e1 del tipo de vista que se est\u00e9 creando (XML, JS, JSON, HTML\u2026) o de si el control se ha creado en el controlador de la vista, en cuyo caso siempre se crear\u00e1 mediante JS. En este art\u00edculo mostraremos algunos ejemplos usando XML.<\/p>\n SAPUI5<\/strong>\u00a0ofrece controles de todo tipo, desde los m\u00e1s simples como un\u00a0Label<\/em>\u00a0o un\u00a0Button<\/em>\u00a0hasta los m\u00e1s complejos como mapas geogr\u00e1ficos din\u00e1micos o gr\u00e1ficos. La clasificaci\u00f3n de controles es la siguiente:<\/p>\n Cualquier\u00a0control SAPUI5<\/strong>\u00a0dispone de una serie de propiedades que definen su apariencia en la interfaz. Es conveniente consultar la documentaci\u00f3n anteriormente citada, para conocer qu\u00e9 propiedades disponen los distintos controles que queramos utilizar.<\/p>\n Para definir\u00a0propiedades en XML<\/strong>\u00a0se utiliza la notaci\u00f3n\u00a0propiedad=\u201dvalor\u201d<\/em>\u00a0dentro de la etiqueta XML de apertura del control. A continuaci\u00f3n, vemos la declaraci\u00f3n de un\u00a0Label (sap.m.Label)<\/em>\u00a0y un\u00a0Input (sap.m.Input)<\/em>.<\/p>\n <\/p>\n Como se comentaba anteriormente, los\u00a0controles SAPUI5<\/strong>\u00a0son los elementos con el que el usuario interact\u00faa, por esta raz\u00f3n, estos controles pueden reaccionar a diferentes eventos.<\/p>\n Mediante la definici\u00f3n de\u00a0eventos SAPUI5<\/strong>\u00a0se establece c\u00f3mo se comportar\u00e1 el control. La forma de definir eventos es similar a la forma de definir propiedades, solo que el valor puede ser una funci\u00f3n an\u00f3nima (en el caso de las vistas Javascript) o mediante una llamada a una funci\u00f3n del controlador.<\/p>\n A continuaci\u00f3n, vemos un ejemplo de definici\u00f3n de evento en un control\u00a0ComboBox (sap.m.ComboBox)\u00a0<\/em>de una vista XML.<\/p>\n En el controlador correspondiente deber\u00e1 estar la\u00a0implementaci\u00f3n del evento<\/strong>\u00a0en una funci\u00f3n llamada \u201conChange\u201d.<\/p>\n Igual que se ha comentado para las propiedades, para saber a qu\u00e9 eventos reacciona cada control se puede consultar la documentaci\u00f3n.<\/p>\n Gran parte de los\u00a0controles SAPUI5<\/strong>\u00a0tienen propiedades m\u00e1s complejas que las que se han mostrado en el apartado b). A este tipo de propiedades en lugar de asignar un valor concreto se les asigna una colecci\u00f3n de valores o de otros controles SAPUI5. Este tipo de propiedades, se denominan\u00a0agregaciones<\/strong>.<\/p>\n En el siguiente ejemplo, podemos ver la agregaci\u00f3n\u00a0columns<\/em>\u00a0en un control SAPUI5 de tipo\u00a0Table<\/em>\u00a0(sap.ui.table.Table<\/em>), que en lugar de ser un valor simple es una\u00a0colecci\u00f3n de controles<\/strong>\u00a0de tipo\u00a0Column<\/em>\u00a0(sap.ui.table.Column<\/em>).<\/p>\n <\/p>\n En la tabla anterior aparece el primer caso de\u00a0DataBinding<\/strong>, en el que se enlaza la agregaci\u00f3n\u00a0rows<\/em>\u00a0con un modelo. Este concepto, es clave en el desarrollo de cualquier\u00a0aplicaci\u00f3n SAPUI5<\/strong>\u00a0ser\u00e1 tratado en pr\u00f3ximos art\u00edculos.<\/p>\n De momento, con estos conceptos sobre los\u00a0controles de una aplicaci\u00f3n SAPUI5<\/strong>\u00a0podemos comenzar a dise\u00f1ar las pantallas de nuestra aplicaci\u00f3n.<\/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":" Al desarrollar una nueva\u00a0aplicaci\u00f3n SAPUI5\u00a0una de las cosas que debemos pensar es c\u00f3mo queremos estructurar dicha aplicaci\u00f3n, y por tanto, qu\u00e9\u00a0controles SAPUI5\u00a0vamos a necesitar. Los controles SAPUI5, son los elementos de interfaz de usuario con los que se va a llevar a cabo la interacci\u00f3n, ya sea de una manera pasiva o activa. En este […]<\/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":[52,51],"tags":[],"class_list":["post-18101","post","type-post","status-publish","format-standard","hentry","category-sapui5","category-user-experience-integracion"],"_links":{"self":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/18101","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=18101"}],"version-history":[{"count":4,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/18101\/revisions"}],"predecessor-version":[{"id":22555,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/18101\/revisions\/22555"}],"wp:attachment":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/media?parent=18101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/categories?post=18101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/tags?post=18101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Tipos de controles SAPUI5<\/strong><\/h2>\n
\n
![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2016\/07\/sapui5-controles-complejos-1.png\")
<\/p>\nPropiedades de controles SAPUI5<\/strong><\/h2>\n
<Label id=\"Label1\"\n\ntext=\"Ejemplo de Label\"\n\ntextAlign = \"Begin\"\n\nrequired=\"true\"\/>\n\n<Input id=\"Input1\"\n\ntype=\"Number\"\n\nplaceholder=\"Tu numero\"\n\n\/><\/pre>\n
![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2016\/07\/sapui5-controles-complejos-2.png\")
<\/p>\nEventos en controles SAPUI5<\/strong><\/h2>\n
<ComboBox selectionChange=\"onChange\">\n\n<items>\n\n<core:Item key=\"Fiori\" text=\"Fiori\"\/>\n\n<core:Item key=\"UI5\" text=\"UI5\"\/>\n\n<core:Item key=\"GW\" text=\"Gateway\"\/>\n\n<\/items>\n\n<\/ComboBox><\/pre>\n
onChange:function(){\n\nalert(\"On Change\");\n\n}<\/pre>\n![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2016\/07\/sapui5-controles-complejos-3.png\")
<\/p>\nAgregaciones de controles SAPUI5<\/strong><\/h2>\n
<t:Table id=\"Tabla1\" rows=\"{path: 'tm>\/temario'}\">\n\n<t:columns>\n\n<t:Column>\n\n<Label id=\"col1\" text=\"Col1\" \/>\n\n<t:template>\n\n<Text text=\"{tm>id}\"\/>\n\n<\/t:template>\n\n<\/t:Column>\n\n<t:Column>\n\n<Label id=\"col2\" text=\"Col2\" \/>\n\n<t:template>\n\n<Text text=\"{tm>nombre}\"\/>\n\n<\/t:template>\n\n<\/t:Column>\n\n<\/t:columns>\n\n<\/t:Table><\/pre>\n![\"\"](\"https:\/\/orekait.com\/wp-content\/uploads\/2016\/07\/sapui5-controles-complejos-4-300x29.png\")
<\/p>\n