Twitter Bootstrap

Dear all,

In Aida 6.5 there is Twitter Bootstrap CSS framework present, in
BootstrapLibrary under Aida-Libraries. It would be very nice if we
redesign default Aida style (look&feel) under this CSS framework,
because its design is nice and fresh.

More about Twitter Bootstrap:
http://twitter.github.com/bootstrap/

How to use it in Aida:

 - make new style class by sublcassing WebStyle
 - call 'BootstrapLibrary ensure' from some layout method, like well
   known #pageFrameWith:title:
 - use Bootstrap CSS classes in your elements, like:

        e table class: #'table-striped'.


Have someone some time to start such a redesign?

Best regards
Janko


--
Janko Mivšek
Aida/Web
Smalltalk Web Application Server
http://www.aidaweb.si
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida

Hi Juanko.
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida

Hi Gastón,

Dne 17. 10. 2012 14:05, piše Gastón Dall' Oglio:

> One sugestion, IMHO is a good idea wrapping css classes into extension
> methods, like "e table beStriped" or "e table tbBeStriped" (Tb for
> TwitterBootstrap). First, TB developers can to change named of css
> classes then you decrease the impact  needed in the image to adapt.
> Second, you can used autocomplete in the image to find these wrapped
> methods.

Good idea! Such methods already got useful in my recent AidaMobile work
where jQuery Mobile is used. This framework namely uses CSS class and
'data-*' attributes extensively. Without covering them with Smalltalk
methods the code would be really ugly.

One more question: where to put them, as an extension/override of
WebElement in BootstrapLibrary? WebElement has too many methods already,
it would be really good to put them somewhere else.

Naming is another question: #beStripped or just #stripped? twBeStripped
or tbStripped seems too ugly to me .... I'm actively avoiding such
namespacing for classes, so I really don't like to make the code even
more dirty with namespacing the methods too.

>
> #beStriped
>    self class: #'table-striped'
>
> my 2 cents.
>
> Regards.
>
> PS: I have not had time to take a look at yet to Aida and Scribo.

So we will to the best that Aida will be even more worth trying when
you'll have time ;)

Best regards
Janko


--
Janko Mivšek
Aida/Web
Smalltalk Web Application Server
http://www.aidaweb.si
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida

_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida

I like the idea too :)

One thought, since the creators of Bootstrap have just left twitter, it may be a good idea to make it easy to switch to alternatives like Zurb's Foundation

mmm responsive tables, interesting!!! TwitterBootstrap lack of this characteristic if I remember correctly:
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida

Could you create a little sample?  Maybe something like a system browser?

I noticed that there are a number of libraries in WebMethodLibrary and was wondering if someone could explain in simple terms how the WebMethodLibrary and WebMethodLibImporter works?  Like, how do you upgrade Bootstrap, how do you add a Foundation library, how do you add another library like HighCharts etc and of course how do you use them for a simple web app?

Dne 19. 10. 2012 14:57, piše Geert Claes:

> I noticed that there are a number of libraries in WebMethodLibrary and was
> wondering if someone could explain in simple terms how the WebMethodLibrary
> and WebMethodLibImporter works?  

Let we look at class side of BootstrapLibrary for instance:

- every original resource is saved in separate method in 'resources'
category. Directory path and file extension is 'encoded' in method name,
like method #cssBootstrapMinCss for css/bootstrap.min.css

- mapping between urls/file paths and methods is in method
#urlToMethodMap, which looks like:

 ^MapCache := Dictionary new
   at: '/css/bootstrap.min.css'
   put: #(cssBootstrapMinCss 'text/css');
   yourself.

MIME content type is also added in that map. Text resources are saved in
methods as text (UTF8 also supported!), while binarires like images are
saved as literal byte array.

Note also method #baseUrl, where base or root part of library's URL is
saved, like '/bootstrap' for Twitter Bootstrap library. This one is
important to know and set up correctly to separate different libraries
among them. Together we get a complete URL for above resource:

        /bootstrap/css/bootstrap.min.css

> Like, how do you upgrade Bootstrap, how do
> you add a Foundation library, how do you add another library like HighCharts
> etc and of course how do you use them for a simple web app?

To upgrade some existing library you go to its class comment when you'll
find a script of last upgrade. For Bootstrap:

WebMethodLibImporter default
 baseUrl: '/bootstrap';
 library: 'BootstrapLibrary';
 package: 'Aida-Libraries';
 import:
  'http://twitter.github.com/bootstrap/assets/bootstrap.zip' 
                                   "v2.1.0, imported aug12"

As you can see you can import/upgrade directly from the internet and
from .zip files.

Class WebMethodLibImporter is there to care about all importing and
upgrading tasks. So far finished only on Visualworks, help here to make
it workable on Squeak/Pharo is welcomed!

So, to prepare and import HighCharts, create HighChartsLibrary as
subclass of WebMethodLibrary and prepare proper import/upgrade script in
class comment. Then just evaluate it and library will be filled with
proper resource methods and a map.

To ensure proper link in page header you also need to provide an #ensure
method, which is then called from your app code before using the library:

   MyApp>>viewMain
      BootstrapLibrary ensure.
      ...
      e class: #'table-such-and-such' "Bootstrap CSS class"


This is how Bootstrap #ensure method currently looks like:

   BootstrapLibrary class>>ensure

     "ensure Bootstrap resources in page header"
     "Just CSS for now!"
     | page |
     page := self context page.
     self ensure: '/bootstrap/css/bootstrap.css' onPage: page.



All this is explained also on:

        http://www.aidaweb.si/method-libraries


Hope this helps a bit!
Janko


--
Janko Mivšek
Svetovalec za informatiko
Eranova d.o.o.
Ljubljana, Slovenija
www.eranova.si
tel:  01 514 22 55
faks: 01 514 22 56
gsm: 031 674 565
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida

Dne 17. 10. 2012 21:57, piše Geert Claes:
> I like the idea too :)
>
> One thought, since the creators of Bootstrap have just left twitter, it may
> be a good idea to make it easy to switch to alternatives like Zurb's
> Foundation

What are the differences between those twoo? Can they use the same CSS
classes? If so, it would be preety simple to use, just #ensure the other
library and a whole CSS frameworks will change for your app!

Janko

--
Janko Mivšek
Svetovalec za informatiko
Eranova d.o.o.
Ljubljana, Slovenija
www.eranova.si
tel:  01 514 22 55
faks: 01 514 22 56
gsm: 031 674 565
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida

Janko Mivšek wrote

What are the differences between those two? Can they use the same CSS classes? If so, it would be preety simple to use, just #ensure the other library and a whole CSS frameworks will change for your app!

Difference, well they are competing solutions.  Mind you, both are not just CSS as they rely on some JavaScript too and Zurb's Foundation uses the CSS3 extention Sass or SCSS which looks better than standard CSS.

Not sure how Aida does it but I know Bootstrap places the JavaScript files at the end of the files to speed up loading.