I'm using primefaces 3.0.M2 with backing bean to add files arranged in folders (modules) and subfolders(assignments). I have managed to do that successfully, but I can't have control over the file to make it downloadable. I want to make the file as a button to download that specific file instead of just being a normal text. Please check the jsf code below:
<p:tree id="tree" value="#{files.root}" var="doc" selectionMode="single"
selection="#{files.selectedTreeNode}">
<p:treeNode>
<h:outputText value="#{doc}"/>
</p:treeNode>
</p:tree>
Here is my backing bean class:
public class FilesBean implements Serializable {
private TreeNode root;
public TreeNode getRoot() {
root = new DefaultTreeNode("root", null);
TreeNode general = new DefaultTreeNode("General", root);
TreeNode module = null;
TreeNode assignment = null;
TreeNode fileNode = null;
if(getMoudles()!=null)
{
for(String s : getMoudles())
{
module = new DefaultTreeNode(s, root);
if(getAssignments()!=null)
{
for (Assignments as : getAssignments())
{
if(as.getMoudleid().equals(s))
assignment = new DefaultTreeNode(as.getAssignmentsPK().getAssignmentid(), module);
for(Files file : getFiles())
{
if (file.getFilesPK().getAssignmentid().equals(as.getAssignmentsPK().getAssignmentid()) && file.getThemodule().equals(s))
{fileNode = new DefaultTreeNode(file,assignment);}
}
}
}
}
}
return root;
}
PS: PrimeFaces 3.0.M2, JSF 2.0, J2EE 6 Web, Servlet 3.0, Glassfish 3.0, EJB 3.0, browser: IE8 also tried on FireFox 3.6.12
Have you tried using a <p:commandButton> with <p:fileDownload>?
<p:commandButton
value="Download"
title="Download"
image="ui-icon-arrowthick-1-s"
ajax="false">
<p:fileDownload value="#{myBean.fileStreamedContent}" />
</p:commandButton>
In your backing bean (for example purposes, assuming your files are JPEGs):
public StreamedContent getFileStreamedContent() {
try {
InputStream is = new BufferedInputStream(
new FileInputStream("/your/file/path/fileXYZ.jpg"));
return new DefaultStreamedContent(is, "image/jpeg", "fileXYZ.jpg");
} catch (FileNotFoundException e) {
}
}
The last part is associating a particular file with a particular tree node. You can use the <p:tree> attributes selectionMode="single" and selection="#{myBean.selectedTreeNode}". The user selects a tree node and this will cause the selectedTreeNode to be set (via a setter method) on your bean.
private TreeNode selectedTreeNode;
public void setSelectedTreeNode(TreeNode selectedTreeNode) {
this.selectedTreeNode = selectedTreeNode;
if (this.selectedTreeNode != null) {
Object yourTreeNodeData = this.selectedTreeNode.getData();
// do whatever you need to do with the data object...
}
}
In the getFileStreamedContent() method, just use the filename stored in your tree node object as the parameter to the FileInputStream() constructor.
EDIT
Rather than try to embed command buttons in the tree, provide one command button somewhere on the page. When a tree node is selected it can set the associated file (to be downloaded) as a property on your bean. Make your tree look like this:
<p:tree
value="#{myBean.rootTreeNode}"
var="node"
selectionMode="single"
selection="#{myBean.selectedTreeNode}">
<p:ajax event="select" listener="#{myBean.onNodeSelect}" />
<p:ajax event="unselect" listener="#{myBean.onNodeUnselect}" />
</p:tree>
public void onNodeSelect(NodeSelectEvent event) {
// put some logging here...
}
public void onNodeUnselect(NodeUnselectEvent event) {
// put some logging here...
}
Put a println or logging statement in your setSelectedTreeNode method to make sure the setter is being invoked when you click the tree node. Use the getData() method on the TreeNode to get back the data value that you originally put in it when you created the tree. The getFileStreamedContent() method will use that value to deliver the correct file that the user selected by clicking on a tree node.
Related
I am using Primefaces/JSF in combination with pure javascript tools in order to implement an image viewer & annotator. Image viewer is built upon the OpenLayers framework.
When the user annotates (draws shapes) on the canvas, a JSON object is created and upon Save action passed to the back bean. Back bean retrieves the object (deserialized) and stores it in to a file.
Here is the relevant code:
OpenLayers javascript (image-viewer.js):
function initialiseMap(){'
...
map = new OpenLayers.Map(imageEditorID, options);
imageLayer = new OpenLayers.Layer.TMS(imgURL, "", {
...
});
map.addLayer(imageLayer);
var vlayer = new OpenLayers.Layer.Vector("Editable");
map.addLayer(vlayer);
//draw controls and shape tools
...
//then define save action
var save = new OpenLayers.Control.Button({
...
var GEOJSON_PARSER = new OpenLayers.Format.GeoJSON();
var vectorLayerAsJson = GEOJSON_PARSER.write(vlayer.features);
//and finally post to server layer with drawn shapes
sendJSONToServer([{name:'param', value:vectorLayerAsJson}]);
...
The above Image Viewer/Map tool, is loaded via an p:outputPanel component of primefaces and uses sendJSONToServer remoteCommand to get JSON layer:
<h:head>
<script src="#{facesContext.externalContext.requestContextPath}/js/image-viewer.js" />
...
<h:body>
<h:form id="imageEditor">
<p:fieldset legend="Viewer">
...
// inoutHidden does not have on* events? how am i going to post to image-viewer.js?
<h:inputHidden value="#{imageAnnotations.fetchJsonString()}" />
...
<p:outputPanel layout="block" styleClass="imageEditorImagePanel" />
<p:remoteCommand immediate="true" name="sendJSONToServer" action="#{imageAnnotations.actionOnString}" />
</p:fieldset>
....
Finally in the backbean the JSON object is fetched and stored in a file (implementation is raw):
#ManagedBean(name="imageAnnotations")
public class ImageAnnotations {
//actionOnString fetches and saves the JSON string - this is a raw impementation
public String actionOnString() {
//Do the job and get and save JSON string
}
public String fetchJsonString(){
//Do the job and get JSON string
return jsonString;
}
}
The question is How am i going to use a JSF or primefaces element to make available the imageAnnotations.fetchJsonString() value for fetching from within js?
Even I can't give all answers, for me the filling of your hiddenInput should be managed as following:
#ManagedBean(name="imageAnnotations")
public class ImageAnnotations {
private String jsonString;
public void anyMethodFillingOrInitializingTheJSONString() {
this.jsonString = resultOfYourWork();
}
public String getJsonString(){
return this.jsonString();
}
public void setJsonString(String item) {
this.jsonString = item;
}
}
When you reload this hidden input field, just be sure to trigger a javascript parsing the String and updating your client-side Model. This can be done via the on* - events you can connect with Primefaces buttons.
Guys, can anybody help with the other parts?
I would appreciate some input on the following issue:
I got one login screen followed by another page with a Panel and inside this Panel a SelectOneMenu. Unfortunatly the output of the SelectOneMenu after login is sometimes like this:
Instead the full(!) name of the User should be placed in the middle of the SelectOneMenu.
Sometimes it works, sometimes it doesn't.
Also if I switch User now, I only get the first letter of it. (Inside the dropdown the full name is written tho)
I populate the content inside a ManagedBean (#ViewScoped) in it's PostConstruct and get the data from database. (View -> ManagedBean -> DAO class -> ManagedBean).
I also tried to put the code inside public Classname{} with the same result.
I think there is a problem with the SelectOneMenu not correctly being rendered.
How to fix that?
users.xhtml:
<p:selectOneMenu id="somSelect" value="#{userManagerBean.somValue}"
styleClass="selecters">
<p:ajax update="userDataTable" listener="#{userManagerBean.changeSomValue}" />
<f:selectItems value="#{userManagerBean.userList}" />
</p:selectOneMenu>
ManagedBean #ViewScoped:
#PostConstruct
public void init() {
// DAO Method
retrieveTableData();
String loggedInUser = "";
try{
loggedInUser = FacesContext.getCurrentInstance().getExternalContext().getSessionMap().get("sprintUser").toString();
}catch(Exception e){
System.err.println("> No previous login");
}
// Check for session login name and select from table - if session null select first
if (somValue == null && userList.size() != 0) {
somValue = userList.get(0);
for(int i = 0; i < userList.size(); i++){
if(loggedInUser.equals(userList.get(i))){
somValue = loggedInUser;
}
}
}
selectedUser = somValue();
userData = new ArrayList<User>();
// a Table population
populateUser(userData);
}
I'm using JSF with primefaces and want to display an image from java code.
I already saw the tutorial on http://www.primefaces.org/showcase/ui/dynamicImage.jsf
But I'm not clear on how I can get the path to my image file correctly:
Code:
Bean:
#ManagedBean
public class ABean {
private StreamedContent bStatus;
public ABean() {
try {
Boolean connected = false;
if (connected == true) {
bStatus = new DefaultStreamedContent(new FileInputStream(new File("/images/greendot.png")), "image/jpeg");
} else {
bStatus = new DefaultStreamedContent(new FileInputStream(new File("/images/reddot.png")), "image/jpeg");
}
} catch(Exception e) {
e.printStackTrace();
}
}
public StreamedContent getBStatus() {
return bStatus;
}
public void setBStatus(StreamedContent bStatus) {
this.bStatus = bStatus;
}
}
xhtml:
<p:graphicImage value="#{ABean.bStatus}" />
returns:
java.io.FileNotFoundException: \images\reddot.png
I would appreciate best practices on where to store my image when displaying it form code and how to do it.
Since your images are in your web folder, you don't really need to use DefaultStreamedContent. I'd leave that only for images generated on the fly.
For your case, I'd just create a simple method that returns the image path (in your web folder) based on the boolean variable. Something like this:
public String getImagePath(){
return connected ? "/images/greendot.png" : "/images/reddot.png";
}
And on the graphicImage, you can just reference that:
<p:graphicImage value="#{yourBean.imagePath}"/>
Note that you might have to adjust the graphicImage tag if your web context is not root.
EDIT
You can actually make this even simpler:
<p:graphicImage value="#{yourBean.connected ? '/images/greendot.png' : '/images/reddot.png'}"/>
Just make sure to have a getter for the connected property.
Create your StreamedContent as follows:
bStatus = new DefaultStreamedContent(FacesContext.getCurrentInstance().getExternalContext().getResourceAsStream("/images/greendot.png"), "image/jpeg");
When you are creating new File() this will be absolute path in your disk, not just in your application.
I'm trying to rerender a second dropdown when i change the value in the first one.
But nothing happens when I click and change the value in the first drop down.
Have I missed any crucial part?
My xhtml:
<h:form>
<h:selectOneMenu value="#{adminBean.currentLeadCategory}" required="true" styleClass="formfield fpgeo" style="width:20em;margin-right:20px;">
<a4j:support event="onchange" action="#{adminBean.currentLeadCategoryChanged()}"
reRender="componentToReRender"/>
<s:selectItems value="#{leadCategories}" var="leadCategory" label="#{leadCategory.name}" noSelectionLabel="Choose Category"/>
<s:convertEntity/>
</h:selectOneMenu>
<a4j:outputPanel id="componentToReRenderWrapper">
<h:selectOneMenu id="componentToReRender" value="#{adminBean.currentCounty}"
styleClass="formfield fpgeo" style="width:20em;margin-right:20px;">
<s:selectItems value="#{adminBean.counties}" var="county" label="#{county.name}" noSelectionLabel="choose"/>
<s:convertEntity/>
</h:selectOneMenu>
<h:messages/>
</a4j:outputPanel>
</h:form>
My bean:
#AutoCreate
#Scope(ScopeType.CONVERSATION)
#Name("adminBean")
#MeasureCalls
#Restrict("#{s:hasRole('admin') or s:hasRole('sales')}")
public class AdminBean implements Serializable {
private LeadCategory currentLeadCategory;
private List<County> counties = new ArrayList<County>();
private County currentCounty;
#Factory(value = "leadCategories", autoCreate = true, scope = ScopeType.SESSION)
public List<LeadCategory> fetchLeadCategories() {
Query query = entityManager.createQuery("select l from LeadCategory l");
return query.getResultList();
}
public LeadCategory getCurrentLeadCategory() {
return currentLeadCategory;
}
public void setCurrentLeadCategory(LeadCategory currentLeadCategory) {
this.currentLeadCategory = currentLeadCategory;
}
public County getCurrentCounty() {
return currentCounty;
}
public void setCurrentCounty(County currentCounty) {
this.currentCounty = currentCounty;
}
public void currentLeadCategoryChanged() {
this.loadCountiesForCategory();
}
public List<County> getCounties() {
return counties;
}
public void setCounties(List<County> counties) {
this.counties = counties;
}
public void loadCountiesForCategory(){
if(currentLeadCategory == null){
counties = new ArrayList<County>();
}
counties = new ArrayList<County>(currentLeadCategory.getCounties());
}
}
EDIT 1:
If i check firebug i get an error:
Timestamp: 7/19/12 4:14:44 PM
Error: ReferenceError: A4J is not defined
Source File: http://localhost:8080/admin/admin.seam?cid=11
Line: 1
Ok found the problem! Major crazyness going on here. Someone has set LoadScriptStrategy
param to NONE in the web.xml. This makes that the framework.pack.js and ui.pack.js is NOT loading.
<context-param>
<param-name>org.richfaces.LoadScriptStrategy</param-name>
<param-value>NONE</param-value>
</context-param>
Found this page at docs.jboss
If you use the "NONE" strategy, you must include the following scripts
in your portlet or portal page header. If you are using JBoss Portal,
you can add this to the jboss-portlet.xml file.
Added <a4j:loadScript src="resource:///org/ajax4jsf/framework.pack.js"/>
to my header template and viola everything works like a charm.
I love my job =)
I can see clearly that your xhtml has an ending tag </a4j:outputPanel> but no starting tag: <a4j:outputPanel>
If you rearrange your tags it will work.
I am using JSF 1.2 framework. Right now i am trying to implement a file upload process in which the number of files to be uploaded is controlled by the end user. Please find the below snapshot and code snippet for reference.
XHTML Implementation:-
<a4j:commandLink action="#{importWSDLBean.xsdLoopIncrementAction}" reRender="WSDLPanelGrid">
<h:graphicImage value="/images/plus_icon.gif" />
</a4j:commandLink>
<a4j:commandLink action="#{importWSDLBean.xsdLoopDecrementAction}" reRender="WSDLPanelGrid">
<h:graphicImage value="/images/minus_icon.gif" />
</a4j:commandLink>
<h:panelGrid id="WSDLPanelGrid">
<c:forEach items="#{importWSDLBean.acscDataList}" var="inputFUpload">
<t:inputFileUpload id="#{inputFUpload.id}" value="#{inputFUpload.value}" />
</c:forEach>
</h:panelGrid>
Java Bean Implementation:-
public String xsdLoopIncrementAction() {
if (acscDataList == null) {
acscDataList = new ACSCDataList(new ArrayList());
HtmlInputFileUpload htmlUpload = new HtmlInputFileUpload();
htmlUpload.setId("upload" + (acscDataList.size() + 1));
acscDataList.add(htmlUpload);
} else {
HtmlInputFileUpload htmlUpload = new HtmlInputFileUpload();
htmlUpload.setId("upload" + (acscDataList.size() + 1));
acscDataList.add(htmlUpload);
}
return "success";
}
public String xsdLoopDecrementAction() {
if (acscDataList != null) {
if (acscDataList.size() > 0) {
acscDataList.remove(acscDataList.size() - 1);
}
}
return "success";
}
This implementation resets the file upload values whenever i increment or decrement the no. of file upload fields. Also when i submit the form i cant able to get the UploadedFile object (File Upload prerequisite such as Form type and Web.xml configuration is also included).
Can anyone help me out?
If you create dinamically yours input uploads? with binding property
<h:panelGrid binding="#{importWSDLBean.myPanelGrid}"></h:panelGrid>
in your backing bean add property
private javax.faces.component.html.HtmlPanelGrid myPanelGrid;
/**
* #return the myPanelGrid
*/
public javax.faces.component.html.HtmlPanelGrid getMyPanelGrid() {
return myPanelGrid;
}
/**
* #param myPanelGrid the myPanelGrid to set
*/
public void setMyPanelGrid(javax.faces.component.html.HtmlPanelGrid myPanelGrid) {
this.myPanelGrid = myPanelGrid;
}
/*change for your value upload type*/
Map<String,Object> values = new LinkedHashMap<String, Object>();
public void addInputAction() {
String key = "key"+values.size();
values.put(key,"newValue");
HtmlInputText input = new HtmlInputText();
/*add input property (converter,css,etc?)*/
input.setId("id_"+key);
input.setValueExpression("value", createValueExpression(
"#{WSDLPanelGrid.values['"+key+"']}", new Class[0], String.class));
/*add to panel grid your input*/
myPanelGrid.getChildren().add(input);
}
public static ValueExpression createValueExpression(String value,
Class[] params, Class returnType) {
FacesContext fctx = FacesContext.getCurrentInstance();
ELContext elctx = fctx.getELContext();
Application jsfApp = fctx.getApplication();
ExpressionFactory exprFactory = jsfApp.getExpressionFactory();
ValueExpression valueExpr = exprFactory.createValueExpression(elctx,
value, returnType);
return valueExpr;
}
Does something prevent you from using JSF 2? Primefaces ( www.primefaces.org ) has a multiple fileupload component. It is available for JSF 1.2, but development will go on for JSF 2 only.