Web Applications using Web UI Framework ... jQueryMobile based UI Framework
... .
Making Web Application using Tizen Web UI Framework Koeun Choi
Contents •
Overview – Web Applications using Web UI Framework
• • • • •
2
Tizen Web UI Framework Web UI Framework Launching Flow Web Winsets Making Web Application Note
tizen.org
Overview Tizen Web applications using Web Framework
3
- Tizen Time module
- Tizen Callinfo module
- Tizen contact module
- Tizen Application module
- Tizen Callhistory module
- Tizen application module
- Tizen Application module
- Tizen messaging module tizen.org
Tizen Web UI Framework Tizen
•
Web Application
– Markup driven framework
Tizen Web UI Framework
•
Tizen UX & Animation – Apply Tizen UX in easy and simple way
Web Runtime Device API
Webkit
jQueryMobile based UI Framework
Tizen
•
Support Localization
•
Scaling – Auto scale to screen size
Native Tizen Frameworks Kernel
4
•
Use Web Standards
tizen.org
Tizen Web UI Framework submodules Tizen Web UI Framework Tizen Web winsets Popup
Controlbar
ColorPicker
VirtualList
OptionHeader
……
Tool - Application template
Loader Tizen Web Themes
Opensource libs
jQueryMobile Globalize jQuery
5
tizen.org
Web UI Framework Launching Flow (1/2)
User html Doc 1. 2. 3. 4. 5. 6.
loader
Load framework library Load theme – css files and resources Apply Scale value Initialize page Show page Load globalize
Theme tizen-gray css
7
resource
tizen-blue css
resource
tizen.org
Web UI Framework Launching Flow (2/2)
loader
create page 8
1. 2. 3. 4. 5. 6.
Load framework library Load theme – css files and resources Apply Scale value Initialize page Show page Load globalize
create widgets tizen.org
Web Winsets in Tizen
9
tizen.org
Making Web Application Tool - IDE
10
tizen.org
Making Web Application Tool - Command line •
Support commend line tools to make user application. Usage: ./web-ui-fw-generate-app.sh app-name : Your application name. If whitespace is contained, wrap it by quote mark. install-dir : Directory which the template code directory with name of app-name is created in. // directory will be created. --copylib : When this option is used, all libs and resources will be copied into template directory, and all templates will refer those copied libs. --type=[w3c|tizen] Set type of application template. If no --type= option is given, only default app template files will be copied.
11
tizen.org
Making Web Application Application Layout Header - button - segmentControl - search bar - option header
Content - various winset : list, picker, slider etc.
Footer - Back button - Controlbar - button 12
tizen.org
Making Web Application Application Layout Header
Tizen UI
Content
Prefixed container box using “display:overflow” property by default. framework generates back button in footer
Footer
13
tizen.org
Making Web Application Basic Contents HTML
