{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"margin:0 10px 10px 0\" markdown=\"1\">\n",
    "    <a href=\"index.ipynb\">\n",
    "        <img src=\"static/images/epyklogo_whole_big.png\">\n",
    "    </a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Installation\n",
    "\n",
    "\n",
    "Run the below command to add Epyk to your repository. As a common practice it is recommanded to use [virtual environments](https://docs.python.org/3/library/venv.html).\n",
    "\n",
    "> pip install epyk\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Epyk versions\n",
    "\n",
    "It is recommanded to use Epyk to start building your first app. Any other Epyk versions are based on this module anyway. Epyk-Material, Epyk-Bootstrap are using features on top of the existing Epyk components.\n",
    "\n",
    "<img src='./tutorials/images/pypi.PNG'>\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## IDE\n",
    "\n",
    "Not IDE is recommanded to start an Epyk project. As Epyk projects are plain Python projects any IDE able to help on writting Python code are good. in this section visual studio code will be used to generate the first report.\n",
    "\n",
    "\n",
    "<img src=\"./tutorials/images/ide_visual.PNG\">\n",
    "\n",
    "The two below lines are mandatory in any HTML report. This report object will be used to generate the final page. All the HTML components and component categories are available in the ** ui ** property.\n",
    "\n",
    "You can have a look at the online documentation, the exmaples on github or this section [here](/tutorials/components/00_components.ipynb) to get more details on the predefined components.\n",
    "\n",
    "It is recommanded to add the below line of code in order to flag your report as a non production one. The icon in the browser tab will be dark.\n",
    "\n",
    "    rptObj.headers.dev()\n",
    "    "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## HTML output\n",
    "\n",
    "Then once you have all the components you want to your page, you can use the below line of code to render your page and test the result in your browser.\n",
    "\n",
    "\n",
    "    rptObj.outs.html_file(path=\"\", name=\"test\")\n",
    "\n",
    "This will produce a file which will display a rich HTML content. Firefox, Chrome and IR / Edge are used in the testing of the various components.\n",
    "\n",
    "Components are using behind the seen standard framework like BootStrap and Material which ensure your pages are responsive and compatible with any devices.\n",
    "\n",
    "\n",
    "## Full example"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from epyk.core.Page import Report\n",
    "\n",
    "# Create a basic report object\n",
    "rptObj = Report()\n",
    "rptObj.headers.dev()\n",
    "\n",
    "records = []\n",
    "\n",
    "button = rptObj.ui.button(\"test\")\n",
    "\n",
    "\n",
    "rptObj.outs.html_file(name=\"test\")"
   ]
  }
 ],
 "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.8.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}