Posted on: Thursday, May 20, 2010
Everyone please check out the latest site from Echo Styles at www.jobscope.com. This site was done with PHP and was successfully launched today. I want to say thanks to Russell and Hank for all their hard work. The site looks great and I think that it will successfully represent JobScope on the web.
Posted on: Thursday, May 27, 2010
The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers.
To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics.
Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise.
Note that the specification is still a work in progress and quite a long way from completion. As such, it is possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.
HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 pages include a variety of common structures, such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id or class.
Diagram illustrates a typical two-column layout marked up using divs with id and class attributes. It contains a header, footer, and horizontal navigation bar below the header. The main content contains an article and sidebar on the right.
The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically. HTML 5 addresses this issue by introducing new elements for representing each of these different sections.
The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.
The markup for that document could look like the following:
<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>
There are several advantages to using these elements. When used in conjunction with the heading elements (h1 to h6), all of these provide a way to mark up nested sections with heading levels, beyond the six levels possible with previous versions of HTML. The specification includes a detailed algorithm for generating an outline that takes the structure of these elements into account and remains backwards compatible with previous versions. This can be used by both authoring tools and browsers to generate tables of contents to assist users with navigating the document.
For example, the following markup structure marked up with nested section and h1 elements:
<section> <h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section> </section> </section>
Note that for better compatibility with current browsers, it is also possible to make use of the other heading elements (h2 to h6) appropriately in place of the h1 elements.
By identifying the purpose of sections in the page using specific sectioning elements, assistive technology can help the user to more easily navigate the page. For example, they can easily skip over the navigation section or quickly jump from one article to the next without the need for authors to provide skip links. Authors also benefit because replacing many of the divs in the document with one of several distinct elements can help make the source code clearer and easier to author.
The header element represents the header of a section. Headers may contain more than just the section’s heading—for example it would be reasonable for the header to include sub headings, version history information or bylines.
<header> <h1>A Preview of HTML 5</h1> <p class="byline">By Lachlan Hunt</p> </header>
<header> <h1>Example Blog</h1> <h2>Insert tag line here.</h2> </header>
The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
<footer>© 2007 Example Inc.</footer>
The nav element represents a section of navigation links. It is suitable for either site navigation or a table of contents.
<nav> <ul> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/services">Services</a></li> <li><a href="/about">About</a></li> </ul> </nav>
The aside element is for content that is tangentially related to the content around it, and is typically useful for marking up sidebars.
<aside> <h1>Archives</h1> <ul> <li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li> <li><a href="/2007/07/">July 2007</a></li> </ul> </aside>
The section element represents a generic section of a document or application, such as a chapter, for example.
<section> <h1>Chapter 1: The Period</h1> <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, ...</p> </section>
(Excerpt from A Tale of Two Cities)
The article element represents an independent section of a document, page or site. It is suitable for content like news or blog articles, forum posts or individual comments.
<article id="comment-2"> <header> <h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="http://example.com/">Jack O'Niell</a></h4> <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time> </header> <p>That's another great article!</p> </article>
In recent years, video and audio on the web has become increasingly viable and sites like YouTube, Viddler, Revver, MySpace, and dozens of others are making it easy for anyone to publish video and audio. However, since HTML currently lacks the necessary means to successfully embed and control multimedia itself, many sites are relying on Flash to provide that functionality. Although it is possible to embed multimedia using various plug-ins (such as QuickTime, Windows Media, etc.), Flash is currently the only widely deployed plugin that provides a cross-browser compatible solution with the desired APIs for developers.
As evidenced by the various Flash-based media players, authors are interested in providing their own custom-designed user interfaces, which generally allow users to play, pause, stop, seek, and adjust volume. The plan is to provide this functionality in browsers by adding native support for embedding video and audio and providing DOM APIs for scripts to control the playback.
The new video and audio elements make this really easy. Most of the APIs are shared between the two elements, with the only differences being related to the inherent differences between visual and non-visual media.
Both Opera and WebKit have released builds with partial support for the video element. You may download the experimental build of Opera or a recent nightly build of WebKit to try out these examples. Opera includes support for Ogg Theora and WebKit supports all the formats that are supported by QuickTime, including third party codecs.
The simplest way to embed a video is to use a video element and allow the browser to provide a default user interface. The controls attribute is a boolean attribute that indicates whether or not the author wants this UI on or off by default.
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
The optional poster attribute can be used to specify an image which will be displayed in place of the video before the video has begun playing. Although there are some video formats that support their own poster frame feature, such as MPEG-4, this provides an alternative solution that can work independently of the video format.
It is just as simple to embed audio into a page using the audio element. Most of the attributes are common between the video and audio elements, although for obvious reasons, the audio element lacks the width, height, and poster attributes.
<audio src="music.oga" controls> <a href="music.oga">Download song</a> </audio>
HTML 5 provides the source element for specifying alternative video and audio files which the browser may choose from based on its media type or codec support. The media attribute can be used to specify a media query for selection based on the device limitations and the type attribute for specifying the media type and codecs. Note that when using the source elements, the src attribute needs to be omitted from their parent video or audio element or the alternatives given by the source elements will be ignored.
<video poster="poster.jpg"> <source src="video.3gp" type="video/3gpp" media="handheld"> <source src="video.ogv" type="video/ogg; codecs=theora, vorbis"> <source src="video.mp4" type="video/mp4"> </video> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </audio>
For authors who want a little more control over the user interface so that they can make it fit the overall design of the web page, the extensive API provides several methods and events to let scripts control the playback of the media. The simplest methods to use are the play(), pause(), and setting currentTime to rewind to the beginning. The following example illustrates the use of these.
<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<p><button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;">
<< Rewind</button>
There are many other attributes and APIs available for the video and audio elements that have not been discussed here. For more information, you should consult the current draft specification.
Unlike previous versions of HTML and XHTML, which are defined in terms of their syntax, HTML 5 is being defined in terms of the Document Object Model (DOM)—the tree representation used internally by browsers to represent the document. For example, consider a very simple document consisting of a title, heading and paragraph. The DOM tree could look something like this:
The DOM tree includes a title element in the head and h1 and p elements in the body.
The advantage of defining HTML 5 in terms of the DOM is that the language itself can be defined independently of the syntax. There are primarily two syntaxes that can be used to represent HTML documents: the HTML serialisation (known as HTML 5) and the XML serialisation (known as XHTML 5).
The HTML serialisation refers to the syntax that is inspired by the SGML syntax from earlier versions of HTML, but defined to be more compatible with the way browsers actually handle HTML in practice.
<!DOCTYPE html> <html> <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document. </body> </html>
Note that like previous versions of HTML, some tags are optional and are automatically implied.
The XML serialisation refers to the syntax using XML 1.0 and namespaces, just like XHTML 1.0.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document.</p> </body></html>
Excluding differences in whitespace and the presence of the xmlns attribute, those two examples are equivalent.
Browsers use the MIME type to distinguish between the two. Any document served as text/html must conform to the requirements for the HTML serialisation and any document served with an XML MIME type such as application/xhtml+xml must conform to the requirements for the XML serialisation.
Authors should make an informed choice about which serialisation to use, which may be dependent on a number of different factors. Authors should not be unconditionally forced to use one or the other; each one is optimised for different situations.
Work on HTML 5 is rapidly progressing, yet it is still expected to continue for several years. Due to the requirement to produce test cases and achieve interoperable implementations, current estimates have work finishing in around ten to fifteen years. During this process, feedback from a wide range of people including, among others, web designers and developers, CMS and authoring tool vendors, and browser vendors is vital to ensure its success. Everyone is not only welcome, but actively encouraged to contribute feedback on HTML 5.
In addition to the specification, there are several other related efforts designed to help people better understand the work.
There are numerous venues through which you may contribute. You may join the W3C’s HTML WG and subscribe/contribute to the HTML WG mailing lists or wiki. You may also subscribe and contribute to the any of the WHATWG mailing lists, post to the WHATWG forum, post comments or write articles on the WHATWG blog.
Posted on: Monday, May 17, 2010
IIf you need to get a reference to a class in ActionScript 3, but only know the class name, then you can use the flash.utils.getDefinitionByName to create an instance of the class.
package
{
import flash.display.Sprite;
import flash.utils.getDefinitionByName;
public class DynamicCall extends Sprite
{
public function DynamicCall()
{
var ClassReference:Class = getDefinitionByName("String") as Class;
var s:String = (new ClassReference("foo=") as String);
trace(s);
}
}
}
This basically creates an instance of the String class, from the class name “String”. getDefinitionByName takes the entire class path, so if you wanted to create an instance of MovieClip, you would provide the entire path:
var ClassReference:Class = getDefinitionByName("flash.display.MovieClip") as Class;
Posted on: Monday, May 17, 2010
AS2 to AS3: get all objects in a movieclip
Sometimes you want a list of everything inside a movieclip. For example: you want to know the instance names of every movie in the root.
A little trick that I used a lot in AS2 is:
for(var i in _root){
trace('key: ' + i + ', value: ' + _root[i]);
}
or
for(var i in target_mc){
trace('key: ' + i + ', value: ' + target_mc[i]);
}
to find out which movies are in target_mc
It was not only a trick to trace everything, I also used it to reset movieclips (place them outside the stage, or delete them) or quickly make buttons out of them:
for(var i in target_mc){
target_mc[i].id = i;
target_mc[i].onRelease = function (){
trace ("id = " + this.id);
// onRelease the id will be called (the name of the movie)
};
}
But in AS3 this doesn’t work any more!
And I know: AS3 should make my life easier…. well if I see the solution to the problem created by AS3, I have to disagree!
for (var i:uint = 0; i < target_mc.numChildren; i++){
trace ('t|t ' +i+'.t name:' + target_mc.getChildAt(i).name + 't type:' + typeof (target_mc.getChildAt(i))+ 't' + target_mc.getChildAt(i));
}
In AS3 you first have to get the “number of children” (numChildren) in a DisplayObjectContainer, then you have to say which child you want (getChildAt(i))…
A good thing about AS3 is, you get everything in a movieClip, even shapes you made there without a instance name.
I’m glad that I work with FlashDevelop, which has snippets so I don’t have to type this constantly!
(For the people that use FlashDevelop too, here is my snippet:)
// $(Clipboard)is a DisplayObject
trace ('+ number of DisplayObject: ' + $(Clipboard).numChildren);
for (var i:uint = 0; i < $(Clipboard).numChildren; i++){
trace ('t|t ' +i+'.t name:' + $(Clipboard).getChildAt(i).name + 't type:' + typeof ($(Clipboard).getChildAt(i))+ 't' + $(Clipboard).getChildAt(i));
}
Posted on: Monday, May 17, 2010
One of the major changes in AS3 is how you deal with XML content. While a lot of similarities carried over from the AS2 days, there are new time-saving niceties in AS3 that make working with XML files easier. One of the introductions is Ecmascript for XML, known as E4X for short. In this tutorial, you will gradually learn more XML tricks as you try to parse the various parts of the following XML data:
This tutorial attempts to cover a lot of ground, so I’ve provided a short table of contents to give you an idea of what to expect:
This tutorial attempts to cover a lot of ground, so I’ve provided a short table of contents to give you an idea of what to expect:
The XML Structure
Loading an XML File
Reading the XML Data
XML and XMLList
Accessing Data Directly
Accessing Data Indirectly
Calling all Children()
Reading Attributes
Filtering Values
Filtering Node Values
Filtering Attribute Information
As you can see, there are a lot of topics that you’ll learn how to juggle in Flash. Let’s start at the top and being by first describing what an XML file is.
The XML Structure
An XML file is essentially a tree with various branches and leaves commonly known as nodes and values. Our above XML data is no exception. The following diagram shows one way of representing our sample XML data:
Think of each box in the above image as a node. We have our main root node called Books, and that root node has four child nodes called Book. The Book node contains the ISBN information, and information stored directly on the node is called an attribute. You can also store information in your child nodes, and the book’s title and author information is stored in child nodes aptly called title and author.
This type of a hierarchy, like all XML data, is essentially a tree. In the computer world, trees are great because they help you to categorize information all the way from a broad overview at the top of the tree to the details at the leaves. From the above data, you can easily see that the parent node (Books) sets the agenda for what the child nodes (Book, Title, Author) will follow.
Before the end of this tutorial, you will learn several ways of accessing all of the node and attribute information. Before you can access the data, you need to load the XML data first.
Loading an XML File
When loading an XML file, there are several steps you need to follow. You first need to load the XML file. Digging deeper, you need some way of knowing when the XML file has fully loaded because you cannot manipulate partially loaded data. This seems complicated, but the built-in classes help you out.
Let’s look at the code for loading an XML file:
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest(“http://www.kirupa.com/net/files/sampleXML.xml”));
function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
trace(xmlData);
}
When you paste the above code into the Actions window, test your application by going to Control | Test Movie or by pressing press Ctrl + Enter. When you preview your animation, you will see our XML file’s contents displayed in the Output window:
[ your XML file is displayed in your Output window ]
Now that you know that our code works, let’s take a better look at the code and understand how it helps you load an XML file into memory:
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
In these two lines you declare two variables called xmlLoader and xmlData. The xmlLoader variable is of type URLLoader, and the URLLoader class helps you to load data from an external source such as a URL.
The xmlData variable is of type XML, and the XML class provides you with a lot of functionality for accessing and manipulating XML data. We’ll be using XML objects throughout this tutorial, so I’ll describe XML objects more in the upcoming sections.
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
In this line of code, we register an event listener to our xmlLoader object. An event listener basically, as its name implies, listens for a certain event, and when that event occurs, calls a listener function.
In our line of code, we listen for the completed event (Event.COMPLETE), and when we hear that event, we call the LoadXML listener function. Because we wait for the COMPLETE event, we ensure that we do not prematurely start fiddling with the data until all of our data has been loaded.
xmlLoader.load(new URLRequest(“http://www.kirupa.com/net/files/sampleXML.xml”));
We aren’t done with our xmlLoader object yet. In the above line, we call our xmlLoader’s load method.
The load method only takes a URLRequest object as its argument. The reason is, when you download data from the internet, the data is downloaded piecewise as streams. The URLRequest class ensures all of the data is loaded in its entirety, and that ensures our load method gets all of the XML data at once.
Let’s now look at the LoadXML method which I briefly mentioned when discussing the addEventListener method earlier:
function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
trace(xmlData);
}
Your LoadXML listener function gets called when your xmlLoader’s event listener detects a COMPLETE event. The COMPLETE event only gets fired when all of the external data via the load method gets fully loaded.
Because our LoadXML function is a listener, it is constructed a little differently than your typical function. The LoadXML function takes one argument of type Event called e, and this e argument contains lots of data related to the event that fired it.
You can access the data sent to our event listener by checking e.target.data. Since our event listener is fired by our URLLoader object, the data sent to it is the XML data you loaded via the URLRequest earlier.
Finally, all of the data is stored in our XML object called xmlData. After your LoadXML method has run its course, all of your XML data will then be stored in memory.
Reading the XML Data
An important part of dealing with XML data is knowing how to read the data. Before we get to some code related to reading XML data, let’s take a look at two classes you’ll be using.
XML and XMLList
The first class, the XML class, should already be familiar to you. You declared an XML object earlier, and the data loaded from external file was stored as a new XML object. This class provides you with the basic functionality needed to manipulate and access data stored in an XML file.
The second class that you will use is XMLList. An XMLList is similar to a standard List that stores nothing but XML objects. A major (and cool) difference is that most operations you perform on an XML object can also be applied to an XMLList object.
Accessing Data Directly
In AS3, accessing XML data is more straightforward than it was in AS2. Part of the reason, like I mentioned at the beginning of this article, is the use of E4X. Replace your existing LoadXML function with the following two functions:
function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
ParseBooks(xmlData);
}
function ParseBooks(bookInput:XML):void {
trace(“XML Output”);
trace(“————————”);
trace(bookInput);
}
Notice that you now have a new ParseBooks function that takes an XML object as an argument. The LoadXML function has also been modified with the trace statement from earlier replaced with a call to the ParseBooks method with our xmlData XML object sent as the argument.
For a sanity check, when you test your application again by pressing Ctrl + Enter, you’ll see the same unmodified XML data that you saw earlier:
Let’s say we wanted to access all of the Book elements from our above data. In AS2, you would have had to write some code to scan our XML file and stop once it had reached the Book node. In AS3, all you have to do is add one extra word to our trace(bookInput) line:
function ParseBooks(bookInput:XML):void {
trace(“XML Output”);
trace(“————————”);
trace(bookInput.Book);
}
We changed the trace statement from just bookInput to that of bookInput.Book where Book represents the name of element(s) we are interested in. When you run your above code you will only see the nodes that match the Book element name:
That seemed too simple. Let’s go a step further. Let’s say we only wanted the names of all of the authors located inside our Book nodes. The names of the book authors are stored in the
function ParseBooks(bookInput:XML):void {
trace(“XML Output”);
trace(“————————”);
trace(bookInput.Book.author);
}
When you test your application again, you will see the following displayed in your Output window:
Notice that you are now seeing a list of author names, but the author names are surrounded by the
function ParseBooks(bookInput:XML):void {
trace(“XML Output”);
trace(“————————”);
trace(bookInput.Book.author.text());
}
When you test your application this time, all of the authors are displayed without their surrounding
That is a small side-effect that can easily be changed. One way to fix this is by using index positions to retrieve just the values we are interested in. For example, to retrieve Sir Arthur Conan Doyle, I pass in the index position 0 as in:
function ParseBooks(bookInput:XML):void {
trace(“XML Output”);
trace(“————————”);
trace(bookInput.Book.author.text()[0]);
}
Running the above code will display Sir Arthur Conan Doyle as we wanted. In many cases, it is probably not convenient to manually enter index values. That is especially true if you do not have advance knowledge of how many nodes or child-nodes your XML data will have. In cases such as that, you will need an indirect, iterative approach different from the direct approach used in this section.
Accessing Data Indirectly
The indirect approach involves using loops and iterating through the child nodes and extracting the information as needed. When we traced the author information, we received all of the author names in one single line. Our goal is to figure out a way to iterate through our list and display the information individually without directly accessing the information using manually provided index values.
To do that, you should note that collections of XML information are always returned as an XMLList, and an XMLList contains only XML objects. For example, the list of authors you returned in the previous page were returned in the form of an XMLList, and an XMLList supports many of the standard List operations beyond supporting standard XML operations.
The following is the code I use inside our ParseBooks function for displaying each author information using a loop:
function ParseBooks(bookInput:XML):void {
trace(“XML Output”);
trace(“————————”);
var authorList:XMLList = bookInput.Book.author;
for each (var authorElement:XML in authorList) {
trace(authorElement);
}
}
Let’s look at our above code in greater detail:
var authorList:XMLList = bookInput.Book.author;
I first create an object called authorList that is of type XMLList, and I initialize authorList to the XMLList returned by bookInput.Book.author.
for each (var authorElement:XML in authorList) {
trace(authorElement);
}
In the above lines, I iterate through our authorList using a for-each statement. Because this is a for-each statement, I do not worry about index positions. Instead, I just specify the name of the current object and the collection from which the objects are taken from. The rest is taken care of behind-the-scenes.
Notice that your authorElement value is of type XML. The reason authorElement is of type XML is because, like I mentioned before, an XMLList (which authorList is) contains XML objects.
If you want to use a for loop instead of the above for-each loop, the code would be:
for (var i:int = 0; i < authorList.length(); i++)
{
var authorElement:XML = authorList[i];
trace(authorElement);
}
The only thing to note is that the loop ends when our index variable is less than the total number of items in authorList. We get the total number of items by calling our XMLList object authorList's length() method.
Calling all Children()
If you happen to not even know the name of of the nodes you are looking for, you can use the more generic children() function. The children function returns all of a node's children, and they are returned in the form of an XMLList. Once you have your XMLList, you can process the data in any way you choose:
For example, the following is an example on how to access information by looping through a node's children:
function ParseBooks(bookInput:XML):void {
trace("XML Output");
trace("------------------------");
var bookChildren:XMLList = bookInput.Book.children();
for each (var bookInfo:XML in bookChildren) {
trace(bookInfo);
}
}
Unlike in the previous examples where only the author information was printed, this time all of our Book node's children - title and author - are displayed:
You can filter by author checking your bookInfo XML object's name property. The name property returns the name of the node your data is stored in. For example, altering our above trace code from trace(bookInfo) to trace(bookInfo.name()) produces the following output:
What you see is the node names of the data you saw earlier. With this information, you can more selectively pick which information you want. For example, the following would be the altered ParseBooks function for displaying only the authors generated by using the children() property:
function ParseBooks(bookInput:XML):void {
trace("XML Output");
trace("------------------------");
var bookChildren:XMLList = bookInput.Book.children();
for each (var bookInfo:XML in bookChildren) {
if (bookInfo.name() == "author") {
trace(bookInfo);
}
}
}
Notice that I check to see what our current XML node's name is. If the node's name matches what I am looking for (author), I then display the relevant information.
You are done directly dealing with nested information stored in nodes...for now.
Reading Attributes
So far, we have primarily dealt with reading nodes/elements and their nested information. Attributes are different in that they are information stored directly on the node itself. As such, the approach for accessing that information is a little different.
In our XML file, the attribute is the ISBN information located directly on the Book node:
Let’s look at the AS used to extract that information:
function ParseBooks(bookInput:XML):void {
trace(“XML Output”);
trace(“————————”);
var bookAttributes:XMLList = bookInput.Book.attributes();
for each (var bookISBN:XML in bookAttributes) {
trace(bookISBN);
}
}
If you overwrite your earlier ParseBooks function with the above function and test your application (Ctrl + Enter), you will see the ISBN numbers printed. Let’s look at the one line of code that makes this work:
var bookAttributes:XMLList = bookInput.Book.attributes();
To access the list of attributes, I call the attributes() method on our Book node. The attributes information, if available, is returned in the form of…you guessed it…an XMLList! I then iterate through that list, just like before, and print out that information.
This approach, like our earlier XML’s children() approach, prints out all of the matching data. In this case, all attribute values are printed out. That is not a problem because we only have one attribute per Book node, but if you had multiple attributes, all of them would be printed. Let’s look at two ways of keeping track of them.
The first approach is similar to what you already used earlier. You check for the attribute’s name and see if it matches what you are looking for:
function ParseBooks(bookInput:XML):void {
trace(“XML Output”);
trace(“————————”);
var bookAttributes:XMLList = bookInput.Book.attributes();
for each (var bookISBN:XML in bookAttributes) {
if (bookISBN.name() == “ISBN”) {
trace(bookISBN);
}
}
}
This works because the name() method returns the name of node. The name() method does not distinguish between children, attributes, parents, etc. It only cares about what the name of the XML object is, so the similarity in how the name() object is used for accessing the attribute’s name and the node’s name is intentional.
The second approach is where you filter based on the attribute name when generating your XMLList itself:
function ParseBooks(bookInput:XML):void {
trace(“XML Output”);
trace(“————————”);
var bookAttributes:XMLList = bookInput.Book.attribute(“ISBN”);
for each (var bookISBN:XML in bookAttributes) {
trace(bookISBN);
}
}
In this approach, you use the attribute() method where you pass in the name of the attribute you are looking for:
var bookAttributes:XMLList = bookInput.Book.attribute(“ISBN”);
Your bookAttributes XMLList object will only contain a list of XML objects that contain attributes matching the ISBN name. This approach avoids you having to iterate through a larger list of XML objects and checking each name manually.
Filtering Values
Another new feature in AS3 is the ability to filter and display only the data you are interested in. In many examples in the preceding pages, you scanned through XML objects and tried to see if a name matched the value you are looking for. There exists a better way!
Filtering Node Values
Let’s say I wanted to find all books by Stephen E. Ambrose from my XML data. I could create a function that scans each XML object’s value and returns the parent XML node once the author value equals Stephen E. Ambrose. In AS3, a simpler, more powerful approach exists, and the following is my code for returning all books whose author was Stephen E. Ambrose:
function ParseBooks(bookInput:XML):void {
trace(“XML Output”);
trace(“————————”);
var authorList:XMLList = bookInput.Book.(author == “Stephen E. Ambrose”);
trace(authorList);
}
When you run the above code, your Output window will display the following:
Notice that the data returned are the actual XML objects that contained XML nodes named author whose value was Stephen E. Ambrose. This was possible because of the filtering mechanism introduced in AS3:
var authorList:XMLList = bookInput.Book.(author == “Stephen E. Ambrose”);
Instead of specifying bookInput.Book.author, returning a list of XML objects, and scanning each object for the author name Stephen E. Ambrose, I simply provide the keyword, a comparison operator, and the value that I want to search for. The rest are taken care of behind the scenes, and what you are left with is a collection of XML objects that match the criteria you specified.
While you found the results you were looking for, your results came back in the form of XML objects. To display the actual titles of books, sans XML information, written by Stephen E. Ambrose, you can simply append the .title keyword following your filter command:
var authorList:XMLList = bookInput.Book.(author == “Stephen E. Ambrose”).title;
The reason you can do this is because the results of your filter command are also returned in the form of an XMLList. Any operations you perform on an XMLList, such as searching for the title, are applied to each XML object stored within the XMLList also.
Filtering Attribute Information
Filtering your data based on attribute information is only slightly different. To return a list of books whose ISBN matches a certain value, all you need to do is prepend the @ symbol in front of your keyword.
Try out the following code:
function ParseBooks(bookInput:XML):void {
trace(“XML Output”);
trace(“————————”);
var bookList:XMLList = bookInput.Book.(@ISBN == “0743203178″).title;
trace(bookList);
}
When you run your application with the above ParseBooks function, you will see Nothing Like It In the World displayed. Let’s look at the authorList declaration in greater detail:
var authorList:XMLList = bookInput.Book.(@ISBN == “0743203178″).title;
trace(authorList);
Instead of typing in ISBN == “….”, you have to prepend the keyword with the @ symbol to flag that keyword as an attribute keyword. By typing @ISBN == “0743203178″, any nodes whose ISBN attribute matches that number is returned.
You can actually have as many conditions as you want, so you can create sophisticated filters for precisely find the data you need.
For example, try the following code:
function ParseBooks(bookInput:XML):void {
trace(“XML Output”);
trace(“————————”);
var bookList:XMLList = bookInput.Book.(author == “Stephen E. Ambrose” && title != “Nothing Like It In the World”).title;
trace(bookList);
}
When you test your application with the above code, Undaunted Courage will be the only returned result. Notice that we are filtering our data by both author and title. The author must be Stephen E. Ambrose, but the title cannot be Nothing Like It In the World.
Posted on: Friday, May 14, 2010
If you havn’t checked it out yet, my brother Derek has started his own photography business. He is now my personal photographer for all my projects that I do. So if your my client, you need some pictures, check out his website at www.echoshots.com and contact him. Mention my name for a discount!
Posted on: Friday, May 14, 2010
Recently I’ve decided to engorge myself in Actionscript, once again. Having said that, I just want to comment on a couple of things. #1. I love actionscript 3. It is so much better than Actionscript 2 its rediculous. It is so much easier to access properties of objects without worrying about where you are in the time line. Not to mention Tweener, a animation engine, rocks my socks off. If anyone is into actionscripting, and havn’t made the jump to 3.0, I recommend sitting down and studying the changes Adobe has made to the API. It is a serious time saver in the long run and you can do some really cool stuff with it.
Jeremy
Posted on: Monday, May 10, 2010
Hello. I’m a graphic designer and web developer. Please hang out for as long as you’d like and have a look around. You’ll find a great deal about who I am and things I’ve done. I’m honored that you’re taking the time to get to know me—and I’d love to get to know you.
Latest Comments