¿Cómo se hace un widget en 15 minutos?
¿Quién no se ha topado con estrellas en su vida cotidiana? En la década de 1920, los hermanos Michelin tuvieron la ingeniosa idea de conceder estrellas a los restaurantes de su famosa Guía Rouge. Desde entonces, las estrellas se han convertido en un símbolo universal de calidad, anclado en nuestro inconsciente colectivo. Hoy en día, no hace falta ser inspector de la Guía para recibir estrellas. Las concedemos tras un relajante fin de semana, un viaje en taxi o ¡incluso una consulta médica!
Si observamos cómo se han utilizado estas estrellas hasta la fecha, vemos una tendencia general a mostrar un símbolo de este estilo:
El objeto objetivo se «califica» con una serie de 0 a 5 estrellas.
Como puede ver, el objetivo de este curso de formación es construir este tipo de símbolo, al que llamaremos «5 estrellas», en una interfaz para una aplicación 4D.
Para ello, utilizaremos el concepto de este componente para poder reutilizar nuestro trabajo de forma rápida y sencilla en todas nuestras aplicaciones, ¡ya que éste se convertirá en nuestro símbolo favorito!
Alguien acostumbrado a fabricar este tipo de componentes empleará unos 15 minutos en hacerlo, pero en esta sesión nos tomaremos el tiempo necesario para definir los pasos necesarios paso a paso.
Caracteristicas
- Entender qué es un widget en 4D y cómo estructurar un elemento de interfaz reutilizable
- Creación paso a paso de un widget gráfico de 5 estrellas con comportamiento interactivo
- Utilizar propiedades de formulario, eventos y métodos de objeto y formulario para construir un widget dinámico
- Configurar un subformulario para encapsular el widget y hacerlo independiente
- Integrar el widget en una aplicación host mediante un componente 4D
- Comprender las mejores prácticas para organizar, generar e integrar un componente en otros proyectos
Audiencia objetivo
- Desarrolladores 4D que deseen aprender a crear widgets reutilizables en sus interfaces
- Desarrolladores con un nivel intermedio en 4D que quieran mejorar sus habilidades UI/UX en 4D
- Cualquiera que participe en la creación o el mantenimiento de aplicaciones 4D que requieran elementos gráficos ergonómicos y reutilizables
- Equipos de desarrollo que desean estandarizar los elementos de la interfaz mediante componentes
Requisitos
- Cómo crear y manipular un formulario 4D (propiedades, eventos, expresiones fuente)
- Comprender los fundamentos del lenguaje 4D
- El conocimiento del funcionamiento general de los componentes 4D es una ventaja, pero no es esencial
Currículum
- 4 secciones
- 7 lecciones
- 30 minutos
- Configuración del widgetPara iniciar nuestro proyecto, necesitamos definir el widget para mostrar el símbolo de 5 estrellas. Pero, ¿qué es un widget? Este término no aparece directamente en la documentación de 4D. De hecho, los términos utilizados en los interfaces de 4D son "formulario", "objetos formulario", "método objeto", etc. Pero a menudo un elemento del interfaz está compuesto de varias cosas. Por ejemplo, para introducir un nombre y un apellido, tenemos dos objetos de entrada y dos objetos de texto utilizados como etiquetas. Cada etiqueta está asociada a su objeto de entrada. Si, además, este dúo, utilizado para introducir la fecha de nacimiento, se completa con un pequeño icono de calendario que abre un calendario, tenemos 3 objetos de formulario que necesitan trabajar juntos. Si agrupamos estos 3 objetos formulario, obtenemos una entidad gráfica coherente que llamamos widget. En esta sección vamos a crear una aplicación desde cero, definir nuestro widget y probarlo.3
- ComponentesNuestro widget está ahora aislado en un formulario que está listo para ser utilizado. Pero este formulario forma parte del proyecto en el que se encuentra. Si queremos que este widget esté disponible en varias aplicaciones, la mejor solución es ponerlo en un componente. Así que en esta sección vamos a crear un componente y utilizarlo en una aplicación host.3
- Evolución del widgetNuestro widget de 5 estrellas ya se ha publicado en un componente y se está empezando a utilizar prácticamente en todas nuestras aplicaciones. A los usuarios les gusta, pero se dan cuenta de que cuando el widget se utiliza por sí solo, al hacer clic en él no les permite elegir "activar" ninguna estrella. Nuestro código sólo permite elegir entre 1 y 5 estrellas. ¡Ay! ¿Pero es esto realmente un problema? Ya lo veremos.1
- Prueba final0
Material del curso
¿Cómo se hace un widget en 15 minutos?
