slide curs-10
TRANSCRIPT
Cross Platform Mobile DevelopmentSUMMER SCHOOL
HTML
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>
CSS
css-selector{property:value;property:value;
}
Example:a{
color:green; /*this will make all links on a page green*/}
CSS selectors
element#id.class[attribute=value]:pseudo-class parent>direct-children parent childrean_and_grandchildren example: #container>.partial.blue>p
JavaScript
- dynamic typing (vs static)- prototype based (vs class based)- functional programmin- anonymous functions
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);
Create new nodes:var div = $(“<div>”); //new empty div nodevar p = $(“<p>A paragraph</p>”); //new p node with content insidevar 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;
Events:$(selector).click(callback);$(selector).load(callback);$(selector).submit(callback);$(selector).unbind(eventType);
IoT template
PhoneGap Build
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)