Что такое tizen и с чем его едят лучше всего наверное сможет рассказать гугл или любой другой бинг. А мы рассмотрим как сделать native приложение написав как можно меньше нативного кода.
И так давайте знакомится c Edje. Edje это способ описания интерфейса и действий в efl, близкий аналог qt quick, но появившийся раньше и не перетягивающий на себя часть функционала библиотеки.
Hачнем с того что рассмотрим примерную структуру edje файла:
- collection — корневой элемент один на файл;
- group — группа элементов, в коллекции их может быть несколько, в данном контексте например обычный циферблат и энергосберегающий, программ, которые можно использовать как отдельный компонент формы, или как layout для размещения виджетов;
- script — блок для написания своего кода на embryo. Это такой простой язык основанный на Small язык, с его помощью можно изменять элементы edje по какому либо алгоритму на лету(например сделать убегающую от курсора мыши кнопку);
- image — блок описания используемых изображений;
- parts — в некотором роде основной блок т.к. именно в нем размещаются части которые в дальнейшем можно использовать в окне программы.
Теперь начнем делать фейс. В первую очередь мы объявили в блоке image какие изображения будем использовать.
images { image: "aod_h.png" COMP; image: "aod_m1.png" COMP; image: "aod_m2.png" COMP; image: "aod_m3.png" COMP; image: "aod_m4.png" COMP; image: "aod_m5.png" COMP; }
Далее мы описываем отображаемые элементы и их состояние по умолчанию и размещаем текстовое поле для индикации AM/PM. Что и как мы будем делать мы рассмотрим чуть ниже.
parts { part{ name:"aod/h"; scale: 1; type: IMAGE; description{ state: "default"; max: 360 360; visible: 1; image.normal: "aod_h.png"; aspect: 1 1; align: 0.5 0.5; rel1.relative: 0.00 0.00; rel2.relative: 1.00 1.00; map.on: 1; map.rotation.z: 210.0; } } part { name:"aod/m1"; scale: 1; type: IMAGE; description { state: "default"; max: 360 360; visible: 1; image.normal: "aod_m1.png"; aspect: 1 1; align: 0.5 0.5; rel1.relative: 0.00 0.00; rel2.relative: 1.00 1.00; map.on: 1; map.rotation.z:0; } } part { name:"aod/m2"; scale: 1; type: IMAGE; description { state:"default"; max: 360 360; visible: 1; image.normal: "aod_m2.png"; aspect: 1 1; align: 0.5 0.5; rel1.relative: 0.00 0.00; rel2.relative: 1.00 1.00; map.on: 1; map.rotation.z:0; } } part { name:"aod/m3"; scale: 1; type: IMAGE; description { state:"default"; max: 360 360; visible: 1; image.normal: "aod_m3.png"; aspect: 1 1; align: 0.5 0.5; rel1.relative: 0.00 0.00; rel2.relative: 1.00 1.00; map.on: 1; map.rotation.z:0; } } part { name:"aod/m4"; scale: 1; type: IMAGE; description { state:"default"; max: 360 360; visible: 1; image.normal: "aod_m4.png"; aspect: 1 1; align: 0.5 0.5; rel1.relative: 0.00 0.00; rel2.relative: 1.00 1.00; map.on: 1; map.rotation.z:0; } } part { name:"aod/m5"; scale: 1; type: IMAGE; description { state:"default"; max: 360 360; visible: 1; image.normal: "aod_m5.png"; aspect: 1 1; align: 0.5 0.5; rel1.relative: 0.00 0.00; rel2.relative: 1.00 1.00; map.on: 1; map.rotation.z:0; } } part{ name:"aod/act"; scale: 1; type: RECT; description { state:"default"; color: 0 136 170 55; visible: 1; max: 360 360; align: 0.5 0.5; rel1.relative: 0.00 0.00; rel2.relative: 1.00 1.00; } } part { name:"ampm"; type: TEXT; scale: 1; effect: SOFT_OUTLINE; description { state:"default"; color: 255 255 255 255; color2: 0 136 170 100; max: 360 360; visible: 1; text { size: 35; font: "Sans"; text: "AM"; align: 0.5 0.5; min: 0 0; } align: 0.5 0.5; rel1.relative: 0.2505 0.3598; rel2.relative: 0.7505 0.6398; } } }
Детальная документация по parts.
А вот теперь начинается самое интересное, сейчас мы опишем часть которая позволит использовать по минимум кода на C.
script { public minutes; public hour; public hideMinutes(val) { new i; new j; new pid; new buf[24]; j = val; for(i = 5; i > j; i--) { snprintf(buf, 23, "aod/m%d", i); pid = get_part_id(buf); custom_state(pid, "default", 0.0); set_state_val(pid, STATE_VISIBLE, 0); set_state(pid, "custom", 0.0); } } public showMinutes(val) { new i; new j; new Float:angle; new pid; new x; new buf[24]; j = val; x = (val / 5); angle = x * 30.0; for(i = 0; i < j; i++) { snprintf(buf, 23, "aod/m%d", i); pid = get_part_id(buf); custom_state(pid, "default", 0.0); set_state_val(pid, STATE_VISIBLE, 1); set_state_val(pid, STATE_MAP_ON, 1); set_state_val(pid, STATE_MAP_ROT_Z, angle); set_state(pid, "custom", 0.0); } } public setHour(val) { new Float:h; h = (val > 12 ? val - 12 : val)*30.0; if(val > 12) { set_text(PART:"ampm", "PM"); } else { set_text(PART:"ampm", "AM"); } custom_state(PART:"aod/h", "default", 0.0); set_state_val(PART:"aod/h", STATE_MAP_ON, 1); set_state_val(PART:"aod/h", STATE_MAP_ROT_Z, h); set_state(PART:"aod/h", "custom", 0.0); } public setMinutes(val) { new y; new x; if((val == 0)||(val == 60)) { hideMinutes(0); return; } x = val - ((val / 5)*5); y = val%5; showMinutes(val); if(y != 0) { hideMinutes(x); } } public setTime() { new y; new m; new d; new yd; new wd; new hr; new mn; new Float:sec; date(y, m, d, yd, wd, hr, mn, sec); setHour(hr); setMinutes(mn); } public message(Msg_Type:type, id, ...) { if(id == 0) { setTime(); } } }
Здесь и сейчас мы рассмотрим только самые важные элементы embryo и пропустим несколько моментов, а то что вызовет вопросы или не будет рассмотрено сейчас разберем в следующий раз.
set_text(PART:"ampm", "PM"); — задаем значение элемента с текстом;
custom_state(PART:"aod/h", "default", 0.0); — создаем новое состояние элемента на основе состояния по умолчанию;
set_state_val(PART:"aod/h", STATE_MAP_ON, 1);
set_state_val(PART:"aod/h", STATE_MAP_ROT_Z, h); — поворачиваем элемент на h градусов;
set_state(PART:"aod/h", "custom", 0.0); — делаем переход из состояния по умолчанию в новое состояние, длительность перехода 0.0 секунд.
Так же к частям можно обращаться по part_id:
new buf[24];
snprintf(buf, 23, "aod/m%d", i); — даже не знаю что тут сказать
pid = get_part_id(buf); — получаем part_id по имени части;
custom_state(pid, "default", 0.0);
public message(Msg_Type:type, id, ...) — функция принимающая сигнал из нативного кода.
Синтаксис embryo очень сильно похож на обычный С. Несколько различий конечно же есть.
new объявление локальных целочисленных элементов
new <var>; — переменная
new <var>[<size>]; — массив из 8 элементов
Числа с плавающей точкой объявляются хитрее:
new Float:<var name>;
Функции и глобальные переменные объявляются и использованием ключевого слова public;
public message() — функция, как и в С функция может возвращать результат или прервана с помощью return .
public <varName> — целочисленная переменная, собственно все то же самое что выше о локальных переменных, только вместо new используется public и для установки значений вместо знака = используется встроенные функции set_int(), get_int(), set_float() и т.д.
На этом мы перейдем к части на С. Тут все будет достаточно просто, создаем проект watchface. В примере доступном в меню Tizen Studio мы изменением несколько функций.
Добавим в struct appdata новое поле edje чтобы постоянно не получать указатель на загруженный файл.
typedef struct appdata { Evas_Object *win; Evas_Object *conform; Evas_Object *layout; Evas_Object *edje; } appdata_s;
Загрузка описана в 2 функциях ниже, там все достаточно просто в elm_layout_file_set передаем layout который будет базой для нашего edje файла, путь к файлу, а так же имя группы элементов
void data_get_resource_path(const char *file_in, char *file_path_out, int file_path_max) { char *res_path = app_get_resource_path(); if (res_path) { snprintf(file_path_out, file_path_max, "%s%s", res_path, file_in); free(res_path); } } void setup_layout(Evas_Object *layout) { char edje_path[PATH_MAX]; data_get_resource_path(EDJE_FILE_PATH, edje_path, sizeof(edje_path)-1); elm_layout_file_set(layout, edje_path, "layout/watchface"); evas_object_size_hint_weight_set(layout, 360, 360); evas_object_show(layout); }
Тут создание UI все кроме setup_layout осталось без изменений.
static void create_base_gui(appdata_s *ad, int width, int height) { int ret; watch_time_h watch_time = NULL; /* Window */ ret = watch_app_get_elm_win(&ad->win); if (ret != APP_ERROR_NONE) { dlog_print(DLOG_ERROR, LOG_TAG, "failed to get window. err = %d", ret); return; } evas_object_resize(ad->win, width, height); /* Conformant */ ad->conform = elm_conformant_add(ad->win); evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND); elm_win_resize_object_add(ad->win, ad->conform); evas_object_show(ad->conform); /*Layout*/ ad->layout = elm_layout_add(ad->conform); elm_object_content_set(ad->conform, ad->layout); setup_layout(ad->layout); ad->edje = elm_layout_edje_get(ad->layout); ret = watch_time_get_current_time(&watch_time); if (ret != APP_ERROR_NONE) dlog_print(DLOG_ERROR, LOG_TAG, "failed to get current time. err = %d", ret); update_watch(ad, watch_time, 0); watch_time_delete(watch_time); /* Show window after base gui is set up */ evas_object_show(ad->win); }
И последний штрих добавим функцию.
static void update_watch(appdata_s *ad, watch_time_h watch_time, int ambient) { Edje_Message_Int *msg; if (watch_time == NULL) return; msg = alloca(sizeof(Edje_Message_Int)); msg->val = 1; dlog_print(DLOG_VERBOSE, __PRETTY_FUNCTION__, "EDJE NOT NULL"); edje_object_message_send(ad->edje, EDJE_MESSAGE_INT_SET, 0, msg); }
Осталось все это собрать и запустить на часах или симуляторе.
