You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@myfaces.apache.org by Chris Hane <ch...@gmail.com> on 2007/07/16 20:33:15 UTC

Re: Layout Component for Tomahawk and Trinidad

Leonardo,

Just wanted to know if you were able to work on this and if there is any 
status on this component for Trinidad?

Thanks,
Chris....

Leonardo Uribe wrote:
> Hi
> 
> I'm working on a component for do layout like tobago gridLayout 
> component for myfaces Tomahawk and Trinidad.
> I'm doing this inside the Google Summer of Code proyect called MyFaces 
> Component Set Integration.
> 
> The component is based on gridlayout and cell component of tobago 
> (thank's to tobago developers for this very great work).
> 
> the component has the following properties:
> 
> tableLayout
> 
>     <name>styleclass</name>
>     <name>border</name>
>     <name>cellspacing</name>
>     <name>margin</name>
>     <name>marginTop</name>
>     <name>marginLeft</name>
>     <name>marginRight</name>
>     <name>marginBottom</name>
>     <name>columns</name> // you can define an absolute number in pixels 
> or relative: Ex: 1*;1*;2*;500   or  100;100;100;100 or 1*;5*;2*
>     <name>rows</name> // you can define an absolute number in pixels or 
> relative: Ex: 1*;1*;2*;500   or  100;100;100;100 or 1*;5*;2*
>     <name>height</name>
>     <name>width</name>
> 
> cellLayout
>     <name>spanX</name> //For span more than 1 row or column
>     <name>spanY</name>
>     <name>inheritWidth</name> //For the inner component inherit the 
> width and heigth of the cell (using style property)
>     <name>style</name>
> 
> An example:
> 
>     <mycomp:tableLayout width="700" styleclass="custompanel"
>         cellspacing="5" columns="1*;2*;1*;2*">
>         <mycomp:cellLayout inheritWidth="true" spanX="4">
>             <h:outputText value="Layout Example: Personal Information" />
>         </mycomp:cellLayout>
>        
>         <h:outputText value="Salutation"/>
>         <mycomp:cellLayout inheritWidth="false" spanX="2">
>         <h:selectOneMenu>
>             <f:selectItem itemLabel="1 Option"
>                             itemValue="1 Option"/>
>             <f:selectItem itemLabel="2 Option"
>                             itemValue="2 Option"/>
>         </h:selectOneMenu>
>         </mycomp:cellLayout>
>         <mycomp:cellLayout />
>         <h:outputText value="First Name" />
>         <h:inputText></h:inputText>
>         <h:outputText value="Last Name" />
>         <h:inputText></h:inputText>
>         <h:outputText value="c/o" />
>         <mycomp:cellLayout inheritWidth="true" spanX="3">
>             <h:inputText></h:inputText>
>         </mycomp:cellLayout>
>         <h:outputText value="Street" />
>         <h:inputText></h:inputText>
>         <h:outputText value="No" />
>         <h:inputText></h:inputText>
>         <h:outputText value="ZIP" />
>         <h:inputText></h:inputText>
>         <h:outputText value="City" />
>         <h:inputText></h:inputText>
>         <h:outputText value="Note" />
>         <mycomp:cellLayout inheritWidth="true" spanX="3">
>             <h:inputTextarea></h:inputTextarea>
>         </mycomp:cellLayout>
>     </mycomp:tableLayout>
> 
> The output:
> 
> Layout Example: Personal Information
> Salutation
> 	
> 	
> First Name
> 	
> 	
> Last Name
> 	
> c/o
> 	
> Street
> 	
> 	
> No
> 	
> ZIP
> 	
> 	
> City
> 	
> Note
> 	
> 
> 
> My question is simple: ¿What other properties or functions will be cool 
> to add to this component? What do you think?
> How the style and style properties should work (It's necessary to do 
> something like styling columns of components)?
> 
> Thanks.
> 
> Att: Leonardo Uribe
> Ingeniero de Sistemas
> Pontificia Universidad Javeriana
> 
> 
> 
> 

Re: Layout Component for Tomahawk and Trinidad

Posted by Leonardo Uribe <lu...@gmail.com>.
Hi

Yes, I will work on this in the next week. My problem was that I have to
stop to work on this before because I have some main
objectives to do in order to be consistent with the schedule of my proposal
(If I'm not reach the work that I propose for the midterm.... But I feel
that I was succesful in doing this work.) like add skin support to non
trinidad components in a non intrusive way (Really allow component level
selectors to use with non trinidad components and solve some issues mixing
trinidad and tomahawk).

The component works if I add something like this in LabelAndMessageRenderer:

  private boolean _isFormRendererType(String rendererType)
  {

    return "org.apache.myfaces.trinidad.Form".equals(rendererType) ||
        "org.apache.myfaces.trinidad.FormLayout ".equals(rendererType) ||
        "org.apache.myfaces.trinidad.rich.Form".equals(rendererType) ||
        "org.apache.myfaces.trinidad.TableLayout".equals(rendererType);
  }

An example (I have checked that this works)
                    <mycomp:tableFormLayout width="700" cellspacing="5"
                        columns="1*;2*;1*;2*">
                        <tr:outputText value="Layout Example: Personal
Information" >
                            <f:attribute name="spanX" value="4" />
                        </tr:outputText>
                        <tr:selectOneChoice label="Salutation">
                            <f:selectItem itemLabel="1 Option" itemValue="1"
/>
                        </tr:selectOneChoice>
                        <tr:outputText>
                            <f:attribute name="spanX" value="2" />
                        </tr:outputText>

                        <tr:inputText label="First Name" />
                        <tr:inputText label="Last Name" />
                        <tr:inputText label="c/o">
                            <f:attribute name="spanXItem" value="3" />
                            <f:attribute name="spanYItem" value="1" />
                        </tr:inputText>
                        <tr:inputText label="Street" contentStyle="width:
100%;" />
                        <tr:inputText label="No" contentStyle="width: 100%;"
/>
                        <tr:inputText label="ZIP" contentStyle="width:
100%;" />
                        <tr:inputText label="City" contentStyle="width:
100%;" />
                        <tr:inputText label="Note" rows="4"
contentStyle="width: 100%;">
                            <f:attribute name="spanXItem" value="3" />
                            <f:attribute name="spanYItem" value="1" />
                        </tr:inputText>
                    </mycomp:tableFormLayout>

Things to do to work well:

1. Define skin selectors. Now are copied from panelFormLayout, but I see
that Jeanne Waldman is working on enable registerResourceBundle to any skin,
so I want to wait until this api is usable and implement this for my
component. I note that skin constants are defined in SkinSelectors.java, but
I don't know if I want to add my skin constants to this class.

2. Correct spanYItem: I don't remember but I believe that I have to do more
probes defining a spanYItem > 1.

The things that I will work are this:

1. Decouple PanelFormLayout and LabelAndMessageRenderer: I'm not have clear
the responsibilities of the classes that interact in this case. Theorically,
the question is if the parent should do some rendering activities of the
children (by children request).

The idea is that the parent component by some way publish info about how to
the children must be renderer and the children can ask for it. The simplest
idea is to add in RenderingContext class methods to interact with a
Descriptor like this:

Object getDescriptor(UIComponent parent)
void addDescriptor(UIComponent parent, Descriptor descriptor)
.......

 If I can update the nesting level using the descriptor methods, the
children by this methods will see
this. But I have to search through top of the tree of parents, because the
component may need the info of superparent components, starting with the
nearer parent.

If I put all the rendering methods for the children in the children, the
children must know the parent way of render (that's i want to avoid) so a
preliminary solution is delegate to a method in the descriptor renderer
(that implements a properly interface) and then to the parent that knows how
to render this part.

2. Do more probes of this component like what happen when interact with
height and witdh properties defined in a css file.

3. What happen when the component interact with group components.

regards.

Att: Leonardo Uribe