BackgroundImage problem with my back button - iphone

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;

Related

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();
}

Webview wont work on image click

So the webview should open when i click the "facebook button" which is a image but acts as a button.
Is there a better way to do this, becasue this is not working.
It seemed easy enough with the code though..
var fbbutton = Ti.UI.createImageView({
image:"fb.png",
top:"55%",
zIndex:"1",
height:"15%",
width:"20%",
left:"2%"
});
fbbutton.addEventListener("click" , function(e){
var webview = Titanium.UI.createWebView({url:'http://www.facebook.com'});
var window = Titanium.UI.createWindow();
window.add(webview);
window.open();
});
Try giving the window an explicit open:
fbbutton.addEventListener("click" , function(e){
var webview = Titanium.UI.createWebView({url:'http://www.facebook.com'});
var window = Titanium.UI.createWindow();
window.add(webview);
window.open({modal:true}); // Make modal
});

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);
});

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

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

Appcelerator ScrollView with image urls

again another question:
I have a scrollView where the images loaded by createView, but how can i add an image from an url? In my case if i change ../images/.... to http://www.codeworxx.com/images/... the images are not loading. In coverFlowView it works?!?!
Any ideas? Here's my code:
var image1 = Ti.UI.createView({width:320,height:156,backgroundImage:'../images/gallery/bmw3er/image1.jpg'});
var image2 = Ti.UI.createView({width:320,height:156,backgroundImage:'../images/gallery/bmw3er/image2.jpg'});
var image3 = Ti.UI.createView({width:320,height:156,backgroundImage:'../images/image3.jpg'});
var image4 = Ti.UI.createView({width:320,height:156,backgroundImage:'../images/image4.jpg'});
var image5 = Ti.UI.createView({width:320,height:156,backgroundImage:'../images/image5.jpg'});
var image6 = Ti.UI.createView({width:320,height:156,backgroundImage:'../images/image6.jpg'});
var scrollView = Ti.UI.createScrollableView({
views:[image1,image2,image3,image4,image5,image6],
showPagingControl:true,
clipViews:false,
top:0,
left:30,
right:30,
width:320,
height:156,
opacity:0
});
Thanks again for your help.
Sascha
Why don't you add Titanium.UI.ImageView to the scrollview.
There is a good example here of scrolling images.
http://shakilspace.blogspot.com/2011/02/appcelerator-titanium-scrollview-swipe.html
There is also a Titanium scrolling image example app available on Codecanyon
http://codecanyon.net/item/swipeable-photo-gallery/145864