It doesn’t represent only a “small revision”, but adds more flexibility to the code and a lot of internal enanchements: better performances (speed and structure), less lines of code, more components. I highly recommend to update the previous version with this more powerful and complete last one.

Now let’s see the major changesets and new features:

• new Fx.Cycles effects: inOutLeft and inOutRight
• new Fx.Cycle tranistion, linear, to change the slides without a particular animation
• new internal engine of Fx.Cycle and Fx.Cycles to allow to create thumbnail based and timed animations
• new Virtual transition: fold and new Virtual option: adjustStyles to allow the boxes to appear in the correct positions on window resizing
• new Plug-In: Tutorial, which allows to create professional step-by-step presentations (cycled or not)
• new Plug-In: Tabs, which allows to create professional tab based presentations
• new Overlay rendering: performance improved especially for IE6
• new internal structures to make the whole result more robust and flexible

As for the code, the examples section is now updated and you will find some new demos:

• Tutorial
• Tabs
• Tabs Fixed
• Cycles Extra

As for the previous releases, the blog and the forum are always opened and tips, suggestions, bug reports and responses are highly welcomed.

Now do stop talking and try moo.rd 1.3.2 out!

New syntaxes, new powers

moo.rd has become more powerful, flexible, modular and elegant: in a few words, a totally another library. Amazing enanchements has been made, a lot of new components, constructors and capabilities has been added. But one article isn’t enough to describe all these changesets, so we’ll found some tutorials and exaplanations on this blog in the next days.

Remeber, no one component is still the previous…

However, i want to report here some of the changeset/enanchements i created.

First of all, the 1.3.1 is totally based on the MooTools 1.2 version, so it uses the new MooTools syntax and logic.

New version, new library

As i said above, this version brings many super features. Not only all the components have been enanched, but every line of code make good use of the MooTools syntaxes, and are now fully-fashionable. moo.rd is now a real powerful and modular library which extends MooTools and attach to it a lot of amazing and useful features.

New native functions and new extensions for a fully modular OOP code

Some native functions have been attached to the Native constructors and the previous have been totally enanched.

In addiction, i created new extensions to the core language, like the Overlay Utility Class that is included into many other Classes, for a more flexible and modular OOP code.

The browser.js and type.js are extensions to respectively the Browser Hash and the $type function.

New effects, new fashion

The Fx effects are one of the most apprecciated components of moo.rd, so i have enanched all their functionalities. You can use an effect in three ways: by creating an instance, by using the Element.fx metod which returns an instance or by using the Element.effect method that uses the Element.Properties Hash to store and retrieve an Fx instance and use it immediately (returning the element).

In addiction, the effects files have now new namespaces to more accurately describe their contents and purposes: base, morph, fade, move, toggle, extra, cycle and cycles. You can learn more about in the last article dedicated to them: Fx effects: less instances, more enanchements

Customs Winows

The Customs are already here, more powerful than ever.

Now you can customize every features of these modal boxes and create all the main browser’s windows: alerts, confirms and prompts with your own styles.

New Table and Make

A lot of new features have been added to the Table and Make Classes.

Glider, Cycle and Cycles, what a wonderful news!

With the Glider Class you can create fully-customizable slideshows with all the features you’ve ever loved: caption, arrows, arrows of the keyboard support, thumbnails, full-screen mode and many more.

The new Fx.Cycle and Fx.Cycles Classes let you to make amazing cycle slideshows based on amazing transitions that you can pick from the internal storage (25 kinds of different transition currently available). Not only, you can create your own transitions with ease.

Virtual Boxes

The new Virtual.Box, Virtual.Ajax and VIrtual.HTML Classes let you to create virtual modal boxes and create respectively professional image presentations, dynamic contents (loaded from the server) and static html contents,. All feauters are fully-customizable, for example the entry effect and the caption.

One instance, infinite possibilities. Just add ‘virtualbox’, ‘virtualajax’ and ‘virtualhtml’ as values of class names to your links and have fun.

In addiction, there are the "single" versions of each Virtual Class, to allow you to create modal boxes with all the features mentioned before, but not bound with a collection.

Download Fashion

As i described here some time ago, now you can download moo.rd in a completely comfortable and fully safe way.

The Download Builder will include all the components needed by the components you choose. In addiction you can decide the compression type and whether include the MooTools framework into the same script. So you can customize the download of moo.rd as you want, in all its features.

New examples

For showing the new mechanics of this latest version i have written a lot of demos that you can find in the example section. There you can pick all the sourcecodes to learn how to work with the 1.3.1 and see this last one in action.

Try it out!

Now it’s time to try moo.rd 1.3.1 out, so go to the download page and get it now!

Don’t forget to post here your thoughts and your tips, and open a topic in the forum to report bugs or suggestions.

RD

I have added a new, amazing feature to the Download Builder, which will come as soon as the new release is ready: the complete integration between moo.rd and MooTools.

In addiction to the compression type, now you can decide whether include MooTools into the final script or not. Not only: you can pick from two MooTools versions. The following are the possibilities:

• MooTools Needed: adds only the MooTools components needed by moo.rd. This won’t include plug-ins and a few other things. Pick it if you want a lite version of the script, with no renounce of the core.
• MooTools Full: as the phrase says, this adds the full MooTools script, packed.
• No MooTools: don’t include MooTools. Pick it if you want to build a customized version of MooTools, and be careful about the components you choice!

The name of the final script will be generated considering your choices, as its inner header.

If the Web2.0 wants to give to the users the capability to fully customize the page or the application as they want, this new feature makes the Download Builder a complete Web2.0 feature!

Break with the standard, static downloads… Now you can build out all the versions you need, with the consciousness that all the components required are automatically included in an elegant way, and the Builder will make the work for you.

Into the 1.3.1 version, i have rewritten the engine which represents the effects repository. In a few words, the changements can be described as “less instances, more enanchements”.

Less instances

The number of effect has been reduced. Wait a moment, i’m not mad: all the effects you have used are already here, more powerful and more consistent. As i have just said, now we have less instances to use. The MooTools philosophy want the users to write less instances and reuse them whenever and wherever they want.

So the “double” Classes are gone. For example, the Fx.ShakeH and Fx.ShakeW have been replaced by the Fx.Shake Class. The Fx.SwitchOffH and Fx.SwicthOffW have been replaced by the Fx.SwitchOff Class. The same happened with some other classes, like Fx.Bubble and many more.

By setting the mode option to the needed value, you can choose from a vertical or a horizontal transition, into the same instance:

var fx = new Fx.Bubble('element', {mode: 'vertical'});
 
// start the Fx.Bubble effect
fx.start();

Later, if you need to change the previous transition you picked, you can do this in an extremely easy way. Now all the Fx effects support the dynamic arguments:

// change the previous transition dynamically, without change the instance
fx.start('horizontal');

so again, you have the full control of your instances wherever and whenever.

More enanchements

Now that we have learnt how to use the new Fx effects, we can go on to the next step: the enanchements.

In the previous versions of moo.rd, some effect classes that execute a transition many times, like Fx.Shake or Fx.Pulsate, was able to do this just automatically. Now you can set how many times an element must be shaken, or must be pulsated!

var fx = new Fx.Shake('element', {times: 20});
 
// shake the element 20 times vertically
fx.start('vertical');

So you can shake an element as you want, how many times you want.

Moreover, a lot of new effects have been introduced, like the Fx.Scale Class, which allows to alter any transitionable property following a given scale, the Fx.Fold Class now accepts either the vertical and the horizontal mode, the Fx.Fade Class allows to fade everything (in, out or toggling) and many, many more.

An important point is that all options of the effects which indicate the parameter to alter, can be dynamically changed into the start methods. For example:

var scale = new Fx.Scale('element', {scale: 1.4});
 
// later start and change the give scale
scale.start(1.3);
 
var drop = new Fx.DropOut('element', {where: 'down'});
 
// later start and change the position
drop.start('up');

Element shortcuts and Element.fx method

All the Fx classes have the respective Element shortcut, like Element.shrink or Element.move.

The real news is the fx method of the Element prototype, which allows to choose an effect dynamically and apply it to the element:

// use Fx.Fade
var fade = element.fx('fade');
fade.start('toggle');
 
// use Fx.Move
var move = element.fx('move', {duration:2000});
move.start(120, 58);

Again, you have the full control of the effects.

File Namespacing

The last major changement i want to report is the new namespacing of the effects file, now more meaningful than ever:

• effects_base.js: the core file required by all other effect files
• effects_morph.js: contains effects which morph the element styles
• effects_fade.js: contains effects for all fade needs
• effects_move.js: contains effects to work with the element movement
• effects_extra.js: contains an extra collection of effects
• effects_toggle.js: contains controls to toggle everything

plus:

• effects_cycle.js: allows to create fully-customizable slideshows
• effects_cycles.js: allows to create double and fully-customizable slideshows

In the next article dedicated to the Fx effects we’ll see how to use them in some real applications, but nothing will be more complex that those descripted above.

RD

Now you can download all the development versions of moo.rd, to stay tuned on our works and to test out the product.

The 1.3.1 is currently being developed (while i’m writing this post, the current revion is the 78th), and will bring a lot of new features on the line:

• the Cycle Effects: a new kind of slideshow based on a particular style transition you can choose from moo.rd or create your own
• the marvellous Glider
• the new Customs (now you can create your own alert, confirm and prompt)
• effects completely enanched plus a lot of new effects
• many, many more…

I’ll prepare a demo which will show one of these components in action, soon, but i dont’ want to tell which of them for now

SVN Index

In the home now you can find some links which refer to the moo.rd svn development:

• the SVN Download Builder
• the Http SVN Server
• the SVN Changelogs
• the SVN Changelogs in Feed format

The following are the currently three demos of the moo.rd1.3.1beta Customize:

• Custom.Alert
• Custom.Confirm
• SmoothScrolling

The new Custom.Alert and Custom.Confirm classes are modal, fixed, and can be draggable, like the standards. But they are “Custom”, so we can give them our personal style, choose an overlay (made by the new Overlay Utility Class) with a custom light, make them appears/disappears with a fade transition and many more.

I want to have the Apple style plus the Windows Style plus my personal style in the page: mission impossible? custom Alerts and custom Confirms, go, make it possible!

The SmoothScrolling class is now for “all smooth needs”. Extending Fx.Scroll, it take advantage of its options, like wheelStops. In addiction, we can choose which anchors must be affected and the Fx parameters of the “effects”.

Write here your opinion, your suggestions, your needs. We’re working to offer the maximum, so we’d like to hear your thoughts.

Now we use the Trac system to take higher performances, with the Assembla toolkits.

You can find the moo.rd development at http://trac2.assembla.com/moord.

This is the new moo.rd Development site map:

• Wiki
• Timeline
• Roadmap
• Browse Source

Actually, you cannot open tickets, until the new core systems have been built. When all the “base” of moo.rd is completed (this include the new API changes throughout the whole library) you will be able to open tickets and download the current dev version, so you can test it.

The new download builder

First of all i want to speak about the new and powerful download builder. Now you can download moo.rd in a totally relaxing way: the engine choose all the components needed by the component you choose. For example, if you choose the toggle_extend.js file, the toggle.js file required will be automatically choosed. And if you deselect the toggle.js file, all the file affected (in this case only the toggle_extend.js file) will be automatically deselected.

So you can make a “bugless” download without reading the file required in the documentation (procedure i suggest in each case, to see how the files are connected).

But the new download builder has another amazing feature: the compression type you can choose.

Now you can choose from four different types of compression:

• compressed: the entire file will be compressed with JS Packer. For reducing dimensions and real usage.
• sourcecode: the entire moo.rd sourcecode, with the official documentation included. Perfect for testing and reading.
• no documentation: only the moo.rd code without documentation. A clean moo.rd version which contains only the Javascript code.
• only documentation: the official moo.rd documentation for offline consulting. It is the same created by MakeDocs (another my private CMS) available online, so you can be sure to have all the necessary: constrcutors, methods, options and arguments descriptions, examples and everything else.

Dev’s Road: a way for contributing

Dev’s Road is another CMS i developed: a simple but powerful application which allows users to open tickets relative to errors, bugs or tips. You can see the changelogs, the currently percentage, all the currently sourcecodes and download the currently dev version relative to the last changeset. “A little Trac”, is how i call Dev’s Road.

I made this software to render moo.rd better and better (Trac also could be useful, but too complex for what i want. However we can always install it, we’ll think about it) and i hope everybody who use my library will contribute reporting possible errors and bugs, so we can have a bugless release (which will be released as a complete feature when all the tickets have been closed).

But Dev’s Road mustn’t be confused with forum: this last one is dedicated to everything about moo.rd, Javascript and MooTools, while Dev’s Road is for developing only. So read the rules before open tickets

moo.rd Dev Team

Started as personal feature, moo.rd has become a bigger project, so i decided to build a Dev Team. You can see the people involved in the Developers page.

The blog

moo.rd is now provided with a blog which you’re reading. Here you will find all the news related to moo.rd: releases, general fetaures/arguments, personal opinions, tutorial and pools.

Some decision will be made as result of either polls and tips, so you can be decisive with your opinion

Sparking Milk

The new template i designed is called “Sparking Milk”: a “toon” white/blue/pink template.

This one is more accessible and more stable: try out the docs and the examples

And finally…

The next releases of moo.rd will contain powerful new features and general enanchements, especially based on the Natives and the Fx effects, and will be based on the version 1.2 of MooTools. So keep track of our work with Dev’s Road and help us to develop a product (i hope it will become a stable “framework which extends a framework”, the marvellous MooTools) which can be useful for every developer.

moo.rd, as MooTools, is developed for Wed Designers and developers.

Enjoy yourself.

Riccardo Degni

When i decided to build a moo.rd system, i wanted to have a Javascript file as modular as possible. Because of this, i created the constructors.js core file, which contains all the “core” moo.rd constructors, as the name says.The core constructors are wrappers whose properties represent the “extended” moo.rd constructors. For example the Custom object is a core constructor, while the Custom.Alert and Custom.Confirm classes are extended constructors. In this way you can choose the Custom.Alert without Custom.Confirm and vice-versa.

There are some others core constructors besides Custom: for example:

• Table, which allows you to download table_rows.js, table_cols.js or table_cells.js , indipendent of each other
• Make, which allows you to download make_table.js, make_list.js or make_select.js , indipendent of each other.

However, when the constructor isn’t a wrapper only, but a “base constructor” which contains a lot of methods, the constructors.js file is no longer a true place for this.

So we have to create a “base” file whose constructor will be extended by other constructors. The base files are simply called “something_base.js”, for example:

• virtual_base.js, contains Virtual.Base class, whose properties will be catched by either Virtual.Box and Virtual.Ajax classes.

If the “extended constructors” are less than two, this will be placed in the same file of “base constructor”, as in the kwick_menu.js file which contains either the Kwick.Base and the Kwick.Menu classes.

Reassuming, moo.rd declare three types of Classes:

1. the “core” classes
2. the “base” classes
3. the “extended” classes

This permits a higher modularity, which is one of the main features of moo.rd.