Thursday, July 9, 2009

Xpages: Part 2, making a CRM app iPhone Friendly

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.

.xspDataTable tbody tr td {
border-top:1px solid #E8E8E9;
font-weight:normal;
height:45px;
vertical-align:middle;
}



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('load', function() { 
setTimeout(hideAddressBar, 0);
}, false);
function hideAddressBar() {
window.scrollTo(0, 1);
}



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

1 comments:

Declan Lynch said...

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.

Post a Comment