Advanced RAP Theming

As you may read in previous blogs we have adressed the RAP styling. Therefore we presented you the “big blocks” in form of the new RAP designs. But there is still a difference between RAP and other cool RIA technologies i.e. like ExtJS, Flex or qooxdoo. When you take a look at the demos of these frameworks they all come along with cool styled widgets out of the box. Take a look at the screenshots below to see what I mean.

ext js Advanced RAP Theming

ExtJS Combobox

flex 300x57 Advanced RAP Theming

Flex buttons

qooxdoo 300x45 Advanced RAP Theming

qooxdoo buttons

Now lets take a look at theĀ RAP widgets and how they are styled out of the box:

rapOld 300x236 Advanced RAP Theming

RAP default widgets

As you may see, there is a little difference between the Flex, ExtJS, qooxdoo and the RAP widgets. RAP looks almost like Windows 95. This cannot be the way RAP presents itself to the world because RAP is a modern and cool technology for building full featured RIAs. For that reason we spent some effort to show you how RAP can look like:

rapNew 300x255 Advanced RAP Theming

Modern RAP theming

From my point of view these widgets have a really fresh look and are fully competitive against all the Flex, ExtJS and qooxdoo widgets. This styling is done via theming and by using the new theming features like gradients and rounded corners heavily. We plan to set this theme as the default theme for RAP 1.3 which will be released within the Helios release train.

But there is no reason to wait. You can use the theme right now. All you have to do is:

  1. Check out the latest and hottest RAPĀ Milestone.
  2. Edit your branding to use the new themes. Set the theme id to org.eclipse.rap.design.example.business.theme for the business theme or to org.eclipse.rap.design.example.fancy.theme for the fancy theme.
  3. Start your application and enjoy the fresh and modern look of you widgets.

Please note that not all widgets are themed right now, but more than 80% of the widgets have the new look allready. If you have feedback for the theme please let us know by using the newsgroup or by leaving a comment.

5 Responses to “Advanced RAP Theming”

  1. Frederic says:

    Hello,

    I want to try out this new theme. So I installed RAP1.3M3 and import the org.eclipse.rap.demo project.

    Within plugin.xml

    I change the themeId of

    to

    org.eclipse.rap.design.example.business.theme

    but it has no effect on the RAP application I get from
    http://localhost:9090/rap?startup=controls

    I mean I still have the Windows95 buttons :) nothing is rounded

    Is it the correct way to change the theme ?

  2. Hi,
    did you have added the bundle org.eclipse.rap.design.example to your launch configuration?

  3. Frederic says:

    Yes indeed. I even have imported it as “source plugin” within my workspace to check if extension point org.eclipse.rap.ui.themes is defined, and it is:

    Is changing the “themeId” field of org.eclipse.rap.demo/plugin.xml the only thing to do ?

  4. Frederic says:

    Gotcha.

    With either

    org.eclipse.rap.demo\launch\Controls Demo.launch or
    org.eclipse.rap.demo\launch\RAP Workbench Demo.launch

    launch configutations, in the “main” tab, if you select the “business” as Servlet Name and, in the “Bundles” tab, you select the org.eclipse.rap.design.example bundle, the “Business” theme is activated…

    and it looks much much better than the old basic look. Congratulations !

  5. Ponder says:

    Hello,

    Can I set any of the available (as you said “fancy/business”) themes programmatically. I mean without using the eclipse plugin-framework?

    Can’t we do this-
    In the EntryPoint.. creating a theme instance.. passing a CSS filepath.. etc (other necessary parameters). And you are done!

    Help will be great!

    Regards

5 responses so far

Written by . Published in Categories: Planet Eclipse