I am standing on MainMenuScreen, from there I added a module name MenuIcons But I don't know why the click events in MenuIcons is not working at all. However, all views, images and other content is showing perfectly without any warning or error.
Here is the scenario of code:
MainMenuScreen.js
function MainMenuScreen(userinfojson) {
var main_window = Titanium.UI.createWindow({
backgroundImage : '/assets/inventoryBackground.png'
});
var MainScreen = [];
var MenuIcons = require('ui/common/menus/MenuIcons');
MainScreen.menuIcons = new MenuIcons(active_screen);
main_window.add(MainScreen.menuIcons);
var StatusScreen = require('ui/common/MenuScreen/StatusScreen');
MainScreen.statusScreen = StatusScreen(userinfojson);
main_window.add(MainScreen.statusScreen);
return main_window;
}
module.exports = MainMenuScreen;
MenuIcons.js
function MenuIcons(active_menu) {
var view = Titanium.UI.createView({
top : "12%",
height : "10%"
});
var iconstatus_imageview = Titanium.UI.createImageView({
left : '0%',
top : '0%',
image : '/assets/iconStatus.png',
height : '100%',
width : '13.8%'
});
iconstatus_imageview.addEventListener('click', function(e) {
alert("Clicked");
});
view.add(iconstatus_imageview);
return view;
}
module.exports = MenuIcons;
So, click event of this "iconstatus_imageview" imageview is not working
Please help...:(
To troubleshoot this I would add colors to the views/windows involved and see if one is drawn over the other. My initial guess without seeing the StatusScreen code is that it is over the top of the MenuIcons, but it is transparent and you can't see it.
I would probably comment out this line and see if the menu event fires:
main_window.add(MainScreen.statusScreen);
This code works, so the problem isn't visible in the code you pasted. So whatever code you edited out should be looked at.
app.js
var main_window = Titanium.UI.createWindow({
//backgroundImage : '/assets/inventoryBackground.png'
backgroundColor: 'white'
});
var MainScreen = [];
var MenuIcons = require('MenuIcons');
//MainScreen.menuIcons = new MenuIcons(active_screen);
MainScreen.menuIcons = new MenuIcons();
main_window.add(MainScreen.menuIcons);
// var StatusScreen = require('ui/common/MenuScreen/StatusScreen');
// MainScreen.statusScreen = StatusScreen(userinfojson);
// main_window.add(MainScreen.statusScreen);
//return main_window;
main_window.open();
MenuIcons.js
function MenuIcons(active_menu) {
var view = Titanium.UI.createView({
top : "12%",
height : "10%"
});
var iconstatus_imageview = Titanium.UI.createImageView({
left : '0%',
top : '0%',
image : 'medical.png',
height : '100%',
width : '13.8%'
});
iconstatus_imageview.addEventListener('click', function(e){
alert('clicked');
});
view.add(iconstatus_imageview);
return view;
}
module.exports = MenuIcons;
Related
So I am working with learning CommmonJS using Appcelerator and I am trying to figure the best way to use a variable from one module (which is an array) in a my ui module. My issue is that in my ui module I have the main window(globally) for the ui and I have an eventlistener on a button that calls a function (in the same module) that opens a map. This map needs the variable that I getting from the previous module. Just not sure what is the best way to do this. Any advice would be awesome.
Data.js
var read = function(){
console.log("---read is activated---");
var db = Ti.Database.open('fourSqDB');
var rows = db.execute('SELECT fourSqID, name, lat, lng, distance, type FROM fourSqTBL');
var dbArray = [];
while (rows.isValidRow()){
var record = {
fourSqID: rows.fieldByName('fourSqID'),
name: rows.fieldByName('name'),
lat: rows.fieldByName('lat'),
lng: rows.fieldByName('lng'),
distance: rows.fieldByName('distance'),
type: rows.fieldByName('type'),
};
dbArray.push(record);
rows.next();
}
rows.close();
db.close();
var getUI = require('ui'); //go into ui.js
//getUI.buildUI(dbArray); //fire buildMainUI function
getUI.buildSecUI(dbArray); //fire buildSecUI function
return dbArray; }; //close read function
ui.js
var win = Ti.UI.createWindow({
layout: "vertical",
backgroundColor: "#ccc"
//background: "images/bg.png"
});
//Navigation Window
var navWin = Ti.UI.iOS.createNavigationWindow({
window: win,
});
var label1 = Ti.UI.createLabel({
//top: 250,
textAlign: "center",
text: "This is the shisha app created by Emmanuel Farrar for AVF1512 Week 3 assignment "
});
var labelButton = Ti.UI.createLabel({
text: "Go To Data",
color: "white"
});
var statementView = Ti.UI.createView({
borderColor: "black", borderRadius: 10,
top: 10, bottom: 0,
height: 300, width: 350
});
var buttonView = Ti.UI.createView({
backgroundColor: "#1f2f34",
top: statementView.bottom + 200,
borderRadius: 10,
height: 75,
width: 350
});
///////////////////////////////////////////
// buildSecUI function (map and listing)
///////////////////////////////////////////
var buildSecUI = function(dbArray){ //dbArray from data.js read function
console.log("---buildSecUI is activated---");
console.log(dbArray);
var secWin = Ti.UI.createWindow({
layout: "vertical",
backgroundColor: "#ffffff"
});
//building the map
var Map = require('ti.map');
var mapView = Map.createView({
mapType: Map.NORMAL_TYPE,
region: {latitude:25.2867, longitude:51.5333,
latitudeDelta:0.05, longitudeDelta:0.05},
animate:true,
regionFit:true,
userLocation:true
});
//array for annotations (pins for maps)
var annotations = [];
for ( var i = 0 ; i < dbArray.length; i++ ) {
// this section will create annotations and add them on the mapView
var pin = Map.createAnnotation({
latitude: dbArray[i].lat,
longitude: dbArray[i].lng,
title: dbArray[i].name,
type: dbArray[i].type,
animate:true,
pincolor:Map.ANNOTATION_PURPLE
});
annotations[i] = pin;
//annotations.push(pin);
// console.log(annotations[i]);
console.log("Pin Info: " + + "Lat" + pin.latitude + " / " + "Lng "+ pin.longtitude);
mapView.addAnnotation(annotations[i]); // adds annotations
} //for loop closure
secWin.add(mapView);
navWin.openWindow(secWin);
}; //closure for buildSecUI
exports.buildSecUI = buildSecUI;
//event listner
buttonView.addEventListener("click", buildSecUI); //closure for buildSecUI
// adding stuff here
statementView.add(label1);
buttonView.add(labelButton);
win.add(statementView, buttonView);
navWin.open();
I think you should go the other way.
In data.js export the read function but leave out the two getUI lines.
exports.read = function() {
// your code except the two getUI lines
return dbArray;
};
Then in ui.js require the data module, call the exported read() and build the UI with it.
var data = require('data');
var dbArray = data.read();
buildSecUI(dbArray);
This way you the data module is unaware of where and how its used (as it should be).
Well I figured what the problem was though like most things it just identified another problem, lol. In this case it worked to turn the whole thing into a function and move the .openWindow method to the event listener as its own function.
buttonView.addEventListener("click", function(){navWin.openWindow(secWin);});
I'm trying to create an popup that contains help information. The below code works perfect on iOS, but on Android the labels aren't displayed (the close button is).
I'm hoping there is an easy fix ;-)
Thanks in advance!
function helpPopup() {
var myModal = Ti.UI.createWindow({
backgroundColor : 'transparent',
navBarHidden:true
});
var wrapperView = Ti.UI.createView(); // Full screen
var backgroundView = Ti.UI.createView({ // Also full screen
backgroundColor : '#000',
opacity : 0.5
});
backgroundView.addEventListener('click', function () {
myModal.close();
});
var containerView = Ti.UI.createView({ // Set height appropriately
height : 300,
backgroundColor : '#FFF'
});
var someLabel = Ti.UI.createLabel({
text : 'Here is your modal',
top : 40
});
var contactName = Ti.UI.createLabel({
text :'Name',
top :60
});
var closeButton = Ti.UI.createButton({
title : 'Close',
bottom : 40
});
closeButton.addEventListener('click', function () {
myModal.close();
});
containerView.add(someLabel);
containerView.add(contactName);
containerView.add(closeButton);
wrapperView.add(backgroundView);
wrapperView.add(containerView);
myModal.add(wrapperView);
myModal.open({
animate : true
});
}
It turns out that Android uses white as a default label color.... iOS uses black.
So after I changed the font color it worked on both Android on iOS:
var someLabel = Ti.UI.createLabel({
text : 'Here is your modal',
top : 40,
color : '#000'
});
I am trying to swipe a container and it's children elements off the screen. However when I run the following code, the child element I swipe goes off the screen as opposed to both elements.
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title : 'Tab 1',
backgroundColor : '#fff'
});
var viewContainer = Titanium.UI.createImageView({
backgroundColor : 'white',
width : '100%',
height : '100%',
top : 0
});
var view = Titanium.UI.createImageView({
backgroundColor : 'green',
width : '100%',
height : '100%',
top : 0
});
var view1 = Titanium.UI.createView({
backgroundColor : 'red',
width : '100%',
height : 100,
bottom : 0
});
viewContainer.addEventListener('swipe', function(e) {
if (e.direction == "right") {
//TODO: add functionality here
} else if (e.direction == "left") {
var anim = Ti.UI.createAnimation({
left : -300,
duration : 200,
curve : Ti.UI.ANIMATION_CURVE_EASE_OUT
});
anim.addEventListener('start', function(_startanicallback) {
});
anim.addEventListener('complete', function(_anicallback) {
});
e.source.animate(anim);
}
});
viewContainer.add(view);
viewContainer.add(view1);
win1.add(viewContainer);
win1.open();
I have a :
ViewContainer - where the event listener is attached too.
Inside that , view and view1 both child elements.
Not sure why this is happening.
Cheers.
The reason for only one of the elements being swiped is this line :
e.source.animate(anim);
If you will replace it with viewContainer.animate(anim); the swipe will work as you want.
Hope it helps.
i am new to titanium apps, i want to load a js on image click but i get 'uncaught typeerror cannot call method 'open' of undefined' error.
app.js
Ti.include("/core/index.js");
index.js
var win = Ti.UI.createWindow({
title: 'MapApp',
layout: 'vertical',
backgroundColor: '#ffffff'
});
var home=Ti.UI.createImageView({
image:'home.png',
height : 130,
width : 130,
});
var about=Ti.UI.createImageView({
image:'about.png',
height : 130,
width : 130
});
var rss=Ti.UI.createImageView({
image:'rss.png',
height : 130,
width : 130
});
var contact=Ti.UI.createImageView({
image:'contact.png',
height : 130,
width : 130
});
home.addEventListener('click', function(e) {
var newWin = Ti.UI.createWindow({
url : 'map.js',
title : 'title',
tabBarHidden : true,
barColor : '#000000',
});
newWin.open({
animation:true
});
});
win.add(home);
win.add(about);
win.add(rss);
win.add(contact);
win.open();
map.js
var globals = require("globals");
(function(){
var config = require("Config"),
AppWindow, LocationManager, locationsHandler;
globals.theme = require("../themes/" + config.theme);
LocationManager = require("LocationManager");
Titanium.UI.backgroundColor = globals.theme.Global.backgroundColor;
locationsHandler = function(e){
AppWindow = require("../ui/AppWindow").create();
AppWindow.open();
Ti.App.removeEventListener(
LocationManager.events.LOCATIONS_READY,
locationsHandler
);
};
Ti.App.addEventListener(
LocationManager.events.LOCATIONS_READY,
locationsHandler
);
// Load locations
LocationManager.load();
})();
i searched a lot, but did not get any response, is there any problem with the code in map.js as i replaced that code from app.js from purchased theme.
You can use the Event fire and event listener for this purpose and in my sense it will be the wise thing to do also. Once you have registered an even, fire it when the image is clicked. When the event is fired, the event you registered will hear it and will load your concern js and then you can take it from there.
Here is the link that might help you to get it going. You may fire and register both the event in app.'s or in any other js you are using.
Once you get it right, the other thing will be easy to do.
I wrote this plugin but I'm having issues trying to position the tooltip so that it's completely centered above the parent container. I'm currently just calculating the width of the parent container that it's in and finding out where that is by getting it's left position, but it's always not completely centered.
Any ideas?
(function($) {
var toolTip = {
init: function() {
this.each(function() {
var $that = $(this);
// our boolean object to check if it already exists on the page
var $toolSpan = $('<div class="tooltip"><span class="tooltip_arrow"></span></div>');
var preloadImages = function() {
var tempImage = new Image();
tempImage.src = 'http://i.imgur.com/K5ynr.png';
tempImage = null;
};
preloadImages();
$that.mouseover(function() {
var $altText = $that.attr('alt');
var $parentWidth = $that.parent().width();
var $parentPos = $that.parent().position();
var $parentPosY = $parentPos.top;
var $parentPosX = $parentPos.left;
$that.parent().after($toolSpan);
$toolSpan.prepend($altText);
$that.parent().next($toolSpan).css('top', $parentPosY - 30).css('left', $parentPosX).fadeIn();
var $toolSpanWidth = $that.parent().outerWidth();
$that.parent().next('.tooltip').children('.tooltip_arrow').css('left', $toolSpanWidth / 2).fadeIn();
}).mouseout(function() {
$that.parent().next($toolSpan).text('').hide().remove();
});
});
} /* end init */
};
$.fn.toolTip = toolTip.init;
})(jQuery);
http://jsfiddle.net/QH8dy/2/
here you go - centered, all working, code a bit cleaner ...
http://jsfiddle.net/PBpWj/
though it can potentially go off screen if the tip text is too wide.
If you intention is so that the tooltip container is center aligned above the link containers (in this case the wrappers). Try modifying the following line of code:
$that.parent().next($toolSpan)
.css('top', $parentPosY - 30)
.css('left', $parentPosX + ($parentWidth/2) - ($toolSpan.width()/2))
.fadeIn();
See it at the following jsFiddle.