Design¶

Le principe de cet article est de fournir un exemple design épuré pour réaliser un formulaire par exemple

le code pour le serveur web python

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import os
from flask import Flask
import flask

# Flask configuration
DEBUG = True
PORT = 5001
HOST = '0.0.0.0'
PATH_HTML = '.'
PATH_INDEX = 'index.html'

app = Flask(__name__)
app.config.from_object(__name__)

@app.route("/")
def index():
    return flask.send_from_directory(app.config['PATH_HTML'],app.config['PATH_INDEX'])

@app.route("/<path:path>")
def static_web(path):
    return flask.send_from_directory(app.config['PATH_HTML'],path)


@app.route('/update', methods=['POST'])
def update():
    print(flask.request.form['id'])
    return ""

if __name__ == "__main__":
    app.run(host = app.config['HOST'], port = app.config['PORT'])

il faudra trouver ce fichier python à la racine de notre site web qui comportera aussi le contenu font, js, css, ... du module fortawesome (http://fortawesome.github.io/Font-Awesome/)

au niveau du fichier index.html

<html>
<head>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/mycss.css" rel="stylesheet">
<link href="css/mytheme.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/myjs.js"></script>

</head>
<body class="body-menu">
    <div class="menu menu-header">
        <div><a href="menu1.html"><i class="fa fa-home"></i> Home</a></div>
    </div>
    <div class="menu menu-content" style="padding:100px 0 100px 0;">
        <div><a href="menu1.html"><i class="fa fa-book"></i> Library</a></div>
        <div><a href="menu1.html"><i class="fa fa-pencil"></i> Applications</a></div>
        <div><a href="menu1.html"><i class="fa fa-cogs"></i> Settings</a></div>
        <div><a href="menu1.html"><i class="fa fa-android"></i> Android</a></div>
    </div>
    <div class="menu menu-footer">
        <div><a href="menu1.html"><i class="fa fa-medkit"></i> About</a></div>
    </div>
</body>
</html>

au niveau du fichier menu1.html

<html>
<head>
<meta name="viewport" content="width=device-width"/>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/mymobile.css" rel="stylesheet">
<link href="css/mycss.css" rel="stylesheet">
<link href="css/mytheme.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/myjs.js"></script>

</head>
<body>
    <div class="menu menu-header">
        <div><a href="/"><i class="fa fa-reply"></i> Menu1</a></div>
    </div>
    <div class="content padding-one">
          <input id="box1" type="checkbox" class="checked toogle"/>
          <label for="box1">Checkbox 1</label>
          <input id="box2" type="checkbox"  class="checked"/>
          <label for="box2">Checkbox 2</label><br/>
          <input id="box3" type="checkbox" class="toogle"/>
          <label for="box3">Checkbox 3</label><br/>
          <input type= "radio" name="radio" value="radio1" id="radio1" class="checked"><label for="radio1">Radio1</label><br/>
          <input type= "radio" name="radio" value="radio2" id="radio2"><label for="radio2">Radio2</label><br/>
          <input type= "radio" name="radio" value="radio3" id="radio3"><label for="radio3">Radio3</label><br/>
          <input id="box4" type="checkbox"/>
          <label for="box4">Checkbox 4</label><br/>
          <input id="box5" type="checkbox"/>
          <label for="box5">Checkbox 5</label><br/>
          <div class="input-prepend">
            <span class="add-on"><i class="fa fa-envelope"></i></span>
            <input id="text1" class="span2" type="text" placeholder="Email address"/>
          </div>
          <div class="input-prepend">
            <span class="add-on"><i class="fa fa-envelope"></i></span>
            <input id="text2" class="span2" type="text" placeholder="Email address"/>
          </div>
          <div class="expand">
            <span class="expander" id="view-1"><i>title rubric 1</i></span>
          </div>
          <div view="view-1" class="view">
              <input id="box6" type="checkbox" />
              <label for="box6" >Checkbox 6</label><br/>
              <input id="box7" type="checkbox" class="checked"/>
              <label for="box7" >Checkbox 7</label><br/>
          </div>
          <div class="expand">
            <span class="expander" id="view-2"><i></i><input id="boxView-2" type="checkbox" class="checked toogle"/><label for="boxView-2">Checkbox 1</label></span>
          </div>
          <div view="view-2" class="view">
              <input id="box13" type="checkbox"/>
              <label for="box13">Checkbox 13</label><br/>
              <input id="box14" type="checkbox"/>
              <label for="box14">Checkbox 14</label><br/>
          </div>
          <div class="range">
              <label>range1</label>
              <input id="range1" type="range"  min="0" max="100" step="10"/>
          </div>
          <div class="expand">
            <span class="expander" id="list-1">Alarme a</span>
          </div>
          <div view="list-1" class="view list">
            <input type= "radio" name="radiolist" value="radio4" id="radio4" class="list checked"><label for="radio4">00h00</label><br/>
            <input type= "radio" name="radiolist" value="radio5" id="radio5" class="list"><label for="radio5">00h05</label><br/>
            <input type= "radio" name="radiolist" value="radio6" id="radio6" class="list"><label for="radio6">00h10</label><br/>
          </div>
          <button id="button1"><i class="fa fa-envelope"></i>test</button>

          <input id="box15" type="checkbox"/>
          <label for="box15">Checkbox 15</label><br/>
          <input id="box16" type="checkbox"/>
          <label for="box16">Checkbox 16</label><br/>
          <input id="box17" type="checkbox"/>
          <label for="box17">Checkbox 17</label><br/>
          <input id="box18" type="checkbox"/>
          <label for="box18">Checkbox 18</label><br/>
          <input id="box19" type="checkbox"/>
          <label for="box19">Checkbox 19</label><br/>
          <input id="box20" type="checkbox"/>
          <label for="box20">Checkbox 20</label><br/>
    </div>
</body>
</html>

au niveau du fichier css/mycss.css

body {
    width: 100%;
    margin: 0;
}

input[type=checkbox],
    input[type='radio']{
    display:none;
}

input[type=checkbox] + label:before,
    input[type=radio] + label:before {
    font-family: FontAwesome;
    display: inline-block;
    letter-spacing: 5px;
    padding: 4px 5px;
}

input[type="checkbox"].checked + label:before {
    content: "\f046";
}

input[type="checkbox"] + label:before {
    content: "\f096";
}

input[type="radio"] + label:before {
    content: "\f10c";
}
input[type="radio"].checked + label:before {
    content: "\f05d";
}

div.test {
    width: 100%;
}

label {
    width: 100%;
    display: inline-block;
}

input[type=checkbox].toogle + label:after {
    font-family: FontAwesome;
    display: inline-block;
    letter-spacing: 5px;
    padding: 4px 5px;
}

input[type="checkbox"].toogle + label:before {
    content: "";
}

input[type="checkbox"].toogle.checked + label:after {
    content: "\f205";
    float:right
}

input[type="checkbox"].toogle + label:after {
    content: "\f204";
    float:right
}

.input-prepend {
    font-size: 0px;
}

.add-on {
    margin-right: -1px;
    border-radius: 4px 0px 0px 4px;
    display: inline-block;
    min-width: 16px;
    padding: 4px 5px;
    text-align: center;
}

input[type=text] {
    display: inline-block;
    vertical-align: top;
    border-radius: 0px 4px 4px 0px;
    float: none;
    margin-left: 0px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    padding: 4px 6px;
    margin-bottom: 10px;
}

input[type=range]{
    -webkit-appearance: none;
    display: inline;
    vertical-align: middle;
    width: 80%;
}

input[type='range']::-moz-range-track {
    -moz-appearance: none;
}

div.range > label {
    display: inline;
    padding: 4px 5px;
}

.menu > div {
    width: 100%;
}

.menu-header > div {
    width: 100%;
}

.menu > div > a {
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
}

.content {
    position:in-line;
    margin-left: 5px;
}

.menu-footer {
    position:fixed;
    bottom:0;
    width:100%;
}

.menu-header {
    position:fixed;
    top:0;
    width:100%;
}

.expander {
    margin-right: -1px;
    margin-left: 4px;
    display: inline-block;
    width: 100%;
}

.expander > i:before {
    font-family: FontAwesome;
    display: inline-block;
    letter-spacing: 5px;
    padding: 4px 5px;
    content: "\f0fe";
    font-style: normal;
}

.expander.expand > i:before {
    font-family: FontAwesome;
    display: inline-block;
    letter-spacing: 5px;
    padding: 4px 5px;
    content: "\f146";
    font-style: normal;
}

.expander > i {
    font-style: normal;
}

.view {
    padding: 4px 10px;
}

div.expand > span > label {
    display: inline;
}

button {
    display: inline-block;
    vertical-align: top;
    border-radius: 4px 4px 4px 4px;
    min-width: 200px;
    }

button > i.fa {
    float: left;
}

au niveau du fichier css/mytheme.css

label,
    input[type=checkbox] + label:before,
        .add-on,
            input[type=text],
                .menu > div,
                    .expander,
                        .expand,
                           button {
    font-size: 24px;
}


input[type="checkbox"].checked + label,
    input[type="radio"].checked + label
     {
    color: black;
}

input[type="checkbox"] + label,
    input[type="radio"] + label {
    color: #CCC;
}

input[type="checkbox"].checked + label:before,
        input[type="checkbox"].toogle.checked + label:before ,
            input[type="checkbox"].toogle.checked + label:after ,
                input[type="radio"].checked + label:before,
                    .add-on,
                        .expander > i:before,
                            strong.list-selected,
                                button{
    color: #38C;
}


input[type="checkbox"] + label:before,
    input[type="checkbox"] + label,
        input[type="checkbox"].toogle + label:before,
            input[type="radio"] + label,
                .expander.expand > i:before {
    color: #CCC;
}


.add-on {
    text-shadow: 0px 1px 0px #FFF;
    background-color: #EEE;
    border: 1px solid #CCC;
    height: 25px;
}


.padding-two {
    padding:50px 0 50px 0;
}

.padding-one {
    padding:50px 0 0 0;
}

input[type=text] {
    background-color: #FFF;
    border: 1px solid #CCC;
    width: 200px;
    line-height: 25px;
}

input[type=range] {
    background-color: white;
    width: 500px;
}

input[type='range']::-moz-range-track {
        border-radius: 5px;
        box-shadow: inset 0 0 5px #38C;
        background-color: #38C;
        height: 10px;
    }

.menu > div {
    line-height: 50px;
}

.menu-header > div,
    .menu-content > div  {
    border-bottom: 1px solid #CCC;
}

.menu-footer > div {
    border-top: 1px solid #CCC;
}

.menu > div > a,
    input[type=text] {
    color: #555;
}


.menu-footer,
    .menu-header,
        .menu-content,
            .body-menu  {
    background: #f0f0f0;
}


button {
    border: 1px solid #CCC;
    min-width: 200px;
}

au niveau du fichier js/myjs.js

$().ready(function() {

    $("input[type=checkbox]").click(function () {
        $(this).toggleClass("checked");
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:5001/update",
            dataType: "xml",
            data: "id=" + $(this).attr("id"),
            async: true,
            global: false,
            success: function(xml) {
                /* todo */
            },
            beforeSend: function() {
                /* todo */
            },
            complete: function() {
                /* todo */
            }
        });
    });

    // hide block expand
    $("div.list>input.checked").each(function() {
            $("div.expand>span[id='"+$(this).parent().attr("view")+"']").append(" <strong class='list-selected'>"+$(this).next().text()+"</strong>");
            }
        );

    $("input[type=radio]").click(function () {
        $('input:radio[name='+$(this).attr("name")+']').removeClass("checked");
        $(this).toggleClass("checked");
        /*$('input:radio[name='+$(this).attr("name")+']').toggleClass("checked");*/
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:5001/update",
            dataType: "xml",
            data: "id=" + $(this).attr("id")+ "&val=" + $(this).val(),
            async: true,
            global: false,
            success: function(xml) {
                /* todo */
            },
            beforeSend: function() {
                /* todo */
            },
            complete: function() {
                /* todo */
            }
        });
        /* manage list */
        if ( $( this ).hasClass( "list" ) ) {
            $(this).parent().css("display","none");
            $("div.expand>span[id='"+$(this).parent().attr("view")+"']").toggleClass("expand");
            $("div.expand>span[id='"+$(this).parent().attr("view")+"']>strong").remove();
            $("div.expand>span[id='"+$(this).parent().attr("view")+"']").append(" <strong class='list-selected'>"+$(this).next().text()+"</strong>");
        };

    });

    $('input[type=text]').on('input', function() {
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:5001/update",
            dataType: "xml",
            data: "id=" + $(this).attr("id") + "&val=" + $(this).val(),
            async: true,
            global: false,
            success: function(xml) {
                /* todo */
            },
            beforeSend: function() {
                /* todo */
            },
            complete: function() {
                /* todo */
            }
        });
    });

    // hide block expand
    $("div.expand>span").each(function() {
                $("[view='"+$(this).attr("id")+"']").css("display","none");
            }
        );

    $("div.expand>span").click(function () {
        $(this).toggleClass("expand");
         if ( $( this ).hasClass( "expand" ) ) {
                $("[view='"+$(this).attr("id")+"']").css("display","inline-block");
            } else {
                $("[view='"+$(this).attr("id")+"']").css("display","none");
            }
    });

    $('input[type=range]').on('input change', function() {
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:5001/update",
            dataType: "xml",
            data: "id=" + $(this).attr("id") + "&val=" + $(this).val(),
            async: true,
            global: false,
            success: function(xml) {
                /* todo */
            },
            beforeSend: function() {
                /* todo */
            },
            complete: function() {
                /* todo */
            }
        });
    });

    $("button").click(function () {
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:5001/update",
            dataType: "xml",
            data: "id=" + $(this).attr("id"),
            async: true,
            global: false,
            success: function(xml) {
                /* todo */
            },
            beforeSend: function() {
                /* todo */
            },
            complete: function() {
                /* todo */
            }
        });
    });
});

Warning

il faut noter l’utilisation de jquery que vous pouvez télécharger en local si vous le souhaitez