In the first lesson we create a “Main Window” with menu icons, a tree structure and a background image.
In order to do so we need 5 files “mainwindow.4gl”, “mainwindow.per”, “mainwindow.4sm” , “defaultactions.4ad” and “defaultaction.4st”.

We begin with the SCREEN FORM to run this programm as a Windows/Linux/MAC application and not in terminal.
Make a new file “mainwindow.per” with the content:

DATABASE FORMONLY

SCREEN
{
    [text]
}

ATTRIBUTES

Image text = FORMONLY.textvar, AUTOSCALE, PIXELWIDTH=400, PIXELHEIGHT=525 ;

By doing so we declare the variable “text” as a picture.
This SCREEN FORM must be compiled with “fcompile -xml mainwindow.per”.
The next step is to create a menu to run the application which is done through the following code:

MAIN

OPEN WINDOW mainwindow WITH FORM “mainwindow”

MENU “Navigation”
   COMMAND “Ok”
   COMMAND “EXIT”
EXIT MENU

END MAIN

If you want to see the result then you must compile this program with “4glpc mainwindow.4gl -o mainwindow.4ae”
and run it with “./mainwindow.4ae”

Now we are going to make new menu icons to customize the menu by using your own icons.
Create a new file called “mainwindow.4ad” and add the following three lines:

<ActionDefaultList>
<ActionDefault name=”ok” text=”Ok” image=”ok.png” />

<ActionDefault name=”exit” text=”Exit” image=”exit.png” />
</ActionDefaultList>

The variable .name. defines the name of the button, the variable “text” defines the text for the button and
the variable “image” defines the icon image. Open the previously created file “mainwindow.4gl” again and add:

CALL ui.Interface.loadActionDefaults(”defaultactions”)

Now the “mainwindow.4gl” has the follow content:

MAIN
CALL ui.Interface.loadActionDefaults(”defaultactions”)
OPEN WINDOW mainwindow WITH FORM “mainwindow”

MENU “Navigation”
   COMMAND “Ok”
   COMMAND “Exit”
      EXIT MENU

END MENU

END MAIN

You can compile this example with “4glpc mainwindow.4gl -o mainwindow.4ae”, you will see the following result:

Congratulations you have made your first application with a menu!
But our “Main Window” is very very… empty. In the next step we will add a background image to the application. At the head of the table we must define our new variable “file”

DEFINE file CHAR(30)

After that we check whether or not the file is empty:

# set ventas.png als background image #
   IF file IS NULL
      THEN LET file = "pics/ventas.png"
   END IF

You need LET to define the variable “file” with a content. At this point, however, we cannot yet display the background-image. We first need a new command named “aclfgl_sendfile_to_ui()”, to send the file to the client and display it on the background of “Main Window”

IF aclfgl_sendfile_to_ui(file CLIPPED) THEN END IF

# load ventas.png from /tmp floder into the mainframe #
LET file = "ventas.png"
DISPLAY file TO textvar

# start new Navigation menu #
MENU "Navigation"

   COMMAND "Run"
   COMMAND "Exit"

“textvar” is a variable that we have defined in the SCREEN FORM and we need this to fill out the background with the image.

“DISPLAY file TO textvar” sends the variable file to textvar.

Our file “mainwindow.4gl” has now the following content:

DEFINE file CHAR(30)

MAIN

IF file IS NULL
   THEN LET file =”pics/ventas.png”
END IF

CALL ui.Interface.loadActionDefaults(”defaultactions”)
OPEN WINDOW mainwindow WITH FORM “mainwindow”

IF acl_fgl_sendfile_to_ui(file) THEN END IF
LET FILE = “ventas.png”
DISPLAY file TO textvar
MENU “Navigation”
   COMMAND “Ok”
   COMMAND “Exit”

      EXIT MENU
END MENU

END MAIN

If you compile the source with “4glpc mainwindow.4gl -o mainwindow.4ae” then you will se the following:

We now have a window with a background image and a menu. But the “TREE Structure” is missing.
Create a new file named “mainwindow.4sm” and add the following lines:

<StartMenu text ="VENTAS AG - Demo">
   <StartMenuGroup text ="Examples">
      <StartMenuCommand text ="Google" exec ="fglgo google" />
      <StartMenuCommand text ="Input" exec ="fglgo input" />
      <StartMenuCommand text ="Construct" exec ="fglgo construct" />
      <StartMenuCommand text ="Attributes" exec ="fglgo attributes" />
   </StartMenuGroup>
</StartMenu>

StartMenu defines the title of the “TREE Structure”, StartMenuGroup defines the title of your own group and StartMenuCommand adds a new command line for your own program.
You need exec=”fglgo ” to run your program.

Open the “mainwindow.4gl” an send the mainwindow.4sm to the client with:

IF aclfgl_sendfile_to_ui(mainwindow.4sm) THEN END IF

With this command the client can display our tree structure.
The file “mainwindow.4gl” will now have this content:

When you compile the final result with “4glpc mainwindow.4gl -o mainwindow.4ae” you will see this result: