Titanium.UI.iOS.PreviewContext

A PreviewContext provides options to configure the iOS 9 3D-Touch "Peek and Pop" feature.

The PreviewContext is created by the Titanium.UI.iOS.createPreviewContext method. You must set the pop and preview properties when creating a PreviewContext object.

Use this class to configure the previewing context which is displayed while "peeking" a view.

Note: This feature requires iOS 9 and a 3D-Touch capable device (such as iPhone 6S or iPhone 6S Plus). You cannot test 3D touch on the iOS simulator. To check if the current device supports 3D touch, use the Titanium.UI.iOS.forceTouchSupported property and consider using the longpress event to provide a fallback to your users on non-3D-touch devices.

Properties #

actions#

Type: Array<Titanium.UI.iOS.PreviewAction>

The preview actions and preview action groups.

Provides an array with elements of the type Titanium.UI.iOS.PreviewAction
and Ti.UI.iOS.PreviewActionGroup. Both can be used together.

apiName#

extended

Type: 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, Button
returns Ti.UI.Button.

bubbleParent#

extended

Type: 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.

contentHeight#

Type: Number

The height of the preview.

Specified the height of the preview which will be shown during "peeking".

lifecycleContainer#

extended

Type: 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.

preview#

Type: Titanium.UI.View

The preview view.

Provides the preview for "peeking". This view is independent from the window which can be openend after
"popping" the preview to give you the ability to provide different layouts for the preview and the full
window. If you want to adjust the preview inside the peek event, change the view assigned to this property.

Methods #

addEventListener #

extended

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

Parameters:

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

applyProperties #

extended

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	Summary	Optional
`props`	`Dictionary`	A dictionary of properties to apply.	No

fireEvent #

extended

Fires a synthesized event to any registered listeners.

Parameters:

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

removeEventListener #

extended

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	Summary	Optional
`name`	`String`	Name of the event.	No
`callback`	`Callback<Titanium.Event>`	Callback function to remove. Must be the same function passed to `addEventListener`.	No

Events #

peek #

Fired when the user peeks the preview. You can configure the preview

You can configure the preview in this event before it is displayed. If the preview context is assigned to a
normal view like a Titanium.UI.Button the preview property can be received here to change the content of it
before displaying. If the preview context is assigned to a Titanium.UI.ListView, you can also receive the
properties sectionIndex, itemIndex and itemId here to access item-specific data to display.

Note: Don't do asynchronous operations like HTTP requests here, since the preview will not wait for the
operations to complete.

Event Properties:

Name	Type	Summary
`preview`	`Titanium.UI.View`	The view to be previewed.
`sectionIndex`	`Number`	The section index of the ListView to identify the selected section. Note: This property is only available if the preview context is assigned to a Titanium.UI.ListView.
`itemIndex`	`Number`	The item index of the ListView to identify the selected item. Note: This property is only available if the preview context is assigned to a Titanium.UI.ListView.
`itemId`	`String`	The item ID bound to the list item that generated the event.

pop #

Fired when the user pop the preview. You will most likely open a fullscreen window here.

You can open a window here or update your current UI. If the preview context is assigned to a
normal view like a Titanium.UI.Button the preview property can be received here to change the content of it
before displaying. If the preview context is assigned to a Titanium.UI.ListView, you can also receive the
properties sectionIndex, itemIndex and itemId here to access item-specific data to display.

Note: Don't do asynchronous operations like HTTP requests here, since the preview will not wait for the
operations to complete.

Event Properties:

Name	Type	Summary
`preview`	`Titanium.UI.View`	The view to be previewed.
`sectionIndex`	`Number`	The section index of the ListView to identify the selected section. Note: This property is only available if the preview context is assigned to a Titanium.UI.ListView.
`itemIndex`	`Number`	The item index of the ListView to identify the selected item. Note: This property is only available if the preview context is assigned to a Titanium.UI.ListView.
`itemId`	`String`	The item ID bound to the list item that generated the event.

Examples #

PreviewContext example using a Button as receiver.

The example below creates a new preview context and assigns a `window`, `actions` and a `contentHeight`. After that, we assign the preview context to a view which will trigger the "peeking" of it. Note, that this is independent from the click event of the view itself.

var actions = [];
var win = Ti.UI.createWindow({
    backgroundColor: "white"
});

// The view to be previewed while popping.
var previewView = Ti.UI.createView({
    backgroundColor: "blue"
});

// The window to be opened after popping the preview.
var detailWindow = Ti.UI.createWindow({
    backgroundColor: "yellow"
});

detailWindow.add(Ti.UI.createLabel({
    text: "You made it!"
}));

// The actions to be added to the preview context.
var action = Ti.UI.iOS.createPreviewAction({
    title: "Preview Action",
    style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DEFAULT
});

action.addEventListener("click", function(e) {
    alert("Title: " + e.title + " / Style: " + e.style+" / Index: " + e.index);
});

var subAction = Ti.UI.iOS.createPreviewAction({
    title: "Preview Subaction"
})

subAction.addEventListener("click", function(e) {
    alert("Title: " + e.title + " / Style: " + e.style+" / Subindex: " + e.index);
});

var actionGroup = Ti.UI.iOS.createPreviewActionGroup({
    title: "More actions...",
    style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DESTRUCTIVE,
    actions: [subAction]
});

actions.push(action);
actions.push(actionGroup);

// Create the preview context
var context = Ti.UI.iOS.createPreviewContext({
    preview: previewView,
    actions: actions, // Can have both Ti.UI.iOS.PreviewAction + Ti.UI.iOS.PreviewActionGroup
        contentHeight: 300 // When unspecified, we use the available height
});

// Fired after popping the preview
context.addEventListener("pop", function(e) {
    detailWindow.open();
});

// Assign the preview context
var button = Ti.UI.createButton({
    previewContext: context, // Will be ignored on unsupported devices
    title : "Open Window!",
    backgroundColor: "#A6171C",
    width: 200,
    height: 50,
    tintColor: "#fff"
});

win.add(button);
win.open();

PreviewContext example using a ListView as receiver.

var actions = [];
var win = Ti.UI.createWindow({
    backgroundColor: "white"
});

// The view to be previewed while popping.
var previewView = Ti.UI.createView({
    backgroundColor: "blue"
});

// The window to be opened after popping the preview.
var detailWindow = Ti.UI.createWindow({
    backgroundColor: "yellow"
});

detailWindow.add(Ti.UI.createLabel({
    text: "You made it!"
}));

// The actions to be added to the preview context.
var action = Ti.UI.iOS.createPreviewAction({
    title: "Preview Action",
    style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DEFAULT
});

action.addEventListener("click", function(e) {
    alert(
        "Title: " + e.title +
        "\nStyle: " + e.style +
        "\nIndex: " + e.index +
        "\nSectionIndex: " + e.sectionIndex +
        "\nItemIndex: " + e.itemIndex
    );
});

actions.push(action);

// Create the preview context
var context = Ti.UI.iOS.createPreviewContext({
    preview: previewView,
    actions: actions, // Can have both Ti.UI.iOS.PreviewAction + Ti.UI.iOS.PreviewActionGroup
    contentHeight: 300 // When unspecified, we use the available height
});

// Fired after peeking the preview
// Use this event to configure the preview depending on the sectionIndex / itemIndex
context.addEventListener("peek", function(e) {
    Ti.API.warn("sectionIndex: " + e.sectionIndex);
    Ti.API.warn("itemIndex: " + e.itemIndex);
});

// Fired after popping the preview
context.addEventListener("pop", function(e) {
    detailWindow.open();
});

// Assign the preview context
var listView = Ti.UI.createListView({
    previewContext: context, // Will be ignored on unsupported devices
});

var section1 = Ti.UI.createListSection({
    headerTitle: "Section 1"
});

var section2 = Ti.UI.createListSection({
    headerTitle: "Section 2"
});

var items = [];

for(var i = 1; i <= 5; i++) {
    items.push({
        properties: {
            title: "Cell #" + i
        }
    });
}

section1.items = items;
section2.items = items;
listView.sections = [section1, section2];

win.add(listView);
win.open();

Notificationchannels

Launchoptionstype

Notificationparams

Usernotificationattachment

Usernotificationsettings

Mediascannerresponse

Clipboarditemstype

Systemimageparameters

Titanium.UI.iOS.PreviewContext ​

Properties #

actions#

apiName#

bubbleParent#

contentHeight#

lifecycleContainer#

preview#

Methods #

addEventListener #

applyProperties #

fireEvent #

removeEventListener #

Events #

peek #

pop #

Examples #

PreviewContext example using a Button as receiver.

PreviewContext example using a ListView as receiver.

Titanium.UI.iOS.PreviewContext