I find the PopUpButton to be a very useful component, and I think it is underrated. Thus it is rarely used by developers/designers. A PopUpButton can open any UIComponent by a simple click of a button, it saves the developer the hassle of dealing with the PopUpManager and locating the pop-up at the exact point to [...]

The Yahoo! Maps AS3 Component is nothing short of astounding, a clean and powerful Flex component that delivers sophisticated mapping quickly and easily. I needed to add mapping to an app recently and was pleased to see how well this component delivered. If you are interested in adding mapping to your apps, I highly recommend that you take a look at this component. And here are detailed steps to help you get started. To use the Yahoo! Maps AS3 Component you'll need your own Yahoo! Developer Network Application ID. If you have one already, then you're all set. If not, click on the "Get an App ID" link on the component page to obtain one. Once you have an App ID, you'll need to download the Flex component itself. There is a download link in the middle of the component page, download the ZIP file, and expand it in a local folder somewhere. There are lots of files in the ZIP file, but the really important file is the YahooMap.swc file. Make sure you know the path to this file, you'll need it when you create your Flex project. Then create a new Project in Flex Builder. You can define a Server Technology if needed, although for tinkering the first time you may want to keep the Project as simple as possible. In the 3rd screen in the New Flex Project wizard you can specify Source Paths and Library Paths. Select the "Library path" tab as you'll need to add the YahooMap.swc. Click the "Add SWC" button, and then browse to the YahooMap.swc file and click "OK". You should see the YahooMap.swc listed in the "Build path libraries" list. You can then finish creating the Project. Now let's create the basic UI. This example will display the map in a large box on the right, and the left will contain simple text boxes, one to enter the map location, and the other to specify map searches. Here's the MXML code: The code is pretty simple, and the only really interesting item is the <mx:UIComponent> which will be used to display the map. Paste this code into your app, and compile and run it, just to make sure all is working. Next we'll add basic mapping. Here is the updated code: Let's take a look at the above code. The big change is the <mx:Script> block. First come a series of import statements, and then two variables are defined. The first, appID, contains your Yahoo! Developer Network ID, replace the placeholder text in quotes with your own ID. The second defines the YahooMap itself. The initApp() function (called on creationComplete) first creates a new YahooMap instance, and then defines the handler that will be called upon map initialization. It then initializes the map, passing the appID, along with the desired height and width (using the height and width of the mapUI UIComponent). Next a series of options are set, turning on panning, the scale bar, the map type widget, and the zoom control (you can omit these, or add other options if desired). And then finally, addChild() is used to add the yahooMap object to the mapUI UIComponent. The code also contains two other functions. yahooMapInitialize() is called once the map is initialized (in response to a YahooMapEvent.MAP_INITIALIZE event). It sets the default zoom level and initial map location, and also specifies a resize handler. This is important, without a resize handler the displayed map would not resize if the app were resized. The resize handler function itself, yahooMapResize(), is called whenever the app is resized (in response to a ResizeEvent.RESIZE event), and it simply resets the map size (again using the height and width of the mapUI UIComponent). You can paste this code into your app, and run it. You'll have a fully functioning map, allowing zooming and panning, and supporting multiple display types (Map, Satellite, and Hybrid). Next we'll add code to allow users to enter a map location. Here's the updated code: Not a lot of changes here. First, we've added some more needed import statements. We've also added a variable of type Address (to store the set map location). Two functions have been added to the code. setMapLocation() accepts a string (whatever the user typed in the txtLocation box) and then creates an Address object for the passed string. As you are probably noticing, the Yahoo! Maps component is used asynchronously and is thus highly event driven. setMapLocation() sets an event handler that will be called when the Address object has been successfully geocoded, and then it perform the geocode. The geocode operation does not do anything to the map, rather it locates matches and converts them into map locations. The event handler, yahooGeocodeSuccess(), first obtains any results generated by the geocode operation. It is possible for a geocode operation to return multiple results, but this code ignores all but the first match, and then uses that first match to set the map zoom level and location. And finally, setMapLocation() was added to the first <mx:TextInput> and <mx:Button> to the enter and click events respectively. Save these changes, and then run the app. Now you can type in a country name, or a city and state, or a US zipcode, and the map will be repositioned to display the best match. Now for the final change, this time allowing you to search for matches within the displayed map. Here's the code one last time: Once again, more import statements have been added. We've also added a variable of type LocalSearch to perform local searches (searches within the displayed map). The second <mx:TextInput> and <mx:Button> controls now invoke a function named mapSearch(). This function first removes any map markers (left from a previous search, there will obviously be none the first time this function is invoked), and then performs a local search specifying the search text, map zoom level and location, and search radius (in miles). This search is also asynchronous, and the yahooSearchSuccess() function is invoked when the search completes. (This event handler is added in the initApp() function above). yahooSearchSuccess() obtains the results and then loops through them, creating a LocalSearchItem for each and then using that to create a SearchMarker, and then adding that marker to the map. Save this code, and then run the app. Type in a location, and then do a search for "ATM" or "pizza" or anything else. You can try setting the map location to "San Jose, CA" and then find "Adobe Systems, Inc.". Pretty cool, and not a lot of code either. And that's just the start of it. Yahoo! has posted lots of great examples, so check those out. And the component also supports distance, traffic data, and much more, so be sure to browse the API documentation. And once you have the basics down, adding integration to backend data (perhaps pulling addresses from a backend ColdFusion app to map them) is just as easy. Have fun with this, and if you create anything cool and public facing, please share the URL.

While we are waiting for Flash Lite 3 and dreaming about real Flash/Flex for mobile, J2ME charges forward. If you’re developing applications for Java-ME (J2ME)-based mobile device, and writing your own data management code, you should check out the Perst Lite open source, object-oriented embedded database from McObject. Perst Lite is not completely new, it’s been [...]

Ok, so i’ve made it through to the other side here in Minnesota. I’m sat in the hotel lobby saying goodbye to people as they crawl through to their airport cab. Last night’s party at Nye’s was something to behold - the cream of the international flash development industry belting out ‘Sweet Caroline’ - it’s [...]

We've recently launched an RIA focused newsletter called the RIA Buzz. If you're interested in RIA development, you should subscribe to the RIA Buzz. In each newsletter we deliver in four major areas:

• RIAs that Rock: David Tucker highlights cool RIA applications.
• Essential Articles: Selected must read articles from all over the web.
• The Metablog: Robert Cadena of SearchCoders.com distills what the community is saying.
• Expert Events: Your opportunity for education and contacting Adobe team members.

Here's the first issue of the newsletter that went out last month. The newsletter will be sent out every 6 weeks, with the next one scheduled for early July.

A few notes about subscribing to this newsletter. We hate spam as much as you do, so when you subscribe, we don't opt-in you in to other communications from Adobe - just the newsletter. However, if at a later date you unsubscribe from all Adobe communications, it will stop your newsletter subscription. You'll have to subscribe again at that point.

In the following example,  I am using a similar light effect script as the one posted yesterday, In this example I blurred the generated drawing API lines.  To get my script to go from point A to B, I am interpolating between 0 and 1. ...

YouTube’s mixed easy movie access with community uploads to create a startling new service. The online problem is that you can only access YouTube when you are online. How can you access those movies when you are offline? Let’s solve that problem by building a downloader with Flex and AIR.
In this article we will build a cross platform application that searches for YouTube videos and then provides a mechanism to download those videos and view them locally. You will be able to take your favorite YouTube videos with you wherever you go.

posted in AIR by Jack Herrington Leave A Comment
©2008 The Tech Labs. All Rights Reserved.

Mr.Neave has a new showcase site, very well crafted and has a lot of new (and cool) stuff.

You... must... visit! ;)

http://www.neave.com/

In the last article I explained how to create an image surrounded by border. That article is a start for fixing the issue: “image doesn’t have border style”. Now I extended even more the new ImageBorder component to be able to center it horizontally and vertically and still be well displayed. Modifications were made in updateDisplayList method [...]

Chuck Freedman (Chuckstar) has started a new Flex/AIR training company in Silicon Valley named “for those about to code”. For those about to code will be holding the first training weekend July 19-20, 2008 at The Domain Hotel, Sunnyvale, CA. This intense 2 day training class will target the Beginner/Intermediate  developer looking to rapidly increase [...]

In Flex Builder 3 (i don't know if Flex Builder 2 has the same bug) you can rename a Class which gives you a dialog that allows to rename the class (with preview posibilities) after you say ok it renames all occurances of the class. Nice so far but there is a small bug making this functionality really annoying:

It does this on all open projects.

Solution: close all other projects before using the rename if you have multiple projects with the same classes!

Here Mike Downey presented a ton of new web possibilities using the Adobe AIR runtime - hence the keynote strapline: “The long arm of the web”. Sounds like a mix between a Tim O’Reilly soundbite and a totallitarian government mantra… Happily the content was less opressive and more inspired than the strapline suggests! A few interesting [...]

Whether you’re an enterprise developer working in a large shop or setting up a blog for yourself, you’ve almost certainly been tasked with keeping your development code in sync with some type of stable release. Whether a project is big or small, you still need to ensure that the core code you work with remains [...]

A nice article by Dan Zen, showing four examples about User Interface Components, Communication 1 - navigateToURL, SharedObject, FlashVars, ExternalInterface, Loader, URLRequest and FileReference, Communication 2 - URLLoader and URLVariables to get text or server script data (PHP, MySQL) and XML in Flash. Read full article here

Bending objects is one of the classic features of any 3D package. Bartek thought it would be nice to be able to bend stuff in Papervision3D too. Read his post and download the source.

Applications may crash or result in a run-time exception if the APIs used by the caller and those expected by the callee are incompatible. Java, Flash and Actionscript deal with the issue in their own ways. In Flex, attempts to support cross-versioning began with version 2.0.1 though it didn’t work very well. Cross-versioning Support should be [...]

I am more than proud to announce that we won the Grimme Online Award in the category “Special”. It is the most prestigious award in Germany releated to new media. Hobnox has been picked out of 1900 nominees and we made it. The category “Special” has been introduced to cover high quality and highly innovative projects [...]

I am more than proud to announce that we won the Grimme Online Award in the category “Special”. It is the most prestigious award in Germany releated to new media. Hobnox has been picked out of 1900 nominees and we made it. The category “Special” has been introduced to cover high quality and highly innovative projects [...]