previous__: Defining the Application "Structure"
==== Defining the Application Theme ====
After the structure is defined, define the UI. In this tutorial, Basic EDC UI
Application is used.
This application structure is based on this skeleton:
The window and the layout are set by the Basic EDC UI Application skeleton.
Setup the containers for widgets and views.
Create the menu/main SWALLOW part in the .edc file.
<code c>
part
{
name: āmenu/mainā;
type: SWALLOW;
description
{
state: ādefaultā 0.0;
rel1.relative: 1.0 0.0;
rel2.relative: 1.0 1.0;
}
description
{
state: āupā 0.0;
rel1.relative: 0.0 0.01;
rel2.relative: 1.0 0.19;
}
} End menu/main
</code>
This part has two descriptions, one for the real position named up and
another out of the screen as the default position. Create these states to
animate the menu on application start. The animation is run by
animation,menu_main.
<code c>
program
{
name: āanimation,menu_mainā;
source: āā;
signal: āloadā;
action: STATE_SET āupā 1.0;
target: āmenu/mainā;
transition: LINEAR 0.5;
} END animation,menu_main
</code>
For more information about animations, see the
Effects Tutorial.
Create another container for the views. This container is also a āSWALLOWā
part.
<code c>
part
{
name: āview/mainā;
type: SWALLOW;
description
{
state: ādefaultā 0.0;
rel1.relative: 1.0 1.0;
rel2.relative: 1.0 1.0;
}
description
{
state: āupā 0.0;
rel1.relative: 0.0 1.01;
rel1.to: āmenu/mainā;
rel2.relative: 1.0 1.0;
color: 0 255 0 255;
}
} END view/main
</code>
This part has also two descriptions for animation purpose, like the main_menu
part.
The program:
<code c>
program
{
name: āanimation,view_mainā;
source: āā;
signal: āloadā;
action: STATE_SET āupā 1.0;
target: āview/mainā;
transition: LINEAR 0.2;
} END animation,view_mainĀ²
</code>
The last container is the side menu called menu/side.
<code c>
part
{
name: āmenu/sideā;
type: SWALLOW;
description
{
state: ādefaultā 0.0;
rel1.relative: -0.3 0.0;
rel2.relative: -0.3 1.0;
color: 255 0 0 255;
}
description
{
state: āupā 0.0;
rel1.relative: 0.0 0.2;
rel2.relative: 0.10 1.0;
color: 255 0 0 255;
}
} END menu/side
</code>
By default, this container is hidden. Clicking menu button makes it appear.
The second description places the container on the left of the screen. Here is
the program to run animation:
<code c>
program
{
name: āanimation,menu_sideā;
source: āMenuButtonā;
signal: āshow,sidemenuā;
action: STATE_SET āupā 1.0;
target: āmenu/sideā;
transition: LINEAR 0.2;
} END animation,menu_side
</code>
This program runs when it receives an event called show,sidemenu from
MenuButton source.
Create a program that does the opposite and starts when it receives a signal
called hide,menu_side from MenuButton source.
<code c>
program
{
name: āanimation,menu_side,hideā;
source: āMenuButtonā;
signal: āhide,sidemenuā;
action: STATE_SET ādefaultā 1.0;
target: āmenu/sideā;
transition: LINEAR 0.2;
} END animation,menu_side,hide
program
{
name: āanimation,menu_sideā;
source: āMenuButtonā;
signal: āshow,sidemenuā;
action: STATE_SET āupā 1.0;
target: āmenu/sideā;
transition: LINEAR 0.2;
} END animation,menu_side
</code>
The whole code__ : menu.edc
next__: **Creating the Basic UI