Develop Reference

TableView not showing in android titanium appcelerator

The TableView is showing in iOS simulator...but it doesn't show in android physical device...
They are running the same code and without error occur.
var row = Titanium.UI.createTableViewRow({
width : Titanium.UI.FILL,
height : "20%",
left : 0,
backgroundColor : "orange",
separatorColor : "transparent",
fav_id:id,
});
var lblTitle = Ti.UI.createLabel({
top : "5%",
left : "0%",
height : Titanium.UI.SIZE,
width : "90%",
text : title,
textAlign : Ti.UI.TEXT_ALIGNMENT_LEFT,
color : "black",
//backgroundColor : 'blue',
maxLines: 2,
touchEnabled : false
});
var lblDate = Ti.UI.createLabel({
top : "50%",
left : "0%",
height : Titanium.UI.SIZE,
width : "90%",
text : date,
textAlign : Ti.UI.TEXT_ALIGNMENT_LEFT,
color : "black",
//backgroundColor : 'blue',
//maxLines:1,
touchEnabled : false
});
var lblCategory = Ti.UI.createLabel({
top : "50%",
left : "60%",
height : Titanium.UI.SIZE,
width : "90%",
text : category,
textAlign : Ti.UI.TEXT_ALIGNMENT_LEFT,
color : "black",
touchEnabled : false
//backgroundColor : 'white',
//maxLines:1,
});
row.add(lblTitle);
row.add(lblDate);
row.add(lblCategory);
dataTable.push(row);
$.tblFavourite.data = dataTable;
what happened to the android os? does design affected to the output of the tableview?

I think percentage is not working in case of tableViewRow.
Try to set row.height = "50dp"
Hope this will help you.

As Suraj already pointed out it is not possible to use percentages as the row height in Android. But there is a workaround I found in the Appcelerator forums:
You should calculate your percentage by yourself. Use Ti.Platform.displayCaps.platformWidth and Ti.Platform.displayCaps.platformHeight for your calculation.
Example for 10% height:
height : Math.floor(Ti.Platform.displayCaps.platformHeight / 10)

webview content breaks/distorted in titanium android when scrolling

I am having this unexpected issue in my current project in TITANIUM.
I am using a webview for showing a local html file. It works perfect in iOS and in some android device as well. But in most of the HD android devices the html page or the contents of webview breaks while scrolling. Here is my code
var htmlTemplate = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'extras', 'learnMore.html');
var cssTemplate = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'extras', 'learnMore.css');![enter image description here][1]
var html = htmlTemplate.read().text;
var css = cssTemplate.read().text;
html = html.replace("#css#", css);
//Animations Transformations
var small = Ti.UI.create2DMatrix({
scale : 0.05
});
var big = Ti.UI.create2DMatrix({
scale : 1.2
});
var normal = Ti.UI.create2DMatrix({
scale : 1
});
//Animation Durations
var smallDuration = 350;
var bigDuration = 350;
var normalDuration = 250;
var win = Ti.UI.createWindow({
backgroundColor : 'transparent',
//navBarHidden : true,
});
var windowView = Ti.UI.createView({
top : OS_IOS ? 20 : 1,
right : 1,
bottom : OS_IOS ? 10 : 1,
left : 1,
backgroundColor : '#fff',
borderRadius : 7,
});
var closeImage = Ti.UI.createImageView({
zIndex : 1,
top : 5,
right : 1,
width : 35,
height : 35,
image : "/images/icons/black_cross_icon.png"
});
closeImage.addEventListener('click', closeWindow);
var webView = Ti.UI.createWebView({
width : '100%',
height : Ti.UI.SIZE,
backgroundColor : "transparent",
top : 0,
html : html,
//overScrollMode : Titanium.UI.Android.OVER_SCROLL_NEVER,
});
windowView.add(webView);
win.add(windowView);
win.add(closeImage);
function closeWindow() {
if (OS_ANDROID) {
win.close();
return;
}
win.animate({
duration : 300,
transform : big
}, function() {
win.animate({
duration : smallDuration,
transform : small
}, function() {
win.close();
webView = null;
});
});
}
(function() {
win.open();
if (OS_ANDROID) {
return;
}
win.transform = small;
win.animate({
duration : bigDuration,
transform : big
}, function() {
win.animate({
duration : normalDuration,
transform : normal
});
});
})();
win.addEventListener('open', function(e) {
Ti.API.error('********************* Learnmore OPEN ***********************');
if (OS_ANDROID) {
win.activity.actionBar.hide();
}
});
https://www.dropbox.com/s/ade8wssi5ima3gr/10671472_702509996463626_2272456868867723707_n.jpg?dl=0

Ok now i know this is not an ideal solution but if you are a titanium developer you have to deal with this kind situations in daily basis especially for our enemy-friend Android.
So as a work around what i have done is reloaded the html of webview second time after the webview is being loaded for first time.
var toggle = false;
webView.addEventListener('load', function(e) {
if (toggle == false && OS_ANDROID) {
this.html = html;
toggle = true;
}
});
this is beacuse in my html file i have set
<meta name="viewport" content="width=device-width, initial-scale=0.9,user-scalable = no" />
But unfortunately it was not taken effect some time and thus while scrolling it shows some buggy UI.After the work around it seems the meta tag works.
Hope it helps some one who came across something like this.

How to create registration form in Titanium using android and pass data to another form?

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

Titanium Android Simple Form Creation

Im a Titanium Beginner who is trying to create a form page with 2 textfields of Name and address and a DateTimePicker. I am facing 2 problems right now being :
1) the DateTimePicker is successfully shown but i would like both of it and also including the 2 textfields to be on the same window, with a same submit button.
2) I have tried numerous times but am unable to create a simple textfield at all even just creating it on a single page.It just doesnt show up.
Anyone could offer some constructive help?
Thanks in advance. The Below is my current code.
var winTimePicker = Titanium.UI.createWindow({});
winTimePicker.backgroundColor = 'black';
var doneBtn = Ti.UI.createButton({
title: 'Done',
});
doneBtn.addEventListener('click', function() {
winTimePicker.hide();
});
winTimePicker.add(doneBtn);
var timePicker = Ti.UI.createPicker({
type:Ti.UI.PICKER_TYPE_TIME,
bottom:0,
});
// turn on the selection indicator (off by default)
timePicker.selectionIndicator = true;
timePicker.addEventListener('change', function(e) {
//your code
});
winTimePicker.add(timePicker);
//open window
winTimePicker.open();
var winDatePicker = Titanium.UI.createWindow({});
winDatePicker.backgroundColor = 'black';
var doneBtn = Ti.UI.createButton({
title: 'Done',
});
doneBtn.addEventListener('click', function() {
winDatePicker.hide();
});
winDatePicker.add(doneBtn);
var datePicker = Ti.UI.createPicker({
type:Ti.UI.PICKER_TYPE_DATE,
bottom:0,
});
// turn on the selection indicator (off by default)
datePicker.selectionIndicator = true;
datePicker.addEventListener('change', function(e) {
//your code
});
winDatePicker.add(datePicker);
//open window
winDatePicker.open();
var textField = Titanium.UI.createTextField({
color:'#336699',
width:"auto",
height:"auto",
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});
var textField2 = Titanium.UI.createTextField({
color:'#336699',
width:"auto",
height:"auto",
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});

Check this code out and make changes as you find suitable to it:
var timePickerWin = Ti.UI.createWindow({
navBarHidden : true,
backgroundColor : '#fff'
});
var startTime = Ti.UI.createPicker({
top : '15dp',
left : '50dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_TIME,
format24 : false,
height : '130dp',
// width:'auto'
});
var endTime = Ti.UI.createPicker({
top : '15dp',
left : '50dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_TIME,
format24 : false,
height : '130dp'
});
var nextButton = Ti.UI.createButton({
width : '220dp',
height : '45dp',
top : '15dp',
title : 'Next',
backgroundColor : '#294079',
font : {
fontSize : '18dp',
fontWeight : 'bold'
},
color : '#fff'
});
startTime.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
startPickerValue = e.value;
});
endTime.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
endPickerValue = e.value
});
var fullNameTextBox = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '15dp',
color : '#000000',
hintText : 'Enter full name'
// backGroundColor:'gray',
});
var emailTextBox = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '15dp',
color : '#000000',
hintText : 'Enter email'
});
Finally add all these UI elements to the window which is the timePickerWin using add function
timePickerWin.add(startTime);
and so on for all the UI elements.After that open the timePickerWin as below
timePickerWin.open()
Make suitable layout changes by varying the left,right,height and width properties of each element.

How to dock a footer menu to bottom in Appcelerator Titanium?

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.