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>
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.
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>
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"
this should be simple...could someone provide me a simple code sample that has an aspx page hosting both a silverlight app (consisting of, say a button) and an iframe (pointing to, say stackoverflow.com). The silverlight app and iframe could be in separate div's, the same div, whatever.
Everything I've tried so far leaves me with a page that has no silverlight control rendered on it.
EDIT: At the request for what my xaml looks like (Plus I should point out that my controls render just fine if I comment out the iframe.)
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Background="Pink">
<Button Content="Click Me!"/>
</Grid>
</UserControl>
Thats it. Just for good measure here is my aspx page...
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div style="height:100%;">
<asp:Silverlight ID="Silverlight1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" MinimumVersion="2.0.30523" Width="400" Height="400" />
</div>
<iframe src ="http://www.google.com" width="400"/>
</form>
Hmm, sound a bit odd, a quick google gave me this top result which talks about using an Iframe and Silverlight on the same page, without problems.
Also a quick test with the following code:
<%# Page Language="C#" AutoEventWireup="true" %>
<%# Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!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" style="height:100%;">
<head runat="server">
<title>Test Page</title>
</head>
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/Test.xap" MinimumVersion="2.0.30523" Width="400" Height="400" />
</div>
<iframe src ="http://www.google.com" width="400"></iframe>
</form>
</body>
</html>
Renders out both Silverlight and the Iframe quite happily.
What code were you using when trying and it didn't work?
What does your XAML look like?
It could be something along the lines of the size set on the usercontrol in XAML, doesn't match the size set on the plugin on the aspx page. In that case, your button might be there but just not in the viewable area... Try checking the size of things, make sure they match.
A quick test you could do is to change the background color of your root element in the XAML and see if anything happen on the page.
Also, does the silverlight work if you remove the Iframe but leave everything else as is?
Sorry if this a too simple suggestion but without knowing your experience level with XAML...
Funny enough, I just solved this issue by ensuring that I specify the iframe dimensions by pixel.