voyent
panelTab, calling Javascript  XML
Forum Index -> Components
Author Message
Alex

Joined: 08/Feb/2006 00:00:00
Messages: 22
Offline


I'm trying to call a Javascript function after the content of a panelTab is fully loaded, not prior.

I've tried to do some customizing to the component like so:
------
Element button = domContext.createElement(HTML.INPUT_ELEM);
button.setAttribute(HTML.TYPE_ATTR,"submit");
button.setAttribute(HTML.NAME_ATTR, tabbedPane.getClientId(facesContext) + "." + tabIndex);
button.setAttribute("onclick","javascript:iceSubmit(form,this,event); myTest(); return false;");
button.setAttribute(HTML.VALUE_ATTR,label);
------

But myTest() is called to early so the content is not yet available to it!

Any ideas? Thx
Alex
gregory_m

Joined: 17/Jan/2005 00:00:00
Messages: 130
Offline


Hi Alex,

Before I can help with a solution I would like to confirm what you are doing.

It appears that you are modifying the TabbedPaneRenderer in the tabbedpane-icefaces tutorial. ( thats cool I'm glad to see your actually using one of our tutorials).

Also, it sounds like you want to call your own javascript function in the onclick of a tab and in your javascript function you want to access the content associated with tab that is being clicked.

Your observation that the tab content is not available to the onclick handler makes sense as the iceSubmit that takes place in the onclick handler is what causes the tab content to be rendered. Thus, the content will not be available until the iceSubmit request has been processed.

I will take a closer look at the tabbedpane-icefaces TabbedPaneRenderer and see if there is way to accomplish what you are trying to do.

Alex please let me know if my interpretation is correct or not.

Thanks,
Greg
Alex

Joined: 08/Feb/2006 00:00:00
Messages: 22
Offline


Hi Greg

I think you got me right! What I am trying to achieve is to call a JS function after the newly called content of a tab is already inserted into the DOM.

Purpose is the flexible sizing and positioning of div tags that are content of one of the tabs in the panelTab, thus not available before the iceSubmit is entirely processed.

So I need to make sure that my JS function is called after iceSubmit is finished and not during. Of course any alternative way is fine too!

Maybe it would be better to accept server communication and letting a managed been get the job done? Means sizing the divs or icefaces components through a method?
Any thoughts on that!

Hope you have all the info you need. Thnx!
Alex
gregory_m

Joined: 17/Jan/2005 00:00:00
Messages: 130
Offline


Hi Alex,

I believe the managed bean approach will fit best with ICEfaces. I have done a very simple test with the tabbedpane-icefaces tutorial renderer and managed beans.

What I did was placed a panelGroup inside one of my panelTabs and then I bound the style attribute of the panelGroup to a variable in one of my managed beans. The panelGroup is/renders a DIV. We recommend using the style attribute to position and size the panelGroup/DIV.

I also added a couple of radio buttons to the panelTabbedPane. These radio buttons were also bound to the same style variable in my managed bean. Therefore the size and position of the panelGroup/DIV can be switched using the radio buttons.

It seems to work well.

Your requirements seem abit more advanced than my simple example. I believe you would like to have the panelGroup style applied when a TabChangeEvent occurs. I will work on another test case using a TabChangeListener in my managed bean.

I'll let you know how it goes.

cheers,
Greg
gregory_m

Joined: 17/Jan/2005 00:00:00
Messages: 130
Offline


Hi Alex,

I think a tabChangeListener is what you need. The tabbedpane-icefaces tutorial uses the MyFaces component and tags with an icefaces d2d renderer. Therefore you will need to define an org.apache.myfaces.custom.tabbedpane.TabChangeListener for your application.

In my test I just implemented the TabChangeListener in the TabbedPaneBean.

package com.icesoft.tutorial;

import java.io.Serializable;
import org.apache.myfaces.custom.tabbedpane.TabChangeEvent;
import org.apache.myfaces.custom.tabbedpane.TabChangeListener;
import javax.faces.event.AbortProcessingException;

public class TabbedPaneBean
implements Serializable, TabChangeListener


The style attribute of the panelGroup/DIV can be applied in the processTabChange method of the TabbedPaneBean.

public void processTabChange(TabChangeEvent tabChangeEvent) throws AbortProcessingException
{
System.out.println("Tab index::" + tabChangeEvent.getNewTabIndex());
// add code to modify the bound style variable

}


Then add the tabChangeListener tag to your page. It must be contained inside the < x: panelTabbedPane > .

< x:tabChangeListener type="com.icesoft.tutorial.TabbedPaneBean" />

Please let me know if this works for you.

Thanks,
Greg


Message was edited by: gregory_m
Alex

Joined: 08/Feb/2006 00:00:00
Messages: 22
Offline


The tabChangeListener works nicely and I can definitely use it for some of the funcionality I need. Thanks a lot!

I still have problems with the positioning and sizing though. The < ice: panelGroup> renders as a span element! so I can't give it sizing or positioning information.

How can I get the < ice: panelGroup> to render as a < div>?

Thnx
Alex
gregory_m

Joined: 17/Jan/2005 00:00:00
Messages: 130
Offline


I am sorry the information I gave you about the panelGroup is not correct. The ice panelGroup in the Alpha release renders a SPAN.

Since the last Alpha release we have changed the panelGroup renderer. It now renders a DIV.

This change will be available in our next release.
 
Forum Index -> Components
Go to:   
Powered by JForum 2.1.7ice © JForum Team