undefined method `specifications' for "/Users/{your-name-here}/.rvm/gems/ruby-1.9.2-p180":String (NoMethodError)

Add the following to your Gemfile under test and make fix!

gem 'spork', '~> 0.9.0rc7'

Make sure you have all the properties as below:

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/2.0">
    <id>com.example.HelloWorld</id>
    <filename>MobileDesigner</filename>
    <name>Hello World</name>
    <version>v1</version>
    <initialWindow>
        <renderMode>gpu</renderMode>
        <content>HelloWorld.swf</content>
        <fullScreen>true</fullScreen>
        <aspectRatio>portrait</aspectRatio>
        <autoOrients>true</autoOrients>
        <visible>true</visible>
    </initialWindow>
    <supportedProfiles>mobileDevice</supportedProfiles>
    <icon>
<!--        <image29x29>icons/icon29.png</image29x29> -->
        <image57x57>Icon_57.png</image57x57>
<!--        <image512x512>icons/icon512.png</image512x512> -->
    </icon>
    <iPhone>
        <InfoAdditions>
            <![CDATA[
                <key>UIStatusBarStyle</key>
                <string>UIStatusBarStyleBlackOpaque</string>
                <key>UIRequiresPersistentWiFi</key>
                <string>NO</string>
            ]]>
        </InfoAdditions>
    </iPhone>
</application>

Another tip is to not draw any graphics or UI in your main Sprite’s constructor. Instead create another method and do any drawing there.

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;

	[SWF(width="320", height="480", frameRate="12", backgroundColor="#FFFFFF")]
	public class HelloWorld extends Sprite
	{
		public function HelloWorld()
		{
			super();

			this.stage.scaleMode = StageScaleMode.NO_SCALE;
			this.stage.align = StageAlign.TOP_LEFT;

			init();
		}

		private function init():void
		{
			var funk:Sprite = new Sprite();
			this.addChild( funk );
			funk.graphics.beginFill( 0xFF0000 );
			funk.graphics.drawRect( 0, 0, 360, 480 );
			funk.graphics.endFill();
		}
	}
}

Hope that helps!

Many sites allow you to comment on blog posts, images, videos, status, etc. having one comments table with post_id, image_id, etc. as with a One-to-Many relationship leads to a giant table of unrelated (other than by user_id) data. In my opinion it’s better to have a table for each e.g. post_comments, image_comments, etc. Enter dm-is-remixable.

Step 1: Install

We’ll install dm-is-remixable and friends. Open up a terminal and enter:

sudo gem install do_sqlite3
sudo gem install datamapper
sudo gem install dm-migrations
sudo gem install dm-is-remixable

Step 2: Setup

Create a new file called remixable.rb we’ll user this file from now on. First enter the required gems and set Datamapper’s log and sqlite file.

require 'rubygems'
require 'dm-core'
require 'dm-migrations'
require 'dm-is-remixable'

# setup

DataMapper::Logger.new($stdout, :debug)
DataMapper.setup(:default, "sqlite3://#{Dir.pwd}/remixable.db")

Step 3 Define the Models

We’ll create four models, one module and three classes. User, Post, and Image are classes, and Comment will be a module. The relationships are a user has many posts and images, posts and images belong to a user, nothing new yet, and post and image remix many comments for a user. What? This is the same as saying a post has many comments and said comment(s) belong to a user.

# module and classes

module Comment
  include DataMapper::Resource

  property :id, Serial
  property :comment, Text

  is :remixable
end

class User
  include DataMapper::Resource

  property :id, Serial
  property :username, String

  has n, :images
  has n, :posts
end

class Post
  include DataMapper::Resource

  property :id, Serial
  property :title, String
  property :body, Text

  belongs_to :user
  remix n, :comments, :for => 'User'
end

class Image
  include DataMapper::Resource

  property :id, Serial
  property :path, String

  belongs_to :user
  remix n, :comments, :for => 'User'
end

Step 4: Migrate

Next we’ll finalize our models and run auto_migrate to create the tables. During this step Datamapper, via is remixable, will generate two anonymous model classes PostComment and ImageComment. Five tables will be created users, posts, images, post_comments, and image_comments.

# lock and load

DataMapper.finalize
DataMapper.auto_migrate!

Step 5: Do Something

The last step is to create some dummy data to test out our models. We’ll create two users ‘foo’ and ‘funk’, foo will create post and ‘image’ and ‘funk’ will comment on them. The last two lines show how to access post and image comments for a user.

# go!

foo = User.create(
  :username => "foo"
)

funk = User.create(
  :username => "funk"
)

post = Post.create(
  :user_id => foo.id,
  :title => "My great post",
  :body => "This is my great post"
)

post_comment = PostComment.create(
  :user_id => funk.id,
  :post_id => post.id,
  :comment => "ballz I say!"
)

image = Image.create(
  :user_id => foo.id,
  :path => "/some/image/path"
)

image_comment = ImageComment.create(
  :user_id => funk.id,
  :image_id => image.id,
  :comment => "you look funny!"
)

puts funk.post_comments[0].comment
puts funk.image_comments[0].comment

That’s it!

before do
  puts "I will run all the time..."
end

Here’s a module that will allow you to run code only before certain routes:

module Sinatra

  module BeforeOnlyFilter
    def before_only(routes, &block)
      before do
        routes.map!{|x| x = x.gsub(/\*/, '\w+')}
        routes_regex = routes.map{|x| x = x.gsub(/\//, '\/')}
        instance_eval(&block) if routes_regex.any? {|route| (request.path =~ /^#{route}$/) != nil}
      end
    end
  end

  register BeforeOnlyFilter

end

Use it like below, note that you insert ‘*’ for routes that use variable placeholders like ‘:id’…

before_only(['/post', '/comment/*/user/*']) do
  puts "I will only run before the routes '/post' & '/comment/*/user/*'..."
end

After downloading and installing Netbeans 6.9 I launched the app. It bounced a couple of times in my dock as dreams of exciting new features danced in my head. Then… nothing, well not quite nothing, I received a message informing me that:

“Java 6 Standard Edition or newer required. Cannot run on older versions of Java than Java 6 Standard Edition. Please install Java 6 Standard Edition or newer or use –jdkhome switch to point to its installation directory.”

How to solve this issue:

Step 1. Figure out which version of Java you have

Open Terminal.app and enter:

java -version

You’ll most likely see the following:

java version "1.5.0_24"
Java(TM) 2 Runtime Environment, Standard Edition (build 1.5.0_24-b02-357-9M3165)
Java HotSpot(TM) Client VM (build 1.5.0_24-149, mixed mode, sharing)

Obviously this is the wrong Java version since Netbeans is asking for Java 6 (aka Java 1.6).

Step 2. Get Java 1.6

However if you head over to Oracle you’ll find downloads for Linux and Windows but none for Mac. Why has the mighty Oracle deemed you unworthy of the latest Java?

Because you already have it! Your Mac is just not setup to use it.

Go Back to the Terminal and enter the following:

cd /System/Library/Frameworks/JavaVM.framework/Versions; ls;

You’ll get a list of all the Java versions available.

1.3		1.4		1.4.2		1.5.0		1.6.0		Current
1.3.1		1.4.1		1.5		1.6		A		CurrentJDK

Step 3. Configure Netbeans

The hint to get Netbeans working is in the error message; “or use –jdkhome switch to point to its installation directory”.

In the Finder browse to the NetBeans 6.9.app (in Applications/NetBeans/). Apps on OS X are really just packages so you can explore and edit their contents. Right-click (or control-click) on the app and select ‘Show Package Contents’ this will open a new Finder window. Then browse to Contents/Resources/NetBeans/etc and open ‘netbeans.conf’ in a text editor. Uncomment (remove the pound sign from) the line that starts with ‘#netbeans_jdkhome’ and set it to point to your Java 1.6 home as below:

netbeans_jdkhome="/System/Library/Frameworks/JavaVM.framework/Versions/1.6.0/Home"

Save the file.

That’s it!

Try launching the NetBeans 6.9 app again, it should now work.

The latest version of ELIPS Studio has just been released. It brings the ability for developers to create native mobile apps in ActionScript and Flex for mobile devices running Google’s Android platform.

With this new release, developers can now address all major smartphone platforms (iPhone, Android, Symbian, Windows Mobile) from a single code base using powerful web 2.0 languages and technologies from Adobe.

The next version of ELIPS Studio will bring the support of MacOSX as desktop development platform.

If I were Adobe I’d buy French OpenPlug toute suite and turn ELIPSE studio into AIR Mobile (or Mobile AIR).

Step 1: Setup

The directory structure I used was as follows.

convert.rb (the ruby script)
compile.sh (the shell script)
fonts/ (a directory for font files - .ttf and .otf)
as/ (a directory for the generated ActionScript)
swfs/ (a directory for the compiled swf files)

Step 2: Prep fonts

Ok told a tiny white lie when I said it was all automated. Since (to my knowledge) you can’t inspect a font file to determine if it’s normal, regular, bold, italic, or bold italic (the weights and styles Flex understands) you’ll have to set up a naming convention that the Ruby script can parse. You’ll be using the font name to create an ActionScript class so it should also be a legal name.

Here’s an example using the Arial family.

Arial.ttf (regular fontWeight and normal fontStyle)
Arial_Italic.ttf (regular fontWeight and italic fontStyle)
Arial_Bold.ttf (bold fontWeight and normal fontStyle)
Arial_BoldItalic.ttf (bold fontWeight and italic fontStyle)

Step 3: The Ruby Script

require 'find'

# delete any previous as
Find.find( 'as' ) do | as |
  if File.extname( as ) == ".as"
    File.unlink as
  end
end

# generate new as
Find.find( 'fonts' ) do | font |
  if File.file?( font )
    # extension name
    ext = File.extname( font )
    # is font
    if ext == ".ttf" || ext == ".otf"
      # file name
      full_name = File.basename( font )
      name = File.basename( font, ext )
      # font weight and style
      font_weight = ""
      font_style = ""
      if full_name.include? "_Bold" + ext
        font_weight = "fontWeight='bold',"
      end
      if full_name.include? "_Italic" + ext
        font_style = "fontStyle='italic',"
      end
      if full_name.include? "_BoldItalic" + ext
        font_weight = "fontWeight='bold',"
        font_style = "fontStyle='italic',"
      end
      # generate as
      f = File.new("as/#{name}.as",  "w+")
      f.write "package
      {
        import flash.display.Sprite;

        public class #{name} extends Sprite
        {
          [Embed(source='../fonts/#{full_name}', fontName='#{name}', #{font_weight} #{font_style} unicodeRange='U+0000-U+00FF,U+2100-U+214F')]
          public var Font:Class;
        }
      }"
      # some helpful output
      print ',"', "#{name}", '"'
    end
  end
end

In TextMate you can open this script and hit Command-R to run it, or run it via the command line ‘ruby convert.rb’. Once the script runs you’ll have generated ActionScript files in the ‘as’ directory ready to be compiled.

Step 4: The Shell Script

echo "<h2>Fonts Custom Compile</h2>";
echo "<code> Started @ `date "+%H:%M:%S"`</code><br />";

for i in `cd as/; ls *.as`; do
  swf=`echo $i |  awk -F. '{print $1}'`
  swf="$swf.swf"
  "/Applications/Adobe Flex Builder 3/sdks/3.3.0.4589/bin/mxmlc" -file-specs="as/$i" -o="swfs/$swf" -managers="flash.fonts.AFEFontManager" 2>&1;
done

You’ll need to customize the script for your Flex SDK location, mine is at "/Applications/Adobe Flex Builder 3/sdks/3.3.0.4589/bin/mxmlc". The hidden gem in there is -managers="flash.fonts.AFEFontManager", about 90% of fonts will compile without it but the rest were blowing up until I added that argument.

Again with TextMate you can run the script with Command-R. Each font will take about five seconds to compile, my set of over 100 fonts took over ten minutes

That’s it! The SWFs are compiled and ready to be runtime loaded into a Flex app. Creating the ActionScript for 100+ fonts would have been a multi-day process but with a little scripting it took less than an hour.

Check out PureMVC for JavaScript.

Rails Inside has the details on Paperclip as an alternative file upload/association plugin, I’ve tried them all and paperclip covers all your file upload bases.

*I’ve been busy with Fatherhood 101 and my new job as a Flex Dev at Captial Group (the largest company you’ve never heard of).

The secret is to override the updateDisplayList method and use the skin’s current name in a switch statement to apply different Degrafa strokes and fills to the button. Click to view an example with source.

<?xml version="1.0" encoding="utf-8"?>
<GraphicBorderSkin xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="http://www.degrafa.com/2007">

    <mx:Script>
        <![CDATA[

            //////////////////////////////////////////////////////////////////////
            //
            // PRIVATE VARIABLES
            //
            //////////////////////////////////////////////////////////////////////

            [Bindable]
            private var awidth:Number=0;

            [Bindable]
            private var aheight:Number=0;

            //////////////////////////////////////////////////////////////////////
            //
            // PROTECTED METHODS
            //
            //////////////////////////////////////////////////////////////////////

            override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
            {
                super.updateDisplayList( unscaledWidth, unscaledHeight );

                awidth = unscaledWidth;
                aheight = unscaledHeight;

                // drop shadow is actually a black 'glow'
                var glow:GlowFilter = new GlowFilter();
                glow.color = 0x000000;
                glow.alpha = 1;
                glow.strength = .75;
                glow.quality = BitmapFilterQuality.MEDIUM;

                // which skin state?
                switch ( name )
                {
                    case "upSkin":
                        buttonRect.fill = upFill;
                        buttonRect.stroke = upStroke;
                        glow.blurX = 4;
                        glow.blurY = 4;
                        break;

                    case "overSkin":
                        buttonRect.fill = overFill;
                        buttonRect.stroke = overStroke;
                        glow.blurX = 5;
                        glow.blurY = 5;
                        break;

                    case "downSkin":
                        buttonRect.fill = downFill;
                        buttonRect.stroke = downStroke;
                        glow.blurX = 3;
                        glow.blurY = 3;
                        break;
                }

                // apply filter
                this.filters = [glow];
            }

        ]]>
    </mx:Script>

    <!-- FILLS -->
    <fills>

        <!-- UP -->
        <LinearGradientFill id="upFill" angle="90" >
            <GradientStop ratio="0" alpha="1" color="#666666" />
            <GradientStop ratio=".5" alpha="1" color="#333333" />
            <GradientStop ratio=".5" alpha="1" color="#000000" />
            <GradientStop ratio="1" alpha="1" color="#666666" />
        </LinearGradientFill>

        <!-- OVER -->
        <LinearGradientFill id="overFill" angle="90" >
            <GradientStop ratio="0" alpha="1" color="#666666" />
            <GradientStop ratio=".5" alpha="1" color="#333333" />
            <GradientStop ratio=".5" alpha="1" color="#000000" />
            <GradientStop ratio="1" alpha="1" color="#666666" />
        </LinearGradientFill>

        <!-- DOWN -->
        <LinearGradientFill id="downFill" angle="90" >
            <GradientStop ratio="0" alpha="1" color="#000000" />
            <GradientStop ratio=".5" alpha="1" color="#333333" />
            <GradientStop ratio=".5" alpha="1" color="#444444" />
            <GradientStop ratio="1" alpha="1" color="#777777" />
        </LinearGradientFill>

    </fills>

    <!-- STROKES -->
    <strokes>

        <!-- UP -->
        <SolidStroke id="upStroke" color="#ffffff" alpha="1" weight="1.5" />

        <!-- OVER -->
        <LinearGradientStroke id="overStroke" angle="90" weight="1.5">
            <GradientStop alpha="1" ratio="0" color="#ccffff"/>
            <GradientStop alpha="1" ratio="1" color="#66ccff"/>
        </LinearGradientStroke>

        <!-- DOWN -->
        <SolidStroke id="downStroke" color="#f4f4f4" alpha="1" weight="1.5" />

    </strokes>

    <!-- GEOMETRY -->
    <geometry>
        <RoundedRectangleComplex id="buttonRect" height="{aheight}" width="{awidth}"
            bottomLeftRadius="4" bottomRightRadius="4" topLeftRadius="4" topRightRadius="4" />
    </geometry>

</GraphicBorderSkin>