Building mobile web apps with Mobello

Mobello
HTML5 and JavaScript Mobile Web App Framework

But…
inconsistent HTML5 support

lack of mobile components

difference CSS3 property(-webkit, -moz)
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;

resort to Mobile Web Framework

Mobile Web Frameworks
 many frameworks
 but it has it’s own target audience …

Framework Classification
Markup based Script based

Site & Documents Applications

Multi pages Single page

Declarative HTML Programmatic DOM

Templates APIs

URLs Arguments

Request/Response Synchronization

Thin client Thick client

Have a look…
Declarative Programmatic
<!DOCTYPE html> $class(‘HelloCtrl’).extend(tau.ui.SceneController).define({
<html> loadScene: function () {
<head> var scene = this.getScene();
<meta charset="utf-8"> scene.add(new tau.ui.Label({text: ‘Hello World!’}));
<meta name="viewport" content="width=device-width, }
initial-scale=1"> });
<title>jQuery Mobile: Demos</title>
<link rel="stylesheet"
href="../css/themes/default/jquery.mobile-1.2.0-alpha.1.css"
/>
<link rel="stylesheet" href="_assets/css/jqm-docs.css"/>

<script src="../js/jquery.js"></script>
<script src="../docs/_assets/js/jqm-docs.js"></script>
<script src="../js/jquery.mobile-1.2.0-
alpha.1.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div>

<div data-role="content">
<p>Hello world</p>
</div>

</div>
</body>
</html

Mobello is …
JavaScript framework for building richly interactive
mobile web app

IDE(Studio)

Theme
UI Components

Layouts MVC Architecture

Event Subsystem
App Runtime
Class

Class System Animation

Mobello Overview
$require(‘/util.js’);

$class(‘Bar’).extend(Foo).define({
Bar: function () {
this.name = ‘Mobello’;
},
sayHello: function () {
return ‘Hello ’ + this.name;
Controller }
...
});

loosely coupled

Model View(scene)

Mobello Studio

Directory Hierarchy

Independent App

Configurations

config.json

config({
require : ‘/main.js’,
classname : ‘HelloCtrl’,
title : ‘HelloWorld’,
icon : ‘icon.png’,
version : ‘1.0’,
vendor : ‘kt corp’
});

Source Code - that’s it!
main.js

$class(‘HelloCtrl’).extend(tau.ui.SceneController).define({
loadScene: function () {
var scene = this.getScene();
scene.add(new tau.ui.Button({
label: ‘Hello Mobello!’
}));
}
});

SceneController
 Load or create Scene
 Handle UI logic

Scene

SceneController

SceneController

$class(‘demo.SceneCtrl’).extend(tau.ui.SceneController).define({
loadScene: function () { Create UI
var scene = this.getScene();
var btn = new tau.ui.Button({label: ‘Tap Me!’});
btn.onEvent(‘tap’, this.btnTapped, this);
scene.add(btn);
},

btnTapped: function (e, payload) { Event Handler
alert(‘btn tapped!’);
},
...
});

SequenceNavigator
 heuristic scene loading
 manage navigation history
SequenceNavigator
forward

backward

ContactList ContactInfo

SequenceNavigator
$class(‘ContactsNavigator’).extend(tau.ui.SequenceNavigator).define({
init: function () {
this.setRootController(new ContactList());
},
handleNav: function (info) {
this.pushController(new ContactInfo(info));
}
});

// Contact list
$class(‘ContactList’).extend(tau.ui.SceneController).define({
...
});

// user info
$class(‘ContactInfo’).extend(tau.ui.SceneController).define({
...
});

ParallelNavigator
 deterministic scene loading
 selective scene switching

Scene1 Scene2

ParallelNavigator
SceneCtrl2
SceneCtrl1

ParallelNavigator
$class(‘ParallelNavi’).extend(tau.ui.ParallelNavigator).define({
init: function () {
this.setControllers([new SceneCtrl1(), new SceneCtrl2()]);
},
});

$class(‘SceneCtrl1’).extend(tau.ui.SceneController).define({
...
});

$class(‘SceneCtrl2’).extend(tau.ui.SceneController).define({
...
});

Animation
var anim = new tau.fx.Animation({
from: {'background': 'red'},
to: {'background': 'yellow'}
}, { // options
duration: 2500,
iterationCount: 2,
delay: 1000
}
);

anim.animate(btn);

Transition
var tran = new tau.fx.Transition({duration: ‘1000ms’});
tran.setStyle(‘width’, ‘150px’);
tran.setStyle(‘height’, ‘200px’, {
timingFunction: ‘ease-out’, duration: ‘1500ms’
});

tran.animate(btn1)

Basics

var btn = new tau.ui.Button({label: ‘Touch’});

=
var btn = new tau.ui.Buttion();
btn.setLabel(‘Touch’);

var panel = new tau.ui.Panel({
components: [btn, ...]
});

btn.onEvent(tau.rt.Event.TAP, this.handleTap, this);
...

Button
var btn1 = new tau.ui.Button({
label: ‘default',
styleClass: {
type: ‘default’ // normal, dark, red, ...
}
});

...

var btn2 = new tau.ui.Button({
label: ‘rectangle’,
styleClass: {
shape: ‘rectangle’ // round, corner
}
});

Table
var tbl = new tau.ui.Table({
group: true,
indexBar: tau.ui.Table.INDEXBAR_EN
});

var cell = new tau.ui.TableCell({
title: ‘apple’,
groupName: ‘A’
}));

tbl.add(cell);
...

Carousel
var carousel = new tau.ui.Carousel({vertical:true});

var panel1 = new tau.ui.Panel({
styles: {backgroundColor: ‘red’}
});

var panel2 = new tau.ui.Panel({
styles: {backgroundColor: ‘orange’}
});
...

carousel.setComponents(
[panel1, panel2, ... ]
);

ActionSheet
var actionsheet = new tau.ui.ActionSheet({
popupTitle: ‘TEST’,
components: [
new tau.ui.Button({label: ‘button1’}),
new tau.ui.Button({label: ‘Button2’}),
new tau.ui.Button({label: ‘Button3’})
]
});

ScrollPanel

var panel = new tau.ui.ScrollPanel({
hScroll: false,
pullToRefresh: ‘down’,
styles: {backgroundColor: ‘black’,
width: ‘100%’, height: ‘50%’
}
});

Dialog
tau.alert(‘The TextArea class... ’, {title: ‘alert’});
tau.confirm(‘The TextArea class... ’, {title: ‘confirm’});
tau.prompt(‘Please enter your name’, {title: ‘prompt’,
placeholderLabel: ‘name...’,});

Forms
TextArea

DatePicker

TextField

Segmented Buttons

Slider Switch

Spinner Select

Buttons

Theming
 Sass & Compass
 predefined themes
 default
 ios
 simple : no gradient, no radius, no shadow

default simple
ios

Theme customizing
tau.scss – global variables
$enable-gradient: false;

$enable-border-radius: false;

$enable-border-radius: true;
$default-border-radius: 1.2em;

tau.scss - mixins tau.css
@include tau-button-type (custom, .tau-button-custom {
#00FF08, #00AB04, #009203, background-color: #e2630d;
#00A604);
background-image: -webkit-
gradient(linear,
auto generate
50% 0%, 50% 100%,
color-stop(0%, #e47d37),
color-stop(50%, #c4621e),
color-stop(51%, #e2630d),
color-stop(100%, #ffffff) );
}

Studio Overview

Attributes
Project explorer
&
QuickStyler
Scene Designer

Debugger Emulator

Layout
 Manipulates component’s layout
 Layout section
 sets layout type
 Position and Size section
 adjust size and position

Flexbox layout
Flow layout Absolute layout
(horizontal or vertical)

Flow Layout
 Flow Layout
 suitable for text flow
 horizontal arrangement in order

 Flow Type :
 inline: arrange by horizontal
 inline-block: arrange by horizontal but
retains width, height
 block: fits whole area in horizontal

Flexbox Layout
 Flexbox Layout
 arrange in horizontal or vertical direction
 many arrangement options

 Orientation
 horizontal, vertical
 Align, Pack
 Stretch, Justify

Absolute Layout
 Absolute Layout
 position with fixed coordinate
 difficult to handle various screen resolutions

Color Styling

 Color section for color styling
 color for background, font and border
 Background color
 single color or gradient, image
 Color for font and border
 only single color

Text Styling

 Text section for text styling
 font face, font size
 text alignment
 bold, italic, underline
 space between text line

Border Styling

 Border section for border styling
 adjust width and type( )
 adjust line style for top, right, bottom, left( )
 set radius value for round corner

Debug

1

3
2

① Run in debug mode
② Sets breakpoint
③ Hot code replace

Develop App with Studio

http://youtu.be/sWTU05C2dd0?hd=1

Going hybrid
 Mobile devices are different!
 Geolocation
 Telephony
 Camera
 Messaging
 ...

allows you to package web apps
and get access to device APIs

Multi-tasking on Mobello

Dashboard Discovery & Delivery App Switching

 Personalization(search, install and uninstall apps)
 Running multiple apps and instant app switching
 Independent app development and registration
 Enables private appstore in Web environment

Framework size ?

Mobello < 340KB(minified)
Sencha touch < 540KB

Tech trend
Present Future

req/res sync

Rendering User Interface User Interface Security

Business logic Business Logic Storage

Storage Storage

Thin client Thick client

• efficient network usage
• high user experience
• operation even in offline

Documents
JavaScript Framework API Reference Studio Guide

http://mobello.github.com/

Contacts

• Home Site
• http://mobello.github.com/
• Blog
• http://mobello.tumblr.com/
• Econovation
• http://www.econovation.co.kr/mobello/
• Email
• mobello.js@gmail.com
• Twitter
• @mobello_js

Building mobile web apps with Mobello

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to Building mobile web apps with Mobello (20)

Recently uploaded (20)

Building mobile web apps with Mobello