Xpages - Image Resource Scaling

Hi,

I started work this morning with an idea for a new application. I thought that I’d have another go at trying to build an app in Xpages, but no matter how many times I do this, I always seem to fall at the first hurdle. I try to do something which seems like it should be very simple, but all my experiences of trying to find decent reference documentation for xpages has been absolutely horrible which makes it incredibly frustrating.

I started by trying to make a header for all of my forms. I have a logo to use and had placed it as an image resource on a custom control but unfortunately, the logo is a bit large. No problem, I thought, I can just scale it to 80% using properties, like when using image resources on Forms. But no - there is no percent option for height on an image resource, and the width one scales it to 50% of the page, not of the original image size. Fair enough, I’ll just need to compute the size of the image. Click on the little diamond next to the hight, choose ‘Compute Value’ and ‘Compute on page load’. Right. Now what? I guess I write a bit of script which returns the height of the image. ‘this.height * 0.8’ seems to translate into a height of 0px when previewed as does ‘return this.height * 0.8’. Just using ‘this.height’ as a test seems to work, but I think actually just does nothing. this.height - 10 also does nothing - the image is displayed without any height modification in the style. I’ve tried this.getHeight() * 0.8 (returns 0px), getComponent(‘myLogoName’).height and getComponent(‘myLogoName’).getHeight() both of which result in a Command Not Handled Exception.

How on earth are you supposed to figure out what to write for these computed properties? I’ve googled this every which way I could think of but didn’t come up with any useful documentation. Is there any?

I’ve been going round and round in circles for this for an hour or so now and it’s made me very fed up. I’m probably missing something really simple but it’s completely eluded me so far. I realise I could easily just have modified the original image in a graphics program in 2 seconds, but I can’t stand not being able to figure out how to do this.

If anyone can point me in the right direction to solve this tiny problem, I’d be very grateful, but I’d be even more grateful to be pointed to some good documentation about this sort of thing. I’ve seen blog after blog about building Xpages applications with forms and views and the big stuff, but nothing about these little things.

I’m sorry if this has come across a bit ranty, but I’m so keen to get on board with Xpages and every time I try to get started, I immediately seem to come across something not-quite-standard that I want to do and come up against a brick wall. I’ve been writing Notes/Domino applications for nearly 10 years so knowing what I want to do and not being able to do it is fairly soul-destroying, when I can do ‘classic’ Notes development virtually without thinking about it.

Now for a deep breath and to try and persevere with the actual workings of the app without a logo (massive or otherwise) for the time being.

Emily.

Subject: Duplicate post - Please delete

Subject: Not everything can be done through the properties gui … unfortunately

Unfortunately, the GUI is not always your friend in the my experience for Xpage development.

Hopefully I’ve understood your problem correctly. Everything I’m about to say comes from my experience in 8.5 and 8.5.1, I’m not sure if 8.5.2 gives you anything new or different.

There are a few ways you can scale your image by percentage. Here’s some ideas off the top of my head very quickly:-

  1. You can give it a static percentage. To do this you can either:-

i)

  • Click on your image control to select it and bring up the relevant properties panel.

  • Go to the ‘all properties’ tab.

  • Go down to ‘styling>style’ and enter the percentage here as css. So for example to scale and image to 80% height and 50% width you would enter “height:80%;width:50%”

ii)

The other way to do this gives you the same results but you enter the data in a different area.

  • click on your image to highlight it and then click on the ‘source tab’ The source tab will show you the markup of the xpage your currently working on. By clicking on the image before going to the source tab, it should highlight the markup that applies to your image.

  • Here you add the css height and width percentages by adding the line 'style=“height:80%;width:50%”'inside your xp:image opening tag.

i.e.

<xp:image url=“/logo.gif” id=“image1”

	style="height:80%;width:50%">

</xp:image>

This too is css and gives you the same results as ‘1i’, but you’re adding it a different way.

2)Computing field values:

As for computing values, this is it’s own topic in it’s own right.

The key things to remember is that the diamond you click applies to that specific field only and you need to return a value it is expecting.

For example in the image example you have, if I wanted to compute a height of 50%, I need to do this in 2 places.

First I need to click on the image to select it and bring up the relevant properties. On the first tab you have 2 fields relating to the height; 1 is the value the second is the unti type (i.e. 1 field says ‘100’ the second field says ‘pixels’). To compute 50%, I need to compute ‘50’ in the first field and ‘%’ in the second.

So on the height field you can do some server side javascript to compute the height, but it must return “50” (or which ever percentage you want) only, not unit preference.

Then on the second field (the unit type) you can again use some server side javascript to compute the type but it must only return a unit type and no value (i.e. “%” or “ems” or “px”)

I’m not sure if I’ve explained things very well there (especially on point 2), but I hope it helped more than it confused you :slight_smile:

Subject: Re: Not everything can be done through the properties gui … unfortunately

Hi Neemesh,

I really appreciate you taking the time to respond to this. Your two methods if giving it a static percentage are very useful. I hadn’t thought of going in and doing it that way. It seems as though another frustration of working with Xpages is finding the right place to do the thing you want.

I think you’re right about the computing values being a topic in it’s own right. I just wish I knew where someone had written the documentation for that topic!

I’m going to give your suggestions a go tomorrow and will report back how I get on. I’d still really like to know how to get a handle on the image resource from within the script and find out what it’s height is in pixels. That may not be the best way of achieving my original goal, but not being able to figure it out or even find out whether it’s possible has really wound me up!

Thanks again,

Emily

Subject: Re: Not everything can be done through the properties gui … unfortunately

Unfortunately setting anything to 50% causes the image to size to 50% of the page. It looks like it’s hardcoding the size or nothing for now, until I’ve clambered my way a bit further up this learning curve!

Emily.