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.
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);
Hi I have implemented a side bar navigation.
It has 3 options like a sidebar menu in that first screen(i.e index.js) is the main screen.
The problem is when I go to any screen via sidebar menu then again comeback to main screen and then from main screen if I press back button it goes to last screen visited.The expected behaviour should be that if I come back to main screen it should exit application.
So how to track the main screen.
And if I am on the main screen it should anyhow exit application rather than going from main screen to last visited screen.
Here is the code.
The code is bit lengthy.
Can anyone help on this?
index.xml file
<Alloy>
<Window id = "win" onOpen="openCurrentIssue">
<View id="view1" width="75%" height="Ti.UI.FILL" left="0%" >
<TableView id="menuTable"></TableView>
</View>
<View id="view2" width="Ti.UI.FILL" height="Ti.UI.FILL" backgroundColor="#A9F5A9" >
<View id="viewcheck1" >
<Label id="title" width="Ti.UI.SIZE" text="PolymerCommunique" height="Ti.UI.SIZE" textAlign="Ti.UI.TEXT_ALIGNMENT_CENTER"></Label>
<ImageView id="menuImg" image="/images/menu.png" onClick="showsideBar" left="5"></ImageView>
</View>
<View id="viewcheck2" width="Ti.UI.SIZE" height="Ti.UI.SIZE" backgroundColor="#A9F5A9" layout="vertical">
<Label id="cIssue" text="Demo" width="Ti.UI.SIZE" height="Ti.UI.SIZE" textAlign="Ti.UI.TEXT_ALIGNMENT_CENTER" top="10" color="black"></Label>
<ImageView id="cImage" width="Ti.UI.SIZE" height="Ti.UI.SIZE" top="45"></ImageView>
<Button id="cButton" title="Advertiser"></Button>
</View>
<View id="viewBelow" width="150" height="Ti.UI.FILL" backgroundColor="#A9A5A9" left="-150" visible="false" top="40">
<TableView id="menuTable"></TableView>
</View>
</View>
</Window>
index.js file
var isMenu = false;
function showsideBar(e) {
try {
if (isMenu) {
$.viewBelow.animate({
left : -150,
//left :0,
duration : 300,
curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
});
isMenu = false;
} else {
$.viewBelow.visible=true;
$.viewBelow.animate({
left : 0,
duration : 300,
curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
});
isMenu = true;
}
} catch(e) {
Ti.API.info('Exception from index.js ' + e.value);
}}
function openCurrentIssue(e) {
try {
var url = "http://polymerscommunique.com/api/current_issue.aspx";
var jsonResponse;
var response;
var xhr = Ti.Network.createHTTPClient({
onload : function() {
Ti.API.info("Received text: " + this.responseText);
jsonResponse = JSON.parse(this.responseText);
$.cImage.image = jsonResponse[0].cover_image_url;
$.cIssue.text = jsonResponse[0].issue_title;
},
onerror : function(e) {
Ti.API.debug(e.error);
alert('error');
},
timeout : 5000
});
xhr.open("GET", url);
xhr.send();
} catch(e) {
Ti.API.info('Exception from index.js ' + e.value);
}}
createTableRow = function(args) {
var row = Ti.UI.createTableViewRow();
var parentView = Ti.UI.createView({
width : Ti.UI.FILL,
height : 40,
left : 5
});
var childView = Ti.UI.createView({
height : Ti.UI.SIZE,
width : Ti.UI.FILL,
layout : "horizontal"
});
var image = Ti.UI.createImageView({
image : args.leftImage,
width : 18,
height : 20,
left : 5
});
childView.add(image);
var title = Ti.UI.createLabel({
color : "white",
text : args.title,
left : 10,
font : {
fontSize : 17,
fontWeight : 'bold'
}
});
childView.add(title);
parentView.add(childView);
row.add(parentView);
var separator = Ti.UI.createView({
bottom : 0,
height : "1dp",
width : Ti.UI.FILL,
backgroundColor : "#303030"
});
row.add(separator);
return row;};
var rows = [];
rows.push(createTableRow({
title : 'Current Issue',
leftImage : '/home.png'}));
rows.push(createTableRow({
title : 'Past Issues',
leftImage : '/settings.png'}));
rows.push(createTableRow({
title : 'Subscribe',
leftImage : '/logout.png'}));
$.menuTable.setData(rows);
$.menuTable.addEventListener('click', function(e) {
if(e.index=="0"){
Alloy.createController('index', 'just');
}
if (e.index == "1") {
showsideBar();
Alloy.createController('pastissues', 'just');
}
else if (e.index == "2") {
showsideBar();
Alloy.createController('check','just');
} });
$.win.open();
There are two other files also as seen from in table listener.
If that is also needed please let me know.
You can listen to the back button event in your main window controller, then end the current activity on click:
$.home.addEventListener('android:back', function (e) {
var activity = Titanium.Android.currentActivity;
activity.finish();
});
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.
I am trying to add an overlay for android camera using Titanium SDK. Everything is fine. But, zoom is not working. Is there a way to implement that in titanium?
I am using the latest Titanium SDK 3.2.1GA
Here's my code:
// Containing window
var win = Ti.UI.createWindow({
navBarHidden : true,
backgroundColor : "#ffffff",
height : Ti.UI.FILL,
width : Ti.UI.FILL
});
// Blue button that opens the camera
var open_camera = Ti.UI.createButton({
height : Ti.UI.SIZE,
width : Ti.UI.SIZE,
bottom : 50,
title : 'Camera'
});
// Adding the "open camera" button
win.add(open_camera);
// Function to show the camera
function openCamera() {
alert('opening');
open_camera.backgroundColor = "#00ff00";
// Just checking if we got here
// The camera overlay I want displayed over the camera
var camera_overlay = Ti.UI.createView({
top : 0,
left : 0,
height : Ti.UI.FILL,
width : Ti.UI.FILL
});
var take_picture = Ti.UI.createButton({
height : Ti.UI.SIZE,
width : Ti.UI.SIZE,
bottom : 50,
title : 'Take Picture'
});
take_picture.addEventListener('click', function() {
Ti.Media.takePicture();
});
camera_overlay.add(take_picture);
// The actual show camera part
Ti.Media.showCamera({
success : function(e) {
alert('success');
// I want this!
},
cancel : function(e) {
},
error : function(error) {
},
autohide : false,
showControls : false,
mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO],
overlay : camera_overlay // The camera overlay being added to camera view
});
};
// Click event to show the camera
open_camera.addEventListener("click", function(e) {
openCamera();
});
// Open the window
win.open();
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.