You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@myfaces.apache.org by Leonardo Uribe <lu...@gmail.com> on 2007/05/05 06:26:05 UTC
Layout Component for Tomahawk and Trinidad
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
1 Option 2 Option
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: [Trinidad] Re: Layout Component for Tomahawk and Trinidad
Posted by Martin Marinschek <ma...@gmail.com>.
Leonardo, any news by the way?
regards,
Martin
On 5/16/07, Martin Marinschek <ma...@gmail.com> wrote:
> Hi Matt,
>
> but then you'd have to explicitly set column widths, right? So that's
> what Leonardo tries to implement - something where this isn't
> necessary.
>
> regards,
>
> Martin
>
> On 5/8/07, Matt Cooper <ma...@gmail.com> wrote:
> > In Trinidad, to get the layout in the diagram you showed and the implicit
> > tab stops to go with it, I would use a fragment similar to this:
> >
> > <tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
> > fieldWidth="100" rows="1" maxColumns="2">
> > <tr:selectOneChoice label="Salutation">
> > <f:selectItem itemLabel="1 Option"/>
> > </tr:selectOneChoice>
> > </tr:panelFormLayout>
> > <tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
> > fieldWidth="100" rows="1" maxColumns="2">
> > <tr:inputText label="First Name" contentStyle="width: 100%;"/>
> > <tr:inputText label="Last Name" contentStyle="width: 100%;"/>
> > <f:facet name="footer">
> > <tr:inputText label="c/o" contentStyle="width: 100%;"/>
> > </f:facet>
> > </tr:panelFormLayout>
> > <tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
> > fieldWidth="100" rows="1" maxColumns="2">
> > <tr:inputText label="Street" contentStyle="width: 100%;"/>
> > <tr:inputText label="ZIP" contentStyle="width: 100%;"/>
> > </tr:panelFormLayout>
> > <tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
> > fieldWidth="100" rows="1" maxColumns="2">
> > <tr:inputText label="No" contentStyle="width: 100%;"/>
> > <tr:inputText label="City" contentStyle="width: 100%;"/>
> > <f:facet name="footer">
> > <tr:inputText label="Note" rows="3" contentStyle="width: 100%;"/>
> > </f:facet>
> > </tr:panelFormLayout>
> >
> > Regards,
> > Matt
> >
> >
> > On 5/8/07, Martin Marinschek <ma...@gmail.com> wrote:
> > > You should repost this question with [TRINIDAD] in the subject, else
> > > you might risk that not everyone from the Trinidad team will read
> > > this.
> > >
> > > regards,
> > >
> > > Martin
> > >
> > > On 5/8/07, Chris Hane < chrishane@gmail.com> wrote:
> > > > :) Thanks for pointing out that it was a Google Soc. That's actually
> > why
> > > > I put my 1/2 cent in there. I figured the mentors for the student would
> > > > make sure the component conforms to the Trinidad way of doing things and
> > > > plays nicely with the other components/skinning/PPR/etc....
> > > >
> > > > As an aside, how do people create forms today that this new component
> > will
> > > > help with? I am migrating away from embedding <table tr td> tags
> > directly
> > > > into my pages; but the row alignment is a little "off" when using
> > > > panelFormLayout (2 columns) and the rows contain different height
> > > > components. For example row 1/column 1 is an input box; row 1/column 2
> > is
> > > > a select box. The second column on row 1 will be a little large than
> > > > column 1 and everything in column two will be shifted down a couple of
> > pixels.
> > > >
> > > > Chris....
> > > >
> > > > Martin Marinschek wrote:
> > > > > We should mention as well that this is a Google SoC project - and yes,
> > > > > we want to have the label/input functionality in there just like in
> > > > > Trinidad.
> > > > >
> > > > > regards,
> > > > >
> > > > > Martin
> > > > >
> > > > > On 5/8/07, Chris Hane <ch...@gmail.com> wrote:
> > > > >> I'm not sure if this is relevant or possible; but for the Trinidad
> > > > >> piece it
> > > > >> would be nice to extend (or work similar to) <tr:panelFormLayout/>.
> > > > >> We use
> > > > >> this component and like it's functionality. Being able to specify
> > the
> > > > >> label on the component and not have a separate <outputText> is nice
> > as is
> > > > >> the ability to have a style sheet apply against all of the embedded
> > > > >> components.
> > > > >>
> > > > >> When laying out a complex form like you outlined below, having the
> > > > >> ability
> > > > >> to specify/control the row/column positioning would be great. Right
> > now
> > > > >> the component does simple wrapping for rows/columns.
> > > > >>
> > > > >> Altough, someone with more experience with the component might want
> > to
> > > > >> comment because I could easily be missing some of it's functionality
> > as I
> > > > >> just started to use it recently.
> > > > >>
> > > > >> 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
> > > > >> >
> > > > >> >
> > > > >> >
> > > > >> >
> > > > >>
> > > > >
> > > > >
> > > >
> > >
> > >
> > > --
> > >
> > > http://www.irian.at
> > >
> > > Your JSF powerhouse -
> > > JSF Consulting, Development and
> > > Courses in English and German
> > >
> > > Professional Support for Apache MyFaces
> > >
> >
> >
>
>
> --
>
> http://www.irian.at
>
> Your JSF powerhouse -
> JSF Consulting, Development and
> Courses in English and German
>
> Professional Support for Apache MyFaces
>
--
http://www.irian.at
Your JSF powerhouse -
JSF Consulting, Development and
Courses in English and German
Professional Support for Apache MyFaces
Re: [Trinidad] Re: Layout Component for Tomahawk and Trinidad
Posted by Matt Cooper <ma...@gmail.com>.
Hi Martin,
Yes, that is correct. Since panelFormLayout is made to do tab traversal a
column at a time, in order to achieve the appearance of traversing
horizontally one row at a time, you must use multiple panelFormLayout
instances. To ensure that each instance lines up, you'd have to use
consistent column widths.
Regards,
Matt
On 5/15/07, Martin Marinschek <ma...@gmail.com> wrote:
>
> Hi Matt,
>
> but then you'd have to explicitly set column widths, right? So that's
> what Leonardo tries to implement - something where this isn't
> necessary.
>
> regards,
>
> Martin
>
> On 5/8/07, Matt Cooper <ma...@gmail.com> wrote:
> > In Trinidad, to get the layout in the diagram you showed and the
> implicit
> > tab stops to go with it, I would use a fragment similar to this:
> >
> > <tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
> > fieldWidth="100" rows="1" maxColumns="2">
> > <tr:selectOneChoice label="Salutation">
> > <f:selectItem itemLabel="1 Option"/>
> > </tr:selectOneChoice>
> > </tr:panelFormLayout>
> > <tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
> > fieldWidth="100" rows="1" maxColumns="2">
> > <tr:inputText label="First Name" contentStyle="width: 100%;"/>
> > <tr:inputText label="Last Name" contentStyle="width: 100%;"/>
> > <f:facet name="footer">
> > <tr:inputText label="c/o" contentStyle="width: 100%;"/>
> > </f:facet>
> > </tr:panelFormLayout>
> > <tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
> > fieldWidth="100" rows="1" maxColumns="2">
> > <tr:inputText label="Street" contentStyle="width: 100%;"/>
> > <tr:inputText label="ZIP" contentStyle="width: 100%;"/>
> > </tr:panelFormLayout>
> > <tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
> > fieldWidth="100" rows="1" maxColumns="2">
> > <tr:inputText label="No" contentStyle="width: 100%;"/>
> > <tr:inputText label="City" contentStyle="width: 100%;"/>
> > <f:facet name="footer">
> > <tr:inputText label="Note" rows="3" contentStyle="width: 100%;"/>
> > </f:facet>
> > </tr:panelFormLayout>
> >
> > Regards,
> > Matt
> >
> >
> > On 5/8/07, Martin Marinschek <ma...@gmail.com> wrote:
> > > You should repost this question with [TRINIDAD] in the subject, else
> > > you might risk that not everyone from the Trinidad team will read
> > > this.
> > >
> > > regards,
> > >
> > > Martin
> > >
> > > On 5/8/07, Chris Hane < chrishane@gmail.com> wrote:
> > > > :) Thanks for pointing out that it was a Google Soc. That's
> actually
> > why
> > > > I put my 1/2 cent in there. I figured the mentors for the student
> would
> > > > make sure the component conforms to the Trinidad way of doing things
> and
> > > > plays nicely with the other components/skinning/PPR/etc....
> > > >
> > > > As an aside, how do people create forms today that this new
> component
> > will
> > > > help with? I am migrating away from embedding <table tr td> tags
> > directly
> > > > into my pages; but the row alignment is a little "off" when using
> > > > panelFormLayout (2 columns) and the rows contain different height
> > > > components. For example row 1/column 1 is an input box; row
> 1/column 2
> > is
> > > > a select box. The second column on row 1 will be a little large
> than
> > > > column 1 and everything in column two will be shifted down a couple
> of
> > pixels.
> > > >
> > > > Chris....
> > > >
> > > > Martin Marinschek wrote:
> > > > > We should mention as well that this is a Google SoC project - and
> yes,
> > > > > we want to have the label/input functionality in there just like
> in
> > > > > Trinidad.
> > > > >
> > > > > regards,
> > > > >
> > > > > Martin
> > > > >
> > > > > On 5/8/07, Chris Hane <ch...@gmail.com> wrote:
> > > > >> I'm not sure if this is relevant or possible; but for the
> Trinidad
> > > > >> piece it
> > > > >> would be nice to extend (or work similar to)
> <tr:panelFormLayout/>.
> > > > >> We use
> > > > >> this component and like it's functionality. Being able to
> specify
> > the
> > > > >> label on the component and not have a separate <outputText> is
> nice
> > as is
> > > > >> the ability to have a style sheet apply against all of the
> embedded
> > > > >> components.
> > > > >>
> > > > >> When laying out a complex form like you outlined below, having
> the
> > > > >> ability
> > > > >> to specify/control the row/column positioning would be
> great. Right
> > now
> > > > >> the component does simple wrapping for rows/columns.
> > > > >>
> > > > >> Altough, someone with more experience with the component might
> want
> > to
> > > > >> comment because I could easily be missing some of it's
> functionality
> > as I
> > > > >> just started to use it recently.
> > > > >>
> > > > >> 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
> > > > >> >
> > > > >> >
> > > > >> >
> > > > >> >
> > > > >>
> > > > >
> > > > >
> > > >
> > >
> > >
> > > --
> > >
> > > http://www.irian.at
> > >
> > > Your JSF powerhouse -
> > > JSF Consulting, Development and
> > > Courses in English and German
> > >
> > > Professional Support for Apache MyFaces
> > >
> >
> >
>
>
> --
>
> http://www.irian.at
>
> Your JSF powerhouse -
> JSF Consulting, Development and
> Courses in English and German
>
> Professional Support for Apache MyFaces
>
Re: [Trinidad] Re: Layout Component for Tomahawk and Trinidad
Posted by Martin Marinschek <ma...@gmail.com>.
Hi Matt,
but then you'd have to explicitly set column widths, right? So that's
what Leonardo tries to implement - something where this isn't
necessary.
regards,
Martin
On 5/8/07, Matt Cooper <ma...@gmail.com> wrote:
> In Trinidad, to get the layout in the diagram you showed and the implicit
> tab stops to go with it, I would use a fragment similar to this:
>
> <tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
> fieldWidth="100" rows="1" maxColumns="2">
> <tr:selectOneChoice label="Salutation">
> <f:selectItem itemLabel="1 Option"/>
> </tr:selectOneChoice>
> </tr:panelFormLayout>
> <tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
> fieldWidth="100" rows="1" maxColumns="2">
> <tr:inputText label="First Name" contentStyle="width: 100%;"/>
> <tr:inputText label="Last Name" contentStyle="width: 100%;"/>
> <f:facet name="footer">
> <tr:inputText label="c/o" contentStyle="width: 100%;"/>
> </f:facet>
> </tr:panelFormLayout>
> <tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
> fieldWidth="100" rows="1" maxColumns="2">
> <tr:inputText label="Street" contentStyle="width: 100%;"/>
> <tr:inputText label="ZIP" contentStyle="width: 100%;"/>
> </tr:panelFormLayout>
> <tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
> fieldWidth="100" rows="1" maxColumns="2">
> <tr:inputText label="No" contentStyle="width: 100%;"/>
> <tr:inputText label="City" contentStyle="width: 100%;"/>
> <f:facet name="footer">
> <tr:inputText label="Note" rows="3" contentStyle="width: 100%;"/>
> </f:facet>
> </tr:panelFormLayout>
>
> Regards,
> Matt
>
>
> On 5/8/07, Martin Marinschek <ma...@gmail.com> wrote:
> > You should repost this question with [TRINIDAD] in the subject, else
> > you might risk that not everyone from the Trinidad team will read
> > this.
> >
> > regards,
> >
> > Martin
> >
> > On 5/8/07, Chris Hane < chrishane@gmail.com> wrote:
> > > :) Thanks for pointing out that it was a Google Soc. That's actually
> why
> > > I put my 1/2 cent in there. I figured the mentors for the student would
> > > make sure the component conforms to the Trinidad way of doing things and
> > > plays nicely with the other components/skinning/PPR/etc....
> > >
> > > As an aside, how do people create forms today that this new component
> will
> > > help with? I am migrating away from embedding <table tr td> tags
> directly
> > > into my pages; but the row alignment is a little "off" when using
> > > panelFormLayout (2 columns) and the rows contain different height
> > > components. For example row 1/column 1 is an input box; row 1/column 2
> is
> > > a select box. The second column on row 1 will be a little large than
> > > column 1 and everything in column two will be shifted down a couple of
> pixels.
> > >
> > > Chris....
> > >
> > > Martin Marinschek wrote:
> > > > We should mention as well that this is a Google SoC project - and yes,
> > > > we want to have the label/input functionality in there just like in
> > > > Trinidad.
> > > >
> > > > regards,
> > > >
> > > > Martin
> > > >
> > > > On 5/8/07, Chris Hane <ch...@gmail.com> wrote:
> > > >> I'm not sure if this is relevant or possible; but for the Trinidad
> > > >> piece it
> > > >> would be nice to extend (or work similar to) <tr:panelFormLayout/>.
> > > >> We use
> > > >> this component and like it's functionality. Being able to specify
> the
> > > >> label on the component and not have a separate <outputText> is nice
> as is
> > > >> the ability to have a style sheet apply against all of the embedded
> > > >> components.
> > > >>
> > > >> When laying out a complex form like you outlined below, having the
> > > >> ability
> > > >> to specify/control the row/column positioning would be great. Right
> now
> > > >> the component does simple wrapping for rows/columns.
> > > >>
> > > >> Altough, someone with more experience with the component might want
> to
> > > >> comment because I could easily be missing some of it's functionality
> as I
> > > >> just started to use it recently.
> > > >>
> > > >> 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
> > > >> >
> > > >> >
> > > >> >
> > > >> >
> > > >>
> > > >
> > > >
> > >
> >
> >
> > --
> >
> > http://www.irian.at
> >
> > Your JSF powerhouse -
> > JSF Consulting, Development and
> > Courses in English and German
> >
> > Professional Support for Apache MyFaces
> >
>
>
--
http://www.irian.at
Your JSF powerhouse -
JSF Consulting, Development and
Courses in English and German
Professional Support for Apache MyFaces
[Trinidad] Re: Layout Component for Tomahawk and Trinidad
Posted by Matt Cooper <ma...@gmail.com>.
In Trinidad, to get the layout in the diagram you showed and the implicit
tab stops to go with it, I would use a fragment similar to this:
<tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
fieldWidth="100" rows="1" maxColumns="2">
<tr:selectOneChoice label="Salutation">
<f:selectItem itemLabel="1 Option"/>
</tr:selectOneChoice>
</tr:panelFormLayout>
<tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
fieldWidth="100" rows="1" maxColumns="2">
<tr:inputText label="First Name" contentStyle="width: 100%;"/>
<tr:inputText label="Last Name" contentStyle="width: 100%;"/>
<f:facet name="footer">
<tr:inputText label="c/o" contentStyle="width: 100%;"/>
</f:facet>
</tr:panelFormLayout>
<tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
fieldWidth="100" rows="1" maxColumns="2">
<tr:inputText label="Street" contentStyle="width: 100%;"/>
<tr:inputText label="ZIP" contentStyle="width: 100%;"/>
</tr:panelFormLayout>
<tr:panelFormLayout inlineStyle="width: 400px;" labelWidth="100"
fieldWidth="100" rows="1" maxColumns="2">
<tr:inputText label="No" contentStyle="width: 100%;"/>
<tr:inputText label="City" contentStyle="width: 100%;"/>
<f:facet name="footer">
<tr:inputText label="Note" rows="3" contentStyle="width: 100%;"/>
</f:facet>
</tr:panelFormLayout>
Regards,
Matt
On 5/8/07, Martin Marinschek <ma...@gmail.com> wrote:
>
> You should repost this question with [TRINIDAD] in the subject, else
> you might risk that not everyone from the Trinidad team will read
> this.
>
> regards,
>
> Martin
>
> On 5/8/07, Chris Hane <ch...@gmail.com> wrote:
> > :) Thanks for pointing out that it was a Google Soc. That's actually
> why
> > I put my 1/2 cent in there. I figured the mentors for the student would
> > make sure the component conforms to the Trinidad way of doing things and
> > plays nicely with the other components/skinning/PPR/etc....
> >
> > As an aside, how do people create forms today that this new component
> will
> > help with? I am migrating away from embedding <table tr td> tags
> directly
> > into my pages; but the row alignment is a little "off" when using
> > panelFormLayout (2 columns) and the rows contain different height
> > components. For example row 1/column 1 is an input box; row 1/column 2
> is
> > a select box. The second column on row 1 will be a little large than
> > column 1 and everything in column two will be shifted down a couple of
> pixels.
> >
> > Chris....
> >
> > Martin Marinschek wrote:
> > > We should mention as well that this is a Google SoC project - and yes,
> > > we want to have the label/input functionality in there just like in
> > > Trinidad.
> > >
> > > regards,
> > >
> > > Martin
> > >
> > > On 5/8/07, Chris Hane <ch...@gmail.com> wrote:
> > >> I'm not sure if this is relevant or possible; but for the Trinidad
> > >> piece it
> > >> would be nice to extend (or work similar to) <tr:panelFormLayout/>.
> > >> We use
> > >> this component and like it's functionality. Being able to specify
> the
> > >> label on the component and not have a separate <outputText> is nice
> as is
> > >> the ability to have a style sheet apply against all of the embedded
> > >> components.
> > >>
> > >> When laying out a complex form like you outlined below, having the
> > >> ability
> > >> to specify/control the row/column positioning would be great. Right
> now
> > >> the component does simple wrapping for rows/columns.
> > >>
> > >> Altough, someone with more experience with the component might want
> to
> > >> comment because I could easily be missing some of it's functionality
> as I
> > >> just started to use it recently.
> > >>
> > >> 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
> > >> >
> > >> >
> > >> >
> > >> >
> > >>
> > >
> > >
> >
>
>
> --
>
> http://www.irian.at
>
> Your JSF powerhouse -
> JSF Consulting, Development and
> Courses in English and German
>
> Professional Support for Apache MyFaces
>
Re: Layout Component for Tomahawk and Trinidad
Posted by Martin Marinschek <ma...@gmail.com>.
You should repost this question with [TRINIDAD] in the subject, else
you might risk that not everyone from the Trinidad team will read
this.
regards,
Martin
On 5/8/07, Chris Hane <ch...@gmail.com> wrote:
> :) Thanks for pointing out that it was a Google Soc. That's actually why
> I put my 1/2 cent in there. I figured the mentors for the student would
> make sure the component conforms to the Trinidad way of doing things and
> plays nicely with the other components/skinning/PPR/etc....
>
> As an aside, how do people create forms today that this new component will
> help with? I am migrating away from embedding <table tr td> tags directly
> into my pages; but the row alignment is a little "off" when using
> panelFormLayout (2 columns) and the rows contain different height
> components. For example row 1/column 1 is an input box; row 1/column 2 is
> a select box. The second column on row 1 will be a little large than
> column 1 and everything in column two will be shifted down a couple of pixels.
>
> Chris....
>
> Martin Marinschek wrote:
> > We should mention as well that this is a Google SoC project - and yes,
> > we want to have the label/input functionality in there just like in
> > Trinidad.
> >
> > regards,
> >
> > Martin
> >
> > On 5/8/07, Chris Hane <ch...@gmail.com> wrote:
> >> I'm not sure if this is relevant or possible; but for the Trinidad
> >> piece it
> >> would be nice to extend (or work similar to) <tr:panelFormLayout/>.
> >> We use
> >> this component and like it's functionality. Being able to specify the
> >> label on the component and not have a separate <outputText> is nice as is
> >> the ability to have a style sheet apply against all of the embedded
> >> components.
> >>
> >> When laying out a complex form like you outlined below, having the
> >> ability
> >> to specify/control the row/column positioning would be great. Right now
> >> the component does simple wrapping for rows/columns.
> >>
> >> Altough, someone with more experience with the component might want to
> >> comment because I could easily be missing some of it's functionality as I
> >> just started to use it recently.
> >>
> >> 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
> >> >
> >> >
> >> >
> >> >
> >>
> >
> >
>
--
http://www.irian.at
Your JSF powerhouse -
JSF Consulting, Development and
Courses in English and German
Professional Support for Apache MyFaces
Re: Layout Component for Tomahawk and Trinidad
Posted by Chris Hane <ch...@gmail.com>.
:) Thanks for pointing out that it was a Google Soc. That's actually why
I put my 1/2 cent in there. I figured the mentors for the student would
make sure the component conforms to the Trinidad way of doing things and
plays nicely with the other components/skinning/PPR/etc....
As an aside, how do people create forms today that this new component will
help with? I am migrating away from embedding <table tr td> tags directly
into my pages; but the row alignment is a little "off" when using
panelFormLayout (2 columns) and the rows contain different height
components. For example row 1/column 1 is an input box; row 1/column 2 is
a select box. The second column on row 1 will be a little large than
column 1 and everything in column two will be shifted down a couple of pixels.
Chris....
Martin Marinschek wrote:
> We should mention as well that this is a Google SoC project - and yes,
> we want to have the label/input functionality in there just like in
> Trinidad.
>
> regards,
>
> Martin
>
> On 5/8/07, Chris Hane <ch...@gmail.com> wrote:
>> I'm not sure if this is relevant or possible; but for the Trinidad
>> piece it
>> would be nice to extend (or work similar to) <tr:panelFormLayout/>.
>> We use
>> this component and like it's functionality. Being able to specify the
>> label on the component and not have a separate <outputText> is nice as is
>> the ability to have a style sheet apply against all of the embedded
>> components.
>>
>> When laying out a complex form like you outlined below, having the
>> ability
>> to specify/control the row/column positioning would be great. Right now
>> the component does simple wrapping for rows/columns.
>>
>> Altough, someone with more experience with the component might want to
>> comment because I could easily be missing some of it's functionality as I
>> just started to use it recently.
>>
>> 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 Martin Marinschek <ma...@gmail.com>.
We should mention as well that this is a Google SoC project - and yes,
we want to have the label/input functionality in there just like in
Trinidad.
regards,
Martin
On 5/8/07, Chris Hane <ch...@gmail.com> wrote:
> I'm not sure if this is relevant or possible; but for the Trinidad piece it
> would be nice to extend (or work similar to) <tr:panelFormLayout/>. We use
> this component and like it's functionality. Being able to specify the
> label on the component and not have a separate <outputText> is nice as is
> the ability to have a style sheet apply against all of the embedded components.
>
> When laying out a complex form like you outlined below, having the ability
> to specify/control the row/column positioning would be great. Right now
> the component does simple wrapping for rows/columns.
>
> Altough, someone with more experience with the component might want to
> comment because I could easily be missing some of it's functionality as I
> just started to use it recently.
>
> 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
> >
> >
> >
> >
>
--
http://www.irian.at
Your JSF powerhouse -
JSF Consulting, Development and
Courses in English and German
Professional Support for Apache MyFaces
Re: Layout Component for Tomahawk and Trinidad
Posted by Chris Hane <ch...@gmail.com>.
I'm not sure if this is relevant or possible; but for the Trinidad piece it
would be nice to extend (or work similar to) <tr:panelFormLayout/>. We use
this component and like it's functionality. Being able to specify the
label on the component and not have a separate <outputText> is nice as is
the ability to have a style sheet apply against all of the embedded components.
When laying out a complex form like you outlined below, having the ability
to specify/control the row/column positioning would be great. Right now
the component does simple wrapping for rows/columns.
Altough, someone with more experience with the component might want to
comment because I could easily be missing some of it's functionality as I
just started to use it recently.
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
Re: Layout Component for Tomahawk and Trinidad
Posted by Chris Hane <ch...@gmail.com>.
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
>
>
>
>