When developing mobile applications, there are times when a full featured web browser will be needed but allowing your user to leave your application is not an option. In this tutorial, you will learn how to embed a WebKit instance into your application, preventing the user from needing to leave the app to browse a web site.
Web View Application Overview
Using the Corona native class and the showWebPopup() method, we'll embed a browser instance and display a button to go back to the app content.
Select Target Device
The first thing you have to do is select the platform you want to run your app, this way you'll be able to choose the size for the images you will use.
The iOS platform has these caracteristics:
- iPad: 1024x768px, 132 ppi
- iPhone/iPod Touch: 320x480px, 163 ppi
- iPhone 4: 960x640px, 326 ppi
Because Android is an open platform, there are many different devices and resolutions. A few of the more common screen characteristics are:
- Nexus One: 480x800px, 254 ppi
- Droid: 854x480px, 265 ppi
- HTC Legend: 320x480px, 180 ppi
In this tutorial we'll be focusing on the iOS platform, specifically developing for distribution to an iPhone/iPod touch.
Interface
We'll create a basic interface featuring a button that will call the web view when pressed, we'll also work with text that will serve as feedback.
Exporting PNG's
Depending on the device you have selected you will need to export the graphics in the recommended PPI, you can do that in your favorite image editor.
I used the Adjust Size... function in the Preview app in Mac OS X.
Remember to give the images a descriptive name and to save them in your project folder.
Code!
Time to write our application!
Open your prefered Lua editor (any Text Editor will work, but you won't have syntax highlighting) and prepare to write your awesome app.
Hide Status Bar
First, we hide the status bar, this is the bar on top of the screen that shows the time, signal and other indicators.
display.setStatusBar(display.HiddenStatusBar)
Background
Now we add the app background.
local background = display.newImage("background.png")
This line creates the local variable background and uses the display API to add the specified image to the stage. By default, the image is added to 0,0 using the top left corner as the reference point.
Logo
Repeat the process with the logo image, placing it in the top-center of the stage.
local logo = display.newImage("logo.png", 20, 20)
Text
The next lines will create the text in the center of the stage, normally, we'll just need one TextField, but apparently the newline (\n) character isn't working with the newText method at this moment.
local aboutText = display.newText("", 0, 0, native.systemFontBold, 13)
aboutText:setReferencePoint(display.CenterReferencePoint)
aboutText.x = display.contentWidth * 0.5
aboutText.y = display.contentHeight * 0.5 - 30
aboutText:setTextColor(238, 238, 238) -- #EEEEEE
aboutText.text = "Thanks for using MobileTuts+!"
local aboutText2 = display.newText("", 0, 0, native.systemFontBold, 13)
aboutText2:setReferencePoint(display.CenterReferencePoint)
aboutText2.x = display.contentWidth * 0.5
aboutText2.y = aboutText.y + 17
aboutText2:setTextColor(238, 238, 238) -- #EEEEEE
aboutText2.text = "For more information and updates visit:"
local link = display.newText("", 0, 0, native.systemFontBold, 13)
link:setReferencePoint(display.CenterReferencePoint)
link.x = display.contentWidth * 0.5
link.y = aboutText2.y + 30
link:setTextColor(229, 175, 6) -- #E5AF06
link.text = "http://mobile.tutsplus.com/app"
Go Button
This button will call the web view, this code adds it to the stage.
local goButton = display.newImage("goButton.png")
goButton:setReferencePoint(display.CenterReferencePoint)
goButton.x = display.contentWidth * 0.5
goButton.y = link.y + 50
Bottom Bar
When the user activates the web view a bar will be shown in the bottom of the screen, this bar will contain a button that will remove the web view and show the app content back.
The following code adds the bottom bar and makes it hidden by default.
local bottomBar = display.newImage("bottomBar.png", 0, 436)
bottomBar.isVisible = false
Back Button
The back button that will remove the web view (also hidden by default).
local back = display.newImage("backButton.png", 286, 448)
back.isVisible = false
Back Function
This function will be executed by the back button. It hides the bottom bar and back button and it also removes the web popup.
function back:tap(e)
bottomBar.isVisible = false
back.isVisible = false
native.cancelWebPopup()
end
Go Button Function
This code will call the web popup and make the bottom bar and back button visible to the user.
function goButton:tap(e)
native.showWebPopup(0, 0, 320, 436, "http://mobile.tutsplus.com/author/carloz-yanez/")
-- Back button visibility
bottomBar.isVisible = true
back.isVisible = true
end
The web popup method has the following parameters:
- x: The x position where the popup will be added
- y: The y position where the popup will be added
- width: Size of the web popup
- height: Size of the web popup
- URL: The default url that the popup will open
Listeners
The next lines add the required listeners to the screen buttons.
goButton:addEventListener("tap", goButton)
back:addEventListener("tap", back)
Icon
If everything is working as expected, we are almost ready to build our app for device testing. Just one more thing: the application icon.
Using the graphics you created before you can create a nice and good looking icon, the icon size for the iPhone icon is 57x57px (114x114px for the iPhone 4 retina display), but the iTunes store uses a 512x512px version so it's better to create your icon in this size.
It doesn't need to have the rounded corners or the transparent glare, iTunes and the iPhone will do that for you.
Conclusion
Displaying web content from inside your application will prevent your app users from leaving your app to access a web site and generally creates a more pleasant user experience. Thanks for reading this tutorial. I hope you've found it useful!
Comments