ExtPlayer - An MP3 Player developed with Adobe AIR and Ext JS
November 24, 2008 by Aaron Conran
In collaboration with Adobe, Ext is releasing several new enhancements to the Ext.air package today. These include improvements to existing classes responsible for Sounds, Windowing and Database as well as new classes responsible for Notification, Clipboard and File System Interaction. We have also added new samples demonstrating how to use these new features. One of these examples is ExtPlayer, a simple MP3 player, that leverages the new Ext.air.MusicPlayer and Ext.air.Notify classes. You can install ExtPlayer or download the source.
Ext.air.MusicPlayer
Ext 2.0.2 introduced an Ext.air.Sound class, which is useful for playing small sounds such as beep and chimes. In contrast, Ext.air.MusicPlayer is meant for long running sounds such as music and podcasts which you would never want multiple files playing at the same time. MusicPlayer supports all of the basic operations, stop, pause, play and skipTo along with supporting events. The MusicPlayer enables the developer to add music and podcasts to their AIR-enabled Ext application very quickly.
var mp = new Ext.air.MusicPlayer(); mp.adjustVolume(0.5); mp.play(url);
Ext.air.Notify
The new notification class allows you to notify your users with toast or growl-like messages from the operating system. This allows you to notify users that something important has occurred even when your application may not be visible. By displaying these notifications at the operating system level it is sure to get the users attention without being lost within a browser tab.
var msg = 'Title: {0}<br/>Artist: {1}'; var sample = new Ext.air.Notify({ msg: String.format(msg, id3info.songName, id3info.artist), icon: '../famfamfam/music.png' });
Window and App API’s
We added methods and configurations for common window manipulation tasks that did not already exist. Ext.air.NativeWindow now exposes methods to re-order windows, set a window as always on top, and enable full-screen mode. A new singleton, Ext.air.App will allow you to set your application to start on login and get the currently active window.
Ext.air.App.launchOnStartup(true);
Ext.air.Clipboard
Ext.air.Clipboard allows you to interact with the system’s clipboard. Developers can determine if a particular format has data, set the data and get the data. At this point, this is largely a pass through to an existing class from Adobe air.Clipboard.generalClipboard. There may be enhancements or workarounds which Ext will add in the future including integration with drag and drop.
Ext.air.Clipboard.setData('air:text', 'Sample set on the clipboard'); var data = Ext.air.Clipboard.getData('air:text');
Ext.air.VideoPanel
Ext.air.VideoPanel enables you to embed flash based video while maintaining the same functionality as an Ext.Panel. VideoPanel’s can also take part in Ext layout management. This means that you can nest your Video’s in a border layout, add toolbars, buttons, just as you have become accustomed to. You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!
var vp = new Ext.Viewport({ layout: 'fit', items: [{ id: 'video', xtype: 'videopanel' }] }); Ext.getCmp('video').loadVideo('sample.flv');
AIR and the Future of Ext.air
Adobe AIR enables web developers to use their existing skill set to create desktop applications. AIR is a cross-platform runtime and allows you to develop your application once and then deploy it across Windows, OS X or Linux. (The Linux runtime is currently in beta status.) Adobe AIR 1.5 was shipped last week at AdobeMAX and features database encryption, an updated WebKit (including SquirrelFish) and Flash Player 10.
Ext will be adding support to encrypt your SQLite database soon. Another exciting technology which was included in Adobe AIR 1.5 is PixelBender. PixelBender allows you to apply lightning fast image or video processing filters to your application. An important feature of AIR that many people are unaware of is that you can mix and match Ajax, Flash and Flex technologies. There are several existing open-source ActionScript libraries which you can take advantage of immediately by including them in your application. A new project from Adobe named Alchemy will even let you compile C or C++ code to the ActionScript virtual machine. You could then consume this code in an Ext application on the AIR platform! The entire Ext.air package including samples can be downloaded here. It will also be included in the next release of Ext.
Posted on November 24th, 2008 at 4:03 am
This is GREAT NEWS! Only last night I started playing around with the previous Ext.air and started creating js notifications. Now I can do ExtJS notifications which are always MUCH better.
Keep up the outstanding work guys & gals!
Posted on November 24th, 2008 at 4:04 am
WOW! This is great! I’m so happy you didn’t forget Air, because Ext and Air were really meant for each other!
Posted on November 24th, 2008 at 4:05 am
Absolutely stunning!
Posted on November 24th, 2008 at 4:48 am
Some great news here! I take it that since the Ext.air.VideoPanel allows for nesting we can add all the normal features like fullscreen, stop, play, pause, sound on/off etc?
Way to go
Posted on November 24th, 2008 at 5:17 am
Oh wow, these new features sound great - its been quite some time since i’ve played with ExtJS but i think i may just have to get playing when i’m out of the office.
Love the work guys!
Posted on November 24th, 2008 at 3:18 pm
This is unbelievable! good work guys.
Posted on November 24th, 2008 at 3:34 pm
This is incredible! Ext.air.Notify class and also the exposed methods in Ext.air.NativeWindow class to re-order windows, set a window as always on top, and enable full-screen mode are very useful. It seems that the line separating Ext and Adobe AIR is vanishing. Thank you guys. We really appreciate that.
Posted on November 24th, 2008 at 9:48 pm
JavaScript is now the new COBOL.
Posted on November 24th, 2008 at 10:00 pm
[...] ExtPlayer - An MP3 Player developed with Adobe AIR and Ext JS - In partnership with Adobe, Ext is releasing several new enhancements to the Ext.air package today. These include improvements to existing classes responsible for Sounds, Windowing and Database as well as new classes responsible for Notification, Clipboard and File System Interaction. [...]
Posted on November 25th, 2008 at 6:27 am
Very nice apps!
Posted on November 25th, 2008 at 6:51 am
[...] Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off. [...]
Posted on November 25th, 2008 at 7:29 am
[...] Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off. [...]
Posted on November 25th, 2008 at 12:23 pm
What about the license? Do we need to buy a license when coding Air apps with Ext?
Posted on November 25th, 2008 at 1:37 pm
The gap between browser and desktop application is now very thin.
Posted on November 25th, 2008 at 6:13 pm
[...] : http://extjs.com/blog/2008/11/24/extplayer-air-and-ext/ via [...]
Posted on November 25th, 2008 at 7:07 pm
[...] You can find out more about Ext.Air here [...]
Posted on November 25th, 2008 at 9:05 pm
[...] Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off. [...]
Posted on November 25th, 2008 at 10:40 pm
[...] Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off. [...]
Posted on November 26th, 2008 at 12:12 pm
ExtPlayer - An MP3 Player developed with Adobe AIR and Ext JS…
[...]In collaboration with Adobe, Ext is releasing several new enhancements to the Ext.air package today. These include improvements to existing classes responsible for Sounds, Windowing and Database as well as new classes responsible for Notification,…
Posted on November 26th, 2008 at 2:14 pm
Looks great! Nice song selection for the screenshot too
Posted on November 28th, 2008 at 6:29 pm
This is incredible! Ext.air.Notify class and also the exposed methods in Ext.air.NativeWindow class to re-order windows, set a window as always on top, and enable full-screen mode are very useful. It seems that the line separating Ext and Adobe AIR is vanishing. Thank you guys. We really appreciate that.
Posted on November 29th, 2008 at 7:39 am
[...] знакомить с новинками фреймворка ExtJS. На этот раз команда разработчиков сообщает, что в сотрудничестве с Adobe они развивают библиотеке в [...]
Posted on December 1st, 2008 at 7:13 am
[...] possibile creare applicazioni davvero interessanti. Ne è l’ennesima prova questa nuova applicazione denominata ExtPlayer e realizzata con l’ausilio dei pacchetti Ext.air: un lettore mp3 che [...]
Posted on December 2nd, 2008 at 3:31 pm
[...] a result of collaberation between Ext JS and Adobe, several impressive enhancements to the Ext.air package were just released. These enhancements allow even better control of AIR and [...]
Posted on December 3rd, 2008 at 1:39 am
very cool ! fighting .
Posted on December 16th, 2008 at 10:50 am
Nice work Aaron!
Posted on December 19th, 2008 at 5:23 pm
[...] Más información: ExtPlayer [...]
Posted on December 26th, 2008 at 10:51 am
Cool Application. Addition to number of good AIR based applications.
Posted on December 29th, 2008 at 8:48 pm
Great list to examples at: http://www.flexbasics.com