Friday, June 5th, 2009
Category: JavaScript
, Library, MooTools
Zohaib Sibt-e-Hassan has created a Mootools based mouse gesture library Moousture that is based on simplicity:
- A probe, which probes the pointing device. Currently there
is a Moousture.MouseProbe (P.S. I am planning to test it on iPhone and
build any seprate probe for that).
- A monitor, which tests the stability of probed
device on given intervals and accordingly notifies Moousture events
(onStable, onUnstable, onMove).
- A Moousture recorder class that records the mouse
movements and invoke the guesture object passed to it.
You can easily work with gestures:
JAVASCRIPT:
-
-
// Create a guesture matcher, currently there are only two gesture objects Moousture.LevenMatcher, and Moousture.ReducedLevenMatcher.
-
-
gstr = new Moousture.ReducedLevenMatcher();
-
-
// Add gesture vectors to matcher object, (see details below in Create your own gestures).
-
-
gstr.addGesture([3,2,1,0,7,6,5,4], ccwCircle);
-
-
// Guesture callback function takes one parameter error recieved from matching algorithm. Threshold that value (if required) to make your gestures more sleek.
-
-
function ccwCircle(error) {
-
if(error>= 0.6) return;
-
...
-
}
-
-
// Create a probe object that will probe the pointing device. Currently there is a mouse probe that take the $(element) to probe for. So passing a div id will cause the probe to trigger events only when they occur on the passed DOM element.
-
probe = new Moousture.MouseProbe($(document));
-
-
// Create a recoder object to record the movement , maxSteps and minSteps in options object will specify the maximum and minimum number of steps to be recorded, and macher is required matcher object to trigger the appropriate gesture.
-
recorder = new Moousture.Recorder({maxSteps: 20, minSteps: 8, matcher: gstr});
-
-
// Create a monitor specifying the interval to poll and the amount of error allowed for gesture in pixels.
-
monitor = new Moousture.Monitor(30, 2);
-
-
// Finally start the monitor.
-
monitor.start(probe, recorder);
-
-
// You can stop the gesture triggering any time by calling .stop() of monitor object.
-
monitor.stop();
-
Wednesday, May 20th, 2009
Category: Articles, MooTools, jQuery
Normally when you see a title like jQuery vs. MooTools you get ready for the flame bait. You would expect it even more so if you found out that someone from one of the frameworks wrote the post!
Well, Aaron Newton did just that, and I think he did a very good job at trying to keep as unbiased as possible. He can never be perfect since he has a certain viewpoint, and in fact in some ways when you come from that view you can easily under-share your points.
This isn't a rushed piece. Aaron has been thinking about these things for quite some time, and has really pondered it.
It is a fairly long piece, and includes:
MooTools Makes JavaScript Itself More Fun
jQuery Makes the DOM More Fun
Anything You Can Do I Can Do Better
MooTools Lets You Have It Your Way
Chaining as a Design Pattern
Reusing Code with jQuery
Reusing Code with MooTools
Decision Time
Discussion
Monday, May 4th, 2009
Category: MooTools
We've posted before about Harald Kirschner's excellent MooTools plugin FancyUpload which provides extensive functionality for handling file uploads. His newest update, FancyUpload v3.0, is a complete rewrite and includes a wealth of new features:
- The API with, separated uploader and file classes, allows an easy implementation in all kind of interfaces
- Events are dispatched for every step of the uploading process, to keep the interface as responsive as possible
- Progress tracks the loaded size, upload-rate, estimated time and other values for every file and for the batch as a whole
- File uploads can be stopped, restarted or removed anytime
- New Iframe-based class for multiple, asynchronous uploads without dependency on Flash
- Compatible with Flash 9 and 10 with the browse button as a transparent overlay or as an interactive image sprite
- Ability to change the upload URL and add
POST/GET data on runtime, customized for every file or the whole process
- Easy to localize to your favourite language with MooTools.lang, share your translations with others.
To see the uploader in action, Harald has started a showcase of demos which provide excellent examples of the plugins capabilities
MooTools based FileManager
Piggy-backing on Harald's work, Christoph Pojer extended it further by creating a new plugin that provides impressive file managing capabilities for your server.
- Browse through Files and Folders on your Server
- Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files
- View detailed Previews of Images, Text-Files, Compressed-Files or Audio Content
- Nice User Interface ;)
- Upload Files via FancyUpload (integrated Feature)
- Option to automatically resize big Images when uploading
- Use it to select a File anywhere you need to specify one inside your Application's Backend
- Use as a FileManager in TinyMCE
- Provides your Client with the most possible convenience ( ;D )
The plugin is easily implemented as well:
JAVASCRIPT:
-
-
1. var manager = new FileManager({
-
2. url: 'manager.php',
-
3. assetBasePath: '../Assets',
-
4. language: 'en',
-
5. uploadAuthData: {session: 'MySessionId'}
-
6. });
-
7. $('example1').addEvent('click', manager.show.bind(manager));
-
Check out the cool demo Christoph created.
Monday, April 27th, 2009
Category: MooTools
The MooTools team has been busy over the last week. Last Thursday they released MooTools 1.2.2:
MooTools 1.2.2 is a mainly a bug fix release but it also includes an almost entirely new Class.js. The reasoning behind this is that the old Class.js didn’t play nicely with some advanced usages of this.parent() present in the new MooTools-More. We already had the script ready and tested in the MooTools 2.0 branch so we simply “backported” it to 1.2.2. Other than providing the parent fixes, the new Class also features a much more robust inheritance model, especially when dealing with objects.
For example, the objects you implement now in a class are merged if an object with the same name is found in the class prototype:
JavaScript:
-
-
var Animal = new Class({
-
options: {
-
color: 'brown',
-
says: 'hissss'
-
}
-
});
-
-
Animal.implement('options', {says: 'meow'});
-
-
// Animal.prototype.options is now {says: 'meow', color: 'brown'};
-
This is especially useful when overriding default options in classes, such as Request.
Upgrading to this version of MooTools only requires that you drop in the new version. There aren't any changes that require changes to sites that implement these features.
MooTools More
Also with this release comes a large update to the MooTools plugin library, MooTools More. Previously this portion of the project featured about a dozen add-ons. The new release features 48 plugins, adding things like FormValidators, new effects, JSONP support, numerous enhancements to native objects like String and Element as well as robust URI and Date classes. They plan on adding new plugins regularly as this portion of the library grows over the next several months.
Clientcide
Relatedly, MooTools contributor Aaron Newton has released an updated version of the Clientcide MooTools Plugins to support these new plugins. Many of the plugins that are now officially part of the MooTools project came from Clientcide's collection of plugins. For anyone using the Clientcide plugins you can find compatibility scripts on the download page there. He notes that there are one or two breaking changes for users who were using some of the plugins that moved over to MooTools More.
Monday, April 13th, 2009
Category: MooTools, Plugins, UI
Joining the world's collection of Growl-related libraries is Notimoo, a beautiful Growl implementation for MooTools. It's a little more sophisticated than most of the Growl ports as it supports persistence messages (that require a user's click to clear and scroll into view) and allows you to configure where on the screen the messages appear:
JavaScript:
-
// Now I create the manager so it will display notifications from the left bottom corner
-
var notimooManager = new Notimoo({
-
locationVType: 'bottom',
-
locationHType: 'left'
-
});
-
-
// Showing a notification that does not disappear.
-
notimooManager.show({
-
title: 'Testing notification',
-
message: 'This notification will not disapper on its own. You must click on it to close.',
-
sticky: true
-
});
The Notimoo project is hosted on Google Code under an MIT license.
Friday, April 10th, 2009
Category: MooTools
If you're a coder who likes to blog a lot, you know the value of a good code syntax highlighter. It helps to draw attention to your code snippets and sets them in a context easily identifiable to anyone who has used a code editor. José Prado came up with a MooTools-powered extension called Lighter.js that provides this capability.
Implementing the highlighting is very easy to do by creating a container element around the code to be highlighted and uniquely ID'ing it so that the container can be found via MooTools built-in DOM traversal factory method $(). You can see an example here:
JAVASCRIPT:
-
-
// Object style syntax with files in same level as html document.
-
var myLighter = new Lighter('jsCode', {altLines: 'hover'});
-
-
// Element style syntax with files inside of a folder called "js".
-
$('phpCode').light({
-
altLines: 'hover',
-
path: 'js/'
-
});
-
-
// Highlight all "pre" elements in a document.
-
$$('pre').light({altLines: 'hover'});
-
Ajaxian.com uses a code highlighter as well so if you compare the code above to the screencap below, you can see the similarities. MooTools developers should find it very easy to output a concisely layed out code snippet.
There's no official demo for the extension but you can actually see it in action on Jose's project page since the code examples he references are actually highlighted by his extension.
Category: Component, MooTools
Over at devthought, Guillermo Ranch has rewritten his clone of Facebook's "TextboxList" component:
It’s been some time since TextboxList got some attention. It is undoubtedly one of the my most popular JavaScript projects, along with the famous Fancy Menu (MorphList) and its slideshow sibling, BarackSlideshow.
TextboxList has been rewritten from scratch, and it’s more solid than ever. The first time around, elegance was not one of the goals. I focused on releasing the first open source script that reproduced the Facebook’s tokenizer.
Changes include:
* Compatible with MooTools 1.2.x
* New options, such as addOnEnter, which adds boxes upon pressing enter (useful for tags or categories widgets).
* More events, which gives the developer more power to extend it.
* Each element is now identified by an id, a plain value and a HTML value.
* Use of control, alt, meta keys no longer interfere with the elements keyboard navigation.
* Bugs with text selection fixed.
* Improved API, even more extensible.
* Plugins support
It also includes an autocomplete plug-in, which has its own feature list:
* Flexible. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere.
* Binary search for maximum performance
* Simpler CSS with comments for non-experienced developers.
Guillermo tells us that a Dojo version is in the works, and Ajaxian reader Thomas Aylott adds "This thing is seriously awesome." Check it out!
Thursday, March 19th, 2009
Category: Examples, MooTools
Yvo Schaap has created a reasonably interesting real-time front-end to Reddit data over at erqqvg.com. It's actually a really cool visualization of how Reddit's stories change over time, with "yellow-fade" indications when new comments and votes and registered. Super-nice.
(The screenshot doesn't do it justice; go check it out.)
But that's only half the story. They've got a much-better-named service called "Vizeddit" that displays the same data with much richer graphics and animations:
Once again, you really need to go see it. The numbers along the bottom represent stories, and they grow and swap places over time, new ones are inserted, and so forth. You see the votes drop down in real-time, and new comments float in as well.
All brought to you with the Moo.
Thursday, March 12th, 2009
Category: JavaScript, Library, MooTools, UI, Utility
Guillermo Rauch, who has a really nice looking site at devthought has created APNG a class to bootstrap animating PNG images:
APNG provides simple frame-based animation functionality. It’s main goal is solve the problem of animating alpha-transparent images (PNG format).
Features
APNG is very flexible when it comes to the method of displaying the various animation frames.
The default behavior is taking the filename, for example spinner.png, and changing the src or background-image attribute to spinner-2.png, spinner-3.png and so on.
If the useNative functionality is in place, which is set to be on for Firefox 3 and Opera 9.5, the Javascript-based animation is not run. I encourage you to create an actual APNG for the default frame (spinner.png). If you do so, you’ll see increased performance for the browsers that support it -while also promoting the adoption of this new format-, and other browsers will just display the first frame and the animation will run via JavaScript.
You can also use background-position based animations to avoid making multiple requests, and avoid potential cache issues in old browsers.
The APNG class supports dynamic pausing, canceling, resetting and starting of animations. Frames can have a fixed interval or one can be assigned for each of them. Preloading is supported, which can prove useful for long animations or animations that are initialized and not run from the start.
Check out the demo page and see how to use it:
JAVASCRIPT:
-
-
// new image
-
img = new Element('img', { src: 'images/zoom-spin.png' }).inject(document.body);
-
new APNG(img, { useNative: false, frames: 12, endless: false });
-
-
// existing images
-
new APNG('imganimated', { useNative: false, frames: 12, endless: true });
-
-
// existing div
-
new APNG('divspinner', { useNative: false, frames: 12, endless: true, property: 'background-image' });
-
-
// existing div, single image
-
new APNG('divspinner2', { useNative: false, frames: 12, endless: true, property: 'background-position', axis: 'x', interval: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10] } );
-
Tuesday, March 10th, 2009
Category: MooTools
MooTools Core developer Aaron Newton recently took on the task of coming up with a complementary library to the MooTools framework that would provide enhanced capabilities beyond what the standard JS MooTools core lib could, or should, provide. The results is a new project called MooTools More which aims to provide Moo developers with a set of official plugins which are well documented and supported by the team. Yesterday, the More team released their first beta which currently includes:
- Class extensions including a Binds mutator, easier refactoring, chain pausing and more.
- New Native extensions including more love for String and Array, plus a fully featured Date Native and a URI extension to make managing links downright fun.
- More Element love with help for managing text selection and relative positioning (put this box’s lower right corner next to the upper right corner of that other box…)
- Form love including a robust and extensible form validator and a class for displaying hint text over an input.
- Extended Request functionality including JSONP support and Queuing.
- Support for language localization for classes that output text (days of the month, months of the year, form validation errors, etc)
You can download the files here:
If you'd like to get involved in the project, the team has created an official wiki which outlines how to help and submit code changes.
Thursday, February 26th, 2009
Category: MooTools
We've featured several implementations of the parallax effect here on Ajaxian. The newest creation comes from the team at Piksite who recently released their MooTools-powered mParallax extension:
mParallax is an adaptation for MooTools framework of jParallax whose its author, Stephen Band, describes it like "jParallax turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way".
The image really doesn't do it justice and you should check out the demo to really get a feel for the capabilities.
As Moo team member Aaron Newton said, "For all you people using MooTools to make your own 8-bit side-scrolling NES clones, this is your library."
Tuesday, January 27th, 2009
Category: MooTools
Aaron Newton has written two interesting pieces on MooTools.
First, he gives us history on the library as a way to explain where it is today, and why some people are concerned that the core isn't moving that fast (which others would call a feature!):
Because the current state of the library is very stable, the core developers are focused more on the things they use MooTools for, rather than improving the framework itself. Development on the framework core is driven by need mostly, and right now, MooTools 1.2 serves the needs of those of us who develop it quite well. That’s not saying that there’s no room for improvement (there are certainly bugs that can be fixed in Lighthouse, but most of these are minor). But for the most part, due to the focused nature of the MooTools core, there’s not a tremendous need to churn through the code constantly.
In other words, precisely because MooTools itself is so flexible and because the core developers are so focused on delivering only what is needed in the framework and not adding features for their own sakes (and relying on the rest of us to fill in the gaps), it means that to a large extent, the MooTools framework doesn’t need a lot of maintenance or enhancement. It does what it does, it does it well, and for the moment, it does not need more than that. Perfection is not attained by adding everything you can, but rather by removing everything you can. Or something.
Then we get to the future, and Aaron talks about the 1.3 upgrade path:
The MooTools 1.3 Upgrade Path
Friday, January 23rd, 2009 @ 2:15 pm | filed under: MooTools | ShareThis
In the last week or so Valerio and others (myself included) have been working on the changes that are headed for MooTools 1.3. You can dig around in git-hub in various developer branches and see some of this stuff flying around, but frankly, it’s all in rough draft mode and is likely to change.
One of the points of discussion are all the $ methods. $type, $lambda, $try, etc. are all in the global name space and kind of just… there. They exist as stand alone methods because, by and large, they don’t really belong anywhere. In an effort to both clean this up a bit so that methods are where they “belong” as well as to clean up the global namespace a little, Valerio and others are discussing where to put these things.
Friday, January 16th, 2009
Category: MooTools
There has been a lot of interesting news in the MooTools community recently. Before it passes us by, I wanted to aggregate some of the goodies for your perusal:
MooBugger
Valerio and I spent a few weeks a while back putting together a bookmarklet that would give you a Firebug-style JavaScript console for browsers without Firebug (IE, Safari, etc).
It supports console.log statements in the various formats that Firebug supports (”console.log(’foo: %s, bar: %o’, foo, bar);”) and is really useful for debugging your code in non-Firebug browsers. I like to use it in conjunction with X-RAY to solve layout issues, too.
To use it, all you need to do is drag the link on the bookmarklet page into your bookmarks and then click it on any page to bring up the console (I.E. you have to right click and choose “Add to Favorites”).
You can see it in action on the test page.
5 Advanced Techniques for MooTools Development
The documentation for MooTools is robust and covers nearly everything in the library. There are a few items left out that are either not there on purpose (because they are not guaranteed to be supported in future releases) as well as several standard JavaScript techniques that can empower your development. Here are 5 things that you should know that aren’t obvious.
Extending Class Families
A common convention in MooTools is to have numerous classes that break out functionality. This allows you to build upon the functionality of classes through extension and also keep your code base small when you don’t need everything and the kitchen sink. Consequently we get Fx, Fx.Css, Fx.Tween, Fx.Morph, etc.
What happens when you want to extend numerous classes with the same functionality? For instance, I have a popup manager called StickyWin. One of my scripts is called StickyWin.Ajax.js, which adds Ajax functionality to all the popup classes, creating *.Ajax classes (so, for instance, StickyWin.Fx is extended to StickyWin.Fx.Ajax).
Milkbox: Lightbox for MooTools
Features:
- SWF support
- xml gallery definition (quite a unique feature in lightbox clones)
- really improved autoPlay features
- really improved JavaScript direct launch (total control over number of gallery and file to start with; override of any autoPlay option)
- refined global options management ( see changeOptions() and restoreOptions() )
- custom events ( onXmlGalleries and onClosed )
Wednesday, November 12th, 2008
Category: MooTools, Toolkit
To the ranks of Ext JS, jQuery UI, Dijit, and others comes JxLib, a new browser-based UI toolkit built on top of MooTools. Jason Fournier from the team passed the announcement to us:
JxLib includes layout managers, buttons, tabs, toolbars, dialogs, panels, trees and a basic
grid control all designed to work together. It is heavily based on
using CSS for presentation and includes two separate 'themes' that you
can easily switch between. New themes can be constructed by modifying
the existing themes...
JxLib has evolved out of a generic web-based UI toolkit...
for building web-mapping applications. It has been distributed under an MIT license for a couple of years, but this is the first time we have actively attempted to build an open
source community around it. We are excited to share this project with
others, and invite users and developers to join the project.
The Examples page, available off the main project's page, showcases many of the built-in components and features. The source is hosted on Google Code and there's a JxLib Google Group as well. After playing with the examples, JxLib seems quite polished and a welcome addition to the crowd. A year ago some folks may have counted MooTools out of the game, but with at least one major release this year, a revamped website, steps towards a plug-in community, and a now a quality UI toolkit, MooTools is in the game.
Monday, November 3rd, 2008
Category: MooTools
Nir Tayeb, a Web developer in Israel, has written up a new Mootools Fx effect class that creates a linear transformation effect using the new transform CSS property (of Safari and Firefox) and or the IE Matrix filter:
I've
created a class extending Fx class and learned for the first time how
to create custom effects. It is very easy, but there isn't enough
documentation about this subject. There also isn't any documentation on
the code specifying what each method in Fx/Fx.CSS does, so I read the
code and analyzed the order of the calls to each method and looked in
the source code of another custom effects of what I found while
Googling on it.
The result is the Fx.Matrix class, which I added
to my MUI project (Mootools UI). It supports the following functions:
scale, skewX, skewY, rotate, scaleNonUniform and rotateFromVector.
These transformations are the only ones which can be implemented in
both the Safari and the IE way; the rest (perspective, translate, etc.)
are only supported in Safari/Firefox 3.1, so I didn't implement them.
You can do matrix work, or do a full transformation with code as simple as:
JAVASCRIPT:
-
-
mfx.start( {
-
scale:[1, 2],
-
skewX: [40],
-
skewY: [50, 0]
-
});
-
Check out the live demo to see a simple transformation.
Wednesday, October 29th, 2008
Category: MooTools
Aaron Newton wrote in with a few interesting news items related to the MooTools community.
Clientcide Testing Framework
First, on the new stand-alone Clientcide.com site (formerly clientside.cnet.com) recently released the Clientcide Test Framework (aka the MooTools Unit Test Framework):
MooTools ships with a version of JSSpec (http://jania.pe.kr/aw/moin.cgi/JSSpec) and a series of Specs tests. This test framework is excellent at verifying that code that immediately produces an output is working. It can test, for example, that 2+2 does equal 4.
It is not, however, very good at evaluating any type of code that has a delay between the execution of a code block and the production of a result. This includes Ajax requests, animations and other transitions, or interfaces that require a user to interact with the test (such as Drag).
The MooTools Unit Test Framework aims to create an environment where developers can utilize test driven development patterns to develop their code as well as use those tests to regress their changes. Tests are easy to write and easy to verify by non-coders. Users are given a simple task ("Drag the box around") and a question to answer ("Can you drag it around?"). Answering yes marks the test as having passed. Answering no marks it as having failed.
Each test is configured thusly:
JAVASCRIPT:
-
-
{
-
tests: [
-
{
-
title: "Your Test Title",
-
description: "A brief description of this test.",
-
verify: "Verification question to ask the user - did the test work?",
-
before: function(){
-
//code to execute when the user starts the test
-
},
-
body: "//User editable JavaScript run after *before* and before *post*",
-
post: function(){
-
//code to execute immediately after the *before* test above;
-
//if this returns a "falsy" value, the test will fail immediately
-
//before the user does anything else
-
}
-
}
-
],
-
otherScripts: ["SomeOtherFileToLoad"]
-
}
-
Clientcide Plug-in Repository
While MooTools lacks a formal plug-in community, Aaron is also announcing that the Clientcide website will fulfill that need on a temporary basis and as part of that makes a call for plug-ins and releases his own batch of plug-ins:
As many of you know, the MooTools team is hard at work on a plugin repository that will allow developers to share their date pickers, form validators, effects, and other widgets with anyone. This project is being pursued as fast as possible, but this means it’s up to a few people who are burning their spare time to work on it as they can.
As a stop-gap solution, I’m going to open up the Clientcide repositories now that I’ve thrown off my corporate bonds. Anyone that wants to release a plugin here is welcome to do so. They’ll be included as additional download options on the Clientcide builder page.
Starting today I’m going to start releasing my work as I write it. This is still somewhat infrequent - the majority of the code I write are classes for my own projects that would be of little use to anyone else. But instead of letting them pile up, I’m going to just drop them all in a “Beta” directory in my repository and get them onto the download page.
Today I released 9 scripts:
* DollarE - Brings back $E from MooTools 1.11. Returns a single Element for a selector.
* DollarG - Returns a collection when given an element, a collection of elements, an element id, or a selector.
* Hash.Run - Executes every method in a hash. Used for page init function groups.
* HoverGroup - Manages mousing in and out of multiple objects (think drop-down menus).
* InputFocus - Adds a ‘focused’ class to inputs when they have focus.
* MenuSlider - A simple dropdown class; see the menu at the top of Clientcide.com.
* Occlude - Mixin class for preventing a class from applying itself to the same element twice.
* String.FindAllEmails - Finds all the email addresses in a string.
* ToElement - Mixin class that returns *this.element*. Allows you to do $(myInstance).
Next Page »
