### Image Size Control with <rich:inputNumberSlider>

The rich:inputNumberSlider component in the Photo Album Demo is used as a control that helps a user to change photos size while previewing an album. A handler position on the slider track corresponds to a particular value of an image size. The component is included into the page with the help of ui:include:

    ...

    <ui:include src="src/main/webapp/includes/image/inputNumberSlider.xhtml"/>

    ...

Now let's have a look at `src/main/webapp/includes/image/inputNumberSlider.xhtml` file:

    ...

    <ui:composition ...>

          <div>

                <rich:inputNumberSlider value=" {imageSizeHelper.value}"

                            minValue="80"

                            maxValue="200"

                            step="40"

                            enableManualInput="false"

                            showArrows="false"

                            showBoundaryValues="true"

                            showInput="false">

                      <a4j:support event="onchange" reRender="userAlbumImages"/>

                </rich:inputNumberSlider>

          </div>

    </ui:composition>

    ...

There is special Enumeration type that contains four predefined values for image size. Each type has a set of image related attributes such as CSS class for new photo size, postfix for a new file name, image background. The `setValue` method of the `ImageSizeHelper.java` class is triggered on each slider's position change. This method sets one of four predefined values for image size and due to slider's position.

    public void setValue(int value) {

                currentDimension = ImageDimension.getInstance(value);

                this.value = currentDimension.getX();

    }

And here is the `ImageDimension.java` class:

    ...

     public enum ImageDimension {

        SIZE_80(80), SIZE_120(120), SIZE_160(160), SIZE_200(200), SIZE_MEDIUM(600), ORIGINAL(0);

        final static String CSS_CLASS = "preview_box_photo_";

        final static String FILE_POSTFIX = "_small";

        final static String IMAGE_BG = "/img/shell/frame_photo_%1$d.png";

        final static String IMAGE_BG_STYLE = "width: %1$dpx; height: %1$dpx";

        int x;

        String bgStyle;

        String cssClass;

        String imageBgSrc;

        String filePostfix;

        private ImageDimension(int x) {

            this.x = x;

            this.bgStyle = String.format(IMAGE_BG_STYLE, x + 20);

            cssClass = CSS_CLASS + x;

            imageBgSrc = String.format(IMAGE_BG, (x == 160) ? 200 : x);

            if(x == 600){

                filePostfix = "_medium";

            }else if(x == 0){

                filePostfix = "";

            }else{

                filePostfix = FILE_POSTFIX + x;

            }

        }

          ...

After the <a4j:support> is worked out user photos (more exactly, the h:panelGroup with `userAlbumImages` id that contains user photos) are rendered correspondingly to a new set value. Here is `web/src/main/webapp/includes/image/imageList.xhtml`:

    ...

    <h:panelGroup id="userAlbumImages">

        <a4j:repeat id="imageList" value=" {model.images}" var="image" rows="20">

            <h:panelGroup layout="block" styleClass=" {imageSizeHelper.currentDimension.cssClass}">

                <h:graphicImage styleClass="pr_photo_bg" style=" {imageSizeHelper.currentDimension.imageBgStyle}" value=" {imageSizeHelper.currentDimension.imageBg}" />

                <h:panelGrid cellpadding="0">

                    <h:panelGroup>

                        <a4j:commandLink

                                actionListener=" {controller.showImage(image)}"

                                reRender="mainArea, treePanel">

                                    <a4j:mediaOutput id="img"  element="img"

                                        createContent=" {imageLoader.paintImage}"

                                        style="border : 1px solid  FFFFFF;"

                                        value=" {fileManager.transformPath(image.fullPath, imageSizeHelper.currentDimension.filePostfix)}">

                                        <f:param value=" {imageSizeHelper.currentDimension.x}" name="x" />

                                        <rich:dragSupport rendered=" {controller.isUserImage(image)}" reRender="mainArea, treePanel" id="dragSource" dragIndicator="dragIndicator"

                                    dragType="image" dragValue=" {image}">

                                    <rich:dndParam id="dragParam" name="label" value=" {image.name}" />

                                </rich:dragSupport>

                                </a4j:mediaOutput>

                        </a4j:commandLink>

                        <br/>

                    </h:panelGroup>

                </h:panelGrid>

                <h:panelGroup layout="block" styleClass="photo_name"> {image.name}</h:panelGroup>

                <h:panelGroup layout="block" styleClass="photo_data">

                    <h:outputText value=" {image.created}">

                        <f:convertDateTime />

                    </h:outputText>

                </h:panelGroup>

            </h:panelGroup>

            <ui:include src="/includes/contextMenu/CMForImage.xhtml" >

                <ui:param name="image" value=" {image}" />

                <ui:param name="mediaOutput" value=" {rich:clientId('img')}"/>

            </ui:include>

        </a4j:repeat>

        </h:panelGroup>

    ...

When the <rich:inputNumberSlider< is rendered, at first its default value for image size is 120 px.

Image size control

Vizit following pages at RichFaces Live Demo for more information, examples and sources on the components used in the application and described in this chapter:

- InputNumberSlider page for the <rich:inputNumberSlider> component;

- AjaxSupport for the <a4j:suport> component.