....

 

Thank for Giving EzyGUI a try. I hope to shed some light on how this program works.

We'll Make this little Window step by step

Once you have did a few Controls, you'll figure out the rest. Most of them work the same, Click, Click and click on a button. When you select the Control Name on the  Button Bars with the Left Mouse button, you get it's default. To add something different in the Control, you must Right Click on its Name. You can read the Opening Screen  or hit the F1 key if you Forget how to do it. Below we'll go into step by step  more Detail.

 

                                                         Modes

There are two Modes. The program is in either the Area  Mode or the Button  Mode. The modes are all automatic and it starts out in the Area Mode.  After  you complete one mode it switches to the next one.

When the program is in the Area Mode, you can select areas on the Grid that will represent your Windows and controls.  You can determine their size and position when in this mode.  MsgBox, Preview, CodeView and OK are the only buttons that can be used while in this Mode.  Hitting the f1 key can be also used.

After the Program switches to the Button Mode, you can select what control you want to use. You know that you are in this mode when you move your mouse cursor over the buttons and they show Button details at the bottom of the window. The program switches to this mode after you anchor the frame that is following the mouse while in Area Mode with the Second Click.

This explanation about the Modes are not really necessary. If it confuses you, just forget it. It's all works automatic.

 

                                                          Parent

The first thing we have to do is Select an Area that will be our Parent Window. The parent is that Solid piece of Background, that all of the Child Windows(also called Controls) are placed. It's color is Grey unless you've changed it.

A frame will follow your mouse cursor after the First click. The second click will anchor the frame and then you can click on a Button, in this case the Parent Button.

Clicking on the Parent Button, you will get a Grid that might look something like this:

That was simple. All the controls are done the same way most of the time. If you fail to click on a Parent and you click on a Control without a Parent, you get a chance to do it again. A little box will tell you about this. You don't have to select the area I selected for your parent, you can select any area, or the whole grid if you want to.

 

                                             MENU

 EzyGUI can make a Menu for your Parent in only a few easy steps.

  1. After you have created a Parent, Select the top row of your
      Parent Grid and Click on `Menu' on the Bar.

   2. For the first drop, type a Name that goes on the Bar. If you
      were making a Menu for an Editor, you would probably Type
     `File' without the quote marks. Now click on the `Insert'
     Button.

 

  3. Now type all the selections that would go under File and
     click on `Append' after each one. You would probably type
     something like this.

     Open..........then click on `Append'
     Save............. "    "               Append
     Exit............... "    "               Append

     This will Append all of those selections to `File' on the Bar.

 

      Note: Pressing Enter will do the Same thing as Clicking on Append

  4. To add `Edit' that is next to `File' on the Bar, type Edit
      and click on `Insert' again. This Inserts the word Edit on the Bar.

  5. Just like step 3., you would probably enter Selections like
      Copy, Cut, Paste, Find, etc... that will be Appended to `Edit'
      and you would click on Append or hit Enter after each one.

  6. To put more Names on the Bar, Type the Name and then Click on
      `Insert' and then type the selections to Append to it.

  7. When you are finished, Click on Done which was added later.

  When entering names, You will have to be careful to not
  click on the wrong Button. You can correct it later in the
  code that's generated, or you'll have to end the program and
  start over.

  You will notice that the area selection you first made has been
  removed from the Grid, so you can place Controls where it used
  to be. They will locate right underneath the Menu in the finished window. 
     
 

                                          Preview       

You should now be back in the Area Mode, so you can take a peek at it if you want to.  Preview means you can look at it before it is finished.

Click on the Preview Button, which is one of the 4 buttons that works in the Area Mode.

 

After you click on Preview, your window might look like the following without the text.

   

            

Notice when you click on File, the only name on the Menu Bar, and then click on Open, you get an Open File Dialog displayed.

 

Since Open, Save, and Exit were used a lot in Menu selections, I thought I would go ahead and add working Examples for them.

The Exit example is just a Message Box asking if you are sure.

 

                                          Edit Control

To create an Edit Box, select the corners using the two click method.  You don't need to drag the cursor.  This allow you to unselect your starting position by moving the cursor before or above the starting position.

Another way to unselect the area after you have did the second click is to click somewhere else on the grid.

Thats all there is to it.

 

                                        Buttons

The Regular Buttons are done a little different than the other Controls. They have their own Menu where you can select the most common used buttons.

You can put as big a button as you want, just select on the corners like you would with the other controls.

You can enter a different name and not use the names supplied if you want to, just click on Enter Name.

The Ex stands for Extended Menu, that's where you can change fonts, styles or add Bitmap to the Button.

The Bitmaps on Buttons works just like they do on The Static Control. You can read about placing a Bitmap on the Static Control below.

Although it doesn't show them in this tutorial, MultiMedia Buttons have been added later.

When you click on MMopen, an Open dialog box is added to your code along with a button. you have the choice to open Midi, Wave and MP3 files for playing.

When you click on MMplay, code to play the 3 file types is added along with a button.

When you click on MMpause, pause code will be added also. To resume playing, the user will have to click on Pause again.

When you click on MMstop, stop playing code will be added.

 

                               Combination Box

We can now try out the Combobox control.

The deeper you make your selection, the more Items it will have in the box. It only occupies 2 rows on the Grid, You'll see that in the Graphic below.

 

                                       ListBox

Next we'll add a ListBox right underneath  the Combination box.

 

   

                           Vertical TrackBar

The 5 columns is to keep you from getting on or too close to the Edit Box. If you were to put the Vertical Trackbar next to the right edge of the Parent, you would want to keep 5 columns left of it also, starting with it's last grid dot.

 

                     Horizontal TrackBar

Horizontal Trackbar only needs to be 2 rows deep, So you could be on the last row of grid dots and still be on the Parent. The bottom or side lines on the parent grid shows to be lines, but they are still part of the grid. Controls can cover them and still be on the Parent.

 

                                                    Progress BAR

Normally a progress bar will take up one row on the Grid, but you can make it as deep as you want.

The Range and colors can be reset by Right Clicking on the PBar button. 

 

                                                     Static Control

The Static Control (also known as a Label) Alows you to place Text on the Parent. We are going to use it to put a Picture on the Parent.

 

We are going to stretch a Bitmap to the Size of the Static area we selected.

NOTE: If you had selected Adjust Static>Bitmap, the picture displayed will be just like the original picture, but if it's too big, portions might hide behind or cover over other controls. So you will have to consider their sizes.

A dialog box appears so you can browse for your Bitmaps

 

               Checkbox and Radio Buttons

I'll show you how to do the CheckBox. They are both done the same way.

 

Here you would Enter a name for the CheckBox or RadioButton

 

                                              OK Button

The very last step in creating a Window is to Click on OK.

If you Left Click on OK, you get the Example code included.

If you don't want the Example code, Right Click on OK for it's menu.

The code will be in the windows clipboard, just paste it in New in an Ide.

Also a message box will ask if you want to save the project to a .SAV file which can be loaded into EzyGUI later.

There is several saved projects in EZexample5 directory included in the ZIP file. You can load them into EzyGUI and click on PreView if in same directory as FBC to view the EXE. You can add to it with EzyGUI or Click on CodeView and add to it in one of the Editors, like FBIDE, JFISHPRO, or NotePad.

I hope you enjoyed this little Tutor, I tried to make it as simple as possible.