The Window Designer
for EuWinGUI Applications

(C)2001-2006 by Andrea Cini.

Index of Contents:

The Window Designer
What's new in this release?
Designer's controls and usage
The "Control's creation and selection" group
The "Control's placement and main settings" group
The "Details" window
The "Fonts" window
The "Main Menu" window
Additional notes
Credits & Contact



The Window Designer


The Window Designer (Designer.exw) is an Euphoria Win32 program, built using the EuWinGUI library, which allows the visual creation of the graphical interface of any EuWinGUI application and the generation of the Euphoria code needed to create it.

Since the Designer is made using the EuWinGUI library only, it lacks some of the advanced features present on other, much bigger IDEs (you can't, for instance, drag a control to move or resize it directly), but it clearly shows that with EuWinGUI it is possible to create even complex programs with ease, bypassing the natural limitations of a library intentionally born to be small and simple with a little fantasy and some programming skills.

This brand new version is an evolution of the initial release of Designer.exw with much more functionalities, an improved interface, enhanced error checking, and embedded resources.


What's new in this release?


- The Designer now supports coloured Groups, Edit-, List- and Text-class controls. It is possible to load existing project files created with earlier versions of the Designer and modify/save them with the new color informations.

- The general appearance of the program has been refreshed a bit thanks to the new color-capability of the library.

- A few trimmings were made to the code and to the interface.


Designer's controls and usage


The Designer's controls are divided between two different group boxes on the upper side of the program's main window and three additional child windows. A brief description of each of the IDE's active commands and controls appears on the status bar placed on the IDE's main window when the mouse cursor is moved over them.

Since the Designer now has true multi-window capabilities, the "preview-mode" of the older versions was eliminated as no more necessary. On the contrary, the possibility of creating programs with more than a single window makes necessary to introduce the concept of "current parent window" in addiction to the usual "currently selected" control. The current parent window is the one over which the next added control will be created, and any of the existing windows (e.g. the Main one or a Dialog) can be set to be the current parent by just left-clicking somewhere over its client area or any of its control, or by clicking on its identifier or on the identifier of any of its existing controls into the list of added ones. Note that clicking the titlebar of the Main Window or of a Dialog is *not* enough to select it.


The "Control's creation and selection" group


The list located in the top left corner of this group contains all the available EuWinGUI control types. The "Button" control's type is initially selected, but you can choose any of the other types available on the list you'd need. By clicking on the Add button, a control of the selected type is created (with initial width and height of 80 and 25 pixels respectively) and placed on the top left corner (position 0,0) of the current parent window.

At the same time the identifier (ID) of the newly created control (given by default by the type name of the control plus a progressive number) is added to the list on the right, which contains initially only the "WinHwnd" string (i.e. the default identifier of the program's Main Window). By clicking on any item/name of this list you make the associated control or Main Window the "active" or "selected" one. More easily, if they do not overlap each other, you can make one of added controls active just clicking on it. Note that list controls can be activated this way only if clicked on the dotted (first) line (used by the Designer for this purpose only and not added when the program is saved). Note also that the parent window of the selected control (or the selected window itself, if the currently selected control is the Main Window or a Dialog) becomes also the parent for all the controls subsequently added to the program.

The active control can be deleted at any time by clicking the Delete button (note that you can't delete the Main Window). By deleting a Dialog you will also delete all the controls which were added to it, and all of them will be also removed from the list of added ones. Detailed informations on the active control (type, position, dimensions in pixels and style if a window) can be viewed by clicking the Details button, which makes visible the "Details" window (see later). This last button is disabled as long as the latter window is shown (e.g. the default at startup). New font types can be created and used on your application's controls using the Fonts dialog, which can be accessed by clicking the provided button. Note that this button will only be active if the currently selected control shows some text or caption and it is NOT a window (whose titlebar font can't be changed).

The Icon/Picture button is only enabled if the active control can use a BMP image (Picture, ClickPicture or PictureButton) or icon (the Main Window or a Dialog), and allows, obviously, to load the needed graphic. Note that any image loaded into a Picture or ClickPicture control is automatically stretched to fit exactly the dimensions of the control, while the images loaded into PictureButton controls always retain their original size, so it is up to you to change the control's dimension to better fit the loaded image.


The "Control's placement and main settings" group


The four arrow buttons on the left of this group allow to move the active control in the four directions by a step, in pixels, equal to the value selected on the central steps list (you can't click and drag the active control to a new position, you must use these buttons to move selected control around). Along the same lines, the four double-arrow buttons on the right of the "steps" list allow to decrease and increase the Width and Height of the active control by a number of pixels still equal to the value selected on that list. Note that the controls cannot be moved past the top-left boudaries of the current parent window (e.g negative coordinate values). Note also that, if the Main Window or a Dialog is selected, the movement buttons are disabled though it is still possible to change the window's dimensions using the sizing buttons. It is also possible to change manually the position/dimension of the selected window/control, via the commands of the "Details" window (see later).

The "Text:" edit field on the right of this group stores the text/caption of the active control/window (which is set by default to "Control" or "Dialog" when a new one is created) or Main Window (initially the caption of the Main Window is, in fact "Main Window"). You can apply the control/window's text/caption typed inside this field by hitting the Enter keyboard's key after having typed it. Note that some controls (Lists, SortedLists, SimMultiLists, Pictures, ClickPictures, PictureButtons) though allowed by Windows to have a "caption", *never* show it.

The "Ident:" edit field on the right of the same group stores the identifier (i.e. the name of the atom which will store that control's handle once the program is saved and run) of the active control (which Designer initially sets to the control's type name plus a progressive two-digit number) or window (the default identifier of the Main Window of any EuWinGUI application is always "WinHwnd" but you can change here as preferred). You can edit this field to change the control's identifier and by hitting the Enter keyboard's key apply the change.

The Help button on the right, outside the group's boundaries, shows this help file, the About button shows the Designer's aboutbox/splash screen shown when it is started, while the Main Menu button on top of the others makes the "Main Menu" window visible (see later) and it is disabled as long as the latter window is shown (the default at startup).


The "Details" window


This window is a more advanced version of the Control's Information box shown by the earlier releases of the Designer. It can be hidden using the window's close "X" button and made visible again using the "Details" button of the Designer's main window.

The Type: label on top of the window show the type of the currently selected control/window, while the four edit fields below show its X and Y position, width and height, as indicated by the labels on their left. The coordinates are relative to the screen for a window, or relative to the client area of its parent window for a control. Differently from earlier versions of the Designer, it is now also possible to change position and dimension of the selected control/window by simply editing the appropriate field and hitting the Enter keyboard's key or clicking the Apply Changes button to make the changes effective. It is also possible to make a *window* (e.g. the Main Window or a Dialog) centered horizontally or vertically on the screen by typing the value -1 inside the "X" or "Y Pos" fields; any other negative value will be ignored and considered 0 (zero).

The Store Values button keeps in memory the values typed inside the four edit fields above and enables the four M- ("memory out") buttons. These latter buttons allow to paste again any of the stored values inside the respective fields. Using these buttons is now extremely easy to create controls of the same dimension and/or in the same position by storing the values of a first "reference" control and pasting them to the following ones as needed.

The Window Type group is only visible if the selected control is the Main Window or a Dialog and its radio buttons allow to choose its appearance among one of the available EuWinGUI styles.

NOTE that regardless of the style selected, the changes affect only the generated program's code; the appearance of the program's windows inside the IDE will always remain the same despite the selected style (e.g. all the windows will always be shown with "NoMaxWin" style to allow minimize and move them around), but the generated program's windows will be created using the style selected for each one of them. For the same reason, it is not possible to *see* in the IDE any of the program's window resized below certain values even if their style would allow it. For example, if you set the style of the Main Window (or of a Dialog) to the NoBorderWin style and its dimension (width, height) to 0,0, you will still see the window in the IDE with a little titlebar to allow minimize and move it, but once you run the generated program's code it will be "invisible" (e.g. zero widh and height) as you have set it. To preview your program as it will really appear, save and run it (see later how this can be done automatically by the Designer).

NOTE also that the possibility of minimizing and moving around the program's windows by dragging their titlebar is only given to allow a better use of the working space, but the initial position of the windows when the program's code is generated is *not* affected by this movements. To place again a window to the position on the screen it will have when the program starts, it is enough to select it and then click on the "Apply Changes" button.

The Control Colors group is only visible if the active control is a Group or belongs to the Edit-, List- or Text-class. The group holds an edit field where you can type a custom color code in #BBGGRR (hexadecimal blue, red, green) format for the text or background color of the active control, depending on which of the two pushbuttons "Text" or "Back" is currently selected. The color is set after hitting the ENTER key. It is also possible to have the program automatically use one of the 16 predefined Windows colors by simply clicking on the color table located below the "Use Default Color" pushbutton. The latter button removes any custom color information from the active control's text or background reverting it to its default state. By clicking on the color bar, the clicked color code is copied into the edit field and immediately applied to the active control, this way is easy to modify the color codes so to get the desired color variant for each control. Anyway, keep in mind that to apply to the active control any changes manually made to the color value typed inside the edit field it is always necessary to hit the ENTER key.


The "Fonts" window


This window holds the commands which allows to create (load) new font types and set them to the controls which shows a text or caption BUT the Main Window and the Dialogs, which can't change their titlebar's font. This dialog, even if activated, is only be visible if the currently selected control shows some text or caption.

The New Font group holds the controls which allows you to create (by loading it from your system) a new font type. The Type edit field allows to choose a font family among the one available on your system (note that the same font MUST also be available on every system on which your application will be run, if you are going to distribute it). For instance, to create a new font type belonging to the "Times New Roman" family, type inside this field "Times New Roman". You can check which font types are available on your system by accessing your "...\Windows\Fonts\" folder. The Size edit field allows to set the new font's size in points. Null or negative values won't be accepted. Also, be sure that the desired size is available on your system for the font family you have chosen. The ID field allows you to type an Identifier for the new font. Duplicate identifiers won't be accepted as well as font IDs already used as control IDs. The Bold, Italic and Underlined checkbox allow you to create a font with the desired style, while the Create Font button will create a new font type according to the chosen settings which will be available for use on your application. NOTE also that the "globally" most similar available font in family, size and style will be used if the specified font is not specifically present on the system where your application is and will be run.

The Available Fonts list allows to select one of the default EuWinGUI font (FN_DEFAULT and FN_FIXED) or one of the newly created ones, which will be previewed by the provided label at the bottom of the dialog. Once one of the font types has been selected it is possible to set it to the currently selected control using the Set Font button. It is also possible to delete one of the newly created font type by selecting it and then clicking the Delete Font button. Note however that it will be allowed to delete a font tpye *only* if it is actually not set to any control. Note also that all the font shown into the Available Fonts list will be generated by your application at run time even if some of them are not effectively used on any control, so if you have created some font type that you aren't going to use into your application, delete it using the button above.


The "Main Menu" window


This window stores the commands which allows to save, load or create a new project and program, and to set your preferences for the program's generated code. It can be hidden using the window's close "X" button and made visible again using the "Main Menu" button of the Designer's main window.

The difference between an executable "program" and its "project" is that a "project" is a not-executable file containing the informations the Designer's needs to generate the executable program's code you are currently working on at a later time. By saving a program's project, you will be able of reloading it into the Designer for later modifications to the program's interface. By saving the program instead, only the executable Euphoria code needed to create the interface you have created is generated, but you won't be able of loading it into the Designer should you need modifications to its interface at a later time. For this reason, it is generally recommended to save the project file before closing the working session.

The New button of the Project Options group erases all the current work (allowing you to save it first) and runs a new session of the Designer, to start a new project from scratch. The Open button erases all the current work (allowing you to save it first) and lets you locate and open an existing Designer's project file for further works on it (project files created by Designer's versions prior to 3.5.0 *CAN* still be loaded normally). The Save button allows to save the current work and program's options (project files created by Designer's versions 3.5.0 or later *CANNOT* be loaded by previous versions).

The Coding Options group stores a number of checkboxes which affect the generated program's code. The Set Windows on top checkbox allows to add to the generated code the statement needed to make the program's windows always on top of the others (i.e. always visible regardless of the system's "active" application). The Skip Comments checkbox allows not to add the default comments to the generated code. Comments are useful to understand how an EuWinGUI application works, especially for EuWinGUI Beginners, but they make the file size larger. The Basic Code checkbox allows to generate even smaller files as it adds to the program's Event Loop (see the EuWinGUI documentation) only the code needed to handle the Main Window's events (the others' must be added manually by you, if needed).

The Use external code file option is extremely useful if your program's interface is always "a work in progress" or if it is made up by a great number of different controls. This checkbox allows to generate two different files: the first one, an executable ".EXW" Euphoria Windows program, contains the code needed to create the program's interface, while the second, a ".EW" Euphoria Windows library, stores the event handling code for the same program. The executable file contains almost the usual code but, for each control and event, a global empty procedure (named as [control ID]+[event type], i.e. "WinHwndClick()") is created inside the second code file and called by the first one when the associated event occurs. This way it is easier to make successive changes to the program's interface without losing the handling code already written and stored into the code file. When saving the program, and after having created the executable file, the Designer checks for the existence of the code file (which is always named as the executable file name plus a "CF" suffix and ".EW" extension). If it doesn't yet exist it creates a new one from scratch, filling it with the empty global procedures needed/referenced by the executable file, while if the code file already exists (i.e. it was already created and maybe you have already started adding it the handling code for the various events) the Designer only adds to it the new empty global procedures needed by the controls which were added to the program's interface, leaving the existing code intact. Just in case you have changed a control's identifier or have deleted any from the program's interface a little cut & paste work is needed to manually remove from the code file the no more needed procedures and move the already written handling code of the controls whose ID was changed to the new procedures added, when/if necessary. In any case, your work won't be lost.

The Program Options group holds the Save Now! button which, needless to say, allows to start the generation on disk of your program's code and the Test it after saving... checkbox which allows to run immediately the generated code once it has been saved, and so is especially useful if you are working with windows with different styles as it allows you to see immediately the "real" appearance of your program.


Additional notes


Only the file name and extension of the loaded BMP pictures and icons are used by Designer for the SetIcon()/SetPicture() functions added to the code (it is assumed that all the images/icon will be located at run time inside the same folder of the script/executable file). So, when running the saved file, be sure that all the images/icons you used are present into the script's folder, or they will not be loaded. Of course, in case you need to place them in a different location/path, it will be enough to make the appropriate changes to the generated code.


Credits & Contact


Most of the changes and improvements to the Designers were possible thanks to the suggestions ,comments, criticism and bug-reports of a number of EuWinGUI Users. *Many* thanks to all of you guys!

Please feel free of sending more to my e-mail address:

andrea_cini@katamail.com

I will be pleased of hearing from you.