diseno_interfaz.ipynb

{
  "cells": [
    {
      "cell_type": "markdown",
      "source": [
        "# <center>Diseño de la Interfaz Gráfica</center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "En este notebook realizaremos el diseño de la interfaz gráfica para la primer etapa del proyecto *LERMA*. Si aún no has creado el proyecto, revisa cómo hacerlo antes de continuar.\n",
        "\n",
        "La interfaz consistirá en una página de inicio en la cual se nos permita crear una cuenta o iniciar sesión dentro de la plataforma."
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Para comenzar cambiaremos el título de nuestra ventana de forma tal que ahora muestre LERMA. \n",
        "Teniendo la ventana principal seleccionada, busca la propiedad **windowTitle** dentro del panel de propiedades y modifica su valor con el título deseado.\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/windowTitle.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "El siguiente paso es agregar un *Stacked Widget* que nos permitirá tener distintas páginas apiladas de forma tal que solo sea visible una a la vez. Este widget nos servirá para tener una vista o página para el inicio de sesión y creación de cuentas y otra vista para la aplicación.\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/agregar_stacked_widget.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "A continuación editaremos las propiedades del stacked widget recién agregado, de momento solo modificaremos en nombre del objeto:\n",
        "\n",
        "* objectName: viewSW\n",
        "\n",
        "La propiedad objectName es el nombre con el cuál se reconocerá el componente dentro del programa. Es recomendable que el nombre sea significativo para reconocerlo fácilmente. En este caso el nombre se compone de qué representa (*view*) seguido de las iniciales del tipo de componente (Stacked Widget).\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/viewSW.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Como siguiente paso definiremos un modo de despliegue o *layout* para nuestra ventana principal, esto con la finalidad de hacer que el componente *viewSW* ocupe todo el espacio disponible de la ventana.\n",
        "\n",
        "**ATENCIÓN**, el layout se aplicará sobre la **ventana principal** porque queremos reorganizar los componentes que contiene. Para definir el layout seleccionaremos cualquier área libre de la ventana (dar click fuera de *viewSW*) y en la barra de herramientas seleccionaremos el ícono con una rejilla de nueve puntos etiquetado como *Grid*.\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/mainwindow_grid.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Ahora agregaremos un Group Box que nos permita agrupar los controles para darle la posibilidad de iniciar sesión al usuario.\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/agregar_groupbox.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Como siguiente paso vamos a editar las propiedades de ese group box de forma tal que podamos reconocerlo en caso de ser necesario. Las propiedades que vamos a editar serán:\n",
        "\n",
        "* objectName: loginGB\n",
        "* title: LogIn\n",
        "* alignment -> Horizontal: AlignHCenter\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/propiedades_GB.mp4\" width=100%/></center>\n"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "A continuación agregaremos dentro del group box un *Line Edit* que nos permitirá escribir el nombre de usuario. Los atributos que serán modificados para este componente son:\n",
        "\n",
        "* objectName: usernameLE\n",
        "* placeholderText: User\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/usernameLE.mp4\" width=100%/></center>\n"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "El siguiente componente a ser agregado es otro *Line Edit* que acepte la contraseña del usuario. En este caso los valores de los atributos son:\n",
        "\n",
        "* objectName: passwordLE\n",
        "* echoMode: Password\n",
        "* placeholderText: Password\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/passwordLE.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "A continuación agregaremos un botón que será el que debamos presionar para poder iniciar sesión. En el group box ya no hay espacio suficiente por lo que tendré que ampliarlo antes de agregar el nuevo componente. Los atributos modificados serán:\n",
        "\n",
        "* objectName: loginPB\n",
        "* enabled: false\n",
        "* text: Login\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/loginPB.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Ahora debemos replicar lo hecho para tener controles que permitan crear una cuenta. Comenzaremos agregando un group box que llamaremos *signInGB*. Los atributos para este componente serán:\n",
        "\n",
        "* objectName: signInGB\n",
        "* title: Sign In\n",
        "* alignment -> Horizontal: AlignHCenter\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/signInGB.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Posteriormente agregaremos una caja de texto (*line edit*) para permitir al nuevo usuario escribir su nombre; en este caso los atributos serán:\n",
        "\n",
        "* objectName: newUserLE\n",
        "* placeholder: User\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/newUserLE.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "El siguiente componente en ser agregado es una caja de texto para el correo con el cual quedará asociada la cuenta del usuario. Sus atributos son:\n",
        "\n",
        "* objectName: emailLE\n",
        "* placeholderText: email\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/emailLE.mp4\" width=100%/></center>\n"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "A continuación agregamos la caja de texto para el correo con los atributos:\n",
        "\n",
        "* objectName: newPasswordLE\n",
        "* echoMode: Password\n",
        "* placeholderText: Password\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/newPasswordLE.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Como último componente a ser agregado es el botón que permitirá crear la nueva cuenta, en este caso los atributos modificados serán:\n",
        "\n",
        "* objectName: signInPB\n",
        "* enabled: false\n",
        "* text: Sign In\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/signInPB.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "¡Muy bien! hasta este momento ya tenemos los componentes agregados sin embargo no se ven muy bien organizados. Para ello vamos a dejar que Qt se encargue de darles un mejor acomodo.\n",
        "\n",
        "Haz click en cualquier área libre del stacked widget y posteriormente selecciona el *layout* en forma de rejilla (*grid*).\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/stacked_widget_grid.mp4\" width=100%/></center>\n"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Ahora vamos a replicar lo mismo para cada group box de forma tal que le de un acomodo automático a las cajas de texto y botonos que contiene. \n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/groupbox_grid.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Como último paso opcional podemos modificar el ancho máximo de los group box de forma tal que sus componentes se vean más pequeños y aún así centrados. La propiedad que se moficará es:\n",
        "\n",
        "* loginGB -> maximumSize -> Width: 200\n",
        "* signInGB -> maximumSize -> Width: 200\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/groupbox_width.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Ahora compilamos el proyecto, lo ejecutamos y nuestra ventana debería ser funcional, debemos poder escribir en las cajas de texto y los botones estarán deshabilitados.\n",
        "\n",
        "<center><video controls src=\"https://raw.githubusercontent.com/sencionechauri/i5885/master/media/design_run.mp4\" width=100%/></center>"
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Los botones están deshabilitados porque no queremos que los usuarios puedan intentar iniciar sesión sin datos en las cajas de texto o crear un usuario sin datos completos ¡esos botones los habilitaremos con código!, pero eso en el próximo notebook."
      ],
      "metadata": {
        "nteract": {
          "transient": {
            "deleting": false
          }
        }
      }
    }
  ],
  "metadata": {
    "kernelspec": {
      "name": "xcpp11",
      "display_name": "C++11",
      "language": "C++11"
    },
    "language_info": {
      "codemirror_mode": "text/x-c++src",
      "file_extension": ".cpp",
      "mimetype": "text/x-c++src",
      "name": "c++",
      "version": "11"
    },
    "nteract": {
      "version": "0.25.0"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 4
}