MobelloHTML5 and JavaScript Mobile Web App Framework
Mobile Devices Diversity
Write Once, Run Anywhere!
But…                                                 inconsistent HTML5 support                                           ...
Mobile Web Frameworks many frameworks but it has it’s own target audience …
Framework ClassificationMarkup based         Script basedSite & Documents      Applications  Multi pages         Single pa...
Have a look…Declarative                                                    Programmatic<!DOCTYPE html>                    ...
Mobello is …JavaScript framework for building richly interactivemobile web app                                     IDE(Stu...
Mobello Overview                                        $require(‘/util.js’);                                        $clas...
Hello World!
Directory Hierarchy                      Independent App
Configurations                                               config.json                 config({                   requir...
Source Code - that’s it!                                                       main.js$class(‘HelloCtrl’).extend(tau.ui.Sc...
Mobello Features
SceneController Load or create Scene Handle UI logic                           Scene                         SceneContro...
SceneController$class(‘demo.SceneCtrl’).extend(tau.ui.SceneController).define({   loadScene: function () {    Create UI   ...
SequenceNavigator heuristic scene loading manage navigation history           SequenceNavigator                         ...
SequenceNavigator$class(‘ContactsNavigator’).extend(tau.ui.SequenceNavigator).define({  init: function () {     this.setRo...
ParallelNavigator deterministic scene loading selective scene switching        Scene1                                Sce...
ParallelNavigator$class(‘ParallelNavi’).extend(tau.ui.ParallelNavigator).define({  init: function () {     this.setControl...
Animationvar anim = new tau.fx.Animation({     from: {background: red},     to: {background: yellow}   }, { // options    ...
Transitionvar tran = new tau.fx.Transition({duration: ‘1000ms’});tran.setStyle(‘width’, ‘150px’);tran.setStyle(‘height’, ‘...
Creating Components
Basicsvar btn = new tau.ui.Button({label: ‘Touch’});                                    =                                 ...
Buttonvar btn1 = new tau.ui.Button({  label: ‘default,  styleClass: {    type: ‘default’ // normal, dark, red, ...  }});.....
Tablevar tbl = new tau.ui.Table({  group: true,  indexBar: tau.ui.Table.INDEXBAR_EN});var cell = new tau.ui.TableCell({   ...
Carouselvar carousel = new tau.ui.Carousel({vertical:true});var panel1 = new tau.ui.Panel({  styles: {backgroundColor: ‘re...
ActionSheetvar actionsheet = new tau.ui.ActionSheet({    popupTitle: ‘TEST’,    components: [      new tau.ui.Button({labe...
ScrollPanelvar panel = new tau.ui.ScrollPanel({    hScroll: false,    pullToRefresh: ‘down’,    styles: {backgroundColor: ...
Dialogtau.alert(‘The TextArea class... ’, {title: ‘alert’});tau.confirm(‘The TextArea class... ’, {title: ‘confirm’});tau....
Forms                       TextArea                                           DatePicker        TextField          Segmen...
Theming Sass & Compass predefined themes    default    ios    simple : no gradient, no radius, no shadow        defau...
Theme customizing           tau.scss – global variables           $enable-gradient: false;           $enable-border-radius...
Mobello Studio
Studio Overview                                          AttributesProject explorer                                       ...
Layout Manipulates component’s layout    Layout section        sets layout type    Position and Size section        a...
Flow Layout Flow Layout    suitable for text flow    horizontal arrangement in order Flow Type :    inline: arrange b...
Flexbox Layout Flexbox Layout    arrange in horizontal or vertical direction    many arrangement options    Orientatio...
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 colo...
Text Styling Text section for text styling       font face, font size       text alignment       bold, italic, underli...
Border Styling Border section for border styling    adjust width and type( )    adjust line style for top, right, botto...
Debug    1                              3    2① Run in debug mode② Sets breakpoint③ Hot code replace
Develop App with Studio http://youtu.be/sWTU05C2dd0?hd=1
Need More ?
Going hybrid Mobile devices are different!      Geolocation      Telephony      Camera      Messaging      ...      ...
Multi-tasking on MobelloDashboard                 Discovery & Delivery            App Switching   Personalization(search,...
Framework size ?Mobello < 340KB(minified)  Sencha touch < 540KB
Tech trendPresent                                        Future                    req/res                                ...
DocumentsJavaScript Framework        API Reference    Studio Guide                       http://mobello.github.com/
Contacts• Home Site   • http://mobello.github.com/• Blog   • http://mobello.tumblr.com/• Econovation   • http://www.econov...
Upcoming SlideShare
Loading in …5
×

Building mobile web apps with Mobello

3,819 views

Published on

Introduction to Mobello which is HTML5 and JavaScript mobile web app framework. With Mobello, you can build richly interactive mobile web app

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,819
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Building mobile web apps with Mobello

  1. 1. MobelloHTML5 and JavaScript Mobile Web App Framework
  2. 2. Mobile Devices Diversity
  3. 3. Write Once, Run Anywhere!
  4. 4. But… inconsistent HTML5 support lack of mobile componentsdifference 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
  5. 5. Mobile Web Frameworks many frameworks but it has it’s own target audience …
  6. 6. Framework ClassificationMarkup based Script basedSite & Documents Applications Multi pages Single pageDeclarative HTML Programmatic DOM Templates APIs URLs ArgumentsRequest/Response Synchronization Thin client Thick client
  7. 7. 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><!-- /header --> <div data-role="content"> <p>Hello world</p> </div><!-- /content --></div><!-- /page --></body></html
  8. 8. Mobello is …JavaScript framework for building richly interactivemobile web app IDE(Studio) Theme UI Components Layouts MVC Architecture Event Subsystem App Runtime Class Class System Animation
  9. 9. Mobello Overview $require(‘/util.js’); $class(‘Bar’).extend(Foo).define({ Bar: function () { this.name = ‘Mobello’; }, sayHello: function () { return ‘Hello ’ + this.name; Controller } ... }); loosely coupledModel View(scene) Mobello Studio
  10. 10. Hello World!
  11. 11. Directory Hierarchy Independent App
  12. 12. Configurations config.json config({ require : ‘/main.js’, classname : ‘HelloCtrl’, title : ‘HelloWorld’, icon : ‘icon.png’, version : ‘1.0’, vendor : ‘kt corp’ });
  13. 13. 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!’ })); }});
  14. 14. Mobello Features
  15. 15. SceneController Load or create Scene Handle UI logic Scene SceneController
  16. 16. 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!’); }, ...});
  17. 17. SequenceNavigator heuristic scene loading manage navigation history SequenceNavigator forward backward ContactList ContactInfo
  18. 18. 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({ ...});
  19. 19. ParallelNavigator deterministic scene loading selective scene switching Scene1 Scene2 ParallelNavigator SceneCtrl2 SceneCtrl1
  20. 20. 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({ ...});
  21. 21. Animationvar anim = new tau.fx.Animation({ from: {background: red}, to: {background: yellow} }, { // options duration: 2500, iterationCount: 2, delay: 1000 });anim.animate(btn);
  22. 22. Transitionvar tran = new tau.fx.Transition({duration: ‘1000ms’});tran.setStyle(‘width’, ‘150px’);tran.setStyle(‘height’, ‘200px’, { timingFunction: ‘ease-out’, duration: ‘1500ms’});tran.animate(btn1)
  23. 23. Creating Components
  24. 24. Basicsvar 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);...
  25. 25. Buttonvar 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 }});
  26. 26. Tablevar 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);...
  27. 27. Carouselvar 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, ... ]);
  28. 28. ActionSheetvar 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’}) ]});
  29. 29. ScrollPanelvar panel = new tau.ui.ScrollPanel({ hScroll: false, pullToRefresh: ‘down’, styles: {backgroundColor: ‘black’, width: ‘100%’, height: ‘50%’ }});
  30. 30. Dialogtau.alert(‘The TextArea class... ’, {title: ‘alert’});tau.confirm(‘The TextArea class... ’, {title: ‘confirm’});tau.prompt(‘Please enter your name’, {title: ‘prompt’, placeholderLabel: ‘name...’,});
  31. 31. Forms TextArea DatePicker TextField Segmented Buttons Slider Switch Spinner Select Buttons
  32. 32. Theming Sass & Compass predefined themes  default  ios  simple : no gradient, no radius, no shadow default simple ios
  33. 33. 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) ); }
  34. 34. Mobello Studio
  35. 35. Studio Overview AttributesProject explorer & QuickStyler Scene Designer Debugger Emulator
  36. 36. 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)
  37. 37. 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
  38. 38. Flexbox Layout Flexbox Layout  arrange in horizontal or vertical direction  many arrangement options  Orientation  horizontal, vertical  Align, Pack  Stretch, Justify
  39. 39. Absolute Layout Absolute Layout  position with fixed coordinate  difficult to handle various screen resolutions
  40. 40. 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
  41. 41. Text Styling Text section for text styling  font face, font size  text alignment  bold, italic, underline  space between text line
  42. 42. 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
  43. 43. Debug 1 3 2① Run in debug mode② Sets breakpoint③ Hot code replace
  44. 44. Develop App with Studio http://youtu.be/sWTU05C2dd0?hd=1
  45. 45. Need More ?
  46. 46. Going hybrid Mobile devices are different!  Geolocation  Telephony  Camera  Messaging  ... allows you to package web apps and get access to device APIs
  47. 47. Multi-tasking on MobelloDashboard 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
  48. 48. Framework size ?Mobello < 340KB(minified) Sencha touch < 540KB
  49. 49. Tech trendPresent 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
  50. 50. DocumentsJavaScript Framework API Reference Studio Guide http://mobello.github.com/
  51. 51. 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

×