How to get Scrollableview child elements values I am giving sample get when even listener performed? - titanium

I am facing this problem how to get the values of child elements any one please help me I am sharing my code in below. I have a scrollableView and on its scrollend eventListener I would like to get the ImageViewID.
var scrollableView = Ti.UI.createScrollableView({
});
var data=[];
for(var i=0;i<10;i++){
var view = Ti.UI.createView({
});
var scrollView = Ti.UI.createScrollView({
});
var imageView = Ti.UI.createImageView({
image:i+".png",
imageId:i,
});
scrollView.add(imageView);
view.add(scrollView);
data.push(view);
}
scrollableView.add(data);
scrollableView.addEventListener('scrollend',function(e){
/*I will get the imageView Id and image value how any one reply me I am not getting */
Ti.API.info('e.source.imageId'+e.source.imageId);/* I tried but it's not working*/
});

You can simply get the imageId by using the following code :
scrollableView.addEventListener('scrollend',function(e){
    /*I will get the imageView Id and image value how any one reply me I am not getting  */
    Ti.API.info('imageId' + e.view.children[0].children[0].imageId); /* I tried but it's not working*/
});
EDIT
What happens above can be bifurcated as below :
e.view => Is the first View in the for loop
var view = Ti.UI.createView({
});
children[0] => Is the scrollView in the view above.
var scrollView = Ti.UI.createScrollView({
});
children[0].imageId => Is the ImageView and now we can access all
the properties of this element.
var imageView = Ti.UI.createImageView({
image:i+".png",
imageId:i,
});
Good Luck, Cheers
Ashish Sebastian

Related

Slide between two files in Titanium

I have done a slide between three windows using scrollView:
var scrollView = Ti.UI.createScrollableView({
views:[viewDatos,viewDependientes,viewAsistencia]
});
Can I make a slide between two files .js in a Titanium app that I'm developing?
I think you want to create a tour or walk through window then do like this
var win = Ti.UI.createWindow();
var view1 = Ti.UI.createView({ backgroundColor:'#123' });
var view2 = Ti.UI.createView({ backgroundColor:'#246' });
var view3 = Ti.UI.createView({ backgroundColor:'#48b' });
var scrollableView = Ti.UI.createScrollableView({
views:[view1,view2,view3],
showPagingControl:true
});
win.add(scrollableView);
win.open()
Thanks

how to remove keyboard when user click any where in window?

can you please tell me how to hide the keyboard in IOS when user click anywhere in window.I used blur() on button click it work but when i used in view it not work..:(
I check if user click any where other than textfield it hide the keyboard my my logic fail..:(
Here is my code..
//FirstView Component Constructor
function FirstView() {
//create object instance, a parasitic subclass of Observable
var self = Ti.UI.createView({
layout:"vertical"
});
var self1 = Ti.UI.createView({
layout:"horizontal",
top:20,
height:Ti.UI.SIZE
});
var self2 = Ti.UI.createView({
layout:"horizontal",
top:10,
height:Ti.UI.SIZE
});
//label using localization-ready strings from <app dir>/i18n/en/strings.xml
var nameLabel=Ti.UI.createLabel({
text:"Name",
left:15,
width:100,
height:35
});
var nameTextField=Ti.UI.createTextField({
height:35,
width:140,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
self1.add(nameLabel);
self1.add(nameTextField);
self.add(self1);
var passwordLabel=Ti.UI.createLabel({
text:"Password",
left:15,
width:100,
height:35
});
var passwordTextField=Ti.UI.createTextField({
height:35,
width:140,
passwordMask:true,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
var loginButton =Ti.UI.createButton({
title:"LOGIN",
top: 120,
width:200,
height:40
});
loginButton.addEventListener('click',function(e){
passwordTextField.blur();
nameTextField.blur();
});
self2.add(passwordLabel);
self2.add(passwordTextField);// self.backgroundImage="http://bluebackground.com/__oneclick_uploads/2008/04/blue_background_03.jpg";
self.add(self2);
self.add(loginButton);
self.addEventListener('click',function(e){
if(e.source != [Ti.UI.TextField]){
alert("window click");
passwordTextField.blur();
nameTextField.blur();
}
});
return self;
}
module.exports = FirstView;
Maybe you could precise the Titanium version you're using.
But as far as I know, with the version 3.1.1.GA, you can do like this :
if (e.source != '[object TiUITextField]') {
instead of :
if(e.source != [Ti.UI.TextField]){
For me, it works just fine :
click on textfields : open the keyboard
click somewhere else : close the keyboard
And you don't even need the event listener on your button anymore.

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

Titanium create table view replacing existing view

I have a dream... No that's not it.
I have a view, and all works fine until i add createTableView.
When i do it replaces everything that came out on the screen prior to it.
How do i have the mapview and the tableview at the same time?
var self = Ti.UI.createView();
var mapview = Titanium.Map.createView({
top:1,
height:200,
mapType: Titanium.Map.STANDARD_TYPE,
region:{latitude:33.74511, longitude:-84.38993, latitudeDelta:0.5, longitudeDelta:0.5},
animate:true,
regionFit:true,
userLocation:true
});
self.add(mapview);
var lbl = Ti.UI.createLabel({
text:'Please select an item',
height:'auto',
width:'auto',
color:'#000'
});
self.add(lbl);
self.addEventListener('itemSelected', function(e) {
lbl.text = e.name+': $'+e.price;
});
detailData = [{title:"Foo",leftImage:"bar.png",hasChild:true}];
var table = Ti.UI.createTableView({
data:detailData
});
// if i dont rem the below line all i get on screen is the table view
self.add(table);
The TableView control usually takes over the whole screen, I would try adding the MapView to one of the rows of the TableView, however, this may not work on Android:
// Create the table
var self = Ti.UI.createView();
var detailData = [{title:"Foo",leftImage:"bar.png",hasChild:true}];
var table = Ti.UI.createTableView({
data : detailData
});
self.add(table);
// Create the mapview
var mapview = Titanium.Map.createView({
top:1,
height:200,
mapType: Titanium.Map.STANDARD_TYPE,
region:{latitude:33.74511, longitude:-84.38993, latitudeDelta:0.5, longitudeDelta:0.5},
animate:true,
regionFit:true,
userLocation:true
});
// Insert a row in first index of the table that has the mapview in it
var row = Ti.UI.createTableViewRow();
row.add(mapview);
table.insertRowBefore(1, row);
EDIT:
Oops, well the easier way is to just to set the height of the table, and make your container view have a vertical layout:
// Create the container view
var self = Ti.UI.createView({
layout : 'vertical'
});
// Add the mapview
var mapview = Titanium.Map.createView({
height:200,
});
self.add(mapview);
// Add the table
var table = Ti.UI.createTableView({
top : 0,
data : detailData
});
self.add(table);

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.