diff --git a/docs/tutorials/flask.rst b/docs/tutorials/flask.rst index ec11c109..ec4f68e3 100644 --- a/docs/tutorials/flask.rst +++ b/docs/tutorials/flask.rst @@ -64,8 +64,8 @@ Now it's time to install ``Flask`` and ``Dependency Injector``. Put next lines to the ``requirements.txt`` file:: - flask dependency-injector + flask Now let's install it:: @@ -73,16 +73,16 @@ Now let's install it:: And check that installation is successful:: - python -c "import flask; print(flask.__version__)" python -c "import dependency_injector; print(dependency_injector.__version__)" + python -c "import flask; print(flask.__version__)" You should see something like:: - (venv) $ python -c "import flask; print(flask.__version__)" - 1.1.2 (venv) $ python -c "import dependency_injector; print(dependency_injector.__version__)" 3.22.0 + (venv) $ python -c "import flask; print(flask.__version__)" + 1.1.2 *Versions can be different. That's fine.* @@ -183,3 +183,197 @@ Open your browser and go to the ``http://127.0.0.1:5000/``. You should see ``Hello, World!``. That's it. Our minimal application is up and running. + +Make it pretty +-------------- + +Now let's make it look pretty. We will use `Bootstrap 4 `_. +For adding it to our application we will get +`Bootstrap-Flask `_ extension. +It will help us to add all needed static files in few clicks. + +Add ``bootstrap-flask`` to the ``requirements.txt``:: + + dependency-injector + flask + bootstrap-flask + +and run in the terminal:: + + pip install --upgrade -r requirements.txt + +Now we need to add ``bootstrap-flask`` extension to the container. + +Edit ``containers.py``: + +.. code-block:: python + :emphasize-lines: 6,16 + + """Application containers module.""" + + from dependency_injector import containers + from dependency_injector.ext import flask + from flask import Flask + from flask_bootstrap import Bootstrap + + from . import views + + + class ApplicationContainer(containers.DeclarativeContainer): + """Application container.""" + + app = flask.Application(Flask, __name__) + + bootstrap = flask.Extension(Bootstrap) + + index_view = flask.View(views.index) + +Let's initialize ``bootstrap-flask`` extension. We will need to modify ``create_app()``. + +Edit ``application.py``: + +.. code-block:: python + :emphasize-lines: 13-14 + + """Application module.""" + + from .containers import ApplicationContainer + + + def create_app(): + """Create and return Flask application.""" + container = ApplicationContainer() + + app = container.app() + app.container = container + + bootstrap = container.bootstrap() + bootstrap.init_app(app) + + app.add_url_rule('/', view_func=container.index_view.as_view()) + + return app + +Now we need to add the templates. For doing this we will need to add the folder ``templates/`` to +the ``githubnavigator`` package. We also will need two files there: + +- ``base.html`` - the layout +- ``index.html`` - the main page + +Create ``templates`` folder and put two empty files into it ``base.html`` and ``index.html``: + +.. code-block:: + :emphasize-lines: 3-5 + + ./ + ├── githubnavigator/ + │ ├── templates/ + │ │ ├── base.html + │ │ └── index.html + │ ├── __init__.py + │ ├── application.py + │ ├── containers.py + │ └── views.py + ├── venv/ + └requirements.txt + +Now let's fill in the layout. + +Put next to the ``base.html``: + +.. code-block:: html + + + + + {% block head %} + + + + + {% block styles %} + + {{ bootstrap.load_css() }} + {% endblock %} + + {% block title %}{% endblock %} + {% endblock %} + + + + {% block content %}{% endblock %} + + {% block scripts %} + + {{ bootstrap.load_js() }} + {% endblock %} + + + +And put something to the index page. + +Put next to the ``index.html``: + +.. code-block:: html + + {% extends "base.html" %} + + {% block title %}Github Navigator{% endblock %} + + {% block content %} +
+

Github Navigator

+ +

+

+
+ +
+ +
+
+
+

+ + + {% if repositories|length == 0 %} +

No search results

+ {% endif %} + +
+ {% endblock %} + +Ok, almost there. The last step is to make ``index`` view to render the ``index.html`` template. + +Edit ``views.py``: + +.. code-block:: python + + """Views module.""" + + from flask import render_template + + + def index(): + return render_template('index.html') + + +That's it. + +Make sure the app is running and open ``http://127.0.0.1:7000/``. + +You should see: + +.. image:: flask_images/screen_01.png + +Connect to the GitHub +--------------------- + +Tests +----- + +Conclusion +---------- diff --git a/docs/tutorials/flask_images/screen_01.png b/docs/tutorials/flask_images/screen_01.png new file mode 100644 index 00000000..ba5ac5b6 Binary files /dev/null and b/docs/tutorials/flask_images/screen_01.png differ diff --git a/examples/miniapps/ghnav-flask/githubnavigator/templates/index.html b/examples/miniapps/ghnav-flask/githubnavigator/templates/index.html index 9f75018e..40ffe972 100644 --- a/examples/miniapps/ghnav-flask/githubnavigator/templates/index.html +++ b/examples/miniapps/ghnav-flask/githubnavigator/templates/index.html @@ -8,9 +8,9 @@
- +
- diff --git a/examples/miniapps/ghnav-flask/requirements.txt b/examples/miniapps/ghnav-flask/requirements.txt index f24e8604..6d896c45 100644 --- a/examples/miniapps/ghnav-flask/requirements.txt +++ b/examples/miniapps/ghnav-flask/requirements.txt @@ -1,4 +1,7 @@ -dependency-injector[flask,yaml] +dependency-injector +flask +bootstrap-flask +pyyaml pygithub pytest-flask pytest-cov