Tizen UI Theming with Component Designer

Size: px

Start display at page:

Download "Tizen UI Theming with Component Designer"

Holly Wilkins
5 years ago
Views:

2 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

3 Tizen framework EFL (Enlightenment foundation library)

4 Enlightenment Foundation Library

5 Enlightenment Foundation Library important for native development

6 Edje Data Collection

7 EDC (Edje Data Collection) Is a plain text file, consisting of instructions for the Edje Compiler EDC instructions Edje Compiler Elementary widgets EDC language defines how things will looks like

8 EDC primitives programs (for animation) resources STATE_SET SIGNAL_EMIT PLAY_TONE

9 Main EDC keywords Group (a set of parts and programs)

10 Main EDC keywords Group (a set of parts and programs) Part (single primitive with different properties)

11 Main EDC keywords Group (a set of parts and programs) Part (single primitive with different properties) State (single primitive can has different looks) State 1 State 2

12 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) Signal from world (ex. user clicked) Program change state of part

13 Resources Images (for IMAGE parts)

14 Resources Images (for IMAGE parts) Text Styles (RTF stuff, for TEXTBLOCK 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

15 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!

16 Part positioning problem Rel1 (0.0; 0.0) This part is going to be placed in area between rel1 and rel2 point Rel2 (1.0; 1.0)

17 Part positioning problem (offset) Rel1 (0.0; 0.0) Offset: 16px 16px Rel2 (1.0; 1.0)

18 Part positioning problem (relative) Rel1 (0.25; 0.25) Rel2 (0.75; 0.75)

19 Part positioning problem (relative to parts) Rel1 (0.25; 0.25) To: red part Edje will calculate it Rel2 (0.75; 0.75) To: blue part

20 Part positioning problem (relative to parts) Rel1 (1.0; 1.0) To: red rectangle Rel2 (0.0; 0.0) To: blue rectangle

21 Part positioning problem (align&relative to parts) Rel1 (1.0; 1.0) To: red rectangle Align: ( ) Rel2 (0.0; 0.0) To: blue rectangle

22 Let's make an EDC example

23 Group main with parts

24 IMAGE parts and resources header.png border.png

25 TEXT part added for topic

26 Don't forget about background

27 More resources!!! news_1.png news_2.png

28 More resources!!!

29 Text Style and TEXTBLOCK part Applied text style to TEXTBLOCK part font=breezesans font_size=16 color=#ffffff wrap=word

30 And the last topic (just copy&paste)

31 Themes l EDC layout l EDC layout Check widget l EDC layout

33 EDC coding highlights (main uncomfortables)

34 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

35 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

36 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

37 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) 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

38 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)

39 Component Designer

40 Component Designer visual tool

41 Component Designer is a part of Tizen Studio

42 Component Designer is a part of Tizen Studio and crossplatform

43 Component Designer high-level overview 1. List of groups 3 2. List of part/state/items/programs/data 3. Tabs of opened groups 4. Properties of selected items Workspace 2

44 Component Designer high-level overview (groups)

45 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)

46 Component Designer high-level overview (groups) General EDC groups are folders and simple files It is possible to create new styles

47 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

modify Make alias of currently existed groups with another name elm/bg/base/alias is alias

48 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

49 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

50 Component Designer high-level overview (tabs)

51 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).

52 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.

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

54 Component Designer high-level overview (parts, states) Shows parts, their states and part items (if they exists), programs and data items

55 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)

56 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

57 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)

58 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]

to (currently opened tab of that group) Restack parts above and below (top parts are actually on the very bottom of canvas) Delete

59 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.

60 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.

61 Component Designer high-level overview (properties)

62 Component Designer high-level overview (properties) Every selected part/item/state/program etc will show it's properties on the right

63 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 Experiments require knowledge of existed properties VS Possible to experiment more often with unknown properties

64 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

65 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!

66 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

67 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)

68 Resource managers

69 Resource managers (image manager) 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

70 Resource managers (color class 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

71 Resource managers (style manager) 1. Creating new tags/styles and deleting old one 2. Apply and show selected text styles on a certain 2 1 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 5 4 3

72 Component Designer high-level overview (workspace)

are easy to show (like rectangle, text or image) And there are parts

73 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

74 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.

75 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

76 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

select part on workspace and change size of it Object area mode of

77 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

78 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

79 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.

80 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).

81 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

82 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)

83 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

84 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

85 Live View (here is GenList Item)

86 Live View (we can check how it looks like)

87 Live View (we can check how it looks like)

88 Component Designer EXAMPLE

89 Plans Supporting 3D Vector Graphic Text effects based on Evas_Filters Keep up to date with all new EDC features

90 We need your feedbacks Component Designer (more about it): goo.gl/opbzig Or if you have any questions : vi.vorobiov@samsung.com

91 Special Thanks Samsung Electronics / Software R&D Center / Tizen Platform Lab Samsung R&D Institute Ukraine team

92 Q&A

The Art of Tizen UI Theme Technology in Various Profiles

The Art of Tizen UI Theme Technology in Various Profiles Daniel Juyung Seo Samsung Electronics Who Am I 2 Daniel Juyung Seo Senior Engineer at Samsung Electronics juyung.seo@samsung.com a.k.a SeoZ Tizen