XPages for iPhone
Tags : XPages iPhone
Bookmark :
Well kinda....
Developing a web application for the iPhone or any mobile browser is a bit different from developing for a desktop browser. You need to take into account the size of the screen, the amount of css file external JavaScript files that are downloaded and, in the case of the iPhone, you may even want to get your application to conform to the Apple iPhone Web User Interface guidelines.
If your developing an XPages application you could just leave it as is and quite a lot of your application will work on the iPhone. It will look exactly like it does on the desktop web browser but a lot smaller. The dojo stuff seems to work ok so far, even partial refreshes seem to work but there is a lot more you could do for your iPhone users.
Lets start by redirecting your iPhone users to a different page that might be customized for the iPhone. This is actually pretty simple. In the beforePageLoads event for the page you want to redirect FROM you can put in the following serverside JavaScript :
By looking at the userAgent string provided by the users browser we can quickly redirect to a different page. Nice and simple.
If your application is using a theme document then you could also make sure that a special iPhone CSS file is loaded, for example
Adding a similar but reversed rendering command to the rest of your css files in the theme document would make sure that those css files are not loaded when using the iPhone.
Obviously the same concepts will work for any browser, mobile or desktop. So who knows maybe soon we'll start seeing Xpage applications that contain multiple interfaces based on the browser that is accessing them. I know I'm going to work on an iPhone interface for the XPages Phonebook, who knows maybe there will be another short tutorial on how I build it.
Bookmark :
Well kinda....
Developing a web application for the iPhone or any mobile browser is a bit different from developing for a desktop browser. You need to take into account the size of the screen, the amount of css file external JavaScript files that are downloaded and, in the case of the iPhone, you may even want to get your application to conform to the Apple iPhone Web User Interface guidelines.
If your developing an XPages application you could just leave it as is and quite a lot of your application will work on the iPhone. It will look exactly like it does on the desktop web browser but a lot smaller. The dojo stuff seems to work ok so far, even partial refreshes seem to work but there is a lot more you could do for your iPhone users.
Lets start by redirecting your iPhone users to a different page that might be customized for the iPhone. This is actually pretty simple. In the beforePageLoads event for the page you want to redirect FROM you can put in the following serverside JavaScript :
var uAgent = context.getUserAgent().getUserAgent();
if (uAgent.match("iPhone") != null){
context.redirectToPage("/iPhone.xsp");
}
By looking at the userAgent string provided by the users browser we can quickly redirect to a different page. Nice and simple.
If your application is using a theme document then you could also make sure that a special iPhone CSS file is loaded, for example
<resource rendered="#{javascript:context.getUserAgent().getUserAgent().match("iPhone")}">
<content-type>text/css</content-type>
<href>iPhone.css</href>
</resource>
Adding a similar but reversed rendering command to the rest of your css files in the theme document would make sure that those css files are not loaded when using the iPhone.
Obviously the same concepts will work for any browser, mobile or desktop. So who knows maybe soon we'll start seeing Xpage applications that contain multiple interfaces based on the browser that is accessing them. I know I'm going to work on an iPhone interface for the XPages Phonebook, who knows maybe there will be another short tutorial on how I build it.
Comments
How about Blackberry (uAgent.match("?")? What will I replace with "iPhone"?
Posted by Apollo Entice At 05:00:41 PM On 05/19/2009 | - Website - |