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