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);
});
Related
I'm building an app and I have problems with date and time pickers. I want to autocomplete 2 textfields with the date and the time selected.
My first problem is : when I click on the textfield for the date, it's selected, but I need to click another time to launch the datePicker.
And the second problem is with the timePicker : on click on the textField (also 2 times), the picker appears under my window. When I close this window, my timePicker is here ... but not at the good place ! So, I can't select the time.
Here's my code :
var date_container = Ti.UI.createView({ layout:'horizontal', top:0, width:textfields_width, height:Ti.UI.SIZE });
var datePicker = Ti.UI.createPicker({ type: Ti.UI.PICKER_TYPE_DATE });
var flight_date = Ti.UI.createTextField({
editable: false,
width:textfields_width/2,
height: textfields_height,
hintText:"Date",
top:textfields_top+35
});
date.addEventListener('click', function(e) {
datePicker.showDatePickerDialog({
value : new Date(), // some date
maxDate : new Date(),
callback : function(e) {
if (e.value) {
date.value = String.formatDate(e.value, 'medium');
day_timestamp.value = e.value.getTime();
}
}
});
});
date_container.add(date);
var timePicker = Ti.UI.createPicker({ type: Ti.UI.PICKER_TYPE_TIME });
var time = Ti.UI.createTextField({
editable: false,
width:textfields_width/2,
height: textfields_height,
hintText:"Heure",
top:textfields_top+35
});
time.addEventListener('click', function(e) {
timePicker.showTimePickerDialog({
format24: true,
callback : function(e) {
if (e.value) {
time.value = String.formatTime(e.value, 'medium');
hour_timestamp.value = e.value.getTime();
}
}
});
});
date_container.add(time);
main_container.add(date_container);
Could you help me ? Thanks :)
First problem - Add the methods for showing the pickers also on 'focus' event. They are triggered before 'click' when you tap on the text fields the first time. Once you have focus then 'click' will be triggered (and only that since you are not changing the focus). That may cause a problem if one the text fields is automatically focused when the window loads, but you can simply add a boolean flag to take care of the initial focus.
Second problem - Workaround for showing the time picker on the right place is to add it to the window manually before calling 'showTimePickerDialog'. Just make sure it does not show on the screen.
var textfields_width = 300;
var textfields_height = 80;
var textfields_top = 80;
// Boolean flag in case you want to prevent
// any of the pickers to show immediately
var initialLoad = true;
var main_container = Titanium.UI.createWindow({});
var date_container = Ti.UI.createView({
layout:'horizontal',
top:0,
width:textfields_width,
height:Ti.UI.SIZE
});
var datePicker = Ti.UI.createPicker({
type: Ti.UI.PICKER_TYPE_DATE
});
var date = Ti.UI.createTextField({
editable: false,
width:textfields_width/2,
height: textfields_height,
hintText:"Date",
top:textfields_top+35
});
var timePicker = Ti.UI.createPicker({
type: Ti.UI.PICKER_TYPE_TIME,
//make sure the time picker is not showing when you add it
top: -1000,
left: -1000
});
var time = Ti.UI.createTextField({
editable: false,
width:textfields_width/2,
height: textfields_height,
hintText:"Heure",
top:textfields_top+35
});
//add the time picker to the main container
main_container.add(timePicker);
date_container.add(date);
date_container.add(time);
main_container.add(date_container);
main_container.open();
datePickerListener = function(e) {
//guarding if the focus is on the textfield
if (!initialLoad) {
datePicker.showDatePickerDialog({
value : new Date(), // some date
maxDate : new Date(),
callback : function(e) {
if (e.value) {
date.value = String.formatDate(e.value, 'medium');
}
}
});
}
initialLoad = false;
}
timePikcerListener = function(e) {
timePicker.showTimePickerDialog({
format24: true,
callback : function(e) {
if (e.value) {
time.value = String.formatTime(e.value, 'medium');
}
}
});
}
date.addEventListener('focus', datePickerListener);
date.addEventListener('click', datePickerListener);
time.addEventListener('focus', timePikcerListener);
time.addEventListener('click', timePikcerListener);
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
I'm a newbie in Titanium and web development. I uploaded some images to the Titanium Cloud Service (ACS) and wanna display them on my app. Below is my code. It runs, but I don't see any photos except for the title and back button. Can someone take a look at my code and give me some hint on what I'm missing? Thank you for your time!
//Import the module
var Cloud = require('ti.cloud');
Cloud.debug = true; // optional; if you add this line, set it to false for production
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
exports.getAlbumWin = function() {
//create window
var album_window = Titanium.UI.createWindow({
backgroundColor:'#FFF',
title: "Travel Diary"
});
//create title
var title = Titanium.UI.createLabel({
text: "All Trip Photos Submitted by Our Users",
top:10,
color: '#008000',
textAlign: 'center',
font: {fontSize:50}
});
var tableView = Ti.UI.createTableView({
top: '5%',
scrollable: true,
width: '100%',
minRowHeight: '500',
bottom: '10%',
});
//Get diary entries, add them to the table view and display it
Cloud.Photos.query({
page: 1,
per_page: 10
}, function(e) {
var row, dateLabel, placeLabel, reviewLabel;
var displayData = [];
if (e.success){
alert('Count: '+e.photos.length);
for (var i=0; i<e.photos.length; i++) {
var photo = e.photos[i];
var image2 = photo.urls.square.toImage();
//create imageView
var photoView = Ti.UI.createImageView({
image: image2
});
//photo.urls.square
displayData.push(photoView);
}
tableView.setData(displayData);
} else {
alert('Error:\n' + ((e.error && e.message) || JSON.stringify(e)));
}
});
//add a 'back' button
var back_button = Titanium.UI.createButton({
title: "Back",
height:160,
left:40,
right:40,
bottom: '0%'
});
//Add Event Listener
back_button.addEventListener('click', function(){
//call an export function
var win = require('home').getHomeWin;
//create new instance
var nextWin = new win();
nextWin.open();
});
album_window.add(title);
album_window.add(tableView);
album_window.add(back_button);
return album_window;
};
In appcelerator docs you can see what is image property of a Ti.UI.imageView,
image : (String/Titanium.Blob/Titanium.Filesystem.File)
Image to display, defined using a local filesystem path, a File
object, a remote URL, or a Blob object containing image data. Blob and
File objects are not supported on Mobile Web.
So you could, use url as it is.
Try like this,
var image2 = photo.urls.square_75;
(Use as this unless you have specified a Custom Photo Size named square).
Look here for more information about "urls" property of Cloud photo object.
My titanium sample code is as follows,
My Main File,
which creates tabs is as follows ,
globals.tabs = new AppTabGroup(
{
title: 'Waiting',
icon: 'images/KS_nav_ui.png',
window: new ListWindow({
title: 'Waiting',
backgroundColor: '#fff',
navBarHidden: false,
isDone: 0,
activity: {
onCreateOptionsMenu: function(e) {
var menu = e.menu;
var menuItem = menu.add({ title: "Add Customer" });
menuItem.setIcon("images/ic_menu_add.png");
var menuItem1 = menu.add({ title: "Settings" });
menuItem1.setIcon("images/ic_menu_add.png");
menuItem.addEventListener("click", function(e) {
new AddWindow().open();
});
}
}
})
},
{
title: 'Done',
icon: 'images/KS_nav_views.png',
window: new ListWindow({
title: 'Done',
backgroundColor: '#fff',
navBarHidden: false,
isDone: 1
})
}
);
The new AppTabGroup just creates one tab group and adds these two tabs + it sets currentab
So by default , my Waiting tab remains in focus,
The new ListWindow is described as follows,
exports.ListWindow = function(args) {
var AddWindow = require('ui/AddWindow').AddWindow;
var self = Ti.UI.createWindow(args);
var tableview = Ti.UI.createTableView();
setTableHandle(tableview);
var isDone = args.isDone;
Ti.API.info("isDOne chi value: " + isDone);
self.add(tableview);
tableview.addEventListener('click', function(e) {
createConfirmDialog(e.row.id, e.row.title, isDone).show();
});
Ti.App.addEventListener('app:updateTables', function() {
//tableview.setData(getTableData(isDone));
tableview.setData(o9Data);
});
return self;
};
Now by default tableview data (o9Data in above code) ( fetched from httpclient) is always set to second tab,
I changed value of isDone but it's not working
Any help is appreciated
Here is screenshot of second with data ,
Finally found solutions to this ,
since this is common code for all tabs and i used following line,
setTableHandle(tableview);
which just set's tableview variable for setting data to table, this get's overridden by last tab and therefore i was not able to add values to first or all(except last) tab.