✒️SAP BTPFIORI / La utilización de los controles en la UI Por Claudia Monsalve Lopez

Selector Alummnos / Empresas

SAP BTPFIORI La utilización de los controles en la UI

SAP BTPFIORI La utilización de los controles en la UI

La utilizacion de los controles UI

Tipos de controles de interfaz de usuario

  • Simple Controls
  • Value Holders
  • Layouts
  • Complex Controls
  • UX3 Controls

Controles para escritorio sap.ui-namespace

  • El nombre de control: sap.m.Table
  • El control de metadatos: Es un objeto interno que define las propiedades, agregaciones, asociaciones y eventos del control. Esto permite al framework (y a ti como desarrolladora) saber cómo usar el control, qué atributos tiene, cómo se renderiza y cómo interactúa con otros controles.
  • Los elementos: sap.ui.core.Element es la clase base de sap.ui.core.Control
  • Los metodos: en los controles SAPUI5 son funciones que te permiten interactuar, modificar o recuperar información del control en tiempo de ejecución. Estos métodos son parte de la API pública del control, y cada tipo de control hereda métodos desde sus clases base (como sap.ui.core.Control, sap.ui.core.Element, etc.) o define los suyos propios.

La clase base para todos los controles es sap.ui.core.Control

La creacion de una tabla usando un control de SAPUI5: Api sap.m.Table

Data Binding: El Data Binding (enlace de datos) es un mecanismo que conecta los datos del modelo con la interfaz de usuario (UI) de forma automática y bidireccional o unidireccional. Gracias a esto, puedes vincular datos de un backend, archivo JSON, OData, etc., a controles UI5 como listas, formularios, tablas, etc.

La creacion de un modelo con un archivo JSON local: es una forma de cargar datos desde un archivo .json externo y usarlos dentro de la interfaz de usuario (UI) para mostrarlos, editarlos o procesarlo.

El modelo se usa

  • en el archivo manifest.json
  • LoadData

La vinculacion del modelo a la vista

  • El data binding
  • El two-way-binding

Niveles

  • A inivel de app (core): el modelo estara disponible desde cualquier punto de la app
  • A nivel de vista: solo disponibles en una vista determinada
  • A nivel Control: Se asigna de manera exclusiva a un control

Propiedades de los controles

  • El atributo id: identificacion para un elemento HTML
  • El atributo value: especifica el valor de un elemento
  • El atributo class: se usa para asignar una o más clases CSS a un control o elemento, con el fin de aplicar estilos personalizados.
  • El atributo placeholder: se usa para mostrar un texto guía dentro de un campo de entrada, antes de que el usuario escriba algo. Es muy útil para indicar qué tipo de información se espera que el usuario ingrese.
  • El atributo showSuggestion: para habilitar la funcionalidad de autocompletado, es decir, mostrar una lista de sugerencias mientras el usuario escribe en el campo.
  • El atributo Suggestionitems: se utiliza en el control sap.m.Input para definir una lista de sugerencias estáticas o basadas en un modelo, que se mostrarán cuando el usuario empiece a escribir

Control select: es un menú desplegable (dropdown) que permite al usuario elegir un valor de una lista de opciones predefinidas.

Propiedad Descripción
items Lista de opciones (de tipo sap.ui.core.Item)
selectedKey Clave del ítem seleccionado
change Evento al cambiar de opción
enabled Si el control está activo o no
value Texto del ítem seleccionado (solo lectura)
  • Control Label
  • Control Button
  • Iconos de controles
  • Lo eventos
  • Los filtros

El contexto y los mensajes

  • El contexto en SAPUI5 se refiere al objeto de datos al que está enlazado un control, dentro de una estructura de datos más grande (modelo). Esto permite que cada control sepa qué parte del modelo debe mostrar o modificar.
  • Los mensajes son objetos que informan al usuario sobre el estado del sistema, validaciones, errores, advertencias, etc. Se gestionan a través del MessageManager y el MessagePopover o MessageToast.


 

Escanear / Compartir

 

 


Sobre el autor

Publicación académica de Claudia Bibiana Monsalve Lopez, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.

SAP Master

Claudia Bibiana Monsalve Lopez

Profesión: Ingeniera Informatica - Colombia - Legajo: XF24Z

✒️Autor de: 109 Publicaciones Académicas

🎓Egresado de los módulos:

Certificación Académica de Claudia Monsalve

✒️+Comunidad Académica CVOSOFT

Continúe aprendiendo sobre el tema "La utilización de los controles en la UI" de la mano de nuestros alumnos.

SAP SemiSenior

La utilización de los controles en la UI 1. Introducción En SAPUI5, la utilización de los controles en la interfaz de usuario representa uno de los pilares fundamentales del diseño y la construcción de aplicaciones SAP Fiori. Cada control cumple una función específica dentro de la UI y debe ser implementado siguiendo las guías de diseño Fiori para garantizar uniformidad, usabilidad y coherencia visual. El desarrollador o consultor Fiori debe conocer los diferentes tipos de controles disponibles y aplicar buenas prácticas para mantener una interfaz limpia, intuitiva y adaptable a distintos dispositivos. 2. Clasificación de los controles según su función...

Acceder a esta publicación

Creado y Compartido por: Jose Rodrigo Baz Suarez / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Master

La utilizacion de los controles UI Tipos de controles de interfaz de usuario Simple Controls Value Holders Layouts Complex Controls UX3 Controls Controles para escritorio sap.ui-namespace El nombre de control: sap.m.Table El control de metadatos: Es un objeto interno que define las propiedades, agregaciones, asociaciones y eventos del control. Esto permite al framework (y a ti como desarrolladora) saber cómo usar el control, qué atributos tiene, cómo se renderiza y cómo interactúa con otros controles. Los elementos: sap.ui.core.Element es la clase base de sap.ui.core.Control Los metodos: en los controles SAPUI5 son funciones que te permiten interactuar, modificar o recuperar...

Acceder a esta publicación

Creado y Compartido por: Claudia Bibiana Monsalve Lopez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

1. LOS CONTROLES DE UI Tipos de controles SAPUI5 Simple Controls Value Holders Layouts Complex Controls Dialos UX3 Controls > Se recomienda usar controles de interfaz de usuario movil en lugar de los de escritorio Los controles consisten en: nombre del control: nombre_de_biblioteca.nombre_control metadatos de control: Los controles estan definidos por los metadatos de control, que es la API publica del control. propiedades eventos agregaciones asociaciones Los elementos: partes o paquetes de configuracoin para parte de controles. los metodos CLASE BASE DE TODOS LOS CONTROLES es sap.ui.core.Control Dos de las librerias mas usadas en SAPUI5 a....

Acceder a esta publicación

Creado y Compartido por: Roberto Hernan Santucho

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


Las aplicaciones desarrolladas con SAP GUI 5 presentan una experiencia de usuario consistente y responden a navegadores de cualquier dispositivo móvil los controles de interfaz de usuario se adaptan automáticamente a las capacidades de cada dispositivo. SAP GUI 5 usa el databinding para unir dos fuentes de datos o fuentes de información para mantener la sincronía, todos los cambios de una fuente también se reflejan en la otra, para el enlace de datos necesitamos un modelo y una instancia de enlace. La instancia del modelo contiene los datos y proporciona métodos para establecer los datos o para recuperarlos de un servidor.

Acceder a esta publicación

Creado y Compartido por: Jose Medina / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


1 | SAPUI5 UI Controls What are SAPUI5 Controls? SAPUI5 controls are user interface elements used for interactive operations, either passively or actively. Each control defines how a specific area of the screen appears and behaves. Overview of SAPUI5 Controls In SAPUI5, controls are categorized into mobile-focused UI controls and desktop-centric UI controls. It's recommended to use mobile-focused controls as desktop controls in the sap.ui namespace are deprecated. Key Components of Controls: Control Name: Each control has a name consisting of a library name and control name, like sap.m.Table for creating a table. Control Metadata: Defines properties, events, aggregations, and associations of a control. Properties modify appearance or...

Acceder a esta publicación

Creado y Compartido por: Jaime Eduardo Gomez Arango / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

DATA BINDING En SAPUI5, el concepto de data binding (vinculación de datos) es fundamental para conectar y sincronizar los datos entre el modelo de datos y la interfaz de usuario. La vinculación de datos permite actualizar automáticamente la interfaz de usuario cuando los datos subyacentes cambian, y viceversa. Esto facilita la creación de aplicaciones web dinámicas y reactivas. A continuación, se describen los aspectos clave de la vinculación de datos en SAPUI5: Modelo de Datos: SAPUI5 sigue el patrón de diseño MVC (Modelo-Vista-Controlador), donde el modelo de datos representa la capa de datos de la aplicación. Puedes utilizar...

Acceder a esta publicación

Creado y Compartido por: Claudio Marcelo Hermann / Disponibilidad Laboral: FullTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Los controles de UI El texto habla sobre los controles de UI en SAPUI5, que son elementos de interfaz de usuario utilizados para definir la apariencia y el comportamiento de las áreas en la pantalla. Los controles tienen propiedades como texto o ancho que modifican la apariencia o se relacionan con los datos mostrados. SAPUI5 proporciona diferentes tipos de controles de interfaz de usuario, y se recomienda utilizar los controles móviles en lugar de los centrados en el escritorio. Los controles constan de un nombre y metadatos que definen sus propiedades, eventos, agregaciones y asociaciones. Los controles pueden tener agregaciones, que son controles secundarios que se agregan al control principal, y asociaciones, que están...

Acceder a esta publicación

Creado y Compartido por: Nilson Parra Martinez / Disponibilidad Laboral: PartTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP SemiSenior

Resumen Unidad 3 capitulo 5 1. Ejemplo de generacion de una fuente de datos Databinding: asociar dos instancias de información, un modelo y una vista de modo tal que queden sincronizados Ejemplo: a. Crear un archivo products.json y agregarlo a la carpeta mockdata del proyecto b. Modificar manifest.json. 2.1 En la sección "dataSources", agregar "productos": { "uri": "./mockdata/products.json", "type" : "JSON" } 2.1 En la sección "models", agregar "products_json": { "type": "sap.ui.model.json.JSONModel", "dataSource": "productos" } c. En return Controller.extend("ns.controles.controller.View1",...

Acceder a esta publicación

Creado y Compartido por: Cristian Cash

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Apunte Creado OK - Iniciar Edición Los controles UI: son los elementos de interfaz de usuario con los que se va llevar a cabo la interacción Los controles consisten de: Nombre del control El control de metadatos Los elementos Los métodos Los controles son clases definidas por SAP que representan definición de los elementos que se mostraran en las vistas Data Binding: enlaza la agregación item con un modelo Modelo con Json : es un modelo del lado del cliente que se recomienda para conjunto de datos pequeños

Acceder a esta publicación

Creado y Compartido por: Detriana Barrios / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Master


Los controles de UI Los controles se utilizan para definir la apariencia y el comportamiento de las áreas en la pantalla. Normalmente los controles tienen propiedades como texto o ancho que modifican la apariencia o se relacionan con los datos mostrados por el control. SAPUI5 proporciona diferentes tipos de controles de interfaz de usuario. Hay más controles de interfaz de usuario centrados en el escritorio en el framework SAPUI5. Lo recomendable es utilizar los controles de la interfaz de usuario móvil. Los controles centrados en el escritorio de sap.ui-namespace están en desuso. Los controles consisten en: El nombre de control: es una cadena que consta del nombre de la biblioteca y el nombre del control, separados...

Acceder a esta publicación

Creado y Compartido por: Gerber Geovanni Lopez Hernandez / Disponibilidad Laboral: FullTime

 


 

👌Genial!, estos fueron los últimos artículos sobre más de 99.000 publicaciones académicas abiertas, libres y gratuitas compartidas con la comunidad, para acceder a ellas le dejamos el enlace a CVOPEN ACADEMY.

🔎Buscador de Publicaciones:

 


 

No sea Juan... Solo podrá llegar alto si realiza su formación con los mejores!