UI Editor With Preview

One of the big problems with WYSIWYG editors is that they don’t really cut it. They look good in the beginning but as your experience grows, the editor tends to get in your way of getting things done.

Stackoverflow used an interesting solution: There is a wiki markup editor and a preview which is updated as you type. So you get the best of both worlds: You can see your intention and the result at the same time.

Riena is now following along the same path: They created a preview which updates when you save your UI code. That way, you can quickly see the effect of your changes without stumbling over tedious property editors all the time.

2 Responses to UI Editor With Preview

  1. Johannes says:

    It would be way eaiser if UI code was fairly unambiguous and could be equally-well handwritten or machine-generated. That’s something I love about XAML (despite being XML, which is a point for debate, but they did many things right there). Similar to web page editors like Dreamweaver or Expression Web you get a two-pane view with source and UI. You can edit both and have the changes reflected on the other side. And even editing the WYSIWYG part causes changes that are usually the same as you would do by hand.

    The main problem I ususally had when writing GUIs in Java (admittedly, using Swing, not Eclipse RCP) was that I had no idea (and still have to this day) how to properly structure the code so that UI changes don’t take a whole day …

    • digulla says:

      The problem with XAML and XUL is that they separate things that belong together: UI elements and the handler code.

      The bad thing about editing WYSIWYG directly is that it usually enforces a special code layout because the WYSIWYG editor is too dumb to understand what my code means.

      Maybe you should have a look at the new wave of DSLs which allow you to quickly invent a new language. I have high hopes that those frameworks (especially Xtext) help to solve many of those problems. There was an article which showed how to have “color completion” in a DSL (press Ctrl-Space where a color is expected and a color picker dialog opens up).

      As for the “how to structure the code”: I usually write a small framework which helps me build the UI from smart blocks. So instead of configuring a tree with 20 lines of code, I say “tree(dataStructure)” which gives me a pre-configured tree element that I can then tweak.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: