You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@myfaces.apache.org by Matt Cooper <ma...@gmail.com> on 2007/05/08 23:30:41 UTC
[Trinidad] Re: Layout Component for Tomahawk and Trinidad
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: [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