Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

classic Classic list List threaded Threaded
14 messages Options
Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

lprimak
Is there a solution for this that's easier than writing a mixin?
Seems like the mixin solution is an overkill.

I remember in the past there was a discussion of CSS styles being too specific by default.
Any way just to make it a simple CSS rule somewhere?

> For BeanEditor you would have to do this with a mixin. The mixin might take
> some work but it could then be added go all the BeanEditors
>
> On Monday, September 16, 2013, Lenny Primak wrote:
>
> > I think this should be the default, at least for compatibility's sake.
> > Sounds like a lot of custom styling just to make it look like it used to
> > in T5.3
> >
> > On Sep 16, 2013, at 11:35 AM, Howard Lewis Ship wrote:
> >
> > > This is part of using Boostrap; which is mobile-first and therefore likes
> > > everything stacked vertically and full width.  Add "form-horizontal" to
> > the
> > > [BeanEdit]Form and the layout will look nicer.  You have to wrap the
> > > form-control elements in .col-md-N (md for medium device size) to keep
> > them
> > > from being 100% wide.
> > >
> > >
> > > On Sun, Sep 15, 2013 at 8:41 PM, Lenny Primak <[hidden email]<javascript:;>
> > >wrote:
> > >
> > >> Hi guys,
> > >>
> > >> I noticed something else that's not as pretty out of the box in T5.4 due
> > >> to bootstrap probably
> > >>
> > >> In T5.3, beaneditor looks something like this:
> > >>
> > >> Label [Input Text]
> > >> Label [Input Text]
> > >>
> > >> In T5.4, it looks like this:
> > >>
> > >> Label
> > >> [Input Text ........ (takes up the whole width of the page)]
> > >> Label
> > >> [Input Text ........ (takes up the whole width of the page)]
> > >>
> > >>
> > >> I think this should be fixed out of the box
> > >>
> > >> Issue created: https://issues.apache.org/jira/browse/TAP5-2182
> > >> ---------------------------------------------------------------------
> > >> To unsubscribe, e-mail: [hidden email]<javascript:;>
> > >> For additional commands, e-mail: [hidden email]<javascript:;>
> > >>
> > >>
> > >
> > >
> > > --
> > > Howard M. Lewis Ship
> > >
> > > Creator of Apache Tapestry
> > >
> > > The source for Tapestry training, mentoring and support. Contact me to
> > > learn how I can get you up and productive in Tapestry fast!
> > >
> > > (971) 678-5210
> > > http://howardlewisship.com
> >

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

trsvax
I'm certain you can do it with a mixin but you might be able to do this
with the css display:table and friends. If you can get the right css you
could make the form a table with the form-group a tr and the label and
input td's


On Mon, Sep 23, 2013 at 7:51 PM, Lenny Primak <[hidden email]>wrote:

> Is there a solution for this that's easier than writing a mixin?
> Seems like the mixin solution is an overkill.
>
> I remember in the past there was a discussion of CSS styles being too
> specific by default.
> Any way just to make it a simple CSS rule somewhere?
>
> > For BeanEditor you would have to do this with a mixin. The mixin might
> take
> > some work but it could then be added go all the BeanEditors
> >
> > On Monday, September 16, 2013, Lenny Primak wrote:
> >
> > > I think this should be the default, at least for compatibility's sake.
> > > Sounds like a lot of custom styling just to make it look like it used
> to
> > > in T5.3
> > >
> > > On Sep 16, 2013, at 11:35 AM, Howard Lewis Ship wrote:
> > >
> > > > This is part of using Boostrap; which is mobile-first and therefore
> likes
> > > > everything stacked vertically and full width.  Add "form-horizontal"
> to
> > > the
> > > > [BeanEdit]Form and the layout will look nicer.  You have to wrap the
> > > > form-control elements in .col-md-N (md for medium device size) to
> keep
> > > them
> > > > from being 100% wide.
> > > >
> > > >
> > > > On Sun, Sep 15, 2013 at 8:41 PM, Lenny Primak <[hidden
> email]<javascript:;>
> > > >wrote:
> > > >
> > > >> Hi guys,
> > > >>
> > > >> I noticed something else that's not as pretty out of the box in
> T5.4 due
> > > >> to bootstrap probably
> > > >>
> > > >> In T5.3, beaneditor looks something like this:
> > > >>
> > > >> Label [Input Text]
> > > >> Label [Input Text]
> > > >>
> > > >> In T5.4, it looks like this:
> > > >>
> > > >> Label
> > > >> [Input Text ........ (takes up the whole width of the page)]
> > > >> Label
> > > >> [Input Text ........ (takes up the whole width of the page)]
> > > >>
> > > >>
> > > >> I think this should be fixed out of the box
> > > >>
> > > >> Issue created: https://issues.apache.org/jira/browse/TAP5-2182
> > > >>
> ---------------------------------------------------------------------
> > > >> To unsubscribe, e-mail: [hidden email]<javascript:;>
> > > >> For additional commands, e-mail: [hidden email]<javascript:;>
> > > >>
> > > >>
> > > >
> > > >
> > > > --
> > > > Howard M. Lewis Ship
> > > >
> > > > Creator of Apache Tapestry
> > > >
> > > > The source for Tapestry training, mentoring and support. Contact me
> to
> > > > learn how I can get you up and productive in Tapestry fast!
> > > >
> > > > (971) 678-5210
> > > > http://howardlewisship.com
> > >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

lprimak
In reply to this post by lprimak
I have tried to implement this using a mixin, but it gets too complicated for my taste.

The problem is that the each label and component has to be surrounded with <div class='col-md-XX'> (for example)
which requires really digging around elements with MarkupWriter (error prone)

I think BeanEditor should be able to support horizontal bootstrap layout of of the box.
I updated the issue: https://issues.apache.org/jira/browse/TAP5-2182
with what I've discovered so far (mostly what Howard already said in this discussion)


On Sep 23, 2013, at 8:51 PM, Lenny Primak wrote:

> Is there a solution for this that's easier than writing a mixin?
> Seems like the mixin solution is an overkill.
>
> I remember in the past there was a discussion of CSS styles being too specific by default.
> Any way just to make it a simple CSS rule somewhere?
>
>> For BeanEditor you would have to do this with a mixin. The mixin might take
>> some work but it could then be added go all the BeanEditors
>>
>> On Monday, September 16, 2013, Lenny Primak wrote:
>>
>>> I think this should be the default, at least for compatibility's sake.
>>> Sounds like a lot of custom styling just to make it look like it used to
>>> in T5.3
>>>
>>> On Sep 16, 2013, at 11:35 AM, Howard Lewis Ship wrote:
>>>
>>>> This is part of using Boostrap; which is mobile-first and therefore likes
>>>> everything stacked vertically and full width.  Add "form-horizontal" to
>>> the
>>>> [BeanEdit]Form and the layout will look nicer.  You have to wrap the
>>>> form-control elements in .col-md-N (md for medium device size) to keep
>>> them
>>>> from being 100% wide.
>>>>
>>>>
>>>> On Sun, Sep 15, 2013 at 8:41 PM, Lenny Primak <[hidden email]<javascript:;>
>>>> wrote:
>>>>
>>>>> Hi guys,
>>>>>
>>>>> I noticed something else that's not as pretty out of the box in T5.4 due
>>>>> to bootstrap probably
>>>>>
>>>>> In T5.3, beaneditor looks something like this:
>>>>>
>>>>> Label [Input Text]
>>>>> Label [Input Text]
>>>>>
>>>>> In T5.4, it looks like this:
>>>>>
>>>>> Label
>>>>> [Input Text ........ (takes up the whole width of the page)]
>>>>> Label
>>>>> [Input Text ........ (takes up the whole width of the page)]
>>>>>
>>>>>
>>>>> I think this should be fixed out of the box
>>>>>
>>>>> Issue created: https://issues.apache.org/jira/browse/TAP5-2182
>>>>> ---------------------------------------------------------------------
>>>>> To unsubscribe, e-mail: [hidden email]<javascript:;>
>>>>> For additional commands, e-mail: [hidden email]<javascript:;>
>>>>>
>>>>>
>>>>
>>>>
>>>> --
>>>> Howard M. Lewis Ship
>>>>
>>>> Creator of Apache Tapestry
>>>>
>>>> The source for Tapestry training, mentoring and support. Contact me to
>>>> learn how I can get you up and productive in Tapestry fast!
>>>>
>>>> (971) 678-5210
>>>> http://howardlewisship.com
>>>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

Thiago H de Paula Figueiredo
On Mon, 14 Oct 2013 22:29:57 -0300, Lenny Primak <[hidden email]>  
wrote:

> I have tried to implement this using a mixin, but it gets too  
> complicated for my taste.
>
> The problem is that the each label and component has to be surrounded  
> with <div class='col-md-XX'> (for example)
> which requires really digging around elements with MarkupWriter (error  
> prone)

Have you checked Tapestry-XPath? It helps so much in finding elements  
which I think it could be part of Tapestry-core itself.

--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

lprimak
I know of its existence but didn't really use it.  I can do it with a visitor, but
all of these approaches are clunky.  It should be implemented in Tapestry itself.

I really don't understand why Bootstrap people didn't make horizontal form the default.
I guess because it's harder to get right :)

On Oct 14, 2013, at 10:28 PM, Thiago H de Paula Figueiredo wrote:

> On Mon, 14 Oct 2013 22:29:57 -0300, Lenny Primak <[hidden email]> wrote:
>
>> I have tried to implement this using a mixin, but it gets too complicated for my taste.
>>
>> The problem is that the each label and component has to be surrounded with <div class='col-md-XX'> (for example)
>> which requires really digging around elements with MarkupWriter (error prone)
>
> Have you checked Tapestry-XPath? It helps so much in finding elements which I think it could be part of Tapestry-core itself.
>
> --
> Thiago H. de Paula Figueiredo
> Tapestry, Java and Hibernate consultant and developer
> http://machina.com.br
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

trsvax
If you are building sites that work on mobile the default is correct. If
you are starting from scratch it's OK also but converting an existing site
can be a problem. I do have one non mobile site I'm converting so I looked
at my old 2.3 mixin and the at the example

http://getbootstrap.com/css/#forms-horizontal

I'm not really sure how to support this because each property can have
different col settings. My first thought is the mixin needs a map of
propertyName/columnWidth. It might be possible to do this with the message
catalogue also.


On Mon, Oct 14, 2013 at 9:43 PM, Lenny Primak <[hidden email]>wrote:

> I know of its existence but didn't really use it.  I can do it with a
> visitor, but
> all of these approaches are clunky.  It should be implemented in Tapestry
> itself.
>
> I really don't understand why Bootstrap people didn't make horizontal form
> the default.
> I guess because it's harder to get right :)
>
> On Oct 14, 2013, at 10:28 PM, Thiago H de Paula Figueiredo wrote:
>
> > On Mon, 14 Oct 2013 22:29:57 -0300, Lenny Primak <[hidden email]>
> wrote:
> >
> >> I have tried to implement this using a mixin, but it gets too
> complicated for my taste.
> >>
> >> The problem is that the each label and component has to be surrounded
> with <div class='col-md-XX'> (for example)
> >> which requires really digging around elements with MarkupWriter (error
> prone)
> >
> > Have you checked Tapestry-XPath? It helps so much in finding elements
> which I think it could be part of Tapestry-core itself.
> >
> > --
> > Thiago H. de Paula Figueiredo
> > Tapestry, Java and Hibernate consultant and developer
> > http://machina.com.br
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: [hidden email]
> > For additional commands, e-mail: [hidden email]
> >
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

lprimak
form-horizontal will look correctly on mobile platform as well.
It wil 'revert' to stacked form on mobile, but maintain it's horizontal-ness on desktop.

col-XX-X attributes can be configured as symbols, or can be passed along
as a model of some kind.  Sensible defaults can be pre-configured.

On Oct 15, 2013, at 6:46 AM, Barry Books wrote:

> If you are building sites that work on mobile the default is correct. If
> you are starting from scratch it's OK also but converting an existing site
> can be a problem. I do have one non mobile site I'm converting so I looked
> at my old 2.3 mixin and the at the example
>
> http://getbootstrap.com/css/#forms-horizontal
>
> I'm not really sure how to support this because each property can have
> different col settings. My first thought is the mixin needs a map of
> propertyName/columnWidth. It might be possible to do this with the message
> catalogue also.
>
>
> On Mon, Oct 14, 2013 at 9:43 PM, Lenny Primak <[hidden email]>wrote:
>
>> I know of its existence but didn't really use it.  I can do it with a
>> visitor, but
>> all of these approaches are clunky.  It should be implemented in Tapestry
>> itself.
>>
>> I really don't understand why Bootstrap people didn't make horizontal form
>> the default.
>> I guess because it's harder to get right :)
>>
>> On Oct 14, 2013, at 10:28 PM, Thiago H de Paula Figueiredo wrote:
>>
>>> On Mon, 14 Oct 2013 22:29:57 -0300, Lenny Primak <[hidden email]>
>> wrote:
>>>
>>>> I have tried to implement this using a mixin, but it gets too
>> complicated for my taste.
>>>>
>>>> The problem is that the each label and component has to be surrounded
>> with <div class='col-md-XX'> (for example)
>>>> which requires really digging around elements with MarkupWriter (error
>> prone)
>>>
>>> Have you checked Tapestry-XPath? It helps so much in finding elements
>> which I think it could be part of Tapestry-core itself.
>>>
>>> --
>>> Thiago H. de Paula Figueiredo
>>> Tapestry, Java and Hibernate consultant and developer
>>> http://machina.com.br
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: [hidden email]
>>> For additional commands, e-mail: [hidden email]
>>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

Jens Breitenstein
In reply to this post by trsvax
Hi,

just my two cents: In general coupling bean editor (and friends) tightly to bootstrap is strange even I am aware its the de facto standard. Furthermore I can not believe it will ever produce a layout which makes all of us happy. Is it not possible to add a additional, optional parameter to support "row building" or "field grouping" (eg List of List of field names forming rows/groups) and retrieve/provide css for each field and row/group by callbacks? Means: by default Tapestry does not care about rows/groups and may solely set col-xyz-whatever on each field's class to provide a default responsive layout. Nevertheless by a callback solution its now possible to easily override "that default css" for a group/row or even individual field. Due to the fact everything is optional it won't break old code, too.
I can not see how a mixin is able to easily modify css across elements without any structural hint (rows/groups), but correct me if I am wrong.


Jens



Von meinem iPhone gesendet

> Am 15.10.2013 um 12:46 schrieb Barry Books <[hidden email]>:
>
> If you are building sites that work on mobile the default is correct. If
> you are starting from scratch it's OK also but converting an existing site
> can be a problem. I do have one non mobile site I'm converting so I looked
> at my old 2.3 mixin and the at the example
>
> http://getbootstrap.com/css/#forms-horizontal
>
> I'm not really sure how to support this because each property can have
> different col settings. My first thought is the mixin needs a map of
> propertyName/columnWidth. It might be possible to do this with the message
> catalogue also.
>
>
> On Mon, Oct 14, 2013 at 9:43 PM, Lenny Primak <[hidden email]>wrote:
>
>> I know of its existence but didn't really use it.  I can do it with a
>> visitor, but
>> all of these approaches are clunky.  It should be implemented in Tapestry
>> itself.
>>
>> I really don't understand why Bootstrap people didn't make horizontal form
>> the default.
>> I guess because it's harder to get right :)
>>
>>>> On Oct 14, 2013, at 10:28 PM, Thiago H de Paula Figueiredo wrote:
>>>>
>>>> On Mon, 14 Oct 2013 22:29:57 -0300, Lenny Primak <[hidden email]>
>>> wrote:
>>>
>>>> I have tried to implement this using a mixin, but it gets too
>> complicated for my taste.
>>>>
>>>> The problem is that the each label and component has to be surrounded
>> with <div class='col-md-XX'> (for example)
>>>> which requires really digging around elements with MarkupWriter (error
>> prone)
>>>
>>> Have you checked Tapestry-XPath? It helps so much in finding elements
>> which I think it could be part of Tapestry-core itself.
>>>
>>> --
>>> Thiago H. de Paula Figueiredo
>>> Tapestry, Java and Hibernate consultant and developer
>>> http://machina.com.br
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: [hidden email]
>>> For additional commands, e-mail: [hidden email]
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

lprimak
I like the callback solution.  Requires Tapestry support though :)
That wil serve my needs at least (BeanEditor that looks like the 'old' 5.3 BeanEditor :)

On Oct 16, 2013, at 7:30 AM, [hidden email] wrote:

> Hi,
>
> just my two cents: In general coupling bean editor (and friends) tightly to bootstrap is strange even I am aware its the de facto standard. Furthermore I can not believe it will ever produce a layout which makes all of us happy. Is it not possible to add a additional, optional parameter to support "row building" or "field grouping" (eg List of List of field names forming rows/groups) and retrieve/provide css for each field and row/group by callbacks? Means: by default Tapestry does not care about rows/groups and may solely set col-xyz-whatever on each field's class to provide a default responsive layout. Nevertheless by a callback solution its now possible to easily override "that default css" for a group/row or even individual field. Due to the fact everything is optional it won't break old code, too.
> I can not see how a mixin is able to easily modify css across elements without any structural hint (rows/groups), but correct me if I am wrong.
>
>
> Jens
>
>
>
> Von meinem iPhone gesendet
>
>> Am 15.10.2013 um 12:46 schrieb Barry Books <[hidden email]>:
>>
>> If you are building sites that work on mobile the default is correct. If
>> you are starting from scratch it's OK also but converting an existing site
>> can be a problem. I do have one non mobile site I'm converting so I looked
>> at my old 2.3 mixin and the at the example
>>
>> http://getbootstrap.com/css/#forms-horizontal
>>
>> I'm not really sure how to support this because each property can have
>> different col settings. My first thought is the mixin needs a map of
>> propertyName/columnWidth. It might be possible to do this with the message
>> catalogue also.
>>
>>
>> On Mon, Oct 14, 2013 at 9:43 PM, Lenny Primak <[hidden email]>wrote:
>>
>>> I know of its existence but didn't really use it.  I can do it with a
>>> visitor, but
>>> all of these approaches are clunky.  It should be implemented in Tapestry
>>> itself.
>>>
>>> I really don't understand why Bootstrap people didn't make horizontal form
>>> the default.
>>> I guess because it's harder to get right :)
>>>
>>>>> On Oct 14, 2013, at 10:28 PM, Thiago H de Paula Figueiredo wrote:
>>>>>
>>>>> On Mon, 14 Oct 2013 22:29:57 -0300, Lenny Primak <[hidden email]>
>>>> wrote:
>>>>
>>>>> I have tried to implement this using a mixin, but it gets too
>>> complicated for my taste.
>>>>>
>>>>> The problem is that the each label and component has to be surrounded
>>> with <div class='col-md-XX'> (for example)
>>>>> which requires really digging around elements with MarkupWriter (error
>>> prone)
>>>>
>>>> Have you checked Tapestry-XPath? It helps so much in finding elements
>>> which I think it could be part of Tapestry-core itself.
>>>>
>>>> --
>>>> Thiago H. de Paula Figueiredo
>>>> Tapestry, Java and Hibernate consultant and developer
>>>> http://machina.com.br
>>>>
>>>> ---------------------------------------------------------------------
>>>> To unsubscribe, e-mail: [hidden email]
>>>> For additional commands, e-mail: [hidden email]
>>>
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: [hidden email]
>>> For additional commands, e-mail: [hidden email]
>>>
>>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

JumpStart
If tapestry jar included bootstrap.less then perhaps it would then be easy
to massage into columns like this:

my.tml:

    <t:beaneditform class="myform-3-6" ...>

my.less:

    @import "tapestry5/bootstrap_3_0_0/css/bootstrap.less";

    .myform-3-6 {

        .form-horizontal;

    }

    .myform-3-6 .form-group .control-label {

        .col-sm-3;

    }

    .myform-3-6 .formgroup .form-control {

        .col-sm-6;

    }

Geoff


On 17 October 2013 02:57, Lenny Primak <[hidden email]> wrote:

> I like the callback solution.  Requires Tapestry support though :)
> That wil serve my needs at least (BeanEditor that looks like the 'old' 5.3
> BeanEditor :)
>
> On Oct 16, 2013, at 7:30 AM, [hidden email] wrote:
>
> > Hi,
> >
> > just my two cents: In general coupling bean editor (and friends) tightly
> to bootstrap is strange even I am aware its the de facto standard.
> Furthermore I can not believe it will ever produce a layout which makes all
> of us happy. Is it not possible to add a additional, optional parameter to
> support "row building" or "field grouping" (eg List of List of field names
> forming rows/groups) and retrieve/provide css for each field and row/group
> by callbacks? Means: by default Tapestry does not care about rows/groups
> and may solely set col-xyz-whatever on each field's class to provide a
> default responsive layout. Nevertheless by a callback solution its now
> possible to easily override "that default css" for a group/row or even
> individual field. Due to the fact everything is optional it won't break old
> code, too.
> > I can not see how a mixin is able to easily modify css across elements
> without any structural hint (rows/groups), but correct me if I am wrong.
> >
> >
> > Jens
> >
> >
> >
> > Von meinem iPhone gesendet
> >
> >> Am 15.10.2013 um 12:46 schrieb Barry Books <[hidden email]>:
> >>
> >> If you are building sites that work on mobile the default is correct. If
> >> you are starting from scratch it's OK also but converting an existing
> site
> >> can be a problem. I do have one non mobile site I'm converting so I
> looked
> >> at my old 2.3 mixin and the at the example
> >>
> >> http://getbootstrap.com/css/#forms-horizontal
> >>
> >> I'm not really sure how to support this because each property can have
> >> different col settings. My first thought is the mixin needs a map of
> >> propertyName/columnWidth. It might be possible to do this with the
> message
> >> catalogue also.
> >>
> >>
> >> On Mon, Oct 14, 2013 at 9:43 PM, Lenny Primak <[hidden email]
> >wrote:
> >>
> >>> I know of its existence but didn't really use it.  I can do it with a
> >>> visitor, but
> >>> all of these approaches are clunky.  It should be implemented in
> Tapestry
> >>> itself.
> >>>
> >>> I really don't understand why Bootstrap people didn't make horizontal
> form
> >>> the default.
> >>> I guess because it's harder to get right :)
> >>>
> >>>>> On Oct 14, 2013, at 10:28 PM, Thiago H de Paula Figueiredo wrote:
> >>>>>
> >>>>> On Mon, 14 Oct 2013 22:29:57 -0300, Lenny Primak <
> [hidden email]>
> >>>> wrote:
> >>>>
> >>>>> I have tried to implement this using a mixin, but it gets too
> >>> complicated for my taste.
> >>>>>
> >>>>> The problem is that the each label and component has to be surrounded
> >>> with <div class='col-md-XX'> (for example)
> >>>>> which requires really digging around elements with MarkupWriter
> (error
> >>> prone)
> >>>>
> >>>> Have you checked Tapestry-XPath? It helps so much in finding elements
> >>> which I think it could be part of Tapestry-core itself.
> >>>>
> >>>> --
> >>>> Thiago H. de Paula Figueiredo
> >>>> Tapestry, Java and Hibernate consultant and developer
> >>>> http://machina.com.br
> >>>>
> >>>> ---------------------------------------------------------------------
> >>>> To unsubscribe, e-mail: [hidden email]
> >>>> For additional commands, e-mail: [hidden email]
> >>>
> >>>
> >>> ---------------------------------------------------------------------
> >>> To unsubscribe, e-mail: [hidden email]
> >>> For additional commands, e-mail: [hidden email]
> >>>
> >>>
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: [hidden email]
> > For additional commands, e-mail: [hidden email]
> >
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

JumpStart
Actually, that's probably flawed because it doesn't involve outputting the bootstrap class names (form-horizontal and col-*) into the rendered HTML. We have to expect that bootstrap.js might depend on them being in the rendered HTML.

On 18/10/2013, at 12:44 AM, Geoff Callender wrote:

>
> If tapestry jar included bootstrap.less then perhaps it would then be easy to massage into columns like this:
>
> my.tml:
>
>     <t:beaneditform class="myform-3-6" ...>
>
> my.less:
>
>     @import "tapestry5/bootstrap_3_0_0/css/bootstrap.less";
>     .myform-3-6 {
>         .form-horizontal;
>     }
>     .myform-3-6 .form-group .control-label {
>         .col-sm-3;
>     }
>     .myform-3-6 .formgroup .form-control {
>         .col-sm-6;
>     }
>
> Geoff
>
>
> On 17 October 2013 02:57, Lenny Primak <[hidden email]> wrote:
> I like the callback solution.  Requires Tapestry support though :)
> That wil serve my needs at least (BeanEditor that looks like the 'old' 5.3 BeanEditor :)
>
> On Oct 16, 2013, at 7:30 AM, [hidden email] wrote:
>
> > Hi,
> >
> > just my two cents: In general coupling bean editor (and friends) tightly to bootstrap is strange even I am aware its the de facto standard. Furthermore I can not believe it will ever produce a layout which makes all of us happy. Is it not possible to add a additional, optional parameter to support "row building" or "field grouping" (eg List of List of field names forming rows/groups) and retrieve/provide css for each field and row/group by callbacks? Means: by default Tapestry does not care about rows/groups and may solely set col-xyz-whatever on each field's class to provide a default responsive layout. Nevertheless by a callback solution its now possible to easily override "that default css" for a group/row or even individual field. Due to the fact everything is optional it won't break old code, too.
> > I can not see how a mixin is able to easily modify css across elements without any structural hint (rows/groups), but correct me if I am wrong.
> >
> >
> > Jens
> >
> >
> >
> > Von meinem iPhone gesendet
> >
> >> Am 15.10.2013 um 12:46 schrieb Barry Books <[hidden email]>:
> >>
> >> If you are building sites that work on mobile the default is correct. If
> >> you are starting from scratch it's OK also but converting an existing site
> >> can be a problem. I do have one non mobile site I'm converting so I looked
> >> at my old 2.3 mixin and the at the example
> >>
> >> http://getbootstrap.com/css/#forms-horizontal
> >>
> >> I'm not really sure how to support this because each property can have
> >> different col settings. My first thought is the mixin needs a map of
> >> propertyName/columnWidth. It might be possible to do this with the message
> >> catalogue also.
> >>
> >>
> >> On Mon, Oct 14, 2013 at 9:43 PM, Lenny Primak <[hidden email]>wrote:
> >>
> >>> I know of its existence but didn't really use it.  I can do it with a
> >>> visitor, but
> >>> all of these approaches are clunky.  It should be implemented in Tapestry
> >>> itself.
> >>>
> >>> I really don't understand why Bootstrap people didn't make horizontal form
> >>> the default.
> >>> I guess because it's harder to get right :)
> >>>
> >>>>> On Oct 14, 2013, at 10:28 PM, Thiago H de Paula Figueiredo wrote:
> >>>>>
> >>>>> On Mon, 14 Oct 2013 22:29:57 -0300, Lenny Primak <[hidden email]>
> >>>> wrote:
> >>>>
> >>>>> I have tried to implement this using a mixin, but it gets too
> >>> complicated for my taste.
> >>>>>
> >>>>> The problem is that the each label and component has to be surrounded
> >>> with <div class='col-md-XX'> (for example)
> >>>>> which requires really digging around elements with MarkupWriter (error
> >>> prone)
> >>>>
> >>>> Have you checked Tapestry-XPath? It helps so much in finding elements
> >>> which I think it could be part of Tapestry-core itself.
> >>>>
> >>>> --
> >>>> Thiago H. de Paula Figueiredo
> >>>> Tapestry, Java and Hibernate consultant and developer
> >>>> http://machina.com.br
> >>>>
> >>>> ---------------------------------------------------------------------
> >>>> To unsubscribe, e-mail: [hidden email]
> >>>> For additional commands, e-mail: [hidden email]
> >>>
> >>>
> >>> ---------------------------------------------------------------------
> >>> To unsubscribe, e-mail: [hidden email]
> >>> For additional commands, e-mail: [hidden email]
> >>>
> >>>
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: [hidden email]
> > For additional commands, e-mail: [hidden email]
> >
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>

Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

lprimak
In reply to this post by lprimak
I did some work on a mixin (very preliminary)
It generates correct markup for form-horizontal layout for beaneditor.

I will put it into flowlogix module or a separate module under flowlogix when its ready
-------- Example --------
<t:beaneditform t:mixins="formhorizontal" labelClass="col-md-3" object="obj"/>
-------- Code ----------
package com.flowlogix.website.mixins;

import com.google.common.base.Function;
import com.google.common.collect.Collections2;
import lombok.extern.slf4j.Slf4j;
import org.apache.tapestry5.BindingConstants;
import org.apache.tapestry5.MarkupWriter;
import org.apache.tapestry5.annotations.MixinAfter;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.dom.Attribute;
import org.apache.tapestry5.dom.Element;
import org.apache.tapestry5.dom.Visitor;

/**
 *
 * @author lprimak
 */
@MixinAfter
@Slf4j
public class FormHorizontal
{
    private @Parameter(defaultPrefix = BindingConstants.LITERAL, value = "col-md-2") String labelClass;
    private @Parameter(defaultPrefix = BindingConstants.LITERAL, value = "col-md-8") String inputClass;
   
   
    public void afterRender(MarkupWriter mw)
    {
        mw.getElement().visit(new HV());
    }

   
    private class HV implements Visitor
    {
        @Override
        public void visit(Element element)
        {
            log.debug("EltName: " + element.getName()
                    + ", attr: " + Collections2.transform(element.getAttributes(), new Function<Attribute, String>()
            {
                @Override
                public String apply(Attribute input)
                {
                    return input.getName() + "=" + input.getValue();
                }
            }));
           
            if(element.getName().equals("label"))
            {
                String classAttr = element.getAttribute("class");
                if(classAttr.contains("control-label"))
                {
                    element.attribute("class", labelClass);
                    labelProcessed = true;
                }
            }            
            else if(labelProcessed)
            {
                labelProcessed = false;
                element.wrap("div", "class", inputClass);
            }
        }
       
        private boolean labelProcessed = false;
    }
}

--------
---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

lprimak
I forgot, in the example, you also need to include class="form-horizontal" in beaneditform declaration,
i.e.

> <t:beaneditform t:mixins="formhorizontal" class="form-horizontal" labelClass="col-md-3" object="obj"/>


On Oct 20, 2013, at 4:15 PM, Lenny Primak wrote:

> I did some work on a mixin (very preliminary)
> It generates correct markup for form-horizontal layout for beaneditor.
>
> I will put it into flowlogix module or a separate module under flowlogix when its ready
> -------- Example --------
> <t:beaneditform t:mixins="formhorizontal" labelClass="col-md-3" object="obj"/>
> -------- Code ----------
> package com.flowlogix.website.mixins;
>
> import com.google.common.base.Function;
> import com.google.common.collect.Collections2;
> import lombok.extern.slf4j.Slf4j;
> import org.apache.tapestry5.BindingConstants;
> import org.apache.tapestry5.MarkupWriter;
> import org.apache.tapestry5.annotations.MixinAfter;
> import org.apache.tapestry5.annotations.Parameter;
> import org.apache.tapestry5.dom.Attribute;
> import org.apache.tapestry5.dom.Element;
> import org.apache.tapestry5.dom.Visitor;
>
> /**
> *
> * @author lprimak
> */
> @MixinAfter
> @Slf4j
> public class FormHorizontal
> {
>    private @Parameter(defaultPrefix = BindingConstants.LITERAL, value = "col-md-2") String labelClass;
>    private @Parameter(defaultPrefix = BindingConstants.LITERAL, value = "col-md-8") String inputClass;
>
>
>    public void afterRender(MarkupWriter mw)
>    {
>        mw.getElement().visit(new HV());
>    }
>
>
>    private class HV implements Visitor
>    {
>        @Override
>        public void visit(Element element)
>        {
>            log.debug("EltName: " + element.getName()
>                    + ", attr: " + Collections2.transform(element.getAttributes(), new Function<Attribute, String>()
>            {
>                @Override
>                public String apply(Attribute input)
>                {
>                    return input.getName() + "=" + input.getValue();
>                }
>            }));
>
>            if(element.getName().equals("label"))
>            {
>                String classAttr = element.getAttribute("class");
>                if(classAttr.contains("control-label"))
>                {
>                    element.attribute("class", labelClass);
>                    labelProcessed = true;
>                }
>            }            
>            else if(labelProcessed)
>            {
>                labelProcessed = false;
>                element.wrap("div", "class", inputClass);
>            }
>        }
>
>        private boolean labelProcessed = false;
>    }
> }
>
> --------
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: [T5.4] BeanEditor and Friends don't look as good as in Tap 5.3

lprimak
1.4-SNAPSHOT version of the flowlogix library now adds form-horizontal markup to every beaneditor / beanedifrom.


On Oct 20, 2013, at 4:20 PM, Lenny Primak wrote:

> I forgot, in the example, you also need to include class="form-horizontal" in beaneditform declaration,
> i.e.
>
>> <t:beaneditform t:mixins="formhorizontal" class="form-horizontal" labelClass="col-md-3" object="obj"/>
>
>
> On Oct 20, 2013, at 4:15 PM, Lenny Primak wrote:
>
>> I did some work on a mixin (very preliminary)
>> It generates correct markup for form-horizontal layout for beaneditor.
>>
>> I will put it into flowlogix module or a separate module under flowlogix when its ready
>> -------- Example --------
>> <t:beaneditform t:mixins="formhorizontal" labelClass="col-md-3" object="obj"/>
>> -------- Code ----------
>> package com.flowlogix.website.mixins;
>>
>> import com.google.common.base.Function;
>> import com.google.common.collect.Collections2;
>> import lombok.extern.slf4j.Slf4j;
>> import org.apache.tapestry5.BindingConstants;
>> import org.apache.tapestry5.MarkupWriter;
>> import org.apache.tapestry5.annotations.MixinAfter;
>> import org.apache.tapestry5.annotations.Parameter;
>> import org.apache.tapestry5.dom.Attribute;
>> import org.apache.tapestry5.dom.Element;
>> import org.apache.tapestry5.dom.Visitor;
>>
>> /**
>> *
>> * @author lprimak
>> */
>> @MixinAfter
>> @Slf4j
>> public class FormHorizontal
>> {
>>   private @Parameter(defaultPrefix = BindingConstants.LITERAL, value = "col-md-2") String labelClass;
>>   private @Parameter(defaultPrefix = BindingConstants.LITERAL, value = "col-md-8") String inputClass;
>>
>>
>>   public void afterRender(MarkupWriter mw)
>>   {
>>       mw.getElement().visit(new HV());
>>   }
>>
>>
>>   private class HV implements Visitor
>>   {
>>       @Override
>>       public void visit(Element element)
>>       {
>>           log.debug("EltName: " + element.getName()
>>                   + ", attr: " + Collections2.transform(element.getAttributes(), new Function<Attribute, String>()
>>           {
>>               @Override
>>               public String apply(Attribute input)
>>               {
>>                   return input.getName() + "=" + input.getValue();
>>               }
>>           }));
>>
>>           if(element.getName().equals("label"))
>>           {
>>               String classAttr = element.getAttribute("class");
>>               if(classAttr.contains("control-label"))
>>               {
>>                   element.attribute("class", labelClass);
>>                   labelProcessed = true;
>>               }
>>           }            
>>           else if(labelProcessed)
>>           {
>>               labelProcessed = false;
>>               element.wrap("div", "class", inputClass);
>>           }
>>       }
>>
>>       private boolean labelProcessed = false;
>>   }
>> }
>>
>> --------
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]