I want to print one div with primefaces printer (primefaces 3.2 with myfaces 2.0).
My faces code is like:
<div id="page">
<!-- SIDEBAR -->
<div id="sidebar"
class="ui-widget-content ui-corner-all ui-helper-clearfix ui-shadow sidebar">
<ui:insert name="sidebar"></ui:insert>
<p:commandButton value="Print" type="button">
<p:printer target="content" />
</p:commandButton>
</div>
<!-- CONTENT -->
<div id="content">
<ui:insert name="content">...</ui:insert>
</div>
<div style="clear: both;"> </div>
</div>
But I get a FacesException:
javax.faces.FacesException: Cannot find component content in view.
Is this possible with primefaces printer or is there another way to do this.
Best Regards Veote
p:printer expects an id of the component, but ui:insert defines a logical section which is going to be inserted by the client. You could try to wrap the content you wish to print in p:outputPanel like so:
<p:outputPanel id="content">
<ui:insert name="content" />
</p:outputPanel>
Related
I have a page with a menubar and a header and message xhtml pages. I want the header page to display specific information like a status bar does. This status bar needs to be updated at different program points thru out the entire app. What is the best way to accomplish this in primefaces. Here is my main.xhtml page. I have tried putting a outputtext in the header.html but it only posts one time when main.xhtml is displayed. I need it to display via a call from a backing bean and update the message.xhtml. I am not trying to display validation messages. I tried using messages but it's not what I am looking for. I am trying to put up a one or two line dashboard above my menubar that will display specific data for example when the user is editing a project ( project/risk management tool) the dashboard would display which project is being edited while the content page has all the fields in the project. this way the user knows what project they are working on.
<h:body>
<ui:include src="/pm2/IdleMonitor.xhtml" />
<div id="page">
<div id="header-container">
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml" />
</ui:insert>
</div>
</div>
<div id="messages-container">
<div id="messages">
<ui:insert name="messages">
<ui:include src="messages.xhtml" />
</ui:insert>
</div>
</div>
<div id="menu-container">
<div id="menu">
<ui:insert name="menu">
<ui:include src="/pm2/MenuBar.xhtml" />
</ui:insert>
</div>
</div>
<div id="content-container">
<div id="bodyContent">
<ui:insert name="bodyContent">
Main content
</ui:insert>
</div>
</div>
<div id="footer-container">
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</div>
I'm using jQuery Mobile and no matter how much content is on the page there is always a scrollbar that appears to the right. Even turning on overflow-hidden doesn't make it go away. The page has nothing but a header, a link, and a panel. How can it be removed?
The HTML is roughly as follows:
<body>
<!-- Document framework -->
<div data-role="page">
<div data-role="panel" id="toolmenu" data-theme="a">
<form>
<fieldset data-role="controlgroup">
<legend>Select Tool:</legend>
<input name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked" type="radio">
<label for="radio-choice-v-2a">One</label>
<input name="radio-choice-v-2" id="radio-choice-v-2b" value="off" type="radio">
<label for="radio-choice-v-2b">Two</label>
<input name="radio-choice-v-2" id="radio-choice-v-2c" value="other" type="radio">
<label for="radio-choice-v-2c">Three</label>
</fieldset>
</form>
</div>
<div data-role="header">
<h1>TITLE</h1>
</div>
<div data-role="content">
Stuff<br />
Open panel link
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
</body>
Thanks.
I solved the problem. The issue was that I had the css files in the wrong order. When you are using a custom theme with jquery mobile, you have to have the css files in a particular order--namely, your themeroller-created custom theme has to come BEFORE the jquery mobile css, and you have to use jquery.mobile.structure-1.4.2.min.css (or the equivalent for whatever version you are using anyway), not the full css file.
I am opening a popup on click of command link, and popup has a textbox and commandLink
whenever I press submit with textbox left blank, it shows validation msg, till now this is fine. Now if I close the popup using cross icon on top right. then again click to showPopup, it show the error messages . I want to clear that messages and open fresh popup.
below is my code
<p:commandLink id="showDialogButton" styleClass="add_icon"
value="ADD" onstart="#{dashboardBean.resetFoodPromoDTO()}" oncomplete="PF('dlg').show()" />
bean
public void resetFoodPromoDTO(){
foodPromoDTO=null;
}
popup dialog
<p:dialog id="dialog" visible="#{not empty facesContext.messageList}" styleClass="customized" widgetVar="dlg" draggable="true" closable="true" resizable="false" width="730">
<div class="popup_subheader">
<div class="float_left">Add - Food Promotion Activity</div>
<div class="float_right"></div>
<div class="clear"></div>
</div>
<div class="popuptext">
<div class="form-label"><label title="Project">Project: </label></div>
<div class="form-field"><p:inputText id="projectName" value="#{dashboardBean.foodPromoDTO.project}" required="true" requiredMessage="#{msg['validation.project.name']}"/>
<p:message id="projeMsgId" for="projectName" autoUpdate="true"/>
</div>
<div class="clear"> </div>
<div class="form-label"><label title="Promo Date">Promo Date:</label></div>
<div class="btn_area_popup">
<span>
<p:commandLink id="submitButton" validateClient="true" value="Save" action="#{dashboardBean.addFoodPromotion()}" update="#form" onuccess="PF('dlg').hide();" ajax="true"/>
</span>
</div>
<div class="clear"></div>
You have to update the dialog
<p:dialog id="dialog" visible="#{not empty facesContext.messageList}" styleClass="customized" widgetVar="dlg" draggable="true" closable="true" resizable="false" width="730">
<h:form id="dialog">
<p:panel id="dialogBody">
....
</p:panel>
</h:form>
</p:dialog>
You can update dialog with this code:
<p:commandLink id="showDialogButton" styleClass="add_icon"
value="ADD" actionListener="#{dashboardBean.resetFoodPromoDTO()}" oncomplete="PF('dlg').show()" update=":dialog:dialogBody" />
You have to use actionListener.
I just switched to JQuery Mobile 1.4, now when I do page transition, both header and footer lose css styling for a while before applying again.
IOS 7.04
Main index file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
<script type="text/javascript" src="js/library/phonegap/cordova_ios.js"></script>
<link rel="stylesheet" type="text/css" href="css/library/JQuery/jquery.mobile-1.4.0.css">
<link rel="stylesheet" type="text/css" href="css/application/base.css">
<script data-main="js/main.js" src="js/library/require/require.js"></script>
</head>
<body class="main_body">
</body>
</html>
some pages that transit between each other with header and footer
page1
<div id="login_template_wrapper">
<div id="leftmainmenu" class="menu-container" data-position="left" data-display="overlay">
</div>
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false">
<h1><%print(T('LOGIN'));%></h1>
<!-- <a id="menu_link" data-role="button" data-icon="gear" data-position="left"><%print(T('LEFTMAINMENU'))%></a> -->
</div><!-- /header -->
<div data-role="content" class="main-content">
<div id="login-content_wrapper" class="content_wrapper">
<div class="content_inner">
<div id="login_input">
<div data-role="label"><%print(T('USERNAME'));%></div><input bc-data-role="input" class="login-form" name="username" value="<%print(logindata['du'])%>"/>
<div data-role="label"><%print(T('PASSWORD'));%></div><input bc-data-role="input" class="login-form" type="password" name="password" value="<%print(logindata['dp'])%>"/>
<input type="submit" class="login-form" data-role="button" id="login_submit" value="<%print(T('LOGIN'));%>"/>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="rememberme" id="rememberme" <%if (logindata['rm']) {print('checked');}%> />
<label for="rememberme"><%print(T('REMEMBER_ME'))%></label>
<input type="checkbox" name="rememberpass" id="rememberpass" <%if (logindata['rp']) {print('checked');}%> />
<label for="rememberpass"><%print(T('REMEMBER_PASSWD'))%></label>
</fieldset>
</div>
</div>
</div><!-- /content inner -->
</div><!-- /content wrapper-->
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ifooter" data-tap-toggle="false" data-hide-during-focus="false">
<div id="login_links" data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-icon="edit" href="#registration"><%print(T('REGISTRATION'))%></a>
<a data-role="button" data-icon="refresh" href="#passwordretrieval"><%print(T('RETRIEVEPASSWORD'))%></a>
</div>
</div><!-- /footer -->
</div>
page2
<div id="registration_template_wrapper">
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false">
<h1><%print(T('REGISTRATION'));%></h1>
<%print(T('BACK'))%>
</div><!-- /header -->
<div data-role="content" class="main-content">
<div id="login-content_wrapper" class="content_wrapper">
<div class="content_inner">
<ul id="registration_input" data-role="listview" data-inset="true">
<li><div data-role="label"><%print(T('USERNAME1'));%></div><input bc-data-role="input" class="registration-form" id="USERNAME1" name="USERNAME1" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('USERNAME2'));%></div><input bc-data-role="input" class="registration-form" id="USERNAME2" name="USERNAME2" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('PASSWORD1'));%></div><input bc-data-role="input" class="registration-form" type="password" id="PASSWORD1" name="PASSWORD1" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('PASSWORD2'));%></div><input bc-data-role="input" class="registration-form" type="password" id="PASSWORD2" name="PASSWORD2" value="" data-mini="true"/></li>
<!--
<li><div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="showpass" id="showpass"/>
<label for="showpass"><%print(T('SHOWPASS'))%></label>
</fieldset>
</div></li>
<li><button id="registration_clean"><%print(T('CLEAN'))%></button></li> -->
<li><button id="registration_save"><%print(T('REGISTRATION'))%></li></button>
</ul>
</div><!-- /content inner -->
</div><!-- /content wrapper-->
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ifooter" data-tap-toggle="false" data-hide-during-focus="false">
<div id="login_links" data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-icon="edit" href="#registration"><%print(T('REGISTRATION'))%></a>
<a data-role="button" data-icon="refresh" href="#passwordretrieval"><%print(T('RETRIEVEPASSWORD'))%></a>
</div>
</div><!-- /footer -->
</div>
I load page template through backbone view, and do the page transition use the following code
$.mobile.changePage(__this.currentView.$el, {'reverse': reverse, 'changeHash': false, 'transition': mobile_transition});
Everything worked fine in 1.4 alpha and beta, but in 1.4 release, the header and footer loses css styling for a while before applying css style again.
I had the same problem. My solution was to directly add data-theme="a" to the header.
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false" data-theme="a">
<h1><%print(T('REGISTRATION'));%></h1>
<%print(T('BACK'))%>
</div><!-- /header -->
I believe this is something to do with the new theme inheriting mechanism but i cant seem to find any useful documentation on the subject.
I tried the Max's answer but it didn't work for me.
The "fixed" header/footer are moved outside the containing "page" div during transition and moved back in after the animation. You should add additional css selectors to apply the styling on the moved header/footer.
For example if you current selector is .ui-page-theme-a .ui-bar-a .ui-btn.back-link , add another selector for your css like .ui-mobile-viewport .ui-bar-a .ui-btn.back-link. This is because the header/footer is no longer inside .ui-page-theme-a and is inside .ui-mobile-viewport during the transition.
Hope it helps!
My facelet code is as below,
<div class="notes_Innercontainer">
<div class="notes_Innercontainer2">
<div class="notes_headerBar">
<div class="notes_headerBar_col1">#{msgs.note_com_date_time}</div>
<div class="notes_headerBar_col2">#{msgs.note_com_view}</div>
</div>
<h:panelGroup id="notecomponent">
<div class="scrollArea">
<div class="scroll-pane" id="pane1">
<div class="notes_table">
<ui:repeat var="note" value="#{noteController.noteList}" varStatus="status">
<div class="notes_table_rw1">
<div class="notes_Rw_col1">#{note.createDate}</div>
<div class="notes_Rw_col2">
<h:commandButton image="resources/images/updateBtn.gif" class="tTip" value="Update1">
<f:ajax event="click" execute="#form" render="#all" listener="#{noteController.loadEditableNoteComponent}" onevent="note_popupopener"/>
<f:param value="#{note.noteTaskIdEdit}" name="noteTaskIdForEdit">
</f:param>
</h:commandButton>
</div>
</div>
</ui:repeat>
</div>
</div>
</div>
</h:panelGroup>
</div>
</div>
<div class="originator_ButtonContainer">
<h:commandButton image="resources/images/addNoteBtn.gif" border="0">
<f:ajax event="click" execute="notecomponent" render="notecomponent" listener="#{noteController.loadAddNotePopUp}" onevent="add_note_popupopener"/>
</h:commandButton>
</div>
When I use f:ajax for that "update" button (updateBtn) with options as execute="#form" render="#all" it works as ad-hoc way (mean some times scroll-pane not working), but my "add" button (addNoteBtn) function correctly with options execute="notecomponent" render="notecomponent" options. Is there any way to give me execute, render options for "update" button as that "add" button.
Thanks