Guide to creating flask macros

Introduction

Flask macro is a tool to build modular user interface on web pages.

What is included in the macro

  • html file with the macro definition
    • for the below macros  the first and obligatory parameter is the identifier macroId
    • all elements with the attribute id should construct it as elementId_{{macroId}}
  • styles in the homonymous css file:
    • all styles should correspond to parts of macro tags mutually and univocally, i.e. they shouldn’t beyond the limits of the macro
  • scripts in the homonymous js file with the class for manage of ui element:
    • constructor (the obligatory parameter is macro_id)
    • set|get|clear methods for the content
    • interface for subscribe to the onChange event

Testing

You have to create a test page where macros will be connected and tested through qunitjs  with selenium shell (by analogy with internal_tests):

  • testing methods of js-class
  • testing the presence of the element in the code page

Example

An example of a macro for a text field with the specified placeholder.

Files of macro

input.html 

{% macro input(macroId, placeholder) %} 
    <input type=text id="input_{{macroId}}" placeholder="{{placeholder}}" class="input_field"> 
{% endmacro %}
input.css


.input_field{
     margin-left: 5px;
}

 

input.js

function Input(macroId) {
    this.macroId = macroId;
    this.jqueryObject = $('input_'+macroId);
}

Input.prototype.setValue = function (value){
    // doing stuff with this.jqueryObject
    this.jqueryObject.val(value);   
}

Input.prototype.getValue = function (value){
    // doing stuff with this.jqueryObject
    return this.jqueryObject.val();
}

Input.prototype.clear = function (){
    // doing stuff with this.jqueryObject
    this.setValue('');
}

Connection

some_template.html 

{% extends "base.html" %}
{% block scripts %}
    <script src="{{ url_for('static', filename='js/input.js')}}" ></script>
{% endblock %}
{% block styles %}
    <link href="{{ url_for('static', filename='css/input.css') }}" rel="stylesheet">
{% endblock %}
{% block content %}

    {% from "input.html" import input with context %}

    {{ input('name', 'name') }}
    {{ input('email', 'email') }}

{% endblock %}
ShareShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on VKEmail this to someone