Forms and buttons

Home

4D v16

Self-training

Forms and buttons

Video script

In this video, we're going to produce the navigation model.

We will need:

a Welcome form with both functional and "decorative" objects
a few lines of code to display the form on screen
and input and editing screens for each of the files to be processed.

Let's start by making the main navigation screen.

As you saw in the final application presentation video, we need to integrate into our software the management of intervention requests, locations and technicians, all from the main screen.

So now we're going to create this main screen.

In the toolbar:

Click the "Explorer" button.
Click the "Forms" button.
Choose "Project forms" then click on the + button at the bottom of the Explorer.
Let's name this form "Navigation".
Then hit OK.

A blank form appears along with the Property List.

You use the tools on the left to add objects to the form:

text
variables and fields
lists
pop-up menus
buttons
radio buttons
thermometers
decorative objects
splitters
plug-ins
and more.

The tools at the top let you manipulate the objects:

group or align them
manage the zoom
move them
manage multiple pages
and also manage views, shields and the object library.

Let's start by creating a simple navigation interface in order to understand how it works:

a button to display the list of staff
a button to display the interventions list
a button to close the form
And we'll add a title at the top of the page

First select the button object
Then draw your first button in the form.
Rename this button "Done"
Hitting the enter key validates the modifications made.
We can associate a standard action with each button.
Here, we'll associate the "Accept" action.

This lets us close the window.

Create a 2nd button that we'll name "Interventions".

We will soon see how to program this button so that it display the list of interventions.

To test this form, click on the green triangle at the top left of the form. 4D then shows the form as the user will see it.

Notice that the window adapts itself to the size of the form. Resizing is automatic which saves you time both for development and maintenance (of course, this automatic resizing can be disabled when necessary).

Click on the "Done" button to close the window and return to the Design environment.

Now let's make this 2nd button functional:

Right click on the "Interventions" button.
Then choose "Object Method":
In the Object Method window, enter the following line of code:

ALERT("List of Interventions available soon...")

when you validate this line, the ALERT command is automatically recognized.

Close the method.

You can now see the "shield" indicating that a method is associated with the object.

Retest the form by clicking on the green triangle again,
Then click on the "Interventions" button.

The alert message then appears.

Later on, we'll turn these buttons to picture buttons to make our application easier to use.

To reinforce this initial groundwork, we're going to create a second button to display the list of "Technicians".

You can simply duplicate objects. When you do, all the object properties and any associated methods are duplicated as well. Only the object name is different since each object must have a unique name within a form.

So here we can change the title and the object method that are also available in the properties.
When we test the form, there are now two active buttons available.