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.

About Me

My Photo
Names Kevin, hugely into UNIX technologies, not just Linux. I've dabbled with the demons, played with the Sun, and now with the Penguins.




Kevin Veroneau Consulting Services
Do you require the services of a Django contractor? Do you need both a website and hosting services? Perhaps I can help.

If you like what you read, please consider donating to help with hosting costs, and to fund future books to review.

Python Powered | © 2012-2014 Kevin Veroneau