Sample

You are here

You are here

Page Example

Calculator Sample Overview

The Calculator sample demonstrates how to implement a complex view using recursive composition of the standard EFL UI components and containers in a UI component hierarchy. It aims to explain how such an application can be developed using view and model parts.

The sample uses UI components (such as elm_conformant and elm_naviframe) for the view management, containers (such as elm_grid and elm_table) for UI component management inside the view, and UI components (such as elm_bg, elm_button, and elm_label) for the content inside view.

The following figure illustrates the main screen of the Calculator (portrait and landscape), the wireframe structure, and the UI component tree.

The main_view_add() function creates the main view layout and all its UI components and pushes itself to the naviframe. This function also registers the rotation change callback with the evas_object_smart_callback_add() function, the callback on model display change with the calc_set_display_change_cb() function and the region format change callback by assigning a function pointer and data to the main application structure.

The _main_view_make_widgets() function creates all UI components (the display label and buttons), but does not pack them to the grid yet. For each UI component, a separate single cell table is created. This table is needed to add padding around a specific UI component, since the grid does not support padding for its elements.

You can use a single table instead of a grid (without additional single cell tables), but the grid is more stable as it resizes all UI components in a single calculation and does not stretch if the UI components are too large. To handle button events, a smart clicked callback is registered with the evas_object_smart_callback_add() function.

The _main_view_display_changed_cb() function handles the model display change event and updates the display label. The current display value is retrieved from the model using the calc_get_display_str() function. The label is updated with the elm_object_text_set() function.

The _main_view_region_fmt_changed_cb() function handles the device region format change event. Before the view update, call the calc_update_region_fmt() function to update the model. After this, the decimal point button text can be updated using the result of the calc_get_dec_point_str() function.

The _main_view_btn_click_cb() function handles the button clock event. The function is implemented mostly by calling the calc_handle_key_press() model function. The model method can generate the display change event described earlier.

The computation logic of the application is implemented in a separate calc.c module. Before using the module, create the calc object using the calc_create() function. The calc_handle_key_press() function handles a specific calculator key specified by the key_type enumeration.

Handling keys usually changes the calculator display string, which the calc_get_display_str() function can retrieve.

To listen on display string change events, the application can register a callback using the calc_set_display_change_cb() function. By registering this callback, the view can avoid manual checking of the display string value after each key handling.

The _calc structure in the calc.c module defines the calc object structure. A pointer to this structure is passed to all functions of this module.

// Internal data structure of the calc object
struct _calc
{
// Error flag to indicate critical failure and block computations until reset
bool error;
// Major state variables of the calculator
bool dirty; // In the middle of expression calculation
bool num_is_new; // Indicates that number in num register is new (entered by user of by unary function)
bool in_edit_mode; // Indicates that the user is entering number to the display
key_type op; // Current operation to apply to operands
// Calculator registers used in the computations
double num; // Corresponds to the number on display (not actual in edit mode)
double acc; // Left operand of the operation, stores the result of the operation
double rep; // Special repeat register, used to repeat last operation on result key
// Display object to handle I/O
display disp;
// 1 char string to hold current decimal point character
char dec_point_str[CALC_DEC_POINT_STR_SIZE];
};

The following example shows how to implement the calc.c module functions: