EMF+CSS=Brains+Beauty (Come see it in London Sept 19)
As Boris wrote, we’ve been hacking this nice little photo app demo. I will admit that I wasn’t convinced of the practical advantage of EMF and the modelled UI until I started seeing the demo come together. Now I’m a believer! Mind you, I really suspect that Ed’s been breaking into my house at night, whispering in my ear while I sleep, “EMF is good… EMF is good”. [Note to Ed: you left the fridge door open last time and the milk went sour, please take more care in the future].
The demo has now a second aspect: a tie in with CSS. Thanks Boris, Eric, and Angelo for all the help. Unfortunately this CSS’ed version isn’t available in CVS yet; we need to get Angelo Zerr’s TK-UI code, which although EPL, isn’t IP-blessed into Eclipse yet.
Last Thursday I did a presentation on e4 at the IBM Cracow lab (home to a “small, but good” group of Eclipse Team/CVS/Core/UI committers). I showed the SWTBrowserEdition demo, the EclipseCon08 “Eclipse in a web browser” demo, and finally this cool new Photo App demo.
I started by showing the model instance tree and saying, “This is what the app is, see I have this Albums view, a Preview, …” etc. and everyone nods. You run it, and, well it matches what you were expecting to see. A simple notion but really powerful, with no complex GUI builders trying to hide the truth from you (Jack Nicholson voice, “because you can’t take the truth!”). Well now you can take the truth because its simple!
I then went through the steps of modifying the model directly. “Hmmm, why does this Preview part need to be in a stack all by itself, lets move it up and out”. A simple drag and drop of the element up, followed by a delete of the now empty stack model, then run the thing again … that’s it. People start to get that quizzical “Did he just fool us?” look. Hmm, now that we’ve moved the Preview, its background color needs to change to match the app background, so lets just open up the style.css and make that change of background-color = #ffff…
And boy did they get it!
This combination of 1st class UI structural model which is easy to understand and easy to manipulate, combined with a well separated styling description, is so cool. It just makes sense (ok the web figured that out long ago, we’re a bit late to the party). Its beauty and brains together! I’m genuinely excited about the possibilities for both the ease with which we’ll be able to build apps, and their on screen sophistication. I really do believe e4 could be a whole new era for Eclipse.
Boris showed the bare bones screen cap on his blog, I will repeat it here. This is the typical “what you get for free” Eclipse experience and normally we’d stop there:
We were then quite fortunate to have the help of the always super talented Linda Watson to add her usual sophistication and artfullness to the demo, here is her design:
(click to enlarge)
Linda’s so clever, she even selected a series of artful pictures that were in a complementary color family, so looked nice together in the mockup.
This is what I ended up being able to implement. Pretty close, but sorry Linda, we’re not quite there yet technically (more on that in a future post):
(click to enlarge)
Not your typical Eclipse looking app! I find it quite outstanding the difference a talented graphic designer, plus the ability to easily implement that design, makes.
If you’re in London England on September 19 and want to find out more about e4 and see this new cool work in action, I will be doing this talk again at the first in the BCS fall Software Practice Advancement seminar series. Should be a good crowd, and there’s always pints after!
Posted September 14th, 2008 by Kevin McGuire in category: Visual Design
You can skip to the end and leave a response. Pinging is currently not allowed.
7 Responses to “EMF+CSS=Brains+Beauty (Come see it in London Sept 19)”
Leave a Reply
You must be logged in using your Eclipse Bugzilla account to post a comment.
Jawher Moussa Says:
September 14th, 2008 at 5:34 pm
This is pretty exciting stuff Kevin ! Even more so because I’ve worked with Angelo on his CSS Engine (well, actually, just a tiny portion) and I’m glad that it is getting the interest it deserves with E4
Kudos for all the E4 work team and keep the exciting stuff coming
Cheers.
Ed Merks Says:
September 14th, 2008 at 6:06 pm
That wasn’t me who left the fridge door open nor am I responsible for the missing ice cream. If you have photo graphic evidence, I’d like to point out that it’s a thirsty and hungry work to get all the way from Toronto to Ottawa.
Linda is a design goddess and I’m not saying that just because blue is my favourite colour. It’s because she’s made so things more tasteful and beautiful.
The London thing is kind of short notice. Please note that I’ll need more than a glass of milk if I make it that far. I’m not sure a pint will even suffice…
Philipp Kursawe Says:
September 15th, 2008 at 4:24 am
Are you guys using the CSS stuff IBM implemented for the Eclipse project initially in 2007? It used the standard org.w3c.dom.css.* classes and I extended it with Java5 annotations so you could annotate certain elements in code with a @CssId or @CssClass much like you would do in HTML.
Kevin McGuire Says:
September 15th, 2008 at 5:06 am
@Jawher Thanks! I’m pretty excited about it.
@Ed So THAT’s where the ice cream went!
@Philipp This demo uses the TK-UI CSS engine. We did a round up of available engines, you can see it here http://wiki.eclipse.org/E4/DeclarativeUI/CSS_Roundup. Angelo’s TK-UI work extended Matt@IBM’s original work presented at EclipseCon07. They’re both SAC based parsers, although Angelo’s engine can use any of the three parsers (SteadyState, Batik, Flute). I would imagine you could easily extend TK-UI in a similar fashion. Angelo uses widget setData() with predefined keys for CssID and CssClass.
Philipp Kursawe Says:
September 15th, 2008 at 8:32 am
@Kevin: I used setData() too, so it would be easy to put the annotations back in place with the new CSS engine! I will have a look at it later.
Angelo Says:
September 15th, 2008 at 1:07 pm
Hi,
Im’ very glad that TK-UI CSS engine seems please to Eclipse E4.
I would like say “Thank a lot to Kevin!!!” to having me helped to introduce
TK-UI CSS engine at 20 august CSS engine conference.
I have a big luck to have met Kevin.
I would like thank too to Jawher MOUSSA, who help me a lot of
to try having an API CSS engine which tries be the more modular
and extensible.
Philippe, I have had the same idea like you (manage CSS styles inline
with annotations and I will have intention to manage that).
I think before developping this feature, it will be good to migrate
TK-UI code to CVS Eclipse repository and validate the whole of CSS engine API.
Perhaps could we work together about this subject?
I will hope that CSS engine demonstration at 19 septembre
will please to a lot of people.
At end, if you can understand frensh, I have written something
about TK-UI CSS engine and E4 into Akrogen blog at http://blog.developpez.com/akrogen?title=eclipse_e4_aamp_moteur_css.
Good luck Kevin for the CSS presentation.
Regards Angelo
Nick Boldt Says:
September 16th, 2008 at 12:44 pm
Very cool stuff! BTW, Friday is ITLAPD, so pints are a definite must.