Base on example from richface showcase:
http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&sample=simplePopup&skin=blueSky
When I call the popup using #{rich:component, nothing happen (ie. no popup):
<a4j:commandLink styleClass="no-decor" execute="#this"
oncomplete="#{rich:component('popup')}.show()">
However when I change to using rich:componentControl, popup appear
<a4j:commandLink styleClass="no-decor" execute="#this">
<rich:componentControl target="popup" operation="show" />
Note: Both work find from GAE when I run from my local notebook but problem happen when I deploy to GAE online (http://cloudenterpriseapps.appspot.com/public/test/testPopup.jsf)
Any help?
Just solved by adding
<a4j:status onstart="#{rich:component('statPane')}.show()"
onstop="#{rich:component('statPane')}.hide()" />
...
<rich:popupPanel id="statPane" autosized="true">
<h:graphicImage value="/images/common/ai.gif" alt="ai" />
Please wait...
</rich:popupPanel>
Here the complete code and now work fine.
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:composition>
<h:head>
<title>RichFaces Showcase</title>
</h:head>
<h:body>
<a4j:status onstart="#{rich:component('statPane')}.show()"
onstop="#{rich:component('statPane')}.hide()" />
<a4j:commandLink styleClass="no-decor" execute="#this" render="#none"
action="#{dummyBean.methodCall}"
oncomplete="#{rich:component('popup')}.show()">
<h:graphicImage value="/images/icons/common/edit.gif" alt="edit" />
</a4j:commandLink>
<h:form id="myform">
<rich:popupPanel id="popup" modal="false" autosized="true"
resizeable="false">
<f:facet name="header">
<h:outputText value="Simple popup panel" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<p>Any content might be inside this panel.</p>
<p>
The popup panel is open and closed from the javascript function of
component client side object. The following code <a href="#"
onclick="#{rich:component('popup')}.hide()">hide this panel</a>:
<f:verbatim>#</f:verbatim>
{rich:component('popup')}.hide()
</p>
<a4j:commandButton value="Close" styleClass="no-decor"
execute="#this" render="#none" action="#{dummyBean.methodCall2}"
oncomplete="#{rich:component('popup')}.hide()"/>
<br />
</rich:popupPanel>
</h:form>
<rich:popupPanel id="statPane" autosized="true">
<h:graphicImage value="/images/common/ai.gif" alt="ai" />
Please wait...
</rich:popupPanel>
</h:body>
</ui:composition>
</html>
Related
I'm trying to use primeflex to design my web as a responsive application.
When I test my application in my computer, it works well. But when I test my application in my mobile phone, it doesn't work well. It should paint the field one below the other, but it doesn't.
The design I would like is:
The code of the example is very easy:
<div class="formgrid grid">
<div class="field col-12 md:col-6">
<h:outputLabel for="phone1" value="Phone 1:" />
<p:inputText id="phone1" maxlength="9" styleClass="w-full" />
</div>
<div class="field col-12 md:col-6">
<h:outputLabel for="phone2" value="Phone 2:" />
<p:inputText id="phone2" maxlength="9" styleClass="w-full" />
</div>
</div>
What is not working the responsive design on my mobile phone?
I forgot to use:
<meta name="viewport" content="initial-scale=1" />
That was all.
I have the next problem, when I use only two columns (one for the names and other for the checkbox or one for the names and other for the radiobutton) everything is fine, but when I use three columns(one for the names, other for the checkbox and the last for the radiobutton) I´ve got the next error in console when I try to write in the filter field.
filterheader.js:46 Uncaught TypeError: field.getValue is not a function
at g.<anonymous> (filterheader.js:46)
at Object.each (ext-all.js:19)
at g.runFiltering (filterheader.js:46)
at g.onFieldChange (filterheader.js:45)
at ext-all.js:19
I dont know what to do, I dont have much practice in ext.net. Before
an apology for my English. I would really appreciate some help.
<ext:GridPanel ID="grdNames" runat="server" Title="Names" HideCollapseTool="false" UI="Primary" HideHeaders="false" Layout="FitLayout" ColumnLines="false" BodyStyle="GridFiltros" Border="false" Region="Center" Frame="false" ForceFit="true" AutoScroll="false" Resizable="false">
<Store>
<ext:Store ID="strOrigen" runat="server">
<Model>
<ext:Model ID="Model25" runat="server">
<Fields>
<ext:ModelField Name="CheckNames" Type="Boolean" DefaultValue="false" />
<ext:ModelField Name="Names" />
</Fields>
</ext:Model>
</Store>
<View>
<ext:GridView ID="GridView6" runat="server" TrackOver="true" StripeRows="true" />
</View>
<ColumnModel ID="ColumnModel15" runat="server">
<Columns>
<ext:ComponentColumn ID="radColumn" runat="server" Width="30" DataIndex="CheckNames" Align="Left">
<Component>
<ext:Radio ID="rdGo" runat="server" Name="vGO">
</ext:Radio>
</Component>
</ext:ComponentColumn>
<ext:CheckColumn ID="CheckColumn" runat="server" DataIndex="CheckNames" Sortable="false" HideTitleEl="true" Width="35"
Resizable="false" StopSelection="false" Editable="true" Filterable="false" Align="Left"
Groupable="false" MenuDisabled="true">
<Items>
<ext:Checkbox runat="server" ID="chkRptGeoO" Checked="false">
<Listeners>
<Change Fn="chkChangeRptGeoO"></Change>
</Listeners>
</ext:Checkbox>
</Items>
</ext:CheckColumn>
<ext:Column ID="NamesColumn" runat="server" HideTitleEl="true" DataIndex="Names" MenuDisabled="true" Width="200" TabMenuHidden="true" />
</Columns>
</ColumnModel>
<Plugins>
<ext:FilterHeader ID="grdNames" runat="server" OnCreateFilterableField="OnCreateFilterableField">
</ext:FilterHeader>
</Plugins>
</ext:GridPanel>
I tried to reproduce your code but couldn't reproduce the issue. Maybe you need to upgrade your Ext.NET version?
Check if this works on your side, I tried reproducing your scenario with the code snippet you provided, but maybe I skipped something?
<%# Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
strOrigen.Data = new List<object>()
{
new { CheckNames = false, Names = "Name 1" },
new { CheckNames = false, Names = "Name 2" },
new { CheckNames = true, Names = "Name 3" },
new { CheckNames = false, Names = "Name 4" }
};
strOrigen.DataBind();
}
}
</script>
<html>
<head runat="server">
<title></title>
</head>
<body>
<form runat="server" id="fm1">
<div>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="grdNames" runat="server" Title="Names">
<Store>
<ext:Store ID="strOrigen" runat="server">
<Model>
<ext:Model ID="Model25" runat="server">
<Fields>
<ext:ModelField Name="CheckNames" Type="Boolean" DefaultValue="false" />
<ext:ModelField Name="Names" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<View>
<ext:GridView ID="GridView6" runat="server" TrackOver="true" StripeRows="true" />
</View>
<ColumnModel ID="ColumnModel15" runat="server">
<Columns>
<ext:ComponentColumn ID="radColumn" Text="radCol" runat="server" Width="30" DataIndex="CheckNames">
<Component>
<ext:Radio ID="rdGo" runat="server" Name="vGO">
</ext:Radio>
</Component>
</ext:ComponentColumn>
<ext:CheckColumn ID="CheckColumn" runat="server" Text="chkCol" Editable="false" Filterable="false" DataIndex="CheckNames" Width="35" MenuDisabled="true">
<Items>
<ext:Checkbox runat="server" ID="chkRptGeoO" Checked="false">
</ext:Checkbox>
</Items>
</ext:CheckColumn>
<ext:Column ID="NamesColumn" runat="server" Text="names" DataIndex="Names" Width="200" />
</Columns>
</ColumnModel>
<Plugins>
<ext:FilterHeader ID="FilterHeader1" runat="server">
</ext:FilterHeader>
</Plugins>
</ext:GridPanel>
</div>
</form>
</body>
</html>
Using Ext.NET 4.2.1 here.
I have made a lot of progress in converting my JSF applications to book-markable pages, but I am wondering if I am doing it the right way. One question is that is there a best-practice location for the f:metadata tags?
My typical Facelets client page looks like this:
<ui:composition template="./pattern.xhtml">
<ui:define name="content">
<f:metadata>
<f:viewParam name="userId" value="#{bean.userId}" />
<f:viewParam name="startRecord" value="#{bean.startRecord}" />
<f:viewParam name="pageSize" value="#{bean.pageSize}" />
<f:viewParam name="sort" value="#{bean.sort}" />
</f:metadata>
<h1>Data Table</h1>
etc
So the f:metadata and child f:viewParam tags are encountered in the body of my page. My pattern.xhtml template also has a section (named "header") that could put these tags in the header section. Should they be put there? Does it make a difference or am I set up for some side effect I haven't seen yet?
Technically, it doesn't matter where you declare the <f:metadata> in the view as long as it's in the top level view (so, when using templating, in the template client and thus not in the master template). When the view get built, the metadata is basically not part of the JSF component tree, but of the view root (which you can obtain on a per-view basis by ViewDeclarationLanguage#getViewMetadata()).
Most self-documenting would be to put the <f:metadata> in the top of the view, so that you can see any metadata at first glance without the need to scroll to halfway or bottom the view source code.
When using a plain page, just put it right before the <h:head>.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<f:metadata>
<f:viewParam name="userId" value="#{bean.userId}" />
<f:viewParam name="startRecord" value="#{bean.startRecord}" />
<f:viewParam name="pageSize" value="#{bean.pageSize}" />
<f:viewParam name="sort" value="#{bean.sort}" />
</f:metadata>
<h:head>
...
</h:head>
<h:body>
...
</h:body>
</html>
When using templating, the recommended approach, as stated in the <f:metadata> tag documentation, would be to declare a separate <ui:insert name="metadata"> in the master template and let the client define the <f:metadata> in an <ui:define name="metadata">.
<ui:composition template="/WEB-INF/pattern.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<ui:define name="metadata">
<f:metadata>
<f:viewParam name="userId" value="#{bean.userId}" />
<f:viewParam name="startRecord" value="#{bean.startRecord}" />
<f:viewParam name="pageSize" value="#{bean.pageSize}" />
<f:viewParam name="sort" value="#{bean.sort}" />
</f:metadata>
</ui:define>
<ui:define name="content">
<h1>Data Table</h1>
...
</ui:define>
</ui:composition>
I am using following code to edit value of a record. And the code is working fine.
<rich:popupPanel header="Edit Company Region" id="editCompanyRegionPane"
domElementAttachment="parent" width="230" height="115">
<h:form>
<h:panelGrid columns="3" id="editCompanyRegionGrid">
<h:inputHidden value="#{CompanyAdminPageModel.editCompanyRegion.companyRegionId}"
id="editcompanyRegionId">
</h:inputHidden>
<h:message for="editcompanyRegionId" />
<h:column>
<h:outputText value="Name " />
<h:inputText value="#{CompanyAdminPageModel.editCompanyRegion.name}"
id="editCompanyRegionName">
</h:inputText>
<h:message for="editCompanyRegionName" />
</h:column>
</h:panelGrid>
<h:commandButton value="Update"
action="#{CompanyAdminPageModel.companyRegionUpdate}" render="table"
oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editCompanyRegionPane')}.hide();}" />
<h:commandButton value="Cancel"
onclick="#{rich:component('editCompanyRegionPane')}.hide(); return false;" />
</h:form>
</rich:popupPanel>
I want to show a message in the same page after updating the value in database. For example: when I will click on the update button then it will call method from Bean class and then update value in the DB and after closing the popup panel it will display a message (like: updated successfully) inside the same page.
Any help please.
I used follwoing java code:
public String updateUser(Long usrId, String firstName, String lastName,
String loginName, String emailAddr) {
AllCompanyDAO aDAO = new AllCompanyDAO();
FacesContext.getCurrentInstance().addMessage("test", new javax.faces.application.FacesMessage("Success"));
return aDAO.userUpdate(usrId, firstName, lastName, loginName, emailAddr);
}
and following jsf code:
<div class="content container">
<div style="padding-left:220px;">
To see the relationships between users and regions <a href="#{appPath}/app/insertion/userRegionInfo.faces" >click here</a> <br/>
<h:message for="test"></h:message>
</div>
</div>
At the end of companyRegionUpdate(), add :
A message
FacesContext.getCurrentInstance().addMessage("test", new FacesMessage("Success"));
Where test is the absolute reference to the <h:message> JSF component.
To your <h:commandButton> , add Ajax support
Such as
<h:commandButton value="Update" >
<a4j:support oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editCompanyRegionPane')}.hide();}" action="#{CompanyAdminPageModel.companyRegionUpdate}" event="onclick" reRender="test, table" />
</h:commandButton>
Where test is the absolute reference to the <h:message> JSF component.
Instead of adding ajax support to your <h:commandButton>, you could simply use <a4j:commandButton > component which has ajax support.
I used following code that solved my problem.
1. Used the following code in the companyRegionUpdate method in java.
FacesContext.getCurrentInstance().addMessage("test", new javax.faces.application.FacesMessage("Successful"));
Then used <h:messages /> inside my desired div. <h:messages /> is different than <h:message />. In my case <h:messages /> works.
That's it. :-)
I am trying to embed a Silverlight control into a JSF 2.0 page, which is using Facelets, however, I am receiving a very ambiguous error message when the page renders.
Can anyone suggest how I can do this? I have my clientaccesspolicy.xml, and silverlight.js in place.
When I remove the <object> tag, the JSF page displays correctly
If I place the <object> tag into a vanilla HTML page, the silverlight control renders correctly in my Tomcat 7.0.25.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:cayman="http://www.fnet.com/cayman/jsf"
template="/WEB-INF/jsf/template.xhtml">
<ui:define name="title">Home Page</ui:define>
<ui:define name="content">
<h:form>
<ui:include src="header.xhtml">
<ui:param name="loginBean" value="#{UserLoginComponent}" />
</ui:include>
<div>
<p:growl />
</div>
<center>
<p:panel header="Home Page">
<f:verbatim escape="#{true}">
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="Dashboard.xap" />
<a
href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0"
style="text-decoration: none"> <img
src="http://go.microsoft.com/fwlink/?LinkId=161376"
alt="Get Microsoft Silverlight" style="border-style: none" />
</a>
</object>
</f:verbatim>
<iframe id="_sl_historyFrame"
style="visibility: hidden; height: 0px; width: 0px; border: 0px"></iframe>
<h:inputHidden id="userid" value="ADMINISTRATOR" />
<h:inputHidden id="password" value="admin" />
<h:inputHidden id="adminserviceuurl"
value="http://129.196.218.35:8080/cayman/services" />
</p:panel>
</center>
</h:form>
</ui:define>
Remove <f:verbatim>. It's a leftover from the old ages of JSF 1.x on JSP and deprecated in JSF 2.x.
As to the ambiguous error message which you forgot to include in your question, make sure that you're properly escaping XML special characters like &. Facelets is a XML based view technology and will be parsed by a XML parser before generating the HTML. The XML parser will choke when it encounters & which is supposed to represent the start of an entity, but there is no ; to denote the end of an entity or when the entity by itself does not represent anything at all.
So, replace
href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0"
by
href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0"