[Moved] Layout client side exposed api

[Oleg]

Hi guys, can i do something like this:viewtopic.php?f=3&t=18323

with your layout? im having trouble trying to use the jQuery api with primefaces layout as it does not expose jQuery layout api(or i dont know how to use )

I found extensions layout a great component and im considering migrating to it as it provides stateSaving(great feature).

Congrats for this project.

===========================================================================

Hi and welcome to the forum!

Unfortunately, but we don't expose client-side API you need as well But if you would create an issue in our issue tracker we will set it on our roadmap. What client-side API do you need? I would propose to add:

sizePane, open, close, toogle

methods. One problem is that PF Ext. Layout can't contain pe:layout inside of pe:layout. There is only one layout widget. Nested layouts are handled direct by embedded pe:layoutPane. That means we have to specify nested panes somehow. I propose to use underline, e.g. "center_west" or "south_south". We already use this syntax internal. So, sizePane() call can look like then as follows:

sizePane("west", 300) // resize top (not nested) "west" pane
sizePane("center_north", 300) // resize nested "north" pane in the top (not nested) "center" pane.

Is it okey for your?

Best regards.
Oleg.

===========================================================================

Great!!

issue created:#111.

[kwintesencja]

Hi there,

Also interested and following this issue.

Here is your layout in action, thanks for your great work: http://conventions-rpestano.rhcloud.com/conventions/

next deploy i will mention pf-ext in the footer

[Oleg]

Hi Rafael,

Wow. I'm glad to see our layout in your project! Client-side API will be available next week (after 0.3 release). I have also two tipps for your layout. At the moment you have not necessary horizontal scrollbars in your center pane. You can get them away if you will adjust your layout.css as follows:

Code: Select all

#content {
    float: left;
    /*width: 100%;*/
}

.title {
    height: 30px;
    margin-left: 10px;
    padding: 8px 0 0 20px;
    /*width: 100%;*/
}

Just remove "width: 100%;" from #content and .title.

Good luck.

[kwintesencja]

thanks for the tips

[Oleg]

Hi,

Client-side widget's methods sizePane(), open(), close(), toogle() are available now in 0.4.0-SNAPSHOT.

Have fun.

[kwintesencja]

Great!
I'll play with it when i got some free time. Keep the wonderful work!

[kwintesencja]

Hi Oleg and PF Ext team,

i've being playing with the layout client side api and it works great, the only problem is that i cannot reference layout widgeVar in any javascript function only in jsf components, for example:

Code: Select all

   
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
        xmlns:pe="http://primefaces.org/ui/extensions">
    
     <f:view contentType="text/html">

        <h:head>
            <title>Title</title>
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
        </h:head>

         <h:body>
             <pe:layout widgetVar="mainLayout" stateCookie="true">
                 <pe:layoutPane position="north" size="100">
                     
                     North area
                 </pe:layoutPane>
                 
                 <pe:layoutPane position="center">
                     <h:form>
                        <p:commandLink value="resize" onclick="mainLayout.sizePane('north',200);"/>//it works
                         
                     <script type="text/javascript">
                         mainLayout.sizePane('north',500);//it does not work
                     </script>
                     </h:form>
                 </pe:layoutPane>
                 
                 
             </pe:layout>
             
         </h:body>
     </f:view>
</ui:composition>

so when i load the page i get "mainLayout is undefined" see the pic:



Maybe when the page is loading the widget is really undefined but in that case what should i do? my idea is to place a javascript in the page so when the user access it the layout is resized.

thanks in advance.

[kwintesencja]

ok got it working with jQuery ready function handler:

Code: Select all

     jQuery(function() {
                             mainLayout.sizePane('north',500);
                        });

[Oleg]

Hi Rafael,

Yes, that's right. Layout widget is initialized in jQuery ready function. The same is valid for all (or almost all) PF and PF Ext. components. If you want to access any widget direct after page load, you should do this in jQuery ready function.

By the way, why do you need to call mainLayout.sizePane('north',500); by JavaScript? Can you not set size with <pe:layoutPane size="500" .../>?

Good luck.

[kwintesencja]

By the way, why do you need to call mainLayout.sizePane('north',500); by JavaScript? Can you not set size with <pe:layoutPane size="500" .../>?

i need that cause my north pane size is dynamic and dynamic size attribute does not work when stateCookie is enabled, for example

Code: Select all

 <pe:layoutPane position="north" size="#{myController.someBoolean ? '125':'155'}"

only work when stateCookie is disabled so i have to explicity call sizePane depending on the page user is.

do you know another way to do that?