Using <p:remoteCommand> to call javascript outside Iframes

[Miguel Cubells]

Hi all.

In our application, we have a layout with a central panel, that needs to be dynamically changed with different content ( different .xhtml snippets ), when some options on the left panel are selected.
Looks like this is a common scenario in many applications, and I have found several related topics in the forum.
Some of them are trying to use Iframes, while others are trying to use dynamic <ui:include> with different URLs etc ...

Unfortunately, none of them seems to provide a "robust" solution.
We are opting by the "iframe" approach, but obviously it has some drawbacks.
For example, when using a Modal Dialog Window, only the Iframe is blocked, and not the other layout units in the parent document.


Interestingly, this topic caught my attention, which seems to use a <p:remoteCommand>to call javascript methods of a parent window from inside an Iframe.
http://forum.primefaces.org/viewtopic.p ... me#p106895

But from the explanations and comments, I just don't get it straightforward. Could someone, ( a PrimeFaces showcase would be great !! ) explain / show , how to use this approach to, for example, open a modal dialog from an Iframe, and ensure the whole screen ( including the parent window ) gets blocked ??

Thanks a lot in advance !!

Miguel

[Miguel Cubells]

Seems I just found the solution myself.

I will post it, in case someone is struggling with the same situation.

From inside the IFRAME ( in the Central Layout ) , we can have a button like this:

Code: Select all

<p:commandButton value="Options" icon="ui-icon-extlink" onclick="window.parent.test()" />

Which basically means : run a Javascript callback method named test() on the parent window, if the user clicks on the Button.

Then, on the parent .xhtml, which is the one that renders all the layout units, we should have a <p:remoteCommand> like the below one:

Code: Select all

<p:remoteCommand name="test" actionListener="#{dfView.viewCarsCustomized}" />

The call to the Bean Listener opens a Modal Dialog , using the RequestContext.openDialog()
( taken from the original PrimeFaces showcase )

Code: Select all

@ManagedBean(name = "dfView")
public class DFView {

    public void viewCars() {
        RequestContext.getCurrentInstance().openDialog("viewCars");
    }

    public void viewCarsCustomized() {
        Map<String,Object> options = new HashMap<String, Object>();
        options.put("modal", true);
        options.put("draggable", true);
        options.put("resizable", true);
        options.put("contentHeight", 320);

        RequestContext.getCurrentInstance().openDialog("viewCars", options, null);
    }
}

The viewCars.xhtml should be configured as a Navigation Rule in faces-config.xml.

Code: Select all

	
       <navigation-rule>
		<from-view-id>/snippets/iframe-content.xhtml</from-view-id>
		<navigation-case>
			<from-outcome>viewCars</from-outcome>
			<to-view-id>/viewCars.xhtml</to-view-id>				
			<redirect/>
		</navigation-case>
	</navigation-rule>

This is the content that will be displayed in the Modal Dialog.

And that's it !!
Because the Dialog is called from the <p:remoteCommand> on the parent window, the Dialog covers not only the IFRAME, but also THE WHOLE SCREEN !


This is just great ! Hope it helps other developers in the same situation !

Miguel

[kukeltje]

Thanks for the example. Calling a remote command from an iframe is no different then calling plain javascript from an iframe.