フォームのページ0とページ1

4D v16

フォームのページ0とページ1

Video script

In 4D, all forms are multi-page (with 32,767 pages maximum), which lets us distribute information according to themes or functions, and to access it according to our needs. We can navigate between pages using tabs, buttons or through programming.

Some objects (texts, buttons, and so on) must be visible no matter which page is displayed.

In this case, you need to put these objects on page 0 which 4D displays systematically in the "background" of the current page; the current page being numbered 1, 2, 3, and so on.

For example, all the buttons on the top left in our example database are placed on page 0.

To navigate from page to page, or to add one, you use the right and left arrows that are here or use the pop-up menu between the two arrows that can be used to access existing pages.

To move objects from one page to another, just cut them from one page and paste them on the other.
We're going to move all the buttons of the form to page 0.

First we select all the buttons
Then we select "Cut" from the "Edit" menu
We go to page 0
Then we select "Paste"

From now on, if we go back to page 1, the buttons are still visible but we cannot click on them because they are actually on page 0.
Now we're going to replace all these standard-looking (albeit functional) buttons with more ergonomic picture buttons using pictures supplied by a graphic designer.

Go back to page 0.
Double-click on the "Done" button to display its properties.
We're going to give it a variable name a little more meaningful like "B_Close" because it closes the dialog.
Then in the "Type" property, we choose "Picture Button".

The button is changed to a standard picture that we're going to fix later on.

We can see, just under the name, the properties of the picture with its source and ID number and other properties that will will cover later on.

At this point, no pictures are available in the picture library so we can't indicate a picture name or number.
Here is how to add a picture to the library.

Open the Tool Box.
Click on "Pictures".
And in the dropdown menu at the bottom, we choose "Open".
We open our PNG picture folder (download here)
We'll select the "Close.png" button then Open.
By clicking OK, the picture is added and we can see it split into 4 different images with a size of 48 x 192.

We've noted the picture number 2024 and now we can close the dialog box here.

Next we're going to choose the object properties:

Picture Library
and picture 2024.

The button is changed automatically; it seems a little squashed but we're going to change the properties by indicating that we have 4 rows on 1 column and that the width of the object is 48, like its height, and then we're going to check the properties:

Switch when Roll Over
Switch back when Released
and Use Last Frame as Disabled

We can test the form and see that the button has:

a standard picture,
another picture when we roll over it,
and yet another picture when we click on it.

Now that this picture is imported, we can ask to see its properties and more particularly the splitting of the picture into 1 column on 4 rows. The advantage of this is that once the picture is split up, if we drop the picture directly onto the form, 4D considers it to be a picture button instead of a picture.

It assigns a variable name automatically and the information concerning the picture is mentioned: the source, the picture ID and the number of lines as well as, of course, its width and height.

To add pictures to the library more quickly, you can drag them directly from the desktop onto the Picture library.

Display the library
Display the pictures on the desktop
Then just drag a picture and drop it onto your library.

A picture is proposed automatically. Give it a name and save it. You can do the same for each new picture.
Next remember to display the properties of each picture and, once it is imported in the size 48x192, split it into one column by 4 rows so that 4D will then consider it a picture button.

To finalize the interface, we're going to place the Done button at the top left, and then add a title using the text tool.

Then we'll integrate all the pictures provided by the graphic designer and place them on the screen as follows:

Buttons to access tables will be placed on the left
Function buttons at the top.

We can add a button for managing parameters and another one for managing preferences. Two separation lines drawn in line with the object while holding down the Shift key and finally the cursor lets us know which table we're working on.

And then 3 texts:

one for the interventions
the second for the technicians
and the third for the locations.

The last two texts concern the preferences and the parameters.