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 <[EMAIL PROTECTED]> 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 <[EMAIL PROTECTED]> 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 <[EMAIL PROTECTED]> 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
