MrEd Designer logo links contact support download overview

1. Introduction :

MrEd Designer is a GUI (Graphical User Interface) generator for PLT Scheme, which I developed as a school project at the University of Nice, in which I am studying computer science. It is inspired from the Qt Designer, a program allowing to easily develop graphical user interfaces based on the multi-platform Qt classes (in C++).

I tried to make MrEd Designer as powerful, bug-free and user-friendly as I could. If you have any comments, ideas, bug report, please check the « Contact » section of this website to contact me.


2. System Requirements :

MrEd Designer should work on Windows, MacOS X and Unix-like systems. I tried to minimize the number of OS-dependant bugs. The GUI's controls look a bit like Microsoft's Visual Studio ones, but they look fine under any operating system or theme.

I recommand a resolution of 1024x768 or higher because the different frames take pretty much space on the screen.


3. Files :

To start MrEd Designer, just launch the main.scm file with DrScheme. To gain speed, you can launch the compile.scm file to compile the project into .zo files.


4. The Graphical User Interface :

The program's graphical user interface is pretty self-explanatory, but I will try to explain it as accurately as possible. Mainly, the user can create frames, containers, buttons, and has a direct preview of what he is doing, and then ask the Scheme code to be generated, either into a file or in the console.


4.1. The Toolbox Frame :

Here is a screenshot of the Toolbox Frame :



The Toolbox Frame, under Windows

The Toolbox Frame allows you to create frames, containers, and other widgets. When you choose to create an element, its parent is the currently selected element in the Hierarchy frame. Of course, you will not be able to create an element whose parent is not a container, or a frame whose parent is not either the project root or another frame.

Closing the Toolbox Frame will also close the application.

The « Generate Code... » button allows you to Generate the code for your project, either in a new file or in the console :


Where do we generate the code?

If you choose to generate the code into a file, a prompt will appear to ask you where you want to create the file. If you choose to generate the code to the console, it will simply appear in the application console.

After having generated the code, just open the file with DrScheme, and run it : you should see all the frames and widget you created appear...


4.2. The Hierarchy Frame :

Here is a screenshot of the Hierarchy Frame :


The Hierarchy Frame, under MacOS X

The Hierarchy Frame contains the hierarchy of all the project's elements. The project name and the windows are displayed in a bold font. The other containers are displayed in an italic font. Others widgets are displayed in a normal font. You can minimize an element that have children by simply clicking the little « - » at the left of the element name, and vice-versa.

The element's id (i.e. the name it will have when the code is generated) is drawed in a gray italic font, between square brackets at the right of the element name.

There are five buttons on the left of the main widget.

- The up and down arrows allow you to move up and down an element among its brothers : the preview is automatically updated in consequence.

- The delete button allows you to delete the currently selected element (by the way, the preview will be automatically updated). You can delete an element which has children – and then delete the children, too, but to do so you will have to confirm your action (when the users tries to delete a parent elemnt, a prompt appears asking whether he is sure he wants to delete the element and all its children).

- The show and hide buttons are only enabled when the currently selected element is a frame – if the frame is hidden, then only the show button is enabled, and vice versa.

This window is fully scrollable, vertically and horizontally. If you closed this frame, you can reopen it via the « Windows » menu.


4.3. The Properties Frame :

Here is a screenshot of the Properties Frame :


The Properties Frame, under Windows

The Properties Frame allows the user to edit each property of the currently selected element in the hierarchy frame. You can edit each property by typing directly in the right field, and then validate the property either by pressing return or by clicking in another line in the window. The preview is automatically updated, but internally how the program does this is quite complex, because while certain properties can be updated thanks to modifiers, some properties need to destroy and recreate their widget, and worse than ever : it is not possible to change the « choices » or « style » property of an element without reloading the whole project. Reloading the project usually takes less than half a second but for very big and complex projects, I reckon that this might take a while. This is why, if you try to change the « style » or « choices » property of a container you will get the following warning :


A prompt under GNU/Linux

Anyway, using the properties frame is pretty self explanatory. Just edit the properties, just as if you typed them directly in the code. They will automatically converted into the right type. For example, typing #f as a label will be converted into the #f boolean and set no label to the currently selected element.

The frame is vertically scrollable, and provides the ability to select, to use left, right, backspace, ..., keys into the different fields. If you closed this frame, you can reopen it via the « Windows » menu.

There are 3 buttons at the bottom of the Frame :

- The « Edit Value... » button allows to edit the current value with a message box instead of typing it directly into the currently selected field.

- The « Reset Value » button resets the currently selected value to its default value.

- The « Reset Widget» button resets the whole widget to its initial values.


4.4. The Preview Manager :

Most frames of MrEd Designer are from the preview manager : when you add a frame to the project, containing widgets, it appears really on the screen just as it will be when you execute the produced code. Here is a screenshot of a sample use of MrEd Designer under MacOS X :


The MrEd Designer workspace, under MacOS X


4.5. The Menus :

There are four different menus. They are located in the Toolbox Frame, therefore, under MacOS X, they will only be visible if the Toolbox Frame is focused.


The File Menu

- The « New Project... » item allows you to create a new project, and will ask you whether you want to save the previous project if any changes have been made since last change.

- The « Open Project... » item allows you to open a previously saved MrEd Designer project (*.med). It loads it into memory and updates the preview.

- The « Save » item allows you to save the current project without creating a new file...

- The « Save as... » item allows you to save the current project into a new file.

- The « Export as a Scheme File... » item generates the source code for the project and saves it into a scheme file (*.ss or *.scm).

- The « Exit » item quits MrEd Designer (the same effect as manually closing the Toolbox Frame).

The edit menu only contains disabled elements (even if it is not disabled itself), it is only here to comply with the user interface guidelines.


The Windows Menu

This menu is self-explanatory : it allows you to show or hide the Hierarchy Frame or the Properties Frame.


The Help Menu

- The « Online Help... » item brings you on the support page of the MrEd Designer website (i.e. http://mreddesigner.lozi.org/).

- The « MrEd v206p1 Help... » item brings you on the MrEd v206p1 documentation from the PLT website.

- The « About MrEd Designer » item opens the About Dialog.


4.6. The About Dialog :


The About Dialog, under Windows.

There is not much to say about the about dialog : it is a normal About Dialog, with links and buttons allowing you to access some useful links. Please notice that MrEd Designer is distributed under the terms of the General Public License (GPL).


5. Conclusion :

MrEd Designer allows you to create very easily and quickly graphical user interfaces, and to instantly see the result of your work. This is the first release, but I will try to update it as often as possible.

If you have any idea, or suggestion, please visit the « Contact » section.