How to make a widget in 15 minutes?
Who hasn’t encountered stars in everyday life? In the 1920s, the Michelin brothers had the ingenious idea of awarding stars to the restaurants in their famous Guide Rouge. Since then, stars have become a universal symbol of quality, ingrained in our collective unconscious. Nowadays, you don’t have to be a Guide inspector to receive stars. We award them after a relaxing weekend, a cab ride, or even a medical consultation!
If we look at the use made of these stars to date, we see a general tendency to display a symbol of this style:
The target object is “rated” with a series of 0 to 5 stars.
As you can see, the aim of this training course is to build this kind of symbol, which we’ll call “5 stars”, in an interface of a 4D application.
To do this, we’ll use the notion of component so that we can quickly and easily reuse our work in all our applications, as this will become our favorite symbol!
Someone who’s used to making this kind of component will spend about 15 minutes doing it, but in this session we’ll take the time to define the necessary steps step by step.
Features
- Understand what a widget is in 4D and how to structure a reusable interface element
- Step-by-step creation of a 5-star graphic widget with interactive behavior
- Use form properties, events, object and form methods to build a dynamic widget
- Set up a sub-form to encapsulate the widget and make it independent
- Integrating the widget into a host application via a 4D component
- Understand best practices for organizing, generating and integrating components into other projects
Target audiences
- 4D developers wishing to learn how to create reusable widgets in their interfaces
- Developers with an intermediate level in 4D who wish to improve their UI/UX skills in 4D
- Anyone building or maintaining 4D applications that require ergonomic, reusable graphical elements
- Development teams wishing to standardize interface elements via components
Requirements
- How to create and manipulate a 4D form (properties, events, source expressions)
- 4D language basics
- Knowledge of the general operation of 4D components is a plus, but not mandatory
Curriculum
- 3 Sections
- 7 Lessons
- 30 Minutes
- Setting up the widgetTo initiate our project, we need to define the widget for displaying the 5-star symbol. But what is a widget? This term does not appear directly in the 4D documentation. In fact, the terms used in 4D interfaces are "form", "form objects", "object method"... But often an interface element is made up of several things. For example, to enter a first and last name, we have two input objects and two text objects used as labels. Each label is associated with its input object. If, in addition, this duo, used to enter the date of birth, is supplemented by a small calendar icon to open a calendar, we have 3 form objects that must work together. If we group these 3 form objects together, we obtain a coherent graphical entity that we call a widget. In this section, we'll create an application from scratch, define our widget and test it.3
- Component assemblyOur widget is now isolated in a form which is ready for use. But this form is part of the project in which it is located. If we want to make this widget available in several applications, the best solution is to put it in a component. In this section, we'll create a component and use it in a host application.3
- Widget evolutionOur 5-star widget is now published in a component and is starting to be used throughout our applications. Users like it, but notice that when the widget is used on its own, clicking on it doesn't "turn on" any stars. In fact, our code only allows you to choose between 1 and 5 stars. Ouch! But is this really a problem? We'll see.1
Course Material
How to make a widget in 15 minutes?
4D version: