containingTab cause on undefined is not an object - titanium

In my titanium based application,My navigation flow as like the following
HomeVu -> Subvu1 -> Subvu2
While am trying to navigate from Subvu1 view to Subvu2 it shows an error that
Script Error
{
backtrace = "#0 () at :0";
line = 40;
message = "'undefined' is not an object (evaluating 'ReportSubWindow.containingTab.open')";
name = TypeError;
sourceId = 300153536;
sourceURL = "file:///Users/administrator/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/9A6B5752-F198-48AC-9E23-2A0DC31A2BD2/test.app/SubVu/text.js";
}
Here the code
HomeVu
button2.addEventListener('click', function()
{
var FindAnExpertSubWindow = require('SubVu/email');
self.containingTab.open(new FindAnExpertSubWindow('My Mail'));
});
Subvu1
function FindAnExpertSubWindow(title)
{
var findAnExpertSubWin = Ti.UI.createWindow({
backgroundColor : 'white', });
var button1 = Ti.UI.createButton({
backgroundImage: 'ui/images/Untitled.png',
height:32,
width:87,
top:90,
left:115,
});
button1.addEventListener('click', function()
{
var FindAnExpertSubWindow = require('SubVu/email');
findAnExpertSubWin.containingTab.open(new FindAnExpertSubWindow('My Mail'));
});
findAnExpertSubWin.add(button1);
return findAnExpertSubWin;
};
module.exports = FindAnExpertSubWindow;
Subvu2
function ReportSubWindow(title)
{
var reportSubWin = Ti.UI.createWindow({
backgroundColor : 'black',
});
return reportSubWin;
};
module.exports = ReportSubWindow;
How to navigate from Subvu1 to Subvu2?

When you are creating Subvu1 window you have to set containingTab property the same way as you do in HomeVu window. Your code example is missing that part of code but probably it could look like this:
HomeVu
button2.addEventListener('click', function() {
var FindAnExpertSubWindow = require('SubVu/email');
self.containingTab.open(new FindAnExpertSubWindow('My Mail', self.containingTab));
});
Subvu1
function FindAnExpertSubWindow(title, containingTab) {
var findAnExpertSubWin = Ti.UI.createWindow({
backgroundColor : 'white',
containingTab: containingTab,
});
/* ... */
});
Another way of solving is to stop passing reference to Tab object between every Window and just create one global object, which you will use for opening new windows.
If it doesn't help, post more example code.

Related

Close NavigationWindow (modal ) from another js file in Titanium IOS7

I am migrating a current project to 3.1.3 . I need a close button on the modal window so i had to use a NavigationWindow as suggested in the IOS7 migration guide. Here is what i have
btnSubscription.addEventListener('click', function(e) {
Ti.API.info('Subscription Button Clicked.');
openWindow("paymentsubscription.js", "Subscription");
});
function openWindow(url, title) {
var win = Ti.UI.createWindow({
url : url,
backgroundColor : 'white',
modal : true,
title : title
});
if (Titanium.Platform.osname !== "android") {
var winNav = Ti.UI.iOS.createNavigationWindow({
modal: true,
window: win
});
}
if (Titanium.Platform.osname !== "android") {
winNav.open();
}
else {
win.open();
}
}
Now on paymenttransaction.js i was previously doing this when i was using titanium 2.x
var mainWindow = Ti.UI.currentWindow;
var mainWinClose = Ti.UI.createButton({
style : Ti.UI.iPhone.SystemButtonStyle.DONE,
title : 'close'
});
if (Titanium.Platform.osname !== "android") {
mainWinClose.addEventListener('click', function() {"use strict";
mainWindow.close();
});
responseWindow.setRightNavButton(responseWinRightNavButton);
mainWindow.setRightNavButton(mainWinClose);
}
The problem i am facing is that i need to close winNav in the case of IOS and not win anymore. In paymenttransaction.js i was previously using
var mainWindow = Ti.UI.currentWindow;
But now i need to close the navigation window(winNav) and this does not hold good anymore. Is there anyway to do this? . Is there a Ti.UI.currentWindow equivalent for NavigationWindow ?
You aren't using the navigationWindow properly. You shouldn't be calling open() on a window when you use one.
You are looking for:
`winNav.openWindow(yourWindow)
Also when you are creating a new window, pass a pointer to your navigationWindow in the constructor, then you can close the window properly. Don't create a window like that use CommonJS's require() to return your window:
paymenttransaction.js:
function paymentTransactionWindow(navGroup, otherArgs) {
var mainWinClose = Ti.UI.createButton({
style : Ti.UI.iPhone.SystemButtonStyle.DONE,
title : 'close'
});
var win = Ti.UI.createWindow({
url : url,
backgroundColor : 'white',
modal : true,
title : title,
rightNavButton: mainWinClose
});
if (Titanium.Platform.osname !== "android") {
mainWinClose.addEventListener('click', function() {
navGroup.closeWindow(win);
});
return win;
}
module.exports = paymentTransactionWindow;
Then in your previousWindow:
PaymentTransactionWindow = require('/paymentTransactionWindow); //the filename minus .js
var paymentTransactionWindow = new PaymentTransactionWindow(winNav, null);
mainNav.openWindow(paymentTransactionWindow);
watch some of the videos on commonJS: http://www.appcelerator.com/blog/2011/08/forging-titanium-episode-1-commonjs-modules/

titanium display hundreds of rows with tableviewrow

using these lines of code I can display aproximately hundreds of tableviewrows in a tableview. The problem is that the window is opening in 3 seconds (android device). I guess there's some optimization I have to do in order to display the table in less than 1 sec.
any advice about it?
thanks in advance
EDIT
lines of code
module.exports.draw = function(){
els = [];
var cocktails = Ti.App.cocktails;
for(var i=0;i<cocktails.length;i++){
els.push({
type: 'Ti.UI.View',
searchableText : cocktails[i].nome,
properties : {
cocktail_id:cocktails[i].id,
borderColor:"#eee",
borderWidth: 1,
height: 100,
nome:cocktails[i].nome
},
childTemplates : [
{
type: 'Ti.UI.Label',
bindId : cocktails[i].id,
properties : {
text: cocktails[i].nome,
cocktail_id:cocktails[i].id,
color:"#000",
left:30,
zIndex:10,
top:10,
font:{
fontSize:20,
fontWeight:'bold'
}
},
events : {
click : function(e) {
Ti.App.fireEvent("render",{pag:'prepare',id:e.bindId});
}
}
},
{
type : 'Ti.UI.Label',
properties : {
left:30,
color:"#999",
top:50,
cocktail_id:cocktails[i].id,
text:cocktails[i].ingTxt != undefined?cocktails[i].ingTxt:''
},
bindId:cocktails[i].id,
events : {
click : function (e){
Ti.App.fireEvent("render",{pag:'prepare',id:e.bindId});
}
}
}
]
});
}
var search = Ti.UI.createSearchBar({
height:50,
width:'100%'
});
search.addEventListener('cancel', function(){
search.blur();
});
var content = Ti.UI.createListView({sections:[Ti.UI.createListSection({items: els})],searchView:search});
search.addEventListener('change', function(e){
content.searchText = e.value;
});
return content;
};
You need to look into lazy loading
http://www.appcelerator.com/blog/2013/06/quick-tip-cross-platform-tableview-lazy-loading/
As thiswayup suggests, lazy loading would probably be a very good idea.
If you do not wan't to use lazy loading you could do this:
function getListWindow( items ) {
var firstLayout = true;
var win = Ti.UI.createWindow({
//Your properties here.
});
var list = Ti.UI.createTableView({
data : [],
//other properties here
});
win.add(list);
win.addEventListener('postlayout', function() {
if(firstLayout) {
firstLayout = false;
var rows = [];
//Assuming the items argument is an array.
items.forEach(function( item ) {
rows.push( Ti.UI.createTableViewRow({
//Properties here based on item
}));
});
list.data = rows;
}
});
return win;
}
Doing this will open your window right away and load the rows after the window is shown. Showing a loader while the rows are being generated would probably be a good idea.

How to load another js file on a button click in titanium

I have App.js
(function() {
Window = require('ui/tablet/ApplicationWindow');
}
new Window().open();
})();
From there ApplicationWindow.js is loaded.
In ApplicationWindow.js
function ApplicationWindow() {
//load component dependencies
var FirstView = require('ui/common/FirstView');
//create component instance
var self = Ti.UI.createWindow({
backgroundColor:'#ffffff'
});
var win2 = Titanium.UI.createWindow({
backgroundColor: 'red',
title: 'Red Window'
});
//construct UI
var firstView = new FirstView();
var nav = Titanium.UI.iPhone.createNavigationGroup({
window: win2
});
win2.add(firstView);
self.add(nav);
self.open();
//self.add(firstView);
if (Ti.Platform.osname === 'ipad') {
self.orientationModes = [Ti.UI.LANDSCAPE_LEFT] ;
};
return self;
}
//make constructor function the public component interface
module.exports = ApplicationWindow;
I get a view with 2 textfields and a button login in FirstView.js.The view has a navigation bar with title Red Window. I want to load Home.js on loginButton Click.
Here is the loginButtonClick Code :
loginButton.addEventListener ('click', function(e){
//navigate to Home.js
});
How can I do that.Can anyone please help me out.
Try the following method in your current file
loginButton.addEventListener('click', function(e){
var win = Ti.UI.createWindow({
backgroundColor : 'white',
url : 'home.js' //Path to your js file
});
win.open();
});
home.js
var myWin = Ti.UI.currentWindow;
//You can add your controls here and do your stuff.
// Note that never try to open myWin in this page since you've already opened this window
You can also try the following method
Method 2
//In your current page
loginbutton.addEventListener('click', function(e) {
var Home = require('/ui/common/Home');
var homePage = new Home();
homePage.open();
});
Your Home.js file
function Home() {
var self = Ti.UI.createWindow({
layout : 'vertical',
backgroundColor:'white'
});
//Do your stuff here
//Add other controls here
return self;
}
module.exports = Home;
Look at this answer, it's also same as your question

Trouble with EventListener in Titanium Studio

I am having trouble trying to add an Event Listener to my button. Here is what I have in my code.
var TabGroup = Titanium.UI.createTabGroup();
var Maps = Titanium.UI.createWindow({
backgroundImage:'/images/Background2.jpg'
});
var tab1 = Titanium.UI.createTab({
title: 'Maps',
icon: '/KS_nav_ui.png',
window: Maps
});
var scrollView = Titanium.UI.createScrollView({
contentWidth:'auto',
contentHeight:'auto',
top:0,
showVerticalScrollIndicator:false,
showHorizontalScrollIndicator:false
});
var view = Ti.UI.createView({
height:495,
width:300
});
var btnInnovations = Ti.UI.createButton({
height:75,
width:Titanium.UI.FILL,
backgroundImage:'/images/Innovations.jpg',
top:60
});
var btnOaks = Ti.UI.createButton({
height:75,
width:Titanium.UI.FILL,
backgroundImage:'/images/Oaks Campus.jpg',
top:145
});
var btnWHQ = Ti.UI.createButton({
height:75,
width:Titanium.UI.FILL,
backgroundImage:'/images/WHQ.jpg',
top:230
});
var btnRiverport = Ti.UI.createButton({
height:75,
width:Titanium.UI.FILL,
backgroundImage:'/images/Riverport.jpg',
top:315
});
var btnContinuous = Ti.UI.createButton({
height:75,
width:Titanium.UI.FILL,
backgroundImage:'/images/Continuous.jpg',
top:400
});
view.add(btnInnovations);
view.add(btnOaks);
view.add(btnWHQ);
view.add(btnRiverport);
view.add(btnContinuous);
scrollView.add(view);
Maps.add(scrollView);
TabGroup.addTab(tab1);
TabGroup.open();
btnInnovations.addEventListener('click', function(e){
var InnovationsFloors = Titanium.UI.createWindow({
title: 'Innovations Floors',
url:'InnovationsFloors.js'
});
InnovationsFloors.open({modal : true, backgroundImage:'images/Background1.jpg'});
The error I get in the emulator says cannot call method open of undefined and if I take out the Titanium.UI.currentTab.open(InnovationsFloors,{animation:true}); it won't even register the click...
First of all you cant have spaces in the name of your Window url field, rename your Innovations Floors.js file to InnovationsFloors.js.
Second part is that the attributes you are passing in to the open() command are not supported, it should be animated not animation, even so, you should not use this in this fashion, I refer you to the docs on this one.
Instead just do this:
Titanium.UI.currentTab.open(InnovationsFloors);
Or try this:
TabGroup.activeTab.open(InnovationsFloors);
If that doesn't work then it means you have not called open on your TabGroup so there is no current tab.
You could also always just try this and open a modal:
InnovationsFloors.open({modal : true});
if you want to open a window with a button try this works for me
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});
var label1 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 1',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
var button = Titanium.UI.createButton({
title: 'Hello',
top: 10,
width: 100,
height: 50
});
win1.add(button)
win1.add(label1);
button.addEventListener('click', function(e){
var win = Titanium.UI.createWindow({
title:'New Window',
backgroundColor:'#fff'
});
win.open();
});
tabGroup.addTab(tab1);
// open tab group
tabGroup.open();

Titanium Mobile: cant navigate between pages

i am new to Titanium and i am have 2 seemingly simple problems while trying to use it for the Android.
1) i am trying to navigate to the next page on click of a button. but instead it is showing me a blank black screen. i know my second page CreateNewMeetup.js is correct because i tried displaying it as the landing page of my app and it works. my codes are as follows:-
ApplicationWindow.js
...
var button = Ti.UI.createButton({
height:44,
width:'auto',
title:'Create New Meetup',
top:20
});
self.add(button);
button.addEventListener('click', function() {
var newWindow = Ti.UI.createWindow({
url : "/ui/common/CreateNewMeetupWindow.js",
fullscreen: false
});
newWindow.open();
});
return self;
CreateNewMeetupWindow.js
//CreateNewMeetUpView Component Constructor
function CreateNewMeetupWindow() {
var self = Ti.UI.createWindow({
layout : 'vertical',
backgroundColor:'white'
});
var contactsField = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
width : 400,
height : 60
});
self.add(contactsField);
var locationField = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
width : 400,
height : 60
});
self.add(locationField);
var lblNotifyMe = Ti.UI.createLabel({
color : 'black',
text : 'Notify me when s/he is',
textAlign : Ti.UI.TEXT_ALIGNMENT_LEFT,
width : 'auto',
height : 'auto'
});
self.add(lblNotifyMe);
var btnGo = Ti.UI.createButton({
title : 'Go',
height : 'auto',
width : 100
});
btnGo.addEventListener('click', function() {
// Check console
Ti.API.info('User clicked the button ');
});
self.add(btnGo);
return self;
};
2) after installing the app onto my device, i tried to launch it. the app shows momentarily (about 3 seconds maybe) and then it shuts down by itself. i guess its an app crash? but it works well on the emulator.
Titanium experts please help :$
You can use the following methods in your program to navigate between windows
Method 1
//Your app.js file
var button = Ti.UI.createButton({
height:44,
width:'auto',
title:'Create New Meetup',
top:20
});
self.add(button);
button.addEventListener('click', function() {
//By doing this you're opening a new window
var newWindow = Ti.UI.createWindow({
url : "ui/common/CreateNewMeetupWindow.js",//Provide the correct path here
fullscreen: false
});
newWindow.open();
});
//Your CreateNewMeetupWindow.js file
var newWindow = Ti.UI.currentWindow;
var contactsField = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
width : 400,
height : 60
});
newWindow.add(contactsField);
//You can add other controls here just like I added the contactsField
Method 2
var button = Ti.UI.createButton({
height:44,
width:'auto',
title:'Create New Meetup',
top:20
});
self.add(button);
button.addEventListener('click', function() {
var window = require('/ui/common/CreateNewMeetupWindow');
var newWindow = new window();
newWindow.open();
});
//Your CreateNewMeetupWindow.js file
function CreateNewMeetupWindow() {
var self = Ti.UI.createWindow({
layout : 'vertical',
backgroundColor:'white'
});
var contactsField = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
width : 400,
height : 60
});
self.add(contactsField);
//Add other controls here
return self;
}
module.exports = CreateNewMeetupWindow;
You can use any single method from above. Do not mix the methods together.
You can use the following link for references
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Window-property-url
http://docs.appcelerator.com/titanium/latest/#!/api/Global-method-require
For your first problem, you are using the url property with a CommonJS object. So instead instantiate your window like this:
var newWindow = require("/ui/common/CreateNewMeetupWindow");
newWindow.open();
You would use the url property if your CreateNewMeetupWindow.js was not a CommonJS module.
Not sure what your second problem is, check your device logs and crash reports, otherwise there is no way to know what is going on.