Foren

Icefaces 3 style problem

German Tugores, geändert vor 12 Jahren.

Icefaces 3 style problem

Junior Member Beiträge: 33 Beitrittsdatum: 01.03.12 Neueste Beiträge
Hi everyone,

We have created a portlet using as guide the icefaces3-portlet-3.0.0-BETA1 portlet example. We use in the portletViewMode.xhtml file a ui:include for the styling.xhtml and applicant.xhtml pages just like in the example. So far it works fine.
Then we have a radioUnica.xhtml page defined just like the confirmation.xhtml in the example.

We defined a navigation rule (that works) from portletViewMode.xhtml to radioUnica.xhtml.

In radioUnica.xhtml we add an ace:menuBar but it's not being rendered with the sytle of an ace component, it's being shown as a list of links. The strange thing is that in portletViewMode.xhtml I add ace:menuBar then in radioUnica.xhtml the component is rendered correctly (even if defined with display:none)...

Any ideas of what may be happening? Here is the code for the pages, if it can be of help.

portletViewMode.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<f:view xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head />
<h:body styleClass="icefaces3-portlet ltr">
<ui:include src="styling.xhtml" />
<ui:include src="principal.xhtml" />
</h:body>
</f:view>

styling.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:remove>
<!--
The benefit of using the link element is that the CSS resource loads faster because it doesn't invoke a
portlet ResourceURL, and therefore doesn't run the JSF lifecycle to obtain the resource's URL. The drawback
is that the CSS resource can't use the #{resource[''} EL-expression inside it.
-->
</ui:remove>
<link href="#{request.contextPath}/xmlhttp/css/rime/rime-portlet.css" rel="stylesheet" type="text/css"/>
<link href="#{request.contextPath}/css/portlet.css" rel="stylesheet" type="text/css" />
<link href="#{request.contextPath}/css/liferay-theme-override.css" rel="stylesheet" type="text/css" />

<ui:remove>
<!--
The benefit of using the h:outputStylesheet tag the CSS resource can use the #{resource['']} EL-expression
inside it.
-->
</ui:remove>
</ui:composition>

applicant.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:aui="http://liferay.com/faces/aui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:example-cc="http://java.sun.com/jsf/composite/example-cc"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:ace="http://www.icefaces.org/icefaces/components"
xmlns:icecore="http://www.icefaces.org/icefaces/core"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<ice:portlet>
<h:form id="formRadioP">
<h:panelGrid columns="1" styleClass="formRadioPrincipal">
<h:graphicImage id="giMapa" ismap="true"
url="/css/images/mapaV2.gif" styleClass="imagenMapa" usemap="#map1" />

<map name="map1">
<area shape="rect" coords="68,100,149,130" title='Salto' />
</map>

<h:commandButton id="btnOculto" value="BotonIr"
action="#{principalMB.redireccionarPrograma}" />

<ace:menuBar id="menuRadios" autoSubmenuDisplay="false" style="display:none;">
</ace:menuBar>
</h:panelGrid>
</h:form>
</ice:portlet>
</ui:composition>

radioUnica.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:aui="http://liferay.com/faces/aui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:example-cc="http://java.sun.com/jsf/composite/example-cc"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:ace="http://www.icefaces.org/icefaces/components"
xmlns:icecore="http://www.icefaces.org/icefaces/core"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<h:head />
<h:body styleClass="icefaces3-portlet ltr">
<ui:include src="styling.xhtml" />
<ice:portlet>
<h:form id="formEntrevistas">
<ace:panel id="pnlPrincipal" styleClass="panelPrincipalEntrevista">
<ice:panelGrid columns="3" styleClass="panelPrincipal">
<h:graphicImage url="/css/images/Logo_Radio_Cristal_2.png"
styleClass="logoRadioImage" />

<h:outputLabel value="#{principalMB.programa.nombre}"
styleClass="tituloRadio" />

<ice:panelGrid columns="1">
<h:outputLabel
value="#{principalMB.programa.ciudad.concat(', ')}" />
<h:outputLabel value="#{principalMB.programa.departamento}" />
</ice:panelGrid>
</ice:panelGrid>
<hr width="100%" style="margin-top: 10px;" />

<ace:menuBar id="menuRadios" autoSubmenuDisplay="false">
<ace:menuItem value="Entrevistas" />
<ace:menuItem value="Historial" />
<ace:menuItem value="Quienes somos" />
<ace:menuItem value="Contactenos" />
</ace:menuBar>
</ace:panel>
</h:form>
</ice:portlet>
</h:body>

</f:view>


If we take out the <ace:menuBar id="menuRadios" autoSubmenuDisplay="false" style="display:none;"/> of the applicant.xhtml page, when it redirects to radioUnica.xhtml the ace menuBar is rendered as a list of links, without ace style.
thumbnail
Neil Griffin, geändert vor 12 Jahren.

RE: Icefaces 3 style problem

Liferay Legend Beiträge: 2655 Beitrittsdatum: 27.07.05 Neueste Beiträge
I just tried to reproduce this problem by modifying the icefaces3-portlet demo but it worked OK for me.

I simply added the following code to applicant.xhtml and confirmation.xhtml:
<ace:menubar id="menuRadios" autosubmenudisplay="false">
	<ace:menuitem value="Entrevistas" />
	<ace:menuitem value="Historial" />
	<ace:menuitem value="Quienes somos" />
	<ace:menuitem value="Contactenos" />
</ace:menubar>


One thing I noticed in your code was that you have ice:portlet tags. Those aren't needed anymore as of ICEfaces 2.x/3.x -- so you can delete them from your XHTML files. Please let me know what else I need to do in order to reproduce the problem. Thanks.