WS-Blog » Open Source http://www.websector.de/blog // Flex - AIR - Flash - JavaScript Wed, 18 Jan 2012 12:17:16 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Swiz: Cafe Townsend example (incl. FlexUnit tests) http://www.websector.de/blog/2010/04/25/swiz-cafe-townsend-example-incl-flexunit-tests/ http://www.websector.de/blog/2010/04/25/swiz-cafe-townsend-example-incl-flexunit-tests/#comments Sun, 25 Apr 2010 10:56:14 +0000 sectore http://www.websector.de/blog/?p=591 UPDATE [10/31/10]: Example and its full source has been updated using latest commit of Swiz 1.0 RC2.

Cafe Townsend is a well known application to demonstrate any MVC framework for using Flex or ActionScript. There are already ports of Cairngorm, Mate, PureMVC, Spring ActionScript, RobotLegs and now Swiz.

In cooperation with “my partner in crime” Sönke Rohde we have built a Swiz port including unit tests. Check out the following example and its source.

Live Example

(To view source code just a right mouse click on it)

Source code

You will find the full source of Swiz’ Cafe Townsend example at GitHub.

Thanks!

Thanks again to Sönke for his great cooperation including all helpful tips! Also big thanks to Swiz team for development such a simple to use framework – keep on rocking ;)

-Jens

]]> http://www.websector.de/blog/2010/04/25/swiz-cafe-townsend-example-incl-flexunit-tests/feed/ 17 Mate: Cafe Townsend example updated for using Flex 4 http://www.websector.de/blog/2010/03/12/mate-cafe-townsend-example-updated-for-using-flex-4/ http://www.websector.de/blog/2010/03/12/mate-cafe-townsend-example-updated-for-using-flex-4/#comments Fri, 12 Mar 2010 19:51:53 +0000 sectore http://www.websector.de/blog/?p=552 For an upcoming Flex 4 training I do need a good example for using Mate framework. At the moment you will find a lot of examples on Mate’s official website or at the project called “mate-examples” at Google Code. But it seems that there is not any Flex 4 example available.

Anyway, I just ported the current Cafe Townsend example (Flex 3) created by Laura Arguello to Flex 4.

It was not a big deal, because Mate supports already Flex 4. Only few changes was necessary for using new Spark components.

Also I did some little modifications in MainEventMap.mxml to start all Inject properties for any views as soon as possible listening to FlexEvent.PREINITIALIZE. Furthermore all presentation models now are not created before its view will be added. But that is what we called “cosmetic” ;) , because Laura has already done an awesome job building the Flex 3 example of Cafe Townsend!

Live example

[Update 03/15/2010] For a better use case of Flex 4 I have refactored the original code of the app. Now it based on a new layout and uses some effects. Last but not least the code implement a LocalEventMap to encapsulate the handling of employes, which is important if you want to use a modular app with Flex-Modules[/Update]

(To view source code just a right mouse click on the app)

Source code available

You will find the full source of Mate’s Cafe Townsend Flex 4 example at the project called ‘mate-examples’ on Google Code.

Have fun!

-Jens

]]> http://www.websector.de/blog/2010/03/12/mate-cafe-townsend-example-updated-for-using-flex-4/feed/ 5 Custom ApplicationUpdaterUI for using AIR Update Framework in Flex 4 http://www.websector.de/blog/2009/09/09/custom-applicationupdaterui-for-using-air-updater-framework-in-flex-4/ http://www.websector.de/blog/2009/09/09/custom-applicationupdaterui-for-using-air-updater-framework-in-flex-4/#comments Wed, 09 Sep 2009 17:25:54 +0000 sectore http://www.websector.de/blog/?p=403 Flex 4 is Rock ‘n’ Roll! However, Flex 4 is still beta and it can’t be perfect right now. Today one of the most missing feature for me is using the ApplicationUpdaterUI of the Adobe AIR Update Framework in Flex 4. This bug is already documented. (BTW: Please vote here to fix this issue! )

Anyway, I can’t wait for the final release of Flex 4, so I decided to build a custom ApplicationUpdaterUI component based on the new Spark skinning architecture. The custom ApplicationUpdaterUI is built on the top of the current version of Adobes AIR Update Framework and most of the current features are available (e.g. auto check, localization etc.) The component is full skinnable using it as an external window (as before) or as an embedded view component in an application (without the need of a popup window).

Usage

Usage of ApplicationUpdaterUI ( Download code )

  1.  
  2.  
  3. //
  4. // [1] Using ApplicationUpdaterUI as a popup window using ActionScript
  5. var updater: ApplicationUpdaterUI = new ApplicationUpdaterUI(   new File ( ‘pathToYourUpdaterXML’ ), true, true );
  6. // Optional: setting skin
  7. updater.setStyle(‘skinClass’, de.websector.utils.updater.ui.skins.silver.AppUpdaterUISilverSkin);  
  8. // Optional:  change the height and width of the window
  9. updater.windowHeight = 300;    
  10. updater.windowWidth = 500;       
  11. // check for updates
  12. updater.checkNow();
  13.  
  14.  
  15. //
  16. // [2] Using ApplicationUpdaterUI as an embedded view within your application
  17. // Important: Avoid using popup window: useWindow=false (default is true)
  18. // Optional: setting skin class via "skinClass"
  19. // Optional: If the view should be visible only if an update available set invisibleCheck="true" (default is false)
  20. <ws:ApplicationUpdaterUI
  21.     xmlns:ws="http://websector.de"
  22.     id="updater"
  23.     width="100%" height="50"
  24.     configurationFile="{ new File ( Constants.UPDATE_FILE ) }"
  25.     skinClass="de.websector.utils.updater.ui.skins.firefox.AppUpdaterUIFirefoxSkin"
  26.     invisibleCheck="true"
  27.     useWindow="false"
  28.     />

Skin examples

It’s pretty easy to create your own skin and add it to the component! Check out the 3 different skins and feel free to use these as an example for your custom skins.

  1. AppUpdaterUIStandardSkin: Cloned interface of the Flex 3 based ApplicationUpdaterUI
  2. AppUpdaterUISilverSkin: Inspired from Adobes shiny XD components
  3. AppUpdaterUIFirefoxSkin: That’s my favorite ;) . Do you know the status bar on the top of a HTML page in Firefox 3.0 if a popup is trying to open? This skin a clone of such a bar to inform the user, if an update available. No need for an extra popup window.

Download full source

Full source is available at GitHub (package: de.websector.utils.updater.ui.*) :
http://github.com/sectore/applicationupdaterui/

All source of ApplicationUpdaterUI is open source licensed under Mozilla Public License 1.1.

Personal TODOs

  • Documenting / commenting code base
  • It’s not a “most wanted feature” right now, but handling of an update using files (events: StatusFileUpdateEvent.FILE_UPDATE_STATUS and StatusFileUpdateErrorEvent.FILE_UPDATE_ERROR) would be nice. If I have the time, I’m going to implement it.

Happy updating ;) !

-Jens

]]> http://www.websector.de/blog/2009/09/09/custom-applicationupdaterui-for-using-air-updater-framework-in-flex-4/feed/ 21 Testing states of skin classes in Flex 4 using WSSkinStatesTester http://www.websector.de/blog/2009/09/06/testing-states-of-skin-classes-in-flex-4-using-wsskinstatestester/ http://www.websector.de/blog/2009/09/06/testing-states-of-skin-classes-in-flex-4-using-wsskinstatestester/#comments Sun, 06 Sep 2009 09:59:38 +0000 sectore http://www.websector.de/blog/?p=385 WSSkinStatesTester is a handy tool to test visually all states of any skin classes in Flex 4 (Gumbo).

Imagine you as a Flex developer or a designer have been created a lot of skins for your application, e.g. using Flash Catalyst. Now you want to check the behavior of these skins changing its states. Therefore you will run your application to change different states of components or you open Flash Catalyst to check all the states of a skin. Or you could use Flash Builders design view for this issue, but unfortunately it is unable to show transitions switching between states.

Anyway, how about switching between skin classes and all its states (incl. transitions) using only one (test-) view?

Live example

(Right mouse click to view source of example)

 

Usage

Two steps only:

  1. Just create an instance of WSSkinStatesTester
  2. And add all skins which have to be checked

Usage code example ( Download code )

  1.  
  2. //
  3. // Step 1
  4. // Create an instance of WSSkinStatesTester using MXML
  5. <ws:WSSkinStatesTester
  6.     xmlns:ws="http://websector.de"
  7.     id="skinTester"
  8.     width="100%" height="100%"
  9.     />
  10.    
  11. //
  12. // Step 2
  13. // Create and add an instance of a skin to WSSkinStatesTester.
  14. var skin: PanelSkin = new PanelSkin();
  15. skin.width = 250;
  16. skin.height =250;
  17. skinTester.addSkin( skin );
  18.  
  19.  
  20. //
  21. // Step 2a  [ ALTERNATIVE ]
  22. // Alternative you can add an array of skins to WSSkinStatesTester using ActionScript.
  23. // BTW: This usage is recommend if you want test a bunch of skins and have to set properties before!
  24. var skin0: ButtonSkin = new ButtonSkin();
  25. skin0.width = 150;
  26. skin0.height = 50;
  27. skin0.labelDisplay.text = "ButtonSkin (Spark)";
  28.  
  29. var skin2: ComboBoxSkin = new ComboBoxSkin();
  30. var skin3: MyButtonSkin = new MyButtonSkin();
  31.  
  32. skinTester.skins = [ skin1, skin2, skin3  ];
  33.  
  34.  
  35. //
  36. // Step 2b [ ALTERNATIVE ]
  37. // Or add an array of skins to WSSkinStatesTester using MXML
  38. <ws:WSSkinStatesTester
  39.     xmlns:ws="http://websector.de"
  40.     id="skinTester"
  41.     width="100%" height="100%"
  42.     skins="{ [  
  43.                 new CheckBoxSkin(),
  44.                 new VideoPlayerSkin(),
  45.                 new ButtonSkin()
  46.             ] }"
  47.     />

Full source available

Note: To run all code Flex SDK 4.0.0.9948 or higher is required.

WSSkinStatesTester is open source licensed under Mozilla Public License 1.1.

Happy skin states testing ;)

-Jens

]]> http://www.websector.de/blog/2009/09/06/testing-states-of-skin-classes-in-flex-4-using-wsskinstatestester/feed/ 3 Speed up JPEG encoding using Alchemy http://www.websector.de/blog/2009/06/21/speed-up-jpeg-encoding-using-alchemy/ http://www.websector.de/blog/2009/06/21/speed-up-jpeg-encoding-using-alchemy/#comments Sun, 21 Jun 2009 15:16:42 +0000 sectore http://www.websector.de/blog/?p=287 Few weeks ago Thibault Imbert published an optimized version of Adobes JPGEncoder. And it rocks! However, if you may have very big-size bitmaps it takes too much time to encode images. For example: A bitmap with a size of 2000px x 1500px takes 22 sec. (BTW: Adobes version 30 sec.!!)

Today I came across to a post by Manfred Weber, which points to a discussion at Adobes Alchemy forum. There you will find a great solution published by metalbot for encoding JPEGs using Alchemy. It’s based on a C library for JPEG image compression by IJG and it’s pretty fast (2,7 sec. for 2000 px x 1500px ) !!! Check out the example:

Example

Click the image to see the live example. Feel free to post a comment about your your results!

Screen shot

Download Full Source

I have changed the original C code a little bit for manipulating the quality of an encoded image as well. It’s just one line added to “as3_jpeg_wrapper.gg” (line 78) jpeg_set_quality(&cinfo, quality, TRUE /* limit to baseline-JPEG values */); Therefore the “as3_jpeg_wrapper.swc” located within the *.zip is recompiled for using this feature in your Flex project via as3_jpeg_wrapper.write_jpeg_file(baSource, WIDTH, HEIGHT, 3, 2, quality);

Full source of the Flex based example above: AlchemyJPEGEncoderFlexExample.zip (Downloads: 4207)

BTW: You will find the original source of all C based classes published by metalbot here.

Tips

I struggled around to set up Alchemy and to recompile the IJG library and the “as3_jpeg_wrapper.swc”. To avoid this, here are some tips:

  • Instruction for set up Alchemy by Lee Felarca (zeropointnine). Best instruction I’ve found so far for set up Alchemy.
  • Recompiling the SWC of metalbot’s source following its “README.txt” and using its “Makefile” failed: To avoid this issue, after compiling the C library of jpegsrc you have to move the following files to $ALCHEMY_HOME/jpeg/ as well: “jconfig.h”, “jmorecfg.h” and “jpeglib.h”. Check out the comment by notnick here

[UPDATE 06/22/09] There is another great test for encoding images using Alchemy by Mateusz Malczak, which includes an asynchrounous example as well: Alchemy – asynchronous jpeg encoding Thanks to xoestudio for pointing to this via twitter! [UPDATE]

Have fun ;)

-Jens

]]> http://www.websector.de/blog/2009/06/21/speed-up-jpeg-encoding-using-alchemy/feed/ 27 ThunderBolt AS3 version 2.2 out now! http://www.websector.de/blog/2009/03/08/thunderbolt-as3-version-22-out-now/ http://www.websector.de/blog/2009/03/08/thunderbolt-as3-version-22-out-now/#comments Sun, 08 Mar 2009 16:33:31 +0000 sectore http://www.websector.de/blog/?p=262

ThunderBolt AS3, which is a lightweight logger extension for Flex 3-4, AIR and Flash 9-10 applications, has been updated to version 2.2.

Check out the new features:

New features

  1. Logging of package names + class names + code line numbers (Flash Debug Player required).

  2. ThunderBoltTarget for using Flex Logging API improved.
  3. SWC updated for using Flex 4 (Gumbo)
  4. ThunderBolt AS3 Console uses a certificate of Thawte sponsored by Adobe.

  5. ThunderBolt AS3 Console is updated using latest version of Adobe AIR v.1.5.1
  6. Issue 10 fixed: “Command + Q not working in OS X“
  7. All examples and documentation has been updated as well.

Happy Logging ;)

-Jens

]]> http://www.websector.de/blog/2009/03/08/thunderbolt-as3-version-22-out-now/feed/ 5 Simple RSS reader for iPhone using PureMVC Standard for Objective-C http://www.websector.de/blog/2009/02/08/simple-rss-reader-for-iphone-using-puremvc-standard-for-objective-c/ http://www.websector.de/blog/2009/02/08/simple-rss-reader-for-iphone-using-puremvc-standard-for-objective-c/#comments Sun, 08 Feb 2009 11:24:29 +0000 sectore http://www.websector.de/blog/?p=210 Few weeks ago Cliff Hall announced the release of PureMVC Objective-C Port by Brian Knorr. Brian also provided a very helpful demo called “Employee Admin“.

To dive into the Objective-C port of PureMVC as quick as possible I have built a another demo. It’s a pretty simple RSS reader for iPhone or iPod touch, which grabs a feed of a blog and shows the latest 10 entries in detail.

Screen shots

Screen shots of an iPhone RSS reader using PureMVC

View and download full source

View or grab the source here:
http://github.com/sectore/puremvc-objectivec-simplerssreader/

It’s open source licensed under the Mozilla Public License 1.1.

Conclusion

Brian Knorr, the project owner of the Objective-C port of PureMVC, did an awesome job! But the question is: Do I need a MVC framework such as PureMVC for developing an iPhone app? You don’t! Because Objective-C based already on a MVC paradigma.

However, if you are new to Objective-C and you may have a strong ActionScript background using PureMVC, it might be a good choice to dive into iPhone development. And you will see, that the code architecture is like your home ;)

-Jens

]]> http://www.websector.de/blog/2009/02/08/simple-rss-reader-for-iphone-using-puremvc-standard-for-objective-c/feed/ 3 Free iPhone app for Flex User Group Hamburg (incl. source code) http://www.websector.de/blog/2009/01/27/free-iphone-app-for-flex-user-group-hamburg-incl-source-code/ http://www.websector.de/blog/2009/01/27/free-iphone-app-for-flex-user-group-hamburg-incl-source-code/#comments Tue, 27 Jan 2009 17:40:50 +0000 sectore http://www.websector.de/blog/?p=150 [UPDATE 02/11/09] flexughh app is available on iTunes store! All links has been updated. Get it for free ;)

It’s done! My first iPhone app is uploaded to Apple’s app store. It’s an app for the Flex UG in Hamburg / Germany, called “flexughh”. Because I’m very excited about all the enthusiastic flexughh-members I decided to offer this app for free including its full source code written in Objective-C as open source!

Today I will present the new flexughh app at our flexughh-Meeting. If you don’t have the chance to attend it, here are some screen shots.

Screen shots

 

Get flexughh app for free!

The flexughh app is be available in German and in English!

flexughh on iTunes Store

Source code

The flexughh app is written in Objective-C. You can see and download the full source here (within the next days):
http://github.com/sectore/flexughh-iphone/

Have fun!

-Jens

]]> http://www.websector.de/blog/2009/01/27/free-iphone-app-for-flex-user-group-hamburg-incl-source-code/feed/ 6 Swiz example based on Adobe AIR and SQLite http://www.websector.de/blog/2009/01/07/swiz-example-based-on-adobe-air-and-sqlite/ http://www.websector.de/blog/2009/01/07/swiz-example-based-on-adobe-air-and-sqlite/#comments Wed, 07 Jan 2009 12:58:53 +0000 sectore http://www.websector.de/blog/?p=114 About two months ago Sönke Rohde, a good friend of me and a very active contributor of the Swiz framework, told me about his experiences using Swiz and he recommended highly Swiz as a framework which seems brutally simple to use. For all the people out there who are not familiar with Swiz: Swiz is an IoC framework created by Chris Scott to simplify the development of Flex based RIAs.

After diving into Objective-C for the last two weeks I have now the time to dive into Swiz. So I ported my latest published example using Mate into Swiz.

The following example is a tiny AIR based application for storing user names into a SQLite database. It includes Eric Feminellas awesome AIR SQL Framework and a way to use the Presentation Model pattern within an AIR application as well.

Screen shot

Click to download source code

View source code

Check out the source code: View source code

Download full source

Full source of the example: SwizAIRSQLiteExample.zip (Downloads: 1825)

Acknowledge

]]> http://www.websector.de/blog/2009/01/07/swiz-example-based-on-adobe-air-and-sqlite/feed/ 6 WSPluginSwitcher: Cocoa based tool for switching Flash plug-in on OS X http://www.websector.de/blog/2009/01/02/wspluginswitcher-cocoa-based-tool-for-switching-flash-plug-in-on-os-x/ http://www.websector.de/blog/2009/01/02/wspluginswitcher-cocoa-based-tool-for-switching-flash-plug-in-on-os-x/#comments Fri, 02 Jan 2009 15:54:12 +0000 sectore http://www.websector.de/blog/?p=104

It’s never to late to learn a new (programming) language ;) So I’ve been starting to learn Cocoa, Apple’s Objective-C based programming environment for Mac OS X.

My “Cocoa”-trip started with building a little application called “WSPluginSwitcher“, which is a Cocoa based tool for switching Flash plug-ins on OS X (Leopard).

Check it out – it’s open source, including its source code: WSPluginSwitcher on Google Code

Screen shots

Download WSPluginSwitcher including full source

You can download WSPluginSwitcher at its Google Code project.

To get the full source checkout the latest code using WSPluginSwitchers repository at Google Code.

It’s open source!

BTW: I’m very new to Cocoa, so I’m very happy about any feedback ;)

Helpful links for learning Cocoa as an ActionScript Developer

About 10 days of programming a new language is not enough to make a real statement… However, what I’ve have learned so far is: To learn Cocoa as quick as possible you will need a good book! Apple delivers tons of Cocoa guides, but it takes me (too) much time to find basic solutions. I know why I love Adobes Flex and AIR docs ;)

So I highly recommend the book called “Cocoa Programming for Max OS X” by Aaron Hillegass, which helps me a lot!

Further helpful links (not only for ActionScript Developers) are:

P.S.: Happy Flash plug-in switching using WSPluginSwitcher! ;)

]]> http://www.websector.de/blog/2009/01/02/wspluginswitcher-cocoa-based-tool-for-switching-flash-plug-in-on-os-x/feed/ 9