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