How to create html like table in Oracle ADF? The following
<af:table>
adds also headers, which is not desired in my case. I need just a simple table like layout, with no margins between rows and cells. Something like this (note: instead of text may be anything, layouts, imags, etc.):
I can create something similar with panelGridLayout, but when adding borders, the margins between rows still remain.
<af:panelGridLayout id="pgl3">
<af:gridRow height="auto" id="gr4">
<af:gridCell id="gc9"
inlineStyle="padding-top:5px; padding-bottom:5px; padding-right:20px; padding-left:20px; border-right:solid thin; border-left:solid thin; border-top:solid thin; border-bottom:solid thin; border-color:Silver;">
<af:outputText value="Text1"/>
</af:gridCell>
<af:gridCell id="gc8"
inlineStyle="padding-top:5px; padding-bottom:5px; padding-right:20px; padding-left:20px; border-right:solid thin; border-top:solid thin; border-bottom:solid thin; border-color:Silver;">
<af:outputText value="Text2"/>
</af:gridCell>
</af:gridRow>
<af:gridRow height="auto" id="gr6">
<af:gridCell id="gc10"
inlineStyle="padding-top:5px; padding-bottom:5px; padding-right:20px; padding-left:20px; border-right:solid thin; border-left:solid thin; border-top:solid thin; border-bottom:solid thin; border-color:Silver;">
<af:outputText value="Text3"/>
</af:gridCell>
<af:gridCell inlineStyle="padding-top:5px; padding-bottom:5px; padding-right:20px; padding-left:20px; border-right:solid thin; border-top:solid thin; border-bottom:solid thin; border-color:Silver;"
id="gc6">
<af:outputText value="Text4"/>
</af:gridCell>
</af:gridRow>
</af:panelGridLayout>
Which will look like:
Also,I noticed this solution ( https://community.oracle.com/thread/1104448), but I would prefer to avoid ADF table, since I only need layout.
Thanks
Use JSF <h:panelGrid>, It will give the look and feel of an html table:
<h:panelGrid columns="2" id="pg1" width="100%" frame="box" rules="all">
<af:outputText value="Text1" id="ot1"/>
<af:outputText value="Text2" id="ot2"/>
<af:outputText value="Text3" id="ot3"/>
<af:outputText value="Text4" id="ot4"/>
</h:panelGrid>
I'm not sure it will work or not, but trying it does not hurt,
put your html tags inside the value attribute of <af:outputFormatted> for example:
<af:outputFormatted styleUsage="yourStyle"
value="<b>any output</b>"/>
Trinidad table will give you exact html-table layout.
However you should avoid using html things in your adf application if possible. If your requirements is only to have table without header, you can style af:table and turn off headers layer in your skin like this:
.noHeader af|column::column-header-cell{
display: none;
}
af:panelGroupLayout in layout=horizontal mode will render html table around its content too, however you will have only one row and almost no control of it behavior.
af:panelGridLayout will render grid that may be used as table layout too.
How about using the listView component - http://jdevadf.oracle.com/adf-richclient-demo/faces/components/listView/listViewTabular.jspx
Related
I am beginer to oracle ADF and I want to know, is there any component to create three dot menubar or button in oracle ADF as below? I have checked the docs and browsed but have no luck.
Appreciated any help on this.
try the following code and let me know if it works.
<af:panelGridLayout id="pgl1">
<af:gridRow id="gr1">
<af:gridCell id="gc1">
<af:commandButton text="Button 1" id="cb1" styleClass="circular" inlineStyle="height:30px;width:30px;background-color:Black;"/>
</af:gridCell>
<af:gridCell id="gc2">
<af:commandButton text="Button 2" id="cb2" styleClass="circular" inlineStyle="height:30px;width:30px;background-color:Black;"/>
</af:gridCell>
<af:gridCell id="gc3">
<af:commandButton text="Button 3" id="cb3" styleClass="circular" inlineStyle="height:30px;width:30px;background-color:Black;"/>
</af:gridCell>
</af:gridRow>
</af:panelGridLayout>
Add the following style to your stylesheet.
.circular {
border-radius: 50%;
}
i have an af:table as following :
<f:facet name="first" >
<af:panelCollection id="pc1" styleClass="AFStretchWidth"
binding="#{pageFlowScope.bean.pg}">
<af:table value="#{bindings.list.collectionModel}"
var="row" columnStretching="multiple"
selectionListener="#{pageFlowScope.bean.selectListner}"
selectedRowKeys="#{bindings.list.collectionModel.selectedRow}"
rowSelection="single" width="100%"
rows="#{bindings.list.rangeSize}"
autoHeightRows="1">
<af:column width="21%"
headerText="#{Bundle.data1}">
<af:outputText value="#{row.data1}" id="ot2"/>
</af:column>
<af:column width="20%"
headerText="#{Bundle.data2}">
<af:outputText value="#{row.data2}"
id="ot1"/>
and so one for the rest of the columns
the problem is after I insert more than one row to the table
the scroll bar appears and the headers are miss-aligned with the contents as shown in the following picture :
I have already set the attribute Valign of <af:gridCell> to middle, but still cannot make them line up horizontally.
The code is like:
<af:panelGridLayout>
<af:gridRow>
<af:gridCell valign="middle">
<af:panelLabelAndMessage />
</af:gridCell>
<af:gridCell valign="middle">
<af:selectBooleanCheckbox simple="true" readOnly="true" selected="true" />
</af:gridCell>
</af:gridRow>
</af:panelGridLayout>
I also tried valign="strectch", however, when the selectBooleanCheckbox is selected the center of tick remains higher than that of panelLabelAndMessage.
Is there something that I didn't take into consideration?
Use labelstyle="width:100px" in your panelLabelAndMessage and selectBooleanCheckbox use pixel value according to your requirement
I am developing a web application using ADF (JDeveloper 11.1.2.4). I have created a template in that I have panelGroupLayout. For this grouplayout I have set a background image, and created a test.jsf page from this template.
When I am running this page directly, the background image is getting displayed in the browser. I have placed this page in a bounded taskflow.
My problem is when I running this page from a bounded taskflow the background image is not getting displayed.
Image is getting displayed for this URL:
non-promising local IPv4 URL "login"
Image is not getting displayed for this URL:
non-promising local IPv4 URL "admin-flow-definition"
My code:
<f:facet name="top">
<af:panelGroupLayout id="pt_pgl1" layout="horizontal" valign="top">
<af:panelGroupLayout id="pt_pgl20">
<af:image source="#{resource['images:EasyRUN_Banner_1Part.png']}" shortDesc="EasyRUN Banner "
id="pt_i1"/>
</af:panelGroupLayout>
<af:panelGroupLayout id="pt_pgl21" layout="horizontal"
inlineStyle='background-image:url("ERUnBPart2.png");'>
<af:spacer width="37" height="103" id="pt_s45"/>
</af:panelGroupLayout>
<af:panelGroupLayout id="pt_pgl19" layout="vertical"
inlineStyle='background-repeat:no-repeat; background-image:url("ERUnBPart2.png");'
halign="left">
<af:spacer width="145" height="20" id="pt_s42"/>
<af:outputText value="#{attrs.user}" id="pt_ot1"/>
<af:spacer width="10" height="20" id="pt_s43"/>
<af:commandLink text="Logout" id="pt_cl1"/>
<af:spacer width="100" height="35" id="pt_s44"/>
</af:panelGroupLayout>
</af:panelGroupLayout>
</f:facet>
Make sure your images are not under WEB-INF folder, but somewhere under public_html folder.
If your image is under a folder structure like:
MyApplication/MyViewController/public_html/images
Your page can reference this way:
<af:commandMenuItem [..] icon="../images/GlobalSearch/key.gif"/>
How can I center the in adf template ?
Following is the code
<af:panelGroupLayout id="pt_g1" layout="horizontal" valign="middle" halign="start" rendered="true">
<af:spacer width="15" id="pt_s1"/>
<af:image id="pt_i1" source="/images/logo.png" inlineStyle="height:70px; width:70px;"/>
<af:outputText value="My First Application" id="pt_ot1" inlineStyle="font-size:x-large; color:White;" noWrap="true"/>
</af:panelGroupLayout>
I am using JDeveloper 12c
--- UPDATE ---
I've tried following. But it gives slight different behaviour than expected.
<af:panelStretchLayout id="pt_psl2" startWidth="33%" endWidth="33%">
<f:facet name="center">
<af:panelGroupLayout id="pt_pgl1" inlineStyle="min-width:33%;" halign="center" valign="middle">
<af:outputText value="test application" id="pt_ot1" inlineStyle="font-size:x-large; color:White;" noWrap="true"/>
</af:panelGroupLayout>
</f:facet>
<f:facet name="start">
<af:panelGroupLayout id="pt_pgl3" inlineStyle="min-width:33%;">
<af:spacer width="15" id="pt_s1"/>
<af:image id="pt_i1" source="/images/test_logo.png" inlineStyle="height:70px; width:70px;"/>
</af:panelGroupLayout>
</f:facet>
<f:facet name="end">
<af:panelGroupLayout id="pt_pgl2" inlineStyle="min-width:33%;" halign="end" valign="middle">
<af:image source="images/home.png" id="pt_i2"/>
<af:link text="Home" id="pt_l5" inlineStyle="color:White;"/>
</af:panelGroupLayout>
</f:facet>
</af:panelStretchLayout>
As we can see in output it starts content from the left side, while I want logo to start from left side, Application title in middle of the page and other links section from right side of the page.
How can I achieve the same ?
Use a af:panelStretchLayout instead of af:panelGroupLayout. It has 5 facets. You can put your content in the "center" facets and either remove the others or put a spacer in them.
Assuming on one of the later releases of ADF you should be looking into af:panelGridLayout to implement those type of UIs.