Xpages: Part 2, making a CRM app iPhone Friendly

On July 9, 2009, in mobile, xpages, by Mark Hughes

In my last post i showed how to size the screen and disable zooming, but things were still a little small. In particular the view spacing was not that finger friendly, also it looked a little akward with the page having padding around the table, and the fonts were too small.

Here is what is looked like

photoold1photoold2

To solve the view spacing issue, i added this code to my style sheet to change the height of the rows.

<span style="color: rgb(204, 102, 51);">.xspDataTable</span> <span style="color: rgb(0, 0, 255);">tbody</span> <span style="color: rgb(0, 0, 255);">tr</span> <span style="color: rgb(0, 0, 255);">td</span> {<br /><span style="color: rgb(0, 0, 255);">border</span>-<span style="color: rgb(0, 0, 255);">top</span>:<span style="color: rgb(0, 96, 128);">1px solid #E8E8E9;</span><br /><span style="color: rgb(0, 0, 255);">font-weight</span>:<span style="color: rgb(0, 96, 128);">normal;</span><br /><span style="color: rgb(0, 0, 255);">height</span>:<span style="color: rgb(0, 96, 128);">45px;</span><br /><span style="color: rgb(0, 0, 255);">vertical-align</span>:<span style="color: rgb(0, 96, 128);">middle;</span><br />}

This changes the line height to 45 pixels(i also changed the font to Arial 14), much more finger friendly than 20px. Here is what it looks like now

photo 2photo 4

I then took away all the page padding to get a better look, increased font size, and added this script to hide the address bar on load

addEventListener(<span style="color: rgb(0, 96, 128);">'load'</span>, <span style="color: rgb(0, 0, 255);">function</span>() { <br />    setTimeout(hideAddressBar, 0); <br />    }, <span style="color: rgb(0, 0, 255);">false</span>); <br />    <span style="color: rgb(0, 0, 255);">function</span> hideAddressBar() { <br />    window.scrollTo(0, 1); <br />    }  

I also created a custom view pager and increased the font size to 14, and made all row heights 45px, here is the result

photo 2photo 4 photo 3

Now tomorrow i will make the post about mapping directions and making a button that opens another url using SSJS

 

One Response to Xpages: Part 2, making a CRM app iPhone Friendly

  1. Declan Lynch says:

    Don't forget, you can use the browsers useragent to detect if it's an iPhone and only put the special css out to those devices, you could even direct pages to special iPhone optimized pages if you wanted.

Leave a Reply

Your email address will not be published. Required fields are marked *