Last year, I presented a short tutorial on displaying web pages from inside your App Inventor apps. Now, here is a some what improved version that prompts for a web address URL, checks to see if http:// has been entered, and if not, prepends http:// to the front of the address. Then the web page is displayed.
The Designer View
There is not much to the user interface – a text box to enter the web URL and a button to display the web page. The page then appears below the button, and the content may be scrolled on the screen.
To create this user interface, drag a horizontal layout onto the screen and then add a label for the “Web page URL” prompt, followed by a text box for the data entry. Then add the Display web page button.
From the User Interface section of the Palette, at the left of the Designer screen, drag and drop a WebViewer component on to the design area.
The WebViewer is not a full Internet browser – it is a component that displays the specified web page only. The WebViewer does not support standard browser features, such as saving web page content nor does it provide a history of the web pages visited.
The Blocks Code
The entire app is implemented in the btnDisplayPage button event handler.
The contains text block checks to see if the entered web address contains “http://”, and if it does not contain “http://” then “http://” is inserted at the beginning of the web address string.
The page is displayed on screen where you placed the Web component (in the Designer view). That’s all there is to displaying a web page!
Key Features Shown
- Checking the user input text for the presence or absence of “http://”
- Calling the WebViewer component to display the selected web page
Note – due to the very short app in this demo, no source code has been uploaded.
Please Share on Social Media
Please click on the buttons below this post to share with your friends on Facebook or other social media.
If you are not already following this blog, click on the following links to like on Facebook, add to your Google+ circles or follow on Twitter or in your RSS news reader. Thank you for visiting!