JQuery Mobile
jQuery mobile framework takes the "write less, do more" approach.
Instead of writing unique apps for each mobile device o
r OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platform. If you know how to work with Jquery and HTML you quickly master JQuery Mobile. You can find a lot of code examples here .
I was surprised how easy popup for dates could be created. It can be done in one line of code:
<input type=”date” id=”dateFrom”/>One more nice feature from JQuery Mobile is dual slider. It can be implemented also very easily - follow the instructions here.
Useful event for work with slider - ‘slidestop’. It occurs when you stop sliding. Example :
$('#rangeslider').bind('slidestop',function(){
duration_min = $('#range-1a').attr('value');
duration_max = $('#range-1b').attr('value');
alert(‘sliding stopped’);
});
Also very helpful Jquery Mobile features are list and collapsible. You can find Mix of them on the picture.
This list was filled in code and should be updated every time when data from SAP received. The following function adds one item to list. Don’t forget to refresh list after adding new items.
function add_department_to_list (li_value,value,number_of_tasks) {
$('#department_list').append(('<li>').attr('data-value',value).attr('onClick',"open_department_dialog($(this).attr('data-value'))").append($('<a>').attr('href','#popupDialog').attr('data-rel','popup').attr('data-position-to','window').append(li_value).append($('<span>').attr('class','ui-li-count').append(number_of_tasks))));
$('#department_list').listview('refresh');
}The mailto URI scheme allows users clicking a link in a website to send an e-mail without first having to copy the destination e-mail address and open an e-mail client.
Just use the following code:
<a id=”mail1” href="mailto:null">email</a>If you put some adress instead of ‘null’, email App will be opened and you can send mail .
Small function for changing adress:
function change_mail(str,new_mail) {
var start = str.lastIndexOf(':')+1;
var end = str.length;
var replace_with = new_mail;
return str.replacePiece(replace_with, start, end);
};Example:
var old_href = $(‘#mail1’).attr(‘href’);
var new_href = change_mail(old_href,’XXX@mail.ru’)
$(‘#mail1’).attr(‘href’,new_href);MAKit
MAKit - provides graphical controls with data visualization and analytics capabilities for mobile devices.
So I began with MAKit. Practically there were no problems. At first you can download the tutorial here. There are 3 pdf files - for me most useful was the MAKit Developer Guide HTML5.pdf - very well described, you just need to follow instructions. In the end you should edit function GetRevenueData, so it will return not hard-coded values but data received from SAP. It can be done in the same way as it was described above.
The first serious problem I faced using MAKit was rotating of device. The library does not have native handling for it so I had to add following code in order to have opportunity to react on changing orientation:
window.addEventListener(navigator.userAgent.indexOf("android") > 0 ? "orientationchange" : "resize", function() {
onOrientationChanged();
}, false);If you are using iphone that is not problem. Just instead of “android” put “iphone” and below is the function which reacts on orientation change:
function onOrientationChanged() {
//here you can write code that will execute when device rotated
arrangeCharts();
}
function arrangeCharts()
{
iv_album = 0;
$('#contents').css({
'width':'100%',
'height':'100%'
});
var width = $(window).width();
var height = $(window).height();
if(width > height) { //album graphic
iv_album = 1;
$('#chart_section').css({
'float':'right',
'width':'78%',
'height':'100%'
});
$('#left-sidebar').css({
'float':'left',
'top': '0%',
'left': '2%',
'width': '20%',
'height': '100%'
});
$('#headertext').css({
'left':'40%',
});
}
else { //book graphic
$('#chart_section').css({
'float':'',
'width':'100%',
'height':'103%'
});
$('#headertext').css({
'left':'33%',
});
}
$MA("Chart_1").refresh();
}The problem was that MAKit chart was not refreshed when orientation changed. When you change size or position of the chart parent element you should manually refresh the chart. But my chart was refreshed only when I changed rotation to album graphic. When I rotated back – nothing happened. I suppose it was because of all css rules were not applied yet. I used the following code to solve this situation and give browser engine time to place all objects after rotation:
setTimeout(function(){
$MA("Chart_1").refresh(); // So refreshing will be after 50 ms. And all css rules will apply at that time.
},50);PhoneGap
Now the most interesting part of blog is Phonegap. PhoneGap is a free and open source framework that allows you create mobile apps using standardized web APIs for the platforms you care about. when I first read about phonegap and how to connect it to Eclipse, I thought it will be a real problem to connect it to SUP. But SUP did all the job automatically. To be sure that phonegap is loaded and works correctly you can use the following :
document.addEventListener("deviceready", phoneGapIsReady, false); //call the phoneGapIsReady function when PhoneGap is fully loaded.
function phoneGapIsReady() {
alert(‘Phonegap loaded’);
};I decided to work with phonebook using phonegap. And I should say that it is really easy to create new contact. You just need to use the following code:
var contact = navigator.contacts.create();
var phoneNumbers = [];
var mails = [];
phoneNumbers[0] = new ContactField('mobile', $('#first_name).text(), true); // preferred number
mails[0] = new ContactField('work', $('#mail').text(), true); // preferred number
var nick_name = ‘nick name’;
var name = new ContactName();
name.givenName = first_name ; //fill first_name and last_name
name.familyName = last_name ; //
contact.name = name;
contact.phoneNumbers = phoneNumbers;
contact.emails = mails;
contact.displayName = nick_name;
contact.nickname = nick_name; //specify both to support all devices
contact.save(onSuccessCreate,onErrorCreate);
function onSuccessCreate(contact) {
alert('Contact created');
};
function onErrorCreate(contactError) {
alert("Error = " + contactError.code);
}This code creates new contact with 1 phone and 1 mail , but this is not a problem to add more of them, but the process of creation of few same contacts is not correct. So before creation I decided to check if this contact exist. In case if exists , prevent creation.
var options = new ContactFindOptions();
options.filter=nick_name;
var fields = ["nickname"];
navigator.contacts.find(fields, onSuccessFind, onErrorFind, options);
function onSuccessFind(contacts) {
var len = contacts.length;
if(len > 0) {
alert(‘this contact exist’);
}
};
function onErrorFind(contactError) {
alert("Error = " + contactError.code);
};
Here I had one problem. If contact existed I filled some Boolean value lf_contact_exist with ‘true’ value (in onSuccessFind). Then in code I checked if this field had a ‘false’ value, if it had ‘false’ value, I would have to create a new one. Apparently, this field was always ‘false’. It confused me a little.
The answer is that contacts.find is asynchronous function. So we can not exactly know when it is finished. So all logic needs to be added in onSuccessFind. Something like this :
function onSuccessFind(contacts) {
var len = contacts.length;
alert('before search');
if( len > 0) {
alert("Contact already exist");
}
else {
createNewContact();
}
};So a contact will be created only if it does not exist. If it exists, just alert().
Also I want to create a contact with a photo. It also should not be a problem, but…
var photos = [];
var photo = new ContactField();
photo.value = "http://cdn04.cdn.justjaredjr.com/wp-content/uploads/headlines/2009/04/hilary-duff-any-other-day.jpg";
photos.push(photo);
contact.photos = photos;
In this case all works perfect. But it is not a very good idea to upload photo to the Internet every time when you want to create a new contact. So I tried to use Data URI, but it also didn’t work. At the moment I am still looking for better option.
I am very happy if this blog was useful to you. If you have any questions or something is not clear do not hesitate to write comments. I will try to help.
First part of blog can be found here.
- SAP Managed Tags:
2 Comments
