Creating a Web Browser Application that redirects the User to the Given URL

Redirecting the user

Today, we’re going to create the second example on the list — Web Browser. Completing this example will help us understand the idea of Intent and URL. When we browse the web or use an application, we sometimes find hyperlinks in the texts or pictures.

Hyperlink is a link from a hypertext file or document to another location or file, typically activated by clicking on a highlighted word or image on the screen.

For example, like this! Clicking on it will redirect you to the Sketchware application on Google Play. We are going to implement something similar in the application we’re about to make. If you haven’t completed the Message Boxproject, please complete it here before getting started.

What you’ll need

1. Sketchware Application from Google Play
2. A burning passion for learning to program

What you’ll learn

1. Concept of Intent and URL

Step 1: Starting the project

Simply select Web Browser project and start!

Step 2: Designing the Application

This is the HINT screen provided to us. The design looks very similar to theMessage Box example we completed before. Place an EditText and a Button widget on the screen and change their layout_width property to match_parent. Also, change the text under Text Properties to match the String shown in the Hint above. We want the text of the EditText to be “input url” and the text of the Button to be “Browser”.

You can edit the property of a widget by:

Clicking on the widget → Edit Properties → …

Also, try playing around with the margin property to create some space between the button and the walls of the screen. This is how my design looks like! Feel free to change the color or other properties to see how they affect the widget.

Step 3: Setting up the logic

What is a Component?

Head over to the LOGIC tab. Last time, when we completed the Message Boxexample, we learned how to edit the Button event under the Events tab. Today, we are going to learn how to add a component under the Components tab, and the purpose of it.

By default, some of the blocks are not available to us. We have to add certain components to make them accessible. There are three types of components we can add:

1. Intent — a messaging object that you can use to request an action from another app component, basically a message to say that you did or want something to happen.

2. File (Shared Preference) — used to save any primitive data: booleans, floats, ints, longs, and strings.

3. Vibrator — used to make the phone vibrate.

Try adding an Intent component like this:

By doing so, you now obtain access to three more function blocks: Intent.setAction, Intent.setData, and StartActivity. You can read what each block is responsible for.

Sketchware provides three actions that can be used on an intent:

ACTION_CALL — You can call someone with the data starting with tel:

ACTION_DIAL — Same with ACTION_CALL, but no permission is required.

ACTION_VIEW — The user is redirected to the web with the URL given in a http:or https: form.

Now that we have a clear understanding of what components are and how we can utilize them, let’s set up the logic.

Our logic is going to look like this:

1. When the app starts, the input is already predefined with ‘http://’
2. User puts in the URL they want to visit
3. If the user input is there, we open the browser to that URL; however, if there is no input, we toast an error message.

Initializing EditText Value to http://

When you launch the demo, you can see that the input url is already filled in with the String “http://”. This can be achieved by manipulating the onCreateevent in the Events list — . You can use the setText to block to set the EditText to be “http://” like this:

Now, whenever the app fires up, the EditText will start with the default value of “http://”. OnCreate event is the place to go whenever you need to set an initial value of something.

Button Click Event

First, we check if there is any user input. It’s similar to what we did in the Message Box example, but it’s slightly different because we only want to accept the String that includes the “http://” value. For instance, if the user were to delete the “http://” and typed “google.com” instead of “http://google.com,” we want to show an error message.

In this situation, we can use the index of block. It’s a green block that returns the index within this string of the first occurrence of the specified character or -1, if the character does not occur. In simple terms, we are going to check if “http://” exists in the String. This is what my final logic looks like:

We first check for the “http://” in the input, then if it exists, we start up the web Intent with the ACTION_VIEW action, where we pass in the data of the user input for the URL. Finally, we start the Activity, which will open the browser. Go ahead and run the program.

Here is the working demo:

Cool! Everything is working just as planned. You just learned how to redirect people to the website you want. Happy coding! :)