path: root/docs/source/activity/index.rst

.. _activity:


My première WebApp Sugar
========================


Récupération de AToiDeWeb
-------------------------

Répertoire de travail::

    mkdir workspace
    cd workspace
    git clone git://git.sugarlabs.org/atoidejouer/atoideweb.git


Création de mon activity
------------------------

Création de mon répertoire de projet::

    mkdir flaskit
    mkdir flaskit/activity
    mkdir flaskit/flaskit
    touch flaskit/flaskit/__init__.py
    mkdir flaskit/flaskit/controllers
    touch flaskit/flaskit/controllers/__init__.py
    mkdir flaskit/flaskit/ui
    mkdir flaskit/po
    cp atoideweb/po/mki18n.py flaskit/po
    mkdir flaskit/static
    mkdir flaskit/static/css
    mkdir flaskit/static/images
    mkdir flaskit/static/js
    cp atoideweb/static/js/jquery-1.6.2.min.js flaskit/static/js
    mkdir flaskit/templates
    cp atoideweb/templates/_helpers.html flaskit/templates
    cp atoideweb/templates/layout.html flaskit/templates
    mkdir flaskit/templates/flaskit


Copie des fichiers de base pour ma webapp::

    cp -rf atoideweb/lib flaskit
    cp atoideweb/setup.py flaskit
    cp atoideweb/config.ini flaskit
    cp atoideweb/run.py flaskit
    cp atoideweb/activity/activity-atoideweb.svg flaskit/activity/flaskit.svg


Tout est pret je rentre dans mon répertoire de projet::

    cd flaskit


Création de mon fichier activity.info::    

    vi activity/activity.info

    [Activity]
    name = FlaskIt
    activity_version = 1
    service_name = org.laptop.FlaskItActivity
    icon = flaskit
    class = flaskit.activity.FlaskItActivity
    license = gplv3

Mise à jour de mon point d'entrée en remplaçant::

    vi run.py

    ...
    # SPECIFIC FOR YOUR APP
    from atoideweb import controllers
    ...

 par::

    ...
    # SPECIFIC FOR YOUR APP
    from flaskit import controllers
    ...


Mon premier controller:: 

    vi flaskit/controllers/index.py

    # gettext import
    from gettext import gettext as _

    # server import
    from server.flask import app, render

    @app.route('/')
    def index():
        # prepare result
        _content = {'content': _('flaskit - Welcome!')}
        # DEBUG
        assert False
        # render result
        return render('index.html', **_content)


Ma première template::

    vi templates/index.html

    {% extends "layout.html" %}
    {% block content %}
    <h1>{{ content  }}</h1>
    {% endblock %}


Ma première exécution::

    python run.py

    * Running on http://127.0.0.1:5000/
    * Restarting with reloader...


POST
----

Mon controller::

    vi flaskit/controllers/post.py

    # gettext import
    from gettext import gettext as _

    # server import
    from server.flask import app, render, request, jsonify

    @app.route('/post', methods=['GET', 'POST'])
    def post():
        # POST
        if request.method == 'POST':
            if 'post-sample' in request.form:
                _result = request.form['post-sample']
            else:
                _result = '??'
        # GET
        else:
            _result = ''
        # 
        _content = {
                    'title': _('flaskit - POST sample'),
                    'result': _result
                    }
        # render result
        return render('flaskit/post.html', **_content)


Ma template::

    vi templates/flaskit/post.html

    {% extends "layout.html" %}
    {% block content %}
    <h1>{{ title  }}</h1>
    <div class='post-sample' class='form'>
        <h3>{{ _('post-sample') }}</h3>
        <form method="post" action="/post" name="post-sample">
            <input type="radio" value="option-1" name="post-sample">option 1<br>
            <input type="radio" value="option-2" name="post-sample">option 2<br>
            <input type="submit" value="submit" ></input>
        </form>
    </div>
    <!-- HELPER WAY
    { options(_, 'post-sample', ['option 1', 'option 2'], result, '/post') }
    -->
    <div id='post-result' class='result'>
        <h3>{{ _('post-result') }}</h3>
        => {{ result }}
    </div>
    {% endblock %}


Redémarrage du serveur::

    python run.py

    * Running on http://127.0.0.1:5000/
    * Restarting with reloader...


Ajax
----

Mon controller::

    vi flaskit/controllers/ajax.py

    # gettext import
    from gettext import gettext as _

    # server import
    from server.flask import app, render, request, jsonify

    @app.route('/ajax', methods=['GET', 'POST'])
    def ajax():
        # POST
        if request.method == 'POST':
            if 'ajax-sample' in request.form:
                # prepare ajax result
                _ajax_content = {
                        'result': request.form['ajax-sample']
                        }
                # render ajax
                return jsonify(_ajax_content)
            # ?? should not happen
            else:
                _result = '??'
        # GET
        else:
            _result = ''
        # prepare result
        _content = {
                    'title': _('flaskit - Ajax sample'),
                    'result': _result
                    }
        # render result
        return render('flaskit/ajax.html', **_content)


Ma template::        

    vi templates/flaskit/ajax.html

    {% extends "layout.html" %}
    {% block content %}
    <h1>{{ title  }}</h1>
    <div id='ajax-sample' class='form'>
        <h3>{{ _('ajax-sample') }}</h3>
        <form method="post" action="/ajax" name="ajax-sample">
            <input type="radio" value="option 1" name="ajax-sample">option 1<br>
            <input type="radio" value="option 2" name="ajax-sample">option 2<br>
        </form>
    </div>
    <script>
    <!--
    $(document).ready(function() {
        $("#ajax-sample input[type='radio']").change( function() {
            $.ajax({
                url: '{{ action }}',
                type: 'POST',
                data: ({ 'ajax-sample' : $(this).val()}),
                success: function(data) {
                        var _el = $('#ajax-sample-result');
                        _el.html(data.result);
                }
            });
        });
    });
    -->
    </script>
    <!-- HELPER WAY
    { options_ajax(_, 'ajax-sample', ['option 1', 'option 2'], '', '/ajax') }
    -->
    <div id='ajax-result' class='result'>
        <h3>{{ _('ajax-result') }}</h3>
        => <span id="ajax-sample-result"></span>
    </div>
    {% endblock %}


Redémarrage du serveur::

    python run.py

    * Running on http://127.0.0.1:5000/
    * Restarting with reloader...


Gallery
-------

Mon controller::

    vi flaskit/controllers/ajax.py

    # python import
    import os

    # gettext import
    from gettext import gettext as _

    # server import
    from server.flask import app, render

    # server tools import
    from server.tools import storage

    JNL_PATH = os.path.join('images', 'journal')

    @app.route('/gallery')
    def gallery():
        # list images
        _images = storage.list_dir(path=JNL_PATH)
        # prepare result
        _content = {
                    'title' : _('flaskit - Gallery'),
                    'images': enumerate(_images)
                    }
        # render result
        return render('flaskit/gallery.html', **_content)


Ma template::
   
    vi templates/flaskit/gallery.html

    {% extends "layout.html" %}
    {% block content %}
        <h1>{{ title  }}</h1>
        <div id="gallery">
            <ul>
                {% for _i, _img in images %}
                <li>
                    <a href="{{ _img }}" title="Image {{ _i }}">
                        <img src="{{ _img }}" width="72" height="72" alt="" />
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
    {% endblock %}


Redémarrage du serveur::

    python run.py

    * Running on http://127.0.0.1:5000/
    * Restarting with reloader...


Make it lightbox::

    vi templates/flaskit/gallery.html
    
    {% extends "layout.html" %}
    {% block head %}
        <!-- js import -->
        <script type="text/javascript" src="/static/js/jquery.lightbox-0.5.min.js"></script>
        <!-- stylesheet import -->
        <link rel="stylesheet" type="text/css" href="/static/css/jquery.lightbox-0.5.css" media="screen" />
    {% endblock %}
    {% block content %}
    ...
    <script type="text/javascript">
    <!--
    $(function() {
        $('#gallery a').lightBox();
    });
    -->
    </script>
    {% endblock %}


Redémarrage du serveur::

    python run.py

    * Running on http://127.0.0.1:5000/
    * Restarting with reloader...


Internationalisation
--------------------

Liste des fichiers à traduire::

    cp po
    vi app.fil

    ../flaskit/controllers/index.py
    ../flaskit/controllers/post.py
    ../flaskit/controllers/ajax.py
    ../flaskit/controllers/gallery.py


Extraction des messages::

    cp po
    python mki18n.py -p --domain=org.laptop.FlaskItActivity


Compilation des messages::

    cp po
    python mki18n.py -m -e --domain=org.laptop.FlaskItActivity --moTarget=../locale


Redémarrage du serveur::

    python run.py

    * Running on http://127.0.0.1:5000/
    * Restarting with reloader...


Intégration Sugar
-----------------

Inspirons nous de l'activity de AToiDeWeb::

    cp ../atoideweb/atoideweb/activity.py flaskit


Modification du nom de ma classe principale::

    vi flaskit/activity.py

    ...
    class AToiDeWebActivity(run.Server, activity.Activity):


par::

    ...
    class FlaskActivity(run.Server, activity.Activity):


Ma toolbar::

    cp ../atoideweb/atoideweb/ui/toolbar.py flaskit/ui


Packaging
---------

Mon MANIFEST::

    cp ../atoideweb/MANIFEST .

    vi MANIFEST
    :1,$ s/atoideweb/flaskit/g


Mon bundle .xo::

    cd shared/flaskit
    python setup.py dist_xo


Versioning
----------

Init de mon repository::

    git init


Exclusion des fichier ne nécessitant pas de versioning::    

    vi .gitignore

    syntax: glob
    *.pyc
    *.mo
    *.swp
    *.new
    ./docs/build
    ./dist

Ajout de mes fichiers au contrôle de version::

    git add .

    
Mon premier commit::

    git commit -a -m 'initial commit - my first web app - FlaskIt'


Et après?
---------

Le liens suivant est un bon exemplate d'application client/serveur utilisant
jQuery. Celle-ci est en PHP mais peut facilement être portée avec Flask ...

    * http://www.fernando.com.ar/memo/index.php


Y a plus qu'à ;)