Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
The ZK version we are using is : zk-8.0.0-Eval version. My question is how do I binding image files data field on .zul to java controller ?
I had implemented the <zscript> code on .zul which is refer to ZK 7.0.5 Developer's Reference document, on Page 373. It can upload and able to preview image on view ( .zul ), However, there is no any sample code to show that that how can I get this image data field to my controller. the most likely way on this site I could find is :link- forum.zkoss.org/question/70903/display-an-image-from-database/ (I could not post direct link since my Karma on this site is still very low till now. ) but I could not make it work in my ZK Project. So, back to my first question, how can I get image from view (.zul) to controller ( XXXXController.java ) if I already implement this <zscript> on .zul ?
org.zkoss.util.media.Media media = event.getMedia();
if (media instanceof org.zkoss.image.Image) {
org.zkoss.zul.Image imageNew = new org.zkoss.zul.Image();
imageNew.setContent(event.getMedia());
imageNew.setParent(pics);
} else {
Messagebox.show("Not an image: "+media, "Error",
Messagebox.OK, Messagebox.ERROR);
break;
}
<label value="${labels.DSTD01.HU_PIC}" sclass="sectionTitleLabel"/> <button label="Upload Image" upload="true,maxsize=300"> <attribute name="onUpload"> org.zkoss.util.media.Media media = event.getMedia(); if (media instanceof org.zkoss.image.Image) { org.zkoss.zul.Image imageNew = new org.zkoss.zul.Image(); imageNew.setContent(event.getMedia()); imageNew.setParent(pics); } else { Messagebox.show("Not an image: "+media, "Error", Messagebox.OK, Messagebox.ERROR); break; } ]]></attribute> </button> <vlayout id="pics" height="100px" style="overflow:auto"/>
Please give me some hint or directions. If the instruction could be in sample code will be perfect. No need to be complete code. Already did some prepared work and studied background knowledge before ask question, there still some missing part I didn't smart enough to overcome. Will really appreciate if anyone could give me a hand.
p.s. if use <image id="hu_pic"/> instead of <vlayout id="pics" height="100px" style="overflow:auto"/>, I got a java Exception: Child not allowed in org.zkoss.zul.Image
And sorry for can't not upload image to forum for better explanation, since my Karma on this forum is lower than required till now.
Hello VincentDS,
You can refer to the following tutorial where it uploads and displays a image:
http://emrpms.blogspot.gr/2013/04/zk-mvvm-form-binding-crud-with-spring_14.html
Best Regards,
Darksu
Dear Darksu, Many thanks for you quickly reply. It help me a lot. I had solved the issue.
//圖片相關的不同型態物件
private byte[] hupicbyte;
private AImage hupicAImage; private Image hupic; public void doAfterCompose(Component window) throws Exception { super.doAfterCompose(window); window = (Window)window; hupic = (Image) window.getFellow("hupic");
btnUploadPic.addEventListener(Events.ONUPLOAD, new EventListener<uploadevent>() { public void onEvent(UploadEvent event) { try { org.zkoss.util.media.Media media = event.getMedia(); final String fileToRead = media.getName().toLowerCase(); System.out.println("-------- fileToRead : "+ fileToRead); media.isBinary(); InputStream input = null; input = media.getStreamData();//獲得輸入流 hupicbyte = media.getByteData(); } catch (Exception e) { System.out.println("Controller-"+e.getMessage()); e.printStackTrace(); } } }); }
In controller get image section: // 清空編輯區，否則填值。 欄位值內容隨選到的資料改變。
void resetEditArea(DSTD01VO DSTD01VO) { hupicAImage = null; try{ //取得類別內存值 if(DSTD01VO != null){ if(DSTD01VO.getHUPIC() != null ){ hupicbyte = DSTD01VO.getHUPIC(); hupicAImage = new AImage("", hupicbyte); } if(hupicAImage.equals(null) == false){ hupic.setContent(hupic_AImage); } } }catch(Exception e){ System.out.println("humfulness error. ==>"+e.getMessage()); e.printStackTrace(); } }
byte[] photoBytes = null; try{ photoBytes = hu_pic.getContent().getByteData(); }catch(Exception ex){ System.out.println("Read image error. ==> "+ex.getMessage()); }
selectedHum.setHU_PIC(photoBytes);
CRUDService.save(selectedHum);
CRUDService is method we created by ourself
@Column(name = "HUPIC") private byte[] HUPIC;
<button id="btnUploadPic" src="/imgs/icons/btn<em>view</em>16x16.gif" upload="true,maxsize=300" onupload="processMedia(event.getMedia());" <="" p="">
<attribute name="onUpload"> org.zkoss.util.media.Media media = event.getMedia(); if (media instanceof org.zkoss.image.Image) { org.zkoss.image.Image img = (org.zkoss.image.Image) media; hu_pic.setContent(img); } else { Messagebox.show("Not an image: "+media, "Error", Messagebox.OK, Messagebox.ERROR); break; } ]]></attribute></button> <separator spacing="100px"/> <image id="hu_pic" height="100px"/> </hlayout>
Asked: 2016-07-04 01:26:47 +0800
Seen: 42 times
Last updated: Jul 07 '16
