MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

How to develop your First HTML5 based Mobile App?

Published on 15 June 15
489
1
2
How to develop your First HTML5 based Mobile App? - Image 1
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

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


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&#39;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
// 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');
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
// 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 || []);
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.

















































































































How to develop your First HTML5 based Mobile App? - Image 1

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

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

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('
  • Not To Do's
  • ');
    for (var i=0;i // Append each task
    var li = '
  • ' + ntd.list[i] + '
  • '
    $tasks.append(li);
    }
    }
    // Add the header for addition of new tasks
    $tasks.append('
  • Add a task
  • ');
    // 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

    // 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');

    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

    // 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 || []);

    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.

    This blog is listed under Development & Implementations and Mobility Community

    Related Posts:
    View Comment (1)
    Post a Comment

    Please notify me the replies via email.

    Important:
    • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
    • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
    • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
    1. 04 August 15
      0

      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...

    You may also be interested in
    Awards & Accolades for MyTechLogy
    Winner of
    REDHERRING
    Top 100 Asia
    Finalist at SiTF Awards 2014 under the category Best Social & Community Product
    Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
    Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
    Hidden Image Url

    Back to Top