Что такое 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);
}Все осталось все это собрать и запустить на часах или симуляторе.
→ Репозиторий с примером
→ Документация по Edje
Автор: trollsid
