Given the following content:
<div class="content">
<div id="brian">
<p>Hello my name is Alex</p>
<p>My surname is Thomas</p>
<p>My middle name is James</p>
<p>true story...</p>
</div>
</div>
And with the following in my theme:
<div id="dave" />
How so I replace #dave with the first paragraph? I've tried:
<replace content="//div[#class='content']/p" theme="div#dave" />
<replace content="//div[#class='content']/p[1]" theme="div#dave" />
<replace content="children://div[#class='content']/p" theme="meta#description" />
Neither worked... Please note that .content is buried fairly deep and can change position, so using its XPath is not an option. By xPath I mean /div/div/p[1] etc...
<replace css:content=".content p:first-child" css:theme="#dave" />
Could be the solution ;)
Vito
For a pure xslt solution try this:
<replace content="//div[#class='content']/p[1]" theme="div#dave" />
edit:
i meant:
<replace content="//div[#class='content']//p[1]" css:theme="div#dave" />
or
<replace content="//div[#class='content']/div/p[1]" css:theme="div#dave" />
The :first-child CSS selector should work -- so it would be something like
<replace content="p:first-child" theme="#dave" />
Related
I'm using TYPO3 7.6with the latest Flux-, VHS- and FluidcontentExtensions (FluidTYPO3). I've wrote a new FLUX-Content Element, a Tab-Container from Zurb Foundation 6.
The element is working fine (frontend), but at backend I have a row with my tabs and also columns .. sth. will dublicated my tabs and the content inside?! Already cleared Cache.
Here's a screenshot. The Tab-Elements will be dublicated, I don't know why?
My FLUX FCE:
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Content" />
<f:section name="Configuration">
<flux:form id="tabs" options="{group: 'LLL:typo3conf/ext/myelements/Resources/Private/Language/locallang.xlf:grid.elements'}">
<flux:form.sheet name="tabs">
<flux:form.section name="tabs">
<flux:form.object name="tab">
<flux:field.input name="title" />
<flux:field.input name="class" />
<flux:field.checkbox name="active" />
</flux:form.object>
</flux:form.section>
</flux:form.sheet>
<flux:grid>
<flux:grid.row>
<f:if condition="{tabs}">
<f:for each="{tabs}" as="tab" iteration="iteration">
<flux:form.content name="content.{iteration.index}" label="Tab {iteration.cycle}" />
</f:for>
</f:if>
</flux:grid.row>
</flux:grid>
</flux:form>
</f:section>
<f:section name="Preview">
<flux:widget.grid />
</f:section>
<f:section name="Main">
<f:render section="Tabs" arguments="{_all}" />
<div class="tabs-content" data-tabs-content="tabs-{record.uid}">
<f:if condition="{tabs}">
<f:for each="{tabs}" as="tab" iteration="iteration">
<div class="tabs-panel {f:if(condition: '{tab.tab.active} == 1', then: 'is-active')}" id="panel-{record.uid}-{iteration.index}">
<flux:content.render area="content.{iteration.index}" />
</div>
</f:for>
</f:if>
</div>
</f:section>
<f:section name="Tabs">
<f:if condition="{tabs}">
<ul class="tabs" data-tabs id="tabs-{record.uid}">
<f:for each="{tabs}" as="tab" iteration="iteration">
<li class="tabs-title {f:if(condition: '{tab.tab.active} == 1', then: 'is-active')}">
{tab.tab.title}
</li>
</f:for>
</ul>
</f:if>
</f:section>
</div>
This is the problem:
<flux:widget.grid />
According to Release Notes of flux 7.2:
Preview Widget replaced
We have replaced the way Flux generates previews when a Grid is
involved. Before, Flux would render the Grid from the Fluid template
file which means the template had to be parsed (or loaded from
compiled cache) and then rendered, involving a significant amount of
processing. The content element container areas are now rendered by a
special View class, significantly increasing performance when working
with multiple nested elements.
The new behaviour:
Renders a Grid as content element container in the page module if your
template defines one, regardless of whether or not you have a Preview
section.
Deprecates flux:widget.grid which no longer has any function.
Removes all support for setting the Fluid template used to render the
Grid.
Basically, we sacrifice the rarely used template replacement
feature for increased performance in very frequently executed code.
So, simply remove complete Preview section from a template.
Thank you Viktor.
It's necessary to delete all flux.grid-stuff from yout template.
The whole preview section and some grid/rows at the configuration section.
That's the correct tab-template for fluxand zurb foundation:
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Content" />
<f:section name="Configuration">
<flux:form id="Tabs" options="{group: 'LLL:typo3conf/ext/customerproject/Resources/Private/Language/locallang.xlf:grid.elements'}">
<flux:form.sheet name="tabs">
<flux:form.section name="tabs">
<flux:form.object name="tab">
<flux:field.input name="title" />
<flux:field.input name="class" />
<flux:field.checkbox name="active" />
</flux:form.object>
</flux:form.section>
</flux:form.sheet>
<f:if condition="{tabs}">
<f:for each="{tabs}" as="tab" iteration="iteration">
<flux:form.content name="content.{iteration.index}" label="Tab {iteration.cycle}" />
</f:for>
</f:if>
</flux:form>
</f:section>
<f:section name="Main">
<div class="flux grid01Tabs">
<f:render section="Tabs" arguments="{_all}" />
<div class="tabs-content" data-tabs-content="tabs-{record.uid}">
<f:if condition="{tabs}">
<f:for each="{tabs}" as="tab" iteration="iteration">
<div class="tabs-panel {f:if(condition: '{tab.tab.active} == 1', then: 'is-active')}" id="panel-{record.uid}-{iteration.index}">
<flux:content.render area="content.{iteration.index}" />
</div>
</f:for>
</f:if>
</div>
</div><!-- / tabWrap -->
</f:section>
<f:section name="Tabs">
<f:if condition="{tabs}">
<ul class="tabs" data-tabs id="tabs-{record.uid}">
<f:for each="{tabs}" as="tab" iteration="iteration">
<li class="tabs-title {f:if(condition: '{tab.tab.active} == 1', then: 'is-active')}">
{tab.tab.title}
</li>
</f:for>
</ul>
</f:if>
</f:section>
</div>
So far the only way to load my external document is to hardcode the path. I'd like to be able to use a relative path or variable.
I've created a Diazo rule which transforms content from an external page (called 'footer-columns') and places it in my themed pages.
Version A - This version works (note the hardcoded path):
<replace css:theme-children=".footer-menu-row">
<xsl:for-each
select="document('http://example.com/footer-columns')//*/dl[contains(#class,'portletStaticText')]/dd"
><div class="w-col w-col-3">
<xsl:copy-of select="." />
</div>
</xsl:for-each>
</replace>
Version B - This version does not work:
<replace css:theme-children=".footer-menu-row">
<xsl:for-each
select="document('{$portal_url}/footer-columns')//*/dl[contains(#class,'portletStaticText')]/dd"
><div class="w-col w-col-3">
<xsl:copy-of select="." />
</div>
</xsl:for-each>
</replace>
Version C - absolute path does not work (in fact it returns an error):
<replace css:theme-children=".footer-menu-row">
<xsl:for-each
select="document('/footer-columns')//*/dl[contains(#class,'portletStaticText')]/dd"
><div class="w-col w-col-3">
<xsl:copy-of select="." />
</div>
</xsl:for-each>
</replace>
Version D - relative path does not work (in fact it returns an error):
<replace css:theme-children=".footer-menu-row">
<xsl:for-each
select="document('footer-columns')//*/dl[contains(#class,'portletStaticText')]/dd"
><div class="w-col w-col-3">
<xsl:copy-of select="." />
</div>
</xsl:for-each>
</replace>
For version C and D I get the same error:
AttributeError: 'PersistentResourceDirectory' object has no attribute
'getPhysicalPath'
You need to provide a nodeset to the document() method. Diazo already sets a variable named diazo-base-document with the proper nodeset.
Try:
select="document('footer-columns', $diazo-base-document)//*/dl[contains(#class,'portletStaticText')"
Could you specify href="/footer-columns" on the replace tag?
I'm trying to run simple Seam PageFlow example NumberGuss. I have deployed it on Jboss Server. When I access the URL it lands on the first page but if I hit any of the button provided on that page it says "The page isn't redirecting properly".On server log I found
SEVERE [javax.enterprise.resource.webcontainer.jsf.application] (default task-16) Error Rendering View[/debug.xhtml]: org.jboss.weld.context.NonexistentConversationException: WELD-000321: No conversation found to restore for id 1.
I'm using wildfly-8.1.0 and jboss-seam-2.3.1
Attaching pageflow.jpdl.xml and numberGuess.xhtml for reference. Please help me resolve the issue I'm facing.
<!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:s="http://jboss.org/schema/seam/taglib">
<h:head>
<title>Guess a number...</title>
<link href="niceforms.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="niceforms.js"><!-- --></script>
</h:head>
<body>
<h1>Guess a number...</h1>
<h:form id="NumberGuessMain" styleClass="niceform">
<div>
<h:messages id="messages" globalOnly="true"/>
<h:outputText id="Higher"
value="Higher!"
rendered="#{numberGuess.randomNumber gt numberGuess.currentGuess}"/>
<h:outputText id="Lower"
value="Lower!"
rendered="#{numberGuess.randomNumber lt numberGuess.currentGuess}"/>
</div>
<div>
I'm thinking of a number between <h:outputText id="Smallest" value="#{numberGuess.smallest}"/> and
<h:outputText id="Biggest" value="#{numberGuess.biggest}"/>. You have
<h:outputText id="RemainingGuesses" value="#{numberGuess.remainingGuesses}"/> guesses.
</div>
<div>
Your guess:
<h:inputText id="inputGuess" value="#{numberGuess.currentGuess}" required="true" size="3"
rendered="#{(numberGuess.biggest-numberGuess.smallest) gt 20}">
<f:validateLongRange maximum="#{numberGuess.biggest}"
minimum="#{numberGuess.smallest}"/>
</h:inputText>
<h:selectOneMenu id="selectGuessMenu" value="#{numberGuess.currentGuess}" required="true" rendered="#{numberGuess.selectMenuRendered}">
<s:selectItems id="PossibilitiesMenuItems" value="#{numberGuess.possibilities}" var="i" label="#{i}"/>
</h:selectOneMenu>
<h:selectOneRadio id="selectGuessRadio" value="#{numberGuess.currentGuess}" required="true" rendered="#{numberGuess.radioButtonRendered}">
<s:selectItems id="PossibilitiesRadioItems" value="#{numberGuess.possibilities}" var="i" label="#{i}"/>
</h:selectOneRadio>
<h:commandButton id="GuessButton" value="Guess" action="guess"/>
<s:button id="CheatButton" value="Cheat" action="cheat"/>
<s:button id="GiveUpButton" value="Give up" action="giveup"/>
</div>
<div>
<h:message id="message" for="inputGuess" style="color: red"/>
</div>
</h:form>
</body>
</html>
<!--
An example of pageflow in jPDL. This exemplifies the
approach where action handlers are attached transitions
and decision nodes, instead of view components.
An alternative approach would be to attach all action
handlers to view components, and let the jPDL define
only the navigation rules.
-->
<pageflow-definition
xmlns="http://jboss.org/schema/seam/pageflow"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation=
"http://jboss.org/schema/seam/pageflow http://jboss.org/schema/seam/pageflow-2.3.xsd"
name="numberGuess">
<start-page name="displayGuess" view-id="/numberGuess.xhtml">
<redirect/>
<transition name="guess" to="evaluateGuess">
<action expression="#{numberGuess.guess}"/>
</transition>
<transition name="giveup" to="giveup"/>
<transition name="cheat" to="cheat"/>
</start-page>
<decision name="evaluateGuess" expression="#{numberGuess.correctGuess}">
<transition name="true" to="win"/>
<transition name="false" to="evaluateRemainingGuesses"/>
</decision>
<decision name="evaluateRemainingGuesses" expression="#{numberGuess.lastGuess}">
<transition name="true" to="lose"/>
<transition name="false" to="displayGuess"/>
</decision>
<page name="giveup" view-id="/giveup.xhtml">
<redirect/>
<transition name="yes" to="lose"/>
<transition name="no" to="displayGuess"/>
</page>
<process-state name="cheat">
<sub-process name="cheat"/>
<transition to="displayGuess"/>
</process-state>
<page name="win" view-id="/win.xhtml">
<redirect/>
<end-conversation/>
</page>
<page name="lose" view-id="/lose.xhtml">
<redirect/>
<end-conversation/>
</page>
</pageflow-definition>
Resolved the issue.Weld is scanning the archive, which seems to cause the problem.The Weld Docs says:
You can either set this up for your deployment only by adding the following content to the META-INF/jboss-all.xml file of your application.
jboss-all.xml file goes to your META-INF for ear archive and likely to WEB-INF for war archive
<jboss xmlns="urn:jboss:1.0">
<weld xmlns="urn:jboss:weld:1.0" require-bean-descriptor="true"/>
</jboss>
It worked for me.
I would like to modify the content on the fly so I can later feed the modified version into my theme's content slot. The usecase is positioning the calendar portlet inside a collective.cover row/column/cell.
Here's what I tried:
<replace css:content="#content .row:nth-child(2) .cell:nth-child(2) .tile.tile-edge">
<!-- These work (meaning levels above current selection CAN be copied) -->
<xsl:copy-of select="." />
<xsl:copy-of select="../.." />
<xsl:copy-of select="/" />
<!-- However, neither of these do -->
<xsl:copy-of css:select=".portletCalendar:first-child" />
<xsl:copy-of select="//div[contains(concat(' ', normalize-space(#class), ' '), ' portletCalendar ')]" />
<xsl:copy-of select="//div[#id='portal-personaltools']" />
</replace>
It may be that the only problem you were having was relying on Diazo's facility for translating css selectors in XSL commands. It only works if the target is the currently selected node or a child of it. So, replace it with an XPath selector:
<!-- replace one part of content with another -->
<replace css:content="#content .row:nth-child(2) .cell:nth-child(2) .tile.tile-edge">
<xsl:copy-of select="//dl[#class='portlet portletCalendar']" />
<xsl:apply-templates mode="raw" />
</replace>
<!-- make sure it doesn't show up in two places -->
<drop content="//dl[#class='portlet portletCalendar']" />
I have a page with two different View Models:
<?page title="My page" contentType="text/html;charset=UTF-8"?>
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.mycompany.FirstViewModel')">
<!-- A lot of unimportant stuff -->
<tabbox>
<tabs>
<tab label="Tab1" ></tab>
<!-- Other unimportant tabs -->
</tabs>
<tabpanels>
<tabpanel>
<include src="inc/other.zul" p="#ref(vm.selected)" pid="#ref(vm.selected.id)" ></include>
</tabpanel>
</tabpanels>
</tabbox>
</div>
And the include is:
<window>
<label id="sid" value="#load(pid)" />
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vms') #init('com.mycompany.SecondViewModel')">
<listbox model="#id('vars') #load(p.someList)"
selectedItem="#bind(vms.selected)"
emptyMessage="No data in list">
<!-- Template and stuff -->
</listbox>
<label id="sid1" value="#load(pid)" />
</div>
</window>
The problem is that once I define the second viewModel, all the external references are inaccessible: I have a value for the first label, but I have no values for the listbox or the second label. Is there a way to do that? I tried with no success to do this:
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vms') #init('com.mycompany.SecondViewModel')" list="#ref(p.someList)">
<listbox model="#id('vars') #load(list)"
selectedItem="#bind(vms.selected)"
emptyMessage="No data in list">
I could merge the second View Model in the first one, but that wouldn't be very convenient! I am also open to other solutions which allow me to have a modular approach.
My version of ZK is 6.0.1
The reason you are unable to access the external components is your composer i.e BindComposer you have same composer for the Main zul as well as for the Included zul. You need to access the Included Listbox from external ZUL.
So remove the Composer of Include ZUL, give an ID to window you have two Space Owners access the inner Listbox
<?page title="My page" contentType="text/html;charset=UTF-8"?>
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.mycompany.FirstViewModel')">
<!-- A lot of unimportant stuff -->
<tabbox>
<tabs>
<tab label="Tab1" ></tab>
<!-- Other unimportant tabs -->
</tabs>
<tabpanels>
<tabpanel>
<include id="include" src="inc/other.zul" p="#ref(vm.selected)" pid="#ref(vm.selected.id)" ></include>
</tabpanel>
</tabpanels>
</tabbox>
</div>
<window id="win">
<label id="sid" value="#load(pid)" />
<div
viewModel="#id('vms') #init('com.mycompany.SecondViewModel')">
<listbox id="listbox2" model="#id('vars') #load(p.someList)"
selectedItem="#bind(vms.selected)"
emptyMessage="No data in list">
<!-- Template and stuff -->
</listbox>
<label id="sid1" value="#load(pid)" />
</div>
</window>
Now while accessing in your BindComposer declare variable as public :
Listbox include$win$listbox2;
in your doAfterCompose() add this line
Sysout("You can access your inner Listbox and it is:"+include$win$listbox2);
Now you see you will not get your Listbox NULL!!
Link : http://books.zkoss.org/wiki/ZK_Developer's_Reference/UI_Composing/ID_Space
It is (was) actually a bug in ZK, which has been fixed for a future version.