How to change the font-color in a TableView. Other elements can be changend with the color attribute.
When i run the app on my Android Phone the table is displayed, but the font-color is still grey/white. There are also no table borders. I want to set the color to black.
// create an array of anonymous objects
var tbl_data = [
{title:'Row 1'},
{title:'Row 2'},
{title:'Row 3'}
];
// now assign that array to the table's data property to add those objects as rows
var table = Ti.UI.createTableView({
data:tbl_data,
color: '#000000'
});
amountView.add(table);
According to Titanium docs; TableView does not have color property.
What you can do is create TableViewRow and add them to TableView; and finally applying TableViewRow's color property. Example below:
var tableData = [],
win = Ti.UI.createWindow();
tableData.push(Ti.UI.createTableViewRow({ title: 'Apples', color : "#000" }));
tableData.push(Ti.UI.createTableViewRow({ title: 'Bananas', color : "#000" }));
tableData.push(Ti.UI.createTableViewRow({ title: 'Carrots', color : "#000" }));
tableData.push(Ti.UI.createTableViewRow({ title: 'Potatoes', color : "#000" }));
var table = Ti.UI.createTableView({
data: tableData
});
win.add(table);
win.open();
Related
I generate a tableView in a loop, and i put a label in each row, which has different length of text each time. I set the rows' height like this:
height : Ti.UI.SIZE,
and it works pretty good, the rows' heights are always big enough to display the full text. But when i swipe up and down, the rows' heights changes for no reason: they become very big or very small, and i have no idea why. I'll paste in the code snippet that causes the problem. It only works bad on Android, it works perfectly on mobileweb.
var i = 0;
var tableList = Ti.UI.createTableView({
separatorColor : '#fef3ff',
top:'88',
});
var tableCategoryData = [];
while(i<answer.QuestionList.length)
{
var label = Ti.UI.createLabel({
text:answer.QuestionList[i].CategoryTitle,
color : '#000000',
font:{
color:'#000000',
fontSize:'20sp',
},
textAlign:Ti.UI.TEXT_ALIGNMENT_LEFT,
left : 13,
top:'10dp',
});
var rowouter = Ti.UI.createView({
bottom:'10dp',
touchEnabled: true,
height:Ti.UI.SIZE,
backgroundColor:'#fef3ff',
});//Andris
var row = Ti.UI.createTableViewRow({
className: 'row',
objName: 'row',
touchEnabled: true,
height:rowouter.height,
color: "#000000",
font : {
color : '#000000'
},
backgroundColor:'#fef3ff',
});
rowouter.add(label);
row.add(rowouter);
tableCategoryData.push(row);
++i;
}
tableList.setData(tableCategoryData);
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);
});
I have created Map view using following code
var map = Ti.Map.createView({
mapType:Titanium.Map.STANDARD_TYPE,
regionFit: true,
animate: true,
touchEnabled: true,
userLocation:true,
region:{
latitude: 19.076719,
longitude: 72.878583,
latitudeDelta:0.5,
longitudeDelta:0.5
}
});
I am creating Annotation using following code
var pin = Ti.Map.createAnnotation({
latitude:19.076719,
longitude:72.878583,
title: "Dronzer",
image:"pin.png"
});
map.addAnnotation(pin);
Question: How to replace this image with number "12" to show it on map?
After few days some how I have found the solution.
Create a Label
var price = Ti.UI.createLabel({
text : " "+data.price,//Number=12 Input from server
color : 'black',
font : {fontSize:'15dp',font:"monospace",fontWeight:"bold"},
height : '30dp',
width : '30dp',
left: '50%',
backgroundImage:"red_pin1.png",
});
Create an ImageView and set its image property as a blob.
var anImageView = Ti.UI.createImageView({
image : price.toImage(), //setting label as a blob
width : 'auto',
height : 'auto',
});
Create an Annotation and set its image property as blob.
var pin = Ti.Map.createAnnotation({
myid:data._id,
latitude:data.latitude,
longitude:data.longitude,
title: data.vendor_name,
image:anImageView.toBlob() //setting ImageView as blob
});
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.
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.