A mobile panel popup component would display a modal dialog on top of the current page content. The content of the popup would be customizable by the developer. The default size of the popup would be slightly smaller than the window size and would allow for vertical and horizontal scrolling if the content is larger than the popup bounds. The JSF representation of the component would be as follows:

<mobi: panelPopup rendered="#

">
<h:outputText value="Vanilla dialog"/>
</mobi:panelPopup>

@Property(tlddoc = "style will be rendered on a root element of this component")
private String style;

@Property(tlddoc = "style class will be rendered on a root element of this component")
private String styleClass;

@Property(tlddoc="Header text")
private String header;

@Property(tlddoc="visible can be used to toggle visibility on the server, rendered should not be used that way, setting rendered=false on a visible modal dialog will not remove the modality layer, visible=false must be set first (or client-side JS function called)", defaultValue="false")
private boolean visible;

@Property(tlddoc="Makes the dialog resizable. Should be false if width or height is auto, or resizing may hehave erratically.", defaultValue="true")
private boolean resizable;

@Property(defaultValue="true", tlddoc="autocenter of panel")
private boolean autoCenter;

@Property(tlddoc="Width of the element in pixels. Default (not specified or value <= 0) is auto. If auto, resizable should be false, or resizing may hehave erratically. If auto, IE7 may not size or position properly.", defaultValue="Integer.MIN_VALUE")
private int width;

@Property(tlddoc="Height of the element in pixels. Default (not specified or value <= 0) is auto. If auto, resizable should be false, or resizing may hehave erratically. If auto, IE7 may not size or position properly.", defaultValue="Integer.MIN_VALUE")
private int height;

@Property(tlddoc="zindex property to control overlapping with other elements", defaultValue="1000")
private int zindex;

@Property(tlddoc="Minimum width of a resizable dialog", defaultValue="150")
private int minWidth;

@Property(tlddoc="Minimum height of resizable dialog", defaultValue="0")
private int minHeight;

using these for now...can weed them out later, but looked at PanelPopup from compat and Dialogue from ace and found these in common.

as of rev 27776, specific behavior of this component currently is:-

1) server-side will not render the popup unless the visible attr is true. This will cost though as each submit is a round trip to the server
2) client-side. Will not be able to synchronize with server unless the panelPopup is enclosed in a form. Will use hidden field to synchronize. Still testing to do on this functionality. State will stay on the client and will stay open after a submit if enclosed in a form. Need further testing for placing the form with the panelPopup as this option should close each time a submit occurs on the internal form.

Still several attributes that can be implemented for size, resizable and perhaps scrollable.

Judy for the initial release I would like the following attributes removed from the component. We can review them later for a future release.

• remove minWidth, minHeight, height, width and resizeable attributes.

Th header attribute is interesting but it doesn't give the user the flexibility of adding a close button or other components. Would it be possible to use a facet instead with little effort? If not I would be in favour of removing the functionality for now as the developer can add there own header markup.

trying to keep this in line with our ace component library. most panels have a header or title attribute which allows the user to name a panel without having to define styling. Only tabPane has a facet, so am working on implementing that, but still is has to be styled.
Not having much luck with trying to combine the client and server side versions of this component. Note that a client side component comes in handy without round trips to server, but will require renderer to render the button to open and close the panel.
In order to do this, I think we'll have to implement an actionListener (panelCloseListener) which will fire so we can get the client and server-side states to synchronize. For now, if you choose the header option on the client-side version, you automatically get a button to close the panelPopup.

I've updated the panel popup JavaScript to correct center the dialog even when the window has been scrolled. This feature is also enabled by default as I feel it will be the behaviour that most mobile users will want.

Generic centre code has been added to org.icefaces.component.util.component.js so that other components can take advantage of the method. One more interesting note is that the scroll centring code also takes advantage of "touchmove" so that scroll centring is a little more natural for touch screen scoll detection.

further work should be done under new Jira number