I have template like here:
http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/
i add menu navigation:
<h:form id="form">
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/pages/template/header.xhtml" />
</ui:insert>
<f:ajax render="ContentLoader">
<h:commandLink actionListener="#{contentPage.setPage('/pages/first.xhtml')}" value="About Us" />
<h:commandLink actionListener="#{contentPage.setPage('/pages/login.xhtml')}" value="Contact Us" />
</f:ajax>
</div>
<h:panelGroup id="ContentLoader" >
<div id="content">
<ui:insert name="content" >
<ui:include src="#{contentPage.page}" />
</ui:insert>
</div>
</h:panelGroup>
</div>
</h:form>
links are working fine, but i have problem with redirect content by useing <h:commandButton action="link"> which is in content
how can i fix this problem?
maybe it's something wrong with my layout?
or how to correctly redirect from content to another content, useing buttons which are in contents?
As to your concrete problem, it's likely caused by the combination <ui:include src="#{...}"> and a view scoped bean. This construct works only if you upgrade to at least Mojarra 2.1.18. Otherwise, the view scoped bean will fail to restore and be newly recreated and therefore the default value of #{contentPage.page} will be considered when any form actions inside the page are to be decoded. Upgrading to at least Mojarra 2.1.18 should fix your problem. You can get it at http://javaserverfaces.java.net. It's currently already at 2.1.25.
As to your concrete functional requirement, using command links/buttons for plain page-to-page navigation is a poor practice. You should be using output links/buttons for this.
<h:button value="navigate" outcome="link" />
or
<h:link value="navigate" outcome="link" />
Related
In a facebook-esque fasion, I'm working in a post with comments. The comments have a int which indicates the id of the parent post. So Comment 1 and 2 both have assigned as parent Post 1.
What im working on is on displaying them as a grid within a grid. Here is that part in .zul:
<grid id="postGrid" height="550px" model="#load(vm.pcdata.posts)" emptyMessage="No Posts.">
<template name="model">
<row>
<window border="normal">
<!-- .................. -->
<!-- PARENT POST -->
<!-- .................. -->
<caption id="userPost" label="#load(each.user)"/>
<textbox id="infoPost" readonly="true" value="#load(each.info)" multiline="true" rows="4" width="100%" mold="rounded"/>
<separator bar="true"/>
<hlayout>
<div>
<button label="Like" onClick="#command('addPLike', postid=each.postid)"/>
</div>
<div hflex="true">
<textbox id="likeTB" disabled="true" width="40px" style="text-align:center" value="#load(each.plikes)"/>
</div>
</hlayout>
<separator bar="false"/>
<window border="normal">
<!-- .................. -->
<!-- THE SECOND GRID-->
<!-- .................. -->
<grid id="commentGrid" height="150px" model="#load(vm.pcdata.comments)" emptyMessage="No Comments.">
<template name="model">
<row>
<window border="normal">
<caption id="userComment" label="#load(each.user)"/>
<textbox id="infoComment" readonly="true" value="#load(each.info)" multiline="true" rows="4" width="100%" mold="rounded"/>
<separator bar="true"/>
<hlayout>
<div>
<button label="Like" onClick="#command('addCLike', commentid=each.commentid)"/>
</div>
<div hflex="true">
<textbox id="likeTB" disabled="true" width="40px" style="text-align:center" value="#load(each.clikes)"/>
</div>
</hlayout></window></row></template></grid></window></window></row></template></grid>
In the second grid, I imagine there could be some sort of if function in which if both the postid in the father Post and the postsrc in the child Comment are the same, the comment will be displayed. Is there any way to make this work?
You can use shadow element <if>, e.g.
<if test="#load(vm.yourFlag)">
<grid id="commentGrid">
....
</if>
please see http://books.zkoss.org/zk-mvvm-book/8.0/shadow_elements/flow_control.html
Do you mean commentGrid is created but inner window is hidden, so there is space inside commentGrid, right?
Since you specify emptyMessage on commentGrid, it should show no comments. Or there are still comments but all hidden? If so, you can consider hide both commentGrid with inner window.
I am new to Jest test cases writing, Trying to write the test case for checking navigation in an react application.
Currently I have written test case which works like below:
I have Login page which is having register link on it, which redirects user to the Register page. So what I am checking is
1. Loading the login page
2. Triggered Register link click event
3. So user moved to the Register page
but I am not able to check if the Register page is loaded or not? Is there any way to check the snapshot of the "Register" page and link in URL.
I have used jest, enzyme and react-test-render as shown in below code.
Login Page Html
<React.Fragment>
<BodyContainer noDrawer fullSpan>
<Grid container spacing={0} className={classes.gridContainer}>
<Grid item xs={12} md={6} lg={7} className="login--form">
<div className="login--form--container">
<img src={LogoPurple} alt="ABL" className="onboarding-logo" />
<h3>Welcome back! Please login to your account.</h3>
{error ? <p>{error}</p> : null}
<Field name="email" component={renderTextField} label="Email" style={styles.formField}/>
<Field name="password" component={renderTextField} label="Password" style={styles.formField} />
<Field name="rememberMe" component={renderCheckbox} label="Remember Me" />
<div className="has-spacing">
<Button variant="raised" size="large" color="primary" className="extraLarge" type="submit" onClick={this.handleSubmit}>
Login
</Button>
</div>
<Link to="forgot-password">Forgot Password</Link>
<p className="need-account">
Need an account?
<Link to="/register">
<strong> Sign up</strong>
</p>
</Link>
<LegalLinks />
</div>
</Grid>
</Grid>
</BodyContainer>
</React.Fragment>
In above code register is the link used to navigate.
thanks in advance...
moving from actionscript (flex) to titanium and I'm experimenting with the xml markup. What I have is a template that I picked up from the doc
<ItemTemplate name="template">
<ImageView left="0" bindId="pic" id="icon" />
<Label bindId="info" id="title"/>
</ItemTemplate>
</Templates>
my question is if someone clicks on the pic or a listitem itself, how does one handle the events. through xml markup? Then how do you reference any of the control wrap in the template?
I have tried
<ImageView left="0" bindId="pic" id="icon" onclick="doClick()" />
function doClick(e) {
alert($.info.text);
}
This just produces a error and I still would not know what pic was clicked.
any help would be great..
thanks Mike
Have you checked out the Alloy Quick Start? I think many of your questions can be answered there.
Anyway, for ListViews, you cant add an event listener to an item in the template, its just a template not an actual thing on the screen (yet), refer here, and look at the alloy section.
Instead you need the itemclick event listener on the ListView itself. Check , below for a simple example of what the XML markup looks like.
<ListView id="listView" defaultItemTemplate="template" onitemclick="yourEvent" >
<!-- The Templates tag sets the ListView's templates property -->
<Templates>
<!-- Define your item templates within the Templates tags or use the
Require tag to include a view that only contains an ItemTemplate -->
<ItemTemplate name="template">
<ImageView bindId="pic" id="icon" />
<Label bindId="info" id="title" />
<Label bindId="es_info" id="subtitle" />
</ItemTemplate>
</Templates>
<ListSection headerTitle="Fruit / Frutas">
<!-- You can specify any ListItem or ListDataItem properties in ListItem -->
<!-- Specify data to bind to the item template with inline attributes
defined as <bindId>:<Ti.UI.Component.property> -->
<ListItem info:text="Apple" es_info:text="Manzana" pic:image="/apple.png" />
<ListItem info:text="Banana" es_info:text="Banana" pic:image="/banana.png" />
</ListSection>
</ListView>
Also, you need any JavaScript to be in the controller files, not in the XML markup files. *.js has javascript that is behind the view, which is *.xml.
I have a header, body and footer defined in a Facelet template. I would like to hide the header and footer in my login page. How can I achieve that?
One of the ways would be to just render them conditionally based on the current view ID.
<h:panelGroup id="header" layout="block" rendered="#{view.viewId != '/login.xhtml'}">
Header.
</h:panelGroup>
<div id="body">
<ui:insert name="body">Body.</ui:insert>
</div>
<h:panelGroup id="footer" layout="block" rendered="#{view.viewId != '/login.xhtml'}">
Footer.
</h:panelGroup>
Another way would be to parameterize it using <ui:param>:
<h:panelGroup id="header" layout="block" rendered="#{not hideHeaderAndFooter}">
Header.
</h:panelGroup>
<div id="body">
<ui:insert name="body">Body.</ui:insert>
</div>
<h:panelGroup id="footer" layout="block" rendered="#{not hideHeaderAndFooter}">
Footer.
</h:panelGroup>
And then in the template client of /login.xhtml:
<ui:composition template="/WEB-INF/templates/layout.xhtml" ...>
<ui:param name="hideHeaderAndFooter" value="true" />
<ui:define name="body">
...
</ui:define>
</ui:composition>
I have a problem with the JSF-2.0 templating mechanism. I implement some snippet that are
included to template file. But one of my snippet contains dynamic content.
I do not get an error. But nothing is replaced in my snipplet!
The result do only contain "No link list could be found" string. Do anybody know why?
Thanks
The snippet code
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<div>
<ui:insert name="linkList">No link list could be found</ui:insert>
</div>
© MyCompany
</ui:composition>
The template code
...
<div class="footer">
<ui:insert name="footer">Footer</ui:insert>
</div>
...
The side where specify the template content
...
<ui:define name="footer">
<ui:include src="/snippets/footer.xhtml" />
</ui:define>
...
<ui:define name="linkList">
link structure for the footer
</ui:define>
The following line you have in snippet is -
<ui:insert name="linkList">No link list could be found</ui:insert>
is for templating and it should be in the template.
Include the snippet in the same way you have included the footer. Using
<ui:include src="snippet.xhtml" />