Flex GUI WYSIWYG Creator Prototype

Screen cast and source at the bottom.

Preface

John Grden created something like this in the past called FLEXible. Basically, you use Flex as a drag and drop interface to create GUI’s. The GUI’s are represented as XML, and this XML is used in another context. FlexBuilder creates and renders MXML as well as ActionScript. Web browsers render HTML, and a variety of tools from Notepad and Dreamweaver can create HTML.

The reason to use a WYSIWYG editor for layout is that you get more visual control when laying out interfaces. Sure, you can edit an x attribute on an XML tag for pixel precision, but if you want to see the entire interface, a WYSIWYG is the way to go. You can make a visual change, and see how your design is affected. A lot of early Flash Development was layout of the interface first, code second.

Another use of WYSIWYG editors is for Content Management Systems. In the case of intranets, some have small sections where you can enter custom text, whether normal or HTML, that show up in approved sections of the company website. More advanced ones like WordPress blogging software has a plethora of controls for writing a blog entry. Many buttons will automatically write the appropriate HTML for you. This saves massive amount of time, and allows you to focus on your blog and, and less time on how your blog entry is made.

We have wants at work for a variety of visual CMS WYSIWYG editors. For customers who request minor graphical and layout changes to their products they purchase from us, it is much quicker to simply re-position a GUI element via a WYSIWYG editor, confirm visually in real-time that is what they want, and save these settings to the profile. This, as opposed to changing some text markup or a value in a MySQL table, and going through the management chain through phone calls and email to answer the question, “I made the change; were they ok with it?”.

While both actions can take about the same amount of time, using a simple WYSIWYG editor doesn’t require a degree in computer science. Nor does using WordPress ‘ text editor. Easy to use interfaces that generate the necessary code. Whether they are used by users, or client managers doesn’t matter; what matters is that developers are developing instead of spending their valuable (read costly) time on making extremely minor graphical changes to things that anyone could do that had an Internet connection, a web browser, and login credentials.

I’m all about reducing overhead costs.

The OTHER Drag and Drop in Flex

Flex is known to have pimp drag and drop features. They are built into the SDK, and require a boolean and 2 event handlers to work. Mizz-nagic. However, there is another way to do drag and drop in Flex. It’s called the startDrag method, and it’s a party of Sprite. He has a stopDrag method as well. These methods are more efficient than doing your own emulation of drag and drop since they are built-in. The downside is they still have the same refresh problem, but you can fix that the same way you have in the past using a mouse move event handler, and calling updateAfterEvent on the event parameter.

Using these 2 methods, you can build your own drag and drop interface that consists more of just using the Flex SDK list classes. They are, however, more low level so you have to do some more coding legwork.

Introduction

I built this Viewer Editor for a co-worker at work. The goals were thus:

1. Needs to be done in 2 days.
2. Worked on outside of work core hours.
3. Implement important features to showcase ability to create interfaces vs. being feature complete.

In short, a prototype for a demo. You know what that means kiddies: uber-hacks, kludgey code, and something you don’t bring to an interview (unless you are damn good at explaining context). The GUI you build can be saved as XML. This XML can be re-read in and the Viewer Editor will re-build the interface so you can edit it. This XML ultimately is read by a .NET web service that will build an HTML front-end based on the client’s settings and this layout XML. If a client wants something moved “20 pixels to the right”, you launch the interface, move the GUI element, and click save.

So why show it knowing the code is bleh? A few reasons:

• Shows how to do the ‘other’ drag and drop in Flex as well as the regular, built-in kind
• Shows how to dynamically build forms through ActionScript using the Flex Form & FormItem classes
• Shows how to use 50 billion bindings through ActionScript
• Shows what you can build in 12 hours or less using Flex and Red Bull.

Built JB Style; no Cairngorm overkill insanity here. Speed, people, speed! Code gen is for people who can’t type fast.

You can view the Captivate screen cast, read the following, or both… or cross the border with a chicken and crowbar.

Controls

The Viewer Editor is made up of 3 panels to interact with laying out controls on the Canvas. The first is the Control Panel. This guy is configured via external XML. He dictates what you can drag and drop onto the Viewer Canvas.

The Viewer Canvas itself is basically just a Canvas that draws draggable controls inside itself. You can select controls, drag them, as well as modify their properties in the Property Inspector.

The Property Inspector shows the modifiable properties of a control when you select that control. You can also select the Viewer Canvas.

Although there are 2 missing features such as deleting and changing z-order of elements, this could be easily done by having the Controller either remove an item from the currentViewer.children, or by changing the order of an item in the currentViewer.children.

Conclusions

Although Flex 2 is positioned as a way to build Enterprise applications, whilst Flash is for lightweight, speedy RIA development, clearly with the right attitude you can use Flex Builder as a prototyping tool. Drop the frameworks, ignore the code review, and down the caffeine.

There is also a lot of potential for GUI WYSIWYG’s as front ends for CMS systems. From Scrapblog.com, gModeler, and many others. While it’s great to have a extremely configurable back-end, it’s also nice to have a quick, easy way to modify values in that back-end. It’s even more cool when users and clients can do this themselves in a controlled manner using a tool specifically built for allowing them to configure what they want changed most, without having to utilize a developer’s time.

It’s fun to do prototypes and CMS’ in Flex.

Viewer Editor – Screencast | App | Source | ZIP