Channels ▼
RSS

Mobile

The iPhone Application Builder

Source Code Accompanies This Article. Download It Now.


Creating the Prototype

Once I decided on the "what" of the application, it was time for the "how." I fired up the Servoy Developer and created a basic schema, then sat down to decide on what I wanted the final output to be.

After looking at a few different iPhone applications, I decided that the default Contacts application would be the inspiration for the generated iPhone applications. I took some screen captures on the iPhone, e-mailed them to myself, and used Photoshop to snag some graphic elements.

Because Servoy ships with Sybase's iAnywhere database and has sample tables, I created a form based on the companies table. I then worked out what font/styles to use for the various elements. The official Apple Human Interface Guidelines for iPhone are only available to registered iPhone developers (which I'm not), so I did the next best thing—I searched the Web and looked at other iPhone web frameworks' CSS.

Figure 3: The builder application even includes a native client "preview" that approximates how your finished application will look, so you can create and test applications without having an iPhone.

Because Servoy's style sheets are also based on CSS, I had the basic look-and-feel up and running in no time. I created a simple list view of all the company names, and a simple company detail form. Because you only have to specify a single line of code to jump to another form, it was easy to make the click on the list show the related detail and vice versa. I didn't have to worry about the database connection or data binding—everything I built and previewed in the Servoy Developer automatically gets rendered in plain HTML/CSS.

All that was left was to view the progress, so I started up Mobile Safari to have a look. Servoy Developer has a built-in application server so it took less than five seconds to view the application "live" on the iPhone. Everything worked exactly the same as it did in the native client, and once I made some slight adjustments to the style sheet, I had a working prototype!


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video