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: 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 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