4. Assets and Images

The assets folder

The MobileUI Framework configures an assets folder within the common module (app-common) of your project. This assets folder is located at:

[PROJECT-ROOT]/app-common/src/main/assets/

The folder typically contains the following assets:

• Layout files: *.layout.xml
• CSS files: *.css
• MVEL scripts: *.mv
• Images: *.png, *.jpg ...
• Any other files, you need in your apps.

There are currently no restrictions on how you organize your assets. You are allowed to put all kinds of files into sub folders as you like. There is one exception: Fonts (see below).

Fonts

By convention, TTF-fonts are placed in the /fonts/ sub folder. Please refer to The custom fonts guide.

Images

MobileUI supports standard bitmap formats like PNG and JPEG for use as images in layouts. The following example shows a PNG image being used as ImageView:

<ImageView href="images/myImage.png"/>

When referencing images from the layout (via href as shown above), MobileUI resolves the reference within the assets folder as follows:

• assets:/images/myImage.png -> Absolute path '/images/myImage.png' within the assets folder
• /images/myImage.png -> short for assets:/images/myImage.png
• images/myImage.png -> Relative path from the referencing layout file

Currently, the MobileUI framework has no built-in mechanism for selecting files in different resolutions for devices with different pixel densities. You can, however, use MVEL template expressions to realize this, if needed as shown in the following example:

<!-- @code{ useHighRes = client.displayDensityPpi > 200 } -->
<ImageView href="@{useHighRes?'myImage@2x.png':'myImage.png'}"/>

Hint: Are you planning advanced iconography for your app? You might use an icon font together with MobileUI's Custom Fonts feature to get high-performance vector graphics.

Programmatically load assets

To access data from the assets folder on all platforms, you can use MobileUI's special URL scheme to get hold of an InputStream to the referred data. The following listing shows an example with a database file being loaded from the assets folder.

InputStream inStream = new URL("assets:/db/mydatabase.db").openStream();