Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-19488] iOS9: 3D-Touch: Support UIPreviewActions ("Peek and Pop")

GitHub Issuen/a
TypeNew Feature
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2015-10-08T01:09:14.000+0000
Affected Version/sn/a
Fix Version/sRelease 5.1.0
ComponentsiOS
Labels3DTouch, iOS9
ReporterHans Knöchel
AssigneeHans Knöchel
Created2015-09-09T23:13:10.000+0000
Updated2015-10-27T07:48:17.000+0000

Description

Apple just presented the new 3DTouch feature of the iPhone6S. User can press a view and will review an instant feedback providing a preview of a view to select different actions, called UIPreviewAction. Each action have a title, style and handler property. Multiple actions can also be assigned to UIPreviewActionGroup. That group can have have a title, style and actions property to keep track of the assigned actions. *Related documents:* - https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIPreviewAction_Class/ - https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIPreviewActionGroup_Class/ *Example:*
var sendAction = Ti.UI.iOS.createPreviewAction({
	title : "Send per Mail",
	style : Ti.UI.iOS.PREVIEW_ACTION_STYLE_DEFAULT
});

sendAction.addEventListener("click", function() {
	alert("send mail!");
});

var confirmAction = Ti.UI.iOS.createPreviewAction({
	title : "Confirm",
	style : Ti.UI.iOS.PREVIEW_ACTION_STYLE_DESTRUCTIVE
});

var cancelAction = Ti.UI.iOS.createPreviewAction({
	title : "Cancel"
});

var deleteAction = Ti.UI.iOS.createPreviewActionGroup({
	title : "Delete",
	actions : [confirmAction, cancelAction],
	style : Ti.UI.iOS.PREVIEW_ACTION_STYLE_DESTRUCTIVE
});

confirmAction.addEventListener("click", function() {
	alert("delete!");
});

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

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

previewView.add(Ti.UI.createLabel({
	color : "#fff",
	text : "Preview!"
}));

// 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!"
}));

// Create the preview context
var context = Ti.UI.iOS.createPreviewContext({
	preview : previewView,
	actions : [sendAction, deleteAction], // Can have both Ti.UI.iOS.PreviewAction + Ti.UI.iOS.PreviewActionGroup
	contentHeight : 100, // When unspecified, we use the available height
	pop : function(e) {// Called after popping the preview
		detailWindow.open();
	}
});

// Assign the preview context
var trigger = Ti.UI.createButton({
	title: "Peek here!",
	backgroundColor : "#000",
	tintColor: "#fff",
	width : 200,
	height : 50,
	previewContext : context
});

win.add(trigger);
win.open(); 

Attachments

FileDateSize
Peek-And-Pop.jpg2015-09-22T17:27:52.000+0000478799
Screen Shot 2015-09-15 at 19.53.07.png2015-09-16T02:56:27.000+0000559001

Comments

  1. Hans Knöchel 2015-09-27

    PR: https://github.com/appcelerator/titanium_mobile/pull/7235
  2. Chee Kiat Ng 2015-10-08

    PR approved and merged.
  3. Sebastian Klaus 2015-10-08

    Building on device and for iTunes Store (just testing the build) fails.
       Operating System
         Name                        = Mac OS X
         Version                     = 10.11
         Architecture                = 64bit
         # CPUs                      = 8
         Memory                      = 17179869184
       Node.js
         Node.js Version             = 0.10.38
         npm Version                 = 1.4.28
       Titanium CLI
         CLI Version                 = 5.0.4
       Titanium SDK
         SDK Version                 = 5.1.0.v20151007194443
         SDK Path                    = /Volumes/Data/Users/sebastian/Library/Application Support/Titanium/mobilesdk/osx/5.1.0.v20151007194443
         Target Platform             = iphone
       
       [ERROR] :  ** BUILD FAILED **
       [ERROR] :  The following build commands failed:
       [ERROR] :  	CompileC build/Intermediates/TestApp.build/Release-iphoneos/TestApp.build/Objects-normal/armv7/TiPreviewingDelegate.o Classes/TiPreviewingDelegate.m normal armv7 objective-c com.apple.compilers.llvm.clang.1_0.compiler
       [ERROR] :  (1 failure)
       TRACE  | titanium exited with exit code 1
       ERROR  | Error: ti run exited with error code 1
           at ChildProcess.<anonymous> (/Volumes/Data/Users/sebastian/.appcelerator/install/5.0.2/package/node_modules/appc-cli-titanium/plugins/run.js:89:66)
           at ChildProcess.emit (events.js:117:20)
           at Process.ChildProcess._handle.onexit (child_process.js:820:12)
       
  4. Harry Bryant 2015-10-14

    Verified as fixed, UIPreviewAction features working as intended, built to device & for the iTunes Store successfully. Tested on: iPhone 6S + OSX El Capitan 10.11 Studio: 4.3.1.201509302304 Ti SDK: 5.1.0.v20151009094506 Appc NPM: 4.2.1-1 Appc CLI: 5.1.0-38 Closing Ticket.
  5. Sebastian Klaus 2015-10-23

    Wondering, how I can gain a preview of a listitem. I have to initially set the previewView, but I know it only, when I clicked on a listitem and have the id. I studied your listView example in https://github.com/hansemannn/titanium_mobile/blob/46a5fcaf10c3aaa4b07b7351da737c57660a171a/apidoc/Titanium/UI/iOS/PreviewContext.yml but I have no idea how to fill the preview with fetched content from the listitem or the listitem index id
  6. Sebastian Klaus 2015-10-23

    uh wait... it's the described in the Ti.UI.iOS.createPreviewContext... :facepalm: First think, then write... Sorry ;)
  7. Sebastian Klaus 2015-10-26

    Hello [~hansknoechel], played around and think, that it's not working completely. I copied your example for integrating in a listview. I never get the Ti.API.warn messages. So, I think I never get into the pop function from your example. What I want to do is: Having a listview. On preview, I want to show a detailview with some information out of the database. But how do I fill the previewView with some new content? I never get into the detailWindow.open of your example
  8. Hans Knöchel 2015-10-26

    [~benutzername]: It is currently not possible to provide a cell-specific preview, because the current KrollThread implementation of the core does not allow returning a proxy inside a KrollCallback. This issue is tracked in TIMOB-19763.
  9. Sebastian Klaus 2015-10-27

    [~hansknoechel] is that the reason, the example in the docs does not work and is not coming into the pop function?

JSON Source