![Page 1: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/1.jpg)
MOBILE WEB APPS
![Page 2: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/2.jpg)
Mobile Web App• Applications that look like ‘native’ applications but make
only use of web technologies Idea: use a single activity that shows a webview
• The webview reads .html pages from the local asset
• Apps are written with standard web technology
• Html/CSS pages linked with each other to provide the same look and feel of a native applications, in particular they follow the Single Page Application pattern
• JavaScript embedded in the pages (and any JS library, like jQuery, as well as techniques like AJAX)
![Page 3: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/3.jpg)
A web page is an active program• HTML5
• Content + Structure via a fixed set of tags
• CSS3:• How to display an element (colors, fonts, borders..)• How to layout elements wrt each other • Selector + declaration
• JavaScript: • How to react to an ‘event’
• Changing the style of an element (e.g., onMouseOver)• Trigger some computation• Change the content of the page
• Ajax• Asynchronous interactions over HTTP( e.g. use a web-api)
![Page 4: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/4.jpg)
Browser as a sandboxed VM
• Single thread• Event-driven• Web worker (HMTL5)
Sandbox (restrict device access)Secure mechanism (JS is external, untrusted code…)
![Page 5: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/5.jpg)
Multithreading• Web worker:
• Allows to run parallel JS code• Only one MAIN thread that access to DOM
• Service worker:• Much more flexible
• WebAssemby
![Page 6: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/6.jpg)
Architecture of a Mobile Web App• Idea: just avoid fetching page from the site• Store the web page locally (of course no local web-server!)
OS/Middleware
Starter
Web rendering engine(e.g.,webkit)
Web page
HW
Browser is sand-boxed
1. Run web renderingengine, e.g., androis’swebview
2. Load webpage in the engine
Native code
APPLICATION
![Page 7: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/7.jpg)
The minimalist template
![Page 8: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/8.jpg)
Styling the app: How a web page is displayed?
![Page 9: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/9.jpg)
Rendering processParse HTML Create the DOM tree
DOM = Document Object ModelEach HTML tag (detected via parsing) is mapped to an object (DOM tree)HTML describe only the content (e.g., this is a heading, this is a paragraph, etc..)
Parse CSS Detect CSS rulesDetect layout directives
CSS = Cascade Style SheetsDefine how to display the content (e.g., which font, colors, and many more…) ofHTML elementsRule: which style apply to which element(s) (CSS rules)
hmtl
headbody
h1 p
h1 à {properties}p à {properties}
hmtl
headbody
ph1
CSS properties are ‘attached’ to DOM objectsThe result is a render tree
![Page 10: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/10.jpg)
Layout the render tree• Once the render tree is created, it is rendered according to a
layout process • This process assigns a ‘physical’ position to every render
element• Positions are computed based on the available viewport,
namely the available displaying area on the screen
• Each HTML element is render inside a box (CSS box model)• The dimensions of a box are computed wrt to the parent box
(container)• The topmost container size is the viewport
![Page 11: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/11.jpg)
Media-query• Allows to use different CSS styles, depending on the
’media’
Content
CSS
screen with mìn-width=..
printer.
![Page 12: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/12.jpg)
CSS3 Box model
widthheight eg. 100px, or % wrt container..And much more..
Content
![Page 13: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/13.jpg)
A simple CSS3 example (style)
![Page 14: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/14.jpg)
Layout
CSS allows for define how to layout box.CSS template (from frameworks, e.g., BS 4 , 3WCSS,) are more roboust
![Page 15: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/15.jpg)
Setting the viewport• Most of the broswers support the viewport meta tag• It allows to set the view port for the rendering process• In particular, it allows to pass the real current viewport, so that
redering is done on the real size• A tag as simple as the following one solves the previous problem
![Page 16: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/16.jpg)
Some example of viewports
Credits: mediagenesis See also: https://www.gsmarena.com/320--1280
![Page 17: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/17.jpg)
Dealing with different viewports• At a high level there are two main solutions to deal with
different viewport or media characteristics
1. Create a CSS for every different screen (media). . In general it needs server side processing (used in CMS sw)
2. Define per-screen CSS on the client side: responsive web.
• The proper layout is determined through CSS media query
• One can define its on CSS layout or use a framework
• BS4 framework defines media 4 breakpoitns
![Page 18: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/18.jpg)
Bootstrap 4• It is a framework for mobile-first responsive web design• The main strengths is the use of ‘flex-box’ CSS layout,
which defines how a container adapts to viewport
![Page 19: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/19.jpg)
BS4 Breakpoints
![Page 20: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/20.jpg)
Hybrid app• Android method mapped to JS functions, i.e., available JS
functions can be extended so that..
• Device features can be exported in JavaScript
• And, android code can call JS function
• Also, Apps can be made crossplatform (similar behaviour in other platform)
![Page 21: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/21.jpg)
Binding JavaScript code to Android code• It is possible to create interfaces between JavaScript code
and Android code.
• In other words, JavaScript code can call a method implemented in ‘android’
![Page 22: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/22.jpg)
Binding JavaScript code to Android code
• Public methods are seen as JS function
• The object that is bound to your JavaScript runs in another thread and not in the thread in which it was constructed.
• Only simple data can be passed
• JSON can be useful in this respect
Android Code
HTML + JS..
Android.test()
Add Interface (C,“Android”)
Android.test();
Class Ctest
public method
![Page 23: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/23.jpg)
Example (android side)
![Page 24: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/24.jpg)
Example (JS side)
![Page 25: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/25.jpg)
Example
![Page 26: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/26.jpg)
Injecting JS code in the view• Starting from Api 19 it is possible to asynchronously
injecting javascript code in a loaded page…• So one can call JS functions
![Page 27: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/27.jpg)
Hybrid apps: Cordova
![Page 28: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/28.jpg)
Xmarine (basic idea)
an .apk includes the application, the associated libraries, the content, the Mono runtime, and the required Base Class Library (BCL) assemblies.
ACW = Android Callable WrapperMCW = Mono Callable Wrapper
![Page 29: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/29.jpg)
Xmarine (basic idea)
![Page 30: MOBILE WEB APPSberaldi/MACC/OK_HYBRID_2020.pdf · Parse CSS DetectCSS rules Detectlayout directives CSS = CascadeStyle Sheets Definehowto display the content(e.g., whichfont, colors,](https://reader033.vdocument.in/reader033/viewer/2022042123/5e9dcd295adeb659f00b0fb8/html5/thumbnails/30.jpg)
Xmarine (basic idea)