e4 Contacts Demo

13

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

13 Comments

  1. Eike StepperMay 25, 2009

    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ödterMay 25, 2009

    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 StepperMay 25, 2009

    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. Eclipse e4 Project in Review « EclipseSource BlogMay 25, 2009

    […] On a side note, if you’re an Eclipse committer, Kai Toedter is looking for vCards of Eclipse committers for his e4 contacts sample application. If you want to be famous, shoot him an email. […]

  5. Philipp KursaweMay 26, 2009

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

  6. Kai TödterMay 26, 2009

    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

  7. Stu PondMay 26, 2009

    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.

  8. Kevin McGuireMay 26, 2009

    Kai, this is awesome!

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

  9. Kai’s Blog » Blog Archive » e4 CSS Styling: Fun with GradientsMay 28, 2009

    […] Kai’s Blog Java, Eclipse, OSGi, and other cool stuff « e4 Contacts Demo […]

  10. Java One - Good looking apps with RAP « EclipseSource BlogJune 1, 2009

    […] It is inspired by Kai’s recent work on the E4 Contacts Demo, but based entirely on my own codebase. I wanted to use a slightly richer data-model and UI, as I want this to become a replacement for the dated ‘Palm Desktop’ application I’m using. What you see is where I got after one day of work. It’s still very alpha, but you can get the code on github. […]

  11. Kai’s Blog » Blog Archive » e4 CSS Styling: More Fun with radial GradientsJune 16, 2009

    […] Instructions how to install and run the contacts demo you find here. […]

  12. Hendy IrawanJune 21, 2009

    This is really cool?

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

  13. Hendy IrawanJune 21, 2009

    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

I accept the Privacy Policy