If you open terminal in Mac OS X and type the following:

ls -la

You will see a list of files, both visible and hidden in your home directory. The first column will show you the permission table for a particular file (for example, -rw-r--r--), which anyone with some familiarity with unix filesystems will recognize. However, you will also notice a “+” and “@” symbol appearing to the right of the permission tables of some of the files. What are these?

The “@” symbol

This indicates that the file has additional attributes. You can see these additional attributes by typing the following command:

xattr -l <filename>

What are these additional attributes used for? Well one example is this: Have you noticed how in Mac OS X 10.5 when you download a file from the Internet and then try to open it you will get an alert box warning that the file was downloaded from the Internet using Safari or whatever, and a prompt asking whether you would like to open it or not. After opening the file, you do not get a warning the next time the file is opened. Where is the flag for this behavior stored? In the additional attributes of the file. Try downloading a file from the Internet and then navigate to it via Terminal and type xattr -l <downloaded-file>. You will see the additional attributes of the file, which in this case are quite obviously used for file quarantine.

The “+” symbol

This indicates the file has an ACL, short for Access Control List, which is used to give fine grained control over file permissions, beyond what is available with the regular unix permission tables.

Typing the following will show these additional permissions for files in a directory:

ls -le

Cascading Style Sheet (CSS) styles are most commonly applied to elements (paragraphs, links, images, etc.) within a web page by one of two ways: either through ID selectors or class selectors. For example:

<div id="id-selector">style applied with ID<div>
<div class="class-selector">style applied with class<div>

When first learning to use CSS I think it can be confusing on when to use an ID and when to use a class as they seem on the surface to function identically. However, there is a fundamental difference, and an easy to remember one at that:

IDs may only appear once within a web page, while classes may appear multiple times.

Let’s take a closer look at the differences:

ID selector

• Designated by a hash (#) preceding the style name.
  For example, #id-selector{font-size:12px;}.
• Can only appear once within a web page.
  While this is not enforced by most, if not all, major web browsers it does not mean you should disregard this rule, as it potentially will cause problems if you decide to add JavaScript in the future. Your page will not pass validation by W3.org either.
• Can only appear once within an element on a web page.
  For example, <div id="id-selector">.
• Takes precedence over styles applied with a class.
  Web page elements can have a mix of ID and class supplied styles, for example, <div id="id-selector" class="class-selector">, however the styles declared in the ID selector will always take precedence over any conflicting styles declared in the class selector, unless the !important declaration follows the style declaration in the class. For example,
  #class-selector{font-size:18px !important;}.
• Is used by JavaScript to gain access to an element.
  Using the getElementById method allows elements on a page to be accessed and manipulated via JavaScript.
• Allows the browser to scroll to a particular element on the page if the ID name is appended to the end of the URL.
  For example, http://www.somedomain.com/yourpage.html#id-selector.

Class selector

• Designated by a period (.) preceding the style name.
  For example, .class-selector{font-size:12px;}.
• Can appear more than once within a web page.
  Unlike IDs, which should only appear once, classes can be applied to multiple elements on a web page.
• Can appear more than once within an element on a web page.
  Providing a space separated list of class selectors within the class attribute of an HTML element allows multiple class styles to be applied at once. For example,
  <div class="class-selector another-class-selector">.

The following is a short example demonstrating all the above rules I have listed for ID and class selectors:

<style type="text/css">
 
#page-content
{
	width:300px;
	margin:10px;
	padding:10px;
	border:1px solid #00ff00;
	font-size:11px;
}
 
.page-element
{
	border:1px solid #ff0000;
}
 
.augmented-element
{
	border-top:none !important;
	border-bottom:none;
}
 
</style>
 
<div id="page-content" class="augmented-element">
	<div class="page-element">First</div>
	<div class="page-element augmented-element">Second</div>
	<div class="page-element">Third</div>	
</div>

Viewing this code in a web browser should render the following:

There was a question posted on the Flash Coders group on LinkedIn.com last night asking the simple question: “What is Flex?”

I think reading about Flex for the first time can be a little confusing and intimidating, so here are some points to keep in mind:

• If you are coming from the Flash world, you can think of Flex as building Flash applications using a set of pre-built components (think of what appears under the Components panel in the Flash authoring tool’s Window menu).
• Flex actually refers to a set of technologies, most notably what is known as the “Flex Framework,” a library of reusable components for rapidly creating Rich Internet Applications (RIAs) — that is applications on the web that behave like desktop computer applications. The components that make up the library are ActionScript class files (read up on Object-Oriented Programming if that is meaningless) that may be instantiated (created) using MXML or ActionScript. Interactivity between the components is generally provided by ActionScript, whether or not the application was built using MXML or not. All Flex Framework components reside under the “mx” package in the Flex API reference (which is a list of all the ActionScript classes you can use in your Flex projects, as well as those available to Flash projects).
• MXML is an XML markup language that makes the creation and layout of visual components of the Flex Framework more intuitive. The XML-style syntax of MXML makes it easy to see what visual components are nested within others. For example, a set of Buttons inside a Panel (a panel is like a window you would find within a desktop application, except it can not be dragged around the screen) may look like:

   <mx:Panel title="A Panel Example">	
  	<mx:Button label="Button A"/>
  	<mx:Button label="Button B"/>
  	<mx:Button label="Button C"/>
  </mx:Panel>

• Flex Builder is a commercial product by Adobe that offers time saving development tools such as a “Design” mode that streamlines the laying out of Graphical User Interfaces (GUIs). It is built upon an open source product called Eclipse, which is a software development tool that originally was for developing primarily Java-based software. In addition to Flex Builder, Adobe offers a “Flex Builder Plugin” for Eclipse, since the two products are so closely related.
• The Flex SDK (Software Development Kit) is an open source package released by Adobe that includes the Flex Framework classes and a compiler (called mxmlc) used to turn ActionScript and MXML source code into a SWF that can then be run inside a webpage, etc. using the Adobe Flash Player plugin. Other tools are included in the Flex SDK such as a tool for creating documentation of the ActionScript class files (asDoc) and a tool for creating SWC files (called compc. SWC files are ActionScript libraries — essentially a bunch of ActionScript classes in a zipped archive, which make them portable for use in other projects).

To see how all these Technologies interact together, check out the Adobe Flash Platform diagram. If you wish to learn Flex I would suggest first having a solid understanding of ActionScript 3.0 and Object-Oriented Programming. The most confusing part to me in the beginning was understanding that everything in a Flex project is ActionScript, even when laying something out using MXML. At the end of the day, there is an ActionScript class behind each component declared in MXML. MXML is just a convenience language, and as such is not necessary to developing Flex applications.

The semester has wrapped up at Marietta College and I’ve posted the grades for my class: “Motion and Interaction.” I was really pleased with the enthusiasm and dedication my students showed throughout the semester, which made teaching the class a rewarding, educational, and enjoyable experience for me. To show my appreciation I will help my student’s with their Google rank, by being the first to link to their personal websites (which are the final projects from the class).

Here they are in no particular order:

• Allie Williams
• Mike Aboukhaled
• Mike Nichols
• Andreas Tabor
• Jessi Larrison
• Ashley Nolan
• Brittany Durand
• Jen Bachelder
• Aleshia Ryan
• Elysia Wright
• Kacy Boggs
• Megan Swaney

Awhile back when I was learning to use the Cairngorm framework, Nicolas Lierman had a very basic example of a Cairngorm application. At the time I was trying to slog through the Cairngorm Store example, racking my brains trying to figure out what was going on. I didn’t need such a complex example to start from, just something extremely simple that would compile, and I could build from there. Looking at Nicolas’ example application was an ‘ah ha’ moment when it all came together in my mind. Now I have been learning the PureMVC framework and would like to resurrect a slightly modified version of that Cairngorm example (Nicolas’ used WebService, this uses HTTPService) side-by-side with the same example written in PureMVC. If you are trying to learn either of these frameworks, reference the Cairngorm Explorer and/or the PureMVC Conceptual Diagram and build on these examples. I hope they will help you as much as they helped me to learn the framework’s architecture.

Below is the example application written using the Cairngorm framework. Since the PureMVC example looks and functions exactly the same I will omit it. As you can see it is very simple. Type in your name and it sends it to the server and returns a message.

The php backend is extremely simple:

<?php
	echo "Hello " . $_REQUEST['name'] . "!";
?>

Download Source Here (You will also need to download Cairngorm and PureMVC).

I feel a bit guilty. These may be the most troubling economic times in seven decades, but in the borderless world of web development I felt outside of the economic downturn. Sure the news has been bad for awhile, and just this past Monday the economists at The National Bureau of Economic Research crowned the pink elephant marching through the lives of so many. In case you missed it, it is “officially” a recession, and has just passed its first birthday (see article by CNN). Yet I see job postings for Flex/Flash/Web Developers/Designers daily and the news of bank bailouts, the mortgage crisis, job losses all felt troubling in an oh-the-horror-that-grips-those-faraway-lands kind of way. After all I work in an arena that seems so poised on the edge of ever more explosive growth. This is the age of Rich Internet Applications, the juggernaut of Google’s information indexing empire, the maturation of social media (as evidenced by Twitter’s use in spreading news of the recent attacks on Mumbai). Why even Adobe just released a slew of new projects on their labs site a little over two weeks ago. So there I go, surfing a wave of optimism across a sea of economic doomsday hearsay. It’s troubling, but I have my toolkit of web technologies to guide me forward. Many of which fly under the flag of Adobe.

Tonight, however, my surfboard sank a little. News spilled out that Adobe is restructuring and is laying off a significant fraction of its workforce, 600 jobs, or 8.6% of its 6,959 employees. Among them is Mike Downey, Adobe’s Principal Evangelist for AIR, Flash, and Flex, who sent this note over Twitter a few hours ago: “I am no longer with Adobe. It’s all for the best.” I remember Mike as a friendly face at FITC Toronto, eager to speak with the masses. I hope it is for the best.