Section 1.1: Implementing WebView

To display web content within your app, you can easily add a WebView component. For instance, you can define the URL of the webpage to be displayed using the src property. Alternatively, local HTML pages can also be shown, as well as rendered HTML strings.

Here’s how you can set the src property to an HTML string for display:

this.src = '<h1>Hello, World!</h1>';

Section 1.2: Using Action Dialogs

To create an action dialog, you can utilize the action method. For example, you would set up a button that triggers the openAlert method when tapped.

The action function is a global function that opens the action dialog. The first parameter is the title message, the second is the text for the cancel button, and the third is an array of options that users can select from.

this.$action.show('Title', 'Cancel', ['Option 1', 'Option 2']);

Section 2.1: Alert Dialogs

To display an alert dialog, you can use the alert function. This function accepts an object that specifies the dialog's title, the message content, and the text for the OK button.

You can also opt to pass a simple string to display a message:

this.$alert('This is an alert!');

Section 2.2: Confirm Dialogs

The confirm global function allows the opening of a confirmation dialog. Here’s how to set it up:

this.$confirm({

title: 'Confirmation',

message: 'Are you sure?',

okButtonText: 'Yes',

cancelButtonText: 'No'

});

You can also create a straightforward dialog by providing just a string message for the confirmation dialog.

In this follow-up video, we delve deeper into custom dialog implementations within NativeScript applications.