ProFUSION | Aggregator

Installing your Apps in the Tizen’s dev phone

2012-05-16T00:00:00Z

Hello everyone,

Some work colleagues went to Tizen’s first conference in San Francisco last week. The conference was supported by a lot of companies, one of them being ProFusion. Also at the conference my colleagues got the development device. But I’m not here to review the phone, today I’m here to show you how to install your Apps in the first Tizen phone !

Installing Apps is easy, although for now you’re going to have problems with a message “Invalid certificates”. So let’s start.

First turn your phone on and open the Tizen IDE. When the IDE is ready for use, connect the phone to the computer using the USB cable that you received with the phone.

You will notice in the connection explorer that your phone will appear there, just like in the image:

Now, let’s send the App to the phone and run it: Right click on the project -> Run As -> Tizen Web application.

This is where I ran into a issue, I was getting this error:

After some investigation I realized that the date and time of my phone was very wrong. So I adjusted the date in the system settings, then I stopped receiving this error and my App was installed successfully.

Below you can see some pictures of the phone running the Apps:

Note:

Although this dev phone comes with a SIM card slot it does not have driver for its modem, so you can’t make calls and send SMS. This means that while the SMS App works, you can’t really test it!

Talk about Edje at Tizen Conference 2012

2012-05-15T00:00:00Z

I’m just back from San Francisco, where Tizen Developer Conference 2012 took place, from May 7th to 9th. According to the organization, more than 700 people attended, and I had the opportunity to talk to many developers from different companies and projects. There were contributors of WebKit, BlueZ, ConnMan, oFono, and surely, the Enlightenment Foundation Libraries. And I finally met Raster, with whom I discussed a bit about EPhysics, a new library that will make developers lifes easier when physics are required in a software, and features to be implemented on Edje.

I’ve given a talk about our beloved layout library, Edje, on the last day of the event. Slides of “Creating Fancy User Interfaces with Edje” presentation can be read below or downloaded from here. Examples can be found here.

ProFUSION sponsored the conference and we’ve shown three demonstrations of EFL usage on products we’ve developed in our booth. Our showcase was composed by Electrolux Infinity I-Kitchen Fridge, Zodiac’s In-Flight Entertainment System demo, and Endeavour browser. All of them based on the EFL and the last one using the EFL port of WebKit as well. I’ve participated on the development of these softwares, so I was really proud of attendees’ interest on them.

EFL adoption to compose Tizen platform’s core is a nice chance to our community to attract more developers and to become even more relevant. Sure, releasing e17 soon would just add yet more momentum

Tizen SDK 1.0 – Porting the SMS App

2012-05-08T00:00:00Z

Last week Samsung released the newest version of the Tizen’s SDK and it’s called Larkspur. A lot of things have been added and you will see that the look and feel of the phone is different. If you’re interested in the release notes, you can check it here: https://developer.tizen.org/sdk/tizen-sdk-1.0-larkspur-release-notes .

I upgraded my SDK to the new one and I realized that my SMS App wasn’t working anymore and I discovered that they made some changes in the messaging API after a quick investigation. I couldn’t find a place where they say what was changed in the API for the 1.0 version, so if you made an APP download the newest SDK and test it !

Now that we are aware of this little inconvenience I will explain that changes that must be made to the SMS app to work in this new version.

Let’s start modifying the config.xml. Now we must explicit say that we are using the Tizen API, so lets add the Tizen feature.

Javascript

We just need to do a little adjustment to our code. To be more specific what is affecting the App is a change in the messaging API, because now the messageStorage is declared in the SMS service so we must access this field from the SMS to be able to query the SMSs.

First we will declare a global variable called smsService to be used in the whole App:


var messagesGlobal;

var messageGlobalByUser;

var timeLastMsg;

var addressBook;

var smsService;

The smsService variable is at line 9, and the other variables were already declared before.

Now passing to the init function we will call getSmsServices() to retrieve the SMS service and after that we load the messages in our screen. Below the init function:


var init = function () {

   console.log("init() called");

   loadContacts();

   getSmsService();

}

Now the getSmsService function:


function getSmsService(){

   tizen.messaging.getMessageServices("messaging.sms",

   function(services)

   {

     if(services.length < 0)

     {

       alert('No SMS service avaliable!');

       tizen.application.exit();

     }

     smsService = services[0];

     getMessages();

   },

   onError);
}

We retrieve the serve just like before, but now we store it in a global variable to be used when send a SMS and the getMessages() has a little change.


//Our logic starts here
function getMessages(){
   smsService.messageStorage.findMessages(
       new tizen.AttributeFilter("type", "EXACTLY", "messaging.sms"),
       messageQueryCallback, onError);
}

Like I said the messageStorage now resides in the SMS service, so we will access from there to fetch the SMSs. The function messageQueryCallback remais unchanged.

Now in our sendSMS function instead of using a service that we receive as a parameter, we will use the global variable.

//Send the SMS to the recipients
function sendSMS(){
   var msg,content;
   var contact;
   var phoneNumber;

   content = $('#sms_to_send').val();

   contact = getContact($('#contact_number').val());

   //This means we don't have the contact in the list.
   //We only have the phone number
   if(contact != null){
     phoneNumber = contact.phoneNumbers[0].number;
   }
   else {
     phoneNumber = $('#contact_number').val();
   }

   if(phoneNumber == null || phoneNumber == ""){
     alert('Add a receipient');
     return;
   }

   msg = new tizen.Message("messaging.sms", {plainBody:content,to:[phoneNumber]});

  timeLastMsg = msg.timestamp.toLocaleDateString();

  smsService.sendMessage(msg, messageSent, onError);
}

You can see the smsService variable being used at the last line. And that’s all the changes that we made in the Javascript.

And the HTML remains unchanged.

If you want to see the source code or clone it using git, just access this link: http://git.profusion.mobi/cgit.cgi/iscaro/FirstApp/

SMS App – Improved

2012-04-20T00:00:00Z

Welcome back everyone, today we will continue the development of the SMS App adding two functionalities. We will be able to send SMS and integrate with the contacts list.

In the last post I comment about Tizen’s features, that is a way to restrict what your App can access in the system. Now we will need to add one feature to our App, the ability to read the contacts list. We could give access to the entire contact API, however we are only reading the contacts list so we will add the feature to be able to read the address book only. So go to the config.xml and add the new feature, after you add the feature your config.xml should look like this:

HTML – Changes

Let’s start with the HTML pages, because they are easier to explain and less code as well.

First in our main page we will add one link to the control bar, this link will take the user to the compose SMS screen.

Check the code:

<div id="home" data-role="page">
        <div data-role="header">
             <center><h1>Messages</h1></center>
        </div><!-- /header -->

        <div data-role="content">
             <ul id="messages" data-role="listview"
                 data-autodividers="alpha" data-shortcutscroll="true">
                  <li><span>    </span> </li>
             </ul>
       </div><!-- /content -->
       <div data-role="footer">
            <div data-role="controlbar" data-style="tabbar">
                    <ul>
                    <!-- NEW LINK  BELOW -->
                    <li><a href="javascript:composeSMS();"
                           data-icon="ctrlbar-compose">Compose SMS</a></li>
                    <li><a href="javascript:aboutApp();"
                           data-icon="ctrlbar-info">About</a></li>
                    <li><a href="javascript:exitApp();"
                           data-icon="ctrlbar-close">Exit</a></li>
                    </ul>
           </div><!-- /navbar -->
       </div><!-- /footer -->
</div><!-- /page -->

You may notice the new link at line 16.

Now let’s pass to the page that will show our SMS thread this page is used to compose a new SMS as well.

<div id="message_view" data-role="page">
        <div data-role="header">
             <span id="contact_name"></span>
        </div>
        <div id="content_sms" data-role="content">
            <input type="hidden" id="contact_number"/>
            <ul id="message_thread" data-role="listview"
                data-autodividers="alpha" data-shortcutscroll="true"
                data-inset="false" data-filter="true"
                data-split-icon="star" data-theme="a"
                data-dividertheme="a" data-split-theme="a">
            </ul>
            <div data-role="fieldcontain">
                <label for="sms_to_send">Message:</label>
                <input maxlength="160" type="text" id="sms_to_send"/>
            </div>
        </div>
        <div data-role="footer" data-position="fixed">
            <div data-role="controlbar" data-style="toolbar" >
                  <ul>
                       <li>
                          <a href="javascript:sendSMS();"
                             data-icon="ctrlbar-share">Send</a>
                      </li>
                      <li>
                          <a id="add_contacts" style="visibility: hidden"
                             data-icon="ctrlbar-contacts"
                             href="javascript:contactPopulate();">
                         Add Contact</a>
                     </li>
                  </ul>
            </div>
        </div>
</div>

Basically we added three things here first at line 22 a link to send the SMS, at line 26 a new link in the control bar to change the page to the contact list and at line 13 we added a div with the data-role “fieldcontain” that have a label and a input text so we can write a message.
The link to add contacts will only be visible when we are composing the SMS, otherwise we won’t see it

If we want to integrate with the contact list, we’ll need a page that will show all the contacts so we can select them.
The code is pretty easy, it is just a page with a header and a content and inside the content we will put a list that the contacts will reside in.

<div id="contact_search" data-role="page">
          <div data-role="header">
              <h1>Contacts</h1>
          </div>
         <div data-role="content">
              <ul id="contacts_list" data-role="listview"
                  data-autodividers="alpha">
                    <li><span>    </span> </li>
              </ul>
         </div>
</div>

One important thing to mention is the property “data-autodividers=alpha”, this is used by Tizen to automatically order the list alphabetically.

The Javascript

Now that we have our pages ready, it’s time to start the hard work !

You may notice that I made a lot of changes in the Javascript code and code insertions as well.

First when the program is opening we will execute this function to access the contacts list. You may notice that we are calling the Tizen contact API to get the default address book that we have in the phone.


//Just a call to the Tizen API
function loadContacts(){
       addressBook = tizen.contact.getDefaultAddressBook();
}

Now when we are loading the initial screen, the one that shows my SMSes, we will now show the name of the person if we have his/her phone number in the contact list.

To be able to do this the function messageQueryCallBack must be modified. We will do just like the last time, iterating in all messages, but this time we will check from send the message so we can put the name of the contact in the screen (if we have her/him on the address book), otherwise we will just print the phone number.

You can check the code:

//Show who sent you messages (Main page)
function messageQueryCallback(messages){
    messagesGlobal = messages;
    messageGlobalByUser = {};
    var alreadyInserted = {};
    var element = "";
    var from, to, id,firstName,lastName,contact;
    var filter;
    var smsRepeat;
    id = "";
    firstName = "";
    smsRepeat = 0;

    //Iterating all messages
    for(var i = 0; i < messagesGlobal.length; i++){
        from = messagesGlobal[i].from;
        to = messagesGlobal[i].to[0];

        /* Because when we send a message, the from field is empty. And we
          don't wan't to show our messages in the main screen */
          if(from != "" && from != null  && !alreadyInserted[from]){
            alreadyInserted[from] = true;
            id = from;
         }
         else if(!alreadyInserted[to]){
            alreadyInserted[to] = true;
            id = to;
         }
         else{ //Don't draw!
           id = null;
         }
         //Searching for the contact in the address book
         if(id != null){
           element = '<li>'
                     +'<a id="a-name-'+parseInt(id)+'" href="javascript:seeMessageContent('+id+');">'+
                     '<span >'+
                     id+'</a></span></li>';
           $('#messages').append(element);

           filter = new tizen.AttributeFilter('phoneNumbers.number','CONTAINS', id);
           addressBook.find(
                       function(contacts){
                           if(contacts.length > 0){
                               contact = contacts[0];
                               firstName = contact.name.firstName;
                               lastName = contact.name.lastName;
                               if(lastName == null){
                                    lastName = "";
                               }
                               name = firstName + lastName;
                               $('#a-name-'+parseInt(contact.phoneNumbers[0].number)).text(name);
                               $('#a-name-'+parseInt(contact.phoneNumbers[0].number)).
                               attr('href',
                               'javascript:seeMessageContent(\''+contact.id+'\');');
                          }
                      }, onError,
                         filter);
        }
        //I received the message
        if(from != "" && from != null){
             if(!messageGlobalByUser[from]){
                   messageGlobalByUser[from] =
                     [[messagesGlobal[i], 0]];
            }
            else {
                messageGlobalByUser[from].
               push([messagesGlobal[i], 0]);
            }
        }
         else { //I sent the message

            if(smsRepeat % 2 == 0){
                   if(!messageGlobalByUser[to]){
                        messageGlobalByUser[to] =
                        [[messagesGlobal[i], 1]];
                   }
                   else {
                    messageGlobalByUser[to].
                    push([messagesGlobal[i], 1]);
                  }
            }
            smsRepeat++;
         }
    }

}

Now that we are able to send SMS this list may contains SMSes that I sent, this means that the field “from” is empty. So if I want to show to whom I sent the message we must check the field “to” to retrieve the phone number. After I know if i use “to” or “from” we will query the address book then retrieve the name of the person.To do this we use the Tizen’s attribute filter like we used before to query the SMS. The phoneNumbers attribute is an array so this time in the query we must use ‘contains’. After we specified the filter we use the addressBook.find to look for the contact, this method has three parameters: the function success callback, the error function callback and the filter. If everything goes OK the success callback will be called receiving an array of contacts, this array will be empty if it didn’t match anything using the filter, then we just change the value of the link to display the name of the contact instead of the phone number.

Now we must add the messages to the messageGlobalByUser hash, it’s almost the same thing with a minor change. To be able to know who sent the message we will use a flag. the 0 will means that I receive the SMS, 1 I sent (Later you will discover why I’m doing this). I’m using the smsRepeat variable because Tizen keeps a copy of each message that I sent and if I didn’t use this logic I would print the same message twice!

We now have a link to compose SMS, so let’s see this function:

function composeSMS(contactId){
    var contact,fistName,lastName;

    $.mobile.changePage('#message_view');
    $('#message_thread').html('');
    $('#add_contacts').css('visibility','visible');

    if(contactId != null){
        contact = getContact(contactId);
        lastName = contact.name.lastName;
        firstName = contact.name.firstName;
        if (lastName == null){
             lastName = "";
        }
        $('#contact_name').html('<h1>'+
$('<div/>').text( firstName + ' '+lastName ).html()+
'</h1>');
        $('#contact_number').val(contactId);
    }
    else{
        $('#contact_name').html('Select a contact');
    }
}

What we are doing here is: Change the page to the message view and set the button to add contacts visible!

If you pay attention you will notice that we receive the contactId as a parameter, in this case when we Click to compose the SMS we don’t know the contactId yet, so it will be null. So we must select a contact to send the SMS. To do this we use the function populateContactList that is called when we click in the link “add_contacts”.

Here is the code:


function populateContactList(){
     var filter;
     //Get the entire address book
     filter = new tizen.AttributeFilter('name.firstName','EXISTS', '');
     addressBook.find(contactsCB, onError, filter);
}

We will use the method find again, but this time with a different parameter in the filter. This time we will use exists, so we are saying. If name.firstName exists, bring everything to me!

Now passing to the callback is very easy, we will receive an array of contacts so we just iterate on it populating the list.

//Populate the list with the contacts
function contactsCB(contacts){
    var contact;
    var element;
    var firstName,lastName;
    //Reseting
    $('#contacts_list').html('');
    for(var i = 0; i < contacts.length; i++){
        contact = contacts[i];
        firstName = contact.name.firstName;
        lastName = contact.name.lastName;
        if(lastName == null){
           lastName = "";
        }
       element = '<li "ui-li-1line">'+
                 '<a href="javascript:composeSMS(\''+contact.id+'\');">'+
                 '<span>'+
                 $('<div/>').text( firstName +
                 ' '+lastName).html()+
                 '</a></span></li>';
       $('#contacts_list').append(element);
     }

}

Note: This time we have a link to composeSMS again and you can see that the contactId parameter is not going to be null, so the name of the contact will appear in the header.

Imagine now that you wrote your SMS and you clicked in the button send, the function sendSMS will be called to send the SMS.

Here it is:


function sendSMS(){
         tizen.messaging.getMessageServices("messaging.sms",
         sendSMSCallBack,onError);
}

The Tizen messaging api can handle a lot of message types like SMS and email. So we must retrieve the SMS service to be able to send a SMS and we do this using the tizen.messaging.getMessageServices.

Now in the callback sendSMSCallBack we actually send the SMS

//Send the SMS to the recipients
function sendSMSCallBack(services){
     var msg,content;
     var contact;
     var phoneNumber;

     if(services.length > 0){
         content = $('#sms_to_send').val();
         contact = getContact($('#contact_number').val());

         //This means we don't have the contact in the list.
        //We only have the phone number
        if(contact != null){
            phoneNumber = contact.phoneNumbers[0].number;
        }
        else {
            phoneNumber = $('#contact_number').val();
        }
        if(phoneNumber == null || phoneNumber == ""){
            alert('Add a receipient');
            return;
        }
        msg = new tizen.Message("messaging.sms", {plainBody:content,to:[phoneNumber]});
        timeLastMsg = msg.timestamp.toLocaleDateString();
        services[0].sendMessage(msg, messageSent, onError);
    }
    else {
        alert('SMS not supported - No SMS service in the phone');
    }
}

In this callback we will receive an array of SMS services, but we only have one so we will use the first one. Then we get the message content from the text box and to who we are sending the message and look in the addressbook for the number. After this we create a new message using new tizen.Message(), then we send it. It’s good to know that when we are creating a message in the “to:” value we can put as many phoneNumbers as we want. So if i want to send a message to N people it would be like this:

msg = new tizen.Message("messaging.sms", 
{plainBody:content,to:[phoneNumber, phoneNumber2,..., 
phoneNumberN]});

The messageSent Callback is just a function to put the message that we just write it in the screen, it’s so trivial that i won’t put it in here.
(timeLastMsg is used in the messageSent callback just to show the date that the message was sent)

Now moving to the last part, we will talk how we will show the messages to the user. We already did this in the last post, but now
we also need to show the messages that I sent. So here is the code:

//Print message content
function seeMessageContent(contactId){
    var contact = getContact(contactId);
    var message,bubbleSideId,bubbleSide,messages;
    var firstName, lastName;
    var phoneNumber;

    $.mobile.changePage('#message_view'); //Change page view
    $('#message_thread').html('');
    $('#add_contacts').css('visibility','hidden');

    if(contact != null) {
        firstName = contact.name.firstName;
        lastName = contact.name.lastName;
        if(lastName == null){
            lastName = "";
        }
        $('#contact_name').html('<h1>'+
                $('<div/>').text( firstName + ' '+lastName ).html()+
                '</h1>');
        $('#contact_number').val(contactId);
        phoneNumber = contact.phoneNumbers[0].number;
    }
    else {
        contactId = '+' + contactId;
        $('#contact_number').val(contactId);
        $('#contact_name').html('<h1>'+
                $('<div/>').text( contactId ).html()+
                '</h1>');
        phoneNumber = contactId;
    }
    for(var i = 0; i < messageGlobalByUser[phoneNumber].length; i++){
        messages = messageGlobalByUser[phoneNumber];
        message =  messages[i][0];
        bubbleSideId = messages[i][1];

        if(bubbleSideId == 0){ //received
            bubbleSide = "left";
        }
        else { //I sent
            bubbleSide = "right";
        }
        $('#message_thread').append('<li>'+
              $('<div/>').text( message.body.plainBody ).html()+
              '<span>'+
              message.timestamp.toLocaleDateString()
              +'</span></li>');
       }

}

Basically is the same thing as the last time, but now we need to take because we will change the balloon according to who sent the message. And we also put the name of the user in the header if we have him/her in our address book. Limitations: That problem when you receive a SMS when you are in the program and you need to close it and open again to see it still there and and to send a SMS you must have the number in the contact list if you didn’t receive any message from the person.

Running the App

Install the app in the emulator and let’s add a contact. So open the App called “contacts” and add a contact:

Now let’s send a message to this new contact, open the Messages App and go to compose SMS than chose the contact, write somethig and send it!

You may notice the event injector by the right. Take a look at received messages, you will see the number of the contact and the message.

Now close the app the send a message with the same number, and open the App again.

(I sent the message “Hello Emulator”)

You should see this:

You can always check the good and old Tizen API here: https://developer.tizen.org/documentation

Also you can grab the source code here: http://git.profusion.mobi/cgit.cgi/iscaro/FirstApp/

A simple SMS reader

2012-04-10T00:00:00Z

Hello,

Today we will make our first Tizen App. If you used the phone emulator before, you will notice that it does not have a built-in SMS App and to be honest I don’t know why they didn’t make one. So as our first App we will make a simple SMS reader.

For now Apps are made using HTML and Javascript (jQuery is avaliable), but in the future other ways to construct Apps might be possible. If you don’t know anything about HTML, Javascript and the plugin jQuery. Take a look in these links:

So, let’s starting opening the SDK and creating a new project (File -> New -> Project).

Now chose Tizen Web Project, like the image below:

Now you will have the chance to choose the template, for this App use the Tizen basic blank application. See the image:

We are ready for coding now. But before we start you should know something, Tizen is built focusing the user’s security. So when you use a system API your App must explicit say it to the O.S. that you are going to use it (they call this features), otherwise you won’t have access to it. This is just like the Android permissions or the iPhone equivalent. You can add features using the file “config.xml” located in the root of the project. Open this file and you will see a lot of customizations that we are doing. I changed the name of the App to “Messages” to look more fancy, but this is just for style . Click in the features tab and in the button add to add more features, we will choose the features from the internal list. In this example we will use two features:

Application – Just for the “close app” function.
Messaging – To be able to read, send and write messages.

In the images below you can see it:

Let’s start to code now. As I said we will create this App using HTML and Javascript. The HTML is used for the layout of our App and Javascript to program it’s behaviour. So in the root of our project you will find the index.html, this is the main page of our App, everything starts from here. And in the directory “js” there is a file called main.js that will contain all our functions. Open those files and let’s begin!

The HTML

The definition of this HTML is like for a normal web page, you will find a head and body tags and everything else. You will notice that the Tizen SDK already include some Javascript files and CSS as well. Don’t remove them, otherwise your program may not work. Of course you can add your own script and CSS files if you want, but for this example we won’t add more files.

An App page is divided in three parts:

Header – Where you can set a title or useful information
Content – What’s actually important to show to the user
Footer – For menus and misc

See the example:

 <div id="home" data-role="page">
        <div data-role="header">
            <center><h1>Messages</h1></center>
        </div><!-- /header -->
        <div data-role="content">
           <ul id="messages" data-role="listview"  data-autodividers="alpha" data-shortcutscroll="true">
              <li><span>    </span> </li>
           </ul>
       </div><!-- /content -->
       <div data-role="footer">
           <div data-role="controlbar" data-style="tabbar">
                <ul>
                    <li><a href="javascript:exitApp();" data-icon="ctrlbar-close">Exit</a></li>
                    <li><a href="javascript:aboutApp();" data-icon="ctrlbar-info">About</a></li>
                </ul>
            </div><!-- /navbar -->
       </div><!-- /footer -->
</div><!-- /page -->

And that’s it, we have defined our main look and feel. Now i will explain what each part is doing:

Header (lines 2 to 4) – Just showing a title.
Content (lines 5 to 9) – There is a list definition (ul tag) and we will make use of the Tizen’s style definition so we set a data-role to listview. we set an ID as well, because we need to fill this list if the phone numbers of the contacts that sent you SMS. This will be done using Javascript.
Footer (lines 10 to 17) – It will be used as a menu, we define two buttons the exit button and about button. like the listview we will make use of the Tizen’s style and set the data-role as control bar.

Note: data-* properties is a new attribute proposed by the W3C to the HTML5, they are basically used to store information that will not be visible to the user (unless you see the source code) to be used by scrips. In our case jQuery.

To show our SMS content we will create another page, but its even more simple than the one that we just saw. Take a look at the code:

    <div id="message_view" data-role="page">
        <div data-role="header">
           <span id="contact_name"></span>
        </div>
        <div id="content_sms" data-role="content">
          <ul id="message_thread" data-role="listview" data-autodividers="alpha" data-shortcutscroll="true"
          data-inset="false" data-filter="true" data-split-icon="star" data-theme="a" data-dividertheme="a" data-split-theme="a">
          </ul>
        </div>
</div>

So what we just did, is declaring another page. However it will not be visible unless we say we want to open it.

Looks simple, right?

The Javascript

Now let’s pass to the Javascript file (main.js located in the directory js).

The first thing that Tizen will do when the main.js is loaded is call the function domReady. This function is called when the DOM (Document object model) is fully loaded so we can start doing everything else, so when the DOM is ready this init function will be called and the magic will start to happen. See the code:


//Initialize function
var init = function () {
    console.log("init() called");
    getMessages();
}

domReady(init);

Before we jump to the function “getMessages” I will show two other little functions used to exit the App and to show some information about the App.

To show information about the App we are doing like a normal javascript pop-up, so if you know Javascript this is easy and if you don’t it’s easy as well


//Shows info about the app
function aboutApp(){
    alert('A simple message App.\n Made by Guilherme Íscaro at' +
        ' ProFUSION.\nContact:iscaro@profusion.mobi');
}

And to close the App:


//This will close the app
function exitApp(){
       tizen.application.exit();
}

Remember our features declarations in the “config.xml” ? Here is where we need it, we’re using the application feature now. So if you want to use the Tizen API you will always do something like this: tizen.FEATURE.NAME_OF_THE_FUNCTION.

Now we need to load the SMS messages if we have any, this is done using the function “getMessages” in the code below:


//Our logic starts here
function getMessages(){
     tizen.messaging.messagingStorage.findMessages(
            new tizen.AttributeFilter("type", "EXACTLY", "messaging.sms"),
            messageQueryCallback);
}

So what we are doing here is using the tizen messaging api to look for stored messages. it takes as argument a filter and a callback function. Because the messaging API handles not just SMS (Can handle e-mails as well) we need to specify what we are looking for. A message is a data structure defined in the API, so it’s easy to find what we want. So in the filter we say that we are looking at the attribute “type”, for “messaging.sms” and it must match “exactly” how is described (we described “messaging.sms”). And when it’s done pass the result to messageQueryCallback.

Now in our callback we need to fill the list we have created in our main page. You can check the code below:

//Show who sent you messages (Main page)
function messageQueryCallback(messages){
    messagesGlobal = messages;
    messageGlobalByUser = {};

    var alreadyInserted = {};
    var element = "";
    var from;

    for(var i = 0; i < messagesGlobal.length; i++){
        from = messagesGlobal[i].from;

        if(!alreadyInserted[from]){

              element = '<li>'
                 +'<a href="javascript:seeMessageContent('+from+');">'+
                 '<span>'+
                 from+'</a></span></li>';

              $('#messages').append(element);
              alreadyInserted[from] = true;
        }

        if(!messageGlobalByUser[from]){
              messageGlobalByUser[from] = [messagesGlobal[i]];
        }
        else {
             messageGlobalByUser[from].push(messagesGlobal[i]);
        }
    }

}

The messageGlobal is a global variable that will hold all messages structure in our program and messageGlobalByUser is a hash that will contain all the messages indexed by the contact. They were created because:

We can use anywhere in our script, easy access.
Using messageGlobalByUser to hold the message content it will make the search much faster.

Now let’s print our message content in the screen:


//Print message content
function seeMessageContent(from){
    var message;
    $.mobile.changePage('#message_view'); //Change page view
    $('#contact_name').html('<h1>'+from+'</h1>');
    $('#message_thread').html('');
    from = '+' + from;

    for(var i = 0; i < messageGlobalByUser[from].length; i++){
        message = messageGlobalByUser[from];

        $('#message_thread').append('<li class = "ui-li-bubble-left">'+
           $('<div/>').text( message[i].body.plainBody ).html()+
           '<span class="ui-li-bubble-time">'+
           message[i].timestamp.toLocaleDateString()
           +'</span></li>');
    }

}

First we say to the jQuery to change the page to “message_view”, then we define the header content in the send line.

Then we just print all messages from that contact in the screen.

Important note:

Since “message[i].body.plainBody” is beyond our control it makes our App vulnerable to XSS.

To prevent of being attacked we use $(‘<div/>’).text( message[i].body.plainBody ).html().

If you want to learn more about XSS take a look here: XSS

Thanks to Dean Pierce for warning me!

We have our code ready, now lets run the App.

Before we can compile our program and run it we must configure the emulator. So go to the connection explorer and click in the emulator manager:

Create your new emulator and press start. When it’s ready lets send our program to it. Right click in the project and go to “Run as” -> “Tizen Web Project”. And wait until the program is loaded. You will notice that the emulator will open the program for you, but for now click in the exit button.

Now we need to send SMS to our emulator, calm down, you won’t send a real SMS. It’s a fake SMS using an event injector. To use it go the event injector Tab and in the Telephone sub-tab. Just like the image:

Now open the Messages App, and you should see something like this (I have more messages in my emulator, but this is just a detail):

It’s good to know that this App has a limitation. If you receive a SMS when the App is open, and if you want to see it you will need to close the App and open it again.

If you have any doubts or you want to discover more about the Tizen API, look here: https://developer.tizen.org/documentation

Also you can get the source code using git: git://git.profusion.mobi/users/iscaro/FirstApp.git