Posted By : Dan Wilson     March 14, 2007 9:29 PM

Sean Corfield pointed out that using ColdSpring to make instance (throwaway) components is quite a heavyweight approach for a simple form bean. He is, of course, correct. Our ContactFormBean is currently created by ColdSpring. In this series, we will add a factory object that will make our instance beans for us. The factory itself will be configured through ColdSpring as well as the configuration for our objects.

This is a very simple factory. It has three methods, GetConfig, SetConfig and getBean. In turn:

1. getConfig() returns a struct with keys = objectnames, and values = paths
2. setConfig() provides an interface for ColdSpring to set the configuration struct.
3. getBean() gets the path for a specific object from the configuration struct and returns a created object.

To use this instance factory, add the following ColdSpring xml snippet to the ColdSpring.xml file.

Now remove the original ContactFormBean configuration.

Next, open the Controller.cfc file and change each instance (getContactForm, handleContactForm and removeContact) of getModelGlue().getBean("ContactFormBean") to getModelGlue().getBean("InstanceFactory").getBean("ContactFormBean") .

Finally, reinitialize your application and click on the ContactForm tab. You should see your form as before.

A factory might seem like overkill right now, since this is a simple application. However, Factory objects are a good pattern to learn. Our motivation for the factory in this case was to reduce the amount of unnecessary processing incurred by using ColdSpring to make a simple form bean. We could however, expand our factory to take additional parameters and create all sorts of dynamic objects for us.

In a later series, we'll do just that.

Download

9430 Views Print Comments (5) Rapid Development, ColdFusion, Tutorials, Model-Glue

del.icio.us Digg It! Linking Blogs

Posted By : Dan Wilson     March 14, 2007 12:06 PM

Gmail is available once again. After being mildly annoyed at the "Please try back in a couple of minutes" message, I viewed source and found a hidden link to "Classic View". Classic View worked for me, the Enhanced Ajax UI did not.

Parenthetically speaking, using the "Classic View" reminds me why I invest so much time in AJAX and FLEX. "Classic View" is so 1990.

4893 Views Print Comments (4) Random

del.icio.us Digg It! Linking Blogs

Posted By : Dan Wilson     March 14, 2007 8:15 AM

Gmail is acting very strange lately.

Are others having problems with Gmail as well?

4759 Views Print Comments (0) Random

del.icio.us Digg It! Linking Blogs

Posted By : Dan Wilson     March 13, 2007 8:13 PM

I was digging through a bunch of javascript code today and trying to trace out some variables. In JSEclipse, an eclipse plugin made by Interakt(newly in the Adobe fold), if you highlight a variable name, or a property name, it not only highlights all instances in the file, it also places little markers for each instance on the right hand gutter of the IDE. A quick mouse click jumps right to the instance. I've used JSEclipse for a little while now, but this was the first I noticed this handy feature.

This particular JS file was well over 700 lines and I needed all the help I can get. Thank you Interakt for JSEclipse.

There are plenty of other nice features in the JSEclipse plugin such as:

1. Contextual code completion
2. Suggest parameters to be filled
3. Reads all classes in current project
4. Scan current file for words
5. Syntax Highlighting
6. Syntax based code folding
7. Error reporting

You can get JSEclipse here. (Registration Required).

6548 Views Print Comments (0) Javascript, Ajax

del.icio.us Digg It! Linking Blogs

Posted By : Dan Wilson     March 7, 2007 3:26 PM

I remembered the time on my server was off and when I was SSH'd in for a bit of maintenance, I corrected the server time. I then logged into the BlogCFC administration and changed the offset setting to match. Now having the correct time in both places, I thought no more about it.

What I didn't know was the links to all of my posts would be invalidated. Apparently, the posttime is used in the post URL. Changing the server time and the offset had the unfortunate side effect of rendering existing links to my posts inoperable. I did what I could to fix all of these and checked against other places on the web where I am linked. If I have missed one or two, please leave a comment and I'll fix it.

3172 Views Print Comments (0) Random

del.icio.us Digg It! Linking Blogs

Posted By : Dan Wilson     March 7, 2007 12:49 PM

Live blogging. As always, please ignore the typos and all mistakes are mine.

Sitting on my chair was an announcement for the Flex Cookbook. The cookbook is a growing resource for Flex questions and answers. Please have a look.

The Keynote:

Ted Patrick introduces Tom Hobbs from Adobe. Tom begins by discussing Designer / Developer workflow in the context of cycle racing. Cycle racing is not a spectator sport. The spectators wait for hours until the cyclists come by and then there is 2 seconds of action. On the projector screen Tom shows an example of the Amgen Tour and we can see a very slick application that follows the racers. The application will let the user select which racer to follow and keeps track of the race progress via maps from Yahoo. Additionally, the app references pictures from Flickr. The application is VERY nice and Tom says the Amgen Tour application was completed by 3 people in 6 weeks. 1 Designer, 1 Programmer and 1 System Architect.

Tom discusses the workflow between each of the three roles. The process is iterative, explorative and a lot of back and forth between principles. It is important to balance the interface and the infrastructure. Tom is explaining the challenges of syncing content from disparate sources and media types into a single real-time application. The application began looking quite simple on the back end and the final result is very involved.

Value = Simplicity + Quality

• Design for the 80% of users
• Show only tools needed for the task
• Do more where you are
• Let content breathe.

Content

• Design Content not chrome
• Express things visually
• interact deeply with content

Animation

• Flow orientation and Guide
• Predictive
• Task based vs. Tool based
• Cinematic Transitions
• Evokes Emotion, Focuses attention

Design as a Whole

• One person or team should design
• If features change significantly, the whole must be reconsidered

• People and communities want to express themselves
• Comminity creates better content
• Users want different things, to use in different ways,
• Identity and brand matter

Ted Patrick is now on stage and will talk about Next Flex. He gives the disclaimer that what we will now see might not make it into the final release. Ted stresses the open development process at Adobe and wants us not to get too upset if the final product changes.

One of the goals of the New Flex is to expand the reach of the RIA to include desktop, web and offline applications. Another goal is to make it easier for web and enterprise developers to learn Flex. Adobe wants to invest in the platform to serve the needs of the enterprise and that of the "Flex Ecosystem". Ted continues to stress the open development process and openness to the needs of the community.

The Next Flex will be built on Flash Player 9. ( In a meet the Flex Team session last night, I asked if the level of change from Flex 2 to Flex 3 would mirror the level of change from Flex 1.5 to Flex 2. Thankfully, they said it wouldn't be so dramatic from the coding perspective.)

Ted is now talking about the integration of the CS3 suite. Each of the applications will produce an output suitable for Flex / Apollo applications.

Demo of Fireworks Ted starts of with a Blank Fireworks project. There is a Common Library inside the Fireworks application that contains Flex Components. Ted chooses a panel and resizes it showing how the design scales in accordance with Scale9. Now Ted adds buttons and checkboxes to the panel and exports the whole panel as "MXML and images". The output is images and a working MXML representation of the Panel Ted laid out in Fireworks.

Borneo, the new Flex Data Services. The upcoming release of FDS (soon to be named Live Cycle Data Services) includes Scalability and performance enhancements. Integration with LiveCycle and a vastly improved <mx:Webservice> functionality.

Moxie the new Flex SDK and Builder

1. Improving the language intelligence in the IDE
2. Integrated Profiler
3. Design View Enhancements
4. Data Integration
5. Enhanced DataGrid and Lists

As an example, Ted shows an example of an MXML application in the new Moxie IDE. He points out he doesn't like how the developer named the methods. He selects the method and clicks Refactor from the context menu and chooses 'Rename'. The Flex Builder application changed all the instances of the methods in ALL files, not just the one he was currently in. This will work with methods and properties, not sure what else. What a cool feature! Now he shows a Control + G search that will show where an element is used in an application. This search is context aware and if you search for a property, it will only find properties, not similarly named methods.

The talk shifts to the Flex ecosystem. Ted talks about how many companies and entities are involved outside of Adobe.

ESRI created vector based mapping component service. Rather than the normal Mercador projection style maps, the format that shows Greenland as the size of the United States, the ESRI format shown doesn't have the same distortion bias.

Farata Systems created a business intelligence application. The application features a drag and drop custom reporting module with custom filters.

Ted now talks about FlexLib. FlexLib is a GoogleCode based repository for Open Source Flex Components. This project is very new. Expect to see lots more components in the coming weeks. If you have components, you can submit them for inclusion in the FlexLib project.

Now Ted highlights Yahoo. Yahoo has a lot of APIs that can be used inside Flex applications. Ted shows Term extractor. This is an application that will take a term entered by a user and will map relevant other terms. Each term shown will link to other terms and if a term is clicked, another tree will generate. Very interesting application.

5385 Views Print Comments (0) Flex

del.icio.us Digg It! Linking Blogs

Posted By : Dan Wilson     March 6, 2007 3:02 PM

I am sitting in the Flex 101 Components and Containers course. I say course because unlike the other 3 tracks the room set aside for the Flex 101 track is set up with tables, power supplies and ready for some hard core coding.

This session is taught by John Wilker. John is very good at explaining simply the inner workings of Flex. He is building an RSS reader application right now and explaining the MXML tags used.

Canvas

Used to set position of the application.

HBox / VBox

Lays out children containers in a horizontal / vertical fashion.

Form

Contains FormItem tags. FormItem tags have labels and contain specific types of data collection fields. The Default behaviour of the Form tag is to place the labels on the left, text-aligned right and the data collection objects on the right. This can of course, be changed to suit your needs. The form tag has NO behaviour. It is purely a layout container.

Grid

Lays out tabular data.

HDividedBox/ VDividedBox

Lays out and divides the children horizontally / vertically. Allows the user to resize the divisions.

Panel

Makes a bordered section of content and has useful properties such as Title. Very nice rounded corners!

Tile

Very similar to the grid, I am not sure what the differences are at the moment. I need to read up on this.

ApplicationControlBar

Sticks a container at the top of the mxml application. Useful to place controls to use with the application. Has a dock=true/false property that if true, will peg the controlbar to the top and exempt it from scrolling. I might have to play around with this.

ViewStack

A non-visual control used to group a series of containers. Only one container is visible at any time and you can programmatically control the bisible component using the selectedIndex property of the ViewStack. Out of the box, the change in visible items is immediate though it is possible to customize and extend the ViewStack to do this.

5283 Views Print Comments (0) Flex

del.icio.us Digg It! Linking Blogs

Posted By : Dan Wilson     March 5, 2007 4:02 PM

This was one of the MUST SEE presentations on my list. Building reusable components is a great way to provide customized Flex functionality and I was very excited to actually get a seat in this packed session. There were at least 40 people sitting on the floor!. I took a lot of notes and will make some available below. The slides are a great reference and they are available at: Chafic Kazoun's blog located at http://www.rewindlife.com

Notes below:

Flex Components are reusable components that are self contained. Using component are a proper way to write maintainable applications in Flex. Using components can be a lifesaver for team environments because it helps insulate the impacts of change in component development.

A cheat sheet for starting a new custom component:

1. Decide on what the component should do
2. Don't overthink the API just yet
3. Provide protected data access and limit what can be passed into the component
4. Finally, decide on the public API

Setting up the component:

1. The root MXML tag is the base class. This is often a container you use to contain the component.
2. Next, specific a package through a directory structure.
3. You MUST reference the Flex mxml namespace.
4. Using the component in a Flex application means you must import the component and assign it to a namespace.
5. Treat the component like a black box.

Fun Facts:

• When you import a component into a Flex application, Flex Builder will find the namespace and give code hints based on the properties of the component.
• If you make a public bindable, the get and the set are both made binable regardless if the [bindable] directive is on the get or the set declaration.
• Using past tense events is not good practice. For example, FormChangedEvent is not a good representation, use FormChangeEvent instead.
• Override the public function clone inside your Event class. The clone should return a new event and provide the setup code for initializing the event.

6354 Views Print Comments (0) Flex

del.icio.us Digg It! Linking Blogs

Posted By : Dan Wilson     March 5, 2007 2:13 PM

This presentation by Ben Stucki, a software engineer with Atellis, is on ByteArray 101. This is directly after lunch so I am struggling not to slip back to the hotel and have a nap. However, as has been said before, "Sleep: a poor substitute for caffeine. ~Author Unknown" and the fine organizers of 360Flex have ensured a continual supply of caffeine.

Flex gives you the power to work with one byte at a time. This means content and formats that aren't fully supported can be read with a ByteArray. All data is represented as binary. Also, sockets use binary data so using the ByteArray is perfect for extending the fles framework in new and exciting ways. A byte is 8 bits and a bit represents an on / off state.

Ben is now going over bit arithmetic. 00000001 = 1, 00000010 = 2 etc. Bytes have a maximum value of 255. 4 Bytes can compose a uint(unsigned integer) or an int. 8 Bytes compose a number data type and a string is a variable number of Bytes.

A Byte array is an array of Bytes and typically the array is read from beginning to end. There are several convenience methods to read Bytes and each reads a different number of Bytes before evaluation. Common methods are readUnsignedInt(), readDouble(), depending on how many Bytes you wish to read at a time.

ID3 tags are used in MP3 files to track meta data in an mp3 file. Represented as a ByteArray, each type area represents certain information. To validate an ID3 tag, read and evaluate the first three Bytes. If proper, the result will be 'id3'. The following 2 Bytes represent major and minor version respectively. Thus, by reading the Bytes, you can determine a lot of information about a stream of Bytes.

Ben is now using Apollo and Apollo code samples for this presentation. Even though this is primarily a Flex conference and Apollo won't be released until the end of the year, I am very excited to see more Apollo!

Ben's example application will pull in Album covers and read the ID3 tag information from a file. Now he is showing how to open a file from the file system. The UI control is similar to the HTML file browse but there is come custom code needed to read the list of files in. He filters the results of a file.browse() command to include only .mp3 files. Then he fills an array with the results.

Soliloquy: Now that I have seen Apollo source code, I believe it is the same code in Flex, just with a different API. How very nice that I won't have to learn yet another language. Now back to the application demonstration.

Once a file is selected, he reads the file from the filesystem using a FileStream. Then he walks from byte 0 and reads the specific sections of the byte stream. He traces out the results from the reads and we can see on the screen the id3 header. Cool stuff. You won't be doing that with javascript so take that AJAX fanboys!

Ben stresses all file formats have an established header with an ID section and other header meta data. If you know the file format, you can read any file byte by byte. Understanding it, however, is your problem (Ben's joke not mine ;))

Back to reading Bytes, Ben is tracing out all of the ID3 tags in the mp3 file read from the file system. There are a lot more tags than I thought in an MP3 file. for example, if the beginning of the ID section of a tag is 'T', the rest of the tag should be processed as text. If the ID section of a tag is 'APIC', then the tag contains information about an image thumnail somewhere in the file. You can get the start and end position of the image by reading the additional information in the tag. After the image is copied into another ByteArray, Ben creates a new Loader() loads the Bytes from the image ByteArray and then image that was once embedded in the MP3, is now displayed to the user. Look! Album Cover Art!

From this session, I feel much more confident about applying and extending Flex and Apollo. Since both frameworks offer the ability to process binary data one byte at a time, I as a developer will be able to create compelling solutions for my clients without being dependent on supported formats. To date, this was the most low-level demonstration of the power of Flex and Apollo. This isn't your Mommas HTML.

Ben shifts to Sockets and Streams now. He says the methods used to work with Sockets and Streams are the same as he used when reading a file. The key difference is a streams and sockets do not have an 'end' like a file does. Also, sockets are bi-directional.

Ben points a digital video camera at the audience. A picture of us shows on the presentation screen. This particular produces a stream of images in an MJPG stream or a stream of JPG images. There is no formalized specification for MJPG so this illustrates how to use a looser format or specification. Ben has an image effect used on this stream of JPG images. At the bottom of the images is a reflection sort of effect which looks like the pictures are reflecting off water. Very Cool Stuff.

The funniest part of this session is during the Q&A section, an audience member asked Ben if he would trust his life to an application written with Flex. Confidently, Ben answers with the affirmative. The audience member asks if Ben would trust his life to an application written in Apollo, Ben says 'Yeah', and after a pause, 'Well, not right now, Apollo is in Beta.' Gotta love that.

9237 Views Print Comments (0) Flex

del.icio.us Digg It! Linking Blogs

Posted By : Dan Wilson     March 5, 2007 11:38 AM

This is oN-tHe-FlY reporting from the front row of 360Flex. (ignore the numerous typos)

Introducing Mark Anders, Sr. Principal Scientist at Adobe.

Mark just took a poll of all the attendees and asked whom was the flash developers. Not suprisingly there was less than 15% flash developers. Now he is talking about the Flash IDE and talking about how confusing the Flash Timeline is and asks the question "How do I build an application with a Paintbucket tool?" Having tried flash development around the Flash 5 time, I can completely agree.

Mark is giving us the background behind the Flex framework. Flex is a programmatic framework for building Flash based applications.

What makes Flex Magical?

1. MXML - an XML based language to specify creating object trees and also provide a Domain Specific Language for actionscript objects and classes.
2. Data Binding - Allows updating of the User Interface when the underlying data changes. This is a foreign concept for folks used to HTML development. In HTML development there really is no state, simply a post-response model. In Flex, bound data, when changed, will change all over the Flex application wherever the bound data is used.
3. Composition -
   1. New components can be built by assembling existing sets of components.
   2. Templates are placeholders within a component to be parameterized on use. Mark points out code fragments can be passed in to customize the llok and feel.
4. States - States represent configurations of an application. You can add, remove and change components for a particular view state.
5. Based on Flash. Flash is a very powerful render

Mark Anders Mac locked up during the presentation. Someone in the audience made a joke that due to Mark's Tenure at Microsoft, the Blue Screen has been implanted in his mac. Now he says, it is probably Microsoft software because he is using MS Powerpoint. ;).

Mark has shown several examples and applications that were very compelling. It is pretty amazing what can be done with Flex. One example of an MXNA reader used a fisheye component to switch between MXNA channels. When a specific channel was clicked, the channel icon bounced up and down and when the channel was loaded, the channel icon had smoke pouring from the top of it. It was VERY cool and the visual model made perfect sense even for an uneducated user. For me, this is the BIG power of Flex because no only can you design and create these types of applications but you can guarantee cross platform consistancy.

Mark mentions the Virtual Machine for ECMA script was donated to Mozilla. Engineers from Adobe and Mozilla will be working on the Flash Player 10 engine. This is very nice as it will help adoption of the standard.

Now Mike Downey is on. Mike is the Senior Product Engineer for the Apollo platform. Apollo Features:

1. Local File access
2. Online / Offline detection and events
3. Full Drag and Drop capabilities
4. Clipboard access
5. Background Processing
6. Multiple Windows support
7. Customized chrome. ( This is cool because spectra didn't allow this.)

Mike says making a Flex application an Apollo application should be pretty easy. This is good news and when apollo comes out we can build on what wwe have rather than a top-down rewrite. Mike is now showing a demonstration of an Apollo application called Buzzword. Buzzword is a Word Processor application built with Apollo. The performance with entering text is quite fast. None of the latency I would have expected. Since Apollo can write to the file system, it is a better choice for Word Processing than a web based word processor application.

Mike is now showing a Google Maps integration. This shows Flex + AJAX. The vCards from Mike's address book are shown on the left. He drags a vCard over to the gMaps interface and the address is zoomed to in gMaps. Very cool. Now he is showing a Firebug like implementation done in Apollo. I don't think it will overtake the Firebug utility, but it is cool to see the hooks into the browser runtimes.\

Mark has taken the stage once again. He is talking about the upcoming Flex 3 release. The main ideas for Flex 3 are:

1. Enhancing the Designer / Developer workflow
2. Better integration with the Adobe Creative suite.
3. Adding and enhancing data components
4. Integrating Apollo into Flex Builder
5. Enhancing the framework to take advantage of new Apollo concepts and services

The release schedule is as follows:
The first half of 2007 will see the Apollo public labs release, the Flex 3 'Moxie' release and Creative suite 3.
The second half of the year will see the 1.0 release of Apollo, Flex 3, Philo 1.0 and Flash Media Server.

8278 Views Print Comments (1) Flex

del.icio.us Digg It! Linking Blogs