Dialog and dynamic z-index

[liukvar]

Hi to all,
Using firebug I have noticed that when a dialog is dragged its z-index dynamically change the value, but this property is lost when the z-index is modified through Javascript

Code: Select all

document.getElementById('dialogId').style.zIndex = oldValue + 1;

Why this?

[cagatay.civici]

To implement stacking to deal with multiple overlay components(dialog, confirmDialog, autoComplete, selectOneMenu...) on page.

An overlay should move to top dynamically so a static z-index cannot be used.

[liukvar]

To implement stacking to deal with multiple overlay components(dialog, confirmDialog, autoComplete, selectOneMenu...) on page.

An overlay should move to top dynamically so a static z-index cannot be used.

I include the dialogs dinamically using ui:include, so I need to give max z-index value to the last dialog inserted...
From serverside I send requestContext.execute("moveDialogOnTop(<params>)");

Code: Select all

<p:outputPanel id="window1ContainerPanel" layout="block"
		binding="#{win1EBB.container}">
		<ui:include src="#{win1EBB.include}" />
	</p:outputPanel>

	<p:outputPanel id="window2ContainerPanel" layout="block"
		binding="#{win2EBB.container}">
		<ui:include src="#{win2EBB.include}" />
	</p:outputPanel>

<script language="JavaScript">
		function moveDialogOnTop(containers, dialogToMoveOnTop) {
			var maxZIndex = 0;
			var zIndex = 0;
			for each (var container in containers){
				var str = String(container);
				if(str.indexOf('form') == 0){
					var panelContainer = document.getElementById(container);
					var divs = panelContainer.getElementsByTagName('div');
					var dialog = divs[0]
					if(dialog != null){
						zIndex = dialog.style.zIndex;
						if(zIndex > maxZIndex){
							maxZIndex = zIndex;
						}
					}
				}
			}
			var num = new Number(maxZIndex);			
			document.getElementById(dialogToMoveOnTop).style.zIndex = num+1;			
		}
	</script>

After "moveDialogOnTop" the z-index of the dialog become fixed: it doesn't change when I dragg the dialog...
Why the instruction document.getElementById(dialogToMoveOnTop).style.zIndex makes the z-index static/fixed inside the element.style?

[liukvar]

http://dl.dropbox.com/u/1551626/IMAGES/dialog.png
The z-index of the dialog (redbox) remains 'static' after the JavaScript function moveDialogOnTop

[cagatay.civici]

Try building latest PF from trunk.

[liukvar]

Done. Now I have an error:

Code: Select all

15:21:42,597 Grave [javax.enterprise.resource.webcontainer.jsf.application] (http--127.0.0.1-8080-1) Error Rendering View[/index.xhtml]: javax.el.ELException: /index.xhtml: The class 'it.argosoft.democdi.web.Win1EBB$Proxy$_$$_WeldClientProxy' does not have the property 'open'.
	at com.sun.faces.facelets.compiler.AttributeInstruction.write(AttributeInstruction.java:94) [jsf-impl-2.1.3-b02-jbossorg-2.jar:2.1.3-SNAPSHOT]
	at com.sun.faces.facelets.compiler.UIInstructions.encodeBegin(UIInstructions.java:82) [jsf-impl-2.1.3-b02-jbossorg-2.jar:2.1.3-SNAPSHOT]
	at com.sun.faces.facelets.compiler.UILeaf.encodeAll(UILeaf.java:183) [jsf-impl-2.1.3-b02-jbossorg-2.jar:2.1.3-SNAPSHOT]
	at javax.faces.render.Renderer.encodeChildren(Renderer.java:168) [jboss-jsf-api_2.1_spec-2.0.0.Beta1.jar:2.0.0.Beta1]
	at javax.faces.component.UIComponentBase.encodeChildren(UIComponentBase.java:845) [jboss-jsf-api_2.1_spec-2.0.0.Beta1.jar:2.0.0.Beta1]
	at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1756) [jboss-jsf-api_2.1_spec-2.0.0.Beta1.jar:2.0.0.Beta1]
	at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1759) [jboss-jsf-api_2.1_spec-2.0.0.Beta1.jar:2.0.0.Beta1]
	at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1759) [jboss-jsf-api_2.1_spec-2.0.0.Beta1.jar:2.0.0.Beta1]
	at com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:401) [jsf-impl-2.1.3-b02-jbossorg-2.jar:2.1.3-SNAPSHOT]
	at com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewHandler.java:131) [jsf-impl-2.1.3-b02-jbossorg-2.jar:2.1.3-SNAPSHOT]
	at javax.faces.application.ViewHandlerWrapper.renderView(ViewHandlerWrapper.java:288) [jboss-jsf-api_2.1_spec-2.0.0.Beta1.jar:2.0.0.Beta1]
	at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:121) [jsf-impl-2.1.3-b02-jbossorg-2.jar:2.1.3-SNAPSHOT]
	at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101) [jsf-impl-2.1.3-b02-jbossorg-2.jar:2.1.3-SNAPSHOT]
	at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:139) [jsf-impl-2.1.3-b02-jbossorg-2.jar:2.1.3-SNAPSHOT]
	at javax.faces.webapp.FacesServlet.service(FacesServlet.java:594) [jboss-jsf-api_2.1_spec-2.0.0.Beta1.jar:2.0.0.Beta1]
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:329) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:248) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at org.jboss.weld.servlet.ConversationPropagationFilter.doFilter(ConversationPropagationFilter.java:67) [weld-core-1.1.2.Final.jar:2011-07-26 15:02]
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:280) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:248) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:275) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:161) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at org.jboss.as.web.security.SecurityContextAssociationValve.invoke(SecurityContextAssociationValve.java:139) [jboss-as-web-7.0.2.Final.jar:7.0.2.Final]
	at org.jboss.as.web.NamingValve.invoke(NamingValve.java:57) [jboss-as-web-7.0.2.Final.jar:7.0.2.Final]
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:154) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:362) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:877) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:667) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:952) [jbossweb-7.0.1.Final.jar:7.0.2.Final]
	at java.lang.Thread.run(Thread.java:722) [:1.7.0_01]

This is my index.xhtml:

Code: Select all

<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>

</h:head>

<h:body>

	<f:view>
		<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: 12px;
}

#container {
	overflow: hidden;
	width: 100%;
	height: 100%;
	width: 100%;
}

#header {
	width: 100%;
	height: 45px;
	position: absolute;
	visibility: show;
	left: 0px;
	top: 0px;
	z-index: 2;
	BACKGROUND-IMAGE: url('./images/banner.jpg');
	background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	overflow: hidden;
}

#center {
	width: 100%;
	height: 100%;
	position: absolute;
	visibility: show;
	left: 0px;
	top: 45px;
	BACKGROUND-IMAGE: url('./images/bloglogo.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	overflow: hidden;
}

#footer {
	width: 100%;
	height: 20px;
	position: absolute;
	visibility: show;
	left: 0px;
	bottom: 0px;
	z-index: -999;
	background-color: #F2F7F9;
	overflow: hidden;
}
</style>

	</f:view>

	<div>
		<h:messages></h:messages>
	</div>

	<center>
		<div id="header"></div>

		<div id="center">
			<h:form id="form">

				<p:menubar style="height:auto;vertical-align:middle;padding-top: 0px;margin:0px;">
					<p:submenu label="File" style="vertical-align:middle;">
						<p:menuitem value="Open Window1" actionListener="#{win1EBB.open}" />
						<p:menuitem value="Open Window2" actionListener="#{win2EBB.open}" />
					</p:submenu>
				</p:menubar>

				<div
					style="height: 30px; left: 0; position: absolute; top: 29px; width: 100%; overflow: hidden;">
					<p:toolbar style="height:auto;vertical-align:middle;">
						<p:toolbarGroup align="left">
							<p:commandLink style="padding-left: 5px;text-decoration: none;"
								actionListener="#{win1EBB.open}">
								<img src="./images/application.png" style="padding-top: 4px">1</img>
							</p:commandLink>

							<p:commandLink style="padding-left: 15px;text-decoration: none;"
								actionListener="#{win2EBB.open}">
								<img src="./images/application.png" style="padding-top: 4px">2</img>
							</p:commandLink>
						</p:toolbarGroup>
					</p:toolbar>
				</div>

				<p:outputPanel id="window1ContainerPanel" layout="block"
					binding="#{win1EBB.container}">
					<ui:include src="#{win1EBB.include}" />
				</p:outputPanel>

				<p:outputPanel id="window2ContainerPanel" layout="block"
					binding="#{win2EBB.container}">
					<ui:include src="#{win2EBB.include}" />
				</p:outputPanel>


			</h:form>

		</div>

		<div id="footer"></div>
	</center>

	<script language="JavaScript">
		function moveDialogOnTop(containers, dialogTorepaint) {
			var maxZIndex = 0;
			var zIndex = 0;
			for each (var container in containers){
				var str = String(container);
				if(str.indexOf('form') == 0){
					var panelContainer = document.getElementById(container);
					var divs = panelContainer.getElementsByTagName('div');
					var dialog = divs[0]
					if(dialog != null){
						zIndex = dialog.style.zIndex;
						if(zIndex > maxZIndex){
							maxZIndex = zIndex;
						}
					}
				}
			}
			var num = new Number(maxZIndex);			
			document.getElementById(dialogTorepaint).style.zIndex = num+1;			
		}
	</script>

</h:body>
</html>

This id the BackingBean:

Code: Select all

@SuppressWarnings("serial")
@Named("win1EBB")
@SessionScoped
public class Win1EBB extends GenericEBB implements Serializable {
	
	private String includeModal1;	
	private OutputPanel modal1Container;	
	
	public void open(ActionEvent actionEvent) {		
		super.open(actionEvent);
	}

	@Override
	protected void defineInclude() {
		this.include = "/function1/win1.xhtml";		
	}

	public void openModal1(ActionEvent actionEvent) {
		this.includeModal1 = "/function1/modal1.xhtml";
		this.restoreView();
		this.openDialogOnContainer(modal1Container);
	}

	public void confermaModal1(ActionEvent actionEvent) {
		this.closeDialogOnContainer(modal1Container);
		this.includeModal1 = null;
		this.restoreView();
	}

	public void annullaModal1(ActionEvent actionEvent) {
		this.closeDialogOnContainer(modal1Container);
		this.includeModal1 = null;
		this.restoreView();
	}	

	public String getIncludeModal1() {
		return includeModal1;
	}

	public void setIncludeModal1(String includeModal1) {
		this.includeModal1 = includeModal1;
	}	

	public OutputPanel getModal1Container() {
		return modal1Container;
	}

	public void setModal1Container(OutputPanel modal1Container) {
		this.modal1Container = modal1Container;
	}

}

The jar:
http://dl.dropbox.com/u/1551626/Primefa ... APSHOT.jar

All the resources:
http://dl.dropbox.com/u/1551626/Primefa ... efaces.zip

thanks a lot,
liuk

[cagatay.civici]

Sorry, I don't have enough time to continue assisting.

[liukvar]

OK!
The namespace was wrong
xmlns:p="http://primefaces.prime.com.tr/ui" -> xmlns:p="http://primefaces.org/ui"

[liukvar]

Everything's working fine! I also tryed Dynamic Resource Loading Feature http://blog.primefaces.org/?p=1503

Code: Select all

<h:head>
	<h:outputStylesheet name="/primefaces/primefaces.css" />
	<h:outputScript name="/primefaces/primefaces.js" />
</h:head>

thanks a lot!!!