Edit sdlui: tutorial02: Layers y transiciones

Title:

Last edited: 12:08:11 pm on 9 May 2023 by 3.0.1.3

(<a href="/Documentacion/1#sdluitutorial">Volver a la lista de tutoriales</a>)
<img src="/Documentacion/uploads/60/sdlui_tutorial02-1.png" style="width:320px;"></img> <img src="/Documentacion/uploads/60/sdlui_tutorial02-2.png" style="width:320px;"></img> <img src="/Documentacion/uploads/60/sdlui_tutorial02-3.png" style="width:320px;"></img>
Sources:<a href="/Documentacion/uploads/60/sdlui_tutorial02.tar.gz">sdlui_tutorial02.tar.gz</a>

<div style="border: 1px solid #ccc;font-family: monospace, monospace;"><table border=0><tr><td style="text-align:right; padding-right:14px;"><tt style="font:normal normal 400 14px/normal monospace; color:#ccc;">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 </tt></td><td style="overflow-x: scroll; white-space: nowrap;"><tt style="font:normal normal 400 14px/normal monospace; color:#000;">/&ast; &nbsp;&ast; sdlui_tutorial02.c &nbsp;&ast; &nbsp;&ast; Layers y transiciones &nbsp;&ast;/ &#35;include &lt;stdio.h&gt; &#35;include &lt;stdlib.h&gt; &#35;include &lt;unistd.h&gt; &#35;include &lt;string.h&gt; &#35;include &lt;signal.h&gt; &#35;include "sdlui.h" &#35;define DEFAULTWIDTH 800 &#35;define DEFAULTHEIGHT 600 &#35;define MENUWIDTH 160 /&ast; local vars &ast;/ volatile int flag_sigint; /&ast; local func prototypes &ast;/ static int install_signal(int num,void (&ast;f)(int)); static void sigint(int num); static int menu_showhide(sdlui_t &ast;sdlui, int show); static int main_show(sdlui_t &ast;sdlui, char &ast;mainlayername); int main(int argc, char &ast;argv[]) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_t &ast;sdlui; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDL_Event event; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int flag_exit; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int neww,newh; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char &ast;actionstr, &ast;actionparams; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char &ast;p; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag_sigint=flag_exit=0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;install_signal(SIGINT,sigint); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if((sdlui=sdlui_init("sdlui tutorial 02: Layers y transiciones",DEFAULTWIDTH,DEFAULTHEIGHT))==NULL) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_layer_set(sdlui,"common"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"frame:.systembar","-background &#35;035399"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-fill x -expand false -height 29 -ipadx 16 -ipady 6,7"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.systembar.menuicon","-text = -fontsize 14 -background &#35;303030 -foreground &#35;e0e0e0 -click systemmenu"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-fill none -expand false -side left -width 16 -height 16 -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"frame:.notsystembar","-background &#35;ffffff"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-fill both -expand true"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_autolayertransition_setslide(sdlui,"menu",'w',MENUWIDTH,easetype_easeoutquart,0.5,0.5); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_autolayertransition_setfade(sdlui,"lista",easetype_none,0.5,0.5); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_autolayertransition_setfade(sdlui,"grid",easetype_none,0.5,0.5); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main_show(sdlui,"grid"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while(flag_sigint==0 &amp; flag_exit==0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(sdlui_isdirty(sdlui)) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_ghostrender(sdlui); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_waitfps(sdlui); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_render(sdlui); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_waitfps(sdlui); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_refreshevents(sdlui); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while(sdlui_getevent(sdlui,&event)==0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(sdlui_event_isquit(sdlui,&event)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag_exit=1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(sdlui_event_isdirty(sdlui,&event)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_setdirty(sdlui); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(sdlui_event_isresize(sdlui,&event,&neww,&newh)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_resize(sdlui,neww,newh); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while((actionstr=sdlui_getactionstr(sdlui,&actionparams))!=NULL) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(strcmp(actionstr,"systemmenu")==0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;menu_showhide(sdlui,!sdlui_layer_exists(sdlui,"menu")); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if(strcmp(actionstr,"frommenulista")==0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main_show(sdlui,"lista"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if(strcmp(actionstr,"frommenugrid")==0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main_show(sdlui,"grid"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_free(sdlui),sdlui=NULL; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(0); } /&ast; local func bodies &ast;/ static int install_signal(int num,void (&ast;f)(int)) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;struct sigaction sact; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sact.sa_handler=f; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sigemptyset(&sact.sa_mask); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sact.sa_flags=0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(sigaction(num,&sact,0)); } static void sigint(int num) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flag_sigint=1; } static int menu_showhide(sdlui_t &ast;sdlui, int show) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char &ast;p; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_destroybylayer(sdlui,_F,_L,"menu"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(!show) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_layer_set(sdlui,"menu"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_layer_setgeomfrom(sdlui,"menu",".notsystembar"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"frame:.menu"," "); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side left -fill both -expand false"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"frame:.menu.left","-background &#35;f0f0f0"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side left -fill both -ipadx 16 -width %i",MENUWIDTH); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.menu.left.l1","-text Lista -fontsize 16 -foreground &#35;404040 -background &#35;f0f0f0 -click frommenulista"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side top -fill x -ipady 16"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.menu.left.l2","-text Grid -fontsize 16 -foreground &#35;404040 -background &#35;f0f0f0 -click frommenugrid"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side top -fill x -ipady 16"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(0); } static int main_show(sdlui_t &ast;sdlui, char &ast;mainlayername) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char &ast;p; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;menu_showhide(sdlui,0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(sdlui_layer_exists(sdlui,mainlayername)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_destroybylayer(sdlui,_F,_L,"lista"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_destroybylayer(sdlui,_F,_L,"grid"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(strcmp(mainlayername,"lista")==0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_layer_set(sdlui,"lista"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_layer_setgeomfrom(sdlui,"lista",".notsystembar"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"frame:.lista"," "); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side left -fill both -expand true -ipadx 20 -ipady 20"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.lista.l1","-text \"� Uno\" -fontsize 16 -foreground &#35;404040 -background &#35;fafafa"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side top -fill x -ipady 16 -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.lista.l2","-text \"� Dos\" -fontsize 16 -foreground &#35;404040 -background &#35;fafafa"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side top -fill x -ipady 16 -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.lista.l3","-text \"� Tres\"&nbsp;&nbsp;-fontsize 16 -foreground &#35;404040 -background &#35;fafafa"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side top -fill x -ipady 16 -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.lista.l4","-text \"� Cuatro\"&nbsp;&nbsp;-fontsize 16 -foreground &#35;404040 -background &#35;fafafa"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side top -fill x -ipady 16 -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if(strcmp(mainlayername,"grid")==0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_layer_set(sdlui,"grid"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_layer_setgeomfrom(sdlui,"grid",".notsystembar"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"frame:.grid"," "); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side top -fill both -expand true -ipadx 20 -ipady 20 -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"frame:.grid.table"," "); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side top -expand false"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"frame:.grid.table.row1"," "); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side top -expand false"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.grid.table.row1.l1","-text \"Uno\" -fontsize 16 -foreground &#35;404040 -background &#35;fafafa -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side left -width 80 -ipady 50 -padx 20 -pady 20 -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.grid.table.row1.l2","-text \"Dos\" -fontsize 16 -foreground &#35;404040 -background &#35;fafafa -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side left -width 80 -ipady 50 -padx 20 -pady 20 -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"frame:.grid.table.row2"," "); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side top -expand false"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.grid.table.row2.l3","-text \"Tres\"&nbsp;&nbsp;-fontsize 16 -foreground &#35;404040 -background &#35;fafafa -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side left -width 80 -ipady 50 -padx 20 -pady 20 -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.grid.table.row2.l4","-text \"Cuatro\"&nbsp;&nbsp;-fontsize 16 -foreground &#35;404040 -background &#35;fafafa -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-side left -width 80 -ipady 50 -padx 20 -pady 20 -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(0); } </tt></td></tr></table></div>

A continuaci�n se explican las partes nuevas con respecto a los tutoriales anteriores

! Notas sobre las layers

Las "layers" o capas permiten las siguientes funciones:
- Cambiar de forma din�mica el contenido de una parte de la pantalla, permitiendo implementar interfaces basados en pesta�as (en eso es similar a los fragments de Android).
- Poner elementos en una capa encima de todo el UI, por ejemplo para hacer modal dialogs.
- Sacar men�s o notificaciones que "entran" desde un borde de la pantalla
- Tener transiciones, o bien haciendo que una parte del interfaz aparezca desde un borde de la pantalla, o bien con efectos de "desvanecimiento".

! Creaci�n de layers
<div style="border: 1px solid #ccc;font-family: monospace, monospace;"><table border=0><tr><td style="text-align:right; padding-right:14px;"><tt style="font:normal normal 400 14px/normal monospace; color:#ccc;">12 13 14 15 ... 29 30 31 32 ... 37 ... 40 41 42 43 44 45 46 47 48 </tt></td><td style="overflow-x: scroll; white-space: nowrap;"><tt style="font:normal normal 400 14px/normal monospace; color:#000;">&#35;include "sdlui.h" &#35;define DEFAULTWIDTH 800 &#35;define DEFAULTHEIGHT 600 ... int main(int argc, char &ast;argv[]) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_t &ast;sdlui; ... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;char &ast;p; ... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if((sdlui=sdlui_init("sdlui tutorial 02: Layers y transiciones",DEFAULTWIDTH,DEFAULTHEIGHT))==NULL) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return(1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_layer_set(sdlui,"common"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"frame:.systembar","-background &#35;035399"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-fill x -expand false -height 29 -ipadx 16 -ipady 6,7"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"label:.systembar.menuicon","-text = -fontsize 14 -background &#35;303030 -foreground &#35;e0e0e0 -click systemmenu"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-fill none -expand false -side left -width 16 -height 16 -anchor center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p=sdlui_add(sdlui,_F,_L,"frame:.notsystembar","-background &#35;ffffff"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_pack(sdlui,_F,_L,p,"-fill both -expand true"); </tt></td></tr></table></div>

Cuando se a�aden widgets al interfaz con sdlui_add(), se a�aden al layer actual. Por defecto es el layer NULL.

Para hacer que se pongan en un layer diferente, se usa sdlui_layer_set(sdlui_t &ast;sdlui, char &ast;layername), siendo layername una cadena que identifica el layer. A partir de ese momento, todos los widgets se que se creen con sdlui_add() se a�aden al layer indicado.

! Definici�n de transiciones

<div style="border: 1px solid #ccc;font-family: monospace, monospace;"><table border=0><tr><td style="text-align:right; padding-right:14px;"><tt style="font:normal normal 400 14px/normal monospace; color:#ccc;">49 50 51 </tt></td><td style="overflow-x: scroll; white-space: nowrap;"><tt style="font:normal normal 400 14px/normal monospace; color:#000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_autolayertransition_setslide(sdlui,"menu",'w',MENUWIDTH,easetype_easeoutquart,0.5,0.5); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_autolayertransition_setfade(sdlui,"lista",easetype_none,0.5,0.5); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sdlui_autolayertransition_setfade(sdlui,"grid",easetype_none,0.5,0.5); </tt></td></tr></table></div>

Una vez generados los widgets, ponemos las transiciones a realizar para los diferentes layers usando sdlui_autolayertransition_setslide() y sdlui_autolayertransition_setfade(). No hace falta que dichas layers existan todav�a, la librer�a recuerda esta configuraci�n para cuando se creen dichas layers.

Para hacer que un layer entre/salga de la pantalla, se usa sdlui_autolayertransition_setslide(sdlui_t &ast;sdlui, char &ast;layername, char fromborder /&ast; 'n', 's' ,'w' 'e' &ast;/, int widthorheight, easetype_t easetype, float fadeinduration, float fadeoutduration), y sus par�metros son:
- sdlui, el manejador de la librer�a sdlui
- layername, el nombre del layer al que queremos configurarle la transici�n
- fromborder, una de las siguientes letras: 'n', 's' ,'w' 'e', que representan la inicial de los puntos cardinales (north, east, south, west) e indica el borde de la pantalla desde el que ha de hacer la transici�n.
- widthorheight, es el tama�o en p�xeles de ese elemento (width para transisiciones 'w' o 'e' y height para transisiciones de tipo 'n' o 's'). Las transiciones de "setslide" s�lo est�n soportadas para elementos que tengan un tama�o fijo (este tama�o ha de ser igual al "-width" o "-height" en el sdlui_pack() que se haga al primer elemento de ese layer).
- easetype, es para hacer m�s suave el inicio/fin de la transici�n, generalmente se usa easetype_easeoutquart o easetype_none (ver sdlui.h para el listado completo, son los mismos que estan disponibles en CSS para HTML5).
- fadeinduration, el n�mero de segundos que dura la transici�n de entrada.
- fadeoutduration, el n�mero de segundos que dura la transici�n de salida.

Para hacer que un layer aparezca/desaparezca con efecto de desvanecimiento, se usa sdlui_autolayertransition_setfade(sdlui_t &ast;sdlui, char &ast;layername, easetype_t easetype, float fadeinduration, float fadeoutduration), siendo el significado de sus par�metros el mismo que el del nombre equivalente en sdlui_autolayertransition_setslide().

! Layer de men�

Es recomendable que las layers mantengan su propia informaci�n, y por eso se suelen definir funciones para inicializar/mostrar/liberar las layers. En el caso de un men�, s�lo nos interesa mostrarlo, por lo que con una sola funci�n de showhide es suficiente.

Lo primero que hacemos es destruir todos los widgets del layer con sdlui_destroybylayer(sdlui_t &ast;sdlui, char &ast;filedebug, int linedebug, char &ast;layername), siendo layername el nombre del layer a destruir. Si el layer exist�a y ten�a una transici�n configurada, esta llamada provocar� que se haga la animaci�n de "salida"/"fadeout". En caso de que el layer no exista, esta llamada es inocua, no hace nada.

Si s�lo se quer�a ocultar el layer, con el destroy ya hemos terminado.

Si se quiere mostrar el layer, entonces tenemos que
- usar sdlui_layer_set() para informar de que los widgets que vamos a crear con sdlui_add() los queremos en la layer de men�.
- usar sdlui_layer_setgeomfrom(sdlui_t &ast;sdlui, char &ast;layername, char widgetname) para describir d�nde se pone el layer. Si widgetname es NULL, el layer va a ocupar toda la pantalla, si por el contrario el widgetname es el nombre de un widget, el layer va a tomar el tama�o y la posici�n de dicho widget, como una segunda capa encima de ese widget.
- usar sdlui_add() y sdlui_pack() para a�adir los widgets del men�.
- es importante tener en cuenta que como esta layer va a ser de transici�n "setslide", hemos puesto al hacer el sdlui_pack() de ".menu.left" que "-width" tiene la anchura que definimos antes para la transici�n (l�nea 114).

Al a�adir los elementos del men�, usamos "-click" sobre los elementos que queremos que generen una actionstr. NOTA En este caso es directamente sobre los textos, pero en men�s que tengan iconos con texto ser�a sobre el elemento padre que incluye a ambos.

! Layer de contenido

Al igual que con el men�, para el layer de contenido se definen su propias funciones de init/show/free, pero como en este caso no hay datos que mantenemer, s�lo definimos una funci�n show para mostrar un contenido u otro.

La funci�n que definimos es main_show(sdlui_t &ast;sdlui, char
&ast;mainlayername), siendo mainlayername el nombre de la "pesta�a" que quermos que se vea, en nuestro caso puede ser "grid" o "list". Esta funci�n crear� un layer con ese nombre que tenga el contenido correspondiente.

Despu�s de ocultar el men�, lo primero que comprobamos es si ya se est� mostrando ese layer (si ya se est� mostrando, en ese caso no tenemos que hacer nada). Para hacer esa comprobaci�n nos basta ver si el layer ha sido definido (si hay un layer con ese nombre que tenga alg�n widget). Para eso usamos la funci�n sdlui_layer_exists(sdlui_t &ast;sdlui, char &ast;layername), siendo layername el nombre del layer del que queremos comprobar su existencia, y la funci�n devuelve 1 si existe y 0 si no existe.

A continuaci�n destruimos los layers de contenido posibles (s�lo existir� uno de ellos, pero llamar a la funci�n con un layer que no existe es inocuo, no hace nada), usando sdui_destroybylayer<(sdlui_t &ast;sdlui, char &ast;layername), siendo layername el layer a destruir.

Por �ltimo, generamos el nuevo layer con el nombre que nos pasaron, y con el contenido que le corresponde,
- usando sdlui_layer_set() para indicar que todos los widgets generados desde este momento han de estar en el layer con el nombre que nos interesa,
- usando sdlui_layer_setgeomfrom() para definir la posici�n y tama�o del nuevo layer , diciendo que los tome del widget ".notsystembar" (widget que definimos al principio del programa, en la l�neas 47-48)
- haciendo las llamadas correspondientes a sdlui_add() y sdlui_pack() para crear cada elemento de esta "pesta�a".

- lock this page
- enter new password
- reenter same password

Send e-mail alerts to these addresses upon next save: