I have to make an iPhone app for a company which has a web based system, and wants to go mobile. Its known in advance that the UI of the screen will change fairly often (adding new labels, buttons, etc). Also, many elements on the screen have an If(condition) then (visible) else (hidden) type situation. For instance, if(user.isMember) then (showLoginButton) else (showRegisterButton) All this is a fairly common scenario for companies who want to take their we-offering as a mobile-app.
The challenge now is how to write a flexible UI. If I go the standard UIView type approach and add labels, buttons etc, it becomes static in nature. Further, since a lot of elements (for instance, in the above example, loginButton, registerButton, retrievePasswordButton) are overlapping (since they should be on the exact location on the canvas), the Interface Builder looks cluttered.
One solution I can see is to use HTML content in UIWebView. Considering HTML browsers were defines with the concept for Forms in mind, it makes logical sense. There would be some overhead of doing search/replace for the values in the locally stored html file (call it template now), but guess the flexibility provided will be worthy of it.
I would like to invite pros/cons for this approach, and any other approaches that may have worked for you in the past for making flexible UIs.
There are at least two basic approches, among many.
The first, as you mentioned, is to use stored HTML5/CSS/Javascript for each form, and run them in embedded UIWebViews. But there is no need to do search/replace on the device. Instead of modifying a template, just download a entire new “web page” for any form that has to be changed or updated. Very flexible, if all the elements you require are efficiently “webifiable”.
The second approach is to use a Data Driven UI (there’s an Apple WWDC 2010 video on this technique). Basically, for every view and every UI element, instead of putting it in a nib or creating it from hard coded parameters, you read a r/w database for everything needed to create the element: size, position, title, color, value, what method(s) it calls, etc. To modify, you download updates to this database.
If you need an updatable “native” UI plus application logic, you could use a mix of the above two methods: a Data Driven UI engine with optional string parameters consisting of Javascript for any object to call for custom logic, calculation, state changes, etc.