Cross Platform Mobile Development Summer School IoT

1. Cross Platform Mobile Development
SUMMER SCHOOL

9. HTML

10. HTML nodes
<tag id=”id” class=”class1 class2 class3” style=”inline CSS definition” attribute=”value”>
</tag>
The attributes for each type of tag are set by the HTML standard.
With HTML5 and up developers are allowed to set custom attributes prefixed by “data-”
<tag data-cnp=”19002…..”>
</tag>

11. CSS
css-selector{
property:value;
property:value;
}
Example:
a{
color:green; /*this will make all links on a page green*/
}

12. CSS selectors
element#id.class[attribute=value]:pseudo-class
parent>direct-children
parent childrean_and_grandchildren
example:
#container>.partial.blue>p

13. JavaScript
- dynamic typing (vs static)
- prototype based (vs class based)
- functional programmin
- anonymous functions

14. jQuery
$(cssSelector) //returns a jQuery Element
Add/remove classes:
$(cssSelector).addClass(newClass); $(cssSelector).removeClass(newClass); $(cssSelector).toggleClass(newClass);
Add/Read/Remove attributes
$(cssSelector).attr(“attribute_name”, value); $(cssSelector).attr(“attribute_name”);
$(cssSelector).removeAttr(“attribute_name”);
Get/Edit HTML contents
$(cssSelector).html(); $(cssSelector).html(new_content_as_string);

15. Create new nodes:
var div = $(“<div>”); //new empty div node
var p = $(“<p>A paragraph</p>”); //new p node with content inside
var clone = $(some css selector).clone(); //returns a jQuery element creating by cloning the original
Applying selection upon selection
$(css Selector).find(another css Selector);
some_var.find(css subSelector); // works if some_var is a jQuery element;

16. Events:
$(selector).click(callback);
$(selector).load(callback);
$(selector).submit(callback);
$(selector).unbind(eventType);

17. IoT template

18. PhoneGap Build

19. Mobile friendly frameworks
- jQuery mobile (mobile sites and apps framework)
- BootStrap (library that helps creating UI fast) - Highly Recommended
- Backbone (library used to create web/mobile apps)
- AngularJS (another ibrary used to create web/mobile apps)
- ionic (replaces phoengapwith it’s own binaries but still built on cordova) a little too card for beginners
- Sencha Touch (huge library of widgets for mobile devices) (needs paid license if used for commercial app)