Twitter Bootstrap and Magritte
Locked
 
|
Hi, Based on the new file library (see previous mail) I've started work on a Twitter Bootstrap Magritte form renderer [1].
The repository includes the Twitter Bootstrap libraries, Twitter Bootstrap Magritte form and component renderers and a configurable Magritte form rendering example. If you want to give it a spin, you'll need the latest Seaside and Magritte 3 code, as well as the code from the repository.
I've put the sample up on seasidehosting - http://twitterbootstrap.seasidehosting.st/ Cheers
Nick _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Twitter Bootstrap and Magritte
|
On Mar 21, 2012, at 5:55 AM, Nick Ager wrote:
Nick, That's great! I am trying to finish up a Twitter Bootstrap based rewrite of my site and I will look at using Magritte after that. Regards, Larry
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Twitter Bootstrap Pagination issue
|
|
Hello, So, while we're on the subject of Twitter Bootstrap, I have run into a strange issue while moving my code into GLASS. I am using the Pagination control from Twitter Bootstrap. I have this code to generate the pagination control html div class: 'pagination'; with: [ html unorderedList: [ ... startPageNumber to: endPageNumber do: [ :pageNumber | html listItem class: (self pageNumberActiveForPage: pageNumber); with: [ html anchor callback: [ self goToPage: pageNumber ]; with: pageNumber ] …]] which generates this: <div class="pagination"><ul><li class="prev disable"><a href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k=1rwinvTch1gVzvnC&38">Previous</a></li><li class="active"><a href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k=1rwinvTch1gVzvnC&39">1</a></li><li class="inactive"><a href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k=1rwinvTch1gVzvnC&40">2</a></li><li class="inactive"><a href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k=1rwinvTch1gVzvnC&41">3</a></li><li class="inactive"><a href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k=1rwinvTch1gVzvnC&42">4</a></li><li class="inactive"><a href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k=1rwinvTch1gVzvnC&43">5</a></li><li class="inactive"><a href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k=1rwinvTch1gVzvnC&44">6</a></li><li class="inactive"><a href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k=1rwinvTch1gVzvnC&45">7</a></li><li class="inactive"><a href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k=1rwinvTch1gVzvnC&46">8</a></li><li class="inactive"><a href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k=1rwinvTch1gVzvnC&47">9</a></li><li class="inactive"><a href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k=1rwinvTch1gVzvnC&48">10</a></li><li class="next"><a href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k=1rwinvTch1gVzvnC&49">Next</a></li></ul></div> but when that goToPage: method is called, the pageNumber value is always the last one in the list, 10 in this case, even when I clicked on page 2. This code works fine on my local Seaside/Pharo image so I am kind of puzzled as to what is going on. Any thoughts? Larry _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
Hi,
It might be that you are seeing this issue: http://code.google.com/p/glassdb/issues/detail?id=221
You can work around it by using a WAValueHolder Hope this helps Nick
On 21 March 2012 12:03, Lawrence Kellogg <[hidden email]> wrote:
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Twitter Bootstrap Pagination issue
|
|
On Mar 21, 2012, at 9:11 AM, Nick Ager wrote: Hi, Thanks, Nick, I knew it was some sort of a problem related to temporaries in blocks. Unfortunately, this: html listItem class: (self pageNumberActiveForPage: (WAValueHolder with: pageNumber)); with: [ html anchor callback: [ self goToPage: (WAValueHolder with: pageNumber) ]; with: pageNumber ]]. does not fix the problem. I am calling contents in the receiving methods, of course. Am I doing something wrong in terms of using a WAValueHolder to fix the problem? Larry
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Twitter Bootstrap Pagination issue
|
|
Why not just subclass WABatchedList and render its pagination controls
as list items? On 12-03-21 06:35 AM, Lawrence Kellogg wrote: > > On Mar 21, 2012, at 9:11 AM, Nick Ager wrote: > >> Hi, >> >> It might be that you are seeing this issue: >> http://code.google.com/p/glassdb/issues/detail?id=221 >> discussion: >> http://forum.world.st/use-of-method-temporaries-in-callback-blocks-td2340788.htm >> >> You can work around it by using a WAValueHolder >> > > Thanks, Nick, I knew it was some sort of a problem related to > temporaries in blocks. > Unfortunately, this: > > html listItem > class: (self pageNumberActiveForPage: (WAValueHolder with: pageNumber)); > with: [ html anchor > callback: [ self goToPage: (WAValueHolder with: pageNumber) ]; > with: pageNumber ]]. > > does not fix the problem. I am calling contents in the receiving > methods, of course. > > Am I doing something wrong in terms of using a WAValueHolder to fix the > problem? > > Larry > >> Hope this helps >> >> Nick >> >> On 21 March 2012 12:03, Lawrence Kellogg <[hidden email] >> <mailto:[hidden email]>> wrote: >> >> Hello, >> So, while we're on the subject of Twitter Bootstrap, I have run >> into a strange issue while moving my code into GLASS. I am using the >> Pagination control from Twitter Bootstrap. >> >> I have this code to generate the pagination control >> >> html div >> class: 'pagination'; >> with: [ >> html unorderedList: [ >> ... >> startPageNumber to: endPageNumber do: [ :pageNumber | >> html listItem >> class: (self pageNumberActiveForPage: pageNumber); >> with: [ html anchor >> callback: [ self goToPage: pageNumber ]; >> with: pageNumber ] >> …]] >> which generates this: >> >> <div class="pagination"><ul><li class="prev disable"><a href="/ >> PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >> 1rwinvTch1gVzvnC&38">Previous</a></li><li class="active"><a >> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >> 1rwinvTch1gVzvnC&39">1</a></li><li class="inactive"><a >> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >> 1rwinvTch1gVzvnC&40">2</a></li><li class="inactive"><a >> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >> 1rwinvTch1gVzvnC&41">3</a></li><li class="inactive"><a >> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >> 1rwinvTch1gVzvnC&42">4</a></li><li class="inactive"><a >> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >> 1rwinvTch1gVzvnC&43">5</a></li><li class="inactive"><a >> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >> 1rwinvTch1gVzvnC&44">6</a></li><li class="inactive"><a >> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >> 1rwinvTch1gVzvnC&45">7</a></li><li class="inactive"><a >> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >> 1rwinvTch1gVzvnC&46">8</a></li><li class="inactive"><a >> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >> 1rwinvTch1gVzvnC&47">9</a></li><li class="inactive"><a >> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >> 1rwinvTch1gVzvnC&48">10</a></li><li class="next"><a href="/ >> PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >> 1rwinvTch1gVzvnC&49">Next</a></li></ul></div> >> >> but when that goToPage: method is called, the pageNumber value is >> always the last one in the list, 10 in this case, even >> when I clicked on page 2. This code works fine on my local >> Seaside/Pharo image so I am kind of puzzled as to what is going >> on. Any thoughts? >> >> Larry >> >> _______________________________________________ >> seaside mailing list >> [hidden email] >> <mailto:[hidden email]> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> >> >> _______________________________________________ >> seaside mailing list >> [hidden email] >> <mailto:[hidden email]> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
In reply to this post by Larry Kellogg
I think you want to assign WAValueHolder to a temporary, something like:
| pageNumberHolder | pageNumberHolder := WAValueHolder with: pageNumber. html listItem class: (self pageNumberActiveForPage: pageNumberHolder contents);
with: [ html anchor callback: [ self goToPage: pageNumberHolder contents ];
with: pageNumber ]]. On 21 March 2012 13:35, Lawrence Kellogg <[hidden email]> wrote:
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Twitter Bootstrap Pagination issue
|
|
On Mar 21, 2012, at 10:01 AM, Nick Ager wrote: I think you want to assign WAValueHolder to a temporary, something like: Well, I tried this, and I still can't get it to work. Does it matter where I declare pageNumberHolder? I have tried declaring it in the innermost block, and as a local to the method, and in between, but it still fails. Stumped. Larry
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Twitter Bootstrap Pagination issue
|
|
In reply to this post by Paul DeBruicker
On Mar 21, 2012, at 9:59 AM, Paul DeBruicker wrote: > Why not just subclass WABatchedList and render its pagination controls as list items? > > Paul, Thanks for this recommendation, I see that I have reinvented WABatchedList, ha ha. I didn't know the class existed. Mine does some other stuff, but I will see about subclassing WABatchList to do what I need to do. Larry > > > > On 12-03-21 06:35 AM, Lawrence Kellogg wrote: >> >> On Mar 21, 2012, at 9:11 AM, Nick Ager wrote: >> >>> Hi, >>> >>> It might be that you are seeing this issue: >>> http://code.google.com/p/glassdb/issues/detail?id=221 >>> discussion: >>> http://forum.world.st/use-of-method-temporaries-in-callback-blocks-td2340788.htm >>> >>> You can work around it by using a WAValueHolder >>> >> >> Thanks, Nick, I knew it was some sort of a problem related to >> temporaries in blocks. >> Unfortunately, this: >> >> html listItem >> class: (self pageNumberActiveForPage: (WAValueHolder with: pageNumber)); >> with: [ html anchor >> callback: [ self goToPage: (WAValueHolder with: pageNumber) ]; >> with: pageNumber ]]. >> >> does not fix the problem. I am calling contents in the receiving >> methods, of course. >> >> Am I doing something wrong in terms of using a WAValueHolder to fix the >> problem? >> >> Larry >> >>> Hope this helps >>> >>> Nick >>> >>> On 21 March 2012 12:03, Lawrence Kellogg <[hidden email] >>> <mailto:[hidden email]>> wrote: >>> >>> Hello, >>> So, while we're on the subject of Twitter Bootstrap, I have run >>> into a strange issue while moving my code into GLASS. I am using the >>> Pagination control from Twitter Bootstrap. >>> >>> I have this code to generate the pagination control >>> >>> html div >>> class: 'pagination'; >>> with: [ >>> html unorderedList: [ >>> ... >>> startPageNumber to: endPageNumber do: [ :pageNumber | >>> html listItem >>> class: (self pageNumberActiveForPage: pageNumber); >>> with: [ html anchor >>> callback: [ self goToPage: pageNumber ]; >>> with: pageNumber ] >>> …]] >>> which generates this: >>> >>> <div class="pagination"><ul><li class="prev disable"><a href="/ >>> PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >>> 1rwinvTch1gVzvnC&38">Previous</a></li><li class="active"><a >>> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >>> 1rwinvTch1gVzvnC&39">1</a></li><li class="inactive"><a >>> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >>> 1rwinvTch1gVzvnC&40">2</a></li><li class="inactive"><a >>> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >>> 1rwinvTch1gVzvnC&41">3</a></li><li class="inactive"><a >>> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >>> 1rwinvTch1gVzvnC&42">4</a></li><li class="inactive"><a >>> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >>> 1rwinvTch1gVzvnC&43">5</a></li><li class="inactive"><a >>> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >>> 1rwinvTch1gVzvnC&44">6</a></li><li class="inactive"><a >>> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >>> 1rwinvTch1gVzvnC&45">7</a></li><li class="inactive"><a >>> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >>> 1rwinvTch1gVzvnC&46">8</a></li><li class="inactive"><a >>> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >>> 1rwinvTch1gVzvnC&47">9</a></li><li class="inactive"><a >>> href="/PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >>> 1rwinvTch1gVzvnC&48">10</a></li><li class="next"><a href="/ >>> PracticeJournalLoginTask?_s=iwwzfPJxijSN6asi&_k= >>> 1rwinvTch1gVzvnC&49">Next</a></li></ul></div> >>> >>> but when that goToPage: method is called, the pageNumber value is >>> always the last one in the list, 10 in this case, even >>> when I clicked on page 2. This code works fine on my local >>> Seaside/Pharo image so I am kind of puzzled as to what is going >>> on. Any thoughts? >>> >>> Larry >>> >>> _______________________________________________ >>> seaside mailing list >>> [hidden email] >>> <mailto:[hidden email]> >>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>> >>> >>> _______________________________________________ >>> seaside mailing list >>> [hidden email] >>> <mailto:[hidden email]> >>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> >> >> >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
In reply to this post by Larry Kellogg
Hi Larry,
Have you tried making pageNumber an instance variable - if you try this you don't need to worry about WAValueHolder. Otherwise as it's a Gemstone specific issue perhaps Dale could shed some light on the problem on the Gemstone list.
Cheers Nick _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Twitter Bootstrap Pagination issue
|
|
On Mar 21, 2012, at 12:01 PM, Nick Ager wrote: Hi Larry, Making it an instance variable doesn't seem to help either. I guess I will post something on the Gemstone list. Thanks for trying to help. It is an annoying bug and something I need to fix. Larry
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Twitter Bootstrap and Magritte
|
|
In reply to this post by Nick
Hello Nick,
This is a great Seaside and Magritte addon! I extended the code a little with a subclass of MAReport so you can use Bootstrap to style your tables/reports. Including the pagination controls.
I am working on a web application that is based on jQueryUI and the Blueprint CSS Framework. Perhaps I can replace Blueprint with Bootstrap. It seems that Bootstrap has a lot more to offer than Blueprint. I think I will still need jQueryUI for the datepicker and dialog controls.
Cheers, Jan. On Wed, Mar 21, 2012 at 10:55 AM, Nick Ager <[hidden email]> wrote:
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
Hi Jan,
Thanks that's a fantastic addition. I've updated http://twitterbootstrap.seasidehosting.st/
Bootstrap supports dialogs - which it calls modals -> http://twitter.github.com/bootstrap/javascript.html#modals
Last time I looked they were not as functional JQueryUI dialogs though bootstrap is developing so quickly that if it doesn't do what you need now, it could soon... BTW: I integrated the JQueryUI date picker with Magritte - see MAJQDateInputComponent in Magritte-JQuery of http://source.lukas-renggli.ch/magritte3addons
Cheers Nick _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Twitter Bootstrap and Magritte
|
|
Hi. I'm making right now some templates for pier, and I can't to decide to use Blueprint or TwitterBootstrap :(
Pier templates for blog currently use Blueprint, but I guess that Bootstrap is the better choise for make something from cero (like me). Any comment/thought is welcome :). Thanks in advance. Regards. 2012/3/23 Nick Ager <[hidden email]> Hi Jan, _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
I would go with Twitterbootstrap - it has widespread adoption, and
encompasses considerably more than blueprint. - ideally I'd like to update the "standard" templates to use Twitterbootstrap On 28 May 2012 15:23, Gastón Dall' Oglio <[hidden email]> wrote: > Hi. > > I'm making right now some templates for pier, and I can't to decide to use > Blueprint or TwitterBootstrap :( > Pier templates for blog currently use Blueprint, but I guess that Bootstrap > is the better choise for make something from cero (like me). > > Any comment/thought is welcome :). Thanks in advance. > Regards. > > 2012/3/23 Nick Ager <[hidden email]> >> >> Hi Jan, >> >>> I extended the code a little with a subclass of MAReport so you can use >>> Bootstrap to style your tables/reports. Including the pagination controls. >> >> >> Thanks that's a fantastic addition. I've >> updated http://twitterbootstrap.seasidehosting.st/ >> >>> >>> I am working on a web application that is based on jQueryUI and the >>> Blueprint CSS Framework. Perhaps I can replace Blueprint with Bootstrap. It >>> seems that Bootstrap has a lot more to offer than Blueprint. I think I will >>> still need jQueryUI for the datepicker and dialog controls. >> >> >> Bootstrap supports dialogs - which it calls modals >> -> http://twitter.github.com/bootstrap/javascript.html#modals >> Last time I looked they were not as functional JQueryUI dialogs though >> bootstrap is developing so quickly that if it doesn't do what you need now, >> it could soon... >> >> BTW: I integrated the JQueryUI date picker with Magritte - >> see MAJQDateInputComponent in Magritte-JQuery >> of http://source.lukas-renggli.ch/magritte3addons >> >> Cheers >> >> Nick >> >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Twitter Bootstrap and Magritte
|
|
Hi Nick.
2012/5/28 Nick Ager <[hidden email]> I would go with Twitterbootstrap - it has widespread adoption, and I would go with Twitterbootstrap - it has widespread adoption, and encompasses considerably more than blueprint. ok, I go for it! I will share my templates, if I can do something good :)
yes, that would good. Thanks you.
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Twitter Bootstrap and Magritte
|
|
Hi Nick. I have modified blog template for to use TWBS, instead Blueprint. I have added a fluid version of templates. The templates used in structures can be changed from PierAdmin -> context menu -> settings -> template. I have added a new template for a blog post, how can I set it for default to a new posts? For try, load the st attached, create a new kernel from blog distribution, remove PRBlueprintLibrary and add TWBSDevelopmentLibrary. This works fine (I guess), but I only changed templates, I know there are several other sites in Pier where Blueprint is used. Regards. 2012/5/28 Gastón Dall' Oglio <[hidden email]> Hi Nick. _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
PRBlogKernelDistribution-templates.st (10K) |
|
Thanks Gaston - I'll have a look at it tonight - sounds great
On 28 May 2012 22:08, Gastón Dall' Oglio <[hidden email]> wrote:
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Twitter Bootstrap and Magritte
|
|
You're welcome. The changes I made was very simples, only change some markups, so that only there some visually changes, but is really good see how now layout respond to browser size changes. And of course could be used ton of twbs's characteristic in blog templates, without be required make Pier's wrappers for jquery plugins, directly pier's widget with twbs markup. I guess that for really change to twbs some deep cleanup is need is Pier, in css and markup, let us know if we can help. Definitively, twbs will be that I use for Pier templates :) Regards.
2012/5/29 Nick Ager <[hidden email]> Thanks Gaston - I'll have a look at it tonight - sounds great _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
«
Return to Seaside General
|
1 view|%1 views
| Free forum by Nabble | Edit this page |