For New Comers In Appcelerator: May 2013

Tuesday, 28 May 2013

Text to Speech in Appcelerator Using Google Translater(In Alloy)

// I just Test it in iOS But i think it also work fine in android :)

// The Best part is in this example is http://translate.google.com/translate_tts?tl=en&q= . Google    provide us this link to easily convert any text in to speech .

index.xml

<Alloy>
    <Window class="container">
        <Label id="label" onClick="doClick">Sound Play with the use of google translater Click Here.</Label>
    </Window>
</Alloy>

index.tss

".container": {
    backgroundColor:"white"
},
"Label": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
}

index.js

function doClick(e) {
    var name = 'Appcelerator is Very Good Platform'; // You can write any thing here :)

    var googleUrl = 'http://translate.google.com/translate_tts?tl=en&q=' + name;
    var xhr = Titanium.Network.createHTTPClient();
    xhr.open("GET", googleUrl);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send();

    xhr.onerror = function(e) {
        alert('On Error');
    }

    xhr.onload = function() {
        var player = Ti.Media.createSound({
            url : googleUrl
        });
        player.play();
    }
}

$.index.open();

Screen Shot : )

Custom Html file open in webView in appcelerator(In Alloy)

// Its very simple create your own HTML file and you can easily add in appcelerator and open it in webView.

// I checked it in iOS .

// Try starting your HTML file with a simple <HTML> tag only. You don't need the doctype info in there. I had the same problem and that's how I fixed it.

index.js
$.index.open();

var webview = Titanium.UI.createWebView({url:'index.html'}); // Path of html file
$.map.add(webview);

index.tss

".container": {
    backgroundColor:"white"
},
"Label": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
}

index.xml

<Alloy>
    <Window class="container">
       <View id="map"/>
    </Window>
</Alloy>

index.html file Dropbox link.

https://dl.dropboxusercontent.com/u/72783403/AtoZ/index.html

ScreenShot : )

Loading Style for iPhone in Appcelerator(In ALLOY)

index.xml

<Alloy>
    <Window class="container">
        <View id="backdrop"/>
        <View id="container">
            <ImageView id="loader"/>
            <Label id="message" textid="Loading..."/>
        </View>
    </Window>
</Alloy>

index.js

$.loader.images = [
    '/img/loading/load-cloud1.png',
    '/img/loading/load-cloud2.png',
    '/img/loading/load-cloud3.png',
    '/img/loading/load-cloud4.png',
    '/img/loading/load-cloud5.png',
    '/img/loading/load-cloud6.png',
    '/img/loading/load-cloud7.png',
    '/img/loading/load-cloud8.png',
    '/img/loading/load-cloud9.png'
];

$.start = function() {
    $.loader.start();
};

$.stop = function() {
    $.loader.stop();
};

$.setMessage = function(key) {
    $.message.text = "Loading...";
};

$.start();

$.index.open();

index.tss

'#container': {
    layout:'vertical',
    height:Ti.UI.SIZE
},

'#backdrop': {
    backgroundColor:'#232323',
    opacity:0.75
},

'#loader': {
    width:'75dp',
    height:'46dp'
},

'#message': {
    color:'#ebebeb',
    textAlign:'center',
    height:Ti.UI.SIZE,
    width:Ti.UI.SIZE,
    font: {
        fontSize:'12dp',
        fontWeight:'bold',
        fontFamily : "PFDinDisplayPro-Regular"
    }
}

All the images, pleases download from this dropbox link

https://dl.dropboxusercontent.com/u/72783403/loading.zip

Screen Shot :)

Friday, 24 May 2013

Generate CSV file in Appcelerator

// In app.js file just write this code

Part i -

var csv = require('exportCsvData');

var win = Ti.UI.createWindow({

    backgroundColor:'#ccc',

    title:'CSV Import Module'

})

var createCsv = Titanium.UI.createButton({

    title:'CSV',

    top:'140',

    left:'110',

    height:'40',

    width:'115',

    color:'black'

});

win.add(createCsv);

createCsv.addEventListener('click', function(e){

   var input = [

     [" data 0", " place 1", " address 2", " name 3"],

     [" data 0", " place 1", " address 2", " name 3"],

     [" data 0", " place 1", " address 2", " name 3"],

     [" data 0", " place 1", " address 2", " name 3"]

   ];

   var op = csv.exportCsvData(input);

   alert("Output file path = "+ op); 

});
 
win.open();

// Create on exportCsvData.js file

Part ii -

exports.exportCsvData = function(input)

{

    var rowTxt = "";

    for(var i=0;i < input.length; i++){ // row iteration

        for(var j = 0; j < input[i].length; j++){ // column iteration

            rowTxt += '"' + input[i][j] + '"';

            if(j < (input[i].length-1))

            {

                rowTxt += ',';

            }

        }

        rowTxt += '\n';// adding new line at end of row

    }

    // creating output file in application data directory

    var outputFile = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,'output.csv');

    // writing data in output file 

        outputFile.write(rowTxt); 

    if(outputFile.exists){

        alert("CSV generated!!!");

    }

    // return output file path

    return outputFile.nativePath;    

}

Thursday, 23 May 2013

Android Intents Functionality

Ti.UI.backgroundColor = '#000000';
 
var win = Ti.UI.createWindow();
var label = Ti.UI.createLabel({
    text: 'Say Something!',
    color:'#eeeeee',
    font: {
        fontSize:'20dp',
        fontWeight:'bold'
},
    height:'auto',
    top:'5dp'
});
 
var textarea = Ti.UI.createTextArea({
    width:'90%',
    top:'44dp',
    bottom: '70dp',
    left:10,
    right:10
});
 
var button = Ti.UI.createButton({
    title:'Share',
    height:'auto',
    width:'auto',
    font: {
        fontSize:'24dp'
    },
    bottom:'10dp',
    right:10
});
 
button.addEventListener('click', function(e) {
    var intent = Ti.Android.createIntent({
        action: Ti.Android.ACTION_SEND,
        type: "text/plain"
    });
 
intent.putExtra(Ti.Android.EXTRA_TEXT, textarea.value);
intent.addCategory(Ti.Android.CATEGORY_DEFAULT);
Ti.Android.currentActivity.startActivity(intent);
});
 
win.add(label);
win.add(textarea);
win.add(button);
 
win.open();