e4 Contacts Demo

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:

contacts-dark-small.png

And here the same application using a brighter css based theme:

contacts-bright-small.png

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:

contacts-workbench-model.png

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

Follow me on Twitter

This Post Has 13 Comments

  1. Eike Stepper

    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

  2. Kai Tödter

    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 🙂

  3. Eike Stepper

    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

  4. Philipp Kursawe

    I fail to see what advantage the modeling of the UI has over Extension Points. Is the model extensible too by other bundles?

  5. Kai Tödter

    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

  6. Stu Pond

    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.

  7. Kevin McGuire

    Kai, this is awesome!

    I promise you I’ll get to work on the tab folder gradients soon 🙂

  8. Hendy Irawan

    This is really cool?

    But what’s an “.xmi” ? Why a new declarative UI language/format instead of existing ones ?

  9. Hendy Irawan

    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

Leave a Reply to Hendy Irawan Cancel reply

I accept the Privacy Policy