RSS LinkedIn Twitter
February 23rd, 2011 By jwd Categories: Uncategorized

In Flex you can embed an audio file into your swf (as opposed to streaming it or loading it remotely via a URLRequest). You do that in the same way you embed other assets using the [Embed] metadata tag.

[Embed(source="MySound.mp3")]
public var soundClass:Class;

To play the sound, you simply instantiate an instance of it, and call play. Optionally you can pass in a SoundTransform object that sets the volume, fade, etc. As follows:

var snd:Sound = new soundClass() as Sound;
var trans:SoundTransform = new SoundTransform(.01);
snd.play(0,0,trans);

The method signature of play is:

play(startTime:Number = 0,
     loops:int = 0,
     sndTransform:flash.media:SoundTransform = null):SoundChannel

And there is no way to set the transform on the sound directly, other than the play method. And it didn’t seem trivial to track the location you are at in the audio so if you called play() again, you could start it from the exact point where you left off. So the question is, what if you want to change the volume? The solution is to assign the playing sound to a channel, which does allow you to specify a SoundTransform without having to call play again.

Here is my complete solution, with only a “volume up” button.

[Embed(source="MySound.mp3")]
public var soundClass:Class;
public var snd : Sound;
public var vol : Number = 0.01;
public var chan : SoundChannel = new SoundChannel();
protected function onCreationComplete(event:FlexEvent):void {
    snd = new soundClass() as Sound;
    var trans : SoundTransform = new SoundTransform(vol);
    chan = smallSound.play(0,0,trans);
}
protected function volUp_clickHandler(event:MouseEvent):void {
    vol += .1;
    var trans : SoundTransform = new SoundTransform(vol);
    chan.soundTransform = trans;
}

This was just a quick hack.. some more investigation might reveal that you can just modify the volume property of the channel’s soundTransform property rather than reinstantiating a new one each time.

February 7th, 2011 By jwd Categories: Book Reviews, Flex 4, Flex Builder

I was much more impressed with Flex 4 Cookbook, from Joshua Noble, et al, than I was with Flex 3 Cookbook. I haven’t had a chance to try out all of the code snippets yet, but there are lots of good ones. I was especially glad that the authors were able to maintain focus on what Flex 4 brings to the table, meaning this is not a rehash of the Flex 3 book.

Of course they couldn’t resist the temptation to write a “How to create a project in Flash Builder” recipe… but even chapter one has some interesting things. Especially for those of us who have had our noses deep in Flex 3 for a long time. Recipe 1.6 – Creating Typed Vectors, and 1.7 – Use Event Bubbling (something I have to relearn every time I need it, for some reason) for example.

For experienced Flex developers who really want an overview of some of the powerful new features of Flex 4, I’d recommend digging into chapters 3 (Layout), 6 (Skinning and Styles), and 7 (Text and TextFlows).

For intermediate Flex developers, just go through the entire book.

And for beginning Flex developers, go get a different book. A beginner could definitely accomplish quite a bit with this book alone, but you’ll probably have better results with a book like Programming Flex 3 by Joey Lott. Full disclosure: I’ve never actually read it, but Programming Flex 2 remains the (first and) greatest book on Flex I’ve ever read.

February 7th, 2011 By jwd Categories: Grails, Groovy

I needed to dynamically generate some image tags from some images stored in the images directory of my Grails application. It wasn’t that difficult to find Groovy examples explaining how this was done. The trick to getting them to work with Grails was to know the full path to the Grails application, and then translate that using your application context root. Here’s the code I used to get the full path:

def relativeDir = 'images/specific_image_directory'
def baseFolder = System.properties['base.dir'] + '/web-app/' + relativeDir
def baseDir = new File(baseFolder)
def list = []
basedir.eachFileMatch (~/.*.png/) { file ->
  list << file
}

There are a number of methods on the File class that you can use to iterate over a directory structure, including ones that operate recursively. You can also change the match regex to a pattern that matches the particular files you’re trying to list, in my case that happened to be images.

To create my image src attribute, I replaced ‘web-app’ in the path with the context root, as follows:

for (currentFile in list) {
  html += '<img src="/approot/' + relativeDir + '/' + currentFile.getName() + '" />\n'
}
UPDATE 2/19/2011

When this solution was deployed on a live server, System.properties['base.dir'] was returning null and causing problems with my directory listing. I did some research and found out this was a pretty common problem. I eventually found a safer way to achieve the same result:

def baseFolder = grailsAttributes.getApplicationContext().getResource("/").getFile().toString()
February 3rd, 2011 By jwd Categories: Databases, MySQL

I have a development database that I use for testing, etc. that I occasionally like to sync up with the production database. I found a tip on MySQL’s web site that I’ve found quite helpful over the past couple months– pipe the output of mysqldump to the MySQL host you want to bring up-to-date.

mysqldump -u localmysqluser --password=localMySQLpassword --extended-insert
--databases local_databasename | mysql -u remotemysqluser
--password=remoteMySQLpassword --host=db.remotehostname.com
-C remote_databasename

That’s the particular command that I use, which wipes the old data on the target (remote) database. You can use any of the mysqldump options that make sense depending on what kind of synchronization you’re aiming at.

January 3rd, 2011 By jwd Categories: Book Reviews, Grails, Groovy

I’ve never been a big fan of Java web programming, though I’ve had to deal with my fair share of it. That will probably never change, but after being exposed to Grails I have to admit that it’s a much better way to go about it. Grails is a ‘rails-like’ framework, that takes much of the tedium out of web programming in general, and certainly out of Java web programming.

I’ve only finished the first 6 chapters of Grails in Action, by Glen Smith and Peter Ledbrook, but thus far the book (and the framework itself) has exceeded my expectations. The first 6 chapters (~200 pages) will bring you up to speed quickly. The content of those chapters has made me comfortable around the Grails applications I’m working with.

This book takes a very hands-on approach. The first chapter gives a “Tour de Grails”, building a quote-of-the-day application from start to finish. The rest of the book follows this model as well. If you’re going to follow along, I recommend downloading the source from the publisher’s site to get the CSS. I found that entering the rest of the code by hand was helpful, regardless of what Paul or Harvey may say.

The book includes a 30-page Groovy primer in chapter 2. It’s sufficient for understanding the rest of the book, for a more detailed look into the language you might consider Groovy In Action, as I did. Haven’t gotten very far, but so far, so good.

I haven’t really had too much need yet, but I’ve slowly been progressing through some of the later chapters as the need arises. One later chapter in particular is chapter 9, which covers “wizards and workflow with webflows”. If you’ve ever needed to build a wizard, especially a more complex one, then you’ll appreciate the webflow construct in Grails.

Overall, this is an excellent resource. I refer to this book frequently, and probably will for some time to come.

December 27th, 2010 By jwd Categories: Grails, Groovy, Java

I’ve been doing some development in Grails lately. It’s a Ruby-on-Rails-esque platform based on Groovy. If you’ve ever done traditional Java web programming and hated it (JSPs, this-config, that-config… you get the picture.) it’s really a breath of fresh air. I don’t know how I could ever go back.

It has a handy webflow feature (built on the Spring WebFlow project) for creating wizards, etc. I tried for an hour to get one set up, following the directions in Grails in Action (chapter 9) without success. Every time I tried to redirect to the action that defined my flow, I received the following notification:

The requested resource() is not available

It was maddening. It turns out the problem was that the WebFlow plugin is not installed by default (the book didn’t mention that minor detail, unfortunately… at least I didn’t see it). So you can fix the problem by running the following command in your project:

[bash]grails install-plugin webflow[/bash]

Lest you get the wrong impression, Grails in Action has been an excellent resource despite this particular omission. I should have a review posted of it in a few weeks.

December 15th, 2010 By jwd Categories: Actionscript, Flex 4, Flex Builder, Languages

I finished my final Flex 3 project a couple months ago and have finally been able to start digging into Flex 4 for my current projects. There are two in particular that involve a number of input-type popups.

The first thing I noticed about these popups (which were based on either Group or VGroup) was that tabbing between controls seemed to be disabled. I had enough of that yesterday and so I did some research as to what was going on.

It turns out that there’s an interface, IFocusManagerContainer that needs to be implemented in order for the popup to be given a FocusManager. At least that’s the way I understood it– take a look at the constructor in this code.

Container, Menu, and SkinnableContainerBase all implement this interface, so had I used one of those as the base of my popup, it would have worked as expected. Group doesn’t implement this interface, and that was my problem.

Using Flash Builder I created a component that extended Group and implemented IFocusManagerContainer, and it created the following methods for me (which I assume are the required methods for the IFocusManagerContainer interface:

public function get defaultButton():IFlexDisplayObject { return null; }
public function set defaultButton(value:IFlexDisplayObject):void { }

The documentation on IFocusManagerContainer says regarding the defaultButton: “This property is managed by Flex containers; do not set it directly to the default button.” Interesting.

Using the generated class as the base class for my popups allowed tabbing to work as expected. Here’s the entire class in case you’re interested:

package com.googolflex.containers {
  import mx.core.IFlexDisplayObject;
  import mx.managers.IFocusManagerContainer;
  import spark.components.Group;
  public class MyContainer extends Group implements IFocusManagerContainer {
    public function MyContainer() {
      super();
    }
    public function get defaultButton():IFlexDisplayObject { return null; }
    public function set defaultButton(value:IFlexDisplayObject):void { }
  }
}
December 14th, 2010 By jwd Categories: Uncategorized

The ActionScript 3.0 reference describes the effects of pixelHinting settings on curves between lines pretty well, but it also affects line segments. Particularly short line segments.

The problem is that trying to draw short, thin line segments (1px thick and 3px shorter, or less) will cause the segments to actually appear to be 2px thick. You can solve this problem by not using the default value for pixelHinting (false) when you set your lineStyle. Set it to true instead.

The following code snippet shows the problem and the fix:

var g : Graphics = this.graphics;
// 3 pixel line segments with pixel hinting = false
g.lineStyle(1, 0x000000, 1.0);
g.moveTo(2,4);
g.lineTo(5, 4);
g.moveTo(7,4);
g.lineTo(10, 4);
// 3 pixel line segments with pixel hinting = true
g.lineStyle(1, 0x000000, 1.0, true);
g.moveTo(2,10);
g.lineTo(5, 10);
g.moveTo(7,10);
g.lineTo(10, 10);

Here’s an image of the output. You’ll also note that the segments that don’t use pixel hinting appear shorter. Adobe’s documentation makes a bit more sense to me now, when it mentions ‘adjusted to full pixel widths’:

pixelHinting true vs false on short segments

See the Adobe Graphics documentation here

July 6th, 2010 By jwd Categories: Uncategorized

I got one of the Sprint SERO plans for $30/month a few years ago, and it has met all of my needs except my need for a cooler phone. You see, the “unlimited data” plan packaged with my SERO plan isn’t “unlimited” enough to handle the newer (Android) phones.

I would have to upgrade at least to the “Everything Data 450” plan for $70/month, which includes fewer plan minutes than my current SERO plan. For the past year I’ve decided I could do without, especially if Sprint’s idea of an upgrade is fewer minutes for twice the price.

Since the 4G EVO was released last month my attitude had slowly been changing, and as I was upgrading my phone I noticed this little gem from Sprint’s site: “Because we’ve boosted your data experience with this phone’s amazing services and features, you’ll need our $10/mo. Premium Data add-on plus one of the plans below.” Link.

Of course the “plans listed below” are the variations of Sprint’s aforementioned “Simply Everything®” plans. It’s probably going to take me at least another year before I’m ready to pay extra for a data plan for my “unlimited data plan” plan. Of course by then, it’ll probably be another $10 for a data plan for my premium data plan for my unlimited data plan. It’s almost enough to make me ask myself what it is I keep holding out for with Sprint.

June 11th, 2010 By jwd Categories: CSS, Flex 4, Flex Builder

I recently purchased the book Adobe Flash Builder 4 and Flex 4 by David Gassner and will be publishing a complete review when I’m done with the book. I’m going through it looking for the coverage I feel would be most helpful for those experienced with Flex 3. Even more specifically, those like myself, who have been so busy with contracting work (because Flash is dead of course, and the only way to make a living as a contractor anymore is with HTML5 and CSS3) that they were only able to sample Gumbo during its development.

One such topic, which I happen to be going through now, are the additions to Flex 4’s CSS implementation over Flex 3. This information is available in a number of other places, so this post is more to help me internalize it than to be groundbreaking to everyone else.

1. CSS Namespaces

In order to support type selectors with the same name, CSS namespaces have been introduced. In Flash Builder selecting New->CSS File will show you what the syntax for declaring a CSS namespace is.

[css]
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
[/css]

If you’re not going to be using both Spark and Aeon/Halo in your application, you can declare the “default” namespace by omitting the prefix. Namespaces are used as follows:

[css]
s|Label { }
mx|Label { }
[/css]

The lack of any white space between the namespace and the bar, and between the bar and the type selector is significant. Don’t include any white space there. Namespaces will need to be declared even for your custom components (I have a feeling this is going to get messy, but it’s for a good cause.)



2. Descendant Selectors

If you run into a situation where you want to use type selectors, but only when it is used in a particular container, you can use the descendant selectors. You can use them with your custom containers as well. The following declaration will affect all RichText editors contained within a Group:

[css]
s|Group s|RichText { color: #0000AA; }
[/css]

This is another feature that could get out of hand, so use it wisely. Also don’t confuse this with declaring multiple type selectors on the same line, separating them with commas. Like this:

[css]
s|Group, s|RichText { color: #0000AA; }
[/css]



3. ID Selectors

The ID selectors are similar to style name selectors. Recall with a style name selector, the CSS declaration has a name beginning with a ‘.’ and in the MXML declaration of the component you can use styleName="smallText", or something like that.

To use the ID selector, the styleName in the CSS is set to the id of the component you’re styling, prefixed with the # symbol. Like this:

[xml]
<!– The MXML Component –>
<s:Label id="labelA" />
[/xml]

[css]
/* The CSS declaration */
#labelA { color: 0xFF00FF; }
[/css]

Be sure you set the id explicitly in the MXML– this will not work if you have declared the component in ActionScript.



And that concludes my synopsis of the most important additions to CSS in Flex 4.