This is Part 3 in my Blogpost Series on improving the APEX mobile Theme. I recommend to read Part 1 and Part 2 before continuing here.

In this Post we deal with a special list template which we will use to create a Icon Home Screen (or a Icon Menu).

Home Screen

Since the very first Smartphones everyone is used to have a screen full of icons with with a small title underneath. Exactly that is what we want to build, since this gives our application a very nice start menu, like this:

The List Definition

The first thing we need is an APEX List. So go to shared components and create a static list with as many entries you want. Pick an image from the Popup LOV for each entry, use 64×64 size or bigger.

Of course you can also use a dynamic list and read the menu-data from one of your tables, but please also make sure to include a nice image which should be located somewhere in or under your images-directory (/i/ by default).

The icons/images i used in the example above are all from the standard icon set delivered with APEX, but you can also use your custom images or icon sets.

The Template

This time we cannot use a predefined function or widget from jQuery mobile, unfortunately they don’t provide a responsive grid, which is the base of a Home Screen. Image some of the icons (list entries) are conditional or bound to specific privileges and don’t show up for every user. You wouldn’t want to have a blank screen where that icon should appear. Same with different screen sizes, there should be no gaps. On some screens there will be 3 icons in one row, on others there are 4, or 2, or 5…

So what we will use instead of a responsive grid is a simple floating CSS “grid” and use that in our list template.

Create a new list template from scratch, name it “Home Screen” and use the following definition.

List Template Before Rows

It might be a little unusual to include CSS definitions in a template, but for this one i think it is ok. There will be only a single home screen (at least just one per page).

<style type="text/css">
.mainMenuIcon {
display: block;
position: relative;
float: left;
text-align:center;
}

.mainMenuIcon a.ui-link,
.mainMenuIcon a.ui-link:visited,
.mainMenuIcon a.ui-link:hover,
.mainMenuIcon a.ui-link:active {
color: #4E4E4E;
font-weight: normal;
text-decoration: none;
}

@media screen and (max-width:1921px) {
.mainMenuIcon {
width: 176px;
height: 184px;
}

.mainMenuIcon img {
width: 112px;
}

.mainMenuIcon a.ui-link,
.mainMenuIcon a.ui-link:visited,
.mainMenuIcon a.ui-link:hover,
.mainMenuIcon a.ui-link:active {
font-size: 20px;
}
}

@media screen and (max-width:481px) {
.mainMenuIcon {
width: 96px;
height: 100px;
}

.mainMenuIcon img {
width: 64px;
}

.mainMenuIcon a.ui-link,
.mainMenuIcon a.ui-link:visited,
.mainMenuIcon a.ui-link:hover,
.mainMenuIcon a.ui-link:active {
font-size: 14px;
}
}
</style>

<div>

List Template Current (and Noncurrent)

<div class="mainMenuIcon" #IMAGE_ATTR#>
<a href="#LINK#" rel="external">
<img src="#IMAGE_PREFIX#&ICON_PATH.#IMAGE#" />
<div>#TEXT#</div>
</a>
</div>

Template After Rows

</div>

Every other Template setting should be empty, except the ones listed above.

Now create a new page with a list-region where you use the newly created icon-list and the Home Screen Template.

Isn’t that beautiful?

If you test that on a desktop browser try also to resize the browser and make it very small. You’ll see a point where the icons suddenly get smaller. This is due to our CSS media queries for optimized resolution on either smartphone and table screens.

You can also try different sizes of Icons and adapt the CSS to support more/less icons per row.

This is why i love APEX lists, you can use them for so many occasions.