1. Application type: Android and iOS
2. Titanium SDK: Titanium Command-Line Interface, CLI version 3.1.2, Titanium SDK version 3.1.2.GA
3. Platform & Version: iOS 6.1, Android (tool-api-level 10, target SDK 15)
4. Device: iOS simulator, iOS iPhone 4S, iOS iPad 2
5: Host OS: OS X 10.8.4
6: Titanium Studio: 3.1.2.201308091617
I have two templates for my list views. The header template is used in the first section and is meant to be a 'header' for the whole view. I use the plainTemplate in the second section and it is meant to be the 'body' of the view. In the header the words 'Name' and 'Score' render blank on iOS but render just fine on Android.
As a further clue, I have a Label that I update dynamically between 5 different items. 'All', 'A', 'B' & 'C' show up correctly but 'RX' will render blank.
The items in section2 seem to render properly all the time.
I am using a combination of Alloy and JS. Any help/advice would be appreciated.
~~~
<Alloy>
<Tab id="scoresTab" title="Scores" onFocus="doOnFocus" onBlur="doOnBlur">
<Window id="win" title="Scores" class="container">
<LeftNavButton platform="ios">
<Button id="myLeftNavButton" onClick="doAddComment" />
</LeftNavButton>
<RightNavButton platform="ios">
<Button id="myRightNavButton" onClick="openSettingsWindow" />
</RightNavButton>
</Window>
</Tab>
</Alloy>
~~~
~~~
var tab = $.scoresTab;
var win = $.win;
var yellow_scores_full = createIconFile('bar_chart', iIconSize, 'yellow');
var normal_scores_full = createIconFile('bar_chart', iIconSize);
tab.icon = normal_scores_full;
doCommon($);
function doOnFocus(e)
{
tab.icon = yellow_scores_full;
}
function doOnBlur(e)
{
tab.icon = normal_scores_full;
}
function openSettingsWindow(e)
{
doOpenSettingsWindow(tab);
}
function doAddComment(e)
{
}
var measurement = require('alloy/measurement');
var width = Ti.Platform.displayCaps.platformWidth;
width -= measurement.dpToPX(30);
// If I use % for the left the fields will shift base on the accessoryType on iOS (Ti.UI.LIST_ACCESSORY_TYPE_NONE | Ti.UI.LIST_ACCESSORY_TYPE_DETAIL)
var genderLeft = 0.45 * width;
var scaleLeft = 0.65 * width;
var scoreLeft = 0.80 * width;
var genderWidth = scaleLeft - genderLeft;
var scaleWidth = scoreLeft - scaleLeft;
var scoreWidth = 0.15 * width;
if (isAndroid)
{
genderLeft = '45%';
genderWidth = '22%';
scaleLeft = '65%';
scaleWidth = '15%';
scoreLeft = '80%';
scoreWidth = '20%';
}
var textTop = '6dp';
var plainTemplate =
{
childTemplates:
[
{ // Image justified left
type: 'Ti.UI.ImageView', // Use an image view for the image
bindId: 'pic', // Maps to a custom pic property of the item data
properties: { // Sets the image view properties
width: '24dp', height: '24dp', left: '2dp', top: '2dp',
}
},
{ // Title
type: 'Ti.UI.Label', // Use a label for the title
bindId: 'name', // Maps to a custom title property of the item data
properties: { // Sets the label properties
color: 'black',
font: { fontFamily:'Arial', fontSize: '14dp' },
left: '26dp', top: textTop
},
},
{ // Title
type: 'Ti.UI.Label', // Use a label for the title
bindId: 'gender', // Maps to a custom title property of the item data
properties: { // Sets the label properties
color: 'black',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
font: { fontFamily:'AppIcons', fontSize: '16dp' },
left: genderLeft, top: textTop,
width: genderWidth
},
},
{ // Title
type: 'Ti.UI.Label', // Use a label for the title
bindId: 'scale', // Maps to a custom title property of the item data
properties: { // Sets the label properties
color: 'black',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
font: { fontFamily:'Arial', fontSize: '14dp' },
left: scaleLeft, top: textTop,
wdith: scaleWidth
},
},
{ // Title
type: 'Ti.UI.Label', // Use a label for the title
bindId: 'score', // Maps to a custom title property of the item data
textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT,
properties: { // Sets the label properties
color: 'black',
font: { fontFamily:'Arial', fontSize: '14dp' },
left: scoreLeft, top: textTop,
width: scoreWidth
},
}
],
// Binds a callback to the click event, which catches events bubbled by the view subcomponents.
// events: { click: clickItem }
};
var headerTemplate =
{
childTemplates:
[
{ // Title
type: 'Ti.UI.Label', // Use a label for the title
bindId: 'name', // Maps to a custom title property of the item data
properties: { // Sets the label properties
color: 'black',
font: { fontFamily:'Arial', fontSize: '24dp' },
left: '26dp', top: textTop,
},
},
{ // Title
type: 'Ti.UI.Button', // Use a label for the title
bindId: 'genderButton', // Maps to a custom title property of the item data
properties: { // Sets the label properties
backgroundImage: 'none',
color: '#369',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
font: { fontFamily:'AppIcons', fontSize: '24dp' },
left: genderLeft, top: textTop,
width: genderWidth
},
events: {
click: doGenderPopup
}
},
{ // Title
type: 'Ti.UI.Button', // Use a label for the title
bindId: 'scaleButton', // Maps to a custom title property of the item data
properties: { // Sets the label properties
backgroundImage: 'none',
color: '#369',
textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
font: { fontFamily:'AppIcons', fontSize: '24dp' },
left: scaleLeft, top: textTop,
wdith: scaleWidth
},
events: {
click: doScalePopup
}
},
{ // Title
type: 'Ti.UI.Label', // Use a label for the title
bindId: 'score', // Maps to a custom title property of the item data
textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT,
properties: { // Sets the label properties
color: 'black',
font: { fontFamily:'Arial', fontSize: '24dp' },
left: scoreLeft, top: textTop,
},
}
]
};
var listView = Ti.UI.createListView({
templates: { 'uncheck': plainTemplate, 'header': headerTemplate },
// Use 'uncheck', that is, the plainTemplate created earlier for all items
// Can be overridden by the item's template property
defaultItemTemplate: 'uncheck',
backgroundColor: Alloy.Globals.defaultBackgroundColor,
allowsSelection: false
});
var goldTrophyIcon = createIconFile('trophy', 24, '#ffd700');
var silverTrophyIcon = createIconFile('trophy', 24, 'silver');
function setScoreData(section, items, defaultKey)
{
var data = [];
for (var i = 0; i < items.length; i++)
{
var note_i = items[i].note;
var accType = Ti.UI.LIST_ACCESSORY_TYPE_DETAIL;
accType = (typeof note_i === 'undefined') || (note_i == '') ? Ti.UI.LIST_ACCESSORY_TYPE_NONE : Ti.UI.LIST_ACCESSORY_TYPE_DETAIL;
var item = {properties: {itemId: i, accessoryType: accType, backgroundColor: Alloy.Globals.defaultBackgroundColor, height: '28dp'}};
for (key in items[i])
{
var val = items[i][key];
var type = key == 'pic' ? 'image' : defaultKey;
if (key == 'properties')
for (propkey in val)
item.properties[propkey] = val[propkey];
else if (key == 'template')
item.template = val;
else
{
item[key] = {};
item[key][type] = val;
}
}
data.push(item);
}
section.setItems(data);
}
var bothStr = icons.male + String.fromCharCode(0x002F) + icons.female;
var header =
[
{name: 'Name', genderButton: bothStr, scaleButton: 'All', score: 'Score', template: 'header', properties: {backgroundColor: '#ABBDB6', height: '38dp'}}
];
var clientScores =
[
{name: 'Kyle Smelley', gender: icons.male, scale: 'RX', score: '10:07', pic: goldTrophyIcon, note: 'Feeling great today'},
{name: 'James Lord', gender: icons.male, scale: 'RX', score: '11:37', pic: silverTrophyIcon, note: ''},
{name: 'Emili Cohen', gender: icons.female, scale: 'RX', score: '14:11', pic: '', note: 'Jetlagged'},
{name: 'Daniel Turetsky', gender: icons.male, scale: 'C', score: '15:00', pic: '', note: 'Can I program a robot to do this for me'},
{name: 'Katrina Feline', gender: icons.female, scale: 'A', score: '16:11', pic: '', note: 'Jetlagged'},
{name: 'Debbie Doberman', gender: icons.female, scale: 'B', score: '16:21', pic: '', note: 'Dog tired!'},
];
var section1 = Ti.UI.createListSection();
setScoreData(section1, header, 'title');
var section2 = Ti.UI.createListSection();
setScoreData(section2, clientScores, 'text');
function doGenderPopup(e)
{
var controller = Alloy.createController('gender-popup');
controller.callback = genderCallback;
var popup = controller.getView();
popup.open();
}
var genderNdx = 0;
var genderStrs = [ bothStr, icons.male, icons.female ];
function genderCallback(ndx)
{
if (ndx >= 0 && ndx <= 2)
{
genderNdx = ndx;
var item = section1.getItemAt(0);
item.genderButton.title = genderStrs[ndx];
section1.updateItemAt(0, item);
filterViewList();
}
}
function doScalePopup(e)
{
var controller = Alloy.createController('scale-popup');
controller.callback = scaleCallback;
var popup = controller.getView();
popup.open();
}
var scaleNdx = 0;
var scaleStrs = [ 'All', 'RX', 'A', 'B', 'C' ];
function scaleCallback(ndx)
{
if (ndx >= 0 && ndx <= 4)
{
scaleNdx = ndx;
var item = section1.getItemAt(0);
item.scaleButton.title = scaleStrs[ndx];
section1.updateItemAt(0, item);
filterViewList();
}
}
function itemGenderNdx(item)
{
for (var i = 0; i < genderStrs.length; i++)
if (item.gender == genderStrs[i])
return(i);
return(1);
}
function itemScaleNdx(item)
{
for (var i = 0; i < scaleStrs.length; i++)
if (item.scale == scaleStrs[i])
return(i);
return(0);
}
function filterViewList()
{
var filteredScores = [];
for (var ndx in clientScores)
{
var item = clientScores[ndx];
if (genderNdx != 0 && itemGenderNdx(item) != genderNdx)
continue;
if (scaleNdx != 0 && itemScaleNdx(item) != scaleNdx)
continue;
filteredScores.push(item);
}
setScoreData(section2, filteredScores, 'text');
}
// Modified version of the `itemclick` event listener
// Changes the item template rather than the list item's color property
function clickItem (e)
{
if (e.sectionIndex == 1 && e.accessoryClicked > 0)
{
var item = e.section.getItemAt(e.itemIndex);
if (typeof item.note != 'undefined' && typeof item.note.text != 'undefined')
{
var noteController = Alloy.createController('noteWindow');
var noteWin = noteController.getView();
tab.open(noteWin);
noteController.setDetail(item.note.text);
}
}
}
listView.sections = [section1, section2];
listView.addEventListener('itemclick', clickItem);
win.add(listView);
~~~
↧