Recently I contributed my e4 contacts demo to the e4 (e4 = Eclipse 4) cvs repository. Goal of the demo is to give good examples for e4 RCP related topics, like
- CSS based styling and theming
- Modeling the application UI skeleton
(menu, toolbar, parts, commands, handlers, …) - Data binding everywhere
- Product branding (not started yet)
- Co-hosting using p2 (self-update, not started yet)
Here is a screenshot of the application using a dark css based theme:
And here the same application using a brighter css based theme:
The styling is pretty simple right now, I will enhance it using textures and gradients as soon as these features are implemented. The next screenshot shows the EMF based UI model of the application (workbench) skeleton:
Modeling the application workbench UI like this is very easy and straight forward. Rather than dealing with complex layouts programmatically or using extension points you can get a decent application skeleton quickly.
How to get and run the demo?
- Install the latest Eclipse 3.5 SDK (currently 3.5RC1)
- Install the latest EMF SDK
- Open the cvs repository:
host:dev.eclipse.org
root:cvsroot/eclipse
user:anonymous - Check out the project e4/releng
- Import the following team project sets
form releng/org.eclipse.e4.ui.releng:
e4.ui.psf
e4.ui.examples.psf
e4.ui.css.psf - After having imported all the necessary projects from cvs, open project org.eclipse.e4.demo.contacts/contacts.product
- In the Overview tab of the configuration editor, click “Launch an Eclipse Application”
- Now the contacts demo shoud start with the dark css theming
Have Fun!
Kai
Great, it works. My first attempt to run something post-3.5 😉
Some observations (on Vista):
– The splash stays visible all time
– The task bar icon is missing
– Add user and delete user actions are without function
– The theme menu is without function
– I see no evidence of data binding (what must I do?)
Will try now to store the UI model in a CDO repository…
Cheers
/Eike
Hi Eike,
– The splash stays visible all time
=> See bug 277463
– The task bar icon is missing
=> Not needed yet, might come later
– Add user and delete user actions are without function
=> yes, will be added when I add editing support
– The theme menu is without function
=> I am waiting for some API in the platform (or help to create it 🙂
– I see no evidence of data binding (what must I do?)
=> take a look at the code (DetailComposite, ListView)
Please keep in mind that this version is pre-alpha. For the next milestone I prepare some enhancements 🙂
Hey Kai,
Don’t get me wrong, I only wanted to report possible problems. No criticism 😉
Regarding the data binding: I just can’t see the effect of the data binding. Shouldn’t the left-side list get updated if I change your name?
BTW. I just managed to import Application.xmi into a model repository. After slightly modifying the bootstrap code of the workbench the application starts by loading the UI model from the repository. Awesome!
I wonder if the prtotype is already preparedto dynamically update the UI on model changes? To me it looks as if that does not work yet…
Cheers
/Eike
Pingback: Eclipse e4 Project in Review « EclipseSource Blog
I fail to see what advantage the modeling of the UI has over Extension Points. Is the model extensible too by other bundles?
Philipp,
When your rcp app is composed of 10 bundles that make UI contributions, you have to build and start the application to see how your UI looks like. The advantage of the modeling approach is that you can see your app’s (skeleton) UI immediately. And yes, the model is extensible, e.g. part have URIs like platform:/plugin/org.eclipse.e4.demo.contacts/org.eclipse.e4.demo.contacts.views.ListView
I love the new e4 UI modeling!!! It will enable much greater extensibility and customization orthogonal to the contribution model.
Consider a large Enterprise RCP application who wants to allow visibility to parts of your UI (model) based on some sort of user role (adminstrator, author, reviewer, etc.)
Also it allows for the clean separation between the presentation (rendering) and the definition.
Kai, this is awesome!
I promise you I’ll get to work on the tab folder gradients soon 🙂
Pingback: Kai’s Blog » Blog Archive » e4 CSS Styling: Fun with Gradients
Pingback: Java One - Good looking apps with RAP « EclipseSource Blog
Pingback: Kai’s Blog » Blog Archive » e4 CSS Styling: More Fun with radial Gradients
This is really cool?
But what’s an “.xmi” ? Why a new declarative UI language/format instead of existing ones ?
I actually wanted to say:
This is really cool!
not with a question mark, hehe 😉 but yes I have so many curiosity regarding this new technology at e4