I'm using streamedcontent to render a byte sent from JSF then send it back as a streamed content as following:
<p:graphicImage value="#{manage.bytesToStreamedContent(car.image)}"/>
where image is the byte array of the image stored in the database
backing bean:
public StreamedContent bytesToStreamedContent(byte[] bytes)
{
InputStream is = new ByteArrayInputStream(bytes);
StreamedContent image = new DefaultStreamedContent (is, "image/jpeg");
return image;
}
But I'm not getting the image in the JSF page. I got this message appearing in the server log:
WARNING: JSF1091: No mime type could be found for file dynamiccontent. To resolve this, add a mime-type mapping to the applications web.xml.
and:
SEVERE: Error in streaming dynamic resource.
can you please help me out here, I cant find any useful info regarding this issue
PS:
Im using the following libraries:
Mojarra 2.1.3
PrimeFaces 3.1.1
Glassfish 3.1
Found where the problem was. The problem wasn't in the graphicimage. It was because the graphicimage tag is being loaded dynamically (similar issue when trying loading from datatable). Dynamic images cannot be rendered directly in datatable or datagrid. (Workaround is to assign a param and bring the images from the id).
However, the solution is here
This is an odd problem and I don't think that adding the mime-type to web.xml will fix it. It is listed as both a bug in PrimeFaces with a target for 3.2
http://code.google.com/p/primefaces/issues/detail?id=3546
And it is also listed as an open bug in Mojarra 2.1.1. There is a patch submitted for this bug however it looks like you will have to manually apply the code to the Mojarra 2.1.1 source and build it. One would think that this would be fixed in 2.1.3 however, Glassfish may have its own prebundled Mojarra implementation that is still at an earler version and your application may be using this instead.
http://java.net/jira/browse/JAVASERVERFACES-2103
EDIT:
You can just pass the byte[] directly as an argument to the method like that. What you can do though is pass the id of the car as a param and then retrieve that car and fetch the bytes from the Car entity. The reason for this is because the graphicImage actually renders as an HTML img tag and this occurs in a separate HTTP request from the request for the JSF page. Download and install the Firebug plugin for Firefox and you will see this occur, the page is requested, then subsequent requests occur for the images after the page is retrieved. Because of this ViewScoped and RequestScoped beans cannot be accessed in this way, however a request parameter can still be passed with the necessary information needed to retrieve the Car bytes for the image.
<p:graphicImage value="#{manage.bytesToStreamedContent}">
<f:param name="item_id" value="#{car.id}" />
</p:graphicImage>
Now in your managed bean property you can get the car id, and after you get the car id you should be able to get the right car.
public StreamedContent getBytesToStreamedContent() {
String id = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("item_id");
//Now get the car with the id
}
In general, it's not a great idea to create the StreamedContent in the getter for graphicimage. The image will be fetched in a separate request from the rest of the content, meaning variables depending on iterators will not work. This means that in the relevant call to bytesToStreamedContent the bytes array will be null/empty. If you put breakpoints inside the method you will probably see that in the last call there is no data in bytes.
You need to make sure the image is generated while you still have access to all the needed content and then store it in a way that you get retrieve it again in bytesToStreamedContent. Whether or not this will fix the problem and actually work for you is hard to say without seeing the rest of the code. I would start by trying to remove the byte array argument and returning a static image to confirm that this is the problem.
Related
Hello i am new in smart gwt and now we are migrate from smartgwt 2.1 to smart gwt 3.1p
and i have got problem :
java.lang.UnsupportedOperationException: Can not convert element 0 of
the array to a JavaScriptObject. Instances of class
`com.test.ListDTO'
can not automatically be converted. Please see the SmartClient
documentation of RPCRequest.data for a table of Java types that can be
converted automatically.
someone write :
treeNode.setAttribute(TODO, listDTO.getLis());
how i can fix that code ?
The setAttribute method of the TreeNode tries to convert the list elements internally. That fails with your own domain objects. You can try to set the list with this helper method:
com.smartgwt.client.util.JSOHelper.setObjectAttribute(treeNode.getJsObj(), TODO, listDTO.getLis());
Now the Java object is set on the JavaScriptObject. To get this object back you can call:
treeNode.getAttributeAsObject(TODO);
I'm still developing my data table UI application, and finally I'm about the final stage of the development of this component: inline cell editing.
First of all, the data table is built fully dynamically at the Java side, and no facelet declarations are used to describe the table. If I'd have a static table declaration, the editing could be specified like this (see the In-Cell Editing chapter):
<p:dataTable>
...
<p:ajax event="rowEdit" listener="#{tableBean.onEdit}"/>
...
</p:dataTable>
I can easily specify the data table editable with dataTable.setEditable(true) in the Java code - and it works, please note, the editing Save/Cancel icons are working nice but have no effect at the back end. Since I cannot it declare in the way specified at the PF ShowCase Labs page (must I always use the listeners there?) because of the data tables are rendered dynamically, I'm trying to use the following:
public static AjaxBehavior createAjaxBehavior(MethodExpression expression) {
final AjaxBehavior behavior = new AjaxBehavior();
behavior.addAjaxBehaviorListener(new AjaxBehaviorListenerImpl(expression));
return behavior;
}
...
dataTable.addClientBehavior("rowEdit", createAjaxBehavior(createMethodExpression(TableBean.class, "onEdit", void.class, new Class<?>[] {RowEditEvent.class})));
But as soon as I add the rowEdit listener, like I'm trying to do above, and wow I suddenly got: mojarra is not defined and no Save/Cancel row edit buttons are working. Ok, I've found a similar problem described and resolved here, included the necessary script manually, and now the client-side JavaScript error is gone, however I still cannot exit the row editing mode, and the row is still not updated.
I wasted all day trying to figure out what's going on, and I'm blind to see the correct way. Do I simply miss something behind (like identifying a certain row, or probably specifying something else somewhere -- but my Java code does not generate anything more than specified in the PF example), or anything whatever?
Thanks in advance.
Well, I've just figured out the real reason in the following method:
public static AjaxBehavior createAjaxBehavior(MethodExpression expression) {
final AjaxBehavior behavior = new AjaxBehavior();
behavior.addAjaxBehaviorListener(new AjaxBehaviorListenerImpl(expression));
return behavior;
}
In fact, the method actually returned javax.faces.component.behavior.AjaxBehavior (h:ajax?) instead of org.primefaces.component.behavior.ajax.AjaxBehavior (p:ajax) -- this happened because of quick auto-complete so I simply missed that fact.
I'm frustrated that the PrimeFaces library didn't reply any error.
Just to complete the Q & A:
Mojarra 2.1.7
PrimeFaces 3.2
Should now (at least for PF 6.0) be org.primefaces.behavior.ajax.AjaxBehavior.
I'm doing kind of wizard application that captures information on Contacts. So, before saving to DB, all data collected during the process are kept in memory as model's properties (using serialization/deserialization). Data collected includes the uploaded picture of the contact. The last page is called "preview" where I display all the information entered during the process before saving them to the DB. On that preview page, I'd like also to display the photo of the contact on left and his information on the right.
It is easier to display picture using the following statements
<img src = ".../.../Content/MyPicture" />
<img src = "<% = Url.Action("Action", "Controller", "routevalue")%>"/>
How about if the data is not located in remote locations like in the above samples, but rather in the ViewData.Model?
By the way, my model, ContactData, has 2 properties ImageData and ImageMimeType holding data for the picture. How do I use them?
Thanks for helping
Usually, you'd store it in a session variable, and when the request for the image comes around you'll feed it whatever is in the session. There are a couple of things that need to work in order for this to function, but usually it does.
There is one more option, if the image is small, you can inline it directly into your document using a data uri, like so:
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" />
(example is stolen from wikipedia, paste uri into your location bar, and it'll show you an image of a red dot). You'll need to base64 encode the binary data (or url-encode, but base64 is usually preferable for binary data).
Roe,
It took me 2 days and many frustrations just to realize what you meant by storing data in the session state variable. Anyway, below is the solution for anyone to take advantage of.
I, first, put data needed to display in the session state variables
public ActionResult PreviewPage()
{
Session["ImageData"] = contactData.ImageData;
Session["ImageMimeType"] = contactData.ImageMimeType;
return View(contactData);
}
I also created a action method to send data to view. This is where all the magics are done. This action picks up data contained in the Session variables
public FileContentResult GetImage()
{
return File((byte[]Session["ImageData"], (string)Session["ImageMimeType"]);
}
Finally, this how I view accesses to that data without having to fetch needed from a database.
<img src = "<% = Url.Action("GetImage", "Contact")%>" />
It was important that I be able to understand how this works because I'll be doing more of Wizards-like applications in the future.
Thanks very much for helping.
Using Struts 2.1.6, xwork 2.1.2 and ognl 2.6.11
In my struts action I have a Map that I am fetching elements from using OGNL. If the key I am using to fetch with does not exist in the map then OGNL returns an empty object array, that OGNL converts to a string and I get the object reference java.lang.Object#6.... This occurs in several places and seems to be the the map having the value generic specified as an Object. This is not something I can change.
I have traced the problem for a while, but when I ended up deep into the guts of the OGNL code and I did not see a light at the end of the tunnel. Currently I am going to go with an ugly hack of checking the string return to see if it starts with "java.lang.Object#" and if so return an empty string. I don't like the solution but thats what time permits.
Has anyone encountered a similar problem?
Also, where did OpenSymphony go? updates to their webiste appear to have dried up, the user forums say they are being converted to Google Groups no later than Nov-12-09
This is a problem with null values: if value is null, default behavior is to create a value using default constructor. Since the value type of your map is Object, new Objects are created where null is.
In order to stop this behavior:
use #CreateIfNull( value = false )
use mapName_CreateIfNull=false in classname-convertion.properties file.
I have a web page with lots of small images on it. In a typical scenario user clicks on image and expects it to change with a new image.
Requirements:
When user clicks on image, it should be immediately known to a controller in an Ajax way.
Some strings should be passed to a controller when user clicks on image.
Controller does its job and returns another image (which replaces old one).
Along with image controller returns a couple of extra strings (such as completion status).
Web page updates old image with new one and also updates other parts with these new strings.
Number of images on a page varies but potentially it can be a couple of dozens.
Question: What Ajax technique should be used here? I'm quite new to Ajax and don't feel solid with patterns. Should it be Json or something else?
Any code example would be very very welcome and helpful.
Thank you.
Well it sounds like you need a Event observer on the image object. On that image object, you could have various custom attributes, such as imageid="2", etc. With the element being observed onclick, you'd read the attributes of the elements and pass them on to an AJAX call. I'm not sure if the image is known by the database or would it be available on the page itself. Maybe a back/previous button? In either case, the AJAX call could either return JavaScript directly which then gets parsed to update the DOM and replaces the image with the new image source, or it could return a JSON response which then needs to get read and parsed by the AJAX callback and then updates the DOM. Easiest being to return JS code which gets parsed, but I prefer to have all my JavaScript in one file and not have it all over the place mixed with server side code.
It really depends on what AJAX library you are using.
With jQuery, you might do something like this.
$("#buttonImage").click(function () {
var imageid = $(this).attr('imageid');
$.getJSON("/controller/get_image/" + imageid,
function(data){
$("#buttonImage").attr("src", data.imagesrc);
});
});
And your /controller/get_image/123 would return a JSON response like...
{ 'imagesrc' : '/my/image.jpg' }
As far as I known, the only browser-safe way to change an image is by assigning a new URL to it's src attribute. If you return an image to a request that pass some parameters, it might prevent client-side cashing of the images. For these reasons, I would treat separately the transfer of textual data and images.
The completion status can always be return as the HTTP status text but if more information is needed from the server, you can always return it in JSON or XML, the simplest being JSON.
The responsiveness could be improved by preloading images on the mouseover event.