Upload
phamthu
View
229
Download
2
Embed Size (px)
Citation preview
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
Group (a set of parts and programs)
Part (single primitive with different properties)
State 1
Main EDC keywords
Group (a set of parts and programs)
Part (single primitive with different properties)
State (single primitive can has different looks)
State 2
Program change
state of part Signal from world
(ex. user clicked)
Main EDC keywords
Group (a set of parts and programs)
Part (single primitive with different properties)
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
Images (for IMAGE parts)
Text Styles (RTF stuff, for TEXTBLOCK parts)
Resources
Images (for IMAGE parts)
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)
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
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
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
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
TEXTBLOCK and Text Styles (obviously hard – a lot of RTF properties)
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
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)
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)
Component Designer – high-level overview (groups)
General EDC groups are folders and simple files
It is possible to create new styles
Component Designer – high-level overview (groups)
General EDC groups are folders and simple files
It is possible to create new styles
Or create a copy of already existed style to modify
Component Designer – high-level overview (groups)
General EDC groups are folders and simple files
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
Component Designer – high-level overview (groups)
General EDC groups are folders and simple files
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
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)
Component Designer – high-level overview (parts, states)
Shows parts, their states and part items (if they exists), programs and data items
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)
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)
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)
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]
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]
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)
Component Designer – high-level overview (properties)
Every selected part/item/state/program etc will show it's properties on the right
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
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
Every part and their state has common properties and their own
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
Every part and their state has common properties and their own
Map transformation!
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
Every part and their state has common properties and their own
Map transformation!
Property tooltips
(!) No more documentation!
Just hover mouse over the
property and it will show up
tooltip with description of
the attribute
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
Every part and their state has common properties and their own
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)
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.
Component Designer – high-level overview (workspace)
Parts are shown on workspace with their size and applied properties
It is possible to select part on workspace
Component Designer – high-level overview (workspace)
Parts are shown on workspace with their size and applied properties
It is possible to select part on workspace and change size of it
Component Designer – high-level overview (workspace)
Parts are shown on workspace with their size and applied properties
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
Workspace (object area)
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.
Workspace (object area)
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).
Workspace (object area)
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.
Component Designer – high-level overview (workspace)
Parts are shown on workspace with their size and applied properties
It is possible to select part on workspace and change size of it
Object area mode of selected parts
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)
Component Designer – high-level overview (workspace)
Parts are shown on workspace with their size and applied properties
It is possible to select part on workspace and change size of it
Object area mode of selected parts
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)
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
Q&A