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.
Related
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.
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);
});
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);
});
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.
Hello friends I am creating an app in sencha touch 2.0 in which i have added a search button to the toolbar.Now i want open a search field with transparent background like the below image.
While i run my project the logcat indicates me that error is in controller file.Below i am adding my controller class.
Ext.define('MyApp.controller.search',{
extend: 'Ext.app.Controller',
config: {
refs: {
groupList: "groupList"
},
control: {
groupList: {
searchField: "searchField"
}
}
},
searchField: function(){
// console.log("SearchField Tapped");
if ( ! this.searchView)
{
this.searchView = this.render({
xtype: 'searchView',
});
var cancelSearchBtn = this.searchView.query('#'+cancelSearchBtn)[0];
cancelSearchBtn.setHandler(function(){
this.searchView.hide();
}, this);
}
this.searchView.show({
type: 'slide',
direction: 'up',
duration: 500,
});
},
launch: function(){
alert('Hello search');
},
});
I am getting the following error in logcat:-
TypeError: Result of expression 'this.render' [undefined] is not a function. at
file:///android_asset/www/app/controller/SearchController.js:18
Help me to get rid of the problem.
Thanx in advance.
There is no render method inside the controller. You need to create an instance of that component and then add it to the container you want it visible in (normally called Main).