HTML5 Mobile Apps

Tuesday, November 18, 2014

Install the web app generator with npm


Run the command yo webapp to scaffold out the app


Key in grunt serve to launch the built in leightweight web server


The web app is immediately launched in the browser


Grunt listens for code changes in the folder that is serving up the code, make a change in the code, save, the browser is immediately updated


Update the HTML in the index file, add a button to the header and add a list group with elements in the row


View the result in the browser


The add item form with labels, inputs and a couple of buttons


View the result in the browser


In the header add this span with markup for the online indicator


Type in this markup for the item details view, display the items


Check it out in the browser, notice all the views are in the same HTML file, index.html, we will be using JAVASCRIPT to show and hide the views, that's why the id's


Add a return and edit button


Add the switchview class to the elements that will change views as a hook for our JAVASCRIPT code


Add the switchview class to the cancel button


Finally add the class to the return to list button


Add these styles to the stylesheet to hide and show the view


Add the two CSS classes to the fulllist and one to the addelement div


Add the view CSS class to the elementdetail div


View the web page in the browser, only the list view is visible


Add the data-target attribute to the add button to tell the JAVASCRIPT function which element is being targeted, the node by id


Add the data-target attribute to the cancel button, it will go back to the fulllist when clicked


Add the data-target to the items list pointing to the detail view


Add the data-target to the return to list button


In the main.js file add a simple event listener to all elements that have the class switchview using jquery, invoke showhide function passing in the event, get the target the user clicked on, hide all the views and show the one with specified data-target


Navigate to browser and click add button


The add item view shows, click cancel


The list view shows, click on an element


The details view is displayed


Pull the add button and online indicator to the right, wrap them in a div of clearfix


In main.js file use modernizr to check for localstorage browser support, define a JSON object, an array with key value pairs


Insert the data as a JSON object in local storage


In developer tool bar, resources tab, view the data object, as a key value pair in local storage


Install handlebars, use templates in HTML with variables from JAVASCRIPT


Reference the handlebars script in the index file


Under the fulllist, insert this handlebars template


The handlebars code, grabe the template, compile it, create data object, pass it in the template, append to DOM


On the web page view the template rendered with the dynamic data from JAVASCRIPT


Wrap the list item in the full list in a handlebars script, replace the static HTML with double curly braces, instruct handlebars to loop over the collection with each


Update the handlebars code, set the data object equal to the data array of JSON object in the handlebars code


View the results on the web page, the titles are pulled from the JAVASCRIPT, it's dynamic


Default Success Warning Important Info Inverse
B S W I ? O