#138

Get More Refcardz! Visit refcardz.com

RichFaces 4.0
CONTENTS INCLUDE:
n
Introduction
n
Getting Started
Core JSF 2 Extensions
A Next Generation JSF Framework
n

n
Render Options
n
Queue
n
Client-Side Validation and more... By Nick Belaevski, Ilya Shailkovsky, Max Katz, and Jay Balunas

For other build systems such as Ant just add the following jars to
INTRODUCTION your projects WEB-INF/lib directory: richfaces-core-api-<ver>.jar,
richfaces-core-impl-<ver>.jar, richfaces-components-api-<ver>.jar,
RichFaces 4.0 is an advanced JSF 2.0 based framework that richfaces-components-ui-<ver>.jar, sac-1.3.jar, cssparser-0.9.5.jar,
provides a complete range of rich Ajax enabled UI components, and google-guava-r08.jar.
as well as other features such as a component development kit,
dynamic resource support, and skinning. The 4.0 version brings
complete JSF 2.0 support to the project. Hot No filters or other updates to your web.xml are
Tip needed to install RichFaces 4.0.
RichFaces is made up of two component tag libraries. “a4j:”
represents core Ajax functionality, and page wide controls. Page Setup
While the “rich:” component set represent self contained and To use RichFaces components in your views add:
advanced UI components such as calendars, and trees.
xmlns:a4j=”http://richfaces.org/a4j”
JavaServer Faces 2.0 xmlns:rich=”http://richfaces.org/rich”

The second version of JSF added many features such as, core
Ajax functionality, integrated Facelets support, annotations,
view parameters, and more. RichFaces 4.0 has been specifically
redesigned to not only work with these new features, but to
extend them.
Hot JSF 2.0 is covered in detail in the DZone JavaServer
Tip Faces 2.0 Refcard.
RichFaces 4.0: A Next Generation JSF Framework
Maven Archetypes
The project also contains several Maven archetypes to
quickly create projects (including one for Google App Engine
targeted project).
Simple project generation:
mvn archetype:generate
-DarchetypeGroupId=org.richfaces.archetypes
-DarchetypeArtifactId=richfaces-archetype-simpleapp
-DarchetypeVersion=<version> -DgroupId=<yourGroupId>
-DartifactId=<yourArtifactId> -Dversion=<yourVersion>

GETTING STARTED From the generated project directory you can build, and deploy
as with any Maven project.
RichFaces can be used in any container that JSF 2.0 is
compatible with. This means all servers compliant with the EE6 Hot Easily import in JBoss Tools using m2eclipse
specification ( JBoss AS6/7, Glassfish 3 ) and all major servlet Tip http://jboss.org/tools.
containers (Tomcat, Jetty).

Hot Check the RichFaces project page for the latest CORE JSF 2 EXTENSIONS
Tip information and downloads: http://richfaces.org
a4j:ajax
Installing RichFaces Upgrades the standard f:ajax tag/behavior with more features.
Since RichFaces is build on top of JSF 2.0 its installation is as
easy as adding a few jars to your project.
For Maven-based projects configure your repositories following
the Maven Getting Started Guide here:
http://community.jboss.org/wiki/MavenGettingStarted-Users
Then simply add the following to you projects pom.xml.
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.richfaces</groupId>
<artifactId>richfaces-bom</artifactId>
<version>${richfaces.version}</version>
<scope>import</scope>
<type>pom</type>
</dependency>
</dependencies>
</dependencyManagement>
…
<dependency>
<groupId>org.richfaces.ui</groupId>
<artifactId>richfaces-components-ui</artifactId>
</dependency>
<dependency>
<groupId>org.richfaces.core</groupId>
<artifactId>richfaces-core-impl</artifactId>
</dependency>

DZone, Inc. | www.dzone.com

 2 RichFaces 4.0: A Next Generation JSF Framework

<h:inputText value=”#{bean.input}”> <a4j:status name=”ajaxStatus”>

<a4j:ajax execute=”#{bean.process}” render=”#{bean.update}”/> <f:facet name=”start”>
</h:inputText> <h:graphicImage value=”/ajax.gif” />
<h:panelGrid id=”list1”>...</h:panelGrid> </f:facet>
</a4j:status>
<a4j:commandButton value=”Save” status=”ajaxStatus”/>
Execute & Render EL Resolution
JSF 2.0 determines the values for execute and render attributes All RichFaces controls which fire an Ajax request have status
when the current view is rendered. In the example above if attribute available.
#{bean.update} changes on the server the older value will be
a4j:repeat
used. RichFaces processes attribute values on the server side so
Works just like ui:repeat but also supports partial table update
you will always be using the most current value.
(see Data Iteration):
Addition Common Enhancements
<ul>
All RichFaces components that fire Ajax requests share the <a4j:repeat value=”#{bean.list}” var=”city”>
features above, and all of the ones from below: <li>#{city.name}</li>
</a4j:repeat>
</ul>
Attribute Description
limitRender Turns off all auto-rendered panels (see Render Options section).
a4j:push
“Push” server-side events to client using Comet or WebSockets.
bypassUpdates When set to true, skips Update Model and Invoke Application phases.
Useful for form validation requests. This is implemented using Atmosphere (http://atmosphere.
onbegin JavaScript code to be invoked before Ajax request is sent.
java.net), and uses JMS for message processing (such as JBoss’s
HornetQ - http://www.jboss.org/hornetq). This provides excellent
onbeforedomupdate JavaScript code to be invoked after response is received but before
Ajax updates happen. integration with EE containers, and advanced messaging services.
oncomplete JavaScript code to be invoked after Ajax request processing is The <a4j:push> tag allows you to define named topics for
complete.
messages delivery and actions to perform:
status Name of status component to show during Ajax request.
<a4j:push address=”topic@chat”
a4j:commandButton, a4j:commandLink ondataavailable=”alert(event.rf.data)” />

Similar to standard h:commandButton and h:commandLink tags Server side messages are published and topics are created/
but with Ajax behavior built-in. configured using a class similar to this:
<a4j:commandButton value=”Add” @PostConstruct
action=”#{bean.add}” render=”cities”/> public void init() {
<h:panelGrid id=”cities”>...</h:panelGrid> topicsContext = TopicsContext.lookup();
}
private void say(String message) throws
MessageException {
Hot TopicKey key = new TopicKey(“chat”,”topic”);
Default execute value for both controls is @form. topicsContext.publish(key, message);
Tip }
private void onStart() {
topicsContext.getOrCreateTopic(new
TopicKey(“chat”));
a4j:poll }

Periodically fires an Ajax request based on polling interval For more details on usage and setup, including examples please
defined via interval attribute and can be enabled/disabled via see the RichFaces Component Guide (http://docs.jboss.org/
enabled attribute (true|false). For example, in the following code richfaces/latest_4_0_X/Component_Reference/en-US/html/).
snippet, an Ajax request will be sent every 2 seconds and render
the time component: a4j:param
Works like <f:param> also allows client side parameters and will
<a4j:poll interval=”2000” enabled=”#{bean.active}”
action=”#{bean.count}” render=”time”/>
assign a value automatically to a bean property set in assignTo :
<h:outputText id=”time” value=”#{bean.time}”/>
<a4j:commandButton value=”Select”>
<a4j:param value=”#{rowIndex}”
a4j:jsFunction assignTo=”#{bean.row}”/>
</a4j:commandButton>
Allows the sending of an Ajax request from any JavaScript function.
<a4j:jsFunction name=”setdrink” render=”drink”>
a4j:log
<a4j:param name=”param1” assignTo=”#{bean.drink}”/> Client-side Ajax log and debugging.
</a4j:jsFunction>
...
<td onmouseover=”setdrink(‘Espresso’)” <a4j:log/>
onmouseout=”setdrink(‘’)”>Espresso</td>
<h:outputText id=”drink” value=”I like #{bean.drink}” />

When the mouse hovers or leaves a drink, the setdrink()

JavaScript function is called. The function is defined by an
a4j:jsFunction tag which sets up standard Ajax call. You can also
invoke an action. The drink parameter is passed to the server via
a4j:param tag.
a4j:region
a4j:status Provides declarative definition of components to be executed
Displays Ajax request status. The component can display during Ajax request instead of using component ids. The
content based on Ajax start, stop, and error conditions. Status following example wouldn’t work without a4j:region as no
can be defined in the following three ways: status per view, status execute ids are defined on the a4j:poll which defaults to
per form and named statuses. The following example shows execute=”@this”:
named status:

DZone, Inc. | www.dzone.com

 3 RichFaces 4.0: A Next Generation JSF Framework

<a4j:region> <context-param>
<a4j:poll interval=”10000”/> <param-name>
<h:inputText value=”#{bean.name}”/> org.richfaces.queue.enabled</param-name>
<h:inputText value=”#{bean.email}”/> <param-value>true</param-value>
</a4j:region> </context-param>

If components are wrapped inside a4j:region without execute id View level

defined, then the default value is execute=”@region”. You can Placed outside any form. All Ajax control on the view will use
also explicitly set execute=”@region”. this queue:

RENDER OPTIONS <a4j:queue/>

<h:form>...</h:form>

In addition to supporting the standard render attribute in all Form-level

controls which fire an Ajax request, RichFaces provides a number Queue definition is placed inside a form. All controls inside the
of advanced rendering options. form will use this queue:

a4j:outputPanel <h:form>
<a4j:queue/>
<a4j:outputPanel ajaxRendered=”true”> is an auto-rendered </h:form>

panel. All child components within a4j:outputPanel will be

Queue Attributes
rendered on any Ajax request. There is no need to point to the
panel via the render attribute. Attribute Description
requestDelay Will delay sending the request by that number of millisecond.
<a4j:outputPanel ajaxRendered=”true”> <a4j:queue requestDelay=”3000”/>
<h:outputText />
<h:dataTable>...</h:dataTable> Used to “wait” to combine requests from the same request group
<a4j:outputPanel>
requestGroupingId Combines two or more controls into the same request group.
In example above, all components within a4j:outputPanel will be Requests from this group are treated as if coming from the same
“logical” component.
always rendered. Note that ajaxRendered must be set to true. <a4j:attachQueue requestGroupingId=”grp1”/>

Limiting Rendering
To limit rendering to only components set in current render
list, set limitRender=”true”. In the following example, only
components c1 and c2 will be rendered (a4j:outputPanel update
is turned off):
ignoreDupResponses Response processing for requests will not occur if a similar request is
already waiting in the queue, saving the client side processing.
There are two ways to set queue options. Directly on
a4j:queue tag:
<a4j:queue name=”ajaxQueue” requestDelay=”3000”/>

<a4j:commandLink render=”c1, c2” limitRender=”true”/>

<h:outputText id=”c1”/> Or attaching a4j:attachQueue behavior to Ajax components:
<h:panelGrid id=”c2”></h:panelGrid>
<a4j:outputPanel ajaxRendered=”true”>
<h:dataTable>...</h:dataTable> <a4j:queue/>
</a4j:outputPanel> <a4j:commandButton>
<a4j:attachQueue requestDelay=”3000”
requestGroupingId=”ajaxGroup”>
limitRender=true turns off all auto-rendered containers </a4j:commandButton>

(a4j:outputPanel, rich:message(s)).
CLIENT-SIDE VALIDATION
QUEUE

Bean Validation
JSF 2 provides a basic client request queue out-of the box.
Bean Validation (JSR-303) provides a tier agnostic approach to
RichFaces extends the standard JSF queue, and provides
define constraints on model objects. Every tier must then validate
additional features to improve usability.
those constraints. There are a set of built in constraints, defined
The RichFaces queue is defined via the a4j:queue tag. Queues by the Bean Validation specification. JSF 2.0 has built in Bean
can be named or unnamed as described below. Validation support, but only with server side validation.
Named Queue rich:validator
Named queues are given a name and will only be used by RichFaces 4.0 provides true client side validation that
components which reference them directly: seamlessly integrates into JSF 2.0 Bean Validation support.
There is an Ajax server side fallback mechanism if client side
<a4j:queue name=”ajaxQueue”>
<h:form> validation is not possible.
<a4j:commandButton>
<a4j:attachQueue name=”ajaxQueue”/>
</a4j:commandButton> Object constrained using Bean Validation
</h:form>
public class Foo{
Unnamed Queue ...
@NotNull
Unnamed queues are used to avoid having to reference named @Pattern(regexp=”^\d{5}(-\d{4})?$”)
private String zipcode;
queues for every component and come with the following ...
}
scopes: global, view, form.
Global level Client side validation on a specific field
Global queue is available on all the views and defined in <h:inputText id=”input” value=”#{foo.zipcode}>
web.xml file: <rich:validator event=”keyup”>
</h:inputText>
<rich:message for=”input” ..../>

DZone, Inc. | www.dzone.com

 4 RichFaces 4.0: A Next Generation JSF Framework

tabPanel, accordion, Complex switchable panels.

togglePanel
Hot rich:message is required for client-side
Various status/message/ indication components.
tooltip, progressBar, message,
Tip message updates. messages

Data Iteration
The client side versions of constraints, converters, and messages
must be implemented for this to work. All standard bean
validation constraints are supported.

Hot Additional constraints and features will be added in

Tip the future.
Component Description
Object Validation dataTable Customizable table with collapsible master-detail layouts, with sorting,
filtering, partial Ajax updates.
Validate complete objects allowing for complex validation such as
extendedDataTable Additional features of: ajax scrolling, frozen columns, rows selection,
cross-field validation before the model gets updated (i.e. in the columns re-adjustment and switching visibility.
validation phase). Supports bean validation, but does not support
list Allows dynamic rendering of any kind of HTML lists.
client side validations at this time.
dataGrid panelGrid analog with dynamic models support

New password validation dataScroller paging support for any iteration component

<rich:graphValidator “value=”#{passwordBean}”> Child components: column, columnGroup, collapsibleSubTable.

<h:inputText “value=”#{passwordBean.password}” />
<h:inputText “value=”#{passwordBean.retypePassword}” />
</rich:graphValidator> Trees

PasswordBean Implementation
public class PasswordBean implements Cloneable {

@Size(min=6) @GoodPassword
private String password ;

@Size(min=6)
private String retypePassword ; Component Description
@AssertTrue(message=”Passwords do not match”) tree Rendering of hierarchical data in a tree control. Built in
public boolean match(){
return password.equals(retypePassword); selection and nodes lazy loading.
}}
treeNode Defines representation for a node of a concrete type.
The password bean is cloned, updated, and validated all in the treeModelAdaptor, Declarative definition of tree data model from various
validation phase, allowing only clean data to move to the update treeModelRecursiveAdaptor data structures.

model phase.
Menus
RICH:* TAGS

Inputs and Selects:

Component Description
panelMenu Vertical page menu.

dropDownMenu Drop-down menu for popup menus creation.

Component Description toolbar Laying out drop-down menus or just menu items.
inplaceInput,inplaceSelect Inplace editing components.
Child component for content definition: panelMenuItem, panelMenuGroup,
inputNumberSpinner, UI controls for numerical input. menuItem, menuGroup, menuSeparator, toolbarGroup.
inputNumberSlider

autocomplete Input component with live suggestions. Drag and Drop

select Advanced select control. Provides skinning and direct Component Description
typing feature.
dragSource Add dragging capabilities to the parent component.
calendar Advanced Date and Time input with various customization
options. dropTarget Marks parent component as target for Ajax drop processing.

fileUpload Asynchronous multiple files upload control. dragIndicator Visualization for dragged element.

Output Misc
Component Description
jQuery Declarative jQuery calls definitions.

componentControl Calling any RichFaces component client-side API.

Component Description
CLIENT FUNCTIONS
panel, popupPanel, Simple panels with header. Expansion, collapse, modal and
collapsiblePanel non modal popups.
RichFaces provides a number of client-side functions which make
it easy to access elements in the browser.

DZone, Inc. | www.dzone.com

 5 RichFaces 4.0: A Next Generation JSF Framework

Function Description/Example .rf-pnl {

color:’#{richSkin.panelBorderColor}’;
rich:clientId(‘id’) Returns client id. }
#{rich:client(‘id’)} returns form:id
1) Same CSS under the hood
rich:element(‘id’) Shortcut for
document.getElementById(#{rich:clientId(‘id’)}) 2) Dynamic properties using EL expressions

rich:component(‘id’) Used to invoke client-side component JavaScript API. Out-of-the-box Skins

rich:findComponent(‘id’) Returns an instance of UIComponent taking the Richfaces provides various skins out of the box:
component id.
<h:inputText id=”in”> blueSky, classic, deepMarine, emeraldTown, japanCherry, plain,
<a4j:ajax />
</h:inputText> ruby, wine.
<a4j:outputPanel
ajaxRendered=”true”> Application Skin Parameter Definition
#{rich:findComponent(‘in’) .value}
</a4j:outputPanel> To have the ability to change skin at runtime use a context
rich:isUserInRole(‘role’) Returns true or false whether current user is in specified role.
parameter in the web.xml:
<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>#{skinBean.skin}</param-value>
RICH COMPONENTS JS API </context-param>

The param-value from listing below could be just static string

Using rich:component(‘id’) name. (e.g. bluesky).
Many rich components come with client-side JavaScript API.
Skinning Standard Components and Elements
To use the API, get a reference to the client JavaScript object
With org.richfaces.enableControlSkinning context parameter set
and invoke the available methods. Full description of each
to true all the standard and third-party components will become
component API can be found in RichFaces Component Guide1.
skinned.
In the following example, show() and hide() method are used to
show/hide panel: Usage of Skin Parameters on the Page
You could use implicit richSkin object in order to access skin
<h:outputLink onclick=”#{rich:component(‘pnl’)}.show();”>
Open parameters on the pages:
</h:outputLink>
<rich:popupPanel id=”pnl”>
<h:outputLink onclick=”#{rich:component(‘pnl’)}.hide();”> <h:button style=”background-color:’#{richSkin.tableBackgroundColor}’” .../>
Hide
</h:outputLink>
</rich:popupPanel>
The Same as CSS
It is the same as for usuall CSS:
Using rich:componentControl <h:outputStylesheet name=”panel.ecss”/>
An alternative and more declarative approach to call JavaScript
API is to use rich:componentControl: or
@ResourceDependency(name = “panel.ecss”)
<h:outputLink value=”#”>
<h:outputText value=”Open” />
<rich:componentControl operation=”show” Skinning using Static Resources
target=”pnl” event=”click”/>
</h:outputLink> Finally you are able to serve our dynamic skins in a static way
<rich:popupPanel id=”pnl”>
<h:outputLink value=”#”>
(E.g. using CDN):
<h:outputText value=”Close” />
<rich:componentControl event=”click” 1) Add org.richfaces.cdk:maven-resources-plugin to build.
target=”pnl” operation=”hide”/>
</h:outputLink>
</rich:popupPanel> 2) Configure it. You should define directory which should be
used to store generated recourses, skin names which should
be processed, resources types to be included and so on…
SKINNING
Refer to RichFaces GAE archetype or richfaces-showcase
pom.xml files for getting complete code.
3) Define static resources location via org.richfaces.
staticResourceLocation context parameter using implicit
resourceLocation variable in web.xml

COMPONENT DEVELOPMENT KIT

Basic Architecture RichFaces CDK has been developed to boost productivity by

The same three-level hierarchy that is used for RF 3.3.X is used here: providing easy-to-use environment for simplifying common
Skin parameters: configure an application-wide look and feel using dozens of components development tasks. Main features are:
parameters.
• Very easy creation and maintenance of classes such as component,
rf-* classes: added to all the components to provide a default look and feel converter, validator, etc.
based on parameters. To be used for redefinitions.
• Generation of renderer classes from files with VDL-like syntax.
*Class: attributes on components.
• Easy-to-use annotation—or XML-based configuration following
New ECSS File Formats Convention-over-Configuration principles.
Components use new *.ecss format of stylesheets: • Generation of XML configuration files.

1. richfaces/latest_4_0_X/Component_Reference/en-US/html/

DZone, Inc. | www.dzone.com

 6 RichFaces 4.0: A Next Generation JSF Framework

Now you can run mvn install as usually to build application and
GOOGLE APPLICATION ENGINE SUPPORT use mvn gae:deploy for deployment.

Google Application Engine deployments require specific changes Deployment Requirements

to be done at the application level mostly because of GAE’s Exploring the application generated by the archetype is the
restrictions and issues related to JSF deployment. easiest way to check settings which are required to be done for
deployment. It includes:
Archetype Usage • static resources for skins has to be used as GAE not allows Java2D usage
RichFaces provides a special archetype to generate an (see skinning section for details)
application skeleton for GAE deployments: • GAE-specific web.xml settings added
mvn archetype:generate -DarchetypeGroupId=org.richfaces.archetypes
-DarchetypeArtifactId=richfaces-archetype-gae -DarchetypeVersion=<archetyp
eVersion>
-DgroupId=<yourGroupId> -DartifactId=<yourArtifactId> -Dversion=1.0-
SNAPSHOT

ABOUT THE AUTHOR RECOMMENDED BOOK

RichFaces 4.0 is an advanced JSF 2.0 based framework that
provides a complete range of rich Ajax enabled UI components,
as well as other features such as a component development kit,
dynamic resource support, and skinning. The 4.0 version brings
complete JSF 2.0 support to the project.

Practical RichFaces 4 describes how the new RichFaces 4

Nick Belaevski upgrades and extends JSF 2 with new features, advanced
Publications: DZone Richfaces 3 Refcard co-author functionality and customization. Learn how to use a4j:* tags,
Projects: RichFaces, JBoss Tools rich:* tags, component JavaScript API, skins, and client-side
validation. Assuming some JSF background, it shows you how
Ilya Shaikovsky you can radically reduce programming time and effort to create
Publications: DZone RichFaces 3 Refcard co-author rich enterprise Ajax based applications.
Blog: h
 ttp://jroller.com/a4j, http://in.relation.to/Bloggers/Ilya
Twitter: http://twitter.com/ilya_shaikovsky In this definitive RichFaces 4 book, the authors bases all
examples on Maven so that any IDE can be used—whether it’s
Jay Balunas
NetBeans, Eclipse, IntelliJ or JBoss Tools.
Publications: DZone RichFaces 3 Refcard co-author
Projects: RichFaces, Seam, Weld, and TattleTale
Blog: http://in.relation.to/Bloggers/Jay
Twitter: http://twitter.com/tech4j
BUY NOW
http://www.apress.com/book/view/9781430234494
Max Katz
Publications: DZone, TheServerSide, Practical RichFaces (Apress),
DZone RichFaces 3 Refcard co-author
Projects: Flamingo, jsf4birt, Fiji, JavaFX plug-in for Eclipse on exadel.org,
Interactive HTML prototypes: http://gotiggr.com
Blog: http://mkblog.exadel.com
Twitter: http://twitter.com/maxkatz

#82

Browse our collection of over 100 Free Cheat Sheets

Get More Refcardz! Visit refcardz.com

CONTENTS INCLUDE:
■

■
About Cloud Computing
Usage Scenarios Getting Started with

Aldon Cloud#64Computing
■
Underlying Concepts
Cost
by...
■

Upcoming Refcardz
youTechnologies ®
■
Data
t toTier
brough Comply.
borate.
Platform Management and more...
■

Chan
ge. Colla By Daniel Rubio

on:
dz. com

grati s
also minimizes the need to make design changes to support
CON
ABOUT CLOUD COMPUTING one time events. TEN TS
INC

s Inte -Patternvall
■
HTML LUD E:
Basics
Automated growthHTM
ref car

Web applications have always been deployed on servers & scalable

L vs XHT technologies

nuou d AntiBy Paul M. Du

■
Valid
ation one time events, cloud ML
connected to what is now deemed the ‘cloud’. Having the capability to support

Continuous Delivery
Usef

ContiPatterns an
■

computing platforms alsoulfacilitate

Open the gradual growth curves
Page ■
Source
Vis it

However, the demands and technology used on such servers faced by web applications.Structure Tools

Core
Key ■

Structur Elem
E: has changed substantially in recent years, especially with al Elem ents
INC LUD gration the entrance of service providers like Amazon, Google and Large scale growth scenarios involvingents
specialized
NTS and mor equipment
rdz !

ous Inte Change

HTML
CO NTE Microsoft. es e... away by
(e.g. load balancers and clusters) are all but abstracted
Continu at Every e chang
About ns to isolat
relying on a cloud computing platform’s technology.
Software i-patter
space

CSS3
■
n
Re fca

e Work
Build
riptio
and Ant These companies Desc have a Privat
are in long deployed trol repos
itory
webmana applications
ge HTM
L BAS
■

Patterns Control lop softw n-con to

■
that adapt and scale
Deve
les toto large user
a versio ing and making them
bases, In addition, several cloud computing ICSplatforms support data
ment ize merg
rn
Version e... Patte it all fi minim le HTM
Manage s and mor e Work knowledgeable in amany ine to
mainl aspects related tos multip
cloud computing. tier technologies that Lexceed the precedent set by Relational
space Comm and XHT
■

Build
re

Privat lop on that utilize HTML MLReduce,

Practice Database Systems (RDBMS): is usedMap are web service APIs,
■
Deve code lines a system
Build as thescalethe By An
sitory of work prog foundati
Ge t Mo

Repo
This Refcard active
will introduce are within
to you to cloud riente computing, with an
ION d units etc. Some platforms ram support large grapRDBMS deployments.
■
The src
dy Ha
softw
EGRAT ware
Mainl
ine
emphasis onDeve
loping
es by
task-o it and Java s written in hical on of
all attribute
S INT soft these ines providers, so youComm can better understand
also rece JavaScri user interfac web develop and the rris

NoSQL
codel chang desc
INUOU ding Task Level as the
e code
www.dzone.com

of buil control what it is a cloudnize

line Policy sourc es as aplatform
computing can offer your ut web output ive data pt. Server-s e in clien ment. the ima alt attribute ribes whe
T CONT cess ion Code Orga it chang e witho likew mec ide lang t-side ge is describe re the ima
ABOU the pro vers applications. subm e name sourc CLOUD COMPUTING ise hanism. fromAND
PLATFORMS web unavaila
ject’s with uniqu
and are from
was onc use HTML The eme pages and uages like ge file
it
(CI) is Nested s alte
rd z!

evel Comm softw ble.

to a pro
the build um rnate can be
tion Task-L Label ies to
build minim UNDERLYING CONCEPTS
e and XHT use HTM PHP tags text that
ous Integra mitted a pro
blem ate all
activit
ion cies to
the bare standard a very loos ML as
rging
Ajax Tags
can is disp
found,
com to USAGE SCENARIOS gurat t
ization, ely-defi thei tech L
Continu ry change cannot be (and freq
Autom nden ymen layed
tion al confi
ned lang r visual eng nologies
Re fca

Build depe need

a solu ineffective
deplo t
Label manu d tool the same for stan but as if
(i.e., ) nmen overlap
eve , Build stalle
t, use target enviro Amazon EC2: Industry standard it has
software and uag
virtualization ine. HTM uen
with terns ns (i.e.
blem ated ce pre-in whether dards e with b></ , so <a>< tly are) nest
lar pro that has bec become
Autom Redu ymen a> is
ory. via pat d deploEAR) in each L

Spring Roo
reposit -patter particu s cies Pay only what you consume
tagge or Amazon’s cloud
the curr you
computing cho platform isome heavily basedmoron very little fi ne. b></ ed insid
lained ) and anti x” the are solution duce
nden For each (e.g. WAR es t
ent stan ose to writ more e imp a></ e
not lega each othe
b> is
be exp text to “fi
al Depeapplication deployment
Web ge until
nden a few years
t librari agonmen
t enviro was similar that will software
industry standard and virtualization app
e HTM technology.
ortant,
tterns to pro Minim packa
dard
Mo re

CI can ticular con used can rity all depe all targe
s will L or XHT arent. Reg the HTM l, but r. Tags
es
s. Ant
i-pa
, they
tend but to most
y Integ phone services: alizeplans with le that
fialloted resources, ts with an and XHT simplify all help ardless L VS <a><
etim ctices, XHTM
late
in a par hes som
Binar Centr temp your you prov ML, b></
proces in the end bad pra enting
nt nmen
incurred cost
geme whether e a single based on
Creatsuchareresources were consumed
t enviro orthenot. Virtualization
muchallows MLaare physical othe
piece ofr hardware to be understand of HTML L
approac ed with the cial, but, implem
cy Mana nt targe es to actually web cod ide a solid
essarily of the ing has
nden rties
d to Depe prope into differe chang
utilized by multiple operating simplerThis allows
function systems. ing.resourcesfoundati job adm been arou
ciat efi nec pare er itting
Ge t

builds
asso ben are not
Verifi te e comm commo than
ality be allocated Fortuna on nd for
to be n com expecte irably, that
late
Cloud computing asRun it’sremo
known etoday beforhas changed this.
They they
etc.
(e.g. bandwidth, elem CPU) tohas
nmemory, exclusively totely
Temp
job has some time
Build
lts whe
ually,
appear effects. rm a
Privat y, contin nt team Every mov
entsinstances. ed to CSS
used
to be, HTML d. Earl
ed resu gration
The various resourcesPerfo consumed by webperio applications
dicall (e.g.
opme pag
individual operating system because Brow
ser man y HTML expand . Whi
adverse unintend d Builds sitory Build r to devel common e (HTML . le it has
ous Inte ed far
Stage Repo
e bandwidth, memory, CPU) areIntegtallied
ration on a per-unit CI serve basis or XHT web dev ufac had very done
produc Continu Refcard
e Build rm an ack from extensio .) All are elopers turers add
more
e.com

ML shar limit its

tern. Privat
(starting from zero) by Perfo all majorated cloud
feedb computing platforms. on As a user of Amazon’s
n. HTM EC2 essecloud
ntiallycomputing platform, you are
es cert result ed man ed layout
than
anybody
the pat the term” cycle, this
occur came
tion as autom as they based proc is
gra of suc h Build Send builds
assigned esso
an operating L system
files shouin theplai
same wayain elem
as on allents
hosting The late a lack of stan up with clev y competi
supp
ous Inte tional use and test concepts
soon n text ort.
ration ors as ion with r
Integ entat
ld not in st web dar er wor ng stan
Continu conven ild docum
dar
the “bu to include be cr standar kar
oper
ile the to rate devel
Wh s efer of CI Gene
ion
Cloud Computing

the not
s on

DZone, Inc.
expand

140 Preston Executive Dr.

Suite 100
Cary, NC 27513
DZone communities deliver over 6 million pages each month to 888.678.0399
more than 3.3 million software developers, architects and decision 919.678.0300
makers. DZone offers something for everyone, including news,
Refcardz Feedback Welcome
$7.95

tutorials, cheat sheets, blogs, feature articles, source code and more.
refcardz@dzone.com
“DZone is a developer’s dream,” says PC Magazine.
Sponsorship Opportunities
Copyright © 2010 DZone, Inc. All rights reserved. No part of this publication may be reproduced, stored in a
retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, sales@dzone.com Version 1.0
without prior written permission of the publisher.