Select Page

App Inventor has a component called WebViewer. We can load a webpage/website into an app using WebViewer component. To do that, we can just drag the WebViewer component to Screen1 window and set the HomeUrl property of the WebViewer to the webpage we want to view when the app boots up. Note that including a network protocol such as http or https is important, otherwise, the webpage won’t load. If you try www.google.com, it won’t work, but http://www.google.com will work. For our sample app, we will have a text box where a user can specify a URL and press Go button to load the webpage. We will also have previous and next buttons to navigate through pages.

This is how our app would look like-

We can set the HomeUrl either on the viewer/designer window or on the blocks editor. If you’ve taken a look at the blocks snapshot below, we have set the HomeUrl on the blocks editor under Screen1.Initialize event. There, we also set the previous and next buttons Enabled property to false. When a user taps on Go button, we first check if the URL in the text box contains http:// or https://, if it does, we simply load the webpage; if it doesn’t, we append http:// at the beginning of the specified URL and load. Since we were able to load a webpage, we set the previous button’s Enabled property to true. Note that if the text box is empty and user presses Go, the viewer will try to load http:// which obviously is not valid. You can always check if the text box is empty. If empty, don’t load anything. We didn’t here because we want to see the default behavior when a URL is invalid.

Cool Web Viewer blocks

When previous button is pressed, we enable the next button since there’s a page we can forward to. We also check if any other pages we can go back to by using CanGoBack procedure of WebViewer component. We do the opposite when next button is pressed.

Download the source of this app CoolWebViewer.

Hardware Back Button Support

So far we have done ok. But, we can only go back by pressing Previous button, not using hardware back button. If we press device back button, app closes. Let’s modify the app. We are going to add another screen. Don’t worry we don’t need to do that. I am doing that because someone asked in the comment section below. First screen will only have a button that opens Screen2 if pressed and Screen2 will have the components we had in the app above. Let’s see what we mean-

WebviewerWithScreensUI

Going to Screen2 is easy. On Screen1‘s Button1.Click event we do-

WebviewerWithScreensClick

As you can see, we only opened Screen2. open another screen block can be found under Control drawer on Blocks window. We have to modify what we did in our first app above to achieve the functionality we want. Let’s take a look at the complete blocks view on Screen2-

WebviewerWithScreens

It’s very similar to what we did in our first app above. Changes are – we created a procedure named GoBack so that both PrevButton.Click and Screen2.BackPressed can use it. The only thing you need to pay attention to is Screen2.BackPressed event. We first check if there’s a page to go back to, if we do, we call GoBack procedure. If none, we close the current screen. Hence, we are going to the previous screen as we didn’t close Screen1.

You can Download the modified verion of the app – WebViewerWithScreens.