48.1 Primer ejemplo de callback

Una interfaz sencilla con un cuadro de entrada y una salida en tiempo real.

Primera parte: app.layout define la distribución de la visualización. En este ejemplo, se utilizan etiquetas html para definir un encabezado (h3), una división (div) para un cuadro de entrada (Input) y una división (div) para la salida (Output). Importante definir un id único para el Input y el Output.

Segunda parte: @app.callback es la clave de la interactividad. En este ejemplo, actualiza la salida basándose en el valor del cuadro de entrada. Guarda en una variable value la entrada y a lo que guarda dentro de la división de salida la denomina children.

Tercera parte: update_output_div es una función que toma lo que hay en Input y lo expresa en el Output.

Cuarta parte: app.run_server(jupyter_mode="inline") inicia el servidor Dash en el modo Jupyter inline, es decir, dentro del cuadernillo.

En modo local se utilizaría:

if __name__ == '__main__':
    app.run_server(debug=True)

y lo presentaría por medio del puerto http://127.0.0.1:8050/ de un navegador.

Existen algunas diferencias importantes entre el dash.html y los atributos HTML:

  1. La propiedad style en HTML es una cadena separada por punto y coma. En Dash, solo se puede proporcionar mediante diccionario.
  2. Las claves en el diccionario style son Estilo camello. Entonces, en lugar de text-align, debemos usar textAlign.
  3. El atributo class en HTML es className en Dash.
  4. Los elementos secundarios de la etiqueta HTML se especifican a través del argumento children de palabra clave. Por convención, este es siempre el primer argumento y, por lo tanto, a menudo se omite.