172 lines
3.7 KiB
Plaintext
172 lines
3.7 KiB
Plaintext
~~Title: Application Theme Menu Tutorial~~
|
|
//**__previous__: **//[[/tutorial/menu/structure|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:
|
|
|
|
|
|
{{ :menu_skeleton.png?direct&193 |Menu 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
|
|
[[tutorial/effects_tutorial|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__ : **// {{/code_c/tutorial/menu/menu.edc}}
|
|
\\
|
|
//**__next__: **//[[/tutorial/menu/basic_ui|Creating the Basic UI]]
|