hugoruscitti/pilas

{
    "content": "<h1 id=\"interfaz-de-usuario\">Interfaz de usuario</h1>\n<p>Los componentes del m\u00f3dulo <code>pilas.interfaz</code> permiten crear botones, listas,\ndeslizadores y otros tipos de componentes visuales, todos orientados\na construir interfaces de usuario traducionales.</p>\n<h2 id=\"clase-boton\">Clase: Boton</h2>\n<p>Para crear un bot\u00f3n podemos instalar la clase <code>Boton</code> especificando\nun texto.</p>\n<pre><code>boton = pilas.interfaz.Boton(&quot;Saludar&quot;)\n</code></pre>\n\n<p>y casi siempre vas a querer asignarle alguna acci\u00f3n cuando se hace\nclick sobre \u00e9l, para eso necesit\u00e1s una funci\u00f3n y conectarla:</p>\n<pre><code>def saludar():\n  boton.decir(&quot;Hola !!!&quot;)\n\nboton.conectar(saludar)\n</code></pre>\n\n<p><img alt=\"\" src=\"../imagenes/interfaz/boton_saludando.png\" /></p>\n<p>Ten en cuenta que todos los objetos creados siguen siendo actores, as\u00ed\nque se pueden manipular como vimos antes: escalar, rotar, moverse etc...</p>\n<h4 id=\"propiedades\">Propiedades</h4>\n<ul>\n<li><code>texto</code></li>\n<li><code>icono</code></li>\n</ul>\n<h4 id=\"metodos\">M\u00e9todos</h4>\n<ul>\n<li><code>conectar(funcion)</code> - Conecta una funci\u00f3n para responder al click de mouse.</li>\n<li><code>ocultar()</code></li>\n<li><code>mostrar()</code></li>\n<li><code>deshabilitar()</code></li>\n<li><code>habilitar()</code></li>\n</ul>\n<h4 id=\"ejemplo-de-integracion\">Ejemplo de integraci\u00f3n</h4>\n<p>Y para a\u00f1adir una acci\u00f3n o respuesta al componente, podemos crear una\nfunci\u00f3n y luego vincularla con el evento <code>click</code>. Este ejemplo construye\nun bot\u00f3n y realiza un movimiento cada vez que se hace click sobre \u00e9l:</p>\n<pre><code>b = pilas.interfaz.Boton(u&quot;Realizar animaci\u00f3n&quot;)\n\ndef moverse():\n    b.escala_x = [  2, 0.8, 1], 0.15\n    b.escala_y = [0.8, 2,   1], 0.1\n    d = pilas.azar(-50, 50)\n    b.rotacion = [d, 1], 0.1\n\nb.conectar(moverse)\n</code></pre>\n\n<p>El resultado en pantalla ser\u00e1 as\u00ed:</p>\n<p><img alt=\"\" src=\"../imagenes/interfaz/boton.gif\" /></p>\n<h2 id=\"clase-deslizador\">Clase: Deslizador</h2>\n<p>El deslizador es \u00fatil para que el usuario pueda seleccionar\nun valor intermedio entre dos n\u00fameros, por ejemplo entre 0 y 1, 0 y\n100 etc.</p>\n<p>Un ejemplo t\u00edpico de este componente puedes encontrarlo\nen las preferencias de audio de alg\u00fan programa de sonido, los\ndeslizadores te permiten regular el grado de volumen.</p>\n<p>Esta es una imagen del ejemplo <code>deslizador.py</code> que est\u00e1\nen el directorio <code>ejemplos</code>. Tiene tres deslizadores, y\nel usuario puede regular cualquiera de los tres para ver\nlos cambios en el actor:</p>\n<p><img alt=\"\" src=\"../imagenes/interfaz/deslizador.jpg\" /></p>\n<p>Para construir un deslizador y asociarlo a una funci\u00f3n\npuedes escribir algo como esto:</p>\n<pre><code>def cuando_cambia(valor):\n    print &quot;El deslizador tiene grado:&quot;, valor\n\ndeslizador = pilas.interfaz.Deslizador()\ndeslizador.conectar(cuando_cambia)\n</code></pre>\n\n<p>Entonces, a medida que muevas el deslizador se imprimir\u00e1n\nen pantalla valores del 0 al 1, por ejemplo 0.25, 0.52777 etc...</p>\n<p>Si quieres cambiar los valores iniciales y finales de la\nescala de valores, lo mas sencillo es multiplicar el argumento\n<code>valor</code> de la funci\u00f3n. Por ejemplo, si quieres valores entre\n0 y 100:</p>\n<pre><code>def cuando_cambia(valor):\n    valor_entre_cero_y_cien = valor * 100\n</code></pre>\n\n<h4 id=\"propiedades_1\">Propiedades</h4>\n<ul>\n<li><code>progreso</code> - Almacen un valor entre 0 y 100</li>\n</ul>\n<h4 id=\"metodos_1\">M\u00e9todos</h4>\n<ul>\n<li><code>conectar(funcion)</code> - Conecta una funci\u00f3n que se llamar\u00e1 cada vez que muevas el deslizador.</li>\n</ul>\n<h2 id=\"clase-selector\">Clase: Selector</h2>\n<p>El selector te permite seleccionar una opci\u00f3n con\ndos valores: habilitado, deshabilitado.</p>\n<p>Se puede usar para opciones c\u00f3mo habilitar o deshabilitar\nel modo pantalla completa o algo as\u00ed.</p>\n<p>Para usarlo, se tiene que crear un objeto de la\nclase <code>Selector</code> y un texto a mostrar:</p>\n<pre><code>selector = pilas.interfaz.Selector(&quot;Habilitar pantalla completa.&quot;)\n</code></pre>\n\n<p>Y luego, se puede consultar el valor del selector mediante el\natributo <code>seleccionado</code>:</p>\n<pre><code>if selector.seleccionado:\n    print &quot;El selector esta seleccionado.&quot;\nelse:\n    print &quot;El selector no esta seleccionado.&quot;\n</code></pre>\n\n<p>aunque en lugar de consultar la variable, es mucho mejor asociarle\nuna funci\u00f3n para que el selector la llame solamente cuando el\nselector cambia de estado (seleccionado/deseleccionado):</p>\n<pre><code>def cuando_el_selector_cambia(estado):\n    print &quot;El selector ahora esta en estado:&quot;, estado\n\nselector.definir_accion(cuando_el_selector_cambia)\n</code></pre>\n\n<h4 id=\"ejemplo-de-integracion_1\">Ejemplo de integraci\u00f3n</h4>\n<p>Para mostrar el componente en funcionamiento tenemos un peque\u00f1o ejemplo: un\nselector que nos permite alternar el fondo de la escena:</p>\n<pre><code>selector = pilas.interfaz.Selector(&quot;Definir fondo naranja&quot;)\n\ndef cambiar_el_fondo(ha_seleccionado):\n    if ha_seleccionado:\n        pilas.fondos.Tarde()\n    else:\n        pilas.fondos.Blanco()\n\nselector.conectar(cambiar_el_fondo)\n</code></pre>\n\n<p>El resultado en pantalla ser\u00e1 as\u00ed:</p>\n<p><img alt=\"\" src=\"../imagenes/interfaz/selector.gif\" /></p>\n<h4 id=\"propiedades_2\">Propiedades</h4>\n<ul>\n<li><code>texto</code> - Etiqueta que mostrar\u00e1 el deslizador</li>\n<li><code>seleccionado</code> - Almacena True o False, indicando el estado de selecci\u00f3n.</li>\n</ul>\n<h4 id=\"metodos_2\">M\u00e9todos</h4>\n<ul>\n<li><code>conectar(funcion)</code> - Conecta una funci\u00f3n que se llamar\u00e1 cada vez que muevas el deslizador.</li>\n<li><code>alternar_seleccion()</code></li>\n<li><code>seleccionar()</code></li>\n<li><code>deseleccionar()</code></li>\n</ul>\n<h2 id=\"clase-ingresodetexto\">Clase: IngresoDeTexto</h2>\n<p>Si quieres solicitar datos, como el nombre del\nusuario, puedes usar el objeto <code>IngresoDeTexto</code>. Ya que\nmuestra una caja y un peque\u00f1o cursor para\ningresar texto:</p>\n<p><img alt=\"\" src=\"../imagenes/interfaz/ingreso_de_texto.png\" /></p>\n<p>Para usar este componente tienes que crearlo y luego leer o escribir el\natributo <code>texto</code>, que contiene la cadena de texto de la caja:</p>\n<pre><code>entrada = pilas.interfaz.IngresoDeTexto()\nentrada.texto = &quot;Texto inicial&quot;\n</code></pre>\n\n<p>Inicialmente, el objeto IngresoDeTexto toma un tama\u00f1o y apariencia predeterminado. Pero esto se puede cambiar f\u00e1cilmente usando argumentos al momento de crear el componente.</p>\n<p>Por ejemplo, podr\u00edamos enviarle c\u00f3mo argumento un tama\u00f1o mas peque\u00f1o y un \u00edcono de b\u00fasqueda:</p>\n<p>entrada = pilas.interfaz.IngresoDeTexto(ancho=100, icono='iconos/lupa.png')\nu otro \u00edcono:</p>\n<p>entrada = pilas.interfaz.IngresoDeTexto(ancho=100, icono='iconos/ok.png')\nLa caja tambi\u00e9n tiene otros m\u00e9todos para permitir o prohibir el ingreso de datos.</p>\n<p>Por ejemplo, podr\u00edamos decirle a la caja que solo permita el ingreso de n\u00fameros,\nletras, o poner un l\u00edmite de cantidad de caracteres. Los m\u00e9todos\nque te permite limitar el ingreso son <code>solo_numeros()</code> y <code>solo_letras()</code>, y el\nl\u00edmite de caracteres est\u00e1 en el atributo <code>limite_de_caracteres</code>:</p>\n<h4 id=\"propiedades_3\">Propiedades</h4>\n<ul>\n<li><code>texto</code></li>\n<li><code>icono</code></li>\n<li><code>limite_de_caracteres</code></li>\n</ul>\n<h4 id=\"metodos_3\">M\u00e9todos</h4>\n<ul>\n<li><code>cualquier_caracter()</code></li>\n<li><code>solo_numeros()</code></li>\n<li><code>solo_letras()</code></li>\n</ul>\n<h2 id=\"clase-listaseleccion\">Clase: ListaSeleccion</h2>\n<p>La lista de selecci\u00f3n se utiliza para mostrar al usuario una lista de cadenas, y permitirle seleccionarlas con el mouse.</p>\n<p>Para crear un lista de selecci\u00f3n, se tiene que crear una lista de cadenas y declarar una funci\u00f3n para que sea llamada cuando se termina de seleccionar.</p>\n<p>Por ejemplo, el siguiente c\u00f3digo muestra una lista e imprime por consola cuando el usuario selecciona con el click del mouse:</p>\n<pre><code>def cuando_selecciona(opcion):\n    print &quot;Ha seleccionado la opcion:&quot;, opcion\n\nconsulta = pilas.interfaz.ListaSeleccion(['Uno', 'Dos', 'Tres'], cuando_selecciona)\n</code></pre>\n\n<h4 id=\"ejemplo-de-integracion_2\">Ejemplo de integraci\u00f3n</h4>\n<p>Para mostrar el componente en funcionamiento, hacemos un lista de\ntres opciones, y le conectamos una funci\u00f3n para avisar la opci\u00f3n\nque selecciona el usuario:</p>\n<pre><code>pilas.fondos.Pasto()\n\ndef cuando_selecciona(opcion_seleccionada):\n    pilas.avisar(&quot;Ha seleccionado la opcion: &quot; + opcion_seleccionada)\n\nopciones = pilas.interfaz.ListaSeleccion(['hola', 'opcion', 'tres'], cuando_selecciona)\n</code></pre>\n\n<p>Deber\u00edas ver en pantalla lo siguiente:</p>\n<p><img alt=\"\" src=\"../imagenes/interfaz/lista_seleccion.gif\" /></p>\n", 
    "url": "/interfaz/", 
    "language": "en", 
    "title": "Interfaz de usuario"
}