On Sat, Mar 10, 2012 at 8:36 PM, Peter Bittner <[email protected]> wrote:
> I'm working a little bit on the pygit front-end and I was wondering
> how to separate the HTML stuff in a clean way from the python-style
> program code. I want to separate semantics (python code) from
> presentation (css, line breaks, etc) as strictly as possible. When
> having to write HTML tags I feel like not being able to do the
> separation cleanly; the use of tags is often something inbetween
> semantics/structure and presentation.
>
> Example: I want to add a clickable image (with an id that I can
> reference from an external style sheet for reasons of fine-grained
> positioning, padding and stuff), and a top-level header. There are
> some attributes I'd like to use, such as the title attribute in the
> anchor tag.
>
> info = '''<a href="../" title="Home"><img
> src="../img/pyjamas.64x64.png" id="logo"></a>
> <h1>Git Repository Viewer</h1>'''
> panel = VerticalPanel()
> panel.add(HTML(info))
> RootPanel().add(panel)
>
> Is it possible to make the above using Pyjamas classes or so? I've
> tried adding an image using ui.Image(), that works, and using the
> Image's onBrowserEvent() an anchor tag wouldn't even be necessary. But
> it looks like I can't add an id neither to Anchor nor to Image, can I?
the function you're looking for is in the base class Widget:
def setID(self, id):
"""Set the id attribute of the associated DOM element."""
DOM.setAttribute(self.getElement(), "id", id)
so.... yes you can.
> logo = Image('../img/pyjamas.64x64.png')
> # logo.setAttribute('id', 'logo')
logo.setID("logo")
> There are no setId() methods,
setID. wonderful naming, huh?
> and the setAttribute() method is also
> missing in both Image and Anchor.
that's because it's in the DOM module, not the Widget class.
> The '<h1>...</h1>' must probably stay like this, right? We don't have
> classes for each and every HTML tag, do we?
naah. because that's kinda a bit low-level and not really "widget-set-like".
> I'd have to write my own
> PageHeader (or so) class to capsulate the semantics...
something like that, yeah. i recommend to check in GWT first to see
if anyone made anything like that already. that's what happened with
Anchor (in between GWT 1.5 and 2.3)
l.
