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.
[Moved] Layout client side exposed api
Last edited by Oleg on 07 Mar 2012, 15:39, edited 1 time in total.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
- kwintesencja
- Posts: 316
- Joined: 08 Feb 2010, 20:33
- Location: Brazil
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
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
Att,
--
Rafael Mauricio Pestano
Primefaces 5.x + JavaEE7(Glassfish 4.x and Wildfly 8)
Conventions Framework
Blog
@realpestano
--
Rafael Mauricio Pestano
Primefaces 5.x + JavaEE7(Glassfish 4.x and Wildfly 8)
Conventions Framework
Blog
@realpestano
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:
Just remove "width: 100%;" from #content and .title.
Good luck.
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%;*/
}
Good luck.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
- kwintesencja
- Posts: 316
- Joined: 08 Feb 2010, 20:33
- Location: Brazil
thanks for the tips
Att,
--
Rafael Mauricio Pestano
Primefaces 5.x + JavaEE7(Glassfish 4.x and Wildfly 8)
Conventions Framework
Blog
@realpestano
--
Rafael Mauricio Pestano
Primefaces 5.x + JavaEE7(Glassfish 4.x and Wildfly 8)
Conventions Framework
Blog
@realpestano
Hi,
Client-side widget's methods sizePane(), open(), close(), toogle() are available now in 0.4.0-SNAPSHOT.
Have fun.
Client-side widget's methods sizePane(), open(), close(), toogle() are available now in 0.4.0-SNAPSHOT.
Have fun.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
- kwintesencja
- Posts: 316
- Joined: 08 Feb 2010, 20:33
- Location: Brazil
Great!
I'll play with it when i got some free time. Keep the wonderful work!
I'll play with it when i got some free time. Keep the wonderful work!
Att,
--
Rafael Mauricio Pestano
Primefaces 5.x + JavaEE7(Glassfish 4.x and Wildfly 8)
Conventions Framework
Blog
@realpestano
--
Rafael Mauricio Pestano
Primefaces 5.x + JavaEE7(Glassfish 4.x and Wildfly 8)
Conventions Framework
Blog
@realpestano
- kwintesencja
- Posts: 316
- Joined: 08 Feb 2010, 20:33
- Location: Brazil
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:
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.
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>
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.
Att,
--
Rafael Mauricio Pestano
Primefaces 5.x + JavaEE7(Glassfish 4.x and Wildfly 8)
Conventions Framework
Blog
@realpestano
--
Rafael Mauricio Pestano
Primefaces 5.x + JavaEE7(Glassfish 4.x and Wildfly 8)
Conventions Framework
Blog
@realpestano
- kwintesencja
- Posts: 316
- Joined: 08 Feb 2010, 20:33
- Location: Brazil
ok got it working with jQuery ready function handler:
Code: Select all
jQuery(function() {
mainLayout.sizePane('north',500);
});
Att,
--
Rafael Mauricio Pestano
Primefaces 5.x + JavaEE7(Glassfish 4.x and Wildfly 8)
Conventions Framework
Blog
@realpestano
--
Rafael Mauricio Pestano
Primefaces 5.x + JavaEE7(Glassfish 4.x and Wildfly 8)
Conventions Framework
Blog
@realpestano
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.
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.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
- kwintesencja
- Posts: 316
- Joined: 08 Feb 2010, 20:33
- Location: Brazil
i need that cause my north pane size is dynamic and dynamic size attribute does not work when stateCookie is enabled, for exampleBy the way, why do you need to call mainLayout.sizePane('north',500); by JavaScript? Can you not set size with <pe:layoutPane size="500" .../>?
Code: Select all
<pe:layoutPane position="north" size="#{myController.someBoolean ? '125':'155'}"
do you know another way to do that?
Att,
--
Rafael Mauricio Pestano
Primefaces 5.x + JavaEE7(Glassfish 4.x and Wildfly 8)
Conventions Framework
Blog
@realpestano
--
Rafael Mauricio Pestano
Primefaces 5.x + JavaEE7(Glassfish 4.x and Wildfly 8)
Conventions Framework
Blog
@realpestano
-
- Information
-
Who is online
Users browsing this forum: No registered users and 18 guests