Tizen Native Applications presentation at Tizen Developer Workshop 2016 by Samsung R&D Indonesia Institute (SRIN)

1. DeveloperWorkshop
Tizen NativeApplication
Development with C/C++
Gilang Mentari Hamidy
SamsungResearch and Development Institute Indonesia(SRIN)
gilang.hamidy@gmail.com • g.hamidy@samsung.com •http://labs.heliosky.com
OneDrive Link: http://bit.ly/TizenNativeWorkshop

2. DeveloperWorkshop
Hallo! Ich heiβeGilang
Page 2
• I am engineer at Samsung Research Institute Indonesia
(SRIN)
• I have been involved in Tizen Projects in SRIN since
December2015, our firstTizen project
• Graduatedfrom Universitas Indonesia
• 4years experience asConsultant inAccenture Indonesia,
then suddenlychange my direction to Software Engineer
• Favoriteprogramming language: C# and C++!

3. DeveloperWorkshop
The Menu
 Intro
 WhyNative?
 TizenSDK
 TizenNative API
 Hello Native
 StartNew Project
 Native AppStructure
 CCrashCourse
 Runningthe App
 Debuggingthe App
 EFL Libraries
 Whatisit?
 Available Widgets
 WidgetsinYourApp
 Interactive Widget
 AdvancedWidget
 App Layouting
 WhatisEDJE
 Structure ofEDCfile
 Theme inNative App
 CustomizingGenlist
 TizenUI Builder
 Coding in C++
 WhyC++?
 SRINC++ Framework
 Some Examples
 Useful Libraries
 Sample Project
Page 3
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
All questions, direct at http://bit.ly/TanyaNative, I will discuss questions in
front 

4. DeveloperWorkshop
Utilize the full power ofTizen device
withTizen Native Framework
• Nativeapplication can
utilize the full power of
devicecapabilities
• Nativeapplication does
not sufferwith resource-
heavyweb rendering
• Unlike web application,
debuggingin native app is
aidedby the IDE
• Harderto learn compared
to web app framework
• Obscureerror and harder
to identify crashing bug
• Harderto develop cool
userinterface (hard but
possible)
Pros Cons
 Intro
 WhyNative?
 TizenSDK
 TizenNativeAPI
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 4

5. DeveloperWorkshop
Install Native SDK for Tizen
• Defaultinstallation
doesnot include
NativeSDK. Install it
usingUpdate Manager
• TizenNative SDK
providesC/C++
compilers (GCC/LLVM)
and its required
libraries.No additional
hassle required
 Intro
 WhyNative?
 TizenSDK
 TizenNativeAPI
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 5

6. DeveloperWorkshop Tools provided to develop native application for
Tizen: Integrated Development Environment
• CodeusingTizen IDE
(a.k.a.Eclipse)
• TizenIDE provides
debuggerinternally,
youcan perform step-
by-stepinteractive
debugging
 Intro
 WhyNative?
 TizenSDK
 TizenNativeAPI
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 6

7. DeveloperWorkshop Tools provided to develop native application for
Tizen: Log and CrashViewer
• Integrated in the IDE
• Logging similar to
Android’slogcat
• Crashviewer to display
StackTrace if the
application is crashed
 Intro
 WhyNative?
 TizenSDK
 TizenNativeAPI
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 7

8. DeveloperWorkshop Tools provided to develop native application for
Tizen: Enventor, a layout builder
• BuildUI layout for EFL
• AlmostWYSIWYG
editor.What you code
there will be similar
with what you will see
onthe device
• Willbe explained
furtherlater
 Intro
 WhyNative?
 TizenSDK
 TizenNativeAPI
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 8

9. DeveloperWorkshop Tools provided to develop native application for
Tizen:Tizen UI Builder
• Another way to
developUI for native
application
• WYSIWYGtools which
is very similar with
Android’slayout
builder
• Simplifyapplication
development
 Intro
 WhyNative?
 TizenSDK
 TizenNativeAPI
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 9

10. DeveloperWorkshop
Tizen NativeAPI
• A big set of API available
toaccess Tizen device
capability from Native
application
• From UI, networking,
telephony, system, and
user data
• It is possible to use
external libraries in your
application
• Access at
http://bit.ly/TizenNative
 Intro
 WhyNative?
 TizenSDK
 TizenNativeAPI
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 10

11. DeveloperWorkshop
Start your new native project
• File  New  Tizen Native Project
(Or you can choose Project and look
forTizen Native Project on the
dialog box)
• Various native project templates
available. To build native application
from scratch, choose Basic UI
• Give your project and package a
meaningful name, then click Finish
 Intro
 HelloNative
 StartNew Project
 NativeApp Structure
 CCrash Course
 Running theApp
 Debugging theApp
 EFL Libraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 11

12. DeveloperWorkshop
Whatare those project templates
available?
• BasicDALi
Nativeapplication using Dynamic
Application Library tocreate native
application with fancy graphical
interface
• BasicUI
Nativeapplication using
Enlightenment FrameworkLibrary
(EFL), default widget toolkit forTizen
• BasicUIwith EDC
SamewithBasicUI templatebut with
EDClayout example
• Downloadable Font
Todeploy your own custom font
• InputMethod Editor
Createyour own on-screen keyboard
• Service
Application which runs in the
backgroundanddoesn’t haveGUI
• Shared/StaticLibrary
Createcommon code library that can
beshared among projects
• UIBuilder
Develop nativeapplication using UI
builder lookalike withAndroid layout
builder
• Widget
Createyour own widget
 Intro
 HelloNative
 StartNew Project
 NativeApp Structure
 CCrash Course
 Running theApp
 Debugging theApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 12

13. DeveloperWorkshop
NativeTizen app project has similar
structure with LinuxC/C++ app project
• Includes
List of header files included automatically by
thebuilder
• inc
Yourown header files
• res
Resourcefiles tobe included in the
application installation package
• shared
Shared resource files that can be accessed
by otherapplication package
• src
Thesourcecode file
• lib
Library files if you have additional external
libraries
 Intro
 HelloNative
 Start New Project
 NativeAppStructure
 CCrash Course
 Running theApp
 Debugging theApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 13

14. DeveloperWorkshop
NativeTizen app project has similar
structure with LinuxC/C++ app project
• Includes
List of header files included automatically by
thebuilder
• inc
Yourown header files
• res
Resourcefiles tobe included in the
application installation package
• shared
Shared resource files that can be accessed
by otherapplication package
• src
Thesourcecode file
• lib
Library files if you have additional external
libraries
 Intro
 HelloNative
 Start New Project
 NativeAppStructure
 CCrash Course
 Running theApp
 Debugging theApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 14

15. DeveloperWorkshop
Nativeapplicationhas to always have
mainfunction
• main function is the entry point of your program
• InTizen application, main function always have to
initialize callbackfunctions to internal application events
suchas create, pause, terminate, and device events such
as battery low, etc.
• To saveyour time, just use the provided template. If you
touchit, do at your own risk
 Intro
 HelloNative
 Start New Project
 NativeAppStructure
 CCrash Course
 Running theApp
 Debugging theApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 15

16. DeveloperWorkshop
Nativeapplicationhas to always have
mainfunction Intro
 HelloNative
 Start New Project
 NativeAppStructure
 CCrash Course
 Running theApp
 Debugging theApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 16
int main(int argc, char *argv[])
{
appdata_s ad = {0,};
int ret = 0;
ui_app_lifecycle_callback_s event_callback = {0,};
app_event_handler_h handlers[5] = {NULL, };
event_callback.create = app_create;
event_callback.terminate = app_terminate;
event_callback.pause = app_pause;
event_callback.resume = app_resume;
event_callback.app_control = app_control;
ui_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);
ui_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &ad);
ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED,
ui_app_orient_changed, &ad);
ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed,
&ad);
ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED,
ui_app_region_changed, &ad);
ret = ui_app_main(argc, argv, &event_callback, &ad);
if (ret != APP_ERROR_NONE) {
dlog_print(DLOG_ERROR, LOG_TAG, "app_main() is failed. err = %d", ret);
}
return ret;
}

17. DeveloperWorkshop
Purpose ofApplicationEventCallbacks
Page 17
• Perform actions before themain
event loop starts, such as creating
thewindow andfirstUI of your
application
• At this point, (almost) allTizenAPI
functions can becalled safely
• When theapplication becomes
invisible, such as switching to other
application or clicking thehome
button
Create Pause
 Intro
 HelloNative
 Start New Project
 NativeAppStructure
 CCrash Course
 Running theApp
 Debugging theApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
• When theapplication becomes
visible, or waking up after being
paused
• Reallocate resource if theresource is
released by Pauseevent
• When theapplication is going to be
terminated.
• Releaseshared resource so other
application can utilize the resource
again
Resume Terminate

18. DeveloperWorkshop
The lifetime ofTizen Native
Application
Page 18
 Intro
 HelloNative
 Start New Project
 NativeAppStructure
 CCrash Course
 Running theApp
 Debugging theApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject

19. DeveloperWorkshop
Tizen Manifest as the metadata for
nativeapplication
• Act similar with Android
manifest
• Defines the identity of
application (ID, name, version,
icon)
• Define application privileges to
access system features or data
(see the list at
http://bit.ly/TizenPrivilege)
• Define required software or
hardware features (camera,
GPS, etc)
• Other advanced functionality
such as Application Control,
sharing, etc.
 Intro
 HelloNative
 Start New Project
 NativeAppStructure
 CCrash Course
 Running theApp
 Debugging theApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 19

20. DeveloperWorkshop
C ProgrammingLanguageCrash
Course
• C is the grandfather of
manypopular languages
like Java,Objective-C,C#,
etc
• Justthink of you coding in
limited version of Java
• Noclass and method,
onlystructures and
functions
• Manual memory
management!
• Good references:
– http://www.learn-c.org/
– https://en.wikipedia.org/
wiki/C_syntax
– http://en.cppreference.c
om/w/c/language/switch
Page 20
 Intro
 HelloNative
 Start New Project
 NativeApp Structure
 CCrash Course
 Running theApp
 Debugging theApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject

21. DeveloperWorkshop
Runningthe applicationfor the first
time
1. Start theemulator/connect thedevice
first
2. Click arrow button next to Smart
Launch on thetoolbar (Play button in
bluecircle)
3. Select NewLaunchConfiguration
4. Select theproject you want torun and
click OK
Afteryou follow this methodfor thefirst
time, thechoice for your application will
appearin Run/Debug icon in the toolbar
(buttonA andBin theimage).You can run
viathosebuttons thenext timeyou want
torun/debug
If you haven’t set security profile, it will ask
forit before deploying the app
Page 21
 Intro
 HelloNative
 Start New Project
 NativeApp Structure
 CCrash Course
 RunningtheApp
 Debugging theApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
2
3
4
A B

22. DeveloperWorkshop
Runningthe applicationfor the first
time
Page 22
 Intro
 HelloNative
 Start New Project
 NativeApp Structure
 CCrash Course
 RunningtheApp
 Debugging theApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
• Voila!Your application is
runningon the emulator

23. DeveloperWorkshop
Debugging the application
1. Click arrow button next to Debugicon
on thetoolbar (A bettle icon)
2. Select thedesired application to
debug
3. When popup appears, click Yes
AfterclickingYes, theIDE willswitch into
Debug perspective
Page 23
 Intro
 HelloNative
 Start New Project
 NativeApp Structure
 CCrash Course
 Running theApp
 DebuggingtheApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
1
2
3

24. DeveloperWorkshop
Debug Perspective ofTizen IDE
Page 24
 Intro
 HelloNative
 Start New Project
 NativeApp Structure
 CCrash Course
 Running theApp
 DebuggingtheApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
CurrentStack Frame VariableWatch
Code/CurrentInstruction
Console,Logs, etc

25. DeveloperWorkshop
Walkingstep-by-step of your program
codes
• Breakpoint is usefulto
maketheexecution of your
program pauses at certain
point
• Just doubleclick on theleft
area of source code editor
(seered squareon image
beside) untila blue dot
appears
• Tocontrolprogram
execution, usethetoolbar
Page 25
 Intro
 HelloNative
 Start New Project
 NativeApp Structure
 CCrash Course
 Running theApp
 DebuggingtheApp
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Skip all
breakpoints
Resume
execution
Pause Terminate
App
Step into inside
function
Step overto next
statement
Step out from
current function

26. DeveloperWorkshop
EnlightenmentFramework Libraries is
the core ofTizen NativeApplication
• Tizen profide EFL as thecore
components fordeveloping native
application
• EFL provides widerangeof libraries
usefultodevelop application, from
utilities toUI widgets
• UI libraries in EFL is called
Elementary
Page 26
 Intro
 HelloNative
 EFL Libraries
 Whatis it?
 AvailableWidgets
 Widgets inYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject

27. DeveloperWorkshop
EFL provides manywidgets which can
be composed to build UI
• Button, label, entry, grid, list, popup,
calendar, etc
• Access thelist on
http://bit.ly/TizenWidget
• CreateSampleProjects UI
Components toaccess thesampleof
widgets
• Run thesampletoview it in action
using emulatorordevice
Page 27
 Intro
 HelloNative
 EFLLibraries
 What is it?
 AvailableWidgets
 Widgets inYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject

28. DeveloperWorkshop
Applicationis composed by multiple
widgets
• Let’s goback toour first BasicUI application
• Checkfunction create_base_guiwhich
creates theapplication widgets.That
function is called by app_create function
during thecreation of the application
• Theapplication creates a window, then a
conformant, andalabel
• Window andconformant is a required
widget fortheapplication torun
• You can start addingwidget to conformant.
But conformant can only hold one widget
at atime. Soyou will need acontainer
widget (willbeexplained later)
Page 28
 Intro
 HelloNative
 EFLLibraries
 What is it?
 AvailableWidgets
 WidgetsinYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Window
Conformant
Label

29. DeveloperWorkshop
Containerwidget to hold more than
one widget
• Tizen has 3 basic container widgets: Box,
Grid,Table
• Thesimplest touseis Box, which acts
similarwithAndroid’s Linear Layout
• CreateBox by calling elm_box_add the
storethepointer returned tolocal variable
• Createwidgets you want toadd tobox by
calling therespective add function (such as
elm_label_add, elm_entry_add, etc) and
supplythepointertobox widget you stored
earlier as the parameter
• Callelm_box_pack_end to“pack” the
widget intothebox.Various pack order
available (start, end, after, before)
Page 29
 Intro
 HelloNative
 EFLLibraries
 What is it?
 AvailableWidgets
 WidgetsinYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Window
Conformant
Box
Label
Button
Calendar

30. DeveloperWorkshop
Usingcontainer widget to represent a
single view for navigation
• InTizen nativeapplication, to makea
navigableuser interface, we use naviframe
widget
• Naviframecan display one container at a
timebut can have a view stackwhich can
holdalmost limitless numberof container
• Thevisiblecontainer is the container on top
of thenaviframe stack.We perform
navigation by pushing container widget to
thenaviframe
Page 30
 Intro
 HelloNative
 EFLLibraries
 What is it?
 AvailableWidgets
 WidgetsinYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Window
Conformant
Naviframe
Box
Label
Button
Calendar

31. DeveloperWorkshop
Which functions to call?
• BecauseEFL is aflat-C library, calling functions on objects is different with what we
doin Java
• Javahas methods which is attached toan object instance
• In EFL, you haveloadof functions which accept Evas_Object pointer, andyou have
tocall correct function for an instanceof a type. Soyou have toexactly remember
what is insideyour Evas_Object pointer
• Thegood(orbad) news is when supplying incorrect Evas_Object pointertoa
function that accept different Evas_Object type, EFL willkeep silent andthe
program does not crash. It just won’t dowhat you might expect
• This is thenatureof EFLAPI whichis makes content inside Evas_Object pointer
semantically transparent tothedeveloper. This is tosupport theprocedural flat-C
library which is naturally type-unsafe
Page 31
 Intro
 HelloNative
 EFLLibraries
 What is it?
 AvailableWidgets
 WidgetsinYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject

32. DeveloperWorkshop
Picking functions to call
• Access thedocumentation at http://bit.ly/TizenNative
• EFL functions convention forElementaryAPI:
elm_[WIDGET TYPE]_[METHOD NAME]
• Begin by determining what widget you want tocreate, for instance, a
button. Sothefunction you needtocall is elm_button_add.Alladdfunction
is aconstructorof awidget. Storethe return value (Evas_Object pointer)
forreferencing tothat widget
• Supposedthat you want tochangethetext of thebutton. But you willnot
findelm_button_text_set orsimilaron thedocumentation
• Although EFL is flat-CAPI tosupport procedural, theback-end of itsAPI is
actually an object-orientedAPI.Wecan call thefunction of its parent type
• Theroot of the typeis widget (called as object in the code), so you can call
many elm_object functions on button, oneof it is elm_object_text_set.
Supply theEvas_Object pointertothefunction andit willwork as you
might expect
Page 32
 Intro
 HelloNative
 EFLLibraries
 What is it?
 AvailableWidgets
 WidgetsinYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject

33. DeveloperWorkshop
Don’t forget these things!
• Widgets are always in hidden state when created
Always callevas_object_show foreach widget you created
• Widgets are always in zerosize when created
Tolet EFL automatically sizeyour widgets tofill available containers, always call:
evas_object_size_hint_weight_set(widget, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(widget, EVAS_HINT_FILL, EVAS_HINT_FILL);
• Supply the parentcontainerwhencreatingyour widget
If you want toaddlabel toa box, call elm_label_add andsupply Evas_Object
pointertothebox.This is toensure EFL allocates memory block in correct order. So
when parent widget is removed, EFL also deallocate thechild widget
• Always store the Evas_Object pointerreturned by add function
Oryou cannot access your widget in easy way
• Do not freethe Evas_Object pointer
This willmess up yourapplication. EFL automatically manages thememory
allocation of its widgets. Donot outsmart thelibrary, only takecare of your own
allocated memory
Page 33
 Intro
 HelloNative
 EFLLibraries
 What is it?
 AvailableWidgets
 WidgetsinYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject

34. DeveloperWorkshop
Making the widget interactive
• Thewidget can receive event from user, such as click, hover, etc.
• EFL libraries is event-driven library. We can attach an event handler to listen to
specificevent andact accordingly as wedesired
• Severalimportant types of Events on EFL library:
– SmartEvent
Event of a “smart” widget.Basicallyahigh-levelevent such as clicked,pressed,unpressed,
etc
– EvasEvent
Amore lower levelevent of aUI object such as mouseup, mousemove, keydown, show,
hide,resize,etc
– Edje Event
Event which are triggeredfrom EDJEstylesheet program.WillbediscussedinApp Layouting
section
Page 34
 Intro
 HelloNative
 EFLLibraries
 What is it?
 AvailableWidgets
 Widgets inYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject

35. DeveloperWorkshop
Creating callback functionto be called
on an event
• Callback function usually will receive pointer totriggering widget, an event data,
anduserstatesuppliedwhen registering for an event
• Createa function tobe called by EFL when specificfunction occurs.The function has
tohaveparameters as follow
– SmartEvent
smart_event_callback_name(void* data, Evas_Object* obj, void* event_info)
– EvasEvent
evas_event_callback_name(void* data, Evas* evas, Evas_Object* obj, void* event_info)
– Edje Event
edje_event_callback_name(void* data, Evas_Object* obj, const char* emission, const
char* source)
• Datapointercan be usedtostoreuser datatobe accessed by callback function
• BecauseC does not have ‘this’ tostoreinstance data, you haveto supply it using
datapointer
Page 35
 Intro
 HelloNative
 EFLLibraries
 What is it?
 AvailableWidgets
 Widgets inYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject

36. DeveloperWorkshop
How to store user data
• Tostoreuserdata, wehave tostore it in struct datatype.
• It is recommendedtostore Evas_Object pointer, as well as business logic variables in
struct
• Try tonot storethestruct forstoring view datain global variable. Allocate the struct
dynamically when creating theview. This is toensure the view can be instantiated
morethan once
• Perform deinitialization using the callback event for EVAS_OBJECT_DEL of the
containerwidget, sothe data struct will be deallocated when thecontainer widget is
destroyed
• You can also attachpointer tothe struct toa widget object bycalling
evas_object_data_set
Page 36
 Intro
 HelloNative
 EFLLibraries
 What is it?
 AvailableWidgets
 Widgets inYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject

37. DeveloperWorkshop
AdvancedWidget:Creating widget by
composingother widgets
• SomeUserInterface elements might
not available out-of-the-box from EFL
libraries, sowe have tocompose
multiplewidgets toachieve theUI we
expect
• Forexample: drop down widget has to
becomposedof context popup widget
andbutton widget
• If yourUI element does not available,
createa function toconstruct yourUI
elements andreuse it across the
program
• SeeUIComponents sampleproject to
seesomewidget composition
examplePage 37
 Intro
 HelloNative
 EFLLibraries
 What is it?
 AvailableWidgets
 Widgets inYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject

38. DeveloperWorkshop
AdvancedWidget:Customizing
contentof list using widgets
• EFL provides acustomizablelist
widget (genericlist/genlist) which can
beusefulcreating types of list
• Genlist can provide item class which
can have acallback function toget a
widget forspecific part of the list
• Wecan even customizethe item
layout using EDCfile(will be explained
furtherlater)
Page 38
 Intro
 HelloNative
 EFLLibraries
 What is it?
 AvailableWidgets
 Widgets inYourApp
 InteractiveWidget
 AdvancedWidget
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject

39. DeveloperWorkshop
TPK Package
Layouting the app using EDJE
• EFL provideastylesheet-like
mechanism todefine layout, called
EDJE
• EDJE consist of EDCsourcefile, which
willbe compiled intoEDJ file tobe
loadedinto runtime
• EDCfileis adoptedfrom LUA
programming language. Basically it is
adeclarative script defining layout
position andsize
• You maysayit is theCSS for native
app
Page 39
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 Whatis EDJE
 Structureof EDC file
 Themein NativeApp
 Customizing Genlist
 TizenUI Builder
 Codingin C++
 UsefulLibraries
 SampleProject
EDCstylefile
(.edc)
C codefile(.c/.cpp)
EDJfile(.edj)
Executable
edje_cccompiler
GCC/LLVM
compiler
Compile
Package
Load

40. DeveloperWorkshop
Writing EDC file using Enventor
• Tizen SDK provides Enventorwhich is
an (almost)WYSIWYG editorforEDC
file
• Thelayout wecreate in Enventorwill
beexactly similar when loaded to the
real application. minor tweaksuch as
scaling tomakeeverything looks right
• EDJE can alsohave aprogram script
that can be usedfor animation or
changing stateof thestyle
• Thereare additional powerfultools to
debug yourEDCscript: edje_player. It
can “run” theEDJ file and see what it
behaves without running theentire
application. Findit on your Tizen SDK
folder
Page 40
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 Whatis EDJE
 Structureof EDC file
 Themein NativeApp
 Customizing Genlist
 TizenUI Builder
 Codingin C++
 UsefulLibraries
 SampleProject

41. DeveloperWorkshop
EDC file basic structures
• EDCfiles is a declarative file with tree
structure, just likeXML, but withC-like
syntax (with braces). Each elements
has attributes that defines thedetail
of theelements.
• Theroot of EDCfile is collections
• Todefinea style, we declare group
insidethecollection. We have togive
it name.
• A group can have multipleparts.
Parts arethe building blocks of your
layout.You can compose(almost)
unlimitednumberof part for each
group.
Page 41
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 What is EDJE
 Structureof EDC file
 Themein NativeApp
 Customizing Genlist
 TizenUI Builder
 Codingin C++
 UsefulLibraries
 SampleProject
collections {
base_scale: 1.0;
group { name: "main";
parts {
part {
name: "bg";
type: RECT;
scale: 1;
description {
state: "default" 0.0;
color: 30 31 34 255;
rel1.relative: 0.0 0.0;
rel2.relative: 1.0 1.0;
}
}
}
}
}

42. DeveloperWorkshop
Part types available on EDC file
• Basically EDCfiles only provide
primitivegraphical types. Below are
someimportant types
– RECT
A primitive rectangle
– TEXT/TEXTBLOCK
A text.DifferencesonlyTextblockcan
be multilineandbe set
programmatically
– IMAGE
Animage
– SWALLOW
Anareawhichcancontainsany
Elementarywidget.The importanttype
ofpart
• Seehttp://bit.ly/EFLEDC fordetails
on structureof EDCfile
• Each typecan have their own
attributes which can be set. Set the
attributes on description
declaration
• Most common attributes are:
– Color
Colordefined in R GB A one-byte
values in decimal,separated byspace
– Rel1/Rel2
Positioning ofthepart relativeto
otherpart element.Willbe explained
later
– Min/Max
Minimum/maximum sizeof thepart
Page 42
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 What is EDJE
 Structureof EDC file
 Themein NativeApp
 Customizing Genlist
 TizenUI Builder
 Codingin C++
 UsefulLibraries
 SampleProject

43. DeveloperWorkshop
Positioning object part in EDC file
• Part in EDCcan be positioned
relatively from other part. This is the
default mechanism in EDC
• Rel1/Rel2 attributes definethe other
part nameas the anchor point to
computetheposition of thepart
• Rel1 is thetop-left position, Rel2 is
thebottom-right position.Thepart
willthen be stretched between those
twopoints
• Therelative point is taken from the
position of anchored part.The point
is calculated as percentage between
0.0 to1.0 ofX&Yaxis of theanchored
part
Page 43
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 What is EDJE
 Structureof EDC file
 Themein NativeApp
 Customizing Genlist
 TizenUI Builder
 Codingin C++
 UsefulLibraries
 SampleProject
Thispart
Rel1
Anchor
Rel2
Anchor
Relative: 1.0 1.0
Relative: 0.0 0.0

44. DeveloperWorkshop
Relative position of a part
• Thediagram in left can describe how
relative positioning works in EDC
• You can usefractional amount as
relative. If you use0.5 0.5, then the
relative position will be theexact
centerpoint of thepart
• You can also not supply anypart
nameforrelative anchor. TheEDC
willusethe root canvas area as
anchorpart
• Seehttp://bit.ly/TizenPartPosition for
details on positioning part on EDC
file
Page 44
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 What is EDJE
 Structureof EDC file
 Themein NativeApp
 Customizing Genlist
 TizenUI Builder
 Codingin C++
 UsefulLibraries
 SampleProject
Rel
0.0 0.0
0.0 1.0 1.0 1.0
1.0 0.0
y
x

45. DeveloperWorkshop
Using EDJE in your application
• ToutilizeEDJE in your application,
you havetouselayout widget
• Callelm_layout_file_set toset
EDJ file tothelayout widget
• If you haveSwallow orText part in
yourEDJE layout, you can set it by
using
elm_layout_part_content_set
andelm_layout_part_text_set to
supply thewidget/text tothe
specifiedpart
Page 45
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 What is EDJE
 Structureof EDC file
 Themein NativeApp
 Customizing Genlist
 TizenUI Builder
 Codingin C++
 UsefulLibraries
 SampleProject

46. DeveloperWorkshop
OverridingTizen theme with your own
EDC file
• It is possibletooverride Tizen default
widget styleanduseyour own
implementation
• Don’t start from zero. Obtain the
original sourceof Tizen widget EDC
file. Pulldirectly fromTizen source
http://review.tizen.org/git
• Copy theEDCsourceyou want to
style, andput it on EDCfile on your
project. It might cannot becompiled
forthefirst time. Fix one byone the
error. Usually it is missing include
definition or missing file.
Page 46
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 What is EDJE
 Structureof EDC file
 Themein NativeApp
 Customizing Genlist
 TizenUI Builder
 Codingin C++
 UsefulLibraries
 SampleProject

47. DeveloperWorkshop
Use the widget override you created in
your application
• Twoway of embedding themetoyour application:
– Overlay
Replaceentirelythedefault themewith our implementation.Ensure thegroup name is
exactlysimilarwith theconvention of Elementarywidget
– Extensions
Extendthethemewhich addnew group name to thecollection.Does not replaceany
default group
Page 47
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 What is EDJE
 Structureof EDC file
 Themein NativeApp
 Customizing Genlist
 TizenUI Builder
 Codingin C++
 UsefulLibraries
 SampleProject
defaultTheme = elm_theme_new();
elm_theme_ref_set(defaultTheme, elm_theme_default_get());
elm_theme_overlay_add(defaultTheme, “/res/edc/naviframe.edc”);
elm_object_theme_set(rootFrame, defaultTheme);

48. DeveloperWorkshop
CustomizingGenlist style default style
• Thedefault styleis boring
• By extending default theme, wecan
defineour own genlist style. It is very
usefultocreate yourown item style
forgenlist
• Follow theprocedure of copying the
original sourcefrom Tizen source,
then start modifying yours
Page 48
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 What is EDJE
 Structureof EDC file
 Themein NativeApp
 CustomizingGenlist
 TizenUI Builder
 Codingin C++
 UsefulLibraries
 SampleProject

49. DeveloperWorkshop
TizenUI Builder, simpler way to
developUI
• Ratherthan coding yourself, you can
let theIDE generates the code for you
• Tizen IDE providesWYSIWYG editor
forbuilding nativeapp, similar with
Androidlayout editor
• But you havetodecide in the
beginning: want tocode yourself, or
utilizeUI builder.You cannot change
yourmindafter that
• Start new project andselect UI
Builder fromTemplate
Page 49
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 What is EDJE
 Structureof EDC file
 Themein NativeApp
 Customizing Genlist
 TizenUI Builder
 Codingin C++
 UsefulLibraries
 SampleProject

50. DeveloperWorkshop
Ifyou thinkC is too clumsy, code in
C++!
• C is procedural, C++ is object-
oriented
• C++ has classes, C only have
struct
• C++ has standard library that is
very stable and easy to use,
while C does not. In Tizen you
are equipped with some utilities,
like EFL Eina, but once again, it
is procedural
• C++ is typesafe. In C you deal
with casting everytime, might
lead to bug
• Tizen API is flat-C libraries, not
readily to be implemented in
C++ out of the box
• C++ is a massive language, quite
differ with Java/Objective-C, add
more learning curve
• Additional code size and
complexity created by the
compiler, as well as memory
footprint (but still far-far less
than web-based app)
Pros Cons
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 WhyC++?
 SRINC++ Framework
 SomeExamples
 UsefulLibraries
 SampleProject
Page 50

51. DeveloperWorkshop
SRINC++ Framework Libraries: Our
library to codeTizen NativeApp inC++
• Ourresearch product for Tizen
development
• Havebeen implemented in all our
Tizen projects in SRIN(Yes, weall
codeour projects in nativeC++)
• Was born becausewe fed up of
coding in procedural during our first
two-weeks of developing native
Tizen app
• The library is built as Shared
Library
• Your project can compile and
link against the library
• Define application pattern using
popular MVC pattern. This helps
in organizing app and help
migrating from popular platform
such as Android or iOS
• Simplify boilerplate codes that
resulted from using flat-C API of
Tizen API
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 WhyC++?
 SRINC++ Framework
 SomeExamples
 UsefulLibraries
 SampleProject
Page 51

52. DeveloperWorkshop
Example:HelioskyApp, aWordpress
blog client inTizen
• My blog: http://heliosky.com using
Wordpress.UsingWP REST 2.0 asAPI
toconnect tomy blog
• Just run andseeit in action 
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 WhyC++?
 SRINC++ Framework
 SomeExamples
 UsefulLibraries
 SampleProject
Page 52

53. DeveloperWorkshop
Useful libraries that can enhance your
Tizen native development
• Weadmit,Tizen NativeAPI sometimes is hard touse. Sohere’s someof libraries
that weusein our projects
• RapidJSON (http://rapidjson.org)
C++ way toparseJSON.Way simplerand straightforwardthan usingGlib provided
byTizen
• QuinceLib (http://quince-lib.org)
ORM forSQLiteinTizen.Very simpleway rather than writing your own SQL query
andfetching data from memory
• Allthoselibraries is embedded in ourSRINC++ FrameworkLibraries. Wewill share
it soon 
• Registeryoure-mail onGitLab, and also register to http://bit.ly/SRINCPPLIB and
when weare ready to publish, wewill notify you!
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject
Page 53

54. DeveloperWorkshop
SomeSneak Peek…
Page 54
 Intro
 HelloNative
 EFLLibraries
 AppLayouting
 Codingin C++
 UsefulLibraries
 SampleProject