Sample

You are here

You are here

Page Example

Calculator UI Sample Overview

The [UI Sample] Calculator sample demonstrates how to implement a complex view using EFL UI components and containers.

It uses UI components, such as elm_conform and elm_panel 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_button and elm_entry for the content inside the view.

The following figure illustrates the main view of the [UI Sample] Calculator sample application, its wireframe structure, and the UI component tree.

Figure: [UI Sample] Calculator screen

Application Layout

The create_base_gui() function is responsible for creating the application layout. It starts by creating a window, then adds elm_conformant to it to decorate the window with an indicator. The window contains a grid structure for the calculator entry display and its button panel. The entry display is aligned to the top of the grid and the button panel to the bottom of the grid.

Main View

The create_entry() function creates the calculator display. Input for the display is created with calculator buttons created in the next steps, so there is no need for the software keypad. Disable the software keypad by setting the elm_entry_editable_set() function as false. The display uses a right-aligned, 50 pt font.

When the user rotates the device, the rotation_cb() function is called, which changes the layout of contents. If the new layout is in the landscape mode, the advanced content is aligned at the left side of the basic content.