Archive for category Developer
MouseWheel Event on Mac
When working with Adobe Flex you may have encountered trouble when trying to get mousewheel functionality to work on Mac OSX. Even though Flex natively supports the MouseWheel event it does not trigger in the browsers that I have tried on Mac (Safari and FF3) – this is probably due to the OS or the browser “stealing” the MouseWheel event for its own purposes.
The solution for this is to get JavaScript to communicate with your Flex application and “forward” the MouseWheel event.
Gabriel @ Pixelbreaker has solved this with a really nice little implementation that he calls SWFMacMouseWheel. Read all about it here.
Step 1
Download the “source and demo” code found below the post. Move the file com.pixelbreaker.ui.osx.MacMouseWheel.as to your Flex 3 project.
Step 2
Create a folder called “js” in your html-template folder. Move the files swfmousewheel2.js and swfobject.js to that folder.
Step 3
In the html-template folder edit the index.template.html file to correspond with the file included in the zip you downloaded. It should contain roughly the following:
var vars = {}; var params = { scale:'noScale', salign:'lt', menu:'false' }; var attributes = { id:'testObject', name:'testObject' }; // give an id to the flash object swfobject.embedSWF("test_as3.swf", "flashContent", "100%", "100%", "10.0.0", "playerProductInstall.swf", vars, params, attributes ); swfmacmousewheel.registerObject(attributes.id);
Don’t forget to include the two javascript files you copied to the js-folder.
Final step
In your application startup code invoke the following code:
import com.pixelbreaker.ui.osx.MacMouseWheel; MacMouseWheel.setup( stage );
And you should be set to go.
iPhone tip #2 – What is my current location?
The iPhone has GPS built-in, which makes the phone really powerful and enables developers to innovate cool and cutting edge applications!
The iPhone devcenter has some sample code explaining how the CoreLocation framework works. But, I found that example a bit hard to understand…
Here is an easier way of finding your current location from your iPhone.
Let’s start with the interface/header file.
CurrentLocationController.h
#import <CoreLocation/CoreLocation.h> @interface CurrentLocationController : NSObject <CLLocationManagerDelegate> { CLLocationManager *locationManager; } @property (nonatomic, retain) CLLocationManager *locationManager; - (void)locationManager:(CLLocationManager *)manager didUpdateToLocation:(CLLocation *)newLocation fromLocation:(CLLocation *)oldLocation; - (void)locationManager:(CLLocationManager *)manager didFailWithError:(NSError *)error; @end
Note: Our object “implements” the CLLocationManagerDelegate protocol. We “implement” two methods, locationManager:didUpdateToLocation:fromLocation: and locationManager:didFailWithErrorfrom :, from CLLocationManagerDelegate. The first method is invoked when a new location is available and the second one if an error has occurred.
Here comes the implementation:
#import "CurrentLocationController.h" @implementation CurrentLocationController @synthesize locationManager; - (id) init { self = [super init]; if (self != nil) { self.locationManager = [[[CLLocationManager alloc] init] autorelease]; self.locationManager.delegate = self; } return self; } - (void)locationManager:(CLLocationManager *)manager didUpdateToLocation:(CLLocation *)newLocation fromLocation:(CLLocation *)oldLocation { NSLog([newLocation description]); } - (void)locationManager:(CLLocationManager *)manager didFailWithError:(NSError *)error { NSLog([error description]); } - (void)dealloc { [self.locationManager release]; [super dealloc]; } @end
The only important thing to note is the line
self.locationManager.delegate = self;. Here we set our own object as the delegate, which means that all the location messages will be forwarded to CurrentLocationController.
I hope this will give you more time innovating, instead of developing Trichotillomania.
iPhone tip #1 – URL encoding in Objective-C
If you are n00b when it comes to iPhone development, then you’ve come to the right place! We’ll be posting howtos, tips and tricks continuously.
So, how do you URL enconde a string? It’s quite simple if you know how. :)
+ (NSString *)urlEncodeValue:(NSString *)str { NSString *result = (NSString *) CFURLCreateStringByAddingPercentEscapes(kCFAllocatorDefault, (CFStringRef)str, NULL, CFSTR(”:/?#[]@!$&’()*+,;=”), kCFStringEncodingUTF8); return [result autorelease]; }
To create an URL object, do like this:
[NSURL URLWithString:encodedUrlString]
Triggering a Save File Dialogue from Flex
With the recent release of the Adobe Flex SDK 3.3 comes the fantastic new FileReference class. Now, anybody who has ever worked in Flex must have been very annoyed with the fact that you actually sometimes have to write server side operations to be able to trigger normal loading and saving of files.
With FileReference it’s as simple as this:
var myFileReference:FileReference = new FileReference(); myFileReference.save("i just put some string data here lol", "filename.txt");
and you’re done!
To get access to this functionality you will need to download the Flex 3.3 SDK.
If you are using FlexBuilder:
- install the sdk in the “sdks” directory of your FlexBuilder installation
- in Windows » Preferences » Flex » Installed Flex SDKs: Add the new SDK by simply pointing to the SDK path (and set it as default)
- make sure that your project’s preferences is set to use the new SDK
- Finally, set your project to demand at least Flash Player 10 from users (if you plan on using any of the new Classes)
A very slight drawback for this simple but fantastic feature is that the code triggering the FileReference has to be initiated by a user Event. For security reasons of course.
This feature made me very happy and saved our project from at least a day of writing serverside crap.
HandCursor problems in Flex
Many times you will want any given component in Adobe Flex to use the hand cursor when you are hovering it, to indicate that you can click it. But on some components you will have to go through a few more steps than is intuitive.
Take for example the Label component. You may assign it as follows:
myLabel.useHandCursor = true; myLabel.buttonMode = true;
And hope that your are done.
WRONG!
You will need to set the property mouseChildren to false for it to work. Like such:
myLabel.useHandCursor = true; myLabel.buttonMode = true; myLabel.mouseChildren = false;
And now you are done, incidentally this will work for most Flex components. :)
DragScrollingCanvas – from the wonderful flexlib
At Projectplace we are currently in the process of developing an exiting thing: a fast and easy to use planning tool (working name: Yap)! You can read more about that at Projectplace Labs.
The reason for this little post however is to promote the open source project flexlib and more specifically a component contained therein, the DragScrollingCanvas. Brad Rice covers the basics of this component.
We’ve had much use of this little component in our early development of our timeline view, and whatever your Flex needs might be, you are sure to find tons of helpful components in flexlib.
One thing that we were lacking was the ability to make some components contained in a DragScrollingCanvas move together with the view port. Basically, we wanted a few components to be able to “float” on top of the Canvas, keeping its relative position at all times. We solved this by dispatching an event from within the DragScrollingCanvas itself. So, first we typed up a little Event (the below event only allows relative positioning vertically).
package com.projectplace.graphics.events { import flash.events.Event; public class DragScrollEvent extends Event { public static const DRAGSCROLLED:String = "dragscrolled"; public var _y:Number; public function DragScrollEvent(type:String, y:Number) { super(type, false); this._y = y; } } }
and within DragScrollingCanvas we dispatched this event as soon as some scrolling occured, in the systemManager_mouseMoveHandler function. Last in this function we added:
dispatchEvent(new DragScrollEvent(DragScrollEvent.DRAGSCROLLED, this.verticalScrollPosition));
This allowed us to be able to listen for the event in the application, and move whatever component within the canvas to a new position on the canvas, while the user is scrolling. If you’re crafty you can easily expand this functionality to the horizontal axis as well. Anyway, this is the result, so far. Notice how the date bar on top, follows your scrolling vertically :)