You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Barry Books <tr...@gmail.com> on 2011/10/28 15:14:29 UTC

Feedback Requested On Twitter Bootstrap Module

I'm about to implement a new site using Twitter Bootstrap so I've been
working on a Tapestry module to support Bootstrap. The module will be
hosted here https://github.com/trsvax/tapestry-bootstrap and will be
licensed Apache2.

I've been thinking about how to implement a MediaGrid that uses the
pagination provided by Bootstrap. In doing so I've tried to solve some
of the problems I've had with the Tapestry Grid component.
Specifically that would be use of an event to move from page to page
and the difficulty of controlling the pieces that make up the grid. So
I've come up with a design that uses Environmental and Mixins to build
the grid.

In summary the individual pieces that make up the grid get their
parameters from the environment like this

@Property
@Environmental
private PaginationEnvironment values;
	
@Parameter(value="values.currentPage",required=true)
private Integer currentPage;

There is a mixin that contains all the controlling logic and pushes
the values into the environment so you end up with a template like
this

 <t:any t:mixins="tb/pager" source="items">
      <t:tb.pagination/>
      <t:tb.mediagrid row="item">
      	<a href="#123">
			<img class="thumbnail" src="${url}"/>
			<h3>${item.mediaTitle}</h3><button class="btn">+</button>
		</a>
      </t:tb.mediagrid>
      <t:tb.pagination/>
</t:any>

I've written a longer description here http://trsvax.com/blog

One question would Metadata be a better way to solve this? I've never
used that feature before. Secondly does this seem like a good
approach? And finally are there any pitfalls I have not thought of?

Thanks
Barry

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Feedback Requested On Twitter Bootstrap Module

Posted by Dragan Sahpaski <dr...@gmail.com>.
Ok nice will look over it soon.

Cheers,
Dragan Sahpaski



On Fri, Oct 28, 2011 at 3:30 PM, Barry Books <tr...@gmail.com> wrote:

> The blog code is here https://github.com/trsvax/Blog. I'm always
> interested in pull requests ;)
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>

Re: Feedback Requested On Twitter Bootstrap Module

Posted by Barry Books <tr...@gmail.com>.
The blog code is here https://github.com/trsvax/Blog. I'm always
interested in pull requests ;)

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Feedback Requested On Twitter Bootstrap Module

Posted by Dragan Sahpaski <dr...@gmail.com>.
Hi Barry,
Please add RSS on your blog when you have the time.

Nice Work !

Cheers,
Dragan Sahpaski



On Fri, Oct 28, 2011 at 3:14 PM, Barry Books <tr...@gmail.com> wrote:

> I'm about to implement a new site using Twitter Bootstrap so I've been
> working on a Tapestry module to support Bootstrap. The module will be
> hosted here https://github.com/trsvax/tapestry-bootstrap and will be
> licensed Apache2.
>
> I've been thinking about how to implement a MediaGrid that uses the
> pagination provided by Bootstrap. In doing so I've tried to solve some
> of the problems I've had with the Tapestry Grid component.
> Specifically that would be use of an event to move from page to page
> and the difficulty of controlling the pieces that make up the grid. So
> I've come up with a design that uses Environmental and Mixins to build
> the grid.
>
> In summary the individual pieces that make up the grid get their
> parameters from the environment like this
>
> @Property
> @Environmental
> private PaginationEnvironment values;
>
> @Parameter(value="values.currentPage",required=true)
> private Integer currentPage;
>
> There is a mixin that contains all the controlling logic and pushes
> the values into the environment so you end up with a template like
> this
>
>  <t:any t:mixins="tb/pager" source="items">
>      <t:tb.pagination/>
>      <t:tb.mediagrid row="item">
>        <a href="#123">
>                        <img class="thumbnail" src="${url}"/>
>                        <h3>${item.mediaTitle}</h3><button
> class="btn">+</button>
>                </a>
>      </t:tb.mediagrid>
>      <t:tb.pagination/>
> </t:any>
>
> I've written a longer description here http://trsvax.com/blog
>
> One question would Metadata be a better way to solve this? I've never
> used that feature before. Secondly does this seem like a good
> approach? And finally are there any pitfalls I have not thought of?
>
> Thanks
> Barry
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>

Re: Feedback Requested On Twitter Bootstrap Module

Posted by Lenny Primak <lp...@hope.nyc.ny.us>.
I am no JavaScript expert (it takes me 4 hrs debugging time every time I touch any JS code!)
so I can't give any JS suggestions other than somebody's probably written it already :)

But I do suggest that you drop pagination altogether.  It's an artificial concept
which was invented for green screen and the web only because scrolling
was not available.  The time for it has gone and history should forget it.

On Oct 28, 2011, at 11:49 AM, Barry Books wrote:

> That's an interesting comment. I've got the basics working now.
> 
> https://github.com/trsvax/tapestry-bootstrap/tree/master/src/main/java/com/trsvax/bootstrap
> 
> This template displays a grid
> 
> <t:tb.mediagrid t:id="gallery" value="value">
>      	<a href="#123">
>             <img class="thumbnail" src="${url}"/>
>             <h3>${value.mediaTitle}</h3><button class="btn">+</button>
>        </a>
> </t:tb.mediagrid>
> 
> What would be slick is if you drop in a pagination component it uses
> it else it behaves as you suggest. I guess the question is how does
> this mixin figure out if it contains a pagination component or not? I
> guess I could mark it with @Paginator.
> 
> Even better might be.
> 
> <noscript>
> <t:tb.pagination/>
> </noscript>
> 
> Got any pointers to the javascript to make this work?
> 


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Feedback Requested On Twitter Bootstrap Module

Posted by Barry Books <tr...@gmail.com>.
That's an interesting comment. I've got the basics working now.

https://github.com/trsvax/tapestry-bootstrap/tree/master/src/main/java/com/trsvax/bootstrap

This template displays a grid

<t:tb.mediagrid t:id="gallery" value="value">
      	<a href="#123">
             <img class="thumbnail" src="${url}"/>
             <h3>${value.mediaTitle}</h3><button class="btn">+</button>
        </a>
</t:tb.mediagrid>

What would be slick is if you drop in a pagination component it uses
it else it behaves as you suggest. I guess the question is how does
this mixin figure out if it contains a pagination component or not? I
guess I could mark it with @Paginator.

Even better might be.

<noscript>
<t:tb.pagination/>
</noscript>

Got any pointers to the javascript to make this work?

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Feedback Requested On Twitter Bootstrap Module

Posted by Lenny Primak <lp...@hope.nyc.ny.us>.
I would be very instated in a pagination-less grid. 
Something like google reader where when you scroll it automatically updates with the new data for seamless and infinite scrolling. Apple store does the same. Pagination is so 1990s. 



On Oct 28, 2011, at 9:14 AM, Barry Books <tr...@gmail.com> wrote:

> I'm about to implement a new site using Twitter Bootstrap so I've been
> working on a Tapestry module to support Bootstrap. The module will be
> hosted here https://github.com/trsvax/tapestry-bootstrap and will be
> licensed Apache2.
> 
> I've been thinking about how to implement a MediaGrid that uses the
> pagination provided by Bootstrap. In doing so I've tried to solve some
> of the problems I've had with the Tapestry Grid component.
> Specifically that would be use of an event to move from page to page
> and the difficulty of controlling the pieces that make up the grid. So
> I've come up with a design that uses Environmental and Mixins to build
> the grid.
> 
> In summary the individual pieces that make up the grid get their
> parameters from the environment like this
> 
> @Property
> @Environmental
> private PaginationEnvironment values;
>    
> @Parameter(value="values.currentPage",required=true)
> private Integer currentPage;
> 
> There is a mixin that contains all the controlling logic and pushes
> the values into the environment so you end up with a template like
> this
> 
> <t:any t:mixins="tb/pager" source="items">
>      <t:tb.pagination/>
>      <t:tb.mediagrid row="item">
>          <a href="#123">
>            <img class="thumbnail" src="${url}"/>
>            <h3>${item.mediaTitle}</h3><button class="btn">+</button>
>        </a>
>      </t:tb.mediagrid>
>      <t:tb.pagination/>
> </t:any>
> 
> I've written a longer description here http://trsvax.com/blog
> 
> One question would Metadata be a better way to solve this? I've never
> used that feature before. Secondly does this seem like a good
> approach? And finally are there any pitfalls I have not thought of?
> 
> Thanks
> Barry
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
> 

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org