Hi, Lex!
Thank you, this is really cool!
Seva
On 01/23/12 18:34, Lex Berezhny wrote:
> My app is pretty much all custom ComplexPanel and Widget
> implementations to create my own widgets.
>
> I've found that it's much easier and more productive to just create a
> custom widget or container for just every part of the UI than try and
> make the built in widgets do what I want (in some cases though I
> extend the built in widgets and add my own stuff).
>
> Here is the container widget that draws the forms:
>
> class Form(ComplexPanel, Model):
> def __init__(self):
> self.setElement(DOM.createDiv())
> ComplexPanel.__init__(self, StyleName="form")
> Model.__init__(self)
>
> def section(self, name=None):
> fieldset = DOM.createDiv()
> DOM.setAttribute(fieldset, "className", "fieldset")
> if name:
> legend = DOM.createDiv()
> DOM.setAttribute(legend, "className", "legend")
> DOM.setInnerText(legend, name)
> DOM.appendChild(fieldset, legend)
> DOM.appendChild(self.getElement(), fieldset)
> self.fieldset = fieldset
> self.br()
>
> def field(self, name, desc, widget):
> f = Field(desc, widget)
> self.row.add(f)
> self.addField(name, f)
>
> def button(self, url, cb):
> b = Image(url)
> b.setStyleName("button")
> b.addClickListener(cb)
> self.row.add(b)
> self.children.append(b)
>
> p = DOM.getParent(b.getElement())
> DOM.setAttribute(p, "className", "button-container")
>
> def br(self):
> self.row = HorizontalPanel()
> DOM.appendChild(self.fieldset, self.row.getElement())
>
>
>
>
> And here is an example of how I use it (you can see the result of the
> form below in the screenshot):
>
>
>
> class AddressForm(Form):
> def __init__(s, title, prefix, timeLabel, customerForm):
> Form.__init__(s)
> section, field, button, br = s.section, s.field, s.button, s.br
>
> s.prefix = prefix
> s.customerForm = customerForm
>
> section(title)
> field(prefix+"name", "Name", TextBox())
> button('images/home.png', s.insertHomeAddress)
> button('images/directory_lookup.png', s.lookupAddress)
> br()
> field(prefix+"address1", "House Number, Street", TextBox())
> br()
> field(prefix+"address2", "Apartment, Suite, etc.", TextBox())
> br()
> field(prefix+"city", "City", TextBox(Text="Chicago"))
> field(prefix+"state", "", StateList())
> field(prefix+"zipcode", "Zip Code", TextBox())
> br()
> field(prefix+"time", timeLabel, TextBox())
>
>
>
> 90% of the look that you see in the screenshot is just plain old CSS
> using the classes assigned with DOM.setAttribute(element, "className",
> "CLASS_NAME_HERE").
>
> See the attached CSS file for how it all comes together.
>
> - lex
>
> On Mon, Jan 23, 2012 at 9:11 AM, Vsevolod Fedorov
> <[email protected]> wrote:
>> Lex,
>>
>> Ok, ok, I agree with you :)
>> I will check for placeholder availability in my own code.
>>
>> > I've attached a screenshot of an app that has solutions for both of
>> > the things mentioned above: instructions underneath search box
>>
>> This is beautiful! How did you do this? Do you have a pointer to howto etc.?
>>
>> Seva
