How to customise ADF form layout

Question

Hi,
I've an oracle form in the below format, how can I create similar form layout using adf form components?
Field
Field
Field
Field
Field
Field
Box for photograph
Field
Field
Field
Field
Field
Field
Field
Field
Field
Field
Field
Field
Field
Field
Field
Button
Button
Field
Field
Field
Field
Field
Field
Field
Field
Field
Thanks

Answer 1

Hi Arun,
here it is...
<af:panelGridLayout id="pgl1">
                    <af:gridRow marginTop="5px" height="auto" id="gr1">
                        <af:gridCell marginStart="5px" width="20pt" id="gc1" marginEnd="1px">
                            <af:inputText value="#{bindings.EmployeeId.inputValue}"
                                          label="#{bindings.EmployeeId.hints.label}"
                                          required="#{bindings.EmployeeId.hints.mandatory}"
                                          columns="#{bindings.EmployeeId.hints.displayWidth}"
                                          maximumLength="#{bindings.EmployeeId.hints.precision}"
                                          shortDesc="#{bindings.EmployeeId.hints.tooltip}" id="it1">
                                <f:validator binding="#{bindings.EmployeeId.validator}"/>
                                <af:convertNumber groupingUsed="false" pattern="#{bindings.EmployeeId.format}"/>
                            </af:inputText>
                            <af:inputText value="#{bindings.JobId.inputValue}" label="#{bindings.JobId.hints.label}"
                                          required="#{bindings.JobId.hints.mandatory}"
                                          columns="#{bindings.JobId.hints.displayWidth}"
                                          maximumLength="#{bindings.JobId.hints.precision}"
                                          shortDesc="#{bindings.JobId.hints.tooltip}" id="it6">
                                <f:validator binding="#{bindings.JobId.validator}"/>
                            </af:inputText>
                        </af:gridCell>
                        <af:gridCell marginStart="5px" marginEnd="5px" width="20pt" id="gc2">
                            <af:inputText value="#{bindings.FirstName.inputValue}"
                                          label="#{bindings.FirstName.hints.label}"
                                          required="#{bindings.FirstName.hints.mandatory}"
                                          columns="#{bindings.FirstName.hints.displayWidth}"
                                          maximumLength="#{bindings.FirstName.hints.precision}"
                                          shortDesc="#{bindings.FirstName.hints.tooltip}" id="it2">
                                <f:validator binding="#{bindings.FirstName.validator}"/>
                            </af:inputText>
                            <af:inputText value="#{bindings.LastName.inputValue}"
                                          label="#{bindings.LastName.hints.label}"
                                          required="#{bindings.LastName.hints.mandatory}"
                                          columns="#{bindings.LastName.hints.displayWidth}"
                                          maximumLength="#{bindings.LastName.hints.precision}"
                                          shortDesc="#{bindings.LastName.hints.tooltip}" id="it3">
                                <f:validator binding="#{bindings.LastName.validator}"/>
                            </af:inputText>
                            <af:inputText value="#{bindings.Email.inputValue}" label="#{bindings.Email.hints.label}"
                                          required="#{bindings.Email.hints.mandatory}"
                                          columns="#{bindings.Email.hints.displayWidth}"
                                          maximumLength="#{bindings.Email.hints.precision}"
                                          shortDesc="#{bindings.Email.hints.tooltip}" id="it4">
                                <f:validator binding="#{bindings.Email.validator}"/>
                            </af:inputText>
                            <af:inputText value="#{bindings.PhoneNumber.inputValue}"
                                          label="#{bindings.PhoneNumber.hints.label}"
                                          required="#{bindings.PhoneNumber.hints.mandatory}"
                                          columns="#{bindings.PhoneNumber.hints.displayWidth}"
                                          maximumLength="#{bindings.PhoneNumber.hints.precision}"
                                          shortDesc="#{bindings.PhoneNumber.hints.tooltip}" id="it5">
                                <f:validator binding="#{bindings.PhoneNumber.validator}"/>
                            </af:inputText>
                        </af:gridCell>
                        <af:gridCell id="gc7">
                            <af:inputDate value="#{bindings.HireDate.inputValue}"
                                          label="#{bindings.HireDate.hints.label}"
                                          required="#{bindings.HireDate.hints.mandatory}"
                                          columns="#{bindings.HireDate.hints.displayWidth}"
                                          shortDesc="#{bindings.HireDate.hints.tooltip}" id="id1">
                                <f:validator binding="#{bindings.HireDate.validator}"/>
                                <af:convertDateTime pattern="#{bindings.HireDate.format}"/>
                            </af:inputDate>
                        </af:gridCell>
                    </af:gridRow>
                    <af:gridRow marginTop="5px" height="auto" id="gr2">
                        <af:gridCell marginStart="5px" width="50%" id="gc3"/>
                        <af:gridCell marginStart="5px" marginEnd="5px" width="50%" id="gc4"/>
                    </af:gridRow>
                    <af:gridRow marginTop="5px" marginBottom="5px" height="auto" id="gr3">
                        <af:gridCell marginStart="5px" width="50%" id="gc5"/>
                        <af:gridCell marginStart="5px" marginEnd="5px" width="50%" id="gc6"/>
                    </af:gridRow>
                </af:panelGridLayout>
I can create 3 rows 3 columns output but when I run it, the columns col2 and col3 are merging into col1.
thanks