How to develop your First HTML5 based Mobile App?
Published on 15 June 15
Silvertouch1
While the businesses are busy making money by creating a series of To do list apps, here is your first HTML5 based mobile app that will help create a Not to do list. There are total of five steps that will help you create this app.
The Mock Design
You will first need to create a mock design. Open the mobjectify editor, where you will see the components that need to be added to your design.
First you need to create a page, and give it a headline (title). You will need to check how your list will actually look like when creating a mock design. So, begin creating a list, and check it in the viewer. In this editor, you will see a generate button, which will help you view the design. You will also need to change the inset setting to full screen, so that you can get a better view of the list. you should include add a new task to the list by adding an input section combined with a button. Now, you need to confirm if the tasks mentioned have been done/not done. So, you will need a confirmation page. Click on all the list items, and link it to #confirm. Styling the page and adding headings to your page are essential. The mock design will help you create the structure of the page. You will also need to create two additional pages with the titles done/not done. You will need to link them to the confirmation page. With these design levels added, you have given your app a structure. The app has a structure, but no appeal. You will now need to work on the appeal of the app.
Adding Custom Colors
When you are working with jQuery mobile, you will find five color swatches as an integral part of the default theme. You need to identify colors for the different functions in your app. You will give separate colors to the done/not done functions. You can even create a custom color swatch by clicking on create new. You will see that some of the colours are associated by default; you can easily change the colours by using these swatches
The Mock Design
You will first need to create a mock design. Open the mobjectify editor, where you will see the components that need to be added to your design.
First you need to create a page, and give it a headline (title). You will need to check how your list will actually look like when creating a mock design. So, begin creating a list, and check it in the viewer. In this editor, you will see a generate button, which will help you view the design. You will also need to change the inset setting to full screen, so that you can get a better view of the list. you should include add a new task to the list by adding an input section combined with a button. Now, you need to confirm if the tasks mentioned have been done/not done. So, you will need a confirmation page. Click on all the list items, and link it to #confirm. Styling the page and adding headings to your page are essential. The mock design will help you create the structure of the page. You will also need to create two additional pages with the titles done/not done. You will need to link them to the confirmation page. With these design levels added, you have given your app a structure. The app has a structure, but no appeal. You will now need to work on the appeal of the app.
Adding Custom Colors
When you are working with jQuery mobile, you will find five color swatches as an integral part of the default theme. You need to identify colors for the different functions in your app. You will give separate colors to the done/not done functions. You can even create a custom color swatch by clicking on create new. You will see that some of the colours are associated by default; you can easily change the colours by using these swatches
Add Attributes
You need to add some functionality to establish controls before you start coding these attributes. you need to first include an index page, and include the Add button to your code. You will also need to assign Task Id to the different tasks in the list. Done and not done should be added to the confirmation page as an attribute.
JavaScript
With the above three sections, you have the basic design ready for your mobile app. Now, you need to include the code to add dynamism to your mobile app.
Store your task list as a JavaScript, and add the add/remove functions to the list
You need to add some functionality to establish controls before you start coding these attributes. you need to first include an index page, and include the Add button to your code. You will also need to assign Task Id to the different tasks in the list. Done and not done should be added to the confirmation page as an attribute.
JavaScript
With the above three sections, you have the basic design ready for your mobile app. Now, you need to include the code to add dynamism to your mobile app.
Store your task list as a JavaScript, and add the add/remove functions to the list
var ntd = {};
/** Read the new task and add it to the list */
ntd.add = function(event) {
// Read the task from the input
var task=$('input').val();
if (task) {
// Add the task to array and refresh list
ntd.list[ntd.list.length] = task;
ntd.refresh_list();
// Clear the input
$('input').val('');
}
event.preventDefault();
};
/** Remove the task which was marked as selected */
ntd.remove = function() {
// Remove from array and refresh list
ntd.list.splice(ntd.selected,1);
ntd.refresh_list();
};
/** Recreate the entire list from the available list of tasks */
ntd.refresh_list = function() {
var $tasks = $('#task_list'), i;
// Clear the existing task list
$tasks.empty();
if (ntd.list.length) {
// Add the header
$tasks.append('<li data-role="list-divider">Not To Do's</li>');
for (var i=0;i<ntd.list.length;i++){
// Append each task
var li = '<li><a data-rel="dialog" data-task="' + i
+ '" href="#confirm">' + ntd.list[i] + '</a></li>'
$tasks.append(li);
}
}
// Add the header for addition of new tasks
$tasks.append('<li data-role="list-divider">Add a task</li>');
// Use jQuery Mobile's listview method to refresh
$tasks.listview('refresh');
};
/** Read the new task and add it to the list */
ntd.add = function(event) {
// Read the task from the input
var task=$('input').val();
if (task) {
// Add the task to array and refresh list
ntd.list[ntd.list.length] = task;
ntd.refresh_list();
// Clear the input
$('input').val('');
}
event.preventDefault();
};
/** Remove the task which was marked as selected */
ntd.remove = function() {
// Remove from array and refresh list
ntd.list.splice(ntd.selected,1);
ntd.refresh_list();
};
/** Recreate the entire list from the available list of tasks */
ntd.refresh_list = function() {
var $tasks = $('#task_list'), i;
// Clear the existing task list
$tasks.empty();
if (ntd.list.length) {
// Add the header
$tasks.append('<li data-role="list-divider">Not To Do's</li>');
for (var i=0;i<ntd.list.length;i++){
// Append each task
var li = '<li><a data-rel="dialog" data-task="' + i
+ '" href="#confirm">' + ntd.list[i] + '</a></li>'
$tasks.append(li);
}
}
// Add the header for addition of new tasks
$tasks.append('<li data-role="list-divider">Add a task</li>');
// Use jQuery Mobile's listview method to refresh
$tasks.listview('refresh');
};
If you want to load your confirmation page as dialog box, then you will need to include data-rel=dialog so that tasks are appended
The code is generated in a way that it can create the list in a manner shown in the mockup design.
if you split the code across multiple pages, you can manage the codes easily
The code is generated in a way that it can create the list in a manner shown in the mockup design.
if you split the code across multiple pages, you can manage the codes easily
// Initialize the index page
$(document).delegate('#index','pageinit', function() {
// Initialize the not to do list to an empty list
ntd.list = [];
$('#add').bind('vclick', ntd.add);
$('li a').live('vclick', function() {
ntd.selected = $(this).data('task');
});
// Refresh the list everytime the page is reloaded
$('#index').bind('pagebeforeshow', ntd.refresh_list);
});
// Bind the 'Done' and 'Not Done' buttons to task removal
$(document).delegate('#confirm', 'pageinit', function(){
$('.remove_task').bind('vclick', ntd.remove);
});
// Make the transition in reverse for the buttons on the done and notdone pages
$(document).delegate('#done, #notdone', 'pageinit', function(){
// We reverse transition for any button linking to index page
$('[href="#index"]').attr('data-direction','reverse');
$(document).delegate('#index','pageinit', function() {
// Initialize the not to do list to an empty list
ntd.list = [];
$('#add').bind('vclick', ntd.add);
$('li a').live('vclick', function() {
ntd.selected = $(this).data('task');
});
// Refresh the list everytime the page is reloaded
$('#index').bind('pagebeforeshow', ntd.refresh_list);
});
// Bind the 'Done' and 'Not Done' buttons to task removal
$(document).delegate('#confirm', 'pageinit', function(){
$('.remove_task').bind('vclick', ntd.remove);
});
// Make the transition in reverse for the buttons on the done and notdone pages
$(document).delegate('#done, #notdone', 'pageinit', function(){
// We reverse transition for any button linking to index page
$('[href="#index"]').attr('data-direction','reverse');
Integrate HTML5 Local Storage
Till now, the code and design is able to create and maintain a task list. But, as soon as you refresh the page, the tasks are lost, and your data is not stored. You will need to find a way to store the list. You can use the LocalStorage object to store the data and maintain the task list.
First initialize the list in or from the localstorage. Replace the below code at the beginning of the pageinit event
Till now, the code and design is able to create and maintain a task list. But, as soon as you refresh the page, the tasks are lost, and your data is not stored. You will need to find a way to store the list. You can use the LocalStorage object to store the data and maintain the task list.
First initialize the list in or from the localstorage. Replace the below code at the beginning of the pageinit event
// Initialize the not to do list to an empty list
ntd.list = [];
with
// If no list is already present, initialize it
if (!localStorage.ntd_list) {
localStorage.ntd_list = "[]";
}
// Load the list by parsing the JSON from localStorage
ntd.list = JSON.parse(localStorage.ntd_list);
Now, you need to save back the list to your local storage. you will need to add the following line to ntd.refresh function
// Store back the list
localStorage.ntd_list = JSON.stringify(ntd.list || []);
ntd.list = [];
with
// If no list is already present, initialize it
if (!localStorage.ntd_list) {
localStorage.ntd_list = "[]";
}
// Load the list by parsing the JSON from localStorage
ntd.list = JSON.parse(localStorage.ntd_list);
Now, you need to save back the list to your local storage. you will need to add the following line to ntd.refresh function
// Store back the list
localStorage.ntd_list = JSON.stringify(ntd.list || []);
Conclusion
With these five sections successfully designed and coded, you are ready to serve out your very first not to do list app. You first need to create a clear design for your app, and then code it to perfection. Hire HTML5 developers to give your app an appealing design.
Author Bio:
Deepa is a passionate blogger associated with Silver Touch Technologies., a leading HTML5 Development Company in UK.
With these five sections successfully designed and coded, you are ready to serve out your very first not to do list app. You first need to create a clear design for your app, and then code it to perfection. Hire HTML5 developers to give your app an appealing design.
Author Bio:
Deepa is a passionate blogger associated with Silver Touch Technologies., a leading HTML5 Development Company in UK.
This blog is listed under
Development & Implementations
and Mobility
Community
Related Posts:
HTML is playing a vital role in the smartphone apps developer industry & the things you have mentioned in this topic are very informative for HTML developers.... Thanks for posting this information...