2009年2月2日星期一

Re: [fw-mvc] CSS Styles when using Dojo in Zend

You are spot-on. Those classes are added as part of the templates in
order to allow this class-based styling to take precedence,
and while _most_ Dijit's work properly with the <containing
class="themename"> pattern, things that use popups (or are popups) do
not. (eg: Dialog attaches itself to <body> for easy of positioning, so
requires the class be there on a parent.)

It wouldn't be an issue if we were allowed to use selectors like:

.tundra.dijitDialog { ... }

but IE makes that an impossibility. For 100% theme coverage, the class
must be added to the <body> tag. Otherwise, it works fine in most cases
to use the wrapper pattern.

Hope this helps.

Regards,
Peter Higgins

Leonard Challis wrote:
> Matthew Weier O'Phinney-3 wrote:
>
>> -- Leonard Challis <gisterogue@gmail.com> wrote
>> (on Friday, 30 January 2009, 08:01 AM -0800):
>>
>>> I have been playing with Dojo Forms in Zend and wanted to clear something
>>> up
>>> regarding their CSS styling.
>>>
>>> I believe we have everything running correctly -- it's usually a
>>> Zend_Dojo_Form with several Zend_Dojo_Form_Element_* instances, all set
>>> up
>>> programatically through Zend, i.e. without writing any JavaScript
>>> ourselves.
>>>
>>> Selecting the tundra theme, each time the page was loaded it would
>>> display
>>> the form with very minimal styling (in fact, mostly just styles from
>>> dijit.css). After tailing a few logs and having a look around in the
>>> different CSS files I decided to try putting class="tundra" in the html
>>> tag.
>>> This rendered the form with the Tundra styles nicely and was far
>>> prettier. I
>>> thought it was a little bit 'hacky' though and thought there must be a
>>> way
>>> to achieve this in a nicer fashion. After a bit of searching I found this
>>> little snippet from
>>> http://www.nabble.com/Re%3A-Zend-dojo.data-usage%2C-i-dont-understand-p20915966.html
>>> http://www.nabble.com/Re%3A-Zend-dojo.data-usage%2C-i-dont-understand-p20915966.html
>>>
>>>
>>> * Set the "tundra" class on either the <body> element, or a div
>>> surrounding the form. Let's try the latter:
>>>
>>> <?
>>> $this->dojo()->requireModule('dojox.data.QueryReadStore')
>>> ->addStylesheetModule('dijit.themes.tundra');
>>> ?>
>>> <div class="tundra">
>>> <?= $this->form ?>
>>> </div>
>>>
>>>
>>> This would suggest I would have to manually add the reference to the
>>> tundra
>>> class anywhere I was using Dojo Forms.
>>>
>>> Is this the accepted/correct way of setting each element to inherit the
>>> related theme styles?
>>>
>> Yes. The rationale is that you may not want the Dijit theme to apply to
>> your entire page, but may only want it selectively around certain areas
>> of your page -- forms, for instance, or accordion containers.
>>
>>
>>> And would it be a bad idea to have this set automatically like the
>>> other classes and javascript codes is when using Dojo in Zend?
>>>
>> The problem with this is that ZF actually doesn't know what your markup
>> will look like. While Zend_Dojo_Form will create a form, and could
>> potentially wrap it in a <div> with the dijit theme class set, it's also
>> entirely possible that you'll be setting the dijit theme later in the
>> request lifecycle -- for instance, in the layout file. As such, it
>> becomes very difficult -- if not impossible -- to do this automatically
>> in a consistent way.
>>
>>
>>
>
> That's understandable - but what about automatically setting the class names
> to the theme name in a similar way to what is already done, i.e. dijitReset
> and dijitSliderBar?
>
>

> Unless I'm missing something, at the minute I can't see a wrapper working
> properly. For instance if I was to set the whole form's class to tundra for
> instance, or even wrap everything in a big div, certain elements, such as
> the date picker popup seem to be appended to the end of the page - therefore
> appearing outside the div and ultimately don't get styled. This also seems
> to happen when I set HtmlTag decorators with a class of tundra.
>
> I'm possibly not doing something correctly or missing something out, but at
> the minute the only way I can seem to get all of the styling working
> correctly is to put the theme name in the body class attribute.
>


--
Peter E Higgins
Dojo Project Lead : SitePen Support Lead
http://dojotoolkit.org : http://sitepen.com

没有评论: