introduction to davinci
DESCRIPTION
Table of ContentsTRANSCRIPT
1
Introduction to DaVinci
Platform and Service Leader
2
1. DaVinci Designer Framework
2. WYSIWYG-type Authoring Environment
3. Drag & Drop UI Layout Configuration
4. Resource Editor
5. CSS Level 2-3 Editor
6. CSS Level 3 Animation Editor
7. Animation Editor for Professional
8. N-Screen Editor
9. Integrated Development Environment (IDE)
10. DaVinci UI Framework
11. DaVinci Hybrid Runtime
12. DaVinci Build Server
3
1. DaVinci Designer Framework
All editor windows of authoring tools are managed as a pane, allowing the free placement of editor panes according to the
purpose of edition.
All editors are connected around the Designer View, providing object-centered editing functions
Manages files consisting
of the Project
Project Manager
Adds/Deletes/Edits pages
in the unit view
Pages Browser
Displays and manages
resource used in the
project
Resource Editor
Supports UI Layout based on
the Page
View Port Editor
A collection of component
types
Component Browser
Displays and edits the
configuration of the UI
which consists of a page
as a tree format
Dom Tree Browser
Edits the position/inline
style/property/event of
the UI component
Property Editor
4
2. WYSIWYG-type Authoring Environment
Web browser-type UI authoring environment, allowing users to get the same result with the contents being displayed on the
screen.
No middle meta language has been used, displaying content which is directly modified using the same HTML code as on the
authoring screen.
Supports WYSIWYG-type development environment
No Meta format used
• The content which is directly modified using HTML code is displayed the same
as on the Designer View.
• The content in work is expressed as the same result.
• Designer Viewport is Web Browser-type.
Button Insertion Code
HTML Code
5
3. Drag & Drop UI Layout Configuration
Configures the UI layout by dragging and dropping views and components.
Uses the Event Handler to develop UI logic and biz logic.
Drag & Drop type UI Layout Configuration
• Drag and drop components in the View area.
• Produces dynamic contents with various element types
• Image Roller Component arrangement
Property Change Using Property Editor
• Configures the image resource, the number of frames, and frame area
Property Setting
Add Events for Biz Logic
• Events are added using the Event Listener.
• Shows the notification message based on the event cycle.
Notification
Check Operation using Emulator
• View the configured UI through the Emulator.
Moves Left and
Right
Image Resource
6
4. Resource Editor
Provides efficient management technique for resources used by applications.
Provides resource analysis guide/viewer/editing by file.
• Checks the resource information
• Provides the guide for resource analysis
• Removes unnecessary resources by providing thumbnail images
• Provides functions to edit resources in the file unit.
Optimizing Binary Size
Improving Initial Loading Rate
Reducing Memory Share
Improving Application Availability
CSS
Files default.cs
s media.cs
s
총 :
300KB
7
5. CSS Level 2-3 Editor
Provides an exclusive CSS Level editor for developers who do not have special knowledge on CSS.
Easy option setting allows writing, applying, and viewing CSS for easier dynamic content production.
CSS Level 2 -3 Editor
• Provides a preview function to check the setting values in real time for easy verification.
• Easy to apply numerous properties of CSS, even though having no special knowledge on CSS,
and check the applied properties immediately.
• Provides Code Editor for users who are familiar with code.
Previews the effect of a
change to the CSS function
as soon as it is changed
CSS Quick Preview
Add/deletes/manages
CSS Select
CSS Selector List
Provides the content where CSS
must be applied as the component
type for easy application
CSS Editor
Allows developers to preview the
changes on the entire HTML
HTML Previewer
Provides a function to view the contents written by using
the CSS Editor as real code
CSS Code Viewer
8
6. CSS Level 3 Animation Editor
Provides a function to configure the CSS Level 3 Animation function based on Key Frame easily.
Improves development productivity by testing the Animation function for the object arranged on the Designer.
CSS Level 3 Animation Editor
• Provides intuitive visualization editing function for editing animation.
• Produces dynamic contents by applying various elements.
① Edit Animation ② Start Animation Play
③ View the action
• Check the action on Viewport immediately
④ CSS Code
• Available to check the code by executing
CSS Editor
9
7. Animation Editor for Professional
Provides a separate Animation Editor for editing more complex animations.
Supports a more detailed animation framework than CSS 3.
Provides a guide that helps users classify the effect edition method according to the purpose.
Animation Editor for Professional
• Allows detailed effect design using the JavaScript Timeline Framework.
Classification Standard Complexity Loading Rate Detailed Effect
CSS Level 3 Animation Standard Low Fast Low
Animation for Professional
Non-standard High Slow High
• Enhances content completeness by leading users to design effects by considering the cons. and pros, of animation techniques.
10
8. N-Screen Editor
Web applications should provide a UI/UX optimized for various LCD sizes for N-Screen service.
N-Screen Editor provides the functionality to develop and manage a UP layout optimized for various LCD screen sizes.
A universal functionality which can be expanded to the universal function for responsive web design that actively response
to the external environments (weather, location, sensor, etc).
Wide Screen
Narrow Screen
• Provides a template where properties of various media are
applied, allowing developers to design the screen by applying
the properties without additional development.
• Provides the preview of applicable N-Screen list for developers
to view and apply them.
• The Previewer allows developers to
forecast the result of applying the
media properties to the screen.
Normal Screen
N-Screen Preset
N-Screen
Manager
N-Screen
Previewer
11
9. Integrated Development Environment (IDE)
DaVinci IDE seamlessly supports a series of processes from development of HTML5-based Web application to service.
By seamlessly interworking with DaVinci Designer, it supports the modulized development and management of the UI logic
and Biz logic.
Enhances development productivity and efficiency by providing the emulator, debugger, and profiler which support various
H/W profiles.
Android
Build/Packaging
iOS
Build/Packaging
Create and Manage a Project Develop UI Logic and Biz Logic
Test, Debugging, Profiler Build, Packaging, Distribution
Web App
Build/Packaging
12
10. DaVinci UI Framework
Provides an extensible UI Framework Library based on jQuery and jQueryMobile.
Provides more than 30 basic UI widgets for easier Web App UI authoring.
Provides the page template and combination widget for easier, faster, and quicker UI configuration.
• Configures the page as the user wants with the pre-configured page accessible
with one click.
• Develops the required UI by setting the property and simple operation in a fast
way.
Page Template
• Extends the basic widgets to page templates and
the combination widgets by combining basic
widgets/views/page containers
Various Basic Widgets
• A widget created in the unit of block by combining the widgets having the pattern
used repeatedly
• Developers can create their own combined widget and register it.
Combination Widget
Blank
Page
Select a Page Completed Page
Change
Property
Develop
Logic
Tab Combination Layoutview
Grid
Image
Label
13
11. DaVinci Hybrid Runtime
Cross Platform Runtime that provides the same functions on various platforms with an identical HTML-based source
Improves the range and level of application implementation by providing various native functions through JavaScript API.
Supports a plug-in architecture that allows the 3rd party to easily extend the functions required to develop services.
DaVinci Run-Time Architecture
Runtime Core
Webkit
(Device)
Plug-In
Loader Device API Plug-In (Built-In)
OS Extension
System Security PIM
H/W Access Telephony Network
Notification Storage
Service Framework
Runtime API Provider
Feature Description
System • Device & System Information access • System Configuration supports • System UI – System alert, Indicators, …
Security • Symmetric Encryption : AES, SEED • Hash Function : SHA-1, MD5
PIM • Device Contacts Information access
H/W Access • Accelerometer • Gyro • Compass • GPS • Camera control & Accessing Photo storage • Sound & Vibrator
Network • Network Retrieve & Control • Easy HTTP 1.1 Communication APIs • File & Binary Data Transfer
Telephony • Voice Call • Message Service
Data Storage • Database – SQLite supports • Native File System supports • Private & Sharing Storage between Apps.
Notification • Inter Application Communication • Push notification supports
OS Extension • Platform specific functions - iOS badge, Gesture Recognizer, …
Feature Description
Application Manager • App. Execution/management functions - Execute, Install, Update,
Plug-In Loader • Built-In/Custom Plug-In management for interworking with native functions
User Plug-In
User Plug-In User Plug-In …
Application
Manager
Application
Javascript, HTML, CSS, …
Feature Description
Runtime API Provider
• Built-In API for the functions required by applications • Interworking with the custom API extended from the
plug-in
14
12. DaVinci Build Server
Supports various packaging types such as Android (apk) and iOS (ipa) by using the build server for hybrid application build.
Available to build a local (enterprise) build server based on the company’s needs.
Provides the user management function, the build status management function, the build history, and statistical information.
Android Build/Packaging
iOS Build/Packaging
DaVinci System
General Users
Enterprise Users
Android Build/Packaging
iOS Build/Packaging
Company System
Build Server
Enterprise
Build Server
Designer
Developer
Designer
Developer User
Administ
rator
Internet
Local Network
15
Thank You