tutorials/Hello.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "czech-programming",
   "metadata": {},
   "source": [
    "**If you haven't already done so, please take a look at this [FAQ](https://q37.info/s/kqsb3gmg).**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "presidential-minutes",
   "metadata": {},
   "source": [
    "If the [*atlastk*](http://atlastk.org) module is not installed, it will be installed from [*Pypi*](https://q37.info/s/9srmskcm).\n",
    "\n",
    "Don't worry, it's a very lightweight package (~20 Ko), and it has no dependencies…"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "integrated-skirt",
   "metadata": {},
   "outputs": [],
   "source": [
    "try:\n",
    "  import atlastk\n",
    "except:\n",
    "  !pip install atlastk\n",
    "  import atlastk\n",
    "\n",
    "atlastk.setJupyterHeight(\"150px\") # Adjusting the height of the iframe in which the application will be displayed…"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "short-theory",
   "metadata": {},
   "source": [
    "Let's now define the body of the base HTML page."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "legitimate-edwards",
   "metadata": {},
   "outputs": [],
   "source": [
    "BODY = \"\"\"\n",
    "<fieldset>\n",
    "  <input id=\"Input\" maxlength=\"20\" placeholder=\"Enter a name here\" type=\"text\"\n",
    "          xdh:onevent=\"Submit\" value=\"world\"/>\n",
    "  <button xdh:onevent=\"Submit\">Submit</button>\n",
    "  <hr/>\n",
    "  <fieldset>\n",
    "    <output id=\"Output\"/>\n",
    "  </fieldset>\n",
    "</fieldset>\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "markdown",
   "id": "detailed-fruit",
   "metadata": {},
   "source": [
    "And the function which will be called on each new session."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "difficult-period",
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import display, HTML\n",
    "display(HTML(BODY))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "excess-michigan",
   "metadata": {},
   "outputs": [],
   "source": [
    "def acConnect(dom):\n",
    "    dom.inner(\"\", BODY) # The empty string (`\"\"`) refers to the root element of the HTML page.\n",
    "    dom.focus(\"Input\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "exciting-channels",
   "metadata": {},
   "source": [
    "Let's now associate the *Connect* action to this function."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "blank-heather",
   "metadata": {},
   "outputs": [],
   "source": [
    "callbacks = { \n",
    "    \"\": acConnect # The empty string (\"\") refers to the action called on each new session.\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "solar-chicago",
   "metadata": {},
   "source": [
    "Let's display the apps main page.\n",
    "Click on the URL wich will be displayed below to open the app on it's own page ot tab."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "entertaining-lotus",
   "metadata": {},
   "source": [
    "Clicking on the *Submit* button or typing on *Enter* in the text field will display an error message, as there is no function assigned to the associated *Submit* action."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "demonstrated-brook",
   "metadata": {},
   "outputs": [],
   "source": [
    "atlastk.launch(callbacks)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "heard-filter",
   "metadata": {},
   "source": [
    "Let's now create the action which will be associated to the *Submit* action."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "threatened-protest",
   "metadata": {},
   "outputs": [],
   "source": [
    "def acSubmit(dom):\n",
    "    dom.setValue(\"Output\", f\"Hello, {dom.getValue('Input')}!\")\n",
    "    dom.setValue(\"Input\", \"\")\n",
    "    dom.focus(\"Input\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "leading-programmer",
   "metadata": {},
   "source": [
    "Let's associate this function to the *Submit* action defined as the `xdh:event` attribute on both `input` and `button` element of the HTML page."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "indoor-stack",
   "metadata": {},
   "outputs": [],
   "source": [
    "callbacks[\"Submit\"] = acSubmit;"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "photographic-technical",
   "metadata": {},
   "source": [
    "Let's look what the `callback` variable looks like."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "future-marine",
   "metadata": {},
   "outputs": [],
   "source": [
    "(callbacks)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "empirical-pointer",
   "metadata": {},
   "source": [
    "And let's relaunch the app.\n",
    "\n",
    "Clicking on the *Submit* button or typing on *Enter* in the text field will now display the expected greeting message."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "brutal-mount",
   "metadata": {},
   "outputs": [],
   "source": [
    "atlastk.launch(callbacks)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}