Thursday, April 4th, 2013

Using Pyjamas with Bootstrap

For a just for fun experiment, I attempted to re-create the standard Bootstrap, from Twitter theme using Pyjamas. It turned out pretty good too. Here is the source code to compile to JavaScript:

from pyjamas.ui.RootPanel import RootPanel
from pyjamas.ui.Button import Button
from pyjamas import DOM
from pyjamas.ui.Hyperlink import Hyperlink
from pyjamas.ui.SimplePanel import SimplePanel
from pyjamas.ui.ComplexPanel import ComplexPanel
from pyjamas.ui.FlexTable import FlexTable

class CustomPanel(ComplexPanel):
    def __init__(self, Element=None, **kwargs):
        if Element is None:
            Element = DOM.createDiv()
        self.setElement(Element)
        ComplexPanel.__init__(self, **kwargs)

class NavItems(CustomPanel):
    def __init__(self, nav_list=None, **kwargs):
        CustomPanel.__init__(self, Element=DOM.createElement("ul"))
        self.addStyleName("nav")
        self.items = []
        if nav_list == None:
            nav_list = {'Home': self.onClick, 'About': self.onClick, 'Contact': self.onClick}
        for item in nav_list:
            tmp = Hyperlink(item, Element=DOM.createElement("li"))
            tmp.addClickListener(nav_list[item])
            self.items.append(tmp)
        for item in self.items:
            self.add(item)
    def clearActive(self):
        for item in self.items:
            item.removeStyleName("active")
    def onClick(self, sender):
        self.clearActive()
        sender.addStyleName("active")
    def setActive(self, item_id):
        self.clearActive()
        self.items[item_id].addStyleName("active")

class NavBar(SimplePanel):
    def __init__(self, brand="Project name", nav=None, **kwargs):
        SimplePanel.__init__(self, **kwargs)
        self.addStyleName("navbar")
        self.addStyleName("navbar-inverse")
        self.addStyleName("navbar-fixed-top")
        self.setWidget(SimplePanel())
        self.getWidget().addStyleName("navbar-inner")
        self.container = CustomPanel()
        self.getWidget().setWidget(self.container)
        self.container.addStyleName("container")
        self.brand = Hyperlink(brand)
        self.brand.setElement(self.brand.anchorElem)
        self.brand.addStyleName("brand")
        self.container.add(self.brand)
        if nav == None:
            self.nav = NavItems()
        elif isinstance(nav, dict):
            self.nav = NavItems(nav)
        self.container.add(self.nav)
        self.nav.setActive(0)
    def setBrand(self, text):
        self.brand.setText(text)
    def setActive(self, item):
        self.nav.setActive(item)

navbar = NavBar()
state = 0

def alter_brand(sender):
    global state
    navbar.setActive(1)
    if state == 0:
        navbar.removeStyleName("navbar-inverse")
        state = 1
    else:
        navbar.addStyleName("navbar-inverse")
        state = 0

btn = Button("Hello Bootstrap!", alter_brand)
btn.setStyleName("btn btn-primary")

container = CustomPanel()
container.addStyleName("container")
container.add(btn)

RootPanel().add(navbar)
RootPanel().add(container)

tbl = FlexTable()
tbl.addStyleName("table")
tbl.setText(0, 0, "Hello World!")
tbl.setText(1,0,"Python rocks")
tbl.setText(0,1,"Coding in my Pyjamas is awesome!")
tbl.setText(1,1,"Bootstrap works with Pyjamas!")
tbl.addStyleName("table-striped")

container.add(tbl)

This code requires the latest version of Pyjamas, version 0.8.1a as of this writing. It won't work in 0.8, which I'm curious on why. You can see a full working demo here.

Python Powered | © 2012-2014 Kevin Veroneau