Follow by Email

Friday, 13 September 2013

Using af:inputNumberSlider and af:inputRangeSlider for good UI in Oracle ADF

Hello All,
This tutorial is about slider component
Slider is cool and interesting component in ADF to select a single number or to select a range
there is two types of slider available in ADF Faces

1. af:inputNumberSlider (to select single value)
2. af:inputRangeSlider (to select range)

Follow steps to learn how to use slider in ADF
  • Go to Component Palette and search slider and drop it  into page
  • look in property inspector of slider , there are many properties to customise this component, you can change min-max values,orientation etc

  •  See Horizontal and Vertical slider-

  • Now to get its value in bean , bind both slider to managed bean, using binding property



  •     private RichInputNumberSlider numberSliderBind;
        private RichInputRangeSlider rangeSliderBind;
    
    
        public void setNumberSliderBind(RichInputNumberSlider numberSliderBind) {
            this.numberSliderBind = numberSliderBind;
        }
    
        public RichInputNumberSlider getNumberSliderBind() {
            return numberSliderBind;
        }
    
        public void setRangeSliderBind(RichInputRangeSlider rangeSliderBind) {
            this.rangeSliderBind = rangeSliderBind;
        }
    
        public RichInputRangeSlider getRangeSliderBind() {
            return rangeSliderBind;
        }
    

  • now to get value of inputNumberSlider simply use binding.getValue()

  •  Number numberVal = (Number)numberSliderBind.getValue();
    

  • To get Range of inputRangeSlider use this

  •         NumberRange sliderVal = (NumberRange)getRangeSliderBind().getValue();
            Number minVal=sliderVal.getMinimum();
            Number maxVal=sliderVal.getMaximum();
    

  • Now Run your page and see how is it-
You can use slider for custom search, fixed range interval etc

No comments :

Post a Comment