You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@ofbiz.apache.org by Hans Bakker <ma...@antwebsystems.com> on 2008/05/31 14:58:04 UTC
Re: svn commit: r661096
- /ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java
Thank you Adrian for the extensive explanation. I implemented it in the
sfa manager....
Regards,
Hans
On Fri, 2008-05-30 at 09:50 -0700, Adrian Crum wrote:
> Hans,
>
> I put an example of how to fix this problem in the Find Accounts screen.
> You just need to make the same change to the other screens. Check out
> the new CSS style: no-clear.
>
> There is something I would like to mention on this subject so that it is
> on record:
>
> The developer community decided over a year ago to work on creating
> simpler HTML markup. The phrase used at the time was "CSS Zen Garden
> Like." We agreed upon some HTML element compounds that would be used to
> construct screens, and styled those HTML compounds accordingly.
>
> The result was dramatic - just compare the markup of the most recent
> trunk with a revision around January 2007.
>
> Since that decision, nearly the entire UI has been built around those
> HTML compounds. The screen widgets were changed to emit those compounds.
>
> The end result from the user's perspective is a layout that "flows" -
> HTML elements move around when the user resizes their screen or default
> font.
>
> The downside to this approach is that sometimes things don't land where
> we want them to. If that happens, the correct course of action is to
> understand why and change how we lay out the screen. Sometimes a CSS
> style change is needed. Mucking around with the screen widgets to output
> different HTML compounds is a bad idea. In this case, changing the
> widget code fixed the SFA screens, but at the expense of breaking the
> layout in most of the other components.
>
> (There will always be problems associated with setting up multi-column
> screens. If OFBiz took the "pixel perfect" approach and put everything
> in fixed positions on the screen, it would be much easier.)
>
> Having said that, let's analyze the SFA screens you are struggling with...
>
> The problem is the horizontal menu in the right column is causing the
> HTML elements below it to drop down to the bottom of the screen. Let's
> figure out why.
>
> Screen widget menus are unordered lists ( <ul> elements ) - which is a
> common practice. An unordered list is vertical by default, but we can
> make it horizontal by using some CSS magic - we float the line items in
> the list. The floated line items have to be "cleared" or else other HTML
> elements will "spill into" them. That is the purpose of the <br
> class="clear"/> element. Its effect is to block any other HTML elements
> from appearing to the right or left of the menu - which keeps them from
> "spilling into" it.
>
> This method works great if there are no columns. Inside a column, this
> method prevents HTML elements from appearing to the left or right of the
> unordered list - which (in the HTML markup) has appeared AFTER the left
> column. Oops, all remaining HTML elements will now be rendered below the
> left column. That's not what we wanted.
>
> Removing the <br class="clear"/> is a tempting fix, but as I said, all
> other menus will now have HTML elements spilling into them. The correct
> approach (the one that I mentioned in an earlier email) is to disable
> the clearing effect on this menu only:
>
> <style type="text/css">
> .no-clear .clear {
> clear: none;
> }
> </style>
>
> <div class="no-clear">
> <!-- menu widget code here -->
> ...
> </div>
>
> Inline styles aren't possible using screen widgets, so I put the
> no-clear CSS class in the maincss.css file. (On a side note, I despise
> having to create CSS classes to fix things like this, but sometimes it
> has to be done.) Now the no-clear style can be added to the menu
> container style:
>
> <menu name="AccountSubTabBar" menu-container-style="button-bar
> button-style-2 no-clear" default-selected-style="selected">
>
> Tah-dah! Problem solved without changing the widget code.
>
> -Adrian
>
>
> Hans Bakker wrote:
> > hi adrian,
> >
> > with this change you reverted my earlier change.
> >
> > The reason i put this change in is to be able to use the menu in a
> > column. can you please have a look at the sfa application? there the
> > menu causes the right form to be under the left hand form....
> >
> > can you have a look at that?
> >
> > Regards,
> > Hans
> >
> >
> >
> > On Wed, 2008-05-28 at 21:29 +0000, adrianc@apache.org wrote:
> >> Author: adrianc
> >> Date: Wed May 28 14:29:05 2008
> >> New Revision: 661096
> >>
> >> URL: http://svn.apache.org/viewvc?rev=661096&view=rev
> >> Log:
> >> Oops, missed one file in last commit.
> >>
> >> Modified:
> >> ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java
> >>
> >> Modified: ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java
> >> URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java?rev=661096&r1=661095&r2=661096&view=diff
> >> ==============================================================================
> >> --- ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java (original)
> >> +++ ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java Wed May 28 14:29:05 2008
> >> @@ -259,7 +259,7 @@
> >> //String menuContainerStyle = modelMenu.getMenuContainerStyle(context);
> >> buffer.append(" </ul>");
> >> appendWhitespace(buffer);
> >> - buffer.append(" <br/>");
> >> + buffer.append(" <br class=\"clear\"/>");
> >> appendWhitespace(buffer);
> >> buffer.append("</div>");
> >> appendWhitespace(buffer);
> >>
> >>
> >>
>
--
AntWebsystems.com: Quality OFBiz services for competitive rates.....
Re: svn commit: r661096- /ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java
Posted by David E Jones <jo...@hotwaxmedia.com>.
I'll third the appreciation Adrian, especially for being so thorough
and keeping an eye on this.
-David
On May 31, 2008, at 10:13 AM, Jacques Le Roux wrote:
> Yes, thanks for the clear explanation Adrian. I think I will put
> something in the FAQ page (about clear and no-clear usage). This is
> really not obvious...
>
> Jacques
>
> From: "Hans Bakker" <ma...@antwebsystems.com>
>> Thank you Adrian for the extensive explanation. I implemented it in
>> the
>> sfa manager....
>>
>> Regards,
>> Hans
>>
>>
>> On Fri, 2008-05-30 at 09:50 -0700, Adrian Crum wrote:
>>> Hans,
>>>
>>> I put an example of how to fix this problem in the Find Accounts
>>> screen.
>>> You just need to make the same change to the other screens. Check
>>> out
>>> the new CSS style: no-clear.
>>>
>>> There is something I would like to mention on this subject so that
>>> it is
>>> on record:
>>>
>>> The developer community decided over a year ago to work on creating
>>> simpler HTML markup. The phrase used at the time was "CSS Zen Garden
>>> Like." We agreed upon some HTML element compounds that would be
>>> used to
>>> construct screens, and styled those HTML compounds accordingly.
>>>
>>> The result was dramatic - just compare the markup of the most recent
>>> trunk with a revision around January 2007.
>>>
>>> Since that decision, nearly the entire UI has been built around
>>> those
>>> HTML compounds. The screen widgets were changed to emit those
>>> compounds.
>>>
>>> The end result from the user's perspective is a layout that
>>> "flows" -
>>> HTML elements move around when the user resizes their screen or
>>> default
>>> font.
>>>
>>> The downside to this approach is that sometimes things don't land
>>> where
>>> we want them to. If that happens, the correct course of action is to
>>> understand why and change how we lay out the screen. Sometimes a CSS
>>> style change is needed. Mucking around with the screen widgets to
>>> output
>>> different HTML compounds is a bad idea. In this case, changing the
>>> widget code fixed the SFA screens, but at the expense of breaking
>>> the
>>> layout in most of the other components.
>>>
>>> (There will always be problems associated with setting up multi-
>>> column
>>> screens. If OFBiz took the "pixel perfect" approach and put
>>> everything
>>> in fixed positions on the screen, it would be much easier.)
>>>
>>> Having said that, let's analyze the SFA screens you are struggling
>>> with...
>>>
>>> The problem is the horizontal menu in the right column is causing
>>> the
>>> HTML elements below it to drop down to the bottom of the screen.
>>> Let's
>>> figure out why.
>>>
>>> Screen widget menus are unordered lists ( <ul> elements ) - which
>>> is a
>>> common practice. An unordered list is vertical by default, but we
>>> can
>>> make it horizontal by using some CSS magic - we float the line
>>> items in
>>> the list. The floated line items have to be "cleared" or else
>>> other HTML
>>> elements will "spill into" them. That is the purpose of the <br
>>> class="clear"/> element. Its effect is to block any other HTML
>>> elements
>>> from appearing to the right or left of the menu - which keeps them
>>> from
>>> "spilling into" it.
>>>
>>> This method works great if there are no columns. Inside a column,
>>> this
>>> method prevents HTML elements from appearing to the left or right
>>> of the
>>> unordered list - which (in the HTML markup) has appeared AFTER the
>>> left
>>> column. Oops, all remaining HTML elements will now be rendered
>>> below the
>>> left column. That's not what we wanted.
>>>
>>> Removing the <br class="clear"/> is a tempting fix, but as I said,
>>> all
>>> other menus will now have HTML elements spilling into them. The
>>> correct
>>> approach (the one that I mentioned in an earlier email) is to
>>> disable
>>> the clearing effect on this menu only:
>>>
>>> <style type="text/css">
>>> .no-clear .clear {
>>> clear: none;
>>> }
>>> </style>
>>>
>>> <div class="no-clear">
>>> <!-- menu widget code here -->
>>> ...
>>> </div>
>>>
>>> Inline styles aren't possible using screen widgets, so I put the
>>> no-clear CSS class in the maincss.css file. (On a side note, I
>>> despise
>>> having to create CSS classes to fix things like this, but
>>> sometimes it
>>> has to be done.) Now the no-clear style can be added to the menu
>>> container style:
>>>
>>> <menu name="AccountSubTabBar" menu-container-style="button-bar
>>> button-style-2 no-clear" default-selected-style="selected">
>>>
>>> Tah-dah! Problem solved without changing the widget code.
>>>
>>> -Adrian
>>>
>>>
>>> Hans Bakker wrote:
>>> > hi adrian,
>>> >
>>> > with this change you reverted my earlier change.
>>> >
>>> > The reason i put this change in is to be able to use the menu in a
>>> > column. can you please have a look at the sfa application? there
>>> the
>>> > menu causes the right form to be under the left hand form....
>>> >
>>> > can you have a look at that?
>>> >
>>> > Regards,
>>> > Hans
>>> >
>>> >
>>> >
>>> > On Wed, 2008-05-28 at 21:29 +0000, adrianc@apache.org wrote:
>>> >> Author: adrianc
>>> >> Date: Wed May 28 14:29:05 2008
>>> >> New Revision: 661096
>>> >>
>>> >> URL: http://svn.apache.org/viewvc?rev=661096&view=rev
>>> >> Log:
>>> >> Oops, missed one file in last commit.
>>> >>
>>> >> Modified:
>>> >> ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/
>>> HtmlMenuRenderer.java
>>> >>
>>> >> Modified: ofbiz/trunk/framework/widget/src/org/ofbiz/widget/
>>> html/HtmlMenuRenderer.java
>>> >> URL:
>>> >> http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java?rev=661096&r1=661095&r2=661096&view=diff
>>> >>
>>> =
>>> =
>>> =
>>> =
>>> =
>>> =
>>> =
>>> =
>>> =
>>> =
>>> ====================================================================
>>> >> --- ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/
>>> HtmlMenuRenderer.java (original)
>>> >> +++ ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/
>>> HtmlMenuRenderer.java Wed May 28 14:29:05 2008
>>> >> @@ -259,7 +259,7 @@
>>> >> //String menuContainerStyle =
>>> modelMenu.getMenuContainerStyle(context);
>>> >> buffer.append(" </ul>");
>>> >> appendWhitespace(buffer);
>>> >> - buffer.append(" <br/>");
>>> >> + buffer.append(" <br class=\"clear\"/>");
>>> >> appendWhitespace(buffer);
>>> >> buffer.append("</div>");
>>> >> appendWhitespace(buffer);
>>> >>
>>> >>
>>> >>
>>>
>> --
>> AntWebsystems.com: Quality OFBiz services for competitive rates.....
>>
>
Re: svn commit: r661096- /ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java
Posted by Jacques Le Roux <ja...@les7arts.com>.
Yes, thanks for the clear explanation Adrian. I think I will put something in the FAQ page (about clear and no-clear usage). This is
really not obvious...
Jacques
From: "Hans Bakker" <ma...@antwebsystems.com>
> Thank you Adrian for the extensive explanation. I implemented it in the
> sfa manager....
>
> Regards,
> Hans
>
>
> On Fri, 2008-05-30 at 09:50 -0700, Adrian Crum wrote:
>> Hans,
>>
>> I put an example of how to fix this problem in the Find Accounts screen.
>> You just need to make the same change to the other screens. Check out
>> the new CSS style: no-clear.
>>
>> There is something I would like to mention on this subject so that it is
>> on record:
>>
>> The developer community decided over a year ago to work on creating
>> simpler HTML markup. The phrase used at the time was "CSS Zen Garden
>> Like." We agreed upon some HTML element compounds that would be used to
>> construct screens, and styled those HTML compounds accordingly.
>>
>> The result was dramatic - just compare the markup of the most recent
>> trunk with a revision around January 2007.
>>
>> Since that decision, nearly the entire UI has been built around those
>> HTML compounds. The screen widgets were changed to emit those compounds.
>>
>> The end result from the user's perspective is a layout that "flows" -
>> HTML elements move around when the user resizes their screen or default
>> font.
>>
>> The downside to this approach is that sometimes things don't land where
>> we want them to. If that happens, the correct course of action is to
>> understand why and change how we lay out the screen. Sometimes a CSS
>> style change is needed. Mucking around with the screen widgets to output
>> different HTML compounds is a bad idea. In this case, changing the
>> widget code fixed the SFA screens, but at the expense of breaking the
>> layout in most of the other components.
>>
>> (There will always be problems associated with setting up multi-column
>> screens. If OFBiz took the "pixel perfect" approach and put everything
>> in fixed positions on the screen, it would be much easier.)
>>
>> Having said that, let's analyze the SFA screens you are struggling with...
>>
>> The problem is the horizontal menu in the right column is causing the
>> HTML elements below it to drop down to the bottom of the screen. Let's
>> figure out why.
>>
>> Screen widget menus are unordered lists ( <ul> elements ) - which is a
>> common practice. An unordered list is vertical by default, but we can
>> make it horizontal by using some CSS magic - we float the line items in
>> the list. The floated line items have to be "cleared" or else other HTML
>> elements will "spill into" them. That is the purpose of the <br
>> class="clear"/> element. Its effect is to block any other HTML elements
>> from appearing to the right or left of the menu - which keeps them from
>> "spilling into" it.
>>
>> This method works great if there are no columns. Inside a column, this
>> method prevents HTML elements from appearing to the left or right of the
>> unordered list - which (in the HTML markup) has appeared AFTER the left
>> column. Oops, all remaining HTML elements will now be rendered below the
>> left column. That's not what we wanted.
>>
>> Removing the <br class="clear"/> is a tempting fix, but as I said, all
>> other menus will now have HTML elements spilling into them. The correct
>> approach (the one that I mentioned in an earlier email) is to disable
>> the clearing effect on this menu only:
>>
>> <style type="text/css">
>> .no-clear .clear {
>> clear: none;
>> }
>> </style>
>>
>> <div class="no-clear">
>> <!-- menu widget code here -->
>> ...
>> </div>
>>
>> Inline styles aren't possible using screen widgets, so I put the
>> no-clear CSS class in the maincss.css file. (On a side note, I despise
>> having to create CSS classes to fix things like this, but sometimes it
>> has to be done.) Now the no-clear style can be added to the menu
>> container style:
>>
>> <menu name="AccountSubTabBar" menu-container-style="button-bar
>> button-style-2 no-clear" default-selected-style="selected">
>>
>> Tah-dah! Problem solved without changing the widget code.
>>
>> -Adrian
>>
>>
>> Hans Bakker wrote:
>> > hi adrian,
>> >
>> > with this change you reverted my earlier change.
>> >
>> > The reason i put this change in is to be able to use the menu in a
>> > column. can you please have a look at the sfa application? there the
>> > menu causes the right form to be under the left hand form....
>> >
>> > can you have a look at that?
>> >
>> > Regards,
>> > Hans
>> >
>> >
>> >
>> > On Wed, 2008-05-28 at 21:29 +0000, adrianc@apache.org wrote:
>> >> Author: adrianc
>> >> Date: Wed May 28 14:29:05 2008
>> >> New Revision: 661096
>> >>
>> >> URL: http://svn.apache.org/viewvc?rev=661096&view=rev
>> >> Log:
>> >> Oops, missed one file in last commit.
>> >>
>> >> Modified:
>> >> ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java
>> >>
>> >> Modified: ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java
>> >> URL:
>> >> http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java?rev=661096&r1=661095&r2=661096&view=diff
>> >> ==============================================================================
>> >> --- ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java (original)
>> >> +++ ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java Wed May 28 14:29:05 2008
>> >> @@ -259,7 +259,7 @@
>> >> //String menuContainerStyle = modelMenu.getMenuContainerStyle(context);
>> >> buffer.append(" </ul>");
>> >> appendWhitespace(buffer);
>> >> - buffer.append(" <br/>");
>> >> + buffer.append(" <br class=\"clear\"/>");
>> >> appendWhitespace(buffer);
>> >> buffer.append("</div>");
>> >> appendWhitespace(buffer);
>> >>
>> >>
>> >>
>>
> --
> AntWebsystems.com: Quality OFBiz services for competitive rates.....
>