Adding page curl animation to view when button is tapped on Appcelerator.Titanium - iphone

I'm a newbie in appcelerator.titanium. I started development from today onwards.
My problem is,
I want to display a page curl transition effect when a button is tapped on one of my view.
I used the following code for doing this. But the application is crashed. I searched a lot in SO and titanium documentation. But couldn't find a solution.
//This function returns a window
function ApplicationWindow()
{
//load component dependencies
var FirstView = require('ui/common/FirstView');
//create component instance
var self = Ti.UI.createWindow({
backgroundColor:'#ffffff'
});
//construct UI
var firstView = new FirstView();
self.add(firstView);
//Adding button for displaying view 2
var button1 = Ti.UI.createButton({
height : '50',
width : '50%',
top : '70%',
title : 'Add Child'
});
//Adding event listner for button
button1.addEventListener('click',function(e){
var view = createView();
win.add(view);
});
self.add(button1);
//creating second view
function createView()
{
var view = Ti.UI.createView({
backgroundColor : '#aabbcc'
});
//creating button for view 2
var button2 = Ti.UI.createButton({
height : '50',
width : '50%',
top : '70%',
title : 'Show Curl'
});
//Adding event listner for button
button2.addEventListener('click',function(e)
{
//creating animation
var animation = Titanium.UI.createAnimation({
transition : Ti.UI.iPhone.AnimationStyle.CURL_UP
});
animation.backgroundColor = 'black';
animation.duration = 1000;
var animationHandler = function() {
animation.removeEventListener('complete',animationHandler);
animation.backgroundColor = 'orange';
view.animate(animation);
};
animation.delay = 5000
animation.addEventListener('complete',animationHandler);
view.animate(animation);
});
view.add(button2);
return view;
}
return self;
}
//creating window and opening
var win = ApplicationWindow();
win.open();
Thanks in advance

Use this module instead: http://support.appcelerator.com/kb/119/tickets
It's all done for you..

Related

Swift macOS animating two NSTextViews

I want to animate two textviews, TV1 is on screen and TV2 is offscreen. When a user clicks a button TV1 should reduce its size to 1/2 and TV2 should move from offscreen to lower half of the parent view.
I have this code but only the first view is being animated:
func toggleFrames() {
var frame1H = self.view.frame.size.height
var frame2H = CGFloat(0.0)
var frame2Y = CGFloat(0.0)
var txtV1Frame = txtContents.frame
var txtV2Frame = txtChanges.frame
if bViewingChanges {
frame1H = frame1H/2
frame2Y = (self.view.frame.size.height/2) - 10.0
frame2H = frame1H
}
txtV1Frame.size.height = frame1H
txtV2Frame.size.height = frame2H
txtV2Frame.origin.y = 550.0
NSAnimationContext.runAnimationGroup({_ in
NSAnimationContext.current.duration = 0.5
txtContents.animator().frame = txtV1Frame //reduce size of text view 1
txtChanges.animator().frame = txtV2Frame //<--Grumble, not doing anything
}, completionHandler:{
print("Done animation")
})
}

What control to use to capture image from camera and show on ui as thumbnail with events xamarin ios

I have created a view like this in my xamarin iOS mobile project.
User will be able to click on the capture images button to take a picture and set the image property of the image view. I would like to know how can i allow the user longpress a image (after it has been captured) and popup a message box to delete the image.
I have tried what Sameer has suggested in his comment like so in my ViewDidLoad
var gestureRecognizer = new UILongPressGestureRecognizer();
gestureRecognizer.AddTarget(() => ButtonLongPressed(gestureRecognizer));
img1.AddGestureRecognizer(gestureRecognizer);
img2.AddGestureRecognizer(gestureRecognizer);
When i click and hold on the image nothing happens. I have added these image views via the designer.
After a little more research and using the comment from #Junior Jiang - MSFT. I have made a bit progress but i would like to know which UIImage view has been clicked.
Heres my current code:
public JobImagesViewController(Job passedInCurrentJob) : base("JobImagesViewController", null)
{
currentJob = passedInCurrentJob;
uIImageViews = new List<UIImageView>();
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
uIImageViews.Add(img1);
uIImageViews.Add(img2);
uIImageViews.Add(img3);
uIImageViews.Add(img4);
uIImageViews.Add(img5);
uIImageViews.Add(img6);
uIImageViews.Add(img7);
uIImageViews.Add(img8);
uIImageViews.Add(img9);
uIImageViews.Add(img10);
InitialiseImageGrid();
// Add a Save button to the navigation bar
this.NavigationItem.SetRightBarButtonItem(
new UIBarButtonItem("Save", UIBarButtonItemStyle.Done, (sender, args) =>
{
//TODO if else block with all logic to check if there are images etc.
//TODO prompt user and ask if they would like to save images.
UIAlertView alert = new UIAlertView("Save Images?", "Save images against the Job?", null, "Yes", new string[] { "No" });
alert.Clicked += (s, e) =>
{
if (e.ButtonIndex == 0) // Yes clicked
{
SaveJobImages();
}
};
alert.Show();
}), true);
}
[Export("ImageLongPressed:")]
public void ImageLongPressed(UILongPressGestureRecognizer gestureRecognizer)
{
if (gestureRecognizer.State != UIGestureRecognizerState.Began)
{
return;
// Needed because selector is executed twice, because Long-press gestures are continuous
}
// Perform action of opening the dialog to select/take a picture, replacing the ? image with the new image
UIAlertView alert = new UIAlertView("Delete this image ?" , "Are you sure you want to delete this image?", null, "Yes", new string[] { "No" });
alert.Clicked += (s, e) =>
{
if (e.ButtonIndex == 0) // 'Accept' clicked
{
// TODO how to get the image which has been clicked??
}
};
alert.Show();
}
private void InitialiseImageGrid()
{
_imageList = DataAccess.GetImages(currentJob.jobAddressID);
var imageBytes = _imageList.Select(x => x.ImageBytes).ToList();
var gestureRecognizer = new UILongPressGestureRecognizer(this, new ObjCRuntime.Selector("ImageLongPressed:"));
gestureRecognizer.AddTarget(() => ImageLongPressed(gestureRecognizer));
// Populate the image views.
// TODO need to find a way to assign it to every imageview on the view without looping maybe linq???
int i = 0;
foreach (var item in imageBytes)
{
var imagedata = NSData.FromArray(item);
var img = UIImage.LoadFromData(imagedata);
if (uIImageViews != null && uIImageViews.Count > i)
{
uIImageViews[i].UserInteractionEnabled = true;
uIImageViews[i].AddGestureRecognizer(gestureRecognizer);
uIImageViews[i].AddGestureRecognizer(gestureRecognizer);
uIImageViews[i].Image = img;
}
i++;
}
It depends on how you are creating your view, are you using a XIB with all the images on there as buttons with images, and IBActions connected to those buttons. just make the sender a UILongPressGestureRecognizer.
If you are doing it through code, then in your ViewDidLoad you want to set your buttons to have an initial ? (or Image Needed) background image and then you add the UILongPress GestureRecognizer to each on of them. So if you had one button, you would do this:
public override void ViewDidLoad ()
{
// Perform any additional setup after loading the view
UIButton button = new UIButton (new System.Drawing.RectangleF(100, 100, 100, 30));
button.SetBackgroundImage ("imageNeeded", UIControlState.Normal);
var gestureRecognizer = new UILongPressGestureRecognizer ();
gestureRecognizer.AddTarget(() => this.ButtonLongPressed(gestureRecognizer));
button.AddGestureRecognizer(gestureRecognizer);
this.View.Add (button);
}
public void ButtonLongPressed(UILongPressGestureRecognizer gestureRecognizer)
{
if (gestureRecognizer.State != UIGestureRecognizerState.Began)
{
return;
// Needed because selector is executed twice, because Long-press gestures are continuous
}
// Perform action of opening the dialog to select/take a picture, replacing the ? image with the new image
}
If want to use UILongPressGestureRecognizer in UIImage, should set ImageView's UserInteractionEnabled be true.
As follow:
List<UIImageView> imageViews = new List<UIImageView>();
UIImage image = UIImage.FromFile("off.png");
ImageViewOne.Image = image;
ImageViewOne.Tag = 1;
ImageViewTwo.Image = image;
ImageViewTwo.Tag = 2;
imageViews.Add(ImageViewOne);
imageViews.Add(ImageViewTwo);
foreach (var imageview in imageViews)
{
imageview.UserInteractionEnabled = true;
UILongPressGestureRecognizer uITapGestureRecognizer = new UILongPressGestureRecognizer();
uITapGestureRecognizer.AddTarget(() => { Console.WriteLine("You choose View " + imageview.Tag); });
imageview.AddGestureRecognizer(uITapGestureRecognizer);
}
Here is official document from Apple.

Close popup after a time

I use this code to show my popup automatically and I want to know how to close it automatically after 5 seconds.
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
Modifying an example from Mozilla's developer page on WindowTimers.setTimeout(), call this function from within your existing document.ready function:
delayedAlertClose();
Add these functions outside your document.ready function:
function delayedAlertClose() {
timeoutID = window.setTimeout(popupClose, 5000);
}
function popupClose() {
$('#mask').hide();
$('.window').hide();
}

How to hide/show view in Titanium?

I am new to Titanium.
I have taken 3 view and want to hide show that view on button click for iPhone app.
Any idea how to achieve this?
You can hide / show a view very easily, heres a self contained example:
var win = Ti.UI.createWindow();
var view = Ti.UI.createView({
width : 100,
height : 100,
backgroundColor : 'red'
});
var redView = Ti.UI.createView({
title : 'Hide / Show Red View',
bottom : 0,
width : 200,
height : 35
});
var visible = true;
button.addEventListener('click', function(e) {
if(visible) {
redView.hide();
} else {
redView.show();
}
visible = !visible;
});
win.add(redView);
win.add(button);
win.open();
While the other answer is certainly useful, two other (slightly) different methods for doing the same thing, just in case Titanium flips out when you use show() and hide().
//Method 1, using part of Josiah Hester's code snippet
var visible = true;
button.addEventListener('click', function(e) {
if(visible) {
redView.setVisible(false); //This is the exact same thing as hide() method
} else {
redView.setVisible(true); //This is the exact same thing as show() method
}
visible = !visible;
});
You can set opacity to 0 and even if the view's visible property is set to true, it will still be invisible, due to a completely nonexistent level of opacity. This is useful if you want something to be visible, but not clickable (by placing a view behind a view with an opacity of zero.
//Method 2, same code section
var opacity = 0;
button.addEventListener('click', function(e) {
if(opacity) {
redView.setOpacity(0); //This is the NOT the same thing as hide() method
} else {
redView.setOpacity(1); //This is the NOT thesame thing as show() method
}
opacity = Math.abs(opacity - 1);
});

BackgroundImage problem with my back button

I have a concern that the image I attributed back button does not appear I added this statement but it does nothing
win1.setBackButtonTitleImage('back.png');
here is the code
var ButtonRetour = Ti.UI.createButtonBar({labels:['Retour'],
backgroundColor:'#ae4041',
backgroundImage:'back.png',
color:'#ffffff' });
ButtonRetour.addEventListener('click',
function(){ tabGroup.close(); });
win1.leftNavButton = ButtonRetour;
win1.setBackButtonTitleImage('back.png');
you have an idea about the problem
thank you
I found the solution
I actually changed the code for the creation of back button using the following
var backButton = Ti.UI.createButton({
title:'Accueil',
backgroundImage:'images/back.png',
font:{fontSize:13,fontWeight:'bold'},
textAlign:'center',
width:75,
height: 35
});
backButton.addEventListener('click', function(){
tabGroup.close();
});
win1.leftNavButton = backButton;
Try that. Note, that I am not sure whether you can use both backgroundColor and backgroundImage:
var ButtonRetour = Titanium.UI.createButton({
title:'Retour',
backgroundColor: '#ae4041', // i am not sure whether you can use both bgColor and bgImage
backgroundImage:'back.png',
width:100, //set proper width here
height:20 //set proper height here
});
ButtonRetour.addEventListener('click', function() {
tabGroup.close();
});
win1.leftNavButton = ButtonRetour;