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
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
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.
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
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);
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.