Titanium up caret and menu item on actioinbar not working - titanium-mobile

I have the following code for a window. I'm trying to implement the up caret so a user can go to the previous window by tapping the title.
The up caret appears, but when i tap it, nothing happens, it only glows.
The menu item i added doesn't show either.
Is there something i'm not doing right?
function ConfirmOrder(_args) {
var actionBar;
var self = Ti.UI.createWindow({
title : "Confirm Order",
backgroundColor :'transparent',
orientation : 'vertical'
});
self.addEventListener("open", function() {
actionBar = self.activity.actionBar;
if (actionBar) {
actionBar.title = "Confirm Order";
actionBar.displayHomeAsUp = true; // shows up caret
actionBar.onHomeIconItemSelected = function() {
self.close();
};
} else {
alert('actionbar not accessible');
}
self.activity.onCreateOptionsMenu = function(e) {
var menu = e.menu;
var menuItem1 = menu.add({
title : L('settings'),
icon : "images/Setting.png",
showAsAction : Ti.Android.SHOW_AS_ACTION_IF_ROOM
});
menuItem1.addEventListener("click", function(e) {
alert("Settings Options Menu");
});
};
});
var imgView = Ti.UI.createImageView({
top : '3%',
image : Titanium.App.Properties.getString('image'),
height : '30%',
width : '60%'
});
var bottom = Titanium.UI.createView({
top : '37%',
height : '55%',
orientation : 'vertical',
touchEnabled : false,
backgroundImage : '/images/bg2.jpg',
});
var buttonsView = Titanium.UI.createView({
bottom : '0%',
height : '10%',
orientation : 'horizontal',
touchEnabled : false,
});
var confirmButton = Ti.UI.createButton({
right : '5%',
bottom : '10%',
width : '40%',
height : '70%',
color : 'white',
font : {fontSize:20, fontWeight:'bold', fontColor:'white', fontFamily:'Helvetica Neue'},
title : 'Confirm'
});
confirmButton.addEventListener('click', function(evt) {
// blah blah blah
});
var cancelButton = Ti.UI.createButton({
left : '5%',
bottom : '10%',
width : '40%',
height : '70%',
color : 'white',
font : {fontSize:20, fontWeight:'bold', fontColor:'white', fontFamily:'Helvetica Neue'},
title : 'Cancel'
});
cancelButton.addEventListener('click', function(evt) {
// blah blah blah
});
// add buttons to buttons container
buttonsView.add(confirmButton);
buttonsView.add(cancelButton);
// add parent containers to windows
self.add(imgView);
self.add(bottom);
self.add(buttonsView);
return self;
};
module.exports = ConfirmOrder;
Thanks all

I can't quite put my finger on it because it looks very similar to how i do it. However the only thing that i have different is that I have another check to ensure that you can get the activity, could it fall into this trap?
if (! self.getActivity()) {
Ti.API.error("Can't access action bar on a lightweight window.");
} else {
actionBar = self.activity.actionBar;
if (actionBar) {
actionBar.title = "Confirm Order";
actionBar.displayHomeAsUp = true; // shows up caret
actionBar.onHomeIconItemSelected = function() {
self.close();
};
} else {
alert('actionbar not accessible');
}
}
If the other options aren't working either I would remove them to see if they are somehow causing the up caret to error.
Hope that helps

Related

Hyperloop eventlistener example

I try to make a flac file player with Appcelerator and Hyperloopusing the OrigamiEngine
It works as I can play, pause and stop the player. But I can't get the "addEventListener" mode working. I read some examples and something about the delegate methods. But I'm not a native iOS coder and all my tryings failed.
Can anybody tells me how to code the eventlistener for the didChangeState function?
This is my unfortunately not working code
//Application Window Component Constructor
function ApplicationWindow() {
Ti.Media.audioSessionCategory = Ti.Media.AUDIO_SESSION_CATEGORY_PLAYBACK;
var NSURL = require('Foundation/NSURL');
var ORGMEngine = require('OrigamiEngine/ORGMEngine');
var audioPlayer = new ORGMEngine();
var self = Ti.UI.createWindow({
backgroundColor : '#ffffff'
});
var startStopButton = Ti.UI.createButton({
title : 'Start/Stop Streaming',
top : 100,
width : 200,
height : 40
});
var pauseResumeButton = Ti.UI.createButton({
title : 'Pause/Resume Streaming',
top : 140,
width : 200,
height : 40,
enabled : false
});
self.add(startStopButton);
self.add(pauseResumeButton);
startStopButton.addEventListener('click', function() {
console.log('audioPlayer.currentState: ' + audioPlayer.currentState);
// When paused, playing returns false.
// If both are false, playback is stopped.
if (audioPlayer.currentState == 1) {
audioPlayer.stop();
audioPlayer.release();
pauseResumeButton.enabled = false;
} else {
var url = NSURL.URLWithString('http://faq.fantasticlibrary.de/test.flac');
audioPlayer.playUrl(url);
setTimeout(function(){
console.log(audioPlayer.metadata());
}, 10000);
pauseResumeButton.enabled = true;
}
});
pauseResumeButton.addEventListener('click', function() {
console.log('audioPlayer.currentState: ' + audioPlayer.currentState);
if (audioPlayer.currentState == 1) {
audioPlayer.pause();
} else {
audioPlayer.resume();
}
});
var StateChangeDelegate = Hyperloop.defineClass('MyDelegate', 'NSObject', ['ORGMEngineDelegate']);
StateChangeDelegate.addMethod({
selector: 'engine:didChangeState:',
instance: true,
arguments: ['ORGMEngine', 'ORGMEngineState'],
callback: function (engine, state) {
if (this.didChangeState) {
this.didChangeState(engine, state);
}
}
});
var delegate = new StateChangeDelegate();
delegate.didChangeState = function(ORMEngine,state) {
console.log('does the state change???');
};
self.addEventListener('close', function() {
audioPlayer.stop();
audioPlayer.release();
});
return self;
}
module.exports = ApplicationWindow;
Running demo project to download: http://lightapps.de/files/flactest.zip
Try it:
delegate.on('didChangeState', function(ORMEngine,state){
console.log('does the state change???');
});
I can't test this in the moment, but i think that will work for you.

How can set programmatically style to Label in appcelerator

I want to set programmatically the font style to Label in one appcelerator application.
So this is:
socialHistory.tss
".headerTableLabel" : {
top : "10px",
color : "#B3B3B3",
textAlign : "center",
width: '340px',
font : {
fontSize : "20pt",
fontWeight : "Italic"
}
}
This is my socialHistory.js
function createHeader(headerText){
var heading = Ti.UI.createView({
height:30, top : 15,
backgroundColor : "#0c7b84"
});
var headingText = Ti.UI.createLabel({
text : headerText,
classes: 'headerTableLabel'
});
heading.add(headingText);
return heading;
}
I want to set programmatically the style of my Label under createLabel method. But it not works.
Try it like this:
function createHeader(headerText){
var heading = Ti.UI.createView({
height:30, top : 15,
backgroundColor : "#0c7b84"
});
var headingText = $.UI.create("Label", {
classes: 'headerTableLabel'
);
headingText.text = headerText;
heading.add(headingText);
return heading;
}

Highslide, Auto follow scroll

I was looking for a fix/solution for that and found this topic:
http://highslide.com/forum/viewtopic.php?t=3030
function fixElement(el) {
var stl = el.style;
stl.position = 'fixed';
stl.top = (parseInt(stl.top) - hs.page.scrollTop) +'px';
stl.left = (parseInt(stl.left) - hs.page.scrollLeft) +'px';
}
function unfixElement(el) {
var stl = el.style;
stl.position = 'absolute';
stl.top = (parseInt(stl.top) + hs.page.scrollTop) +'px';
stl.left = (parseInt(stl.left) + hs.page.scrollLeft) +'px';
}
if (!hs.ie || hs.ieVersion() > 6) {
hs.Expander.prototype.onAfterExpand = function() {
fixElement (this.wrapper);
if (this.outline) fixElement(this.outline.table);
};
hs.Expander.prototype.onBeforeClose = function() {
unfixElement (this.wrapper);
if (this.outline) unfixElement(this.outline.table);
};
}
Got a small hack on the forum topic, but the hack does not work on any Internet Explorer that I tried (IE7, IE8 and IE9).
Does anyone has a "fix" on the hack to make it work on IE?
I think it's something related on this part of the code, this condition:
if (!hs.ie || hs.ieVersion() > 6)
I removed and it worked, but maybe this code could be changed.
Thank you.
The below code is what you need. Live demo: http://www.highslide.com/studies/position-fixed.html
Note: requires highslide-full.js
// Highslide fixed popup mod. Requires the "Events" component.
if (!hs.ie || hs.uaVersion > 6) hs.extend ( hs.Expander.prototype, {
fix: function(on) {
var sign = on ? -1 : 1,
stl = this.wrapper.style;
if (!on) hs.getPageSize(); // recalculate scroll positions
hs.setStyles (this.wrapper, {
position: on ? 'fixed' : 'absolute',
zoom: 1, // IE7 hasLayout bug,
left: (parseInt(stl.left) + sign * hs.page.scrollLeft) +'px',
top: (parseInt(stl.top) + sign * hs.page.scrollTop) +'px'
});
if (this.outline) {
stl = this.outline.table.style;
hs.setStyles (this.outline.table, {
position: on ? 'fixed' : 'absolute',
zoom: 1, // IE7 hasLayout bug,
left: (parseInt(stl.left) + sign * hs.page.scrollLeft) +'px',
top: (parseInt(stl.top) + sign * hs.page.scrollTop) +'px'
});
}
this.fixed = on; // flag for use on dragging
},
onAfterExpand: function() {
this.fix(true); // fix the popup to viewport coordinates
},
onBeforeClose: function() {
this.fix(false); // unfix to get the animation right
},
onDrop: function() {
this.fix(true); // fix it again after dragging
},
onDrag: function(sender, args) {
//if (this.fixed) { // only unfix it on the first drag event
this.fix(true);
//}
}
});

Is there a 'native' cross platform calendar GUI view example available for Titanium?

As usual, the Q&A section of Appcelerator's developer website isn't being very helpful with this question (unless I'm going blind). It seems that this question is largely asked but never answered.
Is there an example of a calendar view (the GUI - e.g. day, week and month view) that can be deployed to both iOS AND Android? Integration into the built-in calendar (or events) isn't a must (it's not required now but may be in the future).
I've seen stelford and smontgomerie's modules for iOS and pec1985's web view one, however, I'm after one that would result with native (cancels out pec1985's one) GUI objects so that disability assistive technologies are enabled for it.
I Google a lot for showing Month View / Calendar View in my Titanium application but unable to find it out which work on IPhone and Android (Almost all the screens) Both.
After that I tried to implement it by my own and got the good implementation.
To achieve this, Create project which support Android & IPhone.
Open app.js and replace the following code with the existing code and after that Press Command + Shift + F to format the code.
// Taking Screen Width
var screenWidth = 322;
var needToChangeSize = false;
var screenWidthActual = Ti.Platform.displayCaps.platformWidth;
if (Ti.Platform.osname === 'android') {
if (screenWidthActual >= 641) {
screenWidth = screenWidthActual;
needToChangeSize = true;
}
}
// Main Window of the Month View.
var win = Ti.UI.createWindow({
backgroundColor : '#FF000000',
navBarHidden : true
});
// Button at the buttom side
var backButton = Ti.UI.createButton({
bottom : '20dp',
height : '40dp',
width : '200dp'
});
// Previous Button - Tool Bar
var prevMonth = Ti.UI.createButton({
left : '15dp',
width : 'auto',
height : 'auto',
title : '<'
});
// Next Button - Tool Bar
var nextMonth = Ti.UI.createButton({
right : '15dp',
width : 'auto',
height : 'auto',
title : '>'
});
// Month Title - Tool Bar
var monthTitle = Ti.UI.createLabel({
width : '200dp',
height : '24dp',
textAlign : 'center',
color : '#3a4756',
font : {
fontSize : 20,
fontWeight : 'bold'
}
});
// Tool Bar
var toolBar = Ti.UI.createView({
top : '0dp',
width : '322dp',
height : '50dp',
backgroundColor : '#FFFFD800',
layout : 'vertical'
});
// Tool Bar - View which contain Title Prev. & Next Button
var toolBarTitle = Ti.UI.createView({
top : '3dp',
width : '322dp',
height : '24dp'
});
toolBarTitle.add(prevMonth);
toolBarTitle.add(monthTitle);
toolBarTitle.add(nextMonth);
// Tool Bar - Day's
var toolBarDays = Ti.UI.createView({
top : '2dp',
width : '322dp',
height : '22dp',
layout : 'horizontal',
left : '-1dp'
});
toolBarDays.sunday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Sun',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.monday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Mon',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.tuesday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Tue',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.wednesday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Wed',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.thursday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Thu',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.friday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Fri',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.saturday = Ti.UI.createLabel({
left : '0dp',
height : '20dp',
text : 'Sat',
width : '46dp',
textAlign : 'center',
font : {
fontSize : 12,
fontWeight : 'bold'
},
color : '#3a4756'
});
toolBarDays.add(toolBarDays.sunday);
toolBarDays.add(toolBarDays.monday);
toolBarDays.add(toolBarDays.tuesday);
toolBarDays.add(toolBarDays.wednesday);
toolBarDays.add(toolBarDays.thursday);
toolBarDays.add(toolBarDays.friday);
toolBarDays.add(toolBarDays.saturday);
// Adding Tool Bar Title View & Tool Bar Days View
toolBar.add(toolBarTitle);
toolBar.add(toolBarDays);
// Function which create day view template
dayView = function(e) {
var label = Ti.UI.createLabel({
current : e.current,
width : '46dp',
height : '44dp',
backgroundColor : '#FFDCDCDF',
text : e.day,
textAlign : 'center',
color : e.color,
font : {
fontSize : 20,
fontWeight : 'bold'
}
});
return label;
};
monthName = function(e) {
switch(e) {
case 0:
e = 'January';
break;
case 1:
e = 'February';
break;
case 2:
e = 'March';
break;
case 3:
e = 'April';
break;
case 4:
e = 'May';
break;
case 5:
e = 'June';
break;
case 6:
e = 'July';
break;
case 7:
e = 'August';
break;
case 8:
e = 'September';
break;
case 9:
e = 'October';
break;
case 10:
e = 'November';
break;
case 11:
e = 'December';
break;
};
return e;
};
// Calendar Main Function
var calView = function(a, b, c) {
var nameOfMonth = monthName(b);
//create main calendar view
var mainView = Ti.UI.createView({
layout : 'horizontal',
width : '322dp',
height : 'auto',
top : '50dp'
});
//set the time
var daysInMonth = 32 - new Date(a, b, 32).getDate();
var dayOfMonth = new Date(a, b, c).getDate();
var dayOfWeek = new Date(a, b, 1).getDay();
var daysInLastMonth = 32 - new Date(a, b - 1, 32).getDate();
var daysInNextMonth = (new Date(a, b, daysInMonth).getDay()) - 6;
//set initial day number
var dayNumber = daysInLastMonth - dayOfWeek + 1;
//get last month's days
for ( i = 0; i < dayOfWeek; i++) {
mainView.add(new dayView({
day : dayNumber,
color : '#8e959f',
current : 'no',
dayOfMonth : ''
}));
dayNumber++;
};
// reset day number for current month
dayNumber = 1;
//get this month's days
for ( i = 0; i < daysInMonth; i++) {
var newDay = new dayView({
day : dayNumber,
color : '#3a4756',
current : 'yes',
dayOfMonth : dayOfMonth
});
mainView.add(newDay);
if (newDay.text == dayOfMonth) {
newDay.color = 'white';
// newDay.backgroundImage='../libraries/calendar/pngs/monthdaytiletoday_selected.png';
newDay.backgroundColor = '#FFFFF000';
var oldDay = newDay;
}
dayNumber++;
};
dayNumber = 1;
//get remaining month's days
for ( i = 0; i > daysInNextMonth; i--) {
mainView.add(new dayView({
day : dayNumber,
color : '#8e959f',
current : 'no',
dayOfMonth : ''
}));
dayNumber++;
};
// this is the new "clicker" function, although it doesn't have a name anymore, it just is.
mainView.addEventListener('click', function(e) {
if (e.source.current == 'yes') {
// reset last day selected
if (oldDay.text == dayOfMonth) {
oldDay.color = 'white';
// oldDay.backgroundImage='../libraries/calendar/pngs/monthdaytiletoday.png';
oldDay.backgroundColor = '#FFFFF000';
} else {
oldDay.color = '#3a4756';
// oldDay.backgroundImage='../libraries/calendar/pngs/monthdaytile-Decoded.png';
oldDay.backgroundColor = '#FFDCDCDF'
}
oldDay.backgroundPaddingLeft = '0dp';
oldDay.backgroundPaddingBottom = '0dp';
// set window title with day selected, for testing purposes only
backButton.title = nameOfMonth + ' ' + e.source.text + ', ' + a;
// set characteristic of the day selected
if (e.source.text == dayOfMonth) {
// e.source.backgroundImage='../libraries/calendar/pngs/monthdaytiletoday_selected.png';
e.source.backgroundColor = '#FFFF00FF';
} else {
// e.source.backgroundImage='../libraries/calendar/pngs/monthdaytile_selected.png';
e.source.backgroundColor = '#FFFF0000';
}
e.source.backgroundPaddingLeft = '1dp';
e.source.backgroundPaddingBottom = '1dp';
e.source.color = 'white';
//this day becomes old :(
oldDay = e.source;
}
});
return mainView;
};
// what's today's date?
var setDate = new Date();
a = setDate.getFullYear();
b = setDate.getMonth();
c = setDate.getDate();
// add the three calendar views to the window for changing calendars with animation later
var prevCalendarView = null;
if (b == 0) {
prevCalendarView = calView(a - 1, 11, c);
} else {
prevCalendarView = calView(a, b - 1, c);
}
prevCalendarView.left = (screenWidth * -1) + 'dp';
var nextCalendarView = null;
if (b == 0) {
nextCalendarView = calView(a + 1, 0, c);
} else {
nextCalendarView = calView(a, b + 1, c);
}
nextCalendarView.left = screenWidth + 'dp';
var thisCalendarView = calView(a, b, c);
if (needToChangeSize == false) {
thisCalendarView.left = '-1dp';
}
monthTitle.text = monthName(b) + ' ' + a;
backButton.title = monthName(b) + ' ' + c + ', ' + a;
// add everything to the window
win.add(toolBar);
win.add(thisCalendarView);
win.add(nextCalendarView);
win.add(prevCalendarView);
win.add(backButton);
// yeah, open the window, why not?
win.open({
modal : true
});
var slideNext = Titanium.UI.createAnimation({
// left : '-322',
duration : 500
});
slideNext.left = (screenWidth * -1);
var slideReset = Titanium.UI.createAnimation({
// left : '-1',
duration : 500
});
if (needToChangeSize == false) {
slideReset.left = '-1';
} else {
slideReset.left = ((screenWidth - 644) / 2);
}
var slidePrev = Titanium.UI.createAnimation({
// left : '322',
duration : 500
});
slidePrev.left = screenWidth;
// Next Month Click Event
nextMonth.addEventListener('click', function() {
if (b == 11) {
b = 0;
a++;
} else {
b++;
}
thisCalendarView.animate(slideNext);
nextCalendarView.animate(slideReset);
setTimeout(function() {
thisCalendarView.left = (screenWidth * -1) + 'dp';
if (needToChangeSize == false) {
nextCalendarView.left = '-1dp';
} else {
nextCalendarView.left = ((screenWidth - 644) / 2);
}
prevCalendarView = thisCalendarView;
thisCalendarView = nextCalendarView;
if (b == 11) {
nextCalendarView = calView(a + 1, 0, c);
} else {
nextCalendarView = calView(a, b + 1, c);
}
monthTitle.text = monthName(b) + ' ' + a;
nextCalendarView.left = screenWidth + 'dp';
win.add(nextCalendarView);
}, 500);
});
// Previous Month Click Event
prevMonth.addEventListener('click', function() {
if (b == 0) {
b = 11;
a--;
} else {
b--;
}
thisCalendarView.animate(slidePrev);
prevCalendarView.animate(slideReset);
setTimeout(function() {
thisCalendarView.left = screenWidth + 'dp';
if (needToChangeSize == false) {
prevCalendarView.left = '-1dp';
} else {
prevCalendarView.left = ((screenWidth - 644) / 2);
}
nextCalendarView = thisCalendarView;
thisCalendarView = prevCalendarView;
if (b == 0) {
prevCalendarView = calView(a - 1, 11, c);
} else {
prevCalendarView = calView(a, b - 1, c);
}
monthTitle.text = monthName(b) + ' ' + a;
prevCalendarView.left = (screenWidth * -1) + 'dp';
win.add(prevCalendarView);
}, 500);
});
Tested Environment
Titanium Studio - 2.1.2.201208301612
Titanium SDK - 2.1.0.GA
Android - 2.2 Emulator
iOS Version - 5.0
Reference - http://titaniumexplorers.blogspot.in/2012/09/titanium-calendar-month-view.html
no.
the implementations of the calendar UI on the two platforms is so drastically different and complex that the probability of finding one implementation to meet all of your requirements is highly unlikely.
You are not going blind, your requirements are just very specific.

In ExtJS, How to inject enableKeyEvents = true in component?

This is my code,
myText.enableKeyEvents = true; // **
myText.on('keyup', function(t){ console.log(t.getValue()); });
It not work, I think it may has some invoke method.
Any one has an idea ?
Full code
// function
var txfJump = function(txf){
var next = txf.nextSibling();
if(next.xtype == 'textfield'){
txf.enableKeyEvents = true;
txf.on('keyup', function(t, e){
if(t.getValue().length == t.maxLength){
next.focus();
}
});
txfJump(next);
}
};
// form
var p = new Ext.Panel({
title : 'test panel',
width : 400,
defaults: {
xtype : 'textfield',
},
items : [
{ ref : 'one', maxLength : 5 },
{ ref : 'two', maxLength : 5 },
{ ref : 'three',maxLength : 5 },
{
xtype : 'button',
text : 'SAMPLE'
},
{ ref : 'four', maxLength : 5 },
],
renderTo: Ext.getBody()
});
Ext.onReady(function(){
txfJump(p.one);
});
It's not possible without hackish tricks. Having read the TextField's source, i found out, that there is a private method initEvents, that sets up the callbacks for the html-elements if and only if enableKeyEvents is set. So, changing enableKeyEvents after initEvents was called has no effect, until it is called again.
To inject it, one could try to trigger a re-rendering of the component, or one could copy the behaviour of the relevant parts of TextField's initEvent. But there doesn't seem to be an official way.
you have to call txf.initEvents(), this needs to be called after txf.enableKeyEvents = true;
var txfJump = function(txf){
var next = txf.nextSibling();
if(next.xtype == 'textfield'){
txf.enableKeyEvents = true;
txf.initEvents(); //<----- this is what you have missing
txf.on('keyup', function(t, e){
if(t.getValue().length == t.maxLength){
next.focus();
}
});
txfJump(next);
}
You should pass "enableKeyEvents": true when getting new Ext.form.TextField instance. Here is the example usage
var textField = new Ext.form.TextField({
. // your configs
.
enableKeyEvents: true,
.
.
})

Resources