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 :

<?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>

Bean(IcePopupBean.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;
	}
}

 

Ice panel popup

Ice Panel Popup with componenets:

<?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>

Note: Same bean used.

Ice panel popup with components

Ice panel popup Customizations:

1. Draggable:

<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>

draggable ice panel popup

Ice Panel with stylesheet (css):

 


<?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>

Ice panel popup with styles

689 total views, 3 views today

Leave a Reply

Your email address will not be published. Required fields are marked *