An important point to note at the outset is that images are stored in DBs and page source nodes as Base64-encoded text strings.
|Note:||An image can be loaded directly into the client display from an image file (such as PNG or JPEG) if the file does not pass through a page source node on the server. For more information, see (i) the description of the Image control and (ii) the section Images.|
Since images are stored in databases as a Base64-encoded string, the display is straightforward: the Image control in the list display of the book catalog (see screenshot below) specifies (i) base64 as the value of the control's Image Source Type property, and (ii) the node containing the Base64-encoded string.
In a simulation (shown below), the Base64-encoded string (highlighted) can be seen in the page source tree.
To save an image to the DB, the following steps are taken. Note that the image must be saved to the DB as a Base64-encoded string. You can follow these steps by looking up the actions on the Edit Book sub page.
1.An image is selected from the device's gallery or is the next photograph taken by the device's camera. The Let User Choose Image action is used for this step. See the actions of the Gallery and Camera buttons (refer screenshot above).
2.The two buttons to the left of the Image control use the mt-transform-image function to rotate the image counter-clockwise and clockwise by 90 degrees, respectively.
3.The image is saved to a node of the $EDIT-BOOK page source as a Base64-encoded string. The Let User Choose Image action automatically stores the image data as a Base64-encoded string.
4.Once the image data is in a page source node, the node can be saved to the DB. In our design, this is done by saving the page source ($EDIT-BOOK) to the DB. If the record is a new record, it is added to the DB. If the record is an existing record that has been edited, then it replaces the existing record. See the actions of the Save button (shown in screenshot below).