tizen ui theming with component designer · brief plan tizen native ui application development...

Copyright © 2017 Samsung. All Rights Reserved.

Vitalii Vorobiov

Samsung R&D Institute Ukraine [email protected]

Tizen UI Theming with

Component Designer

Brief plan

Tizen native UI application development (Elementary, Edje)

What is EDC (Edje Data Collection) for Edje and Elementary

Complexity EDC language coding

Highlight all problems of coding themes for widgets

Component Designer

Main features of Component Designer

Example of making style with Component Designer

Future plans

Q&A

EFL (Enlightenment foundation library)

Tizen framework

Enlightenment Foundation Library

Enlightenment Foundation Library – important for native development

Edje Data Collection

Elementary widgets

Is a plain text file, consisting of instructions for the Edje Compiler

Edje Compiler

EDC

instructions

EDC language defines how things will looks like

EDC (Edje Data Collection)

EDC primitives

resources

programs (for animation)

STATE_SET

SIGNAL_EMIT

PLAY_TONE

Main EDC keywords

Group (a set of parts and programs)

Main EDC keywords


Part (single primitive with different properties)

State 1

Main EDC keywords



State (single primitive can has different looks)

State 2

Program change

state of part Signal from world

(ex. user clicked)

Main EDC keywords



State (single primitive can has different looks)

Programs (change states of part with/without animation)

Resources

Images (for IMAGE parts)

font=Sans:style=Bold font_size=15 font_weight=Bold font_width=Expanded color=#192ec9ff underline_color=#ffffffff underline2_color=#ffffffff underline_dash_color=#ffffffff shadow_color=#1aead9ff glow_color=#1aead9ff glow2_color=#192ec9ff backing_color=#ffffffff strikethrough_color=#ffffffff align=middle valign=baseline wrap=char left_margin=2 right_margin=2 underline=off strikethrough=off backing=off style=far_soft_shadow,top_left tabstops=0 linesize=0 linerelsize=0 underline_dash_width=0 underline_dash_gap=0 password=off

Resources


Text Styles (RTF stuff, for TEXTBLOCK parts)

Resources


Text Styles (RTF stuff, for TEXTBLOCK parts)

Color classes (for TEXT especially)

Fonts (for TEXT and TEXTBLOCK of course)

Sound (for Programs of course)

…and so on!

Rel1 (0.0; 0.0)

Rel2 (1.0; 1.0)

This part is going to be

placed in area between rel1

and rel2 point

Part positioning problem

Rel1 (0.0; 0.0) Offset: 16px 16px

Rel2 (1.0; 1.0)

Part positioning problem (offset)

Rel2 (0.75; 0.75)

Rel1 (0.25; 0.25)

Part positioning problem (relative)

Rel1 (0.25; 0.25) To: “red part”

Rel2 (0.75; 0.75) To: “blue part”

Edje will calculate it

Part positioning problem (relative to parts)

Part positioning problem (relative to parts)

Rel1 (1.0; 1.0) To: “red rectangle”

Rel2 (0.0; 0.0) To: “blue rectangle”

Part positioning problem (align&relative to parts)

Rel1 (1.0; 1.0) To: “red rectangle”

Rel2 (0.0; 0.0) To: “blue rectangle”

Align: (1.0 1.0)

Let's make an EDC example

Group “main” with parts

IMAGE parts and resources

border.png

header.png

TEXT part added for topic

Don't forget about background

news_1.png

news_2.png

More resources!!!

More resources!!!

Applied text style

to TEXTBLOCK part

font=BreezeSans font_size=16 color=#FFFFFF wrap=word

Text Style and TEXTBLOCK part

And the last topic (just copy&paste)

Themes

l EDC layout

“Check”

widget l EDC layout

l EDC layout

EDC coding highlights (main uncomfortables)


Making one simple style produce huge EDC code

Making entire theme for dozens of widgets produce insane amount of EDC code




Using relatives and offsets sometimes is hard

font=Sans:style=Bold font_size=15 font_weight=Bold font_width=Expanded color=#192ec9ff underline_color=#ffffffff underline2_color=#ffffffff underline_dash_color=#ffffffff shadow_color=#1aead9ff glow_color=#1aead9ff glow2_color=#192ec9ff backing_color=#ffffffff strikethrough_color=#ffffffff align=middle valign=baseline wrap=char left_margin=2 right_margin=2 underline=off strikethrough=off backing=off style=far_soft_shadow,top_left tabstops=0 linesize=0 linerelsize=0 underline_dash_width=0 underline_dash_gap=0 password=off





TEXTBLOCK and Text Styles (obviously hard – a lot of RTF properties)





TEXTBLOCK and Text Styles (obviously hard – a lot of RTF properties)

A lot of different properties for every kind of part/resource/program (need to take a look at the reference

documents if you need something)

Component Designer

Component Designer – visual tool

Component Designer – is a part of Tizen Studio

Component Designer – is a part of Tizen Studio and crossplatform

1. List of groups

2. List of part/state/items/programs/data

3. Tabs of opened groups

4. Properties of selected items

5. Workspace

Component Designer – high-level overview

1

2

3

4 5

Component Designer – high-level overview (groups)


General EDC groups are folders and simple files

All styles for widgets goes this way:

elm/widget/class/style

but some widgets are more complex (for example GenList item):

elm/genlist/item/class/style

elm/bg/base/default (style for widget background)



It is possible to create new styles




Or create a copy of already existed style to modify





Make alias of currently existed groups with another name

elm/bg/base/alias is alias group of

elm/bg/base/default

Alias groups are not editable (!) it

is just a link with different name





Make alias of currently existed groups with another name

Delete group ( ), alias ( ) or entire folder ( ) of groups and folders

Component Designer – high-level overview (tabs)

Component Designer – high-level overview (tabs)

It is possible to open to edit as many groups as possible. There are tabs for every opened group. It is

very comfortable to use when editing complex widgets (entry, fileselector, genlist, slider etc).

Component Designer – high-level overview (groups, tabs)

(!) Keep in mind, if any of groups is already opened, it won't be able to delete, firstly it is important to close

tab. Highlighted group elm/bg/base/default opened in tabs, so it is impossible to delete it till it is opened.

Component Designer – high-level overview (parts, states)


Shows parts, their states and part items (if they exists), programs and data items



Show ( )/hide ( ) part by clicking on eye (make it visible/invisible on workspace)




Indicate which group those parts are related to (currently opened tab of that group)





Restack parts above and below (top parts are actually on the very bottom of canvas)






Delete selected item (part/state/part item/program/data) [important: default state cannot be deleted]






Delete selected item (part/state/part item/program/data) [important: default state cannot be deleted]

Add programs (there will be popup for programs)

Component Designer – high-level overview (data)

Data is very important with some widgets. For example genlist require lists of certain data items as properties.

Below is typical data items for style “elm/genlist/item/default/default” and example property of it. This means that

part elm.text will be used to set up text into genlist item, otherwise it won't work at all. It's a common mistake:

forgetting to put data items for genlist item style.

Component Designer – high-level overview (properties)


Every selected part/item/state/program etc will show it's properties on the right



Property tab shows all the possible supported properties of parts/states/programs etc

VS Possible to

experiment more

often with

unknown

properties Experiments require knowledge of existed properties




Every part and their state has common properties and their own





Map transformation!





Map transformation!

Property tooltips

(!) No more documentation!

Just hover mouse over the

property and it will show up

tooltip with description of

the attribute





Map transformation!

Property tooltips

Using resources and resource managers (specific properties)

Resource managers

1. Possible to import images from file system and

delete them from project

2. Shows full image when selected

3. Show some information about selected image in

Property tab (on the right)

4. Possible to search through images

5. Shows entire list of images already in project

1

3 2

4

5

Resource managers (image manager)

1. Creating new color classes and deleting old one

2. Apply and show selected color class on a certain

text to see

3. Modify colors and description of selected color

class in property tab on the right

4. Possible to search through color class names

5. Shows entire list of color classes which are

already in project

Resource managers (color class manager)

3 2

5

1 4

1. Creating new tags/styles and deleting old one

2. Apply and show selected text styles on a certain

text to see

3. Modify RTF properties of style

4. Possible to search through styles

5. Shows entire list of tags and styles of project

Resource managers (style manager)

1 2

4

5 3

Component Designer – high-level overview (workspace)


Parts are shown on workspace with their size and applied properties

There are parts which are easy to show (like

rectangle, text or image)

And there are parts which are hard to show because

they are invisible (like swallow, spacer, box or proxy)

Component Designer – parts on workspace

Swallow is just container for other widgets and layouts

Spacer is just invisible part for calculation

Group is hard to show because if we show it that would be a

mess on workspace

Same for box and table

Proxy also require to be shown when it's source is empty.

So Component Designer shows those parts on workspace with specific pattern which is simple to get used to.



It is possible to select part on workspace



It is possible to select part on workspace and change size of it




Object area mode of selected parts

shows area between

rel1 and rel2, and

now able to change

align

Workspace (object area)

Fast example of object area usage. We need

set up that yellow rectangle (with mixed

maximum side but no minimum side so it is

possible to make it smaller) exactly between

image and text


Set up rel1 related to image part and set up

100% as X. So here is Component Designer

shows that rectangle will be placed inside of an

area that starts from end of image part (by X)

till the end of canvas.


Set up rel2 related to text part by 0% of it's size

by X. Component Designer shows that

rectangle will be placed inside of an area that

starts from end of image part (100% of it by X)

till the beginning of text part (0% of it by X).


Here we are, rectangle will be there between

those parts despite any of canvas size.

On this example we make layout smaller or

bigger and see the result of rectangle.





Rulers!

Rulers shows actual sizes of object

area (blue hatch area) and sizes of

selected part (blue rectangle) and of

parts being used to relative points

(green and navy blue rectangles)





Rulers!

Workspace menu

Workspace menu

1. Lock to make it unable to resize canvas/layout

2. Actual and current size of canvas area

3. Undo/Redo controls

4. Shortcuts to library (image managers, style managers, etc)

5. Live view mode (to test currently opened group)

6. Fit canvas area to workspace

7. Zoom

1 2 3 4 5 6 7

Live View (here is GenList Item)

Live View (we can check how it looks like)

Component Designer EXAMPLE

Supporting 3D

Vector Graphic

Text effects based on Evas_Filters Keep up to date with all new EDC features

Plans

We need your feedbacks

Component Designer (more about it): goo.gl/OPbZig

Or if you have any questions : [email protected]

Special Thanks

• Samsung Electronics / Software R&D Center / Tizen Platform Lab

• Samsung R&D Institute Ukraine team

tizen ui theming with component designer · brief plan tizen native ui application development...

Documents