integratingwithexistingprojects

Integrating with existing Projects

When deciding to use pyjamas it is very likely that you have an existing project that you want to convert into a regular pyjamas-application.

Either you design a pyjamas application that includes the existing project as templates via iframes or similar panels. This is probably the preferred way.

Or you design an application that is inserted into existing templating system as a "widget" of sorts. There are of course some drawbacks to this and one is that the user will be regularly hit with some massive javascripts (1-5mb javascript files isn't unusual for a pyjamas-application). The good thing is of course that the existing project doesn't need to be modified totally to support the "new" pyjamas application.

There are also some other issues with later option. One is that the pyjamas application in itself probably must be made aware of where it should exist. The easiest way is to create an "isle" in the existing web-page for the pyjamas app. Just create a regular DOM element like a DIV and give an appropriate id. Here is an example of a pyjamas code that is aware of its location in web-page.

    # A simple panel and a widget
    a = Button("TEST")
    p = VerticalPanel()
    p.add(a)
    eid = 'REPLACE'
    e = DOM.getElementById(eid)
    # Just check if the 'isle' of where the panel wants to reside
    # exists in the current web-page
    if e:
        r = RootPanel(eid)
        r.add(p)

If the element 'REPLACE' exists in the current HTML a VerticalPanel with a Button in it will be added.

The next problem with integrating a pyjamas-app is that when a pyjamas-app is built it expects its .js and .html files to exists in the same directory but when integrating pyjs-app into an existing project the location for certain parts is usually customized on the web-server. Thus the code that needs to be added to existing web-page must be modifed a bit from what the pyjsbuild-script generates.

    <!-- Pyjamas header -->
    <meta name="pygwt:module" content="/my/custom/location/pyjs-app"/>
    <script type="text/javascript" src="https://github.com/my/custom/location/pyjs-app/bootstrap.js"></script>

This tells pyjamas where to look for its .js- and .html-files.

When building the app it is recommended to use the --output option to tell the compiler where to place the generated content.