How to add a splitter to adjust the left column width by dragging it?

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|

How to add a splitter to adjust the left column width by dragging it?

Bruno Busco
I was looking for a way to implement a splitter that would allow the
user to adjust the width of the left column in multicolumn screens
(i.e. in the catalog application).
In OFBiz there are already several js library.
Is somebody aware of a simple method to do this?
I have briefly looked into the myportal.js and seems that primitives
like Draggable and Droppable are already there.

My idea was that when the user starts dragging a vertical separation
bar between the left-column and the main-content (the splitter) the
widths are updated and then, when the user drops them a
ajaxSetUserPreference is performed to store the left-column width so
that it is mantained whenever the screen gets updated.

Any help?
Sascha? ;-)


Thank you,
-Bruno
Reply | Threaded
Open this post in threaded view
|

Re: How to add a splitter to adjust the left column width by dragging it?

Adrian Crum
Something similar that would be nice to have is a generic collapsible
column implementation - where clicking on a link or control reduces the
column to a small icon. Clicking on the icon expands the column back.
This could be used for vertical menus.

Maybe it is time to consider a column widget - where functionality can
be built in and configured with attributes.

-Adrian

Bruno Busco wrote:

> I was looking for a way to implement a splitter that would allow the
> user to adjust the width of the left column in multicolumn screens
> (i.e. in the catalog application).
> In OFBiz there are already several js library.
> Is somebody aware of a simple method to do this?
> I have briefly looked into the myportal.js and seems that primitives
> like Draggable and Droppable are already there.
>
> My idea was that when the user starts dragging a vertical separation
> bar between the left-column and the main-content (the splitter) the
> widths are updated and then, when the user drops them a
> ajaxSetUserPreference is performed to store the left-column width so
> that it is mantained whenever the screen gets updated.
>
> Any help?
> Sascha? ;-)
>
>
> Thank you,
> -Bruno
>
Reply | Threaded
Open this post in threaded view
|

Re: How to add a splitter to adjust the left column width by dragging it?

Bruno Busco
Adrian, what you say reminds me the very first way I thought to
achieve what I described (but I stopped and forgot!! :-( )

I thought that a collapsible screenlet (we already have) could have
another attribute to be collapsed horizzontaly or vertically. One of
the two is what we have right know. In the other one the
screenlet-title bar should be rendered vertically on a side of the
screenlet and could be used to collapse.

The left-column could then be completely wrapped in the screenlet...et voilà.
We have also the screenlet collapsed status storing feature in place now!

-Bruno

2009/12/22 Adrian Crum <[hidden email]>:

> Something similar that would be nice to have is a generic collapsible column
> implementation - where clicking on a link or control reduces the column to a
> small icon. Clicking on the icon expands the column back. This could be used
> for vertical menus.
>
> Maybe it is time to consider a column widget - where functionality can be
> built in and configured with attributes.
>
> -Adrian
>
> Bruno Busco wrote:
>>
>> I was looking for a way to implement a splitter that would allow the
>> user to adjust the width of the left column in multicolumn screens
>> (i.e. in the catalog application).
>> In OFBiz there are already several js library.
>> Is somebody aware of a simple method to do this?
>> I have briefly looked into the myportal.js and seems that primitives
>> like Draggable and Droppable are already there.
>>
>> My idea was that when the user starts dragging a vertical separation
>> bar between the left-column and the main-content (the splitter) the
>> widths are updated and then, when the user drops them a
>> ajaxSetUserPreference is performed to store the left-column width so
>> that it is mantained whenever the screen gets updated.
>>
>> Any help?
>> Sascha? ;-)
>>
>>
>> Thank you,
>> -Bruno
>>
>
Reply | Threaded
Open this post in threaded view
|

Re: How to add a splitter to adjust the left column width by dragging it?

Bruno Busco
Unfortunately, one of the problem I had was that, to collapse
horizzontally, is not so simple because adiacent divs should be also
adjusted.
For example, to use this to collapse the left-column, even the
main-content div width (or margin-left) should be changed.
This was one of the reason I stopped this way of doing it. :-(

-Bruno

2009/12/22 Bruno Busco <[hidden email]>:

> Adrian, what you say reminds me the very first way I thought to
> achieve what I described (but I stopped and forgot!! :-( )
>
> I thought that a collapsible screenlet (we already have) could have
> another attribute to be collapsed horizzontaly or vertically. One of
> the two is what we have right know. In the other one the
> screenlet-title bar should be rendered vertically on a side of the
> screenlet and could be used to collapse.
>
> The left-column could then be completely wrapped in the screenlet...et voilà.
> We have also the screenlet collapsed status storing feature in place now!
>
> -Bruno
>
> 2009/12/22 Adrian Crum <[hidden email]>:
>> Something similar that would be nice to have is a generic collapsible column
>> implementation - where clicking on a link or control reduces the column to a
>> small icon. Clicking on the icon expands the column back. This could be used
>> for vertical menus.
>>
>> Maybe it is time to consider a column widget - where functionality can be
>> built in and configured with attributes.
>>
>> -Adrian
>>
>> Bruno Busco wrote:
>>>
>>> I was looking for a way to implement a splitter that would allow the
>>> user to adjust the width of the left column in multicolumn screens
>>> (i.e. in the catalog application).
>>> In OFBiz there are already several js library.
>>> Is somebody aware of a simple method to do this?
>>> I have briefly looked into the myportal.js and seems that primitives
>>> like Draggable and Droppable are already there.
>>>
>>> My idea was that when the user starts dragging a vertical separation
>>> bar between the left-column and the main-content (the splitter) the
>>> widths are updated and then, when the user drops them a
>>> ajaxSetUserPreference is performed to store the left-column width so
>>> that it is mantained whenever the screen gets updated.
>>>
>>> Any help?
>>> Sascha? ;-)
>>>
>>>
>>> Thank you,
>>> -Bruno
>>>
>>
>
Reply | Threaded
Open this post in threaded view
|

Re: How to add a splitter to adjust the left column width by dragging it?

Adrian Crum
That's why we need column widgets - so the other columns will know to
resize themselves.

-Adrian

Bruno Busco wrote:

> Unfortunately, one of the problem I had was that, to collapse
> horizzontally, is not so simple because adiacent divs should be also
> adjusted.
> For example, to use this to collapse the left-column, even the
> main-content div width (or margin-left) should be changed.
> This was one of the reason I stopped this way of doing it. :-(
>
> -Bruno
>
> 2009/12/22 Bruno Busco <[hidden email]>:
>> Adrian, what you say reminds me the very first way I thought to
>> achieve what I described (but I stopped and forgot!! :-( )
>>
>> I thought that a collapsible screenlet (we already have) could have
>> another attribute to be collapsed horizzontaly or vertically. One of
>> the two is what we have right know. In the other one the
>> screenlet-title bar should be rendered vertically on a side of the
>> screenlet and could be used to collapse.
>>
>> The left-column could then be completely wrapped in the screenlet...et voilà.
>> We have also the screenlet collapsed status storing feature in place now!
>>
>> -Bruno
>>
>> 2009/12/22 Adrian Crum <[hidden email]>:
>>> Something similar that would be nice to have is a generic collapsible column
>>> implementation - where clicking on a link or control reduces the column to a
>>> small icon. Clicking on the icon expands the column back. This could be used
>>> for vertical menus.
>>>
>>> Maybe it is time to consider a column widget - where functionality can be
>>> built in and configured with attributes.
>>>
>>> -Adrian
>>>
>>> Bruno Busco wrote:
>>>> I was looking for a way to implement a splitter that would allow the
>>>> user to adjust the width of the left column in multicolumn screens
>>>> (i.e. in the catalog application).
>>>> In OFBiz there are already several js library.
>>>> Is somebody aware of a simple method to do this?
>>>> I have briefly looked into the myportal.js and seems that primitives
>>>> like Draggable and Droppable are already there.
>>>>
>>>> My idea was that when the user starts dragging a vertical separation
>>>> bar between the left-column and the main-content (the splitter) the
>>>> widths are updated and then, when the user drops them a
>>>> ajaxSetUserPreference is performed to store the left-column width so
>>>> that it is mantained whenever the screen gets updated.
>>>>
>>>> Any help?
>>>> Sascha? ;-)
>>>>
>>>>
>>>> Thank you,
>>>> -Bruno
>>>>
>
Reply | Threaded
Open this post in threaded view
|

Re: How to add a splitter to adjust the left column width by dragging it?

Bruno Busco
I would like to help on the column widget implementation.
Could you start with some writing about it so that I can get a clear idea?

-Bruno

2009/12/22 Adrian Crum <[hidden email]>:

> That's why we need column widgets - so the other columns will know to resize
> themselves.
>
> -Adrian
>
> Bruno Busco wrote:
>>
>> Unfortunately, one of the problem I had was that, to collapse
>> horizzontally, is not so simple because adiacent divs should be also
>> adjusted.
>> For example, to use this to collapse the left-column, even the
>> main-content div width (or margin-left) should be changed.
>> This was one of the reason I stopped this way of doing it. :-(
>>
>> -Bruno
>>
>> 2009/12/22 Bruno Busco <[hidden email]>:
>>>
>>> Adrian, what you say reminds me the very first way I thought to
>>> achieve what I described (but I stopped and forgot!! :-( )
>>>
>>> I thought that a collapsible screenlet (we already have) could have
>>> another attribute to be collapsed horizzontaly or vertically. One of
>>> the two is what we have right know. In the other one the
>>> screenlet-title bar should be rendered vertically on a side of the
>>> screenlet and could be used to collapse.
>>>
>>> The left-column could then be completely wrapped in the screenlet...et
>>> voilà.
>>> We have also the screenlet collapsed status storing feature in place now!
>>>
>>> -Bruno
>>>
>>> 2009/12/22 Adrian Crum <[hidden email]>:
>>>>
>>>> Something similar that would be nice to have is a generic collapsible
>>>> column
>>>> implementation - where clicking on a link or control reduces the column
>>>> to a
>>>> small icon. Clicking on the icon expands the column back. This could be
>>>> used
>>>> for vertical menus.
>>>>
>>>> Maybe it is time to consider a column widget - where functionality can
>>>> be
>>>> built in and configured with attributes.
>>>>
>>>> -Adrian
>>>>
>>>> Bruno Busco wrote:
>>>>>
>>>>> I was looking for a way to implement a splitter that would allow the
>>>>> user to adjust the width of the left column in multicolumn screens
>>>>> (i.e. in the catalog application).
>>>>> In OFBiz there are already several js library.
>>>>> Is somebody aware of a simple method to do this?
>>>>> I have briefly looked into the myportal.js and seems that primitives
>>>>> like Draggable and Droppable are already there.
>>>>>
>>>>> My idea was that when the user starts dragging a vertical separation
>>>>> bar between the left-column and the main-content (the splitter) the
>>>>> widths are updated and then, when the user drops them a
>>>>> ajaxSetUserPreference is performed to store the left-column width so
>>>>> that it is mantained whenever the screen gets updated.
>>>>>
>>>>> Any help?
>>>>> Sascha? ;-)
>>>>>
>>>>>
>>>>> Thank you,
>>>>> -Bruno
>>>>>
>>
>
Reply | Threaded
Open this post in threaded view
|

Discussion: Column Widgets (was: How to add a splitter to adjust the left column width by dragging it?)

Adrian Crum
The current code to render multiple columns seems to be more complicated
than it should be. As this thread has discussed, adding features to
multiple-column layout can be problematic.

So, the suggestion is to introduce column widgets. I'll start off with
some basic ideas, and everyone is welcome to comment and improve on them.

 From the screen widget XML perspective, it could look like this:

<column-container>
   <column name="first-column">
     <!-- column contents -->
   </column>
   <column name="second-column">
     <!-- column contents -->
   </column>
   ...
</column-container>

The column elements can contain additional column-container elements.

The column element can have an attribute to specify its width as a
percentage of the column-container width. Pixel widths should be avoided
since the screen widgets are supposed to be rendering device agnostic.

The column-container and column elements will support the common screen
widget attributes like name, style, id, etc.

The column-container could support a type attribute that controls how
the contained columns behave. For example, type="splitter" will render
the contained columns as a splitter window.

 From the widget model perspective, the column-container manages
resizing columns when one of them is collapsed or its width changes.
Column size information needs to be kept in the rendering context. The
information would start off with some default values that are overridden
by user preferences.

What do you think?

-Adrian


Bruno Busco wrote:

> I would like to help on the column widget implementation.
> Could you start with some writing about it so that I can get a clear idea?
>
> -Bruno
>
> 2009/12/22 Adrian Crum <[hidden email]>:
>> That's why we need column widgets - so the other columns will know to resize
>> themselves.
>>
>> -Adrian
>>
>> Bruno Busco wrote:
>>> Unfortunately, one of the problem I had was that, to collapse
>>> horizzontally, is not so simple because adiacent divs should be also
>>> adjusted.
>>> For example, to use this to collapse the left-column, even the
>>> main-content div width (or margin-left) should be changed.
>>> This was one of the reason I stopped this way of doing it. :-(
>>>
>>> -Bruno
>>>
>>> 2009/12/22 Bruno Busco <[hidden email]>:
>>>> Adrian, what you say reminds me the very first way I thought to
>>>> achieve what I described (but I stopped and forgot!! :-( )
>>>>
>>>> I thought that a collapsible screenlet (we already have) could have
>>>> another attribute to be collapsed horizzontaly or vertically. One of
>>>> the two is what we have right know. In the other one the
>>>> screenlet-title bar should be rendered vertically on a side of the
>>>> screenlet and could be used to collapse.
>>>>
>>>> The left-column could then be completely wrapped in the screenlet...et
>>>> voilà.
>>>> We have also the screenlet collapsed status storing feature in place now!
>>>>
>>>> -Bruno
>>>>
>>>> 2009/12/22 Adrian Crum <[hidden email]>:
>>>>> Something similar that would be nice to have is a generic collapsible
>>>>> column
>>>>> implementation - where clicking on a link or control reduces the column
>>>>> to a
>>>>> small icon. Clicking on the icon expands the column back. This could be
>>>>> used
>>>>> for vertical menus.
>>>>>
>>>>> Maybe it is time to consider a column widget - where functionality can
>>>>> be
>>>>> built in and configured with attributes.
>>>>>
>>>>> -Adrian
>>>>>
>>>>> Bruno Busco wrote:
>>>>>> I was looking for a way to implement a splitter that would allow the
>>>>>> user to adjust the width of the left column in multicolumn screens
>>>>>> (i.e. in the catalog application).
>>>>>> In OFBiz there are already several js library.
>>>>>> Is somebody aware of a simple method to do this?
>>>>>> I have briefly looked into the myportal.js and seems that primitives
>>>>>> like Draggable and Droppable are already there.
>>>>>>
>>>>>> My idea was that when the user starts dragging a vertical separation
>>>>>> bar between the left-column and the main-content (the splitter) the
>>>>>> widths are updated and then, when the user drops them a
>>>>>> ajaxSetUserPreference is performed to store the left-column width so
>>>>>> that it is mantained whenever the screen gets updated.
>>>>>>
>>>>>> Any help?
>>>>>> Sascha? ;-)
>>>>>>
>>>>>>
>>>>>> Thank you,
>>>>>> -Bruno
>>>>>>
>
Reply | Threaded
Open this post in threaded view
|

Re: Discussion: Column Widgets (was: How to add a splitter to adjust the left column width by dragging it?)

Bruno Busco
I think it would fulfill the needs I can see right now.
Thank you Adrian.

2009/12/23 Adrian Crum <[hidden email]>:

> The current code to render multiple columns seems to be more complicated
> than it should be. As this thread has discussed, adding features to
> multiple-column layout can be problematic.
>
> So, the suggestion is to introduce column widgets. I'll start off with some
> basic ideas, and everyone is welcome to comment and improve on them.
>
> From the screen widget XML perspective, it could look like this:
>
> <column-container>
>  <column name="first-column">
>    <!-- column contents -->
>  </column>
>  <column name="second-column">
>    <!-- column contents -->
>  </column>
>  ...
> </column-container>
>
> The column elements can contain additional column-container elements.
>
> The column element can have an attribute to specify its width as a
> percentage of the column-container width. Pixel widths should be avoided
> since the screen widgets are supposed to be rendering device agnostic.
>
> The column-container and column elements will support the common screen
> widget attributes like name, style, id, etc.
>
> The column-container could support a type attribute that controls how the
> contained columns behave. For example, type="splitter" will render the
> contained columns as a splitter window.
>
> From the widget model perspective, the column-container manages resizing
> columns when one of them is collapsed or its width changes. Column size
> information needs to be kept in the rendering context. The information would
> start off with some default values that are overridden by user preferences.
>
> What do you think?
>
> -Adrian
>
>
> Bruno Busco wrote:
>>
>> I would like to help on the column widget implementation.
>> Could you start with some writing about it so that I can get a clear idea?
>>
>> -Bruno
>>
>> 2009/12/22 Adrian Crum <[hidden email]>:
>>>
>>> That's why we need column widgets - so the other columns will know to
>>> resize
>>> themselves.
>>>
>>> -Adrian
>>>
>>> Bruno Busco wrote:
>>>>
>>>> Unfortunately, one of the problem I had was that, to collapse
>>>> horizzontally, is not so simple because adiacent divs should be also
>>>> adjusted.
>>>> For example, to use this to collapse the left-column, even the
>>>> main-content div width (or margin-left) should be changed.
>>>> This was one of the reason I stopped this way of doing it. :-(
>>>>
>>>> -Bruno
>>>>
>>>> 2009/12/22 Bruno Busco <[hidden email]>:
>>>>>
>>>>> Adrian, what you say reminds me the very first way I thought to
>>>>> achieve what I described (but I stopped and forgot!! :-( )
>>>>>
>>>>> I thought that a collapsible screenlet (we already have) could have
>>>>> another attribute to be collapsed horizzontaly or vertically. One of
>>>>> the two is what we have right know. In the other one the
>>>>> screenlet-title bar should be rendered vertically on a side of the
>>>>> screenlet and could be used to collapse.
>>>>>
>>>>> The left-column could then be completely wrapped in the screenlet...et
>>>>> voilà.
>>>>> We have also the screenlet collapsed status storing feature in place
>>>>> now!
>>>>>
>>>>> -Bruno
>>>>>
>>>>> 2009/12/22 Adrian Crum <[hidden email]>:
>>>>>>
>>>>>> Something similar that would be nice to have is a generic collapsible
>>>>>> column
>>>>>> implementation - where clicking on a link or control reduces the
>>>>>> column
>>>>>> to a
>>>>>> small icon. Clicking on the icon expands the column back. This could
>>>>>> be
>>>>>> used
>>>>>> for vertical menus.
>>>>>>
>>>>>> Maybe it is time to consider a column widget - where functionality can
>>>>>> be
>>>>>> built in and configured with attributes.
>>>>>>
>>>>>> -Adrian
>>>>>>
>>>>>> Bruno Busco wrote:
>>>>>>>
>>>>>>> I was looking for a way to implement a splitter that would allow the
>>>>>>> user to adjust the width of the left column in multicolumn screens
>>>>>>> (i.e. in the catalog application).
>>>>>>> In OFBiz there are already several js library.
>>>>>>> Is somebody aware of a simple method to do this?
>>>>>>> I have briefly looked into the myportal.js and seems that primitives
>>>>>>> like Draggable and Droppable are already there.
>>>>>>>
>>>>>>> My idea was that when the user starts dragging a vertical separation
>>>>>>> bar between the left-column and the main-content (the splitter) the
>>>>>>> widths are updated and then, when the user drops them a
>>>>>>> ajaxSetUserPreference is performed to store the left-column width so
>>>>>>> that it is mantained whenever the screen gets updated.
>>>>>>>
>>>>>>> Any help?
>>>>>>> Sascha? ;-)
>>>>>>>
>>>>>>>
>>>>>>> Thank you,
>>>>>>> -Bruno
>>>>>>>
>>
>
Reply | Threaded
Open this post in threaded view
|

Re: Discussion: Column Widgets (was: How to add a splitter to adjust the left column width by dragging it?)

Jacques Le Roux
Administrator
Looks like a plan, yes!

Jacques

From: "Bruno Busco" <[hidden email]>

>I think it would fulfill the needs I can see right now.
> Thank you Adrian.
>
> 2009/12/23 Adrian Crum <[hidden email]>:
>> The current code to render multiple columns seems to be more complicated
>> than it should be. As this thread has discussed, adding features to
>> multiple-column layout can be problematic.
>>
>> So, the suggestion is to introduce column widgets. I'll start off with some
>> basic ideas, and everyone is welcome to comment and improve on them.
>>
>> From the screen widget XML perspective, it could look like this:
>>
>> <column-container>
>> <column name="first-column">
>> <!-- column contents -->
>> </column>
>> <column name="second-column">
>> <!-- column contents -->
>> </column>
>> ...
>> </column-container>
>>
>> The column elements can contain additional column-container elements.
>>
>> The column element can have an attribute to specify its width as a
>> percentage of the column-container width. Pixel widths should be avoided
>> since the screen widgets are supposed to be rendering device agnostic.
>>
>> The column-container and column elements will support the common screen
>> widget attributes like name, style, id, etc.
>>
>> The column-container could support a type attribute that controls how the
>> contained columns behave. For example, type="splitter" will render the
>> contained columns as a splitter window.
>>
>> From the widget model perspective, the column-container manages resizing
>> columns when one of them is collapsed or its width changes. Column size
>> information needs to be kept in the rendering context. The information would
>> start off with some default values that are overridden by user preferences.
>>
>> What do you think?
>>
>> -Adrian
>>
>>
>> Bruno Busco wrote:
>>>
>>> I would like to help on the column widget implementation.
>>> Could you start with some writing about it so that I can get a clear idea?
>>>
>>> -Bruno
>>>
>>> 2009/12/22 Adrian Crum <[hidden email]>:
>>>>
>>>> That's why we need column widgets - so the other columns will know to
>>>> resize
>>>> themselves.
>>>>
>>>> -Adrian
>>>>
>>>> Bruno Busco wrote:
>>>>>
>>>>> Unfortunately, one of the problem I had was that, to collapse
>>>>> horizzontally, is not so simple because adiacent divs should be also
>>>>> adjusted.
>>>>> For example, to use this to collapse the left-column, even the
>>>>> main-content div width (or margin-left) should be changed.
>>>>> This was one of the reason I stopped this way of doing it. :-(
>>>>>
>>>>> -Bruno
>>>>>
>>>>> 2009/12/22 Bruno Busco <[hidden email]>:
>>>>>>
>>>>>> Adrian, what you say reminds me the very first way I thought to
>>>>>> achieve what I described (but I stopped and forgot!! :-( )
>>>>>>
>>>>>> I thought that a collapsible screenlet (we already have) could have
>>>>>> another attribute to be collapsed horizzontaly or vertically. One of
>>>>>> the two is what we have right know. In the other one the
>>>>>> screenlet-title bar should be rendered vertically on a side of the
>>>>>> screenlet and could be used to collapse.
>>>>>>
>>>>>> The left-column could then be completely wrapped in the screenlet...et
>>>>>> voilà.
>>>>>> We have also the screenlet collapsed status storing feature in place
>>>>>> now!
>>>>>>
>>>>>> -Bruno
>>>>>>
>>>>>> 2009/12/22 Adrian Crum <[hidden email]>:
>>>>>>>
>>>>>>> Something similar that would be nice to have is a generic collapsible
>>>>>>> column
>>>>>>> implementation - where clicking on a link or control reduces the
>>>>>>> column
>>>>>>> to a
>>>>>>> small icon. Clicking on the icon expands the column back. This could
>>>>>>> be
>>>>>>> used
>>>>>>> for vertical menus.
>>>>>>>
>>>>>>> Maybe it is time to consider a column widget - where functionality can
>>>>>>> be
>>>>>>> built in and configured with attributes.
>>>>>>>
>>>>>>> -Adrian
>>>>>>>
>>>>>>> Bruno Busco wrote:
>>>>>>>>
>>>>>>>> I was looking for a way to implement a splitter that would allow the
>>>>>>>> user to adjust the width of the left column in multicolumn screens
>>>>>>>> (i.e. in the catalog application).
>>>>>>>> In OFBiz there are already several js library.
>>>>>>>> Is somebody aware of a simple method to do this?
>>>>>>>> I have briefly looked into the myportal.js and seems that primitives
>>>>>>>> like Draggable and Droppable are already there.
>>>>>>>>
>>>>>>>> My idea was that when the user starts dragging a vertical separation
>>>>>>>> bar between the left-column and the main-content (the splitter) the
>>>>>>>> widths are updated and then, when the user drops them a
>>>>>>>> ajaxSetUserPreference is performed to store the left-column width so
>>>>>>>> that it is mantained whenever the screen gets updated.
>>>>>>>>
>>>>>>>> Any help?
>>>>>>>> Sascha? ;-)
>>>>>>>>
>>>>>>>>
>>>>>>>> Thank you,
>>>>>>>> -Bruno
>>>>>>>>
>>>
>>
>


Reply | Threaded
Open this post in threaded view
|

Re: Discussion: Column Widgets (was: How to add a splitter to adjust the left column width by dragging it?)

Bruno Busco
Could we use the column widget in the single form also instead of the
"column" field attribute?

-Bruno

2009/12/24 Jacques Le Roux <[hidden email]>:

> Looks like a plan, yes!
>
> Jacques
>
> From: "Bruno Busco" <[hidden email]>
>>
>> I think it would fulfill the needs I can see right now.
>> Thank you Adrian.
>>
>> 2009/12/23 Adrian Crum <[hidden email]>:
>>>
>>> The current code to render multiple columns seems to be more complicated
>>> than it should be. As this thread has discussed, adding features to
>>> multiple-column layout can be problematic.
>>>
>>> So, the suggestion is to introduce column widgets. I'll start off with
>>> some
>>> basic ideas, and everyone is welcome to comment and improve on them.
>>>
>>> From the screen widget XML perspective, it could look like this:
>>>
>>> <column-container>
>>> <column name="first-column">
>>> <!-- column contents -->
>>> </column>
>>> <column name="second-column">
>>> <!-- column contents -->
>>> </column>
>>> ...
>>> </column-container>
>>>
>>> The column elements can contain additional column-container elements.
>>>
>>> The column element can have an attribute to specify its width as a
>>> percentage of the column-container width. Pixel widths should be avoided
>>> since the screen widgets are supposed to be rendering device agnostic.
>>>
>>> The column-container and column elements will support the common screen
>>> widget attributes like name, style, id, etc.
>>>
>>> The column-container could support a type attribute that controls how the
>>> contained columns behave. For example, type="splitter" will render the
>>> contained columns as a splitter window.
>>>
>>> From the widget model perspective, the column-container manages resizing
>>> columns when one of them is collapsed or its width changes. Column size
>>> information needs to be kept in the rendering context. The information
>>> would
>>> start off with some default values that are overridden by user
>>> preferences.
>>>
>>> What do you think?
>>>
>>> -Adrian
>>>
>>>
>>> Bruno Busco wrote:
>>>>
>>>> I would like to help on the column widget implementation.
>>>> Could you start with some writing about it so that I can get a clear
>>>> idea?
>>>>
>>>> -Bruno
>>>>
>>>> 2009/12/22 Adrian Crum <[hidden email]>:
>>>>>
>>>>> That's why we need column widgets - so the other columns will know to
>>>>> resize
>>>>> themselves.
>>>>>
>>>>> -Adrian
>>>>>
>>>>> Bruno Busco wrote:
>>>>>>
>>>>>> Unfortunately, one of the problem I had was that, to collapse
>>>>>> horizzontally, is not so simple because adiacent divs should be also
>>>>>> adjusted.
>>>>>> For example, to use this to collapse the left-column, even the
>>>>>> main-content div width (or margin-left) should be changed.
>>>>>> This was one of the reason I stopped this way of doing it. :-(
>>>>>>
>>>>>> -Bruno
>>>>>>
>>>>>> 2009/12/22 Bruno Busco <[hidden email]>:
>>>>>>>
>>>>>>> Adrian, what you say reminds me the very first way I thought to
>>>>>>> achieve what I described (but I stopped and forgot!! :-( )
>>>>>>>
>>>>>>> I thought that a collapsible screenlet (we already have) could have
>>>>>>> another attribute to be collapsed horizzontaly or vertically. One of
>>>>>>> the two is what we have right know. In the other one the
>>>>>>> screenlet-title bar should be rendered vertically on a side of the
>>>>>>> screenlet and could be used to collapse.
>>>>>>>
>>>>>>> The left-column could then be completely wrapped in the
>>>>>>> screenlet...et
>>>>>>> voilà.
>>>>>>> We have also the screenlet collapsed status storing feature in place
>>>>>>> now!
>>>>>>>
>>>>>>> -Bruno
>>>>>>>
>>>>>>> 2009/12/22 Adrian Crum <[hidden email]>:
>>>>>>>>
>>>>>>>> Something similar that would be nice to have is a generic
>>>>>>>> collapsible
>>>>>>>> column
>>>>>>>> implementation - where clicking on a link or control reduces the
>>>>>>>> column
>>>>>>>> to a
>>>>>>>> small icon. Clicking on the icon expands the column back. This could
>>>>>>>> be
>>>>>>>> used
>>>>>>>> for vertical menus.
>>>>>>>>
>>>>>>>> Maybe it is time to consider a column widget - where functionality
>>>>>>>> can
>>>>>>>> be
>>>>>>>> built in and configured with attributes.
>>>>>>>>
>>>>>>>> -Adrian
>>>>>>>>
>>>>>>>> Bruno Busco wrote:
>>>>>>>>>
>>>>>>>>> I was looking for a way to implement a splitter that would allow
>>>>>>>>> the
>>>>>>>>> user to adjust the width of the left column in multicolumn screens
>>>>>>>>> (i.e. in the catalog application).
>>>>>>>>> In OFBiz there are already several js library.
>>>>>>>>> Is somebody aware of a simple method to do this?
>>>>>>>>> I have briefly looked into the myportal.js and seems that
>>>>>>>>> primitives
>>>>>>>>> like Draggable and Droppable are already there.
>>>>>>>>>
>>>>>>>>> My idea was that when the user starts dragging a vertical
>>>>>>>>> separation
>>>>>>>>> bar between the left-column and the main-content (the splitter) the
>>>>>>>>> widths are updated and then, when the user drops them a
>>>>>>>>> ajaxSetUserPreference is performed to store the left-column width
>>>>>>>>> so
>>>>>>>>> that it is mantained whenever the screen gets updated.
>>>>>>>>>
>>>>>>>>> Any help?
>>>>>>>>> Sascha? ;-)
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> Thank you,
>>>>>>>>> -Bruno
>>>>>>>>>
>>>>
>>>
>>
>
>
>