<p:layoutUnit> with collapsed property issue

[bala_osho]

Hi
Created a layout which contains two layout units i.e Left and Centre.
By default i am displaying the left layout unit in collapsed state by setting collapsed attribute to true.
Created a command link in centre layout unit and on click of that trying to expand the left layout unit by setting the collapsed attribute value to false in backing bean.
But it's not working .
JSF page:

<p:layout style="height:679px;position:relative;padding:0px !important;margin:0px;">
<p:layoutUnit position="left" width="339" resizable="true" collapsible="true" collapsed="#{helloBean.collapseLeft}" styleClass="2_col_layout;" style="background-color:#e8e8e8;height:100%;padding:0px 0px 0px 0px; margin:0px;border-top: 0px !important;" scrollable="true" id="leftLayoutUnit">
<h:form id="leftPanelsummaryForm">
<ui:include src="/display/summary.xhtml" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" style="padding:0px !important;margin-top:-4px;border-right:border-top: 1px solid #D2D595 !important;" scrollable="true" width="941">
<div class="centerPanel_2c"><table><tr><td>
<h:form id="summaryForm">

<p:commandLink actionListener="#{helloBean.onClickLink}" update="leftLayoutUnit"></p:commandLink>
</h:form>
</p:layoutUnit>
</p:layout>
In managed bean:

public void onClickLink(ActionEvent ae) {
this.collapseLeft=false;
}

Pls help me how to resolve this issue.

Thanks,
Bala

[andyba]

Read the User Guide. It is very specific about how you update individual layoutUnits.

[bala_osho]

If possible provide some examples .
I tried all the options by going through the User Guide 2.2.1.
But not resolved.

[andyba]

If possible provide some examples .
I tried all the options by going through the User Guide 2.2.1.
But not resolved.

Sorry, I don't remember much about 2.2.1, I use at least PF3+

[bala_osho]

If possible provide some examples .
I tried all the options by going through the User Guide 2.2.1.
But not resolved.

Sorry, I don't remember much about 2.2.1, I use at least PF3+

Not a problem.provide me a example using PF3+ .

[badhuman7]

Hi
Created a layout which contains two layout units i.e Left and Centre.
By default i am displaying the left layout unit in collapsed state by setting collapsed attribute to true.
Created a command link in centre layout unit and on click of that trying to expand the left layout unit by setting the collapsed attribute value to false in backing bean.
But it's not working .
JSF page:

<p:layout style="height:679px;position:relative;padding:0px !important;margin:0px;">
<p:layoutUnit position="left" width="339" resizable="true" collapsible="true" collapsed="#{helloBean.collapseLeft}" styleClass="2_col_layout;" style="background-color:#e8e8e8;height:100%;padding:0px 0px 0px 0px; margin:0px;border-top: 0px !important;" scrollable="true" id="leftLayoutUnit">
<h:form id="leftPanelsummaryForm">
<ui:include src="/display/summary.xhtml" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" style="padding:0px !important;margin-top:-4px;border-right:border-top: 1px solid #D2D595 !important;" scrollable="true" width="941">
<div class="centerPanel_2c"><table><tr><td>
<h:form id="summaryForm">

<p:commandLink actionListener="#{helloBean.onClickLink}" update="leftLayoutUnit"></p:commandLink>
</h:form>
</p:layoutUnit>
</p:layout>
In managed bean:

public void onClickLink(ActionEvent ae) {
this.collapseLeft=false;
}

Pls help me how to resolve this issue.

Thanks,
Bala

Dude i think so collapsed="#{helloBean.collapseLeft}" attribute is used for "True" or "False" but not as your wish and it is boolean given.so we need to utilize this attribute as given but not our wish..and u have given bean..so i dont think so it will work.

So can u use <p:ajax > Tag for dynamic change

[andyba]

Like I said, you really should read the User Guide about layout and layoutUnit. In particular about using AJAX to both persist and control layoutUnit state.

Bind the collapsed state of the west layoutUnit in a session bean.

Code: Select all

    private boolean westUnitCollapsed;

    public boolean isWestUnitCollapsed() {
        return westUnitCollapsed;
    }

    public void setWestUnitCollapsed( boolean westUnitCollapsed ) {
        this.westUnitCollapsed;
    }

in your layout you can do this

Code: Select all

   <p:layout collapsible="true" collapsed="#{sessionBean.westUnitCollapsed}" widgetVar="layout">
      <p:layoutUnit position="west" collapsible="true" collapsed="#{sessionBean.westUnitCollapsed}">...</p:layoutUnit>
   </p:layout>

Your commandButton calls an actionListener in the sessionBean which could do something like this

Code: Select all

    public void toggleWestUnit( ActionEvent ae ) {
       this.westUnitCollapsed = !westUnitCollapsed;
       RequestContext.getCurrentInstance().execute("layout.toggle('west');");
    }

Note that I am still keeping the collapsed state for the west layoutUnit so that if you come back to the page the layoutUnit will still be collapsed.
The rest should be obvious and may even work.

Edit: my original solution had to be heavily edited. After reading the User Guide again I realised that you control the state of layoutUnits in a layout via the layout widgetVar and not the individual layoutUnits themselves. I also removed the layout binding as it was not needed.