Stretching af:panelTabbed component

Hi All,
i am having a af:panelTabbed which contains 3 tabs the middle tab's width is quite large as it contains a table and also the height becaule it have table as well as form under it.
I have applied styleClass="AFStretchWidth" to the af:panelTabbed but it only stretches the width of the tab but ont height.
So how can i stretch the height as well as width of tabs...
-Thanks.

In the af:showDetailItem set the property StretchChildren to true...this should do it.
Regards
Grant Ronald
Author: Quickstart Guide to Fusion Development Oracle JDeveloper Oracle ADF

Similar Messages

Panel Stretch Layout is not a valid child of PanelTabbed Component

With reference to the use case shown here(' [Table with Header Left,Footer Right|http://www.oracle.com/technetwork/testcontent/thlfrpattern-083015.html] ") :
I tried to embed the table inside the tabbed pane.
Here is the code for the same:
<f:view>
<af:document id="d1">
<af:form id="f1">
<af:panelSplitter id="ps1" orientation="vertical" splitterPosition="47">
<f:facet name="first"/>
<f:facet name="second">
<af:panelSplitter id="ps2" splitterPosition="144">
<f:facet name="second">
<af:panelTabbed id="pt1">

<af:showDetailItem text="Embedded in a Tab" id="sdi1"/>
<af:panelStretchLayout id="psl1" bottomHeight="31em" topHeight="62em" >
<f:facet name="bottom">
<af:panelStretchLayout id="psl2" endWidth="103em">
<f:facet name="end">
<af:panelGroupLayout id="pgl2" valign="middle" halign="end" layout="horizontal" >
<af:commandButton text="Save" id="cb1" accessKey="S"/>
<af:commandButton text="Cancel" id="cb2" accessKey="C"/>
<af:spacer width="6" height="31" id="s2"/>
</af:panelGroupLayout>
</f:facet>
</af:panelStretchLayout>
</f:facet>
<f:facet name="center">

</f:facet>
<f:facet name="top">
<af:panelGroupLayout id="pgl1" layout="horizontal">
<af:spacer width="6em" height="31em" id="s1"/>
<af:image source="/coffee.bmp" shortDesc="demo icon" id="i1"/>
<af:outputText value="List of Cool Employees" id="ot1"
inlineStyle="color:Black; font-weight:bold; font-size:large;"/>
</af:panelGroupLayout>
</f:facet>
</af:panelStretchLayout>
</af:panelTabbed>
</f:facet>
</af:panelSplitter>
</f:facet>
</af:panelSplitter>
</af:form>
</af:document>
</f:view>
Inside the PanelTabbed Component I cannot insert the PanelStretchLayout component.
The error it is displaying is that the Panel Stretch Layout is not a valid child of the PanelTabbed Component.
Please let me know how can I embed the 'Table with Header Left,Footer Right' in case of a PanelTabbed Component as shown in the use case in the documentation.

Hi,
Yes, children of af:panelTabbed must be af:showDetailItem - these represent each tab. You then add further components (e.g. your panelStretch, table etc.) as children to the af:showDetailItem.
Looking at your code, you have a showDetailItem but the panelStretch is not inside it. In fact nothing is inside the showDetailItem as the XML tag is self-closed (i.e. has a / at the end). You need to remove the / and add a closing tag (</af:showDetailItem) after your panelStretch.
Change your code to something like this:
<af:panelTabbed id="pt1">
<af:showDetailItem text="Embedded in a Tab" id="sdi1">
<af:panelStretchLayout id="psl1" bottomHeight="31em" topHeight="62em" >
</af:panelStretchLayout>
</af:showDetailItem>
</af:panelTabbed>Alternatively in the JDeveloper Structure view you could drag the panelStretch onto the showDetailItem so that it shows it as a child.
Kevin.

Apply custom style to the first tab of af|panelTab component

Hi,
Could anyone please advice me how to apply custom style to the first and last tabs of af|panelTab component.
For eg- If I have 6 tabs and I want tab1 and tab6 to be in Red and rest of the tabs in blue, what should I add. Please advice.
Regards
Jeffry Roy
Edited by: Jeffry on Mar 8, 2011 4:45 AM

Hi Rishit,
Please let me know if you have applied Fix pacK3 for Xcelsius.
I have seen this issue in FP2, which got fixed in FP3. The workaround you can try is including a blank cell.
Thanks,
Amit.

Unable to switch between Tabs in a af:panelTabbed component

Hi all,
Good Day,
I am working on a POC which has 6 tabs in an af:panelTabbed component. All the tabs (af:showDetailItem components) are with the default properties.
While running the application it is working fine till one or two tab clicks but after clicking on 1 or 2 tabs , with the next tab click the application seems to be not responding
and I am getting the below error in the server logs.
*<UIXShowDetail> <broadcast> Event org.apache.myfaces.trinidad.event.DisclosureEvent[phaseId=INVOKE_APPLICATION 5,component=RichShowDetailItem[UINodeFacesBean, id=sdi4],expanded=true] was delivered to a showDetail already in that disclosure state.*
I am not sure what would have gone wrong. Please help me in this.
Thanks In Advance.

Hi paramu,
Thanks for your help. I haven't created bindigs for af:showDetailItem.
and in each tab I have created some tables from datasource and Name of each tab is different.
Regards
Phanindra.

Dynamic Tabs using the PanelTabbed component

I would like to use the PanelTabbed component which is bound to a managed bean to render tabs dynamically. The page will simply consist of a navigationTree on the left and the panelTabbed on the right. When the user clicks a node in the tree I would like to PPR the panelTabbed component to display the new tab. If you know of any examples or could point me in the right direction it would be greatly appreciated!
Thanks,
Matt

Hello Matt,
panelTabbed won't do for that, you're going to need navigationPane using "tabs" hint. The navigationPane should have a partialTriggers on the tree and its value should be a custom MenuModel instance that get populated from click made on the tree.
It's not overwhelming, but I fear there's some complexity in achieving what you want.
Regards,
~ Simon

Increase height of panelTabbed component

hi,
I wanted to increase the height of panelTabbed component using css. what is d class that i have to use ?

Or you have to skin the richShowDetailItem inside
Are you sure you want to do that? Usually you should just put it in some stretchning layout.

Vertical panelTabbed component

Hi all,
Is it possible to arrange ShowDetailItems inside a PanelTabbed component in vertical order. The default is horizontal. Is there a work around to make it appear in vertical order.
Im using Jdev 11.1.1.3.0
Thanks in advance.
Surangi.

I'd like to extend this question and ask if anyone has implemented vertically stacked auxiliary links as seen at the bottom of the Page Layout section of the RCUX guidelines (http://stux.us.oracle.com/blafstaging/blafPlus/VisualDesign/Shepherd/pageLayout_P_SSI.html) ?

Cannot stretch af:panelTabbed in panelStretchLayout

I work in jdev 11.1.2.3.
Create a jspx page (based on the tuturiol example) like this:
af:form
01-af:panelStretchLayout
02--f:facet - center
03---af:decorativeBox
04----f:facet - center
05-----af:panelSpliter
06------f:facet - first
07*-------af:panelAccourdion -pa1*
08------af:showDetailItem - 1
08------af:showDetailItem - 2
09-----f:facet - second
10------af:panelSplitter
11------f:facet - first
12-------af:panelGroupLayout - scroll
13--------af:decorativeBox
14---------f:facet - center
15----------af:panelStretchLayout
16-----------f:facet - center
17------------af:panelTabbed
18*--------------af:showDetailItem - 1*
19*---------------af:showDetailItem - 2*
20*---------------af:showDetailItem - 1*
when it runs:
08-----af:showDetailItems can fill the af:panelAccordion fully.
but
17------------af:panelTabbed cannot be filled fully.(18-19) af:showDetailItem only occupy upper half of the (17)af:panelTabbeds
and have tried many different settings for the components above, cannot stretch (18-19) af:showDetailItems in panelStretchLayout yet.
How to solve this problems
Thanks.
BAO
Edited by: user6715237 on 2013-3-19 上午1:47

set styleClass="AFStretchWidth" for (13) af:decorativeBox.
the (17)af:panelTabbed stretch in right-ward direction.
but cannot downward stretch yet, even set:
styleClass="AFStretchHeight" for (13) af:decorativeBox.
so now the page' up-half part is filled (only up-left part is filled before).
anyway it begin to work now.
thanks.
Edited by: user6715237 on 2013-3-19 上午2:20
Edited by: user6715237 on 2013-3-19 上午2:22

PanelTabbed auto height problem

Hey guys,
i want to know how to set auto height for panelTabbed componant to make it stretch in height depending on the content on it.
i tried it by css but it doesnt work.
waiting for your support guys thanks :)

Normally, panelTabbed has a showDetailItem as its direct child,Try to set the stretchChildrento First and check if this meets your requirement.
<af:panelTabbed id="pt1">
<af:showDetailItem text="showDetailItem 1" id="sdi1" stretchChildren="first"/>
</af:panelTabbed>

How to stretch the child components of a carousel item.

Dear All,
Use case:
I am putting a list of dvt graph on a carousel component but I am having a lot of trouble when it comes to sizing the components.
Consider the code below
<af:panelGroupLayout id="pgl1" layout="scroll">
     <af:carousel id="c1" var="item" value="#{pageFlowScope.myBean.dataList}">
          <f:facet name="nodeStamp">
               <af:carouselItem id="crslItem" text="#{item.title}" shortDesc="#{item.title}">
                    <af:panelGroupLayout id="pgl4" layout="vertical">
                         <dvt:lineGraph id="lg2">
                         </dvt:lineGraph>
                    </af:panelGroupLayout>
          </af:carouselItem>
          </f:facet>
     </af:carousel>
</af:panelGroupLayout>The graph seems to be cut and is not rendering all of the data. The legends and the columns are hidden.
I dont want to put a lot of inlinestyles there in putting the width and height.
I thought the carouselitem stretches its child component but that does not seem the case for me.
How do I do this?
What I want is that the size of the carouselitem would be equal to the size of the dvt line graph.
What can I do to achieve this?
Thanks
JDEV 11G PS5

<af:panelGroupLayout> does not stretch its children (even if it has got a sole child). Surrounding a component with an <af:panelGroupLayout> prevents it of being stretched by its parent (even if the parent is a components that stretches its children).
In your case the <af:carousel> component is not stretched because it is within an <af:panelGroupLayout>. Also the <dvt:lineGraph> is not stretched because it is surrounded with an <af:panelGroupLayout>.
Just remove both <af:panelGroupLayout> tags and try again.
(Note, that <af:panelGroupLayout layout="scroll"> may be stretched by its parent, but it does not stretch its own children even if it is stretched by its parent).
Dimitar

Help sizing panelTabbed components - how do I get it to 100% height

firefox 2.0.0.4
Is there any trick to getting a panelTabbed component to size itself (height and width) smartly? By default it always seems to be approx 200 pixels by 200 pixels, even if its children are bigger and even if I add my panelTabbed to a panelStretchLayout.
When I try to force the height of my panelTabbed to 100%, I get wierd results. For instance, the entire panelTabbed component disappears (I can't find it in my browser, almost as if the height gets set to zero).
When I look at the FusionOrderDemo home.jspx example, it looks like the author is hardcoding the panelTabs as a fixed height in pixels.
Has anyone figured out any tricks for getting panelTabbed componets to use a % of the screen?
I want to have a way that my panelTabbed component takes up as much space as my browser allows.
Thanks,
dave

This is the code for the page:
<af:form>
<af:panelGroupLayout inlineStyle="position:absolute">
<af:table value="#{bindings.EmployeeView1.collectionModel}" var="row"
rows="#{bindings.EmployeeView1.rangeSize}"
first="#{bindings.EmployeeView1.rangeStart}"
emptyText="#{bindings.EmployeeView1.viewable ? 'No rows yet.' : 'Access Denied.'}"
fetchSize="#{bindings.EmployeeView1.rangeSize}"
inlineStyle="width:100%; height:100%;">
<af:column sortProperty="EmpId" sortable="false"
headerText="#{bindings.EmployeeView1.hints.EmpId.label}">
<af:outputText value="#{row.EmpId}">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.EmployeeView1.hints.EmpId.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="FName" sortable="false"
headerText="#{bindings.EmployeeView1.hints.FName.label}">
<af:outputText value="#{row.FName}"/>
</af:column>
<af:column sortProperty="LName" sortable="false"
headerText="#{bindings.EmployeeView1.hints.LName.label}">
<af:outputText value="#{row.LName}"/>
</af:column>
</af:table>
</af:panelGroupLayout>
</af:form>
Well this is not the scenario I’m looking for, what I need to do is to place a table inside of a panel group and that panel group to be inside a panel splitter, actually the table shows up fine, but I just need to remove the box that surround it i.e the table size to fit with the surrounding box. So when I set the table width & height to 100% the table rows are not shown.

Paneltab always remember user prev selection but not programmatic disclosed

Hi,
Like the similar post Programmatic disclosure of showDetailItem under panelTabbed i would like the tab to be selected / disclosed based on the button the user click.
I have a paneltabbed component in a page called site which consists of 3 showdetailframe components ..let's call it as (tab1,tab2,tab3) . I have a button (go to site) in entirely different page called plot which should navigate to site page and open tab3 by default.
This works fine, for the first time. But let's say if user explictly clicked tab2 and then gone to plot page, click GoToSite button which navigates to Site page, but remembers the last selection user has made and selecting tab2 by default.
I have the following method in site page taskflow which is called always and evaluates the value which i set in the request scope on clicking GoToSite button.
     public void setCopyPlotTabOnSiteDetails()
          FacesContext context = FacesContext.getCurrentInstance();
          Map request = context.getCurrentInstance().getExternalContext().getRequestMap();
          Boolean copyPlotFlag = (Boolean)request.get("copyPlotReq");
          if (Boolean.TRUE.equals(copyPlotFlag) && panelTab != null)
               List<UIComponent> element = panelTab.getChildren();
               for (UIComponent child : element)
                    RichShowDetailItem sdi = (RichShowDetailItem)child;
                    if ("sdi2".equals(sdi.getId()))
                         sdi.setDisclosed(true);
                         _addAttributeChange(sdi, "disclosed", true);
                    AdfFacesContext.getCurrentInstance().addPartialTarget(sdi);
                    else
                    sdi.setDisclosed(false);
                    _addAttributeChange(sdi, "disclosed", false);
                    AdfFacesContext.getCurrentInstance().addPartialTarget(sdi);
          AdfFacesContext.getCurrentInstance().addPartialTarget(siteDetails);
               AdfFacesContext.getCurrentInstance().addPartialTarget(panelTab);
After following the post Programmatic disclosure of showDetailItem under panelTabbed i added this method call addAttributeChange
     private static void _addAttributeChange(UIComponent uic, String attribName,
                                                       Object attribValue) {
          try
               FacesContext fc = FacesContext.getCurrentInstance();
               ChangeManager cm = RequestContext.getCurrentInstance().getChangeManager();
               ComponentChange cc = new AttributeComponentChange(attribName, attribValue);
               cm.addComponentChange(fc, uic, cc);
          catch (Exception e)
               // TODO: Add catch code
               e.printStackTrace();
But is giving NullPointerException on ChangeManager.
Even otherwise, i have removed the option Enable User Customizations from my View Project (checked in web.xml) and removed the ShowDetailFrame tag in Adf-config.xml. Put the disclosed property in DontPersist attribute of all those showdetail frame components. But nothing worked, i face the same issues...Can any one please help me?
Regards
Prabhu

Hi,
why do you work so cmplicated. Wouldn't it be simpler to point the disclosed property to a managed bean that then evaluates whether true/false should be returned instead of parsing the component tree? The managed bean would need to be in viewScope. Also note that a request parameter should be read by a pahse listener (f:view afterMethod listening to RESTORE_VIEW) because the ADF Faces page is not rendered in a single round trip but deferred by default which means that subsequent requests are issued. So the first request will be intercepted and then the value added to a bean or attribute in view scope for use by the tabs.
Another cause of error we frequently see is that personalization is enabled (with or witjout MDS) in which case the tab selection is saved as personalizes setting.
Also have a look at: http://docs.oracle.com/cd/E23943_01/apirefs.1111/e12419/tagdoc/af_showDetailItem.html
See: disclosedTransient and disclosed property and how to use them
Frank

Component refresh from region

Hi All,
I am using JDeveloper 11.1.1.6.0.
I have created my ADF page having panelTabbed component (it is not a template). in each tabs, i have dragged other task flows as regions. I have a outputText on the page, which should be refreshing from a button click inside the region.
How do i achieve that?
below is the code
<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:f="http://java.sun.com/jsf/core">
   <af:pageTemplate viewId="/OverviewTemplate.jspx" id="OverviewTemplate">
      <f:facet name="userOverview">
         <af:panelStretchLayout id="psl1" styleClass="AFStretchWidth">
            <f:facet name="center">
               <af:panelTabbed id="pannelTabbedOverview"
                               binding="#{userBean.panelTabbed}">
                  <af:showDetailItem text="Overview" id="showDetailItem1"
                                     stretchChildren="first"
                                     binding="#{userBean.overviewTab}">
                     <af:panelStretchLayout id="overviewtabPSL" topHeight="25px">
                        <f:facet name="center">
                           <af:region value="#{bindings.overviewtaskflow1.regionModel}" id="r1"/>
                        </f:facet>
                     </af:panelStretchLayout>
                  </af:showDetailItem>
               </af:panelTabbed>
            </f:facet>
            <f:facet name="top">
               <af:panelBox text="PanelBox1" id="pt_pb1" styleClass="AFStretchWidth">
                        <af:outputFormatted value="#{bindings.userStatus.inputValue}" id="pt_of1"/>
               </af:panelBox>
            </f:facet>
         </af:panelStretchLayout>
      </f:facet>
   </af:pageTemplate>
</jsp:root>Here i want to refresh the userStatus value from a button which is inside overflowtaskflow1 region. Please help me out.
regards,
Rajan

set partial triggers to your outputFormatted component as similar to below example...
partialTriggers="r1:<btn-id>"Since some of the ADF components are naming-container (while generating IDs for child, their presence is considered by appending ID) ... so select r1 from Jdev's partial trigger selection window...and rest of the string you can get from the jsff page in your TF and append both with ":"
1. Say Jdev shows r1 reference as ":::r1"
2. Your btn reference inside TF from top component is "pt1:t1:btn1"
so your partial trigger would become 1+":"+2 = ":::r1:pt1:t1:btn1"
This is just an example, you might have to compute your strings for ppr.

Taskflow region page full browser stretch

how can i display contents of a page built using dropping a task flow as region on page in full browser window. how can i stretch the region to be displayed in full browser.
My page has a panel form layout, does having a panel form layout cause problem while trying to stretch the contents to full browser window.
Edited by: 963798 on Oct 14, 2012 8:47 PM

http://jdevadf.oracle.com/adf-richclient-demo/docs/tagdoc/af_panelStretchLayout.html
"If you try to put a component inside of this component and that child component does not support being stretched, then the component hierarchy is illegal. To make it legal, you need to insert another intermediate component between >this component and the child component. This intermediate component must support being stretched and must not stretch its children. An example of such a component that is commonly used for this purpose is <af:panelGroupLayout >layout="scroll">. By using a wrapper like this, you create a flowing layout area where nothing will be stretched inside of it. Examples of components that do not support being stretched inside of these panelStretchLayout facets (and >therefore need to be wrapped) include:
<af:panelBorderLayout>
*<af:panelFormLayout>*
<af:panelGroupLayout layout="default">
<af:panelGroupLayout layout="horizontal">
<af:panelLabelAndMessage>
<af:panelList>
<trh:tableLayout>

Get disclosed showDetailItem [panelTabbed] when page renders

Hello,
My Jdev version is 11.1.1.6.
I have a page where there are many showDetailItem under panelTabbed component at different levels.
These showDetailItems are showing regions implemented as bounded taskflow using fragments. I am controlling taskflow activation logic using a pageFlowScope variable setting the value using something like this:
<af:setPropertyListener from="tabLevel1"
to="#{pageFlowScope.TabLevel1}"
type="disclosure"/>Similarly other tabs are sharing variables as pageFlowScope.TabLevel2, pageFlowScope.TabLevel3...
When the page renders first time, the value of pageScope variable is not set, since no disclosure listener is fired yet. I can not assume to activate the first Tab's taskflow since user may not have access [authorization] to first tab and in that case, it is not rendered at all.
My problem is - How to figure out which tab is the first rendered tab at each level?
Is there a way to capture which tab is disclosed under each panelTabbed component? I can then do something like setting the pageFlowScope variable for that level. My tabs are fixed at design time, so I can hard code showDetailItem's component Id to check/set.
I tried binding panelTabbed in a bean and then try to iterate through it's children but it returns 0 children when page is rendered first time.
So apparently, I am stuck and don't know how to proceed on this. Any help is highly appreciated.
Thanks,
Jai

Hello,
Thanks for your response.
We are already using UIShell in our application. It is based on One-Page application concept.
Menu is opening the pages in dynamic tabs supported by UIShell.
The page has it's own tabs (showDetailItem under panelTabbed) defined at design time. I need to control activation of taskflows only when they are open.
It works fine after user starts interacting with the tabs as disclosureListener is fired but first time is an issue.
I need a solution to figure out the "open" tab at each level. Obviously, it's too late to change the design/navigation architecture of whole application.
Thanks,
Jai

Stretching af:panelTabbed component

Similar Messages

Maybe you are looking for