JarCastingzkfontawesome
What's Font Awesome?
ZK wrapper for Font Awesome glyphs.
Font Awesome is a project which grew out of Twitter's Bootstrap.
In the words of Font Awesome:
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
In a nutshell, Font Awesome is a custom font designed by Dave Gandy which replaces letters with icons commonly used across the web. Think Wingdings.. but useful. The current version of Font Awesome, v3.2.1, contains 361 icons ranging from check marks, to paper clips, to an ambulance, to the Facebook logo. The idea is to reduce the footprint of your site by replacing lots of images with a single font file as well as giving you much more control over the icons using CSS.
The purpose of this ZK add-on, then, is to give you familiar ZK client/server control over the Font Awesome icons. Let's get started..
Get Font Awesome
<dependency>
<groupId>org.zkoss</groupId>
<artifactId>zkfontawesome</artifactId>
<version>${zk.fontawesome.version}</version>
</dependency>
You can find the latest version on mvnrepository.
This will include all the CSS and font files you need and gives you access to the new ZUL and Java objects.
Be Awesome
You now have a new ZK component icon..
<icon type="fa-smile-o"/>
Supported Attributes
Font Awesome supports a number of ways to modify the icon further..
Size
Draw an icon larger than normal..
<icon type="fa-smile-o" size="large"/> <!-- 33% increase -->
<icon type="fa-smile-o" size="2x"/>
<icon type="fa-smile-o" size="3x"/>
<icon type="fa-smile-o" size="4x"/>
Border
Draws a border around the icon for emphasis..
<icon type="fa-smile-o" border="true"/>
Pull
Pull an icon to the left or right of surrounding text..
<icon type="fa-quote-left" pull="left"/>
<label value="That's what she said."/>
<icon type="fa-quote-right" pull="right"/>
Muting
An icon can be 'muted' to quickly make it lighter without needing to set a CSS color yourself..
<icon type="fa-smile-o" muted="true"/>
Java Support
Of course all of this can be done from the Java side also..
Icon quoteIcon = new Icon("fa-quote-left");
quoteIcon.setSize(IconSize.LARGE);
quoteIcon.setPull(IconPull.LEFT);
quoteIcon.setMuted(true);
quoteIcon.setBorder(true);
quoteIcon.setParent(window);
Cool huh?
Examples
These icons should behave much like any other component in ZK.
Links & Text
<vlayout>
<a href="http://fortawesome.github.io/Font-Awesome/">
<icon type="fa-angle-double-right"/>
<label value="Goto Font Awesome"/>
</a>
<vlayout>
ZK Events (Server Side)
<icon type="fa-hand-o-right">
<attribute name="onClick">
this.setType("fa-thumbs-up");
</attribute>
</icon>
ZK Events (Client Side)
<zk xmlns:c="client">
<icon type="fa-hand-o-right" c:onClick="this.setType('fa-thumbs-up')"/>
</zk>
CSS Styling
<zk>
<style>
.github-link {
color: #000;
}
.github-link:hover {
color: #4183C4;
}
</style>
<a sclass="github-link" href="http://fortawesome.github.io/Font-Awesome/icon/github/">
<icon type="fa-github" style="text-decoration:underline"/>
</a>
</zk>