0

How do I binding image files on .zul to java controller ?

asked 2016-07-04 01:26:47 +0800

VincentDS gravatar image VincentDS
1 1

updated 2016-07-04 11:42:21 +0800

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 ?

only scripts parts 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;
}

code snippet on .zul

<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.

delete flag offensive retag edit

2 Answers

Sort by » oldest newest most voted
0

answered 2016-07-04 05:08:06 +0800

Darksu gravatar image Darksu
1991 1 4

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

link publish delete flag offensive edit
0

answered 2016-07-07 01:31:22 +0800

VincentDS gravatar image VincentDS
1 1

updated 2016-07-07 05:08:17 +0800

Dear Darksu, Many thanks for you quickly reply. It help me a lot. I had solved the issue.

In controller:

//圖片相關的不同型態物件

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.ON
UPLOAD, 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(); } }

In Controller save image section:

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

VO Entity:

@Column(name = "HUPIC") private byte[] HUPIC;

.zul

<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>

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2016-07-04 01:26:47 +0800

Seen: 36 times

Last updated: Jul 07 '16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More