I have created Map view using following code
var map = Ti.Map.createView({
mapType:Titanium.Map.STANDARD_TYPE,
regionFit: true,
animate: true,
touchEnabled: true,
userLocation:true,
region:{
latitude: 19.076719,
longitude: 72.878583,
latitudeDelta:0.5,
longitudeDelta:0.5
}
});
I am creating Annotation using following code
var pin = Ti.Map.createAnnotation({
latitude:19.076719,
longitude:72.878583,
title: "Dronzer",
image:"pin.png"
});
map.addAnnotation(pin);
Question: How to replace this image with number "12" to show it on map?
After few days some how I have found the solution.
Create a Label
var price = Ti.UI.createLabel({
text : " "+data.price,//Number=12 Input from server
color : 'black',
font : {fontSize:'15dp',font:"monospace",fontWeight:"bold"},
height : '30dp',
width : '30dp',
left: '50%',
backgroundImage:"red_pin1.png",
});
Create an ImageView and set its image property as a blob.
var anImageView = Ti.UI.createImageView({
image : price.toImage(), //setting label as a blob
width : 'auto',
height : 'auto',
});
Create an Annotation and set its image property as blob.
var pin = Ti.Map.createAnnotation({
myid:data._id,
latitude:data.latitude,
longitude:data.longitude,
title: data.vendor_name,
image:anImageView.toBlob() //setting ImageView as blob
});
Related
I generate a tableView in a loop, and i put a label in each row, which has different length of text each time. I set the rows' height like this:
height : Ti.UI.SIZE,
and it works pretty good, the rows' heights are always big enough to display the full text. But when i swipe up and down, the rows' heights changes for no reason: they become very big or very small, and i have no idea why. I'll paste in the code snippet that causes the problem. It only works bad on Android, it works perfectly on mobileweb.
var i = 0;
var tableList = Ti.UI.createTableView({
separatorColor : '#fef3ff',
top:'88',
});
var tableCategoryData = [];
while(i<answer.QuestionList.length)
{
var label = Ti.UI.createLabel({
text:answer.QuestionList[i].CategoryTitle,
color : '#000000',
font:{
color:'#000000',
fontSize:'20sp',
},
textAlign:Ti.UI.TEXT_ALIGNMENT_LEFT,
left : 13,
top:'10dp',
});
var rowouter = Ti.UI.createView({
bottom:'10dp',
touchEnabled: true,
height:Ti.UI.SIZE,
backgroundColor:'#fef3ff',
});//Andris
var row = Ti.UI.createTableViewRow({
className: 'row',
objName: 'row',
touchEnabled: true,
height:rowouter.height,
color: "#000000",
font : {
color : '#000000'
},
backgroundColor:'#fef3ff',
});
rowouter.add(label);
row.add(rowouter);
tableCategoryData.push(row);
++i;
}
tableList.setData(tableCategoryData);
How to change the font-color in a TableView. Other elements can be changend with the color attribute.
When i run the app on my Android Phone the table is displayed, but the font-color is still grey/white. There are also no table borders. I want to set the color to black.
// create an array of anonymous objects
var tbl_data = [
{title:'Row 1'},
{title:'Row 2'},
{title:'Row 3'}
];
// now assign that array to the table's data property to add those objects as rows
var table = Ti.UI.createTableView({
data:tbl_data,
color: '#000000'
});
amountView.add(table);
According to Titanium docs; TableView does not have color property.
What you can do is create TableViewRow and add them to TableView; and finally applying TableViewRow's color property. Example below:
var tableData = [],
win = Ti.UI.createWindow();
tableData.push(Ti.UI.createTableViewRow({ title: 'Apples', color : "#000" }));
tableData.push(Ti.UI.createTableViewRow({ title: 'Bananas', color : "#000" }));
tableData.push(Ti.UI.createTableViewRow({ title: 'Carrots', color : "#000" }));
tableData.push(Ti.UI.createTableViewRow({ title: 'Potatoes', color : "#000" }));
var table = Ti.UI.createTableView({
data: tableData
});
win.add(table);
win.open();
Im having trouble just playing a simple sound as the function is undefined. The sound files are in the right spot so I dont know what's going wrong. I am a beginner with this so help is much appreciated.
//Level 1 Page
var win = Titanium.UI.currentWindow;
var tab = Titanium.UI.currentTab;
var leveloneview = Ti.UI.createView({
width : '100%',
height : '100%',
backgroundColor : 'blue',
});
var tile1 = Ti.UI.createImageView({
bottom : '100',
width : '100',
height : '100',
image : "images/pirate-icon.png",
});
var tile2 = Ti.UI.createImageView({
left : '50',
bottom : '100',
width : '100',
height : '100',
image : "images/pirate-icon.png",
});
var tile3 = Ti.UI.createImageView({
right : '50',
bottom : '100',
width : '100',
height : '100',
image : "images/pirate-icon.png",
});
var sound = Titanium.Media.createSound({
url : 'sounds/wheres_me_rum.mp3',
preload : true
});
var button = Ti.UI.createButton({
title : 'Click to play sound',
width : '200',
height : '40',
top : 20,
align:'center',
});
button.addEventListener('click', function(e) {
sound.play();
});
leveloneview.add(tile1);
leveloneview.add(tile2);
leveloneview.add(tile3);
leveloneview.add(button);
win.add(leveloneview);
Uncaught TypeError: undefined is not a function at /index.html (line 6080)
Ti.Media.Sound is not supported on mobile web. See http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Media.Sound for supported platforms.
Please give me idea how to create a registration form in titanium and pass fill up the registration data from that form to another form .
Following is a sample code for registration. I have created an additional file 'success.js' in the resource folder, shows the second window. Please try the following code
Write these line in the app.js file
var win1 = Ti.UI.createWindow({
width : 'auto',
height: 'auto',
backgroundColor : '#FFFFFF'
});
var txtName = Ti.UI.createTextField({
top : '25%',
width : '75%',
height: '35',
hintText : 'Name'
});
win1.add(txtName);
var txtAddress = Ti.UI.createTextField({
top : '35%',
width : '75%',
height: '40',
hintText : 'Address'
});
win1.add(txtAddress);
var btnRegister = Ti.UI.createButton({
top : '55%',
width : '50%',
height : '35',
title : 'Register'
});
win1.add(btnRegister);
win1.open();
btnRegister.addEventListener('click', function(){
var win2 = Ti.UI.createWindow({
width : 'auto',
height: 'auto',
backgroundColor : '#FFFFFF',
url : 'success.js'
});
win2.name = txtName.value;
win2.address = txtAddress.value;
win2.open();
});
// Write the following lines in the success.js file
var win2 = Ti.UI.currentWindow;
var name = win2.name;
var address = win2.address;
var lblName = Ti.UI.createLabel({
top : '30%',
width : '75%',
height : 'auto',
color : 'yellow',
backgroundColor : 'blue',
text : name,
textAlign : 'center'
});
var lblAddress = Ti.UI.createLabel({
top : '40%',
width : '75%',
height : 'auto',
color : 'yellow',
backgroundColor : 'blue',
text : address,
textAlign : 'center'
});
win2.add(lblName);
win2.add(lblAddress);
now complile the code and run. It worked with me. Try it
How do I dock a footer menu to the bottom of the screen on Android and iPhone in Appcelerator Titanium? I want to display 3 icons on the bottom of the screen.
I used Titanium.UI.View and set bottom: 0 to get it to dock to the bottom.
Yes, we use Ti.UI.Toolbar for this. Let see this example code:
var space = Titanium.UI.createButton({
systemButton: Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
var buttonNextEnd = Titanium.UI.createButton({
title: '>>'
});
var buttonNext1Page = Titanium.UI.createButton({
title: '>'
});
var buttonPrevEnd = Titanium.UI.createButton({
title: '<<'
});
var buttonPrev1Page = Titanium.UI.createButton({
title: '<'
});
var toolbarNav = Titanium.UI.createToolbar({
left : 0,
bottom: 0,
height : 40,
width : 320,
items: [buttonPrevEnd,space, buttonPrev1Page,space, buttonNext1Page, space,buttonNextEnd]
});
win.add(toolbarNav);
Use Titanium.UI.ToolBar for that.
If you are using Appcelerator Alloy Framework
The code in the XML view
<Alloy>
<Window title="My Nice Title">
... ... ...
... ... ...
<View class="footer-menu"></View>
</Window>
</Alloy>
The code in TSS
".footer-menu": {
backgroundColor: 'red',
width: '100%',
height: 40,
bottom: 0
}
This will push the view to bottom. Here is a screenshot.
Not using Alloy? It is similar in JS too.
// create window
var win = Ti.UI.createWindow({
// if anything
});
// create view
var footer_menu = Ti.UI.createView({
backgroundColor: 'red',
width: '100%',
height: 40,
bottom: 0
});
// add view to window
win.add(footer_menu);
Hope this is helpful. Thanks!
var footer = Ti.UI.createView({
height:25
});
var footerButton = Ti.UI.createLabel({
title:'Add Row',
color:'#191',
left:125,
width:'auto',
height:'auto'
});
footer.add(footerButton);
it works on android, but i still dont know why the button cant appear on iphone
Remember that Toolbars aren't compatible for Android or Tablet.
If you want to set buttons to the bottom of the screen, create a View, set it at the bottom and then distribute the buttons with relative position, considering the screen width.
Here's an example:
function FirstWindow() {
var self = Ti.UI.createWindow({
background : "black",
height : "auto",
width : "auto",
layout : "vertical"
});
teste = Ti.UI.createView({
left : 0,
bottom : 0,
opacity : .7,
backgroundColor : "#3d3d3d",
height : 55
});
var button1 = Ti.UI.createButton({
title : "button 1",
left : 0,
width : Titanium.Platform.displayCaps.platformWidth * 0.3
});
var button2 = Ti.UI.createButton({
title : "button 2",
left : Titanium.Platform.displayCaps.platformWidth * 0.33,
width : Titanium.Platform.displayCaps.platformWidth * 0.3
});
var button3 = Ti.UI.createButton({
title : "button 3",
left : Titanium.Platform.displayCaps.platformWidth * 0.66,
width : Titanium.Platform.displayCaps.platformWidth * 0.3
});
view.add(button1);
view.add(button2);
view.add(button3);
self.add(view);
return self;
}
module.exports = FirstWindow;
Doing this... you are positioning the buttons in the View.
The first button ( button1 ) begins in "left: 0" and has a width of 30% of the View.
The second button ( button2 ) begins after the first button plus a space, and so on...
And the height of them is the same as the view's.