Primefaces Forms and LayoutUnit - forms

I am new to primefaces and I am using the latest version 6.2. Following the guidelines on the user guide I have created a template using 2 forms (one for each layoutunit) setting different ID for each form.
<?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:ui="http://java.sun.com/jsf/facelets" 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:fn="http://java.sun.com/jsp/jstl/functions" xmlns:p="http://primefaces.org/ui">
<ui:composition>
<h:head>
<title>#{messages.appname}</title>
<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" type="image/x-icon" />
</h:head>
<body>
<p:layout fullPage="true" id="myPage">
<p:layoutUnit id="up" position="north" size="130" header="" resizable="true" closable="false" collapsible="true">
<h:form id="upform">
<ui:include src="/templates/top.xhtml" />
</h:form>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<h:form id="centerform">
<ui:include src="/templates/center.xhtml" />
</h:form>
</p:layoutUnit>
<p:layoutUnit id="down" position="south" size="60" header="" resizable="true" closable="true" collapsible="true">
<h:outputText value="© 2018 - IT" />
</p:layoutUnit>
</p:layout>
</body>
</ui:composition>
</html>
My problem is that when I load the page in Chrome and I inspect the elements, Chrome is complaining for DOM,as it tracks 2 elements with non-unique ID.
​login.xhtml:1 [DOM] Found 2 elements with non-unique id #j_id1:javax.faces.ViewState:0: (More info:) <input type=..."hidden" name=..."javax.faces.ViewState" id=..."j_id1:...javax.faces.ViewState:...0" value=..."bla bla" autocomplete=..."off">... <input type=..."hidden" name=..."javax.faces.ViewState" id=..."j_id1:...javax.faces.ViewState:...0" value=..."bla bla 2" autocomplete=..."off">...
As I suspect that this will cause javascript problems - how can I overcome this?

Related

How to expose an iterator variable from a JSF composite component to the IDE in the using page

My setup is Eclipse Oxygen, JSF 2.2, JBoss 7.0 (Mojarra JSF implementation) and Primefaces 6.0.
I've wrapped the Primefaces dataTable in a JSF composite-component (my:dataTable):
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" xmlns:composite="http://xmlns.jcp.org/jsf/composite"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<composite:interface>
<composite:attribute name="value" required="true" type="java.lang.Object" />
<composite:attribute name="var" required="true" type="java.lang.String" targets="dataTable"/>
</composite:interface>
<composite:implementation>
<div class="ui-g">
<div class="ui-g-12">
<p:dataTable id="dataTable" value="#{cc.attrs.value}" sortMode="multiple"
paginator="true" rows="10"
rowsPerPageTemplate="10, 20, 50, 100" currentPageReportTemplate="Ergebnisse {startRecord} - {endRecord} von {totalRecords}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
<c:set target="#{component}" property="var" value="#{cc.attrs.var}"/>
<composite:insertChildren/>
</p:dataTable>
</div>
</div>
</composite:implementation>
The Primefaces column is implemented as a custom component (my:column):
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" >
<p:column headerText="#{headerText}" sortable="#{sortable}">
<ui:insert />
</p:column>
</ui:composition>
And the component is called in the using page:
<my:dataTable id="datenTabelleID" value="#{showcaseDatenTabelleBean.quellWerteListe}" var="laufvar">
<my:column headerText="ID">
<h:outputText value="#{laufvar.id}" />
</my:column>
<my:column headerText="Name">
<h:outputText value="#{laufvar.name}" />
</my:column>
</my:dataTable>
Everything works as expected except for the IDE (in my case Eclipse) code assist for the iterator variable. I have no code completion for the attribute declared as var (laufvar).
Thanks in advance.

Primefaces 5.2 dialog form not submitting

I am using primefaces 5.2 dialog framework to popup a dialog from my backing bean. That dialog with a simple login form.
main.xhtml as:
<h:form prependId="false">
......
<p:commandButton value="#{apps['application.sec.login']}" immediate="true" actionListener="#{loginControlBean.fireLoginDialog}" icon="fa fa-fw fa-sign-in" />
.....
</h:form>
backing bean LoginControlBean.java as:
#Named(value = "loginControlBean")
#SessionScoped
public class LoginControlBean implements Serializable{
private static final Logger logger =Logger.getLogger(LoginControlBean.class.getName());
#Inject
private StaffSession staffSession;
/* ... get/set pairs ...*/
......
public void fireLoginDialog() {
Map<String,Object> options = new HashMap<String, Object>();
options.put("modal", true);
options.put("draggable", false);
options.put("resizable", false);
RequestContext.getCurrentInstance().openDialog("/sec/login", options, null);
}
.......
public void login(ActionEvent event) {
logger.info("Passed in information: User name: "+staffSession.getTempUserName()+" Password: "+staffSession.getTempPassword());
.......
}
login.xhtml as:
<?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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="default.css"/>
<h:outputStylesheet library="css" name="cssLayout.css"/>
<title>Staff Login</title>
</h:head>
<h:body>
<ui:composition>
<h:form id="loginform">
<p:growl id="logingrowl" sticky="true" showDetail="true" life="60000" />
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="#{apps['application.sec.username']}" />
<p:inputText id="username" value="#{staffSession.tempUserName}" required="true" label="username" />
<h:outputLabel for="password" value="#{apps['application.sec.password']}" />
<p:password id="password" value="#{staffSession.tempPassword}" required="true" label="password" />
<f:facet name="footer">
<p:commandButton process="#form" value="Login" update="logingrowl" actionListener="#{loginControlBean.login}"/>
</f:facet>
</h:panelGrid>
</h:form>
</ui:composition>
</h:body>
</html>
dialog popup properly and when I input user name and password, then hit login button. I got exception in my backend(server side) log as:
####<Nov 2, 2016 5:20:10 PM AEDT> <Info> <com.longz.ozssc.web.staff.LoginControlBean> <macmini16g.tweedheadstorage.com.au> <OzsscWEBServer> <[ACTIVE] ExecuteThread: '5' for queue: 'weblogic.kernel.Default (self-tuning)'> <<anonymous>> <> <49d77419-9b42-461a-92bb-25b06f512a63-0000001d> <1478067610444> <[severity-value: 64] [rid: 0] [partition-id: 0] [partition-name: DOMAIN] > <BEA-000000> <Passed in information: User name: null Password: null>
filled in fields in the form were bound to staffSession, but unfortunately, when I tried to access the values from backing bean staffSession, it is "null". Seems form submit is not working.
Any idea??
You didn't set the values of your input fields correctly.
value="#{staffSession.tempUserName}"
You need to add the bean to the values:
value="#{loginControllBean.staffSession.tempUserName}"

form submit button not working when view is using master layout

Following my previous question, now things are not working again, here it goes:
I have form in MVC 4, and the form button does not respond:
Controller (that should get the post action):
public class GeneralController {
[HttpPost]
public ActionResult SearchResults(SearchParamsModel searchParams)
{
// doin some stuff here
return View("SearchResultsView");
}
}
View (.cshtml):
#model MVC.Models.SearchParamsModel
#{
ViewBag.Title = "SomeTitle";
}
#Html.Partial("~/Views/SomePartials/ssi-header.cshtml");
#Html.Partial("~/Views/SomePartials/ssi-sidebar-notifications.cshtml");
<!-- content -->
<section class="content right">
<section class="some-search">
<div class="form-separator gradient"></div>
#using (Html.BeginForm("SearchResults", "Home", FormMethod.Post))
{
<section class="form-field">
<input type="text" name="City" id="City" class="field field139 autocomplete-init-no-img" />
<label for="City">City</label>
</section>
<input type="submit" value="Submit Search" class="submit btn blue-btn special-submit" />
}
</section>
</section>
<!-- end content -->
#Html.Partial("~/Views/SomePartials/ssi-footer.cshtml");
Model :
public class SearchParamsModel
{
public string City{ get; set; }
}
Things are only working if I add in View : Layout = null (!!!Wierd)
My Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/SomeStyles")
#*#Scripts.Render("~/bundles/SomeScripts")*#
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../../Scripts/script1.js" type="text/javascript"></script>
<script src="../../Scripts/script2.js"></script>
....
</head>
<body>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
#*#RenderSection("scripts", required: false)*#
</body>
</html>
Like the answer in your previous question you should post to General controller and not Home controller.
#using (Html.BeginForm("SearchResults", "General", FormMethod.Post))
Cheers.

GWT Dynamic Locale

I want to set gwt-locale taking user chosen locale with the help of Spring LocaleContextHolder.
public static final String getCurrentLocale() {
return LocaleContextHolder.getLocale().getLanguage();
}
I actually have login interface in Spring MVC and inner Dashboard in gwtp. The same locale user chooses in outer interface before login has to be passed to gwt as well.
Unfortunately, I don't see any gwt inbuilt Locale setters.
My X.gwt.xml with default locale as kh is :
<inherits name="com.google.gwt.uibinder.UiBinder" />
<inherits name="com.google.gwt.inject.Inject" />
<inherits name="com.gwtplatform.mvp.Mvp" />
<inherits name="gwtquery.plugins.droppable.Droppable"/>
<source path="client" />
<source path="shared" />
<define-configuration-property name="gin.ginjector" is-multi-valued="false"/>
<set-configuration-property name="gin.ginjector" value="com.prayagupd.client.mvp.XGInjector"/>
<set-configuration-property name="UiBinder.useSafeHtmlTemplates" value="true" />
<extend-property name="locale" values="kh" />
<extend-property name="locale" values="en" />
<set-property name="locale" value="kh"/>
<set-property-fallback name="locale" value="kh"/>
<entry-point class="com.prayagupd.client.XEntryPoint"/>
My XEntryPoint.java reads as :
public class XEntryPoint implements EntryPoint {
private final IUserServiceAsync rpc = GWT.create(IUserService.class);
#Override
public void onModuleLoad() {
//
rpc.getLocale(new AsyncCallback<String>() {
#Override
public void onSuccess(String locale) {
GWT.log("Locale From Spring : " + locale);
GWT.log("Locale From GWT : " + LocaleInfo.getCurrentLocale().getLocaleName());
//here i want to set locale to gwt
//something like GWTLocale.setLocale(locale);
}
#Override
public void onFailure(Throwable caught) {
GWT.log(caught.getMessage());
}
});
DelayedBindRegistry.bind(ginjector);
ginjector.getPlaceManager().revealCurrentPlace();
}
}
home.jsp for gwt-loading
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<%#tag import="java.util.Calendar"%>
<%# tag body-content="scriptless"%>
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib prefix="spr" tagdir="/WEB-INF/tags"%>
<%# attribute name="isgwt" required="true" type="java.lang.Boolean"%>
<!-- <!DOCTYPE html> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" type="image/png" href="/images/favicon.png" />
<script type="text/javascript" src="js/reload.captcha.js"></script>
<script type="text/javascript" src="js/date.picker.js"></script>
<link rel="stylesheet" href="/styles/innerstyle.css" type="text/css" />
<c:if test="${not isgwt}">
<link rel="stylesheet" href="/styles/mainstyler.css" type="text/css" />
<script type="text/javascript" src="js/modernizer.custom.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-custom.min.js"></script>
<script src="js/jquery.thumbnailScroller.js"></script>
</c:if>
<c:if test="${isgwt}">
<meta name="gwt:property" content="locale=${locale}">
<script type="text/javascript" language="javascript" src="upd/upd.nocache.js"></script>
</c:if>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<title><c:out value="${locale}"></c:out><spring:message code="page.header" /></title>
</head>
<body>
<c:choose>
<c:when test="${empty username}">
<div class="header_con">
<div class="header_in">
<spr:header />
<spr:login />
<div class="clear"></div>
</div>
<div class="main_con">
<jsp:doBody />
<spr:footer />
</div>
<div class="clear"></div>
</div>
</c:when>
<c:otherwise>
<div id="mainHolder">
<div id="wrapper">
<spr:headerInner />
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
style="position: absolute; width: 0; height: 0; border: 0"></iframe>
<div>
<div id="gwt_holder">
<c:if test="${isgwt}">
<div id="loader" class="loader">
</div>
</c:if>
<div id="gwt"></div>
</div>
</div>
</div>
</div>
</c:otherwise>
</c:choose>
</body>
</html>
Adding ?locale=en or ?locale=kh to gwt url works perfectly, but want to tell GWT only once that I want this locale programmatically and want it to work always with that locale onwards.
When I look at the *.html source code, I can see the injected the <meta> tag with proper locale passed from SpringController.
References
GWT dynamic internationalization, Colin Alworth
How i change the locale language of the application
Use a dynamic host page where you inject the proper <meta name="gwt:property" content="locale=XXX">.
Remember the GWT bootstrap sequence: once your onModuleLoad has been called, the choice of the permutation (which includes the locale) has already been made. You have to alter the bootstrap sequence so it chooses the proper permutation for the user. ?locale=XXX does this (because the locale property has a <property-provider> that reads the locale query-string parameter, among other things), as well as the <meta> above.
See also https://code.google.com/p/google-web-toolkit-incubator/wiki/ServerSideLocaleSelection for some idea (BEWARE: deprecated project!)
Finally, there are a few issues with your *.gwt.xml, starting with kh not being a valid locale.
The workflow for internationalizing your app is as follows:
list your locales:
<extend-property name="locale" value="en" />
<extend-property name="locale" value="fr" />
remove the default locale by setting the locale property to the full list of supported locales:
<set-property name="locale" value="en,fr" />
set the fallback locale:
<set-property-fallback name="locale" value="en" />
Optionally, you can select how the locale is determined using the properties locale.queryparam, locale.cookie, locale.usemeta, locale.useragent, and locale.searchorder (see the I18N.gwt.xml for their default and accepted values).
And finally, add code to select the locale (e.g. the dynamic <meta> above)
The solution inspired by Thomas Broyer,
X.gwt.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.3.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.3.0/distro-source/core/src/gwt-module.dtd">
<module rename-to="x">
<inherits name="com.google.gwt.user.User"/>
<inherits name="com.google.gwt.i18n.I18N" />
<inherits name="com.google.gwt.http.HTTP" />
<inherits name="com.google.gwt.json.JSON"/>
<inherits name="com.google.gwt.uibinder.UiBinder" />
<inherits name="com.google.gwt.inject.Inject" />
<inherits name="com.gwtplatform.mvp.Mvp" />
<inherits name="gwtquery.plugins.droppable.Droppable"/>
<source path="client" />
<source path="shared" />
<define-configuration-property name="gin.ginjector" is-multi-valued="false"/>
<set-configuration-property name="gin.ginjector" value="com.prayagupd.client.mvp.XGInjector"/>
<set-configuration-property name="UiBinder.useSafeHtmlTemplates" value="true" />
<extend-property name="locale" values="kh" />
<extend-property name="locale" values="en" />
<set-property-fallback name="locale" value="kh"/>
<entry-point class="com.prayagupd.client.XEntryPoint"/>
</module>
And , home.jsp
<c:if test="${isgwt}">
<meta name="gwt:property" content="locale=${locale}">
<script type="text/javascript" language="javascript" src="upd/upd.nocache.js"></script>
</c:if>
locale being passed from Spring Controller
{
//...
modelMap.put("locale", locale);
return "home";
}
Thomas Broyer's answer is correct, except one thing. You don't mandatory need to use "dynamic host page", meta tag can be defined dynamically on the client side:
<script type="text/javascript">
$.ajax("rest/service/default-locale").done(function(data) {
if (data) {
var metaLocale = $("<meta name='gwt:property' content='locale=" + data + "'>");
$("head").append(metaLocale);
}
var jsLink = $("<script src='myapp.nocache.js'>");
$("head").append(jsLink);
});
</script>
This way any additional modifications can be done on the client side before GWT app starts.

ui:repeatn tag inside ui:repeat..not working

I am using ice:faces in my project.
I have issues with UI:Repeat.
It never works ....
ui:repeatn tag inside ui:repeat..
do I need to do anything different..
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<ui:repeat value="#{item.rowField3}" var="section">
<ice:panelGrid columns="#{section.columns}">
<ui:repeat items="#{section.fieldInfo}" var="fieldInfo">
<ui:include src="rowField.jspx" />
</ui:repeat>
</ice:panelGrid>
</ui:repeat>
</html>
Attribute "items" in your nested ui:repeat should be "value".