Writing Icefaces components – part 1

I work for icesoft on the component team, and I am just about to write a new component for a company that sells hand wheels and a lot of other industrial kits, and I thought I would
walk you through the process.

The Slider Control Part 1

I’m going to be implementing script.aclo.us slider control in icefaces.

Looking at the slider example in the script.aclo.us download I see that it requires the following HTML.

So the first step will be to create a new component that will render that HTML.

So fire up your editor of choice and lets get started.

The component class

Silder.java defines the properties or model of this component. This is where you could put things
like style and styleClass for example. But for now its going to be blank. I just want to get the framework in
place first.

Slider.java

package com.icesoft.faces.component.slider;

import javax.faces.component.UIInput;

public class Slider extends UIInput {

public static final String COMPONENET_TYPE = "com.icesoft.faces.Slider";
public static final String DEFAULT_RENDERER_TYPE = "com.icesoft.faces.SliderRenderer";
public static final String COMPONENT_FAMILY = "com.icesoft.faces.SliderFamily";

public Slider() {
super();
}

public String getFamily() {
return COMPONENT_FAMILY;
}

public String getRendererType() {
return DEFAULT_RENDERER_TYPE;
}

}

Again this is just a skeleton to get started.

Up next. The renderer. Where all the magic happens. Again like the first step we are just getting started
so all I’m going to do is output the HTML show above.

SliderRenderer.java

package com.icesoft.faces.component.slider;

import com.icesoft.faces.renderkit.dom_html_basic.DomBasicRenderer;
import com.icesoft.faces.renderkit.dom_html_basic.HTML;
import com.icesoft.faces.context.DOMContext;

import javax.faces.context.FacesContext;
import javax.faces.component.UIComponent;

import org.w3c.dom.Element;

public class SliderRenderer extends DomBasicRenderer {

public void encodeEnd(FacesContext facesContext, UIComponent uiComponent) {
DOMContext domContext = DOMContext.attachDOMContext(facesContext, uiComponent);
if (!domContext.isInitialized()) {
Element root = domContext.createRootElement(HTML.DIV_ELEM);
root.setAttribute(HTML.STYLE_ATTR,"width:200px;background-color:#aaa;height:5px;");
Element slider = domContext.createElement(HTML.DIV_ELEM);
slider.setAttribute(HTML.STYLE_ATTR,"width:5px;height:10px;background-color:#f00;");
root.appendChild(slider);
}
}
}

Now we need a tag for out JSP. Since we don’t have any attributes just yet its going to be simple.

SliderTag.java

package com.icesoft.faces.component.slider;

import javax.faces.webapp.UIComponentTag;

public class SliderTag extends UIComponentTag {

public String getComponentType() {
return Slider.COMPONENET_TYPE;
}

public String getRendererType() {
return Slider.DEFAULT_RENDERER_TYPE;
}
}


Adding to faces-config.xml

We need to tell icefaces about this new component. Add the following to the faces-config.xml.



com.icesoft.faces.SliderFamily
com.icesoft.faces.SliderRenderer
com.icesoft.faces.component.slider.SliderRenderer


com.icesoft.faces.Slider
com.icesoft.faces.component.slider.Slider


Creating a TLD

This part here is a bit strange. You need to create a tld file, Then you need to put the tld file in a jar. and
include it inĀ  your web application lib directory.

0.03
1.2
slider
http://icesoft.com/slider

Slider


slider
com.icesoft.faces.component.slider.SliderTag
JSP
Slider Tag



There you go! Step 1 is complete.

This entry was posted in Icefaces. Bookmark the permalink.

4 Responses to Writing Icefaces components – part 1

  1. DayWalker says:

    Hello Rob,

    nice tutorial, but where is the second part?

    Greetings

  2. michelle says:

    Hello Rob

    Why did you give up on this???

    We;ve started a tutorial you might be interested in.

  3. sayali says:

    Could you please explain which classes need to be implmented for having my cutom datatable in iceface.
    We have faces.components.ext.HtmlDataTable
    I extended the above class.
    For renderer I extended faces.components.renderKits.TableRenderer
    Couple of questions:
    Are the above classes correct?
    If I want simple text box to be added in the existing icefaces dataTable what shud be done?
    Which methods of renderer are to be overridden?

  4. Marlon says:

    hello… nice tutorial.

    where is the second part??

    I’d like add the created component to the Icefaces pallete in Eclipse ide.?? Can I do it?? ….how??

Leave a Reply

Your email address will not be published. Required fields are marked *