Scalability Programming Guide

Scalability is a key consideration when designing applications for an ecosystem made up of diverse devices, from large-screen systems to ultra-portables. This guide aims to introduce the key concepts of designing for scalability, while providing links to concrete examples of their implementation using the Enlightenment UI and Edje.

Prerequisites

This guide is aimed at programmers already proficient in C, but does not require any specialist knowledge.

You will require a coding environment and toolchain, along with a copy of the latest version of the Enlightenment Foundation Libraries (EFL).

Familiarity with the Enlightenment Project Coding Conventions will also help with understanding this guide.

Relative versus Fixed Positioning

In relative positioning the size of an object is determined in proportion to the size of a referred object. For example, if an orange rectangle occupies 30 percent of a green rectangle and the green rectangle is subsequently expanded, the orange rectangle is expanded accordingly. If the scaling value is changed and the green rectangle is not scaled, however, the orange rectangle also remains unchanged.

Relative Positioning

In fixed positioning the size of an object is determined by a specific value set for said object. For example, the orange rectangle is set to the size of 10. If the green rectangle is expanded the orange rectangle does not change. If the scaling value is doubled, however, the size of the orange rectangle grows to 20.

Fixed Positioning

Using Relative Positioning

If you set the object size as a percentage the ratio remains fixed regardless of the changes in the screen size or resolution. If you want the object size changed in proportion to the window size use relative positioning.

Scaling with Relative Positioning

Using Fixed Positioning

If you use the Edje Data Collection (EDC) file to set the layout up you can set the scale in the part element:

parts
{
   part
   {
      name: "box";
      type: RECT;
      scale: 1;
   }
}

If you set the fixed size directly in the C code you can use the ELM_SCALE_SIZE() macro:

evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));

Filling the Screen with Fixed Positioning

If you fill the entire height or width of a display with a fixed position object and it is scaled the end result can be larger than the screen size:

Scaling with a Fixed Height

If you set a partial width or height and leave the remaining area flexible the layout does not expand outside the screen:

Scaling with a Flexible Height