Tornado reusable components using UI modules

Tornado templates use UI modules to improve the DRYness of the code and make it reusable across different templates in the project.

UI modules are like special function calls to render components of your page, and they can come packaged with their own CSS and JavaScript.

Consider the scenario where your application sends the emails to users for the various types of events like user signup, on forgot the password, on password change, for special discounts or coupons available for the user.

In such cases, there are lots of HTML components and styles that are used commonly like your application’s header, footer, and action buttons.

If the UI modules are not used, then we have to copy paste the same code for the header,  footer and much more in all the templates created to send the emails.

To avoid this problem, one of the solutions provided by Tornado is Python module for your UI modules.

Python module extends tornado.web.UIModule and can accept the arguments and then renders the defined HTML template by passing the arguments to that template.

Here is the example to create the reusable call-to-action button UI module with some inline CSS

Register the `ui_modules` in tornado settings:

settings = {
    "ui_modules": uimodules,
}

application = tornado.web.Application([
    (r"/",<Your Handlers>),
], **settings)

 

Create the class ActionButton which extends tornado.web.UIModule :

class ActionButton(tornado.web.UIModule):

    def render(self, title, url, inline_style, btn_type):

        return self.render_string(
            "action-button.html", 
             btn_label=title,
           click_url=url,
           inline_style=inline_style,
           btn_type=btn_type)


Create the template action-button.html

<html>
     </body>
         <a
          href="{{ click_url }}" class="{{ btn_type}}" role="button" style="{{ inline_style}}">
            {{ btn_label }}
        </a>
     </body>
 </html>


Now call the UI-module from the email templates:

“Example of the signup template”
<html>
    <head>......</head>
   <body>
           <h2>
              Hello, welcome to my app, please click below button to    continue
         </h2>
        <!-- Now call our reusable module for the action button -->        
        {% module ActionButton(
                             title="Signup ->",
                            url = "<your url to redirect>",
                           inline_style="max-width: 50px"
                         btn_type="btn btn-success"
                            ) 
     %}
   </body>
</html>

The same module can be used in all the templates for including the action button by dynamically providing the label, url and styles which will remove the redundant code from all the templates.

It’s as simple as this, hope you find it useful.

About CauseCode: We are a technology company specializing in Healthtech related Web and Mobile application development. We collaborate with passionate companies looking to change health and wellness tech for good. If you are a startup, enterprise or generally interested in digital health, we would love to hear from you! Let's connect at bootstrap@causecode.com

Leave a Reply

Your email address will not be published. Required fields are marked *

STAY UPDATED!

Do you want to get articles like these in your inbox?

Email *

Interested groups *
Healthtech
Business
Technical articles

Archives