SlideShare a Scribd company logo

Samsung Indonesia: Tizen Native App

Ryo Jin, profile picture
Ryo Jin

This document is a workshop presentation on Tizen native application development using C/C++. It covers topics such as the advantages of native apps, the Tizen SDK, application structure, debugging techniques, and uses the Enlightenment Framework Libraries for UI development. The presentation is aimed at providing an introductory guide for developers to start building native applications on Tizen devices.

Software
Related topics:
Mobile App Insights
1 of 54
Downloaded 19 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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
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++!
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 
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
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
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
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
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
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
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
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
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
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
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
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
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; }
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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; } } } } }
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
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
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
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
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
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);
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
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
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
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
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
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
DeveloperWorkshop SomeSneak Peek… Page 54  Intro  HelloNative  EFLLibraries  AppLayouting  Codingin C++  UsefulLibraries  SampleProject

More Related Content

PPTX
Tizen Native Application Development with C/C++
Gilang Mentari Hamidy
 
PDF
Samsung Indonesia: Tizen Wearables
Ryo Jin
 
PDF
Samsung Indonesia: Tizen Web Apps
Ryo Jin
 
PDF
Ionic in 30
Mike Hartington
 
PDF
Xamarin v.Now
Craig Dunn
 
PPTX
NCDevCon 2017 - Cross Platform Mobile Apps
John M. Wargo
 
PDF
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Gabriel Huecas
 
KEY
Appcelerator Titanium - Hybrid App-Development
h_marvin
 
Tizen Native Application Development with C/C++
Gilang Mentari Hamidy
 
Samsung Indonesia: Tizen Wearables
Ryo Jin
 
Samsung Indonesia: Tizen Web Apps
Ryo Jin
 
Ionic in 30
Mike Hartington
 
Xamarin v.Now
Craig Dunn
 
NCDevCon 2017 - Cross Platform Mobile Apps
John M. Wargo
 
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Gabriel Huecas
 
Appcelerator Titanium - Hybrid App-Development
h_marvin
 

What's hot (20)

PDF
Ionic App Platform Overview
Ionic Framework
 
PDF
Ionic in 30
Ionic Framework
 
PDF
Cordova + Ionic + MobileFirst
Raymond Camden
 
PDF
Capacitor 2.0 Launch
Ionic Framework
 
PPTX
Ionic framework
Software Infrastructure
 
PDF
Building capacitor apps in appflow webinar
Ionic Framework
 
PDF
Hybrid App Development, Redefined
Ionic Framework
 
PDF
Top Cordova Challenges and How to Tackle Them
Ionic Framework
 
PDF
iPlayground: CarPlay and MFI Hearing Aids
Weizhong Yang
 
PDF
Ionic Native: Native-powered apps, without the hassle
Ionic Framework
 
PPTX
When Android Apps Go Evil
Lookout
 
PDF
Capacitor 1.0 launch
Ionic Framework
 
PDF
Scaling Mobile Development
Lookout
 
PPTX
The Power, and Pain, of Cordova Plugins
Intel® Software
 
PDF
Reimagining Cordova: Building Cross-Platform Web Apps with Capacitor
Ionic Framework
 
PPTX
Universal Windows Platform
Software Infrastructure
 
PDF
Introduction to PhoneGap
RameshNair6
 
PDF
[Srijan Wednesday Webinars] Building a High Performance QA Team
Srijan Technologies
 
PDF
Mobile test automation with Selenium, Selendroid and ios-driver
Michael Palotas
 
PPTX
Hybrid Mobile Applications
Ruwan Ranganath
 
Ionic App Platform Overview
Ionic Framework
 
Ionic in 30
Ionic Framework
 
Cordova + Ionic + MobileFirst
Raymond Camden
 
Capacitor 2.0 Launch
Ionic Framework
 
Ionic framework
Software Infrastructure
 
Building capacitor apps in appflow webinar
Ionic Framework
 
Hybrid App Development, Redefined
Ionic Framework
 
Top Cordova Challenges and How to Tackle Them
Ionic Framework
 
iPlayground: CarPlay and MFI Hearing Aids
Weizhong Yang
 
Ionic Native: Native-powered apps, without the hassle
Ionic Framework
 
When Android Apps Go Evil
Lookout
 
Capacitor 1.0 launch
Ionic Framework
 
Scaling Mobile Development
Lookout
 
The Power, and Pain, of Cordova Plugins
Intel® Software
 
Reimagining Cordova: Building Cross-Platform Web Apps with Capacitor
Ionic Framework
 
Universal Windows Platform
Software Infrastructure
 
Introduction to PhoneGap
RameshNair6
 
[Srijan Wednesday Webinars] Building a High Performance QA Team
Srijan Technologies
 
Mobile test automation with Selenium, Selendroid and ios-driver
Michael Palotas
 
Hybrid Mobile Applications
Ruwan Ranganath
 
Ad

Viewers also liked (15)

PDF
Gear Fit2 Watchface Design Guide
Ryo Jin
 
PDF
OpenMobile ACL bringing Android apps to TIZEN
Ryo Jin
 
PDF
Introduction to Watch Face Development with Tizen Studio
Ryo Jin
 
PDF
Xotelia - Why should you implement a dynamic pricing strategy on your vacatio...
removed_2ed948d09b673c30435c5ecb7bc4a9df
 
PDF
Seoul topis
Farid Ibrahim
 
PPTX
LieDM asociacija - 2013 on
Airina Volungeviciene
 
PDF
World Economic Forum on East Asia 2006
WorldEconomicForumDavos
 
PPTX
ROARERS
Maranganti Pavankumar
 
PPT
计算机应用基础课件(一)
51 lecture
 
PDF
$1000 BEFORE JAN. 1? LOOK AT INDIA
Steven Rhyner
 
PDF
Rajesh portfolio
Rajesh chowdary
 
PDF
Dr CK Kim, City of Seoul - U-TOPIS & Seoul PTA
Shane Mitchell
 
PDF
Snick English
Anne Snick
 
PDF
Careers in copywriting part 2
Tom Altstiel
 
PPTX
Presentation for Aswad (Final Draft).pptx
Sher Shah
 
Gear Fit2 Watchface Design Guide
Ryo Jin
 
OpenMobile ACL bringing Android apps to TIZEN
Ryo Jin
 
Introduction to Watch Face Development with Tizen Studio
Ryo Jin
 
Xotelia - Why should you implement a dynamic pricing strategy on your vacatio...
removed_2ed948d09b673c30435c5ecb7bc4a9df
 
Seoul topis
Farid Ibrahim
 
LieDM asociacija - 2013 on
Airina Volungeviciene
 
World Economic Forum on East Asia 2006
WorldEconomicForumDavos
 
ROARERS
Maranganti Pavankumar
 
计算机应用基础课件(一)
51 lecture
 
$1000 BEFORE JAN. 1? LOOK AT INDIA
Steven Rhyner
 
Rajesh portfolio
Rajesh chowdary
 
Dr CK Kim, City of Seoul - U-TOPIS & Seoul PTA
Shane Mitchell
 
Snick English
Anne Snick
 
Careers in copywriting part 2
Tom Altstiel
 
Presentation for Aswad (Final Draft).pptx
Sher Shah
 
Ad

Similar to Samsung Indonesia: Tizen Native App (20)

PPT
Native Android for Windows Developers
Yoss Cohen
 
PDF
Getting Native with NDK
ナム-Nam Nguyễn
 
PDF
The Art of Tizen UI Theme Technology in Various Profiles (OSCON 2014)
Daniel Juyung Seo
 
PDF
Android Internals (This is not the droid you’re loking for...)
Giacomo Bergami
 
PDF
The Art of Tizen UI Theme Technology in Various Profiles
Daniel Juyung Seo
 
PDF
Tizen application inside out
Eun Young Lee
 
PPTX
Native Development for Windows Phone 8
Rob Irving
 
PDF
International Journal of Engineering Research and Development
IJERD Editor
 
PPTX
Using the android ndk - DroidCon Paris 2014
Paris Android User Group
 
PDF
[Ajou unib.] Tizen v2.4 z3 practice
Byungwook Lee
 
PPTX
Android ndk
Sentinel Solutions Ltd
 
PDF
Introdução ao Tizen
Eduardo Santana
 
PDF
Android Internals
Marko Gargenta
 
PPTX
From React to React Native - Things I wish I knew when I started
sparkfabrik
 
PPTX
Advance Android Application Development
Ramesh Prasad
 
PPTX
Android NDK
Sentinel Solutions Ltd
 
PDF
NDK Programming in Android
Arvind Devaraj
 
PDF
Tizen 2.0 overview
Naruto TAKAHASHI
 
PDF
Using the Android Native Development Kit (NDK)
DroidConTLV
 
PPTX
Porting tometro
dogra09
 
Native Android for Windows Developers
Yoss Cohen
 
Getting Native with NDK
ナム-Nam Nguyễn
 
The Art of Tizen UI Theme Technology in Various Profiles (OSCON 2014)
Daniel Juyung Seo
 
Android Internals (This is not the droid you’re loking for...)
Giacomo Bergami
 
The Art of Tizen UI Theme Technology in Various Profiles
Daniel Juyung Seo
 
Tizen application inside out
Eun Young Lee
 
Native Development for Windows Phone 8
Rob Irving
 
International Journal of Engineering Research and Development
IJERD Editor
 
Using the android ndk - DroidCon Paris 2014
Paris Android User Group
 
[Ajou unib.] Tizen v2.4 z3 practice
Byungwook Lee
 
Android ndk
Sentinel Solutions Ltd
 
Introdução ao Tizen
Eduardo Santana
 
Android Internals
Marko Gargenta
 
From React to React Native - Things I wish I knew when I started
sparkfabrik
 
Advance Android Application Development
Ramesh Prasad
 
Android NDK
Sentinel Solutions Ltd
 
NDK Programming in Android
Arvind Devaraj
 
Tizen 2.0 overview
Naruto TAKAHASHI
 
Using the Android Native Development Kit (NDK)
DroidConTLV
 
Porting tometro
dogra09
 

More from Ryo Jin (20)

PDF
Why is EFL used on Tizen?
Ryo Jin
 
PDF
Samsung Z4 User Manual
Ryo Jin
 
PDF
Samsung ARTIK 050 (ARTIK ZERO) Modules Data Sheet
Ryo Jin
 
PDF
Tizen 3.0's Window System Integration Layer of OpenGLES/EGL & Vulkan Driver
Ryo Jin
 
PDF
Panduan Penggunaan Perangkat Wearable Tizen
Ryo Jin
 
PDF
Cara Menggunakan Smartphone Tizen
Ryo Jin
 
PDF
Samsung Indonesia: Tizen Store
Ryo Jin
 
PDF
Samsung Indonesia: Tizen Platform Overview and IoT
Ryo Jin
 
PDF
Russian Tizen Project
Ryo Jin
 
PDF
Samsung SM-R360 Tizen User Manual
Ryo Jin
 
PDF
Tizen Micro Profile for IoT device
Ryo Jin
 
PDF
Panduan Dasar Pemrograman Tizen
Ryo Jin
 
PDF
The Story of Enlightenment, EFL, Tizen and Wayland
Ryo Jin
 
PDF
Tizen PASS
Ryo Jin
 
PDF
Tizen PASS
Ryo Jin
 
PDF
Samsung Gear UI Design Guidelines
Ryo Jin
 
PDF
Attack surface analysis of Tizen devices
Ryo Jin
 
PDF
Samsung DeepSort
Ryo Jin
 
PDF
Samsung Gear Circle SM-R130 User Manual
Ryo Jin
 
PDF
Samsung Gear S SM-R750 User Manual
Ryo Jin
 
Why is EFL used on Tizen?
Ryo Jin
 
Samsung Z4 User Manual
Ryo Jin
 
Samsung ARTIK 050 (ARTIK ZERO) Modules Data Sheet
Ryo Jin
 
Tizen 3.0's Window System Integration Layer of OpenGLES/EGL & Vulkan Driver
Ryo Jin
 
Panduan Penggunaan Perangkat Wearable Tizen
Ryo Jin
 
Cara Menggunakan Smartphone Tizen
Ryo Jin
 
Samsung Indonesia: Tizen Store
Ryo Jin
 
Samsung Indonesia: Tizen Platform Overview and IoT
Ryo Jin
 
Russian Tizen Project
Ryo Jin
 
Samsung SM-R360 Tizen User Manual
Ryo Jin
 
Tizen Micro Profile for IoT device
Ryo Jin
 
Panduan Dasar Pemrograman Tizen
Ryo Jin
 
The Story of Enlightenment, EFL, Tizen and Wayland
Ryo Jin
 
Tizen PASS
Ryo Jin
 
Tizen PASS
Ryo Jin
 
Samsung Gear UI Design Guidelines
Ryo Jin
 
Attack surface analysis of Tizen devices
Ryo Jin
 
Samsung DeepSort
Ryo Jin
 
Samsung Gear Circle SM-R130 User Manual
Ryo Jin
 
Samsung Gear S SM-R750 User Manual
Ryo Jin
 

Recently uploaded (20)

PDF
Comprehensive Salesforce Implementation Services.pdf
VALiNTRY360
 
PDF
ShowUs: Pharo Stream Deck (ESUG 2025, Gdansk)
ESUG
 
PDF
Community & News Update Q2 Meet Up 2025
VictoriaMetrics
 
PPTX
Hire Expert Blazor Developers | Scalable Solutions by OnestopDA
OnestopDA
 
PDF
How to Choose the Most Effective Social Media Agency in Bangalore.pdf
Zinavo Pvt Ltd
 
PDF
The Future of Smart Factories Why Embedded Analytics Leads the Way
Varsha Nayak
 
PPTX
Mastering-Cybersecurity-The-Crucial-Role-of-Antivirus-Support-Services.pptx
akkie9682
 
PPTX
Hire Expert WordPress Developers from Brainwings Infotech
Brainwings Infotech
 
PPTX
Materi_Pemrograman_Komputer-Looping.pptx
RanuFajar1
 
PDF
Micromaid: A simple Mermaid-like chart generator for Pharo
ESUG
 
PDF
AI in Product Development-omnex systems
omnex systems
 
PDF
Forouzan Book Information Security Chaper - 1
Akash768972
 
PPTX
Online Work Permit System for Fast Permit Processing
SHEQ Network Limited
 
PPTX
Visualising Data with Scatterplots in IBM SPSS Statistics.pptx
Version 1 Analytics
 
DOCX
The Future of Smart Factories Why Embedded Analytics Leads the Way
Varsha Nayak
 
PDF
QAware_Mario-Leander_Reimer_Architecting and Building a K8s-based AI Platform...
QAware GmbH
 
PDF
2025 Textile ERP Trends: SAP, Odoo & Oracle
Aetos Technologies
 
PDF
Best Practices for Rolling Out Competency Management Software.pdf
darreny384
 
PPTX
Save Business Costs with CRM Software for Insurance Agents
Insurance Tech Services
 
PPTX
10 Hidden App Development Costs That Can Sink Your Startup.pptx
Lunar Web Solution
 
Comprehensive Salesforce Implementation Services.pdf
VALiNTRY360
 
ShowUs: Pharo Stream Deck (ESUG 2025, Gdansk)
ESUG
 
Community & News Update Q2 Meet Up 2025
VictoriaMetrics
 
Hire Expert Blazor Developers | Scalable Solutions by OnestopDA
OnestopDA
 
How to Choose the Most Effective Social Media Agency in Bangalore.pdf
Zinavo Pvt Ltd
 
The Future of Smart Factories Why Embedded Analytics Leads the Way
Varsha Nayak
 
Mastering-Cybersecurity-The-Crucial-Role-of-Antivirus-Support-Services.pptx
akkie9682
 
Hire Expert WordPress Developers from Brainwings Infotech
Brainwings Infotech
 
Materi_Pemrograman_Komputer-Looping.pptx
RanuFajar1
 
Micromaid: A simple Mermaid-like chart generator for Pharo
ESUG
 
AI in Product Development-omnex systems
omnex systems
 
Forouzan Book Information Security Chaper - 1
Akash768972
 
Online Work Permit System for Fast Permit Processing
SHEQ Network Limited
 
Visualising Data with Scatterplots in IBM SPSS Statistics.pptx
Version 1 Analytics
 
The Future of Smart Factories Why Embedded Analytics Leads the Way
Varsha Nayak
 
QAware_Mario-Leander_Reimer_Architecting and Building a K8s-based AI Platform...
QAware GmbH
 
2025 Textile ERP Trends: SAP, Odoo & Oracle
Aetos Technologies
 
Best Practices for Rolling Out Competency Management Software.pdf
darreny384
 
Save Business Costs with CRM Software for Insurance Agents
Insurance Tech Services
 
10 Hidden App Development Costs That Can Sink Your Startup.pptx
Lunar Web Solution
 

Samsung Indonesia: Tizen Native App

  • 1. DeveloperWorkshop Tizen NativeApplication Development with C/C++ Gilang Mentari Hamidy SamsungResearch and Development Institute Indonesia(SRIN) [email protected] • [email protected] •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