We have planned to introduce the “UI Theme Customization” feature in coming 3.0, thus users could define their own UI theme. This feature is still under design phase, so I’d like to collect some ideas from you.
Currently the solution in my mind would be quite similar with JQuery’s themeroller (http://jqueryui.com/themeroller/): a collapsable property sheet for user to tweak the style, and a panel with all predefined elements for style previewing. I am even considering if we could support JQuery’s theme directly, thus ForeUI will immediately has much more UI themes to use.
How do you think?
2 answers
Hey Xavier, when you say “UI Theme Customization”, do you mean customizing the way ForeUI itself looks (like the Look and Feel settings), or how the elements in the plot are generated (like switching between Windows XP, Windows 7, Handdrawn)? I just want to make sure I understand what you’re talking about!
I know this topic has been around a long time, but I wanted to express a couple of thoughts. Xavier I think your original post is a good idea; the jQuery ThemeRoller will go a long way to make certain elements match whatever style you’re going for.
But I’d also like to see this taken a step further. My company has been building a sizeable library of “common” components that are saved as custom ForeUI elements. It would be awesome if we could add some of these to ForeUI’s UI Themes. So if I built a custom element – say, a table with specific formatting – I could easily switch between different themes.
Mostly, my goal is to be able to build handdrawn-looking mockups at first, then when appropriate switch the whole plot to wireframes. Then farther in the project, switch to Windows 7 or Mac OS X or whatever else the end-product is going to look like. This way early in the process we can focus on structure by hiding all of the shinyness, but when the project is ready for that, we don’t need to re-create all the mockups, it’s already there.
-
Hi Mark, I think you mean the possibility to switch themes for custom elements. That would be possible, but you will still need to make some modification on your custom elements.
In V3.0, every element can be bind to a style by specifying the style name. If the style name is omitted, you will need to specify all parameters to render the element. Some elements have their style name specified by default, such as Button, Checkbox, Window etc, so they can switch themes since all themes have defined the styles for Button, Checkbox and Window etc. On the other hand, some elements do not have a deault style name, such as Rectangle, Line, Placeholder etc. So they could not switch theme by default. But if you default the style for Rectangle in all themes, and bind the style to your Rectangle element, that Rectangle can switch theme as well.
In short, you will need to do two things to make an element theme-able:
1. Default style for the element in all themes you are going to use.
2. Specify the style name for the element (bind the element with the style).
We will release document and demo video to introduce all these when it is ready. -
If I'm understanding you correctly, I think that sounds great! I'm looking forward to seeing the details in action.
⋅ 
⋅ This question is now closed
This feature will be quite useful for web site prototyping, but not so useful for native app prototyping. So we are considering to make it as a plug-in.