{"id":7802,"date":"2021-10-04T08:00:31","date_gmt":"2021-10-04T06:00:31","guid":{"rendered":"http:\/\/192.168.20.3\/?p=7802"},"modified":"2024-12-11T09:29:11","modified_gmt":"2024-12-11T08:29:11","slug":"expression-binding-user-experience-and-integracion","status":"publish","type":"post","link":"https:\/\/orekait.com\/es\/expression-binding-user-experience-and-integracion\/","title":{"rendered":"Expression Binding<br><span class=\"font-300\"><\/span>"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;4.16&#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 src=&#8221;https:\/\/orekait.com\/wp-content\/uploads\/2021\/10\/exbinding.png&#8221; alt=&#8221;cloud-public&#8221; title_text=&#8221;exbinding&#8221; 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 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; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; content__hover_enabled=&#8221;off|hover&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<p>En el art\u00edculo anterior de<strong>\u00a0<a href=\"https:\/\/orekait.com\/blog\/binding-syntax-sap-ui5\/\">Biding Syntax<\/a><\/strong>, vimos los diferentes tipos de bindings que tenemos disponibles para usar en nuestras aplicaciones\u00a0<strong>SAPUI5<\/strong>. En este art\u00edculo entraremos a ver en detalle opci\u00f3n del\u00a0<strong>Expression Binding<\/strong>.<\/p>\n<p>El Expression Binding est\u00e1\u00a0<strong>disponible a partir de la versi\u00f3n 1.28 de SAPUI5<\/strong>\u00a0y nos permite a\u00f1adir cierta l\u00f3gica a nuestros bindings\u00a0<strong>sin<\/strong>\u00a0tener que usar un<strong>\u00a0formatter<\/strong>. La\u00a0<strong>sintaxis\u00a0<\/strong>que utiliza es parecida a la de\u00a0<strong>JavaScript<\/strong>\u00a0pero solo tendremos permitidas algunas acciones. Por ejemplo:<\/p>\n<ul>\n<li><strong>Comparativas<\/strong>\u00a0<em>(==, ===, !=, !==, &gt;, &lt;, &gt;=, &lt;=)<\/em><\/li>\n<li>Operaciones\u00a0<strong>aritm\u00e9ticas<\/strong>\u00a0<em>(+, -, *, **, \/, %, ++, \u2013)<\/em><\/li>\n<li><strong>Ejecutar funciones<\/strong>.\u00a0<em>Siempre que est\u00e9n disponibles v\u00eda<strong>\u00a0\u201cGlobal Symbols\u201d\u00a0<\/strong>como<strong>\u00a0\u201cparseFloat\u201d<\/strong>\u00a0o<strong>\u00a0\u201cisNaN\u201d<\/strong>.<\/em><\/li>\n<\/ul>\n<p>Para definir nuestra expresi\u00f3n tenemos<strong>\u00a0dos opciones<\/strong>. Dependiendo del modo el tipo de binding cambiar\u00e1:<\/p>\n<ol type=\"1\">\n<li><strong>\u201c<em>{= expresi\u00f3n}<\/em>\u201d:<\/strong>\u00a0Con esta opci\u00f3n el tipo de binding ser\u00e1<strong>\u00a0\u201cone-way\u201d<\/strong>, esto permite que cuando el valor cambie en modelo se volver\u00e1 a ejecutar la expresi\u00f3n.<\/li>\n<\/ol>\n<ul>\n<li><strong>\u201c<em>{:= expresi\u00f3n}<\/em>\u201d<\/strong>: Con esta opci\u00f3n en cambio el tipo de binding utilizado ser\u00e1<strong>\u00a0\u201cone-time\u201d<\/strong>. La expresi\u00f3n se ejecutar\u00e1 la primera vez y aunque cambie el valor del modelo est\u00e1 no se volver\u00e1 a ejecutar.<\/li>\n<\/ul>\n<p>Para<strong>\u00a0acceder a cualquier dato de la capa del modelo\u00a0<\/strong>mediante el binding, deberemos usar las siguientes opciones de sintaxis\u00a0<strong>\u201c${binding}\u201d o \u201c%{binding}\u201d.<\/strong><\/p>\n<p>Por \u00faltimo, veremos algunos<strong>\u00a0ejemplos<\/strong>\u00a0de c\u00f3mo utilizar el Expression Binding en una vista\u00a0<strong>XML<\/strong>.<\/p>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td>&lt;Text text=\u201d{= ${Aprobado} === true ? ${i18n&gt;si} : ${i18n&gt;no}}\u201d\/&gt;<\/td>\n<\/tr>\n<\/tbody>\n<\/table><figcaption>Mostrar el texto\u00a0<strong>\u201cSi\u201d<\/strong>\u00a0o<strong>\u00a0\u201cNo\u201d<\/strong>\u00a0seg\u00fan el valor de una variable tipo Boolean<\/figcaption><\/figure>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td>&lt;Text text=\u201d{= Math.round(${Precio})}\u201d\/&gt;<\/td>\n<\/tr>\n<\/tbody>\n<\/table><figcaption>Redondeamos el precio, utilizado la funci\u00f3n est\u00e1ndar\u00a0<a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/JavaScript\/Referencia\/Objetos_globales\/Math\/round\" target=\"_blank\" rel=\"noopener\"><strong>Math.round()<\/strong><\/a><\/figcaption><\/figure>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td>&lt;ObjectStatus text=\u201d{IdDocumento}\u201d state=\u201d{= RegExp(\u2018[0-9]{8}[A-Z]\u2019).test(${IdDocumento}) === false ? \u2018Error\u2019 : \u2018None\u2019}\u201d\/&gt;<\/td>\n<\/tr>\n<\/tbody>\n<\/table><figcaption>Validaremos si el campo<strong>\u00a0\u201cIdDocumento\u201d<\/strong>\u00a0<strong>cumple\u00a0<\/strong>con el formato del DNI (8 n\u00fameros + una letra) utilizando una Expresi\u00f3n Regular de\u00a0<strong>JavaScript.<\/strong><\/figcaption><\/figure>\n<p>Y con estos\u00a0<strong>ejemplos pr\u00e1cticos<\/strong>, finaliza este post que esperamos que te resulte de utilidad. Recuerda que cualquier duda puedes dejarla en\u00a0<strong>comentarios<\/strong>, o contactar con nuestro departamento de\u00a0<strong>user experience &amp; integraci\u00f3n<\/strong>.<\/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-personalizacion&#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 el art\u00edculo anterior de\u00a0Biding Syntax, vimos los diferentes tipos de bindings que tenemos disponibles para usar en nuestras aplicaciones\u00a0SAPUI5. En este art\u00edculo entraremos a ver en detalle opci\u00f3n del\u00a0Expression Binding. El Expression Binding est\u00e1\u00a0disponible a partir de la versi\u00f3n 1.28 de SAPUI5\u00a0y nos permite a\u00f1adir cierta l\u00f3gica a nuestros bindings\u00a0sin\u00a0tener que usar un\u00a0formatter. La\u00a0sintaxis\u00a0que [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":7804,"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],"tags":[],"class_list":["post-7802","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience-integracion"],"_links":{"self":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/7802","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=7802"}],"version-history":[{"count":6,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/7802\/revisions"}],"predecessor-version":[{"id":21398,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/7802\/revisions\/21398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/media\/7804"}],"wp:attachment":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/media?parent=7802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/categories?post=7802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/tags?post=7802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}