Swipe gesture not swiping container off - javascript

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.

Related

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

How do I create a transparent button in Java Script (Smartface)

I am just trying to make a transparent button in the smartface cloud IDE using java script, and every time I make it transparent it wont read a click. I can increase the opacity all the way to alpha = .1 but when I set it equal to zero it wont work. How can I fix this, or is there another way to do this. I just want the button to take this form...
left : "50%",
top : "50%",
height : "50%",
width : "50%",
(The bottom right hand corner)
This is the code I have for the button (It doesn't work)
var myTextBtn = new SMF.UI.TextButton({
left : '50%',
top : '50%',
width : '50%',
height : '50%',
text : "",
onPressed : alert("Pressed"),
});
myTextBtn.alpha = 0;
page1.add(myTextBtn);
alpha shouldn't affect click unless it is 0. The problem is onPressed accepts callback function. But you are calling alert function there and giving its result to onPressed property.
Try this:
var myTextBtn = new SMF.UI.TextButton({
left : '50%',
top : '50%',
width : '50%',
height : '50%',
text : "",
onPressed : function() {
alert("Pressed");
}
});
myTextBtn.alpha = 0.5;
page1.add(myTextBtn);

Popup screen not working on Android, but does on iOS

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'
});

rightnavbutton not changing (titanium alloy)

I am trying to change my right nav button:
function load_Profile() {
if (editProfileFlag == 0) {
$.win.rightNavButton = Ti.UI.createView({
width : 'auto',
height : 'auto'
});
var confirm = Titanium.UI.createAlertDialog({
title : 'Block',
message : 'Are you sure? This cannot be undone. ',
buttonNames : ['Yes', 'No'],
cancel : 1
});
//add blocked button
var blockButton = Titanium.UI.createButton({
title : 'Block',
top : 0,
zIndex: 10
});
//view mode
if (args.view == 1) {
} else {
$.win.rightNavButton.add(blockButton);
}
[...]
I use the same controller, for something else, so I need to override the existing rightnavbutton and replace it with a new one. Here is the xml:
<Alloy>
<Window id="win" >
<RightNavButton>
<Button id="btnRight" onClick="rightButtonClicked" />
</RightNavButton>
[...]
But the new button does not appear.
Any idea how to swap the right nav bar buttons?
Thanks.

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;

Categories