Expert team of iPhone Web

IPhone Web application development

Name:
Password:
Gender:
Male:
Female:
Favorite Food:
Steak:
Pizza:
Chicken:
Enter your favorite quote!

Select a Level of Education:
[/sourcecode]

This code needs to be in an HTML file in the same folder as the iWebKit framework. I called it index.html.

The first step is to add these lines between the tags.

These lines tell the iPhone browser that this page is designed for it. It also references the CSS, JavaScript and images for the iPhone Home Screen and a startup image.

To create the top title bar we need to enter the following code immediately after the tag.

If you load up the page in your iPhone simulator browser you will see this bar at the top.

Now we need to start our main content with the following tag.

All the form fields will be inside of this and we won’t close it till the end of the form. The first form fields we want are the Name and Password fields.

Replace the original code:

With this:

Our Name and Password fields have now been transformed.

The

  • container represents the white box while the
  • tag is to signify separate sections inside of the white box. You could also put each of these fields in their own
  • containers and they would look like two separate boxes. To save screen space, I group similar items together. Now lets replace those old fashioned radio buttons from the Gender question.

    Replace this:

    The radio buttons are changed for the better.

    Next up are the checkboxes under the Favorite Food question.

    Replace this:

    [sourcecode language=”html”]
    Favorite Food:
    Steak:
    Pizza:
    Chicken:
    [/sourcecode]

    Now instead of check boxes, we get those pretty on/off sliders we’re accustomed to inside the iPhone OS.

    The textbox is pretty simple since it just creates a nice white box around the textbox.

    Replace:

    Lets move on to the dropdown menus. Dropdowns always use the iPhone’s built-in method and help create the feeling of a native app.

    Replace this:

    Notice the arrow span class adds the down arrow to the right of the selection box.

    As far as the form goes, all that’s left is the Submit button and to close the tag.

    Now close the content tag with the following:

    Finally, we may want to put a footer at the bottom of our page. It’s nice to also support the iWebKit folks.

    That’s it for the HTML portion. Two nice little touches you can do are for when someone adds the page to their home screen. When browsing the page, click the “+” button and select the Add to Home Screen option. You will see an icon that, by default, is a screenshot of the page. You can customize this by making your own 58×58 pixel image and referring to it in the section. Mine is named homescreen.png and I’ve already included the code at the beginning of the article.

    Now when this page is added to the Home Screen, it will look and feel like a native app. Why not have a startup screen displayed while the page loads? iWebKit also has this feature and you simply need a 320×460 pixel image that again, is referenced in the section. I have called mine startup.png.

    That’s it, we’re done! iWebKit has many other features that you should check out. You may get some inspiration for an app or at least look good to your boss when you pretty up that old form that’s been around for years. All the files used in this article are also attached for your viewing pleasure along with a short video walkthrough of this tutorial.

    Project Files: iwebkit-tutorial-files.zip (94 KB, ZIP)

  • Source: gigaom.com
    SEE ALSO
    RELATED VIDEO
    iPhone-Android-Mobile Applications Development - iPhone
    iPhone-Android-Mobile Applications Development - iPhone ...
    iPhone Development - Basic UIWebView Application - Beginner
    iPhone Development - Basic UIWebView Application - Beginner
    iPhone Application Development
    iPhone Application Development
    RELATED FACTS
    Share this Post

    Related posts

    Choosing BI Solution: Tibco Spotfire or Tableau?

    Choosing BI Solution: Tibco Spotfire or Tableau?

    OCTOBER 17, 2017

    Recently Business Intelligence (BI) is gaining increasing importance among successful companies. Business Intelligence allows…

    Read More
    Open source Web application development

    Open source Web application development

    OCTOBER 17, 2017

    WebSmart PHP is the fastest way for RPG, PHP and other programmers to develop IBM i and multi-platform PHP web applications…

    Read More