Titanium SDK: 3.1.2 Platform: Android Titanium Studio: 3.1.3.
Hi all
I am new for Titanium and trying to add some animation to my window. When the window opens, it should open from left to right.
I have achieved this with following code.
But there is a problem, before showing animated window, a black screen appears.
So my questions are:-
1) What should i do to remove the black screen..?
2) What should i do to close the same window with animation right to left when clicking android back arrow button..?
//Application Window Component Constructor
var self = Ti.UI.createWindow({
backgroundColor:'#123',
navBarHidden:false,
exitOnClose:true
});
var devWidth = Ti.Platform.displayCaps.platformWidth;
var button = Ti.UI.createButton({title:'Click',width:100,height:50});
button.addEventListener('click', function(e) {
var detailContainerWindow = Ti.UI.createWindow({
title: 'View Details',
navBarHidden: false,
backgroundColor:'#fff'
});
detailContainerWindow.addEventListener('open', function(){
var anim1 = Ti.UI.createAnimation({
left: "-" + devWidth,
duration: 1000
});
detailContainerWindow.animate(anim1);
});
detailContainerWindow.open();
});
self.add(button);
do not execute animation on open event just execute after .open method.
var anim1 = Ti.UI.createAnimation({
left: "-" + devWidth,
duration: 1000
});
detailContainerWindow.animate(anim1);
var button = Ti.UI.createButton({title:'Click',width:100,height:50});
button.addEventListener('click', function(e) {
var detailContainerWindow = Ti.UI.createWindow({
title: 'View Details',
navBarHidden: false,
backgroundColor:'#fff'
});
detailContainerWindow.addEventListener('open', function(){
});
detailContainerWindow.open();
detailContainerWindow.animate(anim1);
});
and to close that windoiw with animation you use androidback event of winnow.
var anim2 = Ti.UI.createAnimation({
left: devWidth,
duration: 1000
});
detailContainerWindow.addEventListener('androidback', function(){
detailContainerWindow.animate(anim2);
});
Related
i am creating option dialog which contains radio buttons on right .this i saw in kitchensink i tried to create my own in other project but it showing error like applybutton(); undefined on button click ,i know that applybutton(); is function we have to define it but in kitchensink it directly shows how is that.
if i have to define function how could i go further,should i use images? please help me i am new to titanium appcelerator
Ti.UI.setBackgroundColor('white');
var win = Ti.UI.createWindow({
title: 'Click window to test',
backgroundColor: 'white',
exitOnClose: true,
fullscreen: false
});
var opts = {
cancel: 2,
options: ['Confirm', 'Help', 'Cancel'],
selectedIndex: 2,
destructive: 0,
title: 'Delete File?'
};
var dialog = Titanium.UI.createOptionDialog(opts);
dialog.addEventListener('click',function(e)
{
label.text = 'You selected ' + e.index;
if (e.button) {
label.text += ' button';
} else {
label.text += ' option';
}});
var button1 = Titanium.UI.createButton({
title:'Show Dialog 1',
height:40,
width:200,
top:10
});
button1.addEventListener('click', function()
{
dialog.androidView = null;
applyButtons();
dialog.show();
});
win.add(button1);
win.open();
the function applyButtons() was originally defined in the KitchenSink example code, be it at the top of the file or imported in via a commonjs module with a require statement.
If you want to call and use this method, place it at the top as a function expression eg.
var applyButtons = function() {
// Do something
};
You are getting a undefined error on the click eventLister as it can't find reference to this function.
Either remove / delete the call to the function or add it at the top of the code with whatever you want applyButtons to do.
I am new to the scene and wonder how i am to go about this.
I have a switch that should add +1 or a "point" to a label when the switch is true.
and When it is false it should withdraw that same "point".
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
var view = Ti.UI.createView();
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
var basicSwitch = Ti.UI.createSwitch({
title: "+1"
});
basicSwitch.addEventListener('click',function(e){
});
var label1=Ti.UI.createLabel({
text: ""
});
view.add(basicSwitch);
win.add(view);
win.open();
My code so far,not much i know.
Here you go first of all their are following errors in your code
1)Making window 2 times
2)Creating a label but not adding to parent container
3)Switch has change event listener instead of click one
4)You can set the switch title
and Here goes the correct code
var win = Ti.UI.createWindow({
backgroundColor : 'white'
});
var view = Ti.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.FILL
});
var basicSwitch = Ti.UI.createSwitch({
top : 30,
value : false,
});
basicSwitch.addEventListener('change', function(e) {
if (e.value = true) {
label1.text = 1;
} else {
}
});
var label1 = Ti.UI.createLabel({
text : ""
});
view.add(label1);
view.add(basicSwitch);
win.add(view);
win.open();
Thanks
As I came to know that we cannot use custom image or background/border/text color in pickerview in titanium yet.
So I came up with the idea of showing a button to the user with custom image/font, and when user clicks the button, the picker view rows are shown just as if launched by clicking the picker view. Is it possible?
So My Question: How can launch a picker view when a button is clicked.
You can also try Titanium.UI.OptionDialog, you can change this and in stead of having the event listener in the window you can have it in another custom view which can be used as a button.
Ti.UI.setBackgroundColor('white');
var win = Ti.UI.createWindow({
title: 'Click window to test',
backgroundColor: 'white',
exitOnClose: true,
fullscreen: false
});
var opts = {
cancel: 2,
options: ['Confirm', 'Help', 'Cancel'],
selectedIndex: 2,
destructive: 0,
title: 'Delete File?'
};
win.addEventListener('click', function(e){
var dialog = Ti.UI.createOptionDialog(opts).show();
});
win.open();
Use This:
btn.addEventListener('click', function(){
//Do your picker initialization (Picker code is taken from titanium docs)
var picker = Ti.UI.createPicker({
top:50,
useSpinner: true
});
picker.selectionIndicator = true;
var fruit = [ 'Bananas', 'Strawberries', 'Mangos', 'Grapes' ];
var color = [ 'red', 'green', 'blue', 'orange' ];
var column1 = Ti.UI.createPickerColumn();
for(var i=0, ilen=fruit.length; i<ilen; i++){
var row = Ti.UI.createPickerRow({
title: fruit[i]
});
column1.addRow(row);
}
var column2 = Ti.UI.createPickerColumn();
for(var i=0, ilen=color.length; i<ilen; i++){
var row = Ti.UI.createPickerRow({ title: color[i] });
column2.addRow(row);
}
picker.add([column1,column2]);
win.add(picker);
});
Im a Titanium Beginner who is trying to create a form page with 2 textfields of Name and address and a DateTimePicker. I am facing 2 problems right now being :
1) the DateTimePicker is successfully shown but i would like both of it and also including the 2 textfields to be on the same window, with a same submit button.
2) I have tried numerous times but am unable to create a simple textfield at all even just creating it on a single page.It just doesnt show up.
Anyone could offer some constructive help?
Thanks in advance. The Below is my current code.
var winTimePicker = Titanium.UI.createWindow({});
winTimePicker.backgroundColor = 'black';
var doneBtn = Ti.UI.createButton({
title: 'Done',
});
doneBtn.addEventListener('click', function() {
winTimePicker.hide();
});
winTimePicker.add(doneBtn);
var timePicker = Ti.UI.createPicker({
type:Ti.UI.PICKER_TYPE_TIME,
bottom:0,
});
// turn on the selection indicator (off by default)
timePicker.selectionIndicator = true;
timePicker.addEventListener('change', function(e) {
//your code
});
winTimePicker.add(timePicker);
//open window
winTimePicker.open();
var winDatePicker = Titanium.UI.createWindow({});
winDatePicker.backgroundColor = 'black';
var doneBtn = Ti.UI.createButton({
title: 'Done',
});
doneBtn.addEventListener('click', function() {
winDatePicker.hide();
});
winDatePicker.add(doneBtn);
var datePicker = Ti.UI.createPicker({
type:Ti.UI.PICKER_TYPE_DATE,
bottom:0,
});
// turn on the selection indicator (off by default)
datePicker.selectionIndicator = true;
datePicker.addEventListener('change', function(e) {
//your code
});
winDatePicker.add(datePicker);
//open window
winDatePicker.open();
var textField = Titanium.UI.createTextField({
color:'#336699',
width:"auto",
height:"auto",
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});
var textField2 = Titanium.UI.createTextField({
color:'#336699',
width:"auto",
height:"auto",
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});
Check this code out and make changes as you find suitable to it:
var timePickerWin = Ti.UI.createWindow({
navBarHidden : true,
backgroundColor : '#fff'
});
var startTime = Ti.UI.createPicker({
top : '15dp',
left : '50dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_TIME,
format24 : false,
height : '130dp',
// width:'auto'
});
var endTime = Ti.UI.createPicker({
top : '15dp',
left : '50dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_TIME,
format24 : false,
height : '130dp'
});
var nextButton = Ti.UI.createButton({
width : '220dp',
height : '45dp',
top : '15dp',
title : 'Next',
backgroundColor : '#294079',
font : {
fontSize : '18dp',
fontWeight : 'bold'
},
color : '#fff'
});
startTime.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
startPickerValue = e.value;
});
endTime.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
endPickerValue = e.value
});
var fullNameTextBox = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '15dp',
color : '#000000',
hintText : 'Enter full name'
// backGroundColor:'gray',
});
var emailTextBox = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '15dp',
color : '#000000',
hintText : 'Enter email'
});
Finally add all these UI elements to the window which is the timePickerWin using add function
timePickerWin.add(startTime);
and so on for all the UI elements.After that open the timePickerWin as below
timePickerWin.open()
Make suitable layout changes by varying the left,right,height and width properties of each element.
How do I dock a footer menu to the bottom of the screen on Android and iPhone in Appcelerator Titanium? I want to display 3 icons on the bottom of the screen.
I used Titanium.UI.View and set bottom: 0 to get it to dock to the bottom.
Yes, we use Ti.UI.Toolbar for this. Let see this example code:
var space = Titanium.UI.createButton({
systemButton: Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
var buttonNextEnd = Titanium.UI.createButton({
title: '>>'
});
var buttonNext1Page = Titanium.UI.createButton({
title: '>'
});
var buttonPrevEnd = Titanium.UI.createButton({
title: '<<'
});
var buttonPrev1Page = Titanium.UI.createButton({
title: '<'
});
var toolbarNav = Titanium.UI.createToolbar({
left : 0,
bottom: 0,
height : 40,
width : 320,
items: [buttonPrevEnd,space, buttonPrev1Page,space, buttonNext1Page, space,buttonNextEnd]
});
win.add(toolbarNav);
Use Titanium.UI.ToolBar for that.
If you are using Appcelerator Alloy Framework
The code in the XML view
<Alloy>
<Window title="My Nice Title">
... ... ...
... ... ...
<View class="footer-menu"></View>
</Window>
</Alloy>
The code in TSS
".footer-menu": {
backgroundColor: 'red',
width: '100%',
height: 40,
bottom: 0
}
This will push the view to bottom. Here is a screenshot.
Not using Alloy? It is similar in JS too.
// create window
var win = Ti.UI.createWindow({
// if anything
});
// create view
var footer_menu = Ti.UI.createView({
backgroundColor: 'red',
width: '100%',
height: 40,
bottom: 0
});
// add view to window
win.add(footer_menu);
Hope this is helpful. Thanks!
var footer = Ti.UI.createView({
height:25
});
var footerButton = Ti.UI.createLabel({
title:'Add Row',
color:'#191',
left:125,
width:'auto',
height:'auto'
});
footer.add(footerButton);
it works on android, but i still dont know why the button cant appear on iphone
Remember that Toolbars aren't compatible for Android or Tablet.
If you want to set buttons to the bottom of the screen, create a View, set it at the bottom and then distribute the buttons with relative position, considering the screen width.
Here's an example:
function FirstWindow() {
var self = Ti.UI.createWindow({
background : "black",
height : "auto",
width : "auto",
layout : "vertical"
});
teste = Ti.UI.createView({
left : 0,
bottom : 0,
opacity : .7,
backgroundColor : "#3d3d3d",
height : 55
});
var button1 = Ti.UI.createButton({
title : "button 1",
left : 0,
width : Titanium.Platform.displayCaps.platformWidth * 0.3
});
var button2 = Ti.UI.createButton({
title : "button 2",
left : Titanium.Platform.displayCaps.platformWidth * 0.33,
width : Titanium.Platform.displayCaps.platformWidth * 0.3
});
var button3 = Ti.UI.createButton({
title : "button 3",
left : Titanium.Platform.displayCaps.platformWidth * 0.66,
width : Titanium.Platform.displayCaps.platformWidth * 0.3
});
view.add(button1);
view.add(button2);
view.add(button3);
self.add(view);
return self;
}
module.exports = FirstWindow;
Doing this... you are positioning the buttons in the View.
The first button ( button1 ) begins in "left: 0" and has a width of 30% of the View.
The second button ( button2 ) begins after the first button plus a space, and so on...
And the height of them is the same as the view's.