ComboItem image [closed]

asked 2012-01-24 21:28:48 +0800

rdgrimes gravatar image rdgrimes
735 7

updated 2012-01-24 21:31:04 +0800

Ok, so this shouldn't be that hard to follow the Demo of the combobox where an image is included in each comboitem. But, I'm having no success with this.

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<?page id="cardsummary" title="Card Summary" contentType="text/html;charset=UTF-8"?>
<zk xmlns:c="client">
	<style dynamic="true">
			font-size:			12px;
			font-weight:			bold;
		.z-combobox-pp .z-comboitem .z-comboitem-text
			font-size:			11px;
			font-style:			italic;
			font-weight:			bold;
			height:			48px;
			background-color:		#E6EDEC;
			font-size:			11px;
			font-style:			italic;
			font-weight:			bold;
			height:			48px;
	<window title="${labels.card.summary.title}" border="normal" apply="com.soc.ds.view.CardSummaryComposer">
	<image id="image1" src="/assets/images/month_jan.png"></image>
			<hbox spacing="5">
				<label value="${labels.app.location}" ></label>
				<combobox id="authorized_locations_cb" ></combobox>
				<label value="${labels.app.month}" ></label>
				<combobox readonly="true">
					<comboitem label="${labels.app.month1}" image="/assets/images/month_jan.png" ></comboitem>
					<comboitem label="${labels.app.month2}" image="/assets/images/month_feb.png" sclass="evenItem"></comboitem>
					<comboitem label="${labels.app.month3}" image="/assets/images/month_mar.png"></comboitem>
					<comboitem label="${labels.app.month4}" image="/assets/images/month_apr.png" sclass="eventem"></comboitem>
					<comboitem label="${labels.app.month5}" image="/assets/images/month_may.png"></comboitem>
					<comboitem label="${labels.app.month6}" image="/assets/images/month_jun.png" sclass="evenItem"></comboitem>
					<comboitem label="${labels.app.month7}" image="/assets/images/month_jul.png"></comboitem>
					<comboitem label="${labels.app.month8}" image="/assets/images/month_aug.png" sclass="evenItem"></comboitem>
					<comboitem label="${labels.app.month9}" image="/assets/images/month_sep.png"></comboitem>
					<comboitem label="${labels.app.month10}" image="/assets/images/month_oct.png" sclass="evenItem"></comboitem>
					<comboitem label="${labels.app.month11}" image="/assets/images/month_nov.png"></comboitem>
					<comboitem label="${labels.app.month12}" image="/assets/images/month_dec.png" sclass="evenItem"></comboitem>
			<button id="clickBtn" label="click" ></button>

I can't get the image to appear in either the image tag shown, or in any of the comboitems. I have placed the images in WebContent/assets/images/ . The odd thing is the image (for the image tag) shows up in ZUL Visual Editor, but when I deploy to Tomcat and call the app from the browser command line, everything loads and works fine EXCEPT for the images.

I have defined the png mime in the web.xml, but nothing. If I try to pull up the image directly by typing http://localhost:8080/soc-ds-zk/assets/images/month_jan.png, I get a not found (404).

I'm a new customer of ZK, just playing around with this stuff, but something as simple as image loading seems to be extraordinarily complicated to get working. It would be nice if ZKoss published a full blown project with ALL the config files (ZK.xml, lang-addon.xml, etc.), with the image files as well, that show features people commonly ask about. Unfortunately, the litle samples projects included are too short and simple to be of much use.

Thanks for any help.


delete flag offensive retag edit

The question has been closed for the following reason "question is not relevant or outdated" by rdgrimes
close date 2013-01-26 03:29:54

5 Replies

Sort by ยป oldest newest

answered 2012-01-25 02:43:19 +0800

RichardL gravatar image RichardL
768 4

Hi rdgrimes,
Welcome to the ZK community! Removing the front slash should do it.

link publish delete flag offensive edit

answered 2012-01-25 03:09:44 +0800

rdgrimes gravatar image rdgrimes
735 7

updated 2012-01-25 03:11:28 +0800

Thanks, Richard. But, I've tried it that way too. I've also tried putting the images at the same level as card_summary.zul and just referring to them as month_jan.png, month_feb.png, etc. Nothing works. I've been doing web apps for 12 years on a variety of technologies, and so I'm very familiar with relative paths. Never had a problem before ZK.


link publish delete flag offensive edit

answered 2012-01-25 16:18:58 +0800

matthewgo gravatar image matthewgo

Hi rdgrimes,
Can you show us more detail (composer or *.xml)?
I tried your demo code without composer and image works well .

link publish delete flag offensive edit

answered 2012-01-25 17:46:55 +0800

rdgrimes gravatar image rdgrimes
735 7

I have a bit more information. I tried deploying this (from MyEclipse IDE) to the internal MyEclipse Tomcat server, and it works fine. Now, when I deploy the same project to the stand alone Tomcat (6.0.23) instance, everything works fine except the images don't pull in. Not sure what could be the difference, since both containers have the same zk.xml, web.xml config files. But, obviously, therein lies the difference. If you have any ideas on what might be tripping it up, please let me know.



link publish delete flag offensive edit

answered 2012-01-25 19:20:39 +0800

rdgrimes gravatar image rdgrimes
735 7

One more thing. The really odd thing is I deployed this "play" project to my production server and it also worked fine there. So, it only does not work from the stand-alone on my desktop, which is really strange because I've been using it for years to run tests of web apps, and it's never been problematic. Does anyone know what would cause a local stand-alone instance of Tomcat to fail to render images?


link publish delete flag offensive edit

Question tools




Asked: 2012-01-24 21:28:48 +0800

Seen: 216 times

Last updated: Jan 25 '12

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