In Titanium how do you select an object by the id?
Working with Titanium I created a view with children. I set an event listener on the parent view so I didn't have to create an event listener for each child. In the event listener I determine which child view was clicked by using e.source.id. I need to change the height of the view as it's clicked, and I also need to change the height of previous view that was open. (This is all to show the active view with an underline type of style.)
var selectionView = Ti.UI.createView({
title: 'Selection View',
width: Ti.UI.Fill,
left: 0,
top: 0,
backgroundColor: '#f5f5f5',
layout: 'horizontal',
height: 32,
zIndex: 12
});
var selection_Type = Ti.UI.createView({
title: "Type View",
width: Ti.UI.Fill,
layout: 'horizontal',
backgroundColor: '#ABABAB',
top: 0,
height: 30
});
I can't figure out how to select the object by the id name so I can change it's height.
//storing the id of the last clicked feed label so we can change it's height when it's no longer open
var feedSelector = 'selection_All';
selection_Type.addEventListener('click', function (e) {
Ti.API.info( ' ==== Select Destination Hit ==== ' + e.source.id);
if (e.source.id === feedSelector) {
//refresh the feed view
Ti.API.info('Simulating feed refresh for...' + e.source.id);
}
else {
//reducing active label height to simulatue 2px underline
e.source.setHeight(28);
//reset previous selected label height
//here's the problem
//i know how to do this in regular javascript/html
//but I don't know how to access an object by it's id in Titanium
//setting current label id in feedSelector so we can change it's height next time a button is clicked
feedSelector = e.source.id;
Ti.API.info('Changed value for feedSelector to...' + feedSelector);
}
}
}
);
var selection_All = Ti.UI.createLabel({
id: 'selection_All',
text: 'All',
width: '14.9%',
top: 0,
center: 2,
height: 28,
backgroundColor: '#fff',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color:'#073266',
font:{fontFamily:'Trebuchet MS',fontSize:13}
});
var selection_Status = Ti.UI.createLabel({
id: 'selection_Status',
text: 'Status',
width: '22%',
top: 0,
center: 0,
height: 30,
backgroundColor: '#fff',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color:'#073266',
font:{fontFamily:'Trebuchet MS',fontSize:13}
});
var selection_Article = Ti.UI.createLabel({
id: 'selection_Article',
text: 'Article',
width: '23%',
top: 0,
center: 0,
height: 30,
backgroundColor: '#fff',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color:'#073266',
font:{fontFamily:'Trebuchet MS',fontSize:13}
});
var selection_Video = Ti.UI.createLabel({
id: 'selection_Video',
text: 'Video',
width: '20%',
top: 0,
center: 0,
height: 30,
backgroundColor: '#fff',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color:'#073266',
font:{fontFamily:'Trebuchet MS',fontSize:13}
});
var selection_Audio = Ti.UI.createLabel({
id: 'selection_Audio',
text: 'Audio',
width: '20%',
top: 0,
center: 0,
height: 30,
backgroundColor: '#fff',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color:'#073266',
font:{fontFamily:'Trebuchet MS',fontSize:13}
});
//creating selection type container and adding selection types
selection_Type.add(selection_All);
selection_Type.add(selection_Status);
selection_Type.add(selection_Article);
selection_Type.add(selection_Video);
selection_Type.add(selection_Audio);
selectionView.add(selection_Type);
Edit: I accomplished what I needed to do using a switch statement, but it would be much cleaner if I could get the object by it's id.
var feedSelector = 'selection_All';
selection_Type.addEventListener('click', function (e) {
Ti.API.info( ' ==== Select Destination Hit ==== ' + e.source.id);
if (e.source.id === feedSelector) {
//refresh the feed view if the feed is open and button is clicked
//Ti.API.info('Simulating feed refresh for...' + e.source.id);
alert('Refreshing feed');
}
else {
//reducing active label height to simulatue 2px underline
e.source.setHeight(28);
switch (feedSelector) {
case 'selection_All':
selection_All.setHeight(30);
break;
case 'selection_Status':
selection_Status.setHeight(30);
break;
case 'selection_Article':
selection_Article.setHeight(30);
break;
case 'selection_Video':
selection_Video.setHeight(30);
break;
case 'selection_Audio':
selection_Audio.setHeight(30);
break;
}
feedSelector = e.source.id;
Ti.API.info('Changed value for feedSelector to...' + feedSelector);
}
}
);
If you're using Titanium Studio, just debug on the click event and examine the event object. On the breakpoints stop go to the Expressions tab enter the e event object and examine it. Probably the UI elemnt is there as a property.
Other way around is:
var labelStore = {};
function createLabel(props){
var label = Ti.UI.createLabel(props);
labelStore[props.id] = label;
return label;
}
function getLabelById(id){
return labelStore[id];
}
var selection_Status = createLabel({
id: 'selection_Status',
...
});
and then on click
var id = e.source.id;
var label = getLabelById(id);
....Do what you got to do with the label
Related
I am trying to merge textbox and group in fabricjs
when I set text, It doesn't show full text.
how to set full text?
var iText4 = new fabric.Textbox('Text noasasasasasasasasasabcdefghxyz', {
left: 50,
top: 100,
fontFamily: 'Helvetica',
width: 30,
styles: {
0: {
0: { textBackgroundColor: 'blue', fill: 'green' },
1: { textBackgroundColor: '#faa' },
2: { textBackgroundColor: 'lightblue' },
}
}
});
var group = new fabric.Group([ iText4 ], {
left: 150,
top: 100,
width: 60,
});
var canvas = new fabric.Canvas('c');
canvas.add(group);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id='c' width='500' height='400'></canvas>
The group's width is smaller than the text's width, causing it to be cut off. Removing it should solve your problem.
var group = new fabric.Group([ iText4 ], {
left: 150,
top: 100
});
See here: https://jsfiddle.net/p6c2trg8/1/
I am working with titanium expand and collapse for Android.I have created a tablerow with a Label and image.When i click on the image then make bottom view visibility true and set height for tablerow.Then applied animation for the expand view
for (var i = 0; i < sectionItems.length; i++) {
tblCell[i] = Ti.UI.createTableViewRow({
height: 50,
backgroundColor: 'white',
id: i,
layout:"horizontal",
rowId:i
});
topView[i]=Ti.UI.createView({
height: 50,
backgroundColor: 'white',
id: i,
rowId:i,
layout:"horizontal",
width:"100%",
});
lbltitle[i] = Ti.UI.createLabel({
text: sectionItems[i],
id:i,
color:'#000',
font: {
fontSize: '16dp',
fontFamily: 'Myriad Pro',
fontWeight: 'bold'
},
left: "1%",
width:'80%',
rowId:i,
//right: '10',
textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
});
lblDescription[i] = Ti.UI.createLabel({
// text: sectionItems[i].description,
id: i,
text:"Test Answer",
color:'#000',
font: {
fontSize: '14dp',
fontFamily: 'Myriad Pro',
},
backgroundColor:'green',
rowId:i,
left: "10%",
right:"10%",
top:"10dp",
width:'80%',
height:"25%",
textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
});
addPic[i] = Ti.UI.createImageView({
image:"/images/carat_down.png",
rowId:i,
id: i,
right:"1%",
height:'9dp',
width:"16dp"
});
expandView[i]=Ti.UI.createView({
width:"100%",
left:'0dp',
height:"0dp",
backgroundColor:'red',
id: i,
rowId:i,
visible:false,
layout:"vertical"
});
topView[i].add(lbltitle[i]);
topView[i].add(addPic[i]);
expandView[i].add(lblDescription[i]);
tblCell[i].add(expandView[i]);
tblCell[i].add(topView[i]);
addPic[i].addEventListener('singletap', function(e) {
toggleExpand(e);
});
function toggleExpand(e){
if(expandView[e.source.rowId].visible==true){
expandView[e.source.rowId].visible=false;
tblCell[e.source.rowId].height=tblCell[e.source.rowId].height-(topView[e.source.rowId].height*3);
expandView[e.source.rowId].animate({
height:"0dp",duration:250});
}else{
for (var i = 0; i < tblsectionItems.length; i++) {
if(expandView[i].visible==true){
expandView[i].visible=false;
tblCell[i].height=tblCell[i].height-(topView[i].height*3);
expandView[i].animate({
height:"0dp",duration:250});
}}
expandView[e.source.rowId].visible=true;
expandView[e.source.rowId].animate({
height:"auto",duration:250});//"auto"
tblCell[e.source.rowId].height=tblCell[e.source.rowId].height+(topView[e.source.rowId].height*3);
}
}
But when the row expand then i can't see my previous elements of tblcell.I can't find the reason.Please help me
I think you need to change the logic you are using to add elements in the row.
First do not use separate arrays to add each elements instead use row variable to attach elements like below..
var row = Ti.UI.createTableViewRow({});
row.topView = Ti.UI.createView({});
row.expandView = Ti.UI.createView({}); like that..
then use only 2 objects for expanView or whatever view you want to show/hide in toggleExpand function.. like
if(previousView.visible == true)
{
...
}
else{
...
}
previousView = e.row.expandView;
Google chart throws error for invalid color due to values received using DataMap.
You can see colors: [colors], in options.
If i direct use color values like below then it works fine.
colors: ['#006400', '#3cb371', 'red', '#f5fffa'],
but if i get values through data map and it has same output then it doesn't work and throws error:
"'#006400' is not a valid color string".
Is there any kind of data formatting issue?
Sample JSON Data:
{"cols":[{"label":"status","type":"string"},{"label":"count","type":"string"}],"rows":[{"c":[{"v":"CLOSED"},{"v":3}]},{"c":[{"v":"VERIFIED"},{"v":35}]},{"c":[{"v":"RESOLVED"},{"v":15}]},{"c":[{"v":"IN_PROGRESS"},{"v":92}]},{"c":[{"v":"ASSIGNED"},{"v":63}]},{"c":[{"v":"NEW"},{"v":16}]},{"c":[{"v":""},{"v":0}]}]}
Custom color (problematic):
const DataMap = {
CLOSED: '#006400',
VERIFIED: '#006400',
RESOLVED: '#3cb371',
REOPENED: 'red',
IN_PROGRESS: '#f5fffa',
ASSIGNED: 'brown',
NEW: 'brown',
UNCONFIRMED: 'brown'
};
let myColors = [];
Object.keys(DataMap).forEach((key, index) => {
if (jsonData.search(key) !== -1) {
myColors.push("'" + DataMap[key] + "'");
}
});
options = {
title: chartTitle,
width: '410',
height: '320',
backgroundColor: '#f5fffa',
is3D: true,
colors: [myColors],
chartArea: {
left: "20%",
top: "20%",
height: "100%",
width: "100%"
}
};
chart.draw(data, options);
Direct color (works fine):
options = {
title: chartTitle,
width: '410',
height: '320',
backgroundColor: '#f5fffa',
is3D: true,
colors: ['#006400', '#3cb371', 'red', '#f5fffa'],
chartArea: {
left: "20%",
top: "20%",
height: "100%",
width: "100%"
}
};
chart.draw(data, options);
What can be the issue and how can i resolve it?
What I can say right now is:
myColors.push("'" + DataMap[key] + "'");
should be changed to
myColors.push(DataMap[key]);
because values for each key from DataMap are already strings, i.e. DataMap[key] is a string.
Secondly, instead of
colors: [myColors],
should be just
colors: myColors,
because myColors is already an array.
I am creating a list (ScrollView) with some custom "rows" (The image contains a single "row"). I show 5 rows and have added an event listener so that when the user scrolls to the end, 5 more elements are loaded and displayed. I made this using Alloy but I noticed it was taking too long so I tried writing the views manually.
// created the views programmatically to see if there was any difference from Alloy
function createRow(args) {
var container = Ti.UI.createView({
layout: "vertical",
width: Ti.UI.FILL,
height: "42dp"
});
var rowContent = Ti.UI.createView({
width: Titanium.UI.FILL,
height: "41dp", //Titanium.UI.FILL,
layout: "horizontal",
left: "16dp",
right: "16dp"
});
var border = Ti.UI.createView({
left: "16dp",
right: "16dp",
height: "1dp",
backgroundColor: Colors.darkGrey
});
var titleScroll = Ti.UI.createScrollView({
scrollType: "horizontal",
width: "49%",
horizontalWrap: false
});
var scrollContainer = Ti.UI.createScrollView({
scrollType: "horizontal",
horizontalWrap: false,
width: "50%"
});
var scroll = Ti.UI.createView({
layout: "horizontal",
horizontalWrap: false,
right: 0,
width: Ti.UI.SIZE,
height: Titanium.UI.SIZE
});
var title = Ti.UI.createLabel({
text: args.title,
font: args.isTitle ? {font: "Lato-Regular", fontSize: "22dp"} : {fontFamily: "Lato-Regular", fontSize: "15"},
horizontalWrap: false,
wordWrap: false,
left: 0,
color: Colors.grey,
minimumFontSize: "15dp"
});
if(args.value) {
var t = args.value.join();
scroll.add(Ti.UI.createLabel({
text: t,
color: args.action ? Colors.blue : Colors.black,
font: {fontSize: "15dp", fontFamily: "Lato-Regular"},
right: "5dp",
width: Ti.UI.SIZE,
horizontalWrap: false,
wordWrap: false,
minimumFontSize: "15dp"
}));
}
if(args.data)
scrollContainer.data = args.data; //just a dump of the data used by the click handler
if(args.action)
scrollContainer.addEventListener("click",args.action);
scrollContainer.add(scroll);
titleScroll.add(title);
rowContent.add(titleScroll);
rowContent.add(scrollContainer);
container.add(rowContent);
container.add(border);
return container; //Ti.UI.View
}
function createHeader(args) {
var header = Ti.UI.createView({
layout: "horizontal",
height: "44dp",
backgroundColor: "#fff"
});
var leftView = Ti.UI.createView({
width: "25%",
height: Ti.UI.FILL
});
var rightView = Ti.UI.createView({
width: "25%",
height: Ti.UI.FILL
});
var centerView = Ti.UI.createView({
width: "49%",
height: Ti.UI.FILL
});
var verticalAligner = Ti.UI.createView({
height: Ti.UI.SIZE,
width: Ti.UI.SIZE,
layout: "vertical"
});
var headerTitle = Ti.UI.createLabel({
color: Colors.green,
font: {fontSize: "16.5dp", fontFamily: "Lato-Regular"},
textAlign: "center",
horizontalWrap: false,
wordWrap: false
});
var headerSubtitle = Ti.UI.createLabel({
font: {fontSize: "14dp", fontFamily: "Lato-Regular"},
textAlign: "center",
color: Colors.grey,
horizontalWrap: false,
wordWrap: false
});
if(args.rightView)
rightView.add(args.rightView);
if(args.leftView)
leftView.add(args.leftView);
verticalAligner.add(headerTitle);
verticalAligner.add(headerSubtitle);
centerView.add(verticalAligner);
header.add(leftView);
header.add(centerView);
header.add(rightView);
headerTitle.text = args.title;
headerSubtitle.text = args.subTitle;
return header;
}
function createBlock(args) {
var container = Ti.UI.createView({
layout: "vertical",
width: "100%",
height: Ti.UI.SIZE
});
var covers = Ti.UI.createView({ //
height: "119dp"
});
var content = Ti.UI.createView({
height: Ti.UI.SIZE,
layout: "vertical"
});
function goToEvent() {
Storage.event.id = args.event;
Alloy.Globals.openWin("event");
}
var data = new D.data();
var w = Android ? Ti.Platform.displayCaps.platformWidth : Measure.dpToPX(Ti.Platform.displayCaps.platformWidth);
var h = Measure.dpToPX(119); //Android ? Alloy.Globals.dpToPX(119) : Measure.dpToPX(119);
if(args.images) {
//setTimeout(function() { //timeout didn't make any difference
var image = null;
//for(var i = 0; i < args.images.length; i++) {
image = Ti.UI.createImageView({
image: data.getBlobResized({ //returns a URL for the picture
id: args.images[0], //i
width: w,
height: h
}),
width: iOS ? Measure.pxToDP(w) : Alloy.Globals.pxToDP(w),
height: iOS ? Measure.pxToDP(h): Alloy.Globals.pxToDP(h)
});
image.addEventListener("click",goToEvent);
covers.add(image); //addView
//}
//},0);
}
var row = null;
if(args.rows) {
for(var j=0; j < args.rows.length; j++) {
//row = Alloy.createController("index/events/block/row",args.rows[j]).getView();
content.add(createRow(args.rows[j]));
}
}
container.add(createHeader(args));
container.add(covers);
container.add(content);
return container;
}
In particular, in the code provided, I call 4 times the function createRow() which creates a row inside the element (as seen in the picture). This function takes 7ms to 10ms to run for some reason. So calling it 4 times means it slows the whole process 28-40ms.
On Android the app doesn't lag at all. On iOS it stops user interaction completely until these operations are done
Using latest Titanium SDK (5.2.2GA) on Appcelerator Studio
Testing on iPhone 5, iOS simulator (4s,5,6,6s)
Thank you for your help
Ok so I'm new to Titanium and I'm pretty much a noob at Javascript
I tried doing this:
app.view.newMatrix = function() {
return {
matrix = Titanium.UI.createWindow({
title:'Add a New Matrix',
backgroundColor:'stripped',
navBarHidden: false
}),
// navbar buttons
cancel = Titanium.UI.createButton({
title:'Cancel'
}),
save = Titanium.UI.createButton({
title:'Save',
style:Titanium.UI.iPhone.SystemButton.SAVE
}),
name_label = Titanium.UI.createLabel({
text: "Matrix Name:",
font: { fontsize: 12, fontstyle: 'italic', color: '#336699' },
height: 35,
top: 35,
left: 30,
width: 150,
color: "black"
}),
name = Titanium.UI.createTextArea({
color: '#336699',
height: this.name_label.height,
top: this.name_label.top + 35,
left: this.name_label.left - 10,
width: 275,
borderRadius:15
}),
setItems = function() {
this.win.add(this.name);
this.win.add(this.name_label);
this.win.add(this.desc);
this.win.add(this.desc_label);
Ti.API.info("label:"+ this.name_label.height);
return this.win.open({modal: true, animation: true});
}
}
}
then called it like this:
app.controller.home = function() {
var home = app.view.home();
home.setItems();
home.butn.addEventListener("click", function(e){
app.controller.newMatrix();
});
home.butn2.addEventListener("click", function (e) {
matrix_table(tab);
});
home.butn3.addEventListener("click", function(e){
newItem();
});
home.butn5.addEventListener("click", function (e) {
item_table();
});
}
I did this because I saw a Titanium MVC suggestion here but I don't get why it returns an anonymous object. I can't access properties like name_label from within the name object.
I figured out that I should do this instead:
app.view.newMatrix = function() {
this.matrix = Titanium.UI.createWindow({
title:'Add a New Matrix',
backgroundColor:'stripped',
navBarHidden: false
}),
// navbar buttons
this.cancel = Titanium.UI.createButton({
title:'Cancel'
}),
this.save = Titanium.UI.createButton({
title:'Save',
style:Titanium.UI.iPhone.SystemButton.SAVE
}),
this.name_label = Titanium.UI.createLabel({
text: "Matrix Name:",
font: { fontsize: 12, fontstyle: 'italic', color: '#336699' },
height: 35,
top: 35,
left: 30,
width: 150,
color: "black"
}),
this.name = Titanium.UI.createTextArea({
color: '#336699',
height: this.name_label.height,
top: this.name_label.top + 35,
left: this.name_label.left - 10,
width: 275,
borderRadius:15
}),
this.setItems = function() {
this.win.add(this.name);
this.win.add(this.name_label);
this.win.add(this.desc);
this.win.add(this.desc_label);
Ti.API.info("label:"+ this.name_label.height);
return this.win.open({modal: true, animation: true});
}
}
and call it like this:
app.controller.home = function() {
return {
getView: function() {
var home = app.view.home();
home.setItems();
home.butn.addEventListener("click", function(e){
app.controller.newMatrix();
});
home.butn2.addEventListener("click", function (e) {
matrix_table(tab);
});
home.butn3.addEventListener("click", function(e){
newItem();
});
home.butn5.addEventListener("click", function (e) {
item_table();
});
}
}
}
But I don't know why the first example doesn't work. I mean aren't properties the same as variables? Also I do know that the second example is an object too.. is that how I'm supposed to do them? Also with the second example is the new keyword optional? Should I use it? I kinda wanted to stay away from that cause I'm not sure when I should use it.
thanks I hope I made sense. I do have it working but I don't know if the second example is the right way to go....