Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Look up keyword
Like this
9Activity
0 of .
Results for:
No results containing your search query
P. 1
rc001-010d-gwt_style

rc001-010d-gwt_style

Ratings: (0)|Views: 332|Likes:
Published by Jon Edlund

More info:

Published by: Jon Edlund on Aug 22, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

05/11/2014

pdf

text

original

GWT
Style, Con\ue000iguration and JSNI Re\ue000erence
By Robert Hanson
CONTENTS INCLUDE:
n\ue000About Google Web
Toolkit (GWT)

n\ue000O\ue001\ue000cial GWT Web Sites
n\ue000Styling Widgets with CSS
n\ue000GWT Module Con\ue000guration
n\ue000JavaScript Native Inter\ue001ace
n\ue000Hot Tips and more...

DZone, Inc.|w w w. d z o n e . c o m
ABOUT GOOGLE WEB TOOLKIT (GWT)
STYLING WIDGETS WITH CSS

The Google Web Toolkit is a set o\ue001 tools \ue001or writing JavaScript applications in Java. The cornerstone o\ue001 the tool suite is a Java to JavaScript compiler that can not only compile Java down to JavaScript, but can also compress and optimize your code as well. GWT was released to the public in June o\ue001 2006 and has been an overwhelming success, boasting 1 million downloads in its \ue000rst year.

The bene\ue000t o\ue001 using GWT over some o\ue001 the other JavaScript
\ue001rameworks like JQuery or Ext-JS is the environment in which
you code. GWT allows a Java developer to use the same tools
they use today like Eclipse, Maven, and JUnit, making the
transition \ue001rom Java server-side development to GWT client-
side development nearly seamless.

The GWT toolkit comes ready with its own widget library,
internationalization tools, image bundling tools, tools \ue001or
client-server communication, and many others. Since its launch

GWT has become an open-source project, and although led by the GWT team at Google, many \ue001rom the community have contributed patches to the toolkit. GWT boasts a thriving

community, proving \ue001or a multitude o\ue001 \ue001ree widgets, integration
tools, and utilities.
This re\ue001erence card is a guide to everything that your IDE
can\u2019t already tell you. Speci\ue000cally, IDEs like Eclipse provide
auto-completion capabilities \ue001or perusing a list o\ue001 methods on
an object, and o\ue001ten they also provide support \ue001or viewing
javadocs in the IDE as well. This re\ue001card is meant to supplement

that capability by providing details that are only available in books and online documentation. Speci\ue000cally this includes a CSS style \ue001or the widgets that ship with GWT, a re\ue001erence \ue001or the JavaScript Native Inter\ue001ace, and a complete guide to the GWT module con\ue000guration \ue000le.

OFFICIAL GWT WEB SITES

WebSite:http://code.google.com/webtoolkit/
Blog:http://googlewebtoolkit.blogspot.com/
Forum:http://groups.google.com/group/Google-Web-Toolkit
Issue Tracker:http://code.google.com/webtoolkit/issues/
Articles:http://code.google.com/webtoolkit/articles.html
Examples:http://code.google.com/webtoolkit/examples/
Dev Guide:http://code.google.com/webtoolkit/documentation/

Styling widgets is done using Cascading Style Sheets (CSS). CSS can be applied to the widgets in the application three di\ue001\ue001erent ways.

Adding a style element inside the <head> o\ue001 the HTML page
that is hosting the application.
<style type=\u201dtext/css\u201d>
/* CSS style rules*/
</style>
Adding a <link> element to the <head> o\ue001 the HTML page,
re\ue001erencing an external CSS stylesheet.
<link type=\u201dtext/css\u201d rel=\u201dstylesheet\u201d
href=\u201durl-to-\ue000le.css\u201d />

Adding a <stylesheet> element to the GWT project\u2019s module
con\ue000guration, causing the stylesheet to be injected into the
host HTML page.

<stylesheet src=\u201durl-to-\ue000le.css\u201d/>
Most o\ue001 the widgets that come with GWT have been pre-assigned
CSS class names. For example, the Button widget uses the

CSS class name gwt-Button. So you could set the width o\ue001 all Button widgets in your application by using the \ue001ollowing CSS rule. In order to re\ue001erence a CSS class in a CSS rule you pre\ue000x the class name with a period \u201c.\u201d.

.gwt-Button {
width: 100px;
}
www.dzone.c
omGetMoreRe
\ue000cardz!visi
trefcardz.c
omGWT
Style,Con\ue000i
guration
andJSNIRe\ue000e
rence

nAuthoritative content
nDesigned for developers
nWritten by top experts
nLatest tools & technologies
nHot tips & examples
nBonus content online
nNew issue every 1-2 weeks

Subscribe Now \ue000or FREE!
Re\ue000cardz.com
GetM o r e Re\ue000cardz
(They\u2019re free!)
techfactsat
yourfingert
ips
t
echfactsaty
ourfingerti
ps
Element
Description
<descriptio
n>
Usedtodescr
ibeaSpringc
ontextorani
ndividualbe
an.
<import>
Importsanot
herSpringco
ntextdefnit
ion.
<descriptio
n>
Documentsth
ebean.Altho
ughignoredb
ythecontain
er,
<descriptio
n>canbeused
bytoolsthat
documentSpr
ing
contexts.
<lookup-met
hod>
Enablesgett
er-injectio
nbywayo\ue000met
hodreplacem
ent.
Specifesame
thodthatwil
lbeoverridd
entoreturna
specifcbean
.Commonlykn
ownasgetter
-injection.
<meta>
Allows\ue000orme
ta-confgura
tiono\ue000thebe
an.Onlyuse\ue000
ul
whentherear
ebeansconfg
uredthatint
erpretsanda
cts
onthemetain
\ue000ormation.
<property>
Injectsaval
ueorabeanre
\ue000erenceinto
aspecifcpro
perty
o\ue000thebean.C
ommonlyknow
nassetter-i
njection.
<replaced-m
ethod>Repla
cesamethodo
\ue000thebeanwit
hanewimplem
entation.
Element
Description
<alias>
Createsanal
ias\ue000orabean
defnition.
<bean>
Defnesabean
intheSpring
container.
<constructo
r-arg>
Injectsaval
ueorabeanre
\ue000erenceinto
anargumento
\ue000the
bean\u2019sconst
ructor.Comm
onlyknownas
constructor
injection.
Attri
bute
Description
abstract
I\ue000true,theb
eanisabstra
ctandwillno
tbeinstanti
atedby
theSpringco
ntainer.
autowire
Declareshow
andi\ue000abeans
houldbeauto
wired.Valid
valuesareby
Type,byName
,constructo
r,autodetec
t,or
no\ue000ornoauto
wiring.
autowire-ca
ndidate
I\ue000false,the
beanisnotac
andidate\ue000or
autowiringi
nto
anotherbean
.
class
The\ue000ully-qu
alifedclass
nameo\ue000thebe
an.
dependency-
check
Determinesh
owSpringsho
ulden\ue000orcep
ropertysett
ingonthe
bean.simple
indicatesth
atallprimit
ivetypeprop
ertiesshoul
d
beset;objec
tsindicates
thatallcomp
lextypeprop
erties
shouldbeset
.Othervalue
valuesarede
fault,none,
orall.
depends-on
Identifesab
eanthatshou
ldbeinstant
iatedbythe
containerbe
\ue000orethisbea
nisinstanti
ated.
#1
GWT Style, Con\ue000guration and JSNI Re\ue001erence
2
DZone, Inc.|w w w. d z o n e . c o m
STYLING WIDGETS WITH CSS,c o n t i n u e d
Altering Style Names
You can programmatically alter the CSS class name used on
a widget by calling any o\ue001 these methods.
widget.setStylePrimaryName(\u201cstyleName\u201d)

In HTML you may provide any number o\ue001 CSS class names on an element by separating them with spaces, like in the HTML snippet below.

<div class=\u201dstyle1 style2 style3\u201d></div>

The primary style name in GWT is de\ue000ned as the \ue000rst style
name in the class attribute. In the example provided, this
would be the style \u201cstyle1\u201d. Calling setStylePrimaryName()
allows you to alter this \ue000rst style.

widget.addStyleDependentName(\u201cstyleName\u201d)

When you add a dependent style name, its name in the HTML
is the primary name plus the depende nt name, separated
with a dash (\u201c-\u201c).

Example:
Button button = new Button();
button.setStylePrimaryName(\u201c\ue001oo\u201d);
button.addStyleDependentName(\u201cbar\u201d);
Result:
<BUTTON class=\u201dfoo foo-bar\u201d></BUTTON>
widget.setStyleName(\u201cstyleName\u201d)
Using setStylename() will clear all current style names, including
the primary style name, and adds the one provided.
widget.addStyleName(\u201cstyleName\u201d)
Adds an additional style name to any existing style names.
Example:
Button button = new Button();
button.setStyleName(\u201c\ue001oo\u201d);
button.addStyleName(\u201cbar\u201d);
Result:
<BUTTON class=\u201dfoo bar\u201d></BUTTON>
widget.removeStyleName(\u201cstyleName\u201d)
Allows you to remove an existing style name on a widget.
De\ue000ault GWT Widget Style Names
Most o\ue001 the widgets provided by the GWT library have
pre-de\ue000ned primary style names. The \ue001ollowing is a list o\ue001 the
de\ue001ault names \ue001or each widget.
tech facts at your fingertips
Widget
De\ue000ault Name
HorizontalSplitPanel
.gwt-HorizontalSplitPanel { the panel }
.gwt-HorizontalSplitPanel hsplitter { splitter }
HTML
.gwt-HTML { }
Hyperlink
.gwt-Hyperlink { }
Image
.gwt-Image { }
Note: Trans\ue000ormations between clipped and upclipped
will result in the loss o\ue000 any CSS style names that were
set or added.
Label
.gwt-Label { }
ListBox
.gwt-ListBox { }
MenuBar
.gwt-MenuBar { the menu bar itsel\ue001 }
.gwt-MenuBar .gwt-MenuItem { menu items }
.gwt-MenuBar .gwt-MenuItem-selected { selected
menu items }
PasswordTextBox

.gwt-PasswordTextBox { primary style }
.gwt-PasswordTextBox-readonly { dependent style
set when the password text box is read-only }

PushButton

.gwt-PushButton-up {}
.gwt-PushButton-down {}
.gwt-PushButton-up-hovering {}
.gwt-PushButton-down-hovering {}
.gwt-PushButton-up-disabled {}
.gwt-PushButton-down-disabled {}
<any o\ue001 the above> .html-\ue001ace {}

RadioButton
.gwt-RadioButton { }
RichTextArea
.gwt-RichTextArea { }
StackPanel

.gwt-StackPanel { the panel itsel\ue001 }
.gwt-StackPanel .gwt-StackPanelItem
{ unselected items }

.gwt-StackPanel .gwt-StackPanelItem-selected
{ selected items }
SuggestBox

.gwt-SuggestBox { the suggest box itsel\ue001 }
.gwt-SuggestBoxPopup { the suggestion popup }
.gwt-SuggestBoxPopup .item
{ an unselected suggestion }

.gwt-SuggestBoxPopup .item-selected
{ a selected suggestion }
TabBar
.gwt-TabBar { the tab bar itsel\ue001 }
.gwt-TabBar .gwt-TabBarFirst { the le\ue001t edge o\ue001 the bar }

.gwt-TabBar .gwt-TabBarRest
{ the right edge o\ue001 the bar }
.gwt-TabBar .gwt-TabBarItem { unselected tabs }
.gwt-TabBar .gwt-TabBarItem-selected
{ additional style \ue001or selected tabs }

TabPanel

.gwt-TabPanel { the tab panel itsel\ue001 }
.gwt-TabPanelBottom { the bottom section o\ue001 the
tab panel (the deck containing the widget) }

TextArea
.gwt-TextArea { primary style }
.gwt-TextArea-readonly
{ dependent style set when the text area is read-only }
TextBox
.gwt-TextBox { primary style }
.gwt-TextBox-readonly
{ dependent style set when the text box is read-only }
ToggleButton

.gwt- ToggleButton-up {}
.gwt- ToggleButton-down {}
.gwt- ToggleButton-up-hovering {}
.gwt- ToggleButton-down-hovering {}
.gwt- ToggleButton-up-disabled {}
.gwt- ToggleButton-down-disabled {}
<any o\ue001 the above> .html-\ue001ace {}

Tree

.gwt-Tree { the tree itsel\ue001 }
.gwt-Tree .gwt-TreeItem { a tree item }
.gwt-Tree .gwt-TreeItem-selected { a selected tree
item }

VerticalSplitPanel
.gwt-VerticalSplitPanel { the panel itsel\ue001 }
.gwt-VerticalSplitPanel vsplitter { the splitter }
Widget
De\ue000ault Name
Button
.gwt-Button { }
Checkbox
.gwt-CheckBox { }
DialogBox
.gwt-DialogBox { the box container }
.gwt-DialogBox .Caption { the box caption }
DisclosurePanel

.gwt-DisclosurePanel { primary style }
.gwt-DisclosurePanel-open { when open }
.gwt-DisclosurePanel-closed { when closed }
.header { the panel header area }
.content { the panel content area }

3
DZone, Inc.|w w w. d z o n e . c o m
Simple Module Confguration

A simple module con\ue000guration must inherit the User module
and speci\ue001y a single entry point. The entry point is the class that
implements the EntryPoint inter\ue001ace and acts as the starting
point \ue001or the application.

<module>
<inherits name=\u2019com.google.gwt.user.User\u2019 />
<entry-point
class=\u2019org.gwtsandbox.demo.client.Demo\u2019 />
</module>

From the basic module con\ue000guration you can build on it by
adding additional elements to inherit additional modules,
change the de\ue001ault source path, add servlet mappings, and
add de\ue001erred binding rules.

Inheriting Modules

I\ue001 your GWT project needs to re\ue001erence external GWT modules you must explicitly inherit them in your module con\ue000guration. The core GWT libraries are split into several modules, each o\ue001 which is listed here. You will always need to include the User module, and optionally one or more o\ue001 the others.

GWT widgets and core utilities
<inherits name=\u201dcom.google.gwt.user.User\u201d />
RequestBuilder and associated classes
<inherits name=\u201dcom.google.gwt.http.HTTP\u201d />
Internationalization tools and date/number \ue000ormatting
<inherits name=\u201dcom.google.gwt.i18n.I18N\u201d />
Tools \ue000or using RPC with JavaScript Object Notation
<inherits name=\u201dcom.google.gwt.json.JSON\u201d />
XML parser and associated classes
<inherits name=\u201dcom.google.gwt.xml.XML\u201d />
Source Path

The source path is a relative path name used to override the
de\ue001ault location o\ue001 the client-side Java source destined to
be compiled into JavaScript. The source path you speci\ue001y is
appended to the path where the module con\ue000guration \ue000le
resides, and you may speci\ue001y multiple source paths.

<source path=\u201dpath\u201d/>
By de\ue001ault the source path is \u201cclient\u201d. So by way o\ue001 example, i\ue001
your GWT module con\ue000guration \ue000le is located atcom.example.
MyApp.gwt.xml,then the de\ue001ault path o\ue001 \u201cclient\u201d will dictate that
your client-side Java source will be located in the Java package
com.example.client.*, as well as all packages below this one.

All source code in the source path(s) must be able to be
compiled to JavaScript with the GWT compiler. This implies
that only classes \ue001rom the JRE emulation library and GWT
user library be used. For example, you can not include Java
servlets or use the java.sql.* classes under this path.

Public Path

The public path is used to store non-Java \ue000les that need
to be included in the application. This includes HTML \ue000les,
JavaScript \ue000les, images, CSS, and anything else. By de\ue001ault
this will be the \u201cpublic\u201d directory below where the module
con\ue000guration is stored.

You can override the de\ue001ault by using the <public> tag in the
module con\ue000guration.
<public path=\u201dpath\u201d/>
You may speci\ue001y multiple public paths i\ue001 required \ue001or your project.
Defning GWT-RPC Servlets
You can use the <servlet> tag in the module con\ue000guration to
de\ue000ne your GWT-RPC servlets.
<servlet path=\u201d/path\u201d
class=\u201dorg.gwtsandbox.demo.server.Demo\u201d />
The path speci\ue000ed should be absolute.
Resource Injection

You can have external JavaScript and CSS \ue000les automatically
injected into the hosting web page. By injecting the resources
you avoid the need to have the hosting HTML page explicitly
include them with <link> and <script> tags. Resources loaded
in this way will be loaded prior to the executing o\ue001 the GWT
application.

<script src=\u201djs-url\u201d/>
<stylesheet src=\u201dcss-url\u201d/>

To inject a resource you can either place the JavaScript or CSS
\ue000le into the public package o\ue001 the GWT module (see above),
re\ue001erencing it with a relative path, or re\ue001erence an external CSS
\ue000le by using a \ue001ull URL.

GWT Style, Con\ue000guration and JSNI Re\ue001erence
Hot
Tip
These servlet mappings are \ue000or the beneft o\ue000
hosted-mode use only, and does not imply that
these mappings will be carried over to your
production environment. For that you would set
them up in the deployment descriptor, just as
you would with any other servlet.

A module in GWT is best described as a set o\ue001 classes that are
bound by a single module con\ue000guration \ue000le. The module con-
\ue000guration de\ue000nes what classes are a part o\ue001 the module, what
other modules that the module depends on, as well as rules \ue001or
de\ue001erred binding, resource injection, and everything else that
the GWT compiler and shell needs to know about your module.

A module con\ue000guration \ue000le is located in the GWT project, with
an extension o\ue001 \u201c.gwt.xml\u201d. The location on the classpath and the
module con\ue000guration \ue000le name determine the \ue001ull module name.

Module Name =
Java Package + Module File Name (-gwt.xml)
For example, i\ue001 you have a module con\ue000guration \ue000le named
Demo.gwt.xml, in the java package com.gwtsandbox.demo, the
module name would be com.gwtsandbox.demo.Demo.
GWT MODULE CONFIGURATION
Hot
Tip
The module confguration is only used at design
and compile-time, it is not used at run-time.Th i s
is a common mistake \ue000or new GWT developers.
tech facts at your fingertips

Activity (9)

You've already reviewed this. Edit your review.
1 thousand reads
1 hundred reads
Hossein Tahani liked this
sailu_ravi liked this
arkitekt888 liked this
nareshmca2020 liked this

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->