Ice Panel Popup Examples

In JSF, those who are using Ice components if they need popup they can go with Ice panel Popups.

Ice Panel Popup :

[html]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ace="http://www.icefaces.org/icefaces/components"
xmlns:ice="http://www.icesoft.com/icefaces/component"
xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
</h:head>
<h:body>
<h:form>
<h:commandButton value="Click to open Ice Panl Popup"
actionListener="#{icePopupBean.openPopup}" />
<ice:panelPopup visible="#{icePopupBean.popupOpened}" rendered="#{icePopupBean.popupOpened}"
autoCentre="true">
<f:facet name="header">
<ice:panelGroup style="text-align:right;">
<h:commandButton image="resources/images/closeB.jpg" alt="Close"
title="Close" style="height: 20px; width: 20px; border: 0;"
actionListener="#{icePopupBean.closePopup}" />

</ice:panelGroup>

</f:facet>

<f:facet name="body">

<ice:panelGroup>
Welcome to Javadomain.in, here you can find many tutorials and solutions for many problems.

</ice:panelGroup>

</f:facet>

</ice:panelPopup>
</h:form>
</h:body>
</html>
[/html]

Bean(IcePopupBean.java):

[java]
import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;

@ManagedBean
@SessionScoped
public class IcePopupBean implements Serializable {

/**
*
*/
private static final long serialVersionUID = 1L;

private boolean popupOpened = false;

public IcePopupBean() {
}

public boolean isPopupOpened() {
return popupOpened;
}

public void setPopupOpened(boolean popupOpened) {
this.popupOpened = popupOpened;
}

public void openClose(ActionEvent event) {
popupOpened = !popupOpened;
}

public void openPopup(ActionEvent event) {
popupOpened = true;
}

public void closePopup(ActionEvent event) {
popupOpened = false;
}
}
[/java]

 

Ice panel popup

Ice Panel Popup with componenets:

[html highlight=”34,35,36″]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ace="http://www.icefaces.org/icefaces/components"
xmlns:ice="http://www.icesoft.com/icefaces/component"
xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
</h:head>
<h:body>
<h:form>
<h:commandButton value="Click to open Ice Panl Popup"
actionListener="#{icePopupBean.openPopup}" />
<ice:panelPopup visible="#{icePopupBean.popupOpened}" rendered="#{icePopupBean.popupOpened}"
autoCentre="true">
<f:facet name="header">
<ice:panelGroup style="text-align:right;">
<h:commandButton image="resources/images/closeB.jpg" alt="Close"
title="Close" style="height: 20px; width: 20px; border: 0;"
actionListener="#{icePopupBean.closePopup}" />

</ice:panelGroup>

</f:facet>

<f:facet name="body">

<ice:panelGroup>
Welcome to Javadomain.in, here you can find many tutorials and solutions for many problems.<br/>
<ice:inputText value="I am text field"/><br/>
<ice:commandButton value="I am Button"/><br/>
<ice:outputText value="I am output text "/>
</ice:panelGroup>

</f:facet>

</ice:panelPopup>
</h:form>
</h:body>
</html>
[/html]

Note: Same bean used.

Ice panel popup with components

Ice panel popup Customizations:

1. Draggable:

[html highlight=”3″]
<ice:panelPopup visible="#{icePopupBean.popupOpened}"
rendered="#{icePopupBean.popupOpened}" autoCentre="true"
draggable="true">
<f:facet name="header">
<ice:panelGroup style="text-align:right;">
<h:commandButton image="resources/images/closeB.jpg" alt="Close"
title="Close" style="height: 20px; width: 20px; border: 0;"
actionListener="#{icePopupBean.closePopup}" />
</ice:panelGroup>

</f:facet>
<f:facet name="body">
<ice:panelGroup>
Welcome to Javadomain.in, here you can find many tutorials and solutions for many problems.<br />
Now draggable="true", which means you can drag the popup.
</ice:panelGroup>
</f:facet>
</ice:panelPopup>
[/html]

draggable ice panel popup

Ice Panel with stylesheet (css):

 

[xml highlight=”12-17,26″]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ace="http://www.icefaces.org/icefaces/components"
xmlns:ice="http://www.icesoft.com/icefaces/component"
xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
<style>
.popupStyle {
color: white;
background: orange;
}
</style>
</h:head>
<h:body>
<h:form>
<h:commandButton value="Click to open Ice Panel Popup"
actionListener="#{icePopupBean.openClose}" />
<ice:panelPopup visible="#{icePopupBean.popupOpened}"
rendered="#{icePopupBean.popupOpened}" autoCentre="true"
styleClass="popupStyle">
<f:facet name="header">
<ice:panelGroup style="text-align:right;">
<h:commandButton image="resources/images/closeB.jpg" alt="Close"
title="Close" style="height: 20px; width: 20px; border: 0;"
actionListener="#{icePopupBean.closePopup}" />
</ice:panelGroup>

</f:facet>
<f:facet name="body">
<ice:panelGroup>
Welcome to Javadomain.in, here you can find many tutorials and solutions for many problems.<br />
With css styles
</ice:panelGroup>
</f:facet>
</ice:panelPopup>
</h:form>
</h:body>
</html>

[/xml]

Ice panel popup with styles

Leave a Reply