Tizen应用程序中创建窗格

流星悟语

这篇教程解释了怎样使用应用程序中的窗格。

此功能只支持移动应用程序。

初始化面板应用程序
创建一个窗口标题 表格教程 ,由一个符合性组件包含naviframe组件。

1. #include <Elementary.h>
   
2. #include <app.h>
   
3. 
   
4. struct _appdata
   
5. {
   
6.    const char *name;
   
7.    Evas_Object *win;
   
8. };
   
9. 
   
10. static void app_terminate(void *user_data)
    
11. {
    
12.    struct _appdata *ad;
    
13. 
    
14.    if (!user_data)
    
15.       return;
    
16. 
    
17.    ad = user_data;
    
18. 
    
19.    if (ad->win)
    
20.       evas_object_del(ad->win);
    
21. }
    
22. 
    
23. static bool app_create(void *user_data)
    
24. {
    
25.    struct _appdata *ad;
    
26.    Evas_Object *win, *conformant, *naviframe, *panes, *panes_h, *nav_it, *bt;
    
27. 
    
28.    if (!user_data)
    
29.       return false;
    
30. 
    
31.    ad = user_data;
    
32. 
    
33.    // Create window
    
34.    elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
    
35.    win = elm_win_util_standard_add("panes", "Panes tutorial");
    
36.    elm_win_autodel_set(win, EINA_TRUE);
    
37. 
    
38.    if (!win)
    
39.       return false;
    
40. 
    
41.    ad->win = win;
    
42. 
    
43.    // Add elm_conformant
    
44.    conformant = elm_conformant_add(win);
    
45.    elm_win_resize_object_add(win, conformant);
    
46.    evas_object_size_hint_weight_set(conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    
47.    evas_object_show(conformant);
    
48. 
    
49.    // Add naviframe to conformant
    
50.    naviframe = elm_naviframe_add(conformant);
    
51.    elm_object_content_set(conformant, naviframe);
    
52.    evas_object_show(naviframe);
    
53. 
    
54.    evas_object_resize(win, 320, 400);
    
55.    evas_object_show(win);
    
56. 
    
57.    return true;
    
58. }
    
59. 
    
60. int main(int argc, char **argv)
    
61. {
    
62.    appdata_s *ad = {0,};
    
63.    int ret = 0;
    
64. 
    
65.    ui_app_lifecycle_callback_s event_callback = {0,};
    
66.    app_event_handler_h handlers[5] = {NULL,};
    
67. 
    
68.    event_callback.create = app_create;
    
69.    event_callback.terminate = app_terminate;
    
70.    event_callback.pause = app_pause;
    
71.    event_callback.resume = app_resume;
    
72.    event_callback.app_control = app_control;
    
73. 
    
74.    ui_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);
    
75.    ui_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &ad);
    
76.    ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &ad);
    
77.    ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &ad);
    
78.    ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &ad);
    
79.    ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
    
80. 
    
81.    ret = ui_app_main(argc, argv, &event_callback, &ad);
    
82. 
    
83.    return ret;
    
84. }

复制代码

创建面板组件
一个新的窗格对象添加到应用程序中,在做这件事 _create () 函数。

当你创建一个窗格组件, elm_panes 2内容组件添加一个可拖动的目的。 拖时,这条尺寸内容的大小。 创建一个新的面板组件到一个基本对象,使用 elm_panes_add () 函数。

在以下示例中,窗格naviframe组件创建并添加:

1. // Add an elm_panes
   
2. panes = elm_panes_add(naviframe);
   
3. evas_object_size_hint_weight_set(panes, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   
4. elm_win_resize_object_add(win, panes);
   
5. evas_object_show(panes);
   
6. 
   
7. nav_it = elm_naviframe_item_push(naviframe, "Panes view", NULL, NULL, panes, NULL);

复制代码

配置窗格配置面板组件:

修改定位与玻璃组件 elm_panes_horizontal_set () 函数。

默认情况下,面板组件的方向是垂直的。

1. // Add a horizontal elm_panes
   
2. panes_h = elm_panes_add(naviframe);
   
3. elm_panes_horizontal_set(panes_h, EINA_TRUE);

复制代码

上面的代码创建一个窗格对象并设置水平方向。 在窗格添加内容,使用 elm_object_part_content_set () 函数。 在下面的例子中,水平面板组件( panes_h )添加到 “左” 窗格的一部分组件( 窗格 在上一步中创建用例。

1. elm_object_part_content_set(panes, "left", panes_h);

复制代码

设置对象的一个按钮 “正确” 一边的垂直透明组件:

1. // Create a button object
   
2. bt = elm_button_add(naviframe);
   
3. elm_object_text_set(bt, "Right");
   
4. evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   
5. evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
   
6. evas_object_show(bt);
   
7. 
   
8. // Set the button object to the "right" part of the vertical panes
   
9. elm_object_part_content_set(panes, "right", bt);

复制代码

水平的内容窗格设置组件2按钮对象(向上和向下)。

当填充一个垂直窗格显示组件,左边内容放置在顶部和底部放置正确的内容。

1. // Create an "Up" button
   
2. bt = elm_button_add(naviframe);
   
3. elm_object_text_set(bt, "Up");
   
4. evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   
5. evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
   
6. evas_object_show(bt);
   
7. elm_object_part_content_set(panes_h, "left", bt);
   
8. 
   
9. // Create a "Down" button
   
10. bt = elm_button_add(naviframe);
    
11. elm_object_text_set(bt, "Down");
    
12. evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    
13. evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
    
14. evas_object_show(bt);
    
15. elm_object_part_content_set(panes_h, "right", bt);

复制代码

调整透明组件。

改变玻璃组件的大小,拖动 elm_panes 用鼠标。 比例还可以设置的 elm_panes_content_left_size_set () 和 elm_panes_content_right_size_set () 功能。 下面的例子显示了如何设置了大小两个窗格的80%。

1. // Set the proportion of the panes to 80%
   
2. elm_panes_content_left_size_set(panes, 0.8);
   
3. elm_panes_content_left_size_set(panes_h, 0.8);

复制代码

设置一个固定大小的玻璃组件的大小和比例 elm_panes_fixed_set () 函数。

1. // Fix the panes proportion
   
2. elm_panes_fixed_set(panes_h, EINA_TRUE);

复制代码

图:窗格教程

处理信号
面板组件发出4种不同的信号,根据用户交互可拖动的酒吧:

点击 ——点击面板。
下面的例子,一个回调函数注册到垂直面板组件,并打印 点击 到标准输出:

1. // clicked callback
   
2. static void
   
3. _clicked_cb(void *data, Evas_Object *obj, void *event_info)
   
4. {
   
5.    dlog_print(DLOG_INFO, PANES_TAG, "Clicked\n");
   
6. }
   
7. 
   
8. evas_object_smart_callback_add(panes, "clicked", _clicked_cb, panes);

复制代码

新窗格。
下面的例子,一个回调函数注册到垂直面板组件,并打印 按下 到标准输出:

1. // press callback
   
2. static void
   
3. _press_cb(void *data, Evas_Object *obj, void *event_info)
   
4. {
   
5.    dlog_print(DLOG_INFO, PANES_TAG, "Pressed\n");
   
6. }
   
7. 
   
8. evas_object_smart_callback_add(panes, "press", _press_cb, panes);

复制代码

unpressed ——窗格被按下后被发布。
下面的例子,一个回调函数注册到垂直面板组件,它输出的比例大小左窗格的内容组件使用的标准输出 elm_panes_content_left_size_get () 功能:

1. // unpress callback
   
2. static void
   
3. _unpress_cb(void *data, Evas_Object *obj, void *event_info)
   
4. {
   
5.    dlog_print(DLOG_INFO, PANES_TAG, "Unpressed, size : %f\n",
   
6.               elm_panes_content_left_size_get(obj));
   
7. }
   
8. 
   
9. evas_object_smart_callback_add(panes, "unpress", _unpress_cb, panes);

复制代码

点击 , 窗格中双击运行。
下面的例子,一个回调函数注册到垂直面板组件。 它藏起了太阳,而左窗格组件的一部分并设置左比例为0.0。 恢复了一部分比例,双击隐藏面板组件的一部分,使用 elm_panes_content_left_size_get () 和 elm_panes_content_left_size_set () 函数和一个变量来存储当前的价值比例。

1. // clicked,double callback
   
2. static void
   
3. _clicked_double_cb(void *data, Evas_Object *obj, void *event_info)
   
4. {
   
5.    static double size = 0.0;
   
6.    double tmp_size = 0.0;
   
7.    tmp_size = elm_panes_content_left_size_get(obj);
   
8.    if (tmp_size > 0)
   
9.    {
   
10.       elm_panes_content_left_size_set(obj, 0.0);
    
11.       dlog_print(DLOG_INFO, PANES_TAG, "Double clicked, hidden.\n");
    
12.    }
    
13.    else
    
14.    {
    
15.       elm_panes_content_left_size_set(obj, size);
    
16.       dlog_print(DLOG_INFO, PANES_TAG,
    
17.                  "Double clicked, restoring size.\n");
    
18.    }
    
19.    size = tmp_size;
    
20. }
    
21. 
    
22. evas_object_smart_callback_add(panes, "clicked,double", _clicked_double_cb, panes);

复制代码