The Problem...

demo

Genderal considerations

Use a CSS framework

• Web-framework independent

• Re-usable accross frameworks

Bootstrap | Scaffolding

http://twitter.github.io/bootstrap/scaffolding.html

Bootstrap | Base CSS

http://twitter.github.io/bootstrap/base-css.html

Bootstrap | Components

http://twitter.github.io/bootstrap/components.html

Bootstrap | Customizable

http://twitter.github.io/bootstrap/customize.html#variables

LESS | Variables

@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);

#header { color: @light-blue; }

#header { color: #6c94be; }

LESS | Mixins

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

mix in:

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

LESS | Parametric Mixins

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

mix in:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

LESS | Nesting

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }

  .logo {
    width: 300px;
    &:hover {text-decoration: none}
  }
}

LESS | Operations

@base: 5%;
@filler: (@base * 2);
@other: (@base + @filler);

color: (#888 / 4);
background-color: (@base-color + #111);
height: (100% / 2 + @filler);

LESS | Built-in Functions

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(0.5); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

Compiling Less

@import "lib/bootstrap/less/variables.less";
@import "lib/bootstrap/less/mixins.less";

.skin {

  .rf-ac, .rf-ac-itm-hdr, .rf-ac-itm-cnt, .rf-ac-itm-hdr {
    font-size: @baseFontSize;
    font-family: @baseFontFamily;
    line-height: @baseLineHeight;
    border-color: @navbarBorder;
    background-color: @white;
    border: none;
  }

  .rf-ac {
    border: 1px solid @navbarBorder;
    border-top: none;
    .border-radius(@baseBorderRadius);
    overflow:hidden;
  }

  .rf-ac-itm-hdr {
    border-top: 1px solid @navbarBorder;
    background-image: none;
    padding: 5px 15px;
    color: @linkColor;
  }

  .rf-ac-itm-cnt {
    border-top: 1px solid @navbarBorder;
    padding: 10px 16px;
  }
}

demo

... and feel

• Behaviour

• "Moving" parts

JSF Components

GWT libraries

• GWT built-in components

• Sencha GXT

• GWT Components Library

• GWT-EXT

• Rocket GWT

• Tatami

• SmartGWT

• Vaadin

HTML 5 widgets

• jQuery UI

• Kendo UI

• jQWidgets

• YUI

• jQuery TOOLS

• Sencha Ext JS

jQuery UI

RichFaces Widgets

• Standalone javascript widgets

• Framework independent

• http://www.w3.org/TR/NOTE-HTMLComponents

• Used in RichFaces 5

RichFaces Widgets

• Event based architecture

• Loosely coupled to backend framework

Example

PickList Widget:

Server-side

• Shared server state

• Consistent programming model

• Front-end independent

CDI

CDI | Dependency Injection

Retrieve a contextual instance of a Bean

public class CapitalsObserver {
  @Inject
  CapitalsBean capitalsBean;

  @Inject @Push(topic = "capitalsSelected")
  private Event jsfEvent;

  ...
}

CDI | Contexts

@SessionScoped @RequestScoped @DependentScoped @ConversationScoped @ApplicationScoped

CDI | Contexts

...
@SessionScoped
public class CapitalsBean {
  ...
  @PostConstruct
  public void init() {
    selectedCapitals = new ArrayList();
    selectedCapitals.add(capitals.get(0));
  }
  ...
}

CDI | Events

Event producer:

public class CapitalsBean {
  @Inject @Server
  private Event serverEvent;
  ...
  public void setSelectedCapitals(List selected) {
    this.selectedCapitals = selected;
    serverEvent.fire(new CapitalsSelected(selected));
  }
}

CDI | Events

Event observer:

public class CapitalsObserver {

  public void observeClientEvent(
    @Observes @Client
    CapitalsSelected capitalsSelected) {
      ...
  }

  public void observeServerEvent(
    @Observes @Server
    CapitalsSelected capitalsSelected) {
      ...
  }
}

Server Sent Events