Wednesday, August 29, 2012

Findall

My first open source project has just been published to GitHub!

What is it?

Findall is an open source "find in files" library written in C#.

Findall on GitHub

Background

I was writing a closed source application that would allow people to easily find lines of text in files... then I decided not to charge for the application and instead make the core library open source for anyone to use!

Thursday, January 28, 2010

3 Tips for Getting that Large Project Going

Introduction

In the past, I have had a hard time getting large projects off the ground. I kept thinking about all of the technical details, which libraries and languages I will use, and how successful the project will be once it is finished.

The problem is, I never started on the work. Every time I got 20 minutes or an hour to work on it, all I could think about were these technical details.

I have long since learned from my mistakes and have found 3 general processes for getting large programming projects off the ground. If you're stuck in design mode, try giving these methods a shot:

Method 1 - Requirements Are The Key

Write only the generic requirements on a single sheet, in a binder on its own, or in a single document.

Keep the requirements short and sweet.

Keep all technical notes that you just can't stop thinking about elsewhere - they are not important in this phase. If possible, don't write them down at all. You will think of them later (or better ideas) and you don't want to force yourself into the wrong library later.

Think about how you will use this application/library, what will be difficult, what will be beneficial (again staying away from technical details including the language and library).

Begin writing code or manipulating wire frames as if you are using your newly completed project. Keep this "test code" for reference but don't make it the golden rule.

Collect flaws and focus areas and add them to a "things to consider" sheet.

Start writing simple implementation code starting at the easiest thing first (very similar to TDD but without the tests).

Success

I have used this method for some of my larger research type projects. It was very easy to adopt.

Failure

Three projects using this method never made it past this phase due to marketability and usability factors that were exposed. They seemed like fun research projects but were not practical so they remained a paper-only experiment.

Method 2 - Spike It

Maybe the best thing to do is a quick Spike (term from XP). Simply start writing a bunch of code you won't keep but will learn from. You get a feel for the project and end up writing version 2 first.

Success

I have used this successfully when picking up a modified version of the MVP pattern and some complex UI code.

Failure

I have kept the code written using this method due to time constraints. It has bitten me and was rewritten at a later date.

Warning

This works best for new requirements to existing systems. New projects also benefit as long as you are disciplined enough to toss the spike when you're finished with it.

Method 3 - TDD It To Death

This method is the hardest to master but one of the most powerful. Using Test Driven Development to work top-down (never TDD up) is very fun and productive.

First you starting at what you want to be the outcome (your initial requirements). Continue testing down until it is the implementation.

This takes practice especially when writing and maintaining the requirements list the TDD way. Refactoring and writing as little as possible while still adding value is also difficult when you've been writing legacy code for so long.

This method helps isolate dependencies so you can replace them easily if requirements change down the road.

Success

I have used this for a simple C# device interface project and a string template class. Both were to help learn TDD and both were never 100% completed. These projects had a lot of power, worked very well, and the code looked like a work of art.

Failure

This has failed just as many times as it succeeded for me. The reason was simply not knowing TDD, how to write requirements, and keeping myself from writing more code than I need to.

Summary

Start doing something NOW! Don't wait, think more, put it off... start doing something. Even failures are learning experiences. You cannot succeed if you don't try.

Good luck!

Friday, January 15, 2010

Test Driven Development in One Page or Less

Introduction

I was writing a co-worker to explain TDD. It ended up being a short and sweet guide to test driven development that I wish I had when learning TDD so I decided to share it. This is barely a starting point for TDD. I suggest reading "Test Driven: Practical TDD and Acceptance TDD for Java Developers" (even if you don't write in Java). Amazon.ca link here

If you would like a sample project for each step including tests, please leave a comment.

Development Environment

Refactoring support is crucial because you do it so often with TDD. When developing with Flex Builder (no refactoring other than rename), it was very painful and I caught myself skipping steps.

I prefer to use Visual Studio 2008 Professional (C#) + Resharper + NUnit.

NetBeans + JUnit works well and it's free.

I'm sure IntelliJ Idea is also a nice environment.

TDD In One Page

  • You write out requirements in a certain way that makes producing tests from the requirement very easy. As you develop, you may think of new requirements (what if I pass in null?) so you add these to your list but don't start them right away unless they are the next best test to develop.
  • Then you start with your test class and write your first test function.
  • Then you instrument the class you intend to write before writing it.
  • Since your tests are very basic and you start with the easiest one first, this should be short and sweet.
  • Then you write the class with an empty method (just to pass compilation), and run your test. It should fail because you're probably not testing doing nothing.
  • Then adjust the class in the simplest way possible that adds value. So for this one, we just want to make it pass. Return the expected value and viola! You're green.
  • Now refactor (no need here - with this example)
  • Continue with your next test
  • This time you're looking at a different aspect of the same function. If we were making a function that returned string length, the first test may have been: when I pass in a null, I expect a NullPointerException. Now we may be expecting a 0 when an empty string is passed in.
  • Run test (red - expected 0, got NullPointerException)
  • So adjust the function to test for null & throw an exception, otherwise return 0. It still adds value because now we test for null.
  • Run tests (green)
  • Now refactor (no need here)
  • Add a test for a single character string.
  • Run tests (fails - expected 1, got 0)
  • So adjust the function to return the string length rather than 0.
  • Run tests (green)
As you can see, TDD is about Red, Green, Refactor, next test.

So What Do We Have Here?


At this point you have some great tests that stay with the project forever and didn't take long to write. Your code is clean and easy to use.

Without TDD, you may not have accounted for (or documented) what happens when you pass a null parameter into this function. We all get busy and working fast causes oversights such as this... ones that you will pay for later. *haunted house sounds*

More Complex Behaviors

If your function is more complex than this one, refactoring may bring pieces of the logic into private methods. These private methods still have test coverage which is why TDD is better than Unit Testing after the fact.

It could also become a new class. If so, you either pretend the class already exists (create a stub for now) or create the new class as if it were now the starting point and write tests for the new class first then integrate it back into your first class when finished. I prefer the 2nd method.

Your Implementation (not test code)
// first pass
int GetStringLength(string str)
{
throw new NullReferenceException();
}

// second pass
int GetStringLength(string str)
{
if (str == null)
{
throw new NullPointerException();
}

return 0;
}

// third pass
int GetStringLength(string str)
{
if (str == null)
{
throw new NullPointerException();
}

return str.Length;
}

When NOT to Unit Test

I may get some arguments here but TDD should be avoided when dealing with UI code. That said, Model, View, Presenter is a great pattern if you want to test the code directly behind the UI. Testing the front-end is not very productive unless you absolutely have to.

Finishing Up


Hope this helps at least one person figure out what TDD is all about. I found it to be faster to develop with because I wasn't troubleshooting bugs, my code was always clean, and I knew exactly what to do next.

Friday, October 2, 2009

Flex 3.4 Illegal override of FlexModuleFactory

An important note for those switching from Flex 3.2 to Flex 3.4


If you have css styles which were compiled (likely in FlexBuilder), you must re-compile them with the Flex 3.4 SDK to get rid of this error.

Line Causing Error

StyleManager.loadStyleDeclarations("yourexternalstyles.swf");

Exact Error Message

VerifyError: Error #1053: Illegal override of FlexModuleFactory in mx.core.FlexModuleFactory.

at global$init()

Tuesday, July 7, 2009

Help with "ref" and "out" in C# .NET 3.5 2008

In this article, I will discuss the out keyword and the ref keyword in C Sharp. These should be used sparingly but are handy in certain situations (especially when dealing with structs and sorting).

If you do not understand pointers yet, I would advise steering clear of these.


Similarities to other languages

Both "out" and "ref" mean pass the variable into the function "by reference".

If you are a VB6 guru, this is similar to the "ByRef" keyword.

If you're a C++ writer, you would use the address of operator "&" (if you did not already have a pointer to the object) and the function would have "*" following the data type.

There is no such modifier in Java.


What do they mean?

Out and ref extend the meaning of "by reference" by additionally stating that the variable must be initialized and will be modified (ref) or that it will be initialized inside of the function (out).

The default (no prefix to the parameter) is a "by value" copy of a structure/simple data type or a "read-only reference" of an object meaning you cannot change where it points to but you can change the variables inside of the class. This is how Java works.


The "ref" Parameter Modifier
  • "ref" is by reference
  • It does not give a compiler error if it was not passed in the argument list for the function
  • It gives you the ability to modify the pointer of the original object
  • It is a great way to pass structures around in code because it does not make a "by value" copy of them
  • Parameter must be initialized before calling the function
  • "ref" prefix exists when defining the function and when calling it (making it obvious that this is a by reference call)

Example of By-Reference Parameters in C#
public void SimpleSwap(ref String string1, ref String string2)
{
// store the pointer of string1
String temp = string1;
// set string1's pointer to point to string2
string1 = string2;
// set string2's pointer to point to string1 (HINT: this is not pointing to string2)
string2 = temp;
}

// ... code using this ...
String string1 = "ABC";
String string2 = "DEF";
SimpleSwap(ref string1, ref string2);

// string1 now points to "DEF"
// string2 now points to "ABC"


The "out" Parameter Modifier
  • "out" is by reference
  • The parameter must be assigned or you get a compile error
  • A new object is created and returned (the variable you passed in points to the one created inside of the function)
  • "out" parameters do not need to be initialized
  • This is a great way to fill structures
  • It allows the language to safely handle multiple return values without the need for new objects/structs
  • "out" prefix exists when defining the function and when calling it (making it obvious that this variable will be initialized by the function call)

Example of a Function Returning Multiple Values in C#
public void GetCoordinates(out int x, out int y)
{
x = 5;
y = 9;
}


// ... code using this ...
int x;
int y;

GetCoordinates(x,y);
// x is now 5
// y is now 9

Conclusion

Out and ref are great tools when you need them. I hope this article helps you understand more about how they work.

Note: I use the terms "keyword", "modifier", and "prefix" when discussing ref and out. The actual term (AFAIK) for these is "modifier".

Note: Code examples in this article are incomplete and will not compile. If you require complete examples, please leave a comment and I will post them for everyone.

Monday, June 8, 2009

Why can't I import javafx.ui.*?

The Answer for the Impatient (like me!)

Short answer for those who are impatient... see javafx.scene.layout.* and use something like HBox. Reason you ask? JavaFX 1.1 vs 1.2 had many non-backwards compatible changes.

Background

So I was trying out JavaFX with NetBeans 6.5.1 while I was waiting for a software build to complete. I created a simple project then wanted to do a more advanced component layout. I Googled "javafx positioning elements side by side" and noticed that many of the tutorials were importing javafx.ui.* to get BorderLayout. Looks great!

Absolute Positioning

Before I continue, here is my code which has a simple Text and an ImageView component:

/*
* Main.fx
*
* Created on Jun 8, 2009, 9:50:23 AM
*/

package javafxapplication1;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.image.Image;

import javafx.scene.image.ImageView;
import javafx.scene.text.Text;


/**
* @author graeme
*/

Stage {
title: "Flask"
width: 800
height: 600
scene: Scene {
content: [
Text {
font : Font {
size : 16
}
x: 10
y: 30
content: "Flask 0.01"
}
ImageView {
x: 10
y: 50
image: Image {
url: "{__DIR__}flask-2.jpg"
}
}
]
}

Adding the Infamous BorderLayout

I simply added BorderLayout inside of my scene content and did the old CTRL+SHIFT+I to fix imports and... nothing. Confused++

So I typed the import in manually and noticed it was not there. Confused++

I figured I had an old version of NetBeans. So I went to get NetBeans 6.7 RC2 and JavaFX is not available for it... Confused++

Maybe my Plugin was old...? I checked - nope! Brand new. Confused++

Here is the code that will not work in JavaFX 1.2 - I have bolded the reasons why:

/*
* Main.fx
*
* Created on Jun 8, 2009, 9:50:23 AM
*/

package javafxapplication1;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.image.Image;


import javafx.ui.*;

import javafx.scene.image.ImageView;
import javafx.scene.text.Text;


/**
* @author graeme
*/

Stage {
title: "Flask"
width: 800
height: 600
scene: Scene {
content: [
BorderLayout {
content: [
Text {
font : Font {
size : 16
}
content: "Flask 0.01"
}
ImageView {
image: Image {
url: "{__DIR__}flask-2.jpg"
}
}
]
}
]
}
}

Breaking Through the Confusion

So now that Confused = 4, I Googled once more. (Rhyming not intentional)

I read that many classes moved from javafx.ui.* to javafx.application.* then distributed somewhere inside to javafx.scene. This makes more sense!

So I found HBox and VBox (which are quite familiar to me in the Flex world) and gave those a shot. Worked like a charm!

Here is the code that will work in JavaFX 1.2:

/*
* Main.fx
*
* Created on Jun 8, 2009, 9:50:23 AM
*/

package javafxapplication1;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.image.Image;


import javafx.scene.layout.HBox;

import javafx.scene.image.ImageView;
import javafx.scene.text.Text;


/**
* @author graeme
*/

Stage {
title: "Flask"
width: 800
height: 600
scene: Scene {
content: [
HBox {
content: [
Text {
font : Font {
size : 16
}
content: "Flask 0.01"
}
ImageView {
image: Image {
url: "{__DIR__}flask-2.jpg"
}
}
]
}
]
}
}
Screenshot of NetBeans 6.5.1 Flask Example















References

Good ones:

http://java.sun.com/javafx/1/tutorials/ui/layout/index.html#hbox
http://java.sun.com/javafx/1/tutorials/ui/

Old ones:

http://www.ibm.com/developerworks/java/library/j-javafx/
http://www.informit.com/guides/content.aspx?g=java&seqNum=418

Friday, May 15, 2009

Websites in Midland

It's important to have great looking web pages. Many sites in Midland, Ontario (my home town) need a revitalization to bring out the quality, atmosphere, and appeal that the town and businesses of Midland offer in-person.

If you look around the internet, there are great looking websites and some older style ones. The difference? People tend to be more comfortable buying from amazing looking sites. See this article posted at A List Apart which visually demonstrates the importance for "eye candy" when presenting information and products to customers.

Do you want a great looking website in Midland? Head over to StyleMarks (a local web design and development company) for more information. StyleMarks offers polished looking websites without the hassle and at a reasonable price.

Thursday, May 14, 2009

Simcoe County Web Development

Looking for the best web design and development in Simcoe County? StyleMarks has the best services in the Lake Simcoe area. Midland, Toronto, Scarbourough, Orangeville, Newmarket, Richmond Hill, Markham, Brampton, Mississauga, Oakville, Pickering, Collingwood, Gravenhurst, Bracebridge, and as far north as Huntsville are some of the best places in Canada.

All SyleMarks sites are fast, friendly, reliable, and secure. They offer many different services and products including CMS (Content Management Systems), web hosting, website design or templated sites, custom web development, customer form pages, databases, interactive web 2.0 sites, and just about anything else you can find on the internet.

They have experience in SEO, Creative Marketing, Viral Marketing, and E-Commerce solutions.

If you are looking for a friendly, knowledgeable web provider, contact StyleMarks today!

Wednesday, May 13, 2009

StyleMarks Web Design and Development

When it's fast, friendly, and reliable you know it's StyleMarks.


I am proud to announce that I own StyleMarks Web Design and Development!

StyleMarks offers many solutions including Hosting, Content Management, Templated Sites, Search Engine Optimization, E-Commerce, Application Development, and many other solutions.

Contact me direct through the site www.stylemarks.com/pages/contact

Saturday, January 10, 2009

Developer Resources

Great news! I hope to be posting again daily.

This time from my new blog and it's all about helping web developers. I have been collecting helpful links from around the web and I will be sharing these with everyone.

Many more posts to come on the new site so check back often.

http://qwick.wordpress.com/

Sunday, August 19, 2007

The Downfalls of Flex

I know I've been saying Flex all over the office and stating how great it is and how it makes some things so easy... But there are problems with it.

States - Great or Not?

The mx:State tag is very nice for grouping changes to a screen and applying effects easily. I only have a few issues with the implementation of this.

1) It caches the last time the user navigated there. Ok - not too bad you say. This could be a good thing right? Well, yes and no. If you are building a static screen that won't change again in your program then sure, it's great. If you know exactly what you are going to display, it works fine. The problem is: you won't get startup events again and you can't "reset" the state to clear out this "cache".

This makes dynamic applications difficult to write. How? Well I need to know how many options I can display on a screen so I can split it up into multiple screens (no scroll bars). I need to know how large the area is that I can draw in so I can create multiple screens which have an equal number of options in each. Getting this to work the first time was a bit of a pain... but getting it to work the second time (with different options) required a lot of frustrating work. You may be thinking of solutions - trust me it was difficult and not obvious to implement what I was working on.

2) States are in the same mxml file and share the same code. Yes, you can write components for all of your screens and place them in a ViewStack but, well it has the same problem. You would have to remove the screen each time if you wanted to ensure it would get properly recreated. (and having multiple applications isn't a viable solution).

Solution?

You could create a wrapper for the ViewStack, or create your own State class called Screen - why did this not come bundled? Or you do what the rest of the world does and write a lot of ActionScript rather than mxml so you can control startup/shutdown code, events, etc. Blah.

Waiting for JavaFX may not be the solution you are looking for either -- I know it's different than Flex but, like most things written in Java, it's very sophisticated and probably will not have these types of problems.

Other Issues

Most of the issues I've had all stem from States and their inability to re-dispatch events and re-apply "overrides". This causes a lot of confusion for traditional developers who work with screens. Creating components for each screen doesn't work well if you require other things to change (such as a title bar which is shared with all other components - yes, you can duplicate it in each, but that's not the OO way and doesn't leverage any of the powers of flex such as applying common transitions to some but not all elements.)

Oh ya.. and I want at least a dozen Adobe made themes to come bundled with Flex Builder. Why am I paying money for eclipse to edit mxml? Oh, right, it has better code completion than Flash and FlashDevelop.

I like states - I just want a flag on them that says "re-apply every time it's used". It would also be nice to have them in a separate file (1 per state) if desired. This way, the main mxml file would be quite small. This other file should be able to contain event handlers for the state as well.

I may be able to come up with a solution but I shouldn't have to. This is a very obvious oversight on Adobe's part. I suppose most RIAs are quite static (even though they don't appear to be) but I have situations where I have to produce an application which is different in each install without re-writing it every time.

Please post my oversights below. =)

Monday, July 2, 2007

Get/Set in ActionScript 3 Explained

Introduction

If you have seen ActionScript 3 in Flash CS3 or Flex 2, you may have noticed the get and set statements. Correctly written, these statements follow this format (minus ASDoc comments and bindable metadata tags):

public function get name():String {
return _name;
}

public function set name(value:String):void {
_name = value;
}
Note that the private class variable is _name. This is a standard for get/set methods and somewhat a standard for any private variable in Flex. The underscore (_) is required because the functions are named the same as the variable and the compiler (and those viewing the code) would be confused as to which was being referenced.

Naming the set parameter "value" is a common practice and works well when renaming variables.


What Do get/set Offer?

They act as if the class had a public variable but allow you to do more. If this is to be a read-only property, simply provide only the get function. If this is to be a write-only property (rare), simply provide only the set function. You may also write code to do additional work such as log something, check permissions, set a different variable, or do extra business logic.


ASDoc get Methods

It is a little odd to ASDoc these methods. Remember Get methods should come before set methods. The get should be documented with a short explanation of what the variable represents.
/**
* The first name provided by the credit card
*/
private function get firstName():String {
return _firstName;
}
Remember, just like in Java, documentation of the "firstName" property of the "Person" class shouldn't say "The first name of the person". Offer something more to the reader. Where could the first name come from (credit card, typed by person, typed by customer service agent, parsed from fullName)? What letters could it contain? Could a middle initial exist here?


ASDoc set Methods

Documenting the set methods is a little different. Since the meaning of the variable was explained in the get, it does not need to be repeated in the set. To accomplish this, mark the set as private in the ASDoc.
/**
* @private
*/
private function set firstName(value:String):void {
_firstName = value;
}
This will produce one comment in the generated documentation.

See the livedocs reference for more information:

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=asdoc_127_9.html


Bindable get/set Methods

Normally, I mark the class as Bindable so all get/set methods are marked as bindable. It does so with an event named "variableChange" where variable is the get/set method name. Simply putting [Bindable] just above your class definition will accomplish this.

If you need more control, you may write the following at the top of your get method (assuming this is the firstName property):
[Bindable(event="firstNameChange")]
This works the same for public variables. See livedocs for more information:

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=asdoc_127_9.html


In Other Languages

Java uses getFirstName() and setFirstName() functions which can be generated by NetBeans using the "refactor" option (also has a keyboard shortcut). They don't name the private variables differently because there is no need. The parameter for the setFirstName is typically the same as the private variable and is assigned by stating: this.firstName = firstName;

VB6 had the get/set functionality in the form of: public property let, public property set, and public property get. Where let was by value and set was by reference (for Objects).

I'm sure there are plenty of other implementations.


My 2 Cents

I use these for every private variable; however, it is much easier to have a public variable and change it to private scope and write get/set functions later if you ever need to do more processing or if you like the ASDoc output better. This does not change the API for the class and allows it to be written much faster.

I like the Flex method the best for simple getters/setters; however, if the function does more work than meets the eye, it should be written as normal get/set methods. This allows you to provide more parameters and alerts users of the class that it may do some additional processing.

Friday, June 29, 2007

Flex Coding Guidelines

Flex Coding Guidelines

I found this great document about flex coding guidelines that one company uses. It is perfect and very much like Java coding conventions.

http://blog.dclick.com.br/2007/02/13/adobe_flex_coding_guidelines_english/

Most of this stuff should be enforced by the compiler (in my opinion) in every language. I know it's strict, but it makes everything so much easier to read and work with. I advise that this become a standard in every company writing in Flex no matter how big or small.


ASDoc Guidelines

If you haven't heard about ASDoc yet, it's a lot like JavaDoc which produces a nice web API reference for all classes and methods. This document describes how to properly write ASDoc comments in your classes.

http://flexed.wordpress.com/2007/01/05/action-script-comment-guidelines/

This site may also be helpful. It mentions tags that I didn't see in Adobe's documentation (such as author) -- but maybe I missed that one. I haven't tried it yet.

http://unleashing.wordpress.com/2007/01/05/action-script-comment-guidelines/


Using ASDoc

The method I have used is to write a batch file (or shell script) that executes the asdoc.exe file from the bin folder with my command line arguments.

Default location in Windows is:
C:\Program Files\Adobe\Flex Builder 2 Plug-in\Flex SDK 2\bin\asdoc.exe

More information on command line arguments and ASDoc usage:

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=asdoc_127_9.html

http://labs.adobe.com/wiki/index.php/ASDoc:Using_ASDoc


Flex ActionScript Editor (free)

I haven't written anything using this tool but I have downloaded and installed it. I was very impressed. Could be a good tool if you were writing a bunch of ActionScript classes and didn't like only seeing 4 or so tabs in Flex Builder.

http://www.flashdevelop.org/community/viewtopic.php?t=1001

Flex Resources

Introduction

I have compiled a list of very useful sites for finding out more information on hard-to-find topics. A lot of them are on Adobe's live docs site. These do not talk about ASDoc or coding conventions (coming soon).


Documentation References
a general reference

http://www.adobe.com/support/documentation/en/flex/


Live Docs Lessons
good for getting started

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000064.html


Assorted Links from Adobe
find some information here

http://www.adobe.com/devnet/flex/?tab:quickstart=1


Flex Meta Data Tags Listing
before you write too many classes

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=metadata_141_11.html
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=asdoc_127_3.html#189665


Coordinates
a must-know when working with mouse and component coordinates

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000624.html


Data Providers
mainly for drop-down lists

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000499.html


Looping
very useful with arrays

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001831.html


Using Query String Parameters and Flash Vars
for integrating with browsers and ActiveX

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001006.html


Loading Style Sheets at Runtime
runtime CSS for Flex

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=styles_069_26.html


Assorted Free and Pay Flex Components
slightly useful, not a large list

http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=15&loc=en_us


Adobe Labs Flex
talking about upcoming Flex 3

http://labs.adobe.com/technologies/flex/

Wednesday, June 27, 2007

Flex 2 - Flash for Programmers

Flex 2 Discovered

Wow. Moving from Flash CS2 to CS3 (with ActionScript 3.0), I was surprised and excited. Now after trying Flex 2 for the first time, I'm amazed. Finally it makes sense to develop in Flash. Since I have completely switched to Flex 2 development, I will no longer post about Flash development. If you have Flash questions, I will still answer them to the best of my ability.


Why Flex is Better for Me

  • I'm not an animator, I'm a programmer.
  • Flex has named "States" while Flash has "frames" and "keyframes" (I know, they can be named).
  • I don't consider applications/screens/UI components as MovieClips.
There are lots of other small reasons for me to choose Flex over Flash. The main one is the development environment. Assuming you've shelled out the $ for Flex 2 Builder, you are now working in Eclipse (yes, that's right -- Flash in a real programming IDE). If you haven't spent all that money and simply have a command line compiler, I'm sure you're still using a good programming IDE. This makes a big difference.


How do you get Started?

If you're looking to write a Web 2.0 application, a nice looking desktop application, a rich Internet component, or a fancy UI component, you've started in the right direction. Finding good programming information can be a little harder than usual in the Flash/Flex world.

ActionScript 3.0 and MXML are your languages. MXML compiles down to AS3 but allows Flex Builder to display components in the editor. Mixing both is ok so don't worry too much if you are doing the right thing.
  1. Get a copy of Flex 2 Builder. Even the 30 day trial is fully featured. I strongly advise this over the compiler-only free version.
  2. Read tutorials, get books, read through Adobe's online documentation.
  3. Of course, check back here for new information.

Your Project

Write components for anything graphical. Even if you aren't going to re-use this component, having it wrapped up nicely keeps your code away from the main application's code.

Use ASDoc everywhere. If you're a Java fan or have used other document generation products, ASDoc will be familiar. Use it, use it properly, and use it heavily.

Write classes and code correctly. Don't write garbage and follow a common format.

UI components should: be able to re-size/reposition based on the window size, have styles, and use events.

Experienced developers can work with interfacing with web services, class hierarchies, and advanced code while junior developers can easily work with user interfaces, UI backing code, and small components.


Concepts

You are forced into using good practices by not allowing direct database access (both a design decision and a natural limitation I'm sure).

Meta data tags (like annotations in Java) are used to extend certain concepts.

After the function keyword, you may place "get" and "set" keywords to mark this function as a getter or setter. This allows simple get/set methods to act like public properties and reduce documentation. Don't forget not to name your variable the same as the method (it is common to place an underscore at the front of the private variable if it is accessed by get/set methods).

The override keyword (placed before the access type "public" etc.) is used to say "I am overriding a super class method." Meaning if it was spelled incorrectly, the compiler will give an error.

If you are familiar with Java, this will help when trying to learn ActionScript 3.0:

http://flexblog.faratasystems.com/?p=115


Coming up...

I hope to post a lot of helpful links to things that developers want and need when working in Flash. Check back often for new links, tutorials, and reviews to help you get ahead.

Sunday, June 10, 2007

Flash for Developers

Are you a software developer new to Flash? I will be writing many mini tutorials which will help you overcome your frustrations and turn you into a Flash coding professional.

Introducing Flash CS3

Just a lead-in about the improvements in Flash CS3 (Flash 9): ActionScript 3.0 is simply amazing compared to the previous versions. It is no longer a headache especially now that the compiler reports errors to you and allows you to click on the line that contains the error. I know this is normal for every other language but ActionScript 2.0 was lacking this crucial feature.

Getting Started

So where does a developer start? First, you will want to check out Adobe's video tutorials located here:

http://www.adobe.com/designcenter/video_workshop/

These tutorials will help you get used to the editor and the development environment. The interface will appear very odd at first but remember this was developed for 2D animation.

I Want to Write Code!

If you have a strong programming background, you want to start writing classes, libraries, and find the ins and outs about the language. This can be a challenge at first.

The easiest way to start is by creating a new "Flash File ActionScript 3.0" with a layer called "actions" (this is a standard and should be the only layer containing ActionScript).

Tip: Double click the layer to rename it
From the Window menu, select Actions (or Press F9 on your keyboard) to bring up the actions tab. By default, this will appear in the middle of the screen. Simply drag and drop the tab down to where you see the Parameters tab.
I added the Align tab to beside the Swatches tab, the Components tab near the Library tab, and the Movie Explorer tab to the bottom-right hand side on it's own. I found these to be of critical importance.
Click on the Actions tab and you will be able to start typing ActionScript 3.0 code. But wait! You don't have any components on the screen. Use the Text Tool (the "T" on the left-hand side) and place a text element on the stage. Type Hello in the text area then click the Properties tab. From the dropdown menu, select "Dynamic Text" instead of "Static Text" and type in "textbox_txt" where you see "" (appending _txt is a standard in the Flash world).

Now you have a text area that can be referenced in ActionScript using the following code:

textbox_txt.text = "Hello World!";

Once you type that on the Actions tab, click on Test Movie from the Control menu.
Tip: Hit Ctrl+Enter to test a movie at any time
You should see "Hello World!" in the text area on screen. Wow!... not that impressive, I know.

In the Future

In the next tutorial, I will discuss creating classes in packages (and how to make them work), Document Classes (main), and some of the features of the language that are really helpful.

Brand New

You got here early! My first blog site is now up and running. I know blogs are supposed to have content... I'm working on that next.

For now, please see Ryan's site for some good Java content:

http://www.ryandelaplante.com/

My focus will be on technical gems and ideas. There will be content on Flash CS3 (ActionScript 3.0) for programmers and open (free) web development resources.