Recent Blog Entries

Status
Entry posted on Mar 15 by .V1

Past

Future

Now

Because our time zones differ so much, there will always be one of us online to answer your questions related the the Spry-it.com usergroup. You can reach the both of us at team@spry-it.com. 

Spry 1.7 Pre-Release sneak preview
Entry posted on Mar 04 by .V1

Extending the Spry Selector engine
Entry posted on Dec 11 by .V1

Spry comes with CSS3 complain selector engine since version 1.6. You can basically query any document page with a CSS selector and get the results for that. I'm going to dive to deep in that. If you want to learn more about the CSS selectors i suggest taking a look at the Element Selector Overview. 

The selector engine comes with a few default functions to make it easier to work with browsers DOM. These functions where all pre-defined by the Spry team. But they build it in a way that its actually quite easy to extend it and create your own custom functions.

Before extending the selectors functions lets see how they get attached to the result set.

Spry.$$ = function(selectorSequence, rootNode)
{
	if (!rootNode)
		rootNode = document;
	else
		rootNode = Spry.$(rootNode);

	var sequences = Spry.$$.tokenizeSequence(selectorSequence);

	var matches = [];
	Spry.$$.addExtensions(matches);
	++Spry.$$.queryID;

	var nid = 0;
	var ns = sequences.length;
	for (var i = 0; i < ns; i++)
	{
		var m = Spry.$$.processTokens(sequences[i], rootNode);
		var nm = m.length;
		for (var j = 0; j < nm; j++)
		{
			var n = m[j];
			if (!n.spry$$ID)
			{
				n.spry$$ID = ++nid;
				matches.push(n);
			}
		}
	}

	var nm = matches.length;
	for (i = 0; i < nm; i++)
		matches[i].spry$$ID = undefined;

	return matches;
};

I have highlighted the important parts of this function where the magic happens. They create a array (matches) and applies the Spry.$$.addExtensions() function on that. After they have processed the selectors query, they are pushing the found elements in the array. So the array is still an "actual" array. After all the matches has been cleared of Spry$$ID references the array is returned.

The Spry.$$.addExtensions just loops over a Spry.$$.Results object and adds the methods to the array. The Spry.$$.Results is object that we need to extend to apply our custom functions.

Spry.$$.addExtensions = function(a)
{
	for (var f in Spry.$$.Results)
		a[f] = Spry.$$.Results[f];
};

Spry.$$.Results = {};

Spry.$$.Results.forEach = function(func)
{
	var n = this.length;
	for (var i = 0; i < n; i++)
		func(this[i]);
	return this;
};

Spry.$$.Results.setAttribute = function(name, value)
{
	return this.forEach(function(n) { Spry.Utils.setAttribute(n, name, value); });
};

All the selectors functions are based on the forEach functions. This loops over all elements. And calls the supplied func (function) with the currently looped element as argument.

The forEach functions returns this. This will allow you to chain different selector functions together as long the function called function also returns a this .forEach as seen the .setAttributes function.

Now that we know how the selector engines functions works we can implement our custom functions. Lets say we want to create a show and hide functions that just sets the display of the element to none or block.

Spry.$$.Results.hide = function(){}

Add a function to the Spry.$$.Results object, lets call it hide.

return this.forEach(function( node ){});

Inside the function we will start adding the required return this.forEach that calls a anonymous function. As we have seen in the code snippets above, the forEach gives the current looped HTML node as agrument to the function. I have named this "node". Now all we need to do is set the style of the node to display:none;

Spry.$$.Results.hide = function(){
	return this.forEach(function(node){
		node.style.display = "none"; 
	}
};

And thats all that is needed to create your own custom functions for the selector engine. But you can actually write this piece of code a bit shorter. The selector engine comes with a setStyle function. That allows you to setStyles directly with out having to know DOM syntax to modify styles.

Spry.$$.Results.show = function(){
	return this.setStyle("display:block;");
};

That will do the exact opposite of the hide function. It sets the display to "block" using the build in functions. This will make you code more readable and its actually allot shorter to write as well. Because we are also returning build in function the chaining will remain unbroken.

The sky is the limit, if you are a fan of the short hands jQuery uses to attach events you can easily reproduce that behaviour with Spry by creating custom functions for that as well.

Spry.$$.Results.click = function(handler, capture){
	return this.addEventListener( "click", handler, capture);
};
Spry.$$.Results.change = function(handler, capture){
	return this.addEventListener( "change", handler, capture);
};
Spry.$$.Results.focus = function(handler, capture){
	return this.addEventListener( "focus", handler, capture);
};
Spry.$$.Results.blur = function(handler, capture){
	return this.addEventListener( "blur", handler, capture);
};
.. and so on .. 

If you have done it correctly you can use your custom selector functions:

Spry.$$("div").hide().click(function(){ alert("yup it works"); });

Documenting the undocumented
Entry posted on Nov 17 by .V1

While most parts of the Spry framework are well and intensively documented. There are some features and functions missing inside the documentation. For the new and upcoming website of Spry-it we are tackling this issue with a new search-able and re-documented database. But until than we are still stuck with the old documentation.. Or not?

In the upcoming blog posts, we will attempt to shine some light on these hidden functions. To kick it off, we will be starting with the SpryDOMUtils.js.

SpryDOMUtils

This part of the Spry framework provides us with tools to work with browsers DOM (Document Object Model) such as a CSS3 complaint element selector (Spry.$$).

You can this file by downloading the complete Spry library at: http://labs.adobe.com/technologies/spry/

Spry.$( arguments );

The Spry.$ is a wrapper for the native document.getElementsById function. It gets like the native function, elements by the id="" attribute. But the Spry function allows you to send multiple arguments to the function. 

Syntax:

Spry.$( arguments );

Arguments:

arguments "String", one or multiple strings that represent the id's

Returns:

HTML Node or Array of HTML Nodes, depending on the amount of arguments you supplied.

Example:

<strong id="element">Strong</strong>
<b id="another">Bold</b>
Spry.$( 'element' ); // returns the HTML element with the id="element"
Spry.$( 'element', 'another' );// returns a Array with both the elements

Welcome, Tere tulemast, Karibu, ????, Willkommen or just Hello
Entry posted on Nov 09 by .V1

Welcome to the first and currently only Adobe Spry user group. With growing number of Spry developers the need for a community is growing. The Spry forums are currently the only good and high quality source of information for your questions. But because it's only one forum it limited to its boundaries.

Spry-it aims to solve those issues. We will providing users with more and in-depth information about the Spry framework. This is additional documentation, information, a more extensive and search-able API. And different channels of information, from RSS feeds to Adobe Wave notifications.

Adobe Groups and Spry-it.com

We are currently inviting beta testers to our platform. If you have signed-up already please do so at: http://www.spry-it.com. We will be using the Adobe groups site to distribute information and future paths of the user group. So its recommended to also sign-up for the Adobe groups site so you will always be up to date with the latest information. 

Get involved!

Currently development and progress of the new site is low because its a one man crew. If you wish to contribute feel free to contact me. We can always work something out. We will be running on Jaxer ( serverside JavaScript and DOM ).

Search Blog

Recent Comments

JohnsBeharry on Welcome, Tere tulemast, Karibu, ????, Willkommen or just Hello
11/09/09: Woot congrats! Can't wait to see the site up keep us posted!

.V1 on Documenting the undocumented
11/18/09: Hi, Our own site which will be hosted on spry-it.com will allow other authors to publish content. At this point, if you wish to publish content here, you can just contact me, and I will provide your

@lexaka on Documenting the undocumented
11/18/09: Hello, complex architecture of the engine used to create groups, just did not look :-)Thanks for the clarification. When the planned opening of spry-it.com?

Pevets Volshebny on Extending the Spry Selector engine
12/12/09: I like the jQuery-like click, change, etc. handlers.  Very nice.  I'll have to try that soon. And I can't wait for 1.7 to be released - whenever that is.

JohnsBeharry on Status
03/15/10: Thanks for the introduction, glad to be working on this awesome project, can't wait for the launch.