Image Source
The following types of image sources can be used in page designs:
•Binary image files of common formats, such as PNG, BMP, JPG. Images that have binary file sources reference the URL of the image file.
•Base64-encoded strings, which are text encodings of images. Images that have Base64-encoded images access the Base64-encoded string via an XPath expression. The XPath expression typically returns a node containing the Base64 string. MobileTogether reads the Base64 string and generates the encoded image from the string.
Inserting an image in the design
To insert an image in the design, do the following:
1.Drop an Image control into the design.
2.In the Styles & Properties Pane, set the image property Image Source Type to either url or base64, to match the type of the image being inserted. The default setting of this property is url.
3.Specify the image in the Image Source property. If an image file is being referenced, specify the URL. If a Base64-encoded image is being referenced, use the Image Source property's XPath expression either to supply the Base64 string directly or to supply the XML node containing the Base64 string. Note that, for both source types (url or base64), there are two alternative ways of specifying the property's value: (i) With the Image Source property selected, click the XPath toolbar button of the Page Sources Pane, and enter an XPath expression that evaluates to the URL or the Base64 string; (ii) Drop an XML node containing the URL or Base64 string from the Page Sources Pane onto the Image control.
| Note: | Every time an image source is changed (for example, by a user selection), a Reload action for the image (unless it is a Base64 image) is required in order to display the new image. |
Inserting image files via URL
Insert the image file by browsing for it or selecting a global resource. For details, see the Image Source property. For an example of inserting images via a URL, see the QuickStart Tutorial.
Embedding URL-sourced images in the design fileIf an image is sourced via a URL (and not as a Base64-encoded image), then the image can be embedded in the design file. Use the Embed Image property of the Image control to do this. If this property is set to true, the image is converted to Base64-encoding and embedded in the design file. If the original image is modified, you can re-embed via the Image control's context menu. You can also save the embedded image to a file via the context menu.
|
Inserting Base64-encoded images
When an image is encoded as Base64 text, it can be stored as the text content of an XML element node. As a result it is easier to transport, and its metadata can be easily parsed and retrieved. In the listing below, the Base64-encoded image is the content of the <png> element.
<images><png>iVBORw0KGgoAAAANSUhEU...</png></images>
To insert a Base64-encoded image, the XPath expression of the Image Source property must resolve to the image's Base64-encoded text string. You can also drop an XML node that contains the image's Base64-encoded text string from the Page Sources Pane onto the Image control.
See the next section, Base64-Encoded Images, for an example of how to use Base64-encoded images.