# Modules.WebDialog

Allows a Titanium application to use the Safari Controller (iOS) and Chrome Tabs (Android) to create an embedded browser.

Availability

7.1.0

Extends

Titanium.Module

# Overview

The WebDialog module provides Titanium access to the native SFSafariViewController (iOS) and ChromeTabs (Android). This enables you to deliver interactive web content in your app just like the built-in browser, including the native UI elements already familiar to your users.

# Requirements

The WebDialog module is available with the Titanium SDK starting with Release 7.1.0. This module only works with devices running iOS 9 / Android 4.1 and later. Please make sure you have at least Xcode 7 to build to the required iOS sources.

# Getting Started

Add the module as a dependency to your application by adding a <module> item to the <modules> element of your tiapp.xml file:

<ti:app>
  <!-- ... -->
  <modules>
    <module platform="iphone">ti.webdialog</module>
  </modules>
  <!-- ... -->
</ti:app>

Use require() to access the module from JavaScript:

var dialog = require('ti.webdialog');

The dialog variable is a reference to the module. Make API calls using this reference:

if (dialog.isSupported()) {
    dialog.open({
        url: 'https://appcelerator.com'
    });
}

# Sample Application

The module contains a sample application in the <TITANIUM_SDK_HOME>/modules/iphone/ti.webdialog/<VERSION>/example/ folder.

# Properties

# apiName READONLY

Availability

7.1.0

apiName :String

The name of the API that this proxy corresponds to.

The value of this property is the fully qualified name of the API. For example, Titanium.UI.Button returns Ti.UI.Button.

# bubbleParent

Availability

7.1.0

bubbleParent :Boolean

Indicates if the proxy will bubble an event to its parent.

Some proxies (most commonly views) have a relationship to other proxies, often established by the add() method. For example, for a button added to a window, a click event on the button would bubble up to the window. Other common parents are table sections to their rows, table views to their sections, and scrollable views to their views. Set this property to false to disable the bubbling to the proxy's parent.

Default: true

# lifecycleContainer

Availability

7.1.0

lifecycleContainer :Titanium.UI.Window | Titanium.UI.TabGroup

The Window or TabGroup whose Activity lifecycle should be triggered on the proxy.

If this property is set to a Window or TabGroup, then the corresponding Activity lifecycle event callbacks will also be called on the proxy. Proxies that require the activity lifecycle will need this property set to the appropriate containing Window or TabGroup.

# Methods

# addEventListener

Availability

7.1.0

addEventListener(name, callback) → void

Adds the specified callback as an event listener for the named event.

Parameters

Name	Type	Description
`name`	String	Name of the event.
`callback`	Callback<Titanium.Event>	Callback function to invoke when the event is fired.

Returns

Type: void

# applyProperties

Availability

7.1.0

applyProperties(props) → void

Applies the properties to the proxy.

Properties are supplied as a dictionary. Each key-value pair in the object is applied to the proxy such that myproxy[key] = value.

Parameters

Name	Type	Description
`props`	Dictionary	A dictionary of properties to apply.

Returns

Type: void

# close

Availability

7.1.0

close() → void

Programmatically closes the web dialog.

var dialog = require('ti.webdialog');
if (dialog.isOpen()) {
    dialog.close();
}

Returns

Type: void

# createAuthenticationSession

Availability

7.1.0

createAuthenticationSession([parameters]) → Modules.WebDialog.AuthenticationSession

Creates and returns an instance of Modules.WebDialog.AuthenticationSession.

Parameters

Name	Type	Description
`parameters`	Dictionary<Modules.WebDialog.AuthenticationSession>	Properties to set on a new object, including any defined by Modules.WebDialog.AuthenticationSession except those marked not-creation or read-only.

Returns

Type: Modules.WebDialog.AuthenticationSession

# fireEvent

Availability

7.1.0

fireEvent(name[, event]) → void

Fires a synthesized event to any registered listeners.

Parameters

Name	Type	Description
`name`	String	Name of the event.
`event`	Dictionary	A dictionary of keys and values to add to the Titanium.Event object sent to the listeners.

Returns

Type: void

# isOpen

Availability

7.1.0

isOpen() → Boolean

Indicates if the web dialog is open.

Returns

Type: Boolean

# isSupported

Availability

7.1.0

isSupported() → Boolean

Indicates if the web dialog is supported.

Returns

Type: Boolean

# open

Availability

7.1.0

open(params) → void

Opens the web dialog with the options provided.

var dialog = require('ti.webdialog');
if (dialog.isSupported()) {
    dialog.open({
        url: 'https://appcelerator.com',
        title: 'Hello World',
        tintColor: 'red'
    });
}

Parameters

Name	Type	Description
`params`	WebDialogOpenParams	Dictionary used to configure the web dialog.

Returns

Type: void

# removeEventListener

Availability

7.1.0

removeEventListener(name, callback) → void

Removes the specified callback as an event listener for the named event.

Multiple listeners can be registered for the same event, so the callback parameter is used to determine which listener to remove.

When adding a listener, you must save a reference to the callback function in order to remove the listener later:

var listener = function() { Ti.API.info("Event listener called."); }
window.addEventListener('click', listener);

To remove the listener, pass in a reference to the callback function:

window.removeEventListener('click', listener);

Parameters

Name	Type	Description
`name`	String	Name of the event.
`callback`	Callback<Titanium.Event>	Callback function to remove. Must be the same function passed to `addEventListener`.

Returns

Type: void

# Events

# open

Availability

7.1.0

The open event is fired after the web dialog has opened.

Properties

Name	Type	Description
url	String	The URL provided when opening the web dialog.
source	Object	Source object that fired the event.
type	String	Name of the event fired.
bubbles	Boolean	True if the event will try to bubble up if possible.
cancelBubble	Boolean	Set to true to stop the event from bubbling.

# close

Availability

7.1.0

The close event is fired when the web dialog is closed by the user or programmatically.

Properties

Name	Type	Description
url	String	The URL provided when opening the web dialog.
source	Object	Source object that fired the event.
type	String	Name of the event fired.
bubbles	Boolean	True if the event will try to bubble up if possible.
cancelBubble	Boolean	Set to true to stop the event from bubbling.

# load

Availability

7.1.0

Fired when the initial URL load is complete.

This event is invoked when the erb dialog completes the loading of the URL that you pass to it's initializer. It is not invoked for any subsequent page loads in the same web dialog instance.

Properties

Name	Type	Description
url	String	The URL provided when opening the web dialog.
success	Boolean	Returns `true` if loading completed successfully, `false` otherwise.
source	Object	Source object that fired the event.
type	String	Name of the event fired.
bubbles	Boolean	True if the event will try to bubble up if possible.
cancelBubble	Boolean	Set to true to stop the event from bubbling.

# redirect

Availability

7.1.0

Fired when the browser is redirected to another URL before the first page load finishes.

Properties

Name	Type	Description
url	String	The URL provided when opening the web dialog.
source	Object	Source object that fired the event.
type	String	Name of the event fired.
bubbles	Boolean	True if the event will try to bubble up if possible.
cancelBubble	Boolean	Set to true to stop the event from bubbling.

# Constants

# DISMISS_BUTTON_STYLE_CANCEL

Availability

7.1.0

DISMISS_BUTTON_STYLE_CANCEL :Number

Button style used to display a localized "Cancel" button.

Use with the dismissButtonStyle property in open.

# DISMISS_BUTTON_STYLE_CLOSE

Availability

7.1.0

DISMISS_BUTTON_STYLE_CLOSE :Number

Button style used to display a localized "Close" button.

Use with the dismissButtonStyle property in open.

# DISMISS_BUTTON_STYLE_DONE

Availability

7.1.0

DISMISS_BUTTON_STYLE_DONE :Number

Button style used to display a localized "Done" button.

Use with the dismissButtonStyle property in open.