how to make my android App faster using titanium App - titanium

I have noticed when i deployed App in Android device using titanium Alloy, Its working slowly and it seem like android App need time to redirect to next page after touch and click.it goes to next page within 3 or 4 seconds after i clicked on any UI elements(Button,view,label,image)
On other side, its working perfectly with IOS devices (iphone and ipad)
I don't know what should exactly a problem with android.I also reset my factory data in android and tested app again but still issues arrives
Is this android touch/click issue?
Please feedback on my issues and give me your suggestion how to fix it. Thanks in advance

Your problem is not the device, but probably is your login's API. I suggest you insert an indicator to bridge the waiting time like this:
----index.xml----
<Alloy>
<Window class="login_container" height="auto" horizontalWrap="true">
<ActivityIndicator id="activityIndicator" message="Wait please..."/>
----index.js----
function login(e) {
var uname = $.username.value.split(' ').join('');
var pwd = $.password.value.split(' ').join('');
if(uname == ""){
alert("Enter username.");
return false;
}
if(pwd == ""){
alert("Enter password.");
return false;
}
$.activityIndicator.show();
And before change controller add
$.activityIndicator.hide();

Below is my controller,view files for one page in titanium
----index.js---
function login(e) {
var uname = $.username.value.split(' ').join('');
var pwd = $.password.value.split(' ').join('');
if(uname == ""){
alert("Enter username.");
return false;
}
if(pwd == ""){
alert("Enter password.");
return false;
}
//if(results.length == 0){
if (Titanium.Network.networkType === Titanium.Network.NETWORK_NONE) {
alert('There is no internet connection.');
return false;
}
var loginReq = Titanium.Network.createHTTPClient();
var params = {
func : "'"+Ti.Utils.base64encode('check_login')+"'",
username : uname,
password : pwd
};
loginReq.onload = function()
{
var json = this.responseText;
var response = JSON.parse(json);
if(response == 'account_inactive'){
alert('Your account has been inactive. Please contact to your company');
//$.index.close();
var index = Alloy.createController('index').getView();
index.open();
return false;
}
if(response == 'invalid'){
alert('Invalid username or password');
//$.index.close();
var index = Alloy.createController('index').getView();
index.open();
return false;
}
else
{
results = {
iuser_id: response.iuser_id,
signup_ids: response.signup_ids,
staff_id : response.staff_id,
vusername: response.vusername,
vfirst_name: response.vfirst_name,
vlast_name: response.vlast_name,
vemail : response.vemail,
vpwd : response.vpwd
};
Ti.App.Properties.setObject("user_session",results);
results = null;
var flag = '';
if (!Ti.App.Properties.hasProperty('installed'))
{
Ti.App.Properties.setBool('app:isLoggedIn', true);
Ti.App.Properties.hasProperty('installed');
Ti.App.Properties.setBool('installed', true);
var th_sign = Alloy.createController('login').getView();
th_sign.open();
}
else
{
var th_sign = Alloy.createController('account').getView();
th_sign.open();
}
}
json = null;
response = null;
};
if(os_name == 'android'){
loginReq.open("GET", WEB_ROOT+"get_init.php");
}
else{
loginReq.open("POST", WEB_ROOT+"get_init.php");
}
loginReq.send(params);
}
$.index.open();
----index.xml-------
<Alloy>
<Window class="login_container" height="auto" horizontalWrap="true">
<ScrollView id="scrollView_index" showVerticalScrollIndicator="true" height="100%" width="100%" scrollType="vertical">
<View id="index_view">
<ImageView class="logo" image="/images/login/logo.png" top='25' />
<TextField id="username" class="usernameTxt" value="" border="0" top="230" />
<TextField id="password" class="passwordTxt" value="" border="0" top="275" />
<Button id="loginButton" class="login_bg" onClick="login">Login</Button>
</View>
</ScrollView>
</Window>
</Alloy>

I get understood what You said and explained by use of Activity indicator to wait for some time But that will solve problem only for Login Activity. But wherever I used UI utilities like, (Button Onclick, Label onclick, Image Onclick, View Onclick) It takes at least 4 to 5 seconds time to redirect to next page. I also used Loader between switching of two pages But still it takes time(4 to 5 seconds) to effect click event and redirect to next page

Related

Cant receive data from postMessage in react native webview

here is my injected js:
window.ReactNativeWebView.postMessage(JSON.stringify({
external_url_open: null,
height: Math.max(document.body.offsetHeight, document.body.scrollHeight, document.documentElement.clientHeight)
}));
(function(){
var attachEvent = function(elem, event, callback)
{
...
}
var all_links = document.querySelectorAll('a[href]');
if ( all_links ) {
for ( var i in all_links ) {
if ( all_links.hasOwnProperty(i) ) {
attachEvent(all_links[i], 'onclick', function(e){
if ( new RegExp( '^https?:\/\/www.dropbox\.com.*', 'gi' ).test( this.href ) ) {
// handle external URL
e.preventDefault();
window.ReactNativeWebView.postMessage(JSON.stringify({
external_url_open: this.href,
}));
}
else { window.location.href = this.href; }
});
}
}
}
})();
I want to receive the pages height on react native side with this code:
<WebView
...
javascriptEnabled={true}
onMessage={(event) => {
// retrieve event data
var data = event.nativeEvent.data; // maybe parse stringified JSON
try {
data = JSON.parse(data)
} catch ( e ) { }
// check if this message concerns us
if ( 'object' == typeof data && data.external_url_open ) {
if (data.external_url_open != null){
// proceed with URL open request
Linking.openURL(data.external_url_open);
}
else {
height = data.height;
console.log(data.page_height);
}
}
}}
injectedJavaScript={jsCode}
...
/>
the link handling part works but the height receive part doesn't and I dont see anything in console when refreshing the page. Can anyone help?
I just needed to relocate this else to the outer if:
else {
height = data.height;
console.log(data.page_height);
}

Validating the login window in appcelerator

I am working with appcelerator and i am creating a login window. But all the validations do not seem to work properly. Also the error i am facing for the validation where username should not be numeric is throwing me a runtime error. Please help!
function loginUser() {
var uName = $.username;
var pwd = $.password;
var correctUName = "sayali";
var correctPwd = "123sayali";
var letters = /^[A-Za-z]+$/;
if(uName == "" || pwd == ""){
alert("Please fill all the credentials!!");
}
else{
if(uName.match == letters){
if(uName == correctUName){
if(pwd == correctPwd){
alert("Login Successful!!");
}
else{
alert("Incorrect Password!");
}
}
else{
alert("User doesn't exist!");
}
}
else{
("Numeric values are not allowed in Username!");
}
}
}
Instead of using uName.match == letters you should use i.e. letters.test(uName)
Click here for more information on regular expressions and Javascript

Image not displayed after camera click on some of the android devices

I am using camera in my website, in mobile phone browser I am having some problems, in some of the phone browser after clicking the camera, Image not displayed, Its show a blank image icon.
Can u plz find out what is the problem in my code?
(function () {
var takePicture = document.querySelector("#take-picture"),
showPicture = document.querySelector("#show-picture");
if (takePicture && showPicture) {
// Set events
takePicture.onchange = function (event) {
// Get a reference to the taken picture or chosen file
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
try {
// Get window.URL object
var URL = window.URL || window.webkitURL;
// Create ObjectURL
var imgURL = URL.createObjectURL(file);
// Set img src to ObjectURL
showPicture.src = imgURL;
// Revoke ObjectURL
URL.revokeObjectURL(imgURL);
}
catch (e) {
try {
// Fallback if createObjectURL is not supported
var fileReader = new FileReader();
fileReader.onload = function (event) {
showPicture.src = event.target.result;
};
// fileReader.readAsDataURL(file);
fileReader.readAsBinaryString(file);
var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
switch(exif.Orientation){
case 8:
showPicture.rotate(90*Math.PI/180);
break;
case 3:
showPicture.rotate(180*Math.PI/180);
break;
case 6:
showPicture.rotate(-90*Math.PI/180);
break;
}
}
catch (e) {
// Display error message
var error = document.querySelector("#error");
if (error) {
error.innerHTML = "Neither createObjectURL or FileReader are supported";
}
}
}
}
};
}
})();
<input type="file" id="take-picture" accept="image/*">
<div id="mobilecameraOutput"> <img src="about:blank" alt="" id="show-picture" /></div>

Titanium Alloy - Closeing window

Im working in Titanium Alloy and creating a popup window as a widget. I want to have the close - image up over the right top corner, so it stick abit out of the popup window.
So I created 2 separate window in the widget xml-file. One to just hold the close - image and one who is the popup - window.
Everythings look as I want, but I cant get the popup - window to close?!
I have tried:
$.myWindow.close();
Amd I have tried:
var win = Widget.createController('myWindow', 'myWindowID').getView();
win.close();
But nothing happens
Here is my xml - code:
<Alloy>
<Window id="popup">
<View id="myImagesViewIn" class="myImagesViewIn" onClick="closeWin">
<ImageView id="myImageIn" class="myImageIN" />
</View>
</Window>
<Window id="winImageOut" onClick="closeWindow">
<View id="myImagesViewOut" class="myImagesViewOut" >
<ImageView id="myImageOut" class="myImageOut" />
</View>
</Window>
</Alloy>
And here is my JS-code:
var args = arguments[0] || {};
$.popup.transform = args.transform || '';
/*
exports.setDataModalWindow = function(data) {
$.lblModalWinHead.text = data.title;
$.lblModalWinBody.text = data.text;
};
*/
function fnCloseClick() {
$.viewModal.close();
}
/*
$.myImagesViewOut.addEventListener('click', function(e) {
$.popup.close();
});
*/
function closeWin(e) {
$.myImagesViewOut.setVisible(false);
$.popup.close();
}
function closeWindow(e) {
//$.popup.close();
var wins = Widget.createController('widget', 'popup').getView();
wins.setVisible(false);
alert('hejsan');
//Ti.API.info('close');
}
exports.openModalWindow = function(arg) {
//$.lblModalTitle.text = arg.title || 'foo';
//$.lblModalText.text = arg.text || 'ff';
var t = Titanium.UI.create2DMatrix().scale(0);
var args = {
transform : t
};
var controller = Widget.createController('widget', args).getView();
controller.open();
// controller.animate(a2);
var t1 = Titanium.UI.create2DMatrix();
t1 = t1.scale(1.2);
var a1 = Titanium.UI.createAnimation();
a1.transform = t1;
a1.duration = 400;
controller.animate(a1);
var b1 = Titanium.UI.create2DMatrix();
var a2;
a1.addEventListener('complete', function() {
b1 = b1.scale(1.5);
a2 = Titanium.UI.createAnimation();
a2.transform = b1;
a2.duration = 400;
controller.animate(a2);
});
// create the controller a keep the reference
/*
controller.setDetails({
label: 'Are you sure you wish to log out?\n\nIf you do so you will no longer be able to take part in any challenges until you login again.',
ok: 'Log me out',
cancel: 'Cancel'
});
*/
// now get a reference to the UI inside the controller
//var win = controller.getView();
a1.addEventListener('complete', function() {
// simple reset animation
var t2 = Ti.UI.create2DMatrix();
var a3 = Titanium.UI.createAnimation();
a3.transform = t2;
a3.duration = 400;
controller.animate(a3);
$.winImageOut.open();
});
};
first thing is you are opening popup window so you should open that window...
then you should close bot the window in closeWindow function.
function closeWindow(e) {
$.popup.close();
$.winImageOut.close();
alert('hejsan');
//Ti.API.info('close');
}
I do not know your requirement but you should use only one window to show popup then its easy for you to handle open,close event of window.

cascaded dropdown in struts

I have to design a web page using struts.
I have to show two dropdowns.
The data in the first dropdown will be populated dynamically from database. This part is completed.
I have to populate the data in second dropdown based on the selection in 1st dropdown.
I need help for this development since I am new to struts technology.
Thanks,
Sachin
You can use ajax to load data to the dropdown2 by invoking it in the onchange method for dropdown1
DropDown1:
----------
<s:select key="label.name" list="list1" onchange="reloadView();" name="id" id="list">
</s:select>
reloadView()
------------
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser has no AJAX Support!");
return false;
}
}
}
var url = "yourUrl";
ajaxRequest.open("POST", url, true);
ajaxRequest.onreadystatechange = function()
{
try
{
if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
var res = ajaxRequest.responseText;
if (res)
{
document.getElementById("yourDiv").innerHTML = res;
adjustTable();
}
}
}
catch (e)
{
}
}
ajaxRequest.send(null);
DropDown2
---------
<div id="yourDiv">
<s:select>
</div>