I'm new with titanium. Can you please suggest me for edit android listview in titanium.
list items get from server database. I want to edit any row and update to database table. I already get the data/list items from database and showing as list view on a tabgroup in tab1. Now I want to edit any list item and update to database . for example, edit any name from list and update to database.
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'List',
window:win1
});
var scrollView = Ti.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'auto',
scrollType: 'horizontal',
height: 'auto',
width: 'auto'
});
var section = Ti.UI.createListSection();
var listView = Ti.UI.createListView
({
sections: [ section ],
searchView: search,
editing: true,
caseInsensitiveSearch: true,
pruneSectionsOnEdit : true,
width:'100%'
});
var ajax = Ti.Network.createHTTPClient();
ajax.onerror = function(e){
alert('Error');
};
ajax.onload = function(){
Titanium.API.info(this.responseText);
var data = this.responseText;
var jdata = JSON.parse(data);
if(jdata.success){
rows=jdata.data;
var dataArr = [];
for(i=0; i< rows.length; i++){
dataArr[i]={ properties: { title: rows[i].name, canEdit: true, canMove: true}};
}
console.log(dataArr);
section.setItems(dataArr);
}
else{
alert(jdata.msg);
}
};
ajax.open('POST', 'http://www.examples.com/get-users.php');
scrollView.add(listView);
win1.add(scrollView);
abGroup.addTab(tab1);
Once you have populated your list, if you want to update a certain row you should :
get the item from the section
update the field of the item
update section
Here is some code:
var item = section.getItemAt(index) //You should know the position
// do a check loop or save a hashmap
item["title"]["text"] = "new title"
section.updateItemAt(index, item)
//Extract the model now, update and save
var model = getModel() //TODO this function
model.set({"title": "new title"})
model.save()
Related
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.
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);
});
While working with Titanium application, came across a situation where I want to change image of Spinner (i.e. Picker in Titanium)
Taking Picker's object I'm able to create spinner and manipulate data but not finding any mechanism which change the default image of spinner
Thinking to do like this replace-picker-with-button
any other idea?
You can directly change image of the spinner by its backgroundImage property.
For Example
backgroundImage: '/images/dropdown.png.
It will only work for Android and did not work with iPhone.
So if you want to make same UI for both Ios and Android then you can follow below trick.
Here is the global method which you can use to create and display Picker.
/*
pickerData: is the array of the values which you want to display in the picker
funName: is the callback function which will be called when user will select the row from picker. this function will have two parameters first will be selected row's text and second is the index of the selected row
title: is the title of the picker
index: is the default selected index in the picker
*/
function showPicker(pickerData, funName, title, index) {
if (title == undefined || title == "") {
title = "";
}
if (pickerData == undefined || pickerData == null) {
pickerData = [];
}
index = index || 0;
if (pickerData.length <= index || index < 0) {
index = 0;
}
var selectedCategory = pickerData[0];
var win = Ti.UI.createWindow({
backgroundColor : 'transparent',
});
//Check weather the Os is IOs or Android
//globals.isIos is the parameter which is indicating that current OS is IOs or not?
if (globals.isIos) {
var picker = Ti.UI.createPicker({
selectionIndicator : true,
bottom : 0,
width : '100%',
isSpinner : true,
});
data = [];
for (var p = 0; p < pickerData.length; p++) {
data.push(Ti.UI.createPickerRow({
title : pickerData[p],
index : p
}));
}
picker.add(data);
Ti.API.info("Tab Index" + index);
picker.setSelectedRow(0, index, true);
var selectedIndex = 0;
picker.addEventListener('change', function(e) {
selectedCategory = e.row.title;
selectedIndex = e.row.index;
});
//toolbar
var done = Titanium.UI.createButton({
title : 'Done',
style : Titanium.UI.iPhone.SystemButtonStyle.DONE,
});
done.addEventListener('click', function(e) {
funName(selectedCategory, selectedIndex);
win.close();
});
var title = Titanium.UI.createLabel({
text : title,
textAlign : 'left',
color : 'white',
font : {
fontWeight : 'bold',
fontSize : globals.isIpad ? 18 : "14dp"
}
});
var flexSpace = Titanium.UI.createButton({
systemButton : Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
var toolbar = Titanium.UI.iOS.createToolbar({
items : [title, flexSpace, done],
bottom : 216,
borderTop : true,
borderBottom : false,
barColor : '#3F3F3F'
});
win.addEventListener('click', function(e) {
win.close();
});
win.add(picker);
win.add(toolbar);
win.open();
} else {
var pickerView = Titanium.UI.createOptionDialog({
selectedIndex : index
});
pickerView.title = title;
data = [];
for (var p = 0; p < pickerData.length; p++) {
data.push(pickerData[p]);
};
pickerView.options = data;
pickerView.addEventListener('click', function(e) {
selectedCategory = pickerData[e.index >= 0 ? e.index : index];
funName(selectedCategory, e.index >= 0 ? e.index : index);
});
pickerView.show();
}
return win;
}
Now create one button or lable inside your window and set the dropdown image to its background.
So it will look like dropdown now handle click of the button and put below code in it.
var data = ["Android", "IOS", "Blackberry", "Windows"];
function callback(title, index) {
Ti.API.info('Selected title=' + title + ' index=' + index);
}
var defaultSelected = 1;
//Here functions is the global file in which my showPicker method is defined.
var pickerShow = functions.showPicker(data, callback, "Mobile OS", defaultSelected);
//Here globals is the file in which my isIos variable is defined.
if (globals.isIos) {
pickerShow.open();
}
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.