3.3 :: External image

Adding an image to 'Hello World'

Lets add an image above our text using an <easyExternalImage> element.

Our image is part of our layout so it is a child of the <layout> element.

easyExternalImage element

There are several different types of image you can add. Right now we are using an <easyExternalImage>. This is a quick way to display an image but, like easyChars, it is a bit limited.

As it's an 'external' image it calls an image that is accessible by HTTP - so we don't have to worry much about relative paths right now.
<url> is a child element of <easyExternalImage>. It contains an absolute url to the desired image file.

easyExternalImage attributes

This element has some attributes that you should be aware of.
Our example easyExternalImage has two attributes: 'filetype' and 'scale'.
Attributes are included according to XML specification: attributeName="attributeValue".

Get filetype right

If you're loading a .gif file, say so! Same goes for .jpg and .png files. Here, we are calling a .png file so we set the filetype attribute as 'png'.

Scaling by screen size

Different mobile browsers have different screen sizes and screen resolutions.
The scale value is a percentage of screen width.
A scale of 50 will make the image half the screen width of any mobile browser, as it is 50%.