We Keep Coding

Appcelerator: Elements are not added to views in android

I've been working on a multi platform mobile application. I almost finished it but I always tested on iOS (because of reasons). Now I am able to test on Android to find out that it fails in many ways.
The main problem here is that when I use:
alloy.createSomeElement({
//params
})
$.someView.add(someElemet);
the element is not added to the view. As I mentioned, this only happens on Android and works just fine on iOS.
Here I show you an example and it's result in both platforms.
e.json.forEach(function(address) {
var addressView = Ti.UI.createView({
height : Ti.UI.SIZE,
width : '90%',
layout : 'horizontal',
touchEnabled : true,
Address_id : address.id
});
var icoCont = Ti.UI.createView({
height : 20,
width : '10%'
});
var icon = Ti.UI.createImageView({
height : '20',
width : '20',
image : "/compartidos/persona3.png",
touchEnabled : false
});
var addressText = Ti.UI.createLabel({
height : Ti.UI.SIZE,
width : Ti.UI.FILL,
left : 1,
text : address.street + " - " + address.ext_number,
font : {
fontSize : 12,
fontFamily : "Nunito-Bold",
},
touchEnabled : false,
color: "#000"
});
if (address.alias)
addressText.text = address.alias;
var separator = Ti.UI.createView({
height : 5,
width : '100%',
top : 5,
bottom : 5,
backgroundColor : '#8C000000',
touchEnabled : false
});
addressView.add(icoCont, addressText);
icoCont.add(icon);
$.container.add(addressView, separator);
});
Result on iOS: result on iOS
And this on Android: result on Android
I really hope you can help me with this.
note: Nueva dirección and Dirección actual are not generated this way, those exist in the xml file.

I solved my issue after a long cycle of try & error. I'm posting my solution only in case somebody faces the same problem.
Seems that in Android I can't add multiple elements in a single instruction like this
addressView.add(icoCont, addressText);
The only thing I had to do is separate it in 2 (One for each element) like so
addressView.add(icoCont);
addressView.add(addressText);

You can add many views in single add statement, but you need to pass them as array like : addressView.add( [icoCont, addressText] );

interactive text box with fabricjs

I am working fabricjs textbox. I wrote the following code to change text options like font-size, font-weight, line-height.
My code is working but the problem is When I select a textbox object and change font-size or font weight or line height it does not work unless I click on canvas outside textbox.
But I want to change these value when I make change on input fields. My code are as following:
canvas = new fabric.Canvas('canvas');
// Add Text to Canvas
$('#canvasAddText').on('click', function(){
var _text = $('#canvasText').val();
var _color = $('#textColor').val();
var _fontSize = $('#fontSize').val();
var _fontWeight = $('#fontWeight').val();
var _lineHeight = $('#lineHeight').val();
var TextBox = new fabric.Textbox( _text, {
top: 30,
left: 30,
width: 200,
fill: _color,
fontSize: _fontSize,
fontWeight: _fontWeight,
lineHeight: _lineHeight,
fontFamily: 'Comic Sans',
textDecoration: 'none',
textAlign: 'left',
});
canvas.add(TextBox);
});
// Change Font Size
$('#fontSize').on('change', function (){
canvas.getActiveObject().setFontSize($(this).val());
});
// Change Font Weight
$('#fontWeight').on('change', function (){
canvas.getActiveObject().setFontWeight($(this).val());
});
// Change Line Height
$('#lineHeight').on('change', function (){
canvas.getActiveObject().setLineHeight($(this).val());
});

You should trigger object modified event and then renderAll() function to make sure changes reflect. Below is example code which you need to have for on change event of font size.
// Change Font Size
$('#fontSize').on('change', function (){
canvas.getActiveObject().setFontSize($(this).val());
canvas.trigger("object:modified",{target: canvas.getActiveObject()});
canvas.renderAll();
});

Swipe gesture not swiping container off

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.

load js on image click titanium

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.

Titanium click event in MenuIcons

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;