21й - практикум. Oracle ADF. ADF Declarative Components. Свободный стиль списка выбора. II

В этом практикуме будет представлен собственно сам компонент - FreeStyleGrid. Компонент позволяет в относительно  свободном стиле располагать элементы выбора, ранее я писал про него в практикуме №20



Компонента принимает на вход коллекцию данных следующих типов
oracle.adf.view.rich.model.CollectionModel, java.util.List , array, javax.faces.model.DataModel
для построения элементов. В качестве элемента используется - javax.faces.model.SelectItem, но это не обязательно. Выделяет цветом элемент, посылает на сервер событие, при перемещении указателя мышки подсвечивает элемент цветом (hover эффект).
Примеры:
1. Таблица. 

 

2. Горизонтальное расположение

 

3. Вертикальное расположение

 












Реализация.
Компонент используя iterator расположенный в panelFormLayout располагает элементы согласно правилу настроеному в  panelFormLayout атрибутами Rows и MaxColumns, который в свою очередь использует атрибуты компоненты.

<af:panelFormLayout id="pfl1" maxColumns="#{attrs.cols}" rows="#{attrs.rows}" clientComponent="true">
    <af:iterator id="i1" value="#{attrs.items}" var="var">
      <af:panelGroupLayout id="pgl1">
        <af:outputText value="#{var.label}" id="ot2" styleClass="myHover"/>
        <af:clientListener method="select" type="click"/>
        <af:clientAttribute name="key" value="#{var.value}"/>
        <af:serverListener type="select" method="#{comp.handleOnSelect}"/>
      </af:panelGroupLayout>
    </af:iterator>
  </af:panelFormLayout>

И так компонент имеет три атрибута

и один метод








В качестве элемента используется -outputText который получает события мыши - click, выделяет текущий элемент и сбрасывает ранее выделенные и отправляет на сервер событие с параметром ИД элемента.

<af:resource type="javascript">
      function select(ev)
      {
        var source = ev.getSource();        
        var parent = source.getParent();
        // сбросить ранее выделенные элементы через callBack функцию
        parent.visitChildren(callBackVisit, null, false);
        // выделить элемент текущий элемент
        source.setProperty("inlineStyle", "background-color:Lime");
        // послать событие на сервер с параметром - ИД
        var id = source.getProperty("key");
        AdfCustomEvent.queue(source, "select", {param:id},true );          
      }
      
      function callBackVisit(component)
      {
        if (component instanceof AdfRichPanelGroupLayout ){
           component.setProperty("inlineStyle", null);
        }
      }
    </af:resource>

   
Обойти все элементы внутри родителя позволяет ADF javascript функция -visitChildren.


Подсветку при перемещении мыши обеспечивает CSS -hover

<af:resource type="css">
      .myHover:hover
      {
        background-color: ActiveCaption;            
      }
</af:resource> 

 класс  myHover применен к -

<af:outputText value="#{var.label}" id="ot2" styleClass="myHover"/>

Источник
Using ADF Faces Client-Side Architecture
http://docs.oracle.com/cd/E24382_01/web.1112/e16181/af_arch.htm

Исходник