Guillermo,
we would definitely appreciate feedback on customization. I'll try to
quickly cover our approach.
In general, the look and feel is controlled completely by CSS. Our
guiding principal is to use minimal, semantic (-ish) markup for
representation and control all visual styles through CSS. Where
possible, we use the browser's built-in capabilities to do things (for
instance, the hover state on buttons is done using the CSS hover
psuedo class on an a tag). There should be no hard-coded values for
anything in the javascript code except the location of a single
transparent pixel PNG image that is used for a variety of core things
including detecting the base url for the library.
We have tried to create a set of straight-forward classes and
selectors in the CSS files with comments throughout to help orient
you. There are some common principals used for most Jx things:
1. Background images: We use background images almost exclusively,
except for icons in buttons, menus and tree branches... but even those
can be a_pixel.png with a background image. This enables CSS sprite
techniques to be used. In many cases changing the background images
creates the overall "theme".
2. Sliding doors: buttons (and button based objects like tabs) use the
sliding doors technique which is essentially a few nested left floated
block objects with background images.
3. Chrome: dialogs and menus and flyouts all use a chroming technique
we developed (but haven't named ;) that uses four positioned dives
with the chrome image repeated four times... kinda like sliding doors,
but works in 2 dimensions. Basically changing the chrome image would
really change the look of a dialog.
4. Padding: Many objects rely on padding to change the relationship
between the background visual elements and the content. if changing
the background images is not enough, then changing the padding may be
the next step.
Two approaches can be taken to create a new visual style or "theme":
1. Creating a new theme from scratch (typically by taking an existing
theme and tweaking it).
If the general size of things is appropriate, it is very easy to just
replace the existing set of images and look for any colors in the CSS
that need updating (text color and a couple of border and background
colors).
If you want to create a different feel by changing the size of basic
elements like buttons, though, then you will to get more involved in
how the HTML elements are structured and the CSS classes affect them
by modifying the padding, sizes, line-heights, and some other such
properties.
2. Overriding the styles and images through another CSS file created
for that purpose.
Using something like firebug, it is possible to play with tweaking CSS
properties and find the minimal set of CSS overrides you need to
create to achieve what you want. You can even change the look and
feel of a single dialog by specifying a new chrome image via CSS
without affecting other dialogs if you use #id selectors appropriately.
We have tried very hard to make JxLib easy to customize, but this
should be taken with a grain of salt - its only easy if you understand
CSS techniques and take time to familiarize yourself with the
structure of the JxLib objects.
We are working on creating documentation that should help to lower the
bar for new users to create their own themes as well.
Thanks for your interest
Paul
On 11-Nov-08, at 4:43 PM, Guillermo Rauch wrote:
Looks like solid work has been done. Haven't reviewed the code either.
I wonder what approach you have taken for customization. I hear UI
libs such as EXT can be tough to customize to match custom look and
feel.
On Tue, Nov 11, 2008 at 6:46 PM, Paul Spencer <[EMAIL PROTECTED]>
wrote:
Feedback on improving the code style and structure is certainly
welcome! I did the coding and am not an experienced mootools user
so I'm sure I can learn from you guys.
Cheers
Paul
On 11-Nov-08, at 3:37 PM, Jan Kassens wrote:
Look and feel is pretty good. (code needs to be evaluated).
On Nov 11, 2008, at 21:19, Rajeev J Sebastian wrote:
On Wed, Nov 12, 2008 at 1:24 AM, Paul Spencer <[EMAIL PROTECTED]>
wrote:
The JxLib Team
(Paul, Fred and Jason)
Sounds and looks great!
Regards
Rajeev J Sebastian
--
Jan - MooTools comitter
twitter/blog: http://kassens.net
--
Guillermo Rauch
http://devthought.com
