Yahoo! Flash(R) Blog

Hello, My Name Is Badge Kit

Have we seemed a bit quiet lately? Not without reason of course–we’ve been busy working on a great new piece of software for you folks. Have you heard of badges? They’re those little widgets all the cool kids have on their sites, used to display stuff in a compact and fun way. Yahoo! offers a number of badges you can easily grab and place on your site such as OMG and Answers…but what if those just aren’t good enough? Well, then it’s time to make your own!

That’s why we’ve been working to create the Badge Kit, the quick and easy tool for creating badges and widgets for deployment on the web and beyond. We want to make it easier to create badges. You don’t have to be an AJAX or Flash wizard to create a badge with our kit, all you need to do is write some simple XML. The result is a lightweight Flash badge that can be customized and placed on your site with minimal effort. That means you get all the benefits of a sleek, flashy interface without all the hard work.

With the Badge Kit, you instantly have access to the Flash CS3 components, you can integrate filters and transitions, and can even use the new ASTRA library. Yep, we mean those ASTRA components such as AutoComplete, Tree, and Charts can be used without a line of scripting. In fact, most any third-party Flash CS3 component can be used in the Badge Kit–all with simple, declarative markup similar to Flex.

Coupled with the newest version of the Yahoo! Widget Engine, you can also turn your badge into a Yahoo! Widget. Using the artist formerly known as Konfabulator, your fancy little badge can become a fun and informative widget on someone’s desktop.

This is a beta release, and we feel confident in sharing it with you all. Heck, we’re proud of it. We think this is a step in the right direction for the new Yahoo!. Being open-source, you get to see the inner workings, and you can even extend and optimize the kit for your own uses. We’ve got big plans for some great features, but why not get started now?

We want you to know that this is the the same kit we’re using here at home, so expect some innovative and fun badges from the various properties at Yahoo! very soon. Note that we’ve already got a plethora of open web service APIs, including Yahoo! Search and Flickr, which you’re free to use to create a badge. We hope you’ll use the Badge Kit to create a unique badge of your own, and share it with the community.

Try out the Badge Kit!

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

Yahoo! and Flex: Feel Good In Your Own Skin

Have you ever used Flex and felt that the default Flex component skin was a little too utilitarian, lacking just a bit in the visual appeal and shiny disposition departments? Well, allow us to fix that problem for you. Two of our Flash and UI gurus, Joe Magnani and Jeff Bennett of the Media Innovation Group, have just developed a beautiful new skin for all of the default Flex components. The skin (which can be seen here) matches the look and style of UI components used throughout Yahoo! and balances the outward glossiness with some serious usability chops. Naturally, we are making it available to all of you under the very liberal BSD license — which does mean that you can use it, modify it, and distribute it to your heart’s content.

Check out Jeff’s intro to developing your own skins for Flex components, and then grab the Yahoo! Flex Skin and use it in a Flex app! And when you do, drop us a note — we love to hear from you!

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

YUI Got a Little More Flashy Today!

Today, Yahoo! releases version 2.4.0 of the YUI Library. Why are we telling you about the release of a library primarily aimed at JavaScript developers on a Flash blog? Well, I (Josh) have been working with the YUI team for the past few months to help them introduce a new component that leverages the power of Flash Player. The experimental YUI Charts widget brings the Yahoo! Astra Flash Charts to a whole new audience.

One of the big goals for the project was to retain all the features of the Flash charts, but to present them in an API more familiar to JavaScript developers. For instance, YUI Charts use the DataSource utility to load data from JavaScript or through XMLHTTPRequest. Developers experienced with the DataTable widget already understand how to use DataSource, so can they easily translate their existing knowledge. The process of embedding the charts SWF in a webpage is fully encapsulated. To create a new LineChart, a developer only needs to create a new instance of the class. The constructor receives the ID of the HTML container in which to place the charts, a DataSource instance, and a set of initializing values for properties and styles.

var lineChart = new YAHOO.widget.LineChart( containerID, dataSource, initializer );

One challenge along the way was determining the best way to set styles on a chart. Ideally, I would have liked to use the browser CSS engines, but custom style names and potentially complex values that weren’t always supported forced me to find a different approach. In the end, I determined that the best method is to use the initializer value in the constructor to pass in an Object hash of style values.

style:
{
    padding: 20,
    border:
    {
        color: 0x995566,
        size: 2
    },
    font:
    {
        name: "Verdana",
        color: 0x995566,
        size: 12
    }
}

As you can see, it looks similar enough to CSS that anyone should be able to figure it out quickly, but it’s really just a standard JavaScript Object. Everything from axes, to grid lines, to the mouse over data tip can be styled with colors, fonts, and images. If you asked me about my favorite feature, I’d have to say that it’s the support for background images. The chart itself, the data tip, and item markers can all use custom images, loaded at runtime. Additionally, I’ve exposed tiling options that are similar to CSS, including the familiar repeat, repeat-x, repeat-y, no-repeat, and a new special option called stretch which will cause the background image size to scale to the full dimensions of the object in which it appears.

That’s just a quick taste of the new YUI Charts widget. Of course, head on over to the YUI page on the Yahoo! Developer Center and read the official announcement on the YUI Blog to get more information. Now, if you’ll excuse me, I’ve got to get back to my next project. Oh Flex, how I’ve missed you….

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!