Today Midnight Coders and SapphireSteel Software announce a technology partnership to provide a uniquely powerful solution to integrate the Adobe Flash Platform with Microsoft .NET.

When it comes to building Rich Internet Applications (RIAs) for the .NET environment, developers prefer to use the Visual Studio IDE.  Up until now, Visual Studio was easier for pure Microsoft environments (such as for Silverlight client to .NET services), but Silverlight doesn’t have nearly the installed base that Flash has (99% of all Internet-enabled desktops). 

With the release of SapphireSteel’s Amethyst, developers now have an easy way to create Flash-based applications right inside Visual Studio. The problem of linking Flash with .NET is solved by Midnight Coders’ WebORB which provides end-to-end client-server application development across the two platforms. The Midnight Coders and SapphireSteel Software technology partnership is aimed at implementing seamless integration of Amethyst with WebORB. This will give Visual Studio users a simple and elegant way of creating data-driven Flash Platform applications with a .NET ‘back end’.

Yesterday SapphirSteel Software has released the final version of Amethyst, the Flex development plugin for Microsoft Visual Studio.

For the first time, Visual Studio users have access to a full suite of integrated development tools for the Adobe Flash Platform,” says Huw Collingbourne, Director of Technology at SapphireSteel Software, “Amethyst gives Microsoft developers the ability to design, code and debug Flash and Flex applications without being forced to use an unfamiliar IDE.

“Moreover, Amethyst is a truly ‘visual’ system, not just an ActionScript editor. Developers can drag components from the Visual Studio Toolbox and drop them right into the Amethyst Designer in order to create sophisticated Flash-based user interfaces. In fact, Amethyst looks and works just like the C# and Visual Basic environments so there is really almost no learning curve for an experienced Visual Studio user coming to Amethyst.

“With Amethyst, Visual Studio programmers have a real alternative to Microsoft’s own tools for creating applications for the WPF/Silverlight platform. Amethyst users have immediate access to the Flash Platform for developing both desktop and browser based applications”

In addition to its visual Designer, Amethyst also has powerful editing features includes code folding , extensive ActionScript syntax coloring options and user-configurable code formatting. It provides fast IntelliSense and a superset of the refactoring capabilities provided as standard for C#. It also has a powerful ‘multi-process’ debugger which gives programmers the ability to debug multiple separately compiled programs (Flash SWFs) simultaneously.

Visual Designer

The Amethyst Designer supports Adobe’s Flex 3, Flex 4 and AIR frameworks. It integrates fully with the Visual Studio tools such as the Toolbox, the Layout toolbar, the Properties panel and the code editor so that users can easily create and edit Flash-based user interfaces inside Visual Studio.

IntelliSense

Amethyst supports all the standard IntelliSense features including code completion, snippets (code templates), navigation bars to find methods and classes in the current code file plus Go To Definition and Find All References to locate references to classes, variables and methods throughout an entire project.

Refactoring

Amethyst supplies a range of automatic refactoring options (to help restructure the user’s code) including: Rename, Auto-generate getter and setter methods (‘encapsulate field’), Extract code into a new method, Move a class to a new package, Promote local variable to parameter, Remove parameters and Reorder parameters. All suggested refactoring changes can be previewed prior to starting a refactoring operation.

Integration with Adobe Tools

Amethyst can import projects created by Flex Builder, Flash Builder or the Flash IDE (CS3, CS4, CS5), so that teams of developers can work on a shared codebase. When a project is shared with the Flash IDE, animators may use Flash’s timeline-based development while programmers have access to the advanced editing and debugging tools of Amethyst.

Debugging

The unique ‘Amethyst Cylon’ debugger supports simple breakpoints, conditional breakpoints and ‘break on hitcount’. It integrates with the Visual Studio debugging windows including the Watch windows, the Call Stack and the Immediate window. Programmers are able to evaluate expressions interactively in the Immediate window. The Amethyst Cylon debugger provides multi-process debugger including ‘listen and attach’ to enable the debugging of multiple compiled files (SWFs) simultaneously. When the debugger is in ‘listen’ mode it will auto-attach to one or more SWFs when they are loaded so that the programmer can debug by stepping out of one program into a different one in a single debugging session.

Note that you may male installations of Amethyst for VS2008 and VS2010 onto the same system (they coexist fine). It requires a commercial edition of Visual Studio as Microsoft does not permit 3rd party languages in the Express editions.

There are quite a number of tutorials here:

http://www.sapphiresteel.com/Tutorials/Amethyst-Tutorials/article/amethyst-tutorials-index

The best one to start with is this one which summarises the essential features:

http://www.youtube.com/watch?v=UYFV0tRhbfw

It is also possible to install Amethyst into the free Visual Studio Shell edition:

http://www.microsoft.com/downloads/details.aspx?FamilyID=40646580-97FA-4698-B65F-620D4B4B1ED7&displaylang=en

I've read a comment on a solution of mine published on the Adobe Cookbook (as part of O'Reilly's Flex 4 Cookbook):

Adding a drop shadow to a custom chrome window

I've updated the example and tested it against Flash Builder 4 and AIR 2.0 SDK.

Problem

You want to add a drop shadow to the border of a window that has custom chrome applied.

Solution

Pass a DropShadowFilter instance to the filters Array of the NativeWindow instance, or set the dropShadowEnabled and dropShadowColor styles.

Detailed explanation

A window that has custom chrome applied can have a drop shadow around its borders. This window can be your main application window or any other window in the application. When you want to add a shadow around your main application window, make sure to set the transparency of this window using the systemChrome and transparent attributes in the application descriptor file:

<systemChrome>none</systemChrome> 

<transparent>true</transparent>

You can then add a drop shadow to your window in two ways. The first way is to instantiate a DropShadowFilter (a subclass of the BitmapFilter class) object and set the properties you want for the drop shadow. Every DisplayObject has a filters Array property where you can store BitmapFilter instances you want to use on that DisplayObject. For the DropShadowFilter, you can define many properties, such as color, alpha, blurX, blurY, distance, and angle, to customize the look and feel of your drop shadow.The following example is a basic AIR application with custom chrome applied (Figure 20-1). Actually, the chrome consists of just three Canvas components from the Flex Framework.

The drop shadow is configured as follows:

shadowFilter = new DropShadowFilter();

shadowFilter.color = 0xFF0000;

shadowFilter.alpha = 0.75;

shadowFilter.blurX = 5;

shadowFilter.blurY = 5;

shadowFilter.distance = 5;

shadowFilter.angle = 90;

To cast the drop shadow on the window's transparent background, assign the shadowFilter instance to the filters Array of the WindowedApplication instance. In this example, the keyword refers to the WindowedApplication instance:

this.filters = [shadowFilter];

Here is the complete MXML code for the example:

<?xml version="1.0" encoding="utf-8"?> 

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 

         xmlns:s="library://ns.adobe.com/flex/spark" 

         xmlns:mx="library://ns.adobe.com/flex/mx" 

         applicationComplete="init()" 

         backgroundAlpha="0" 

         showStatusBar="false" 

         title="Main window"> 

  <s:layout> 

      <s:BasicLayout/> 

  </s:layout> 

  <fx:Declarations> 

      <!-- Place nonvisual elements (e.g., services, value objects) here --> 

  </fx:Declarations> 

  <fx:Style> 

      @namespace "library://ns.adobe.com/flex/spark"; 

      WindowedApplication { 

    padding-right:"5"; 

    padding-left:"5"; 

    padding-top:"5"; 

    padding-bottom:"5"; 

    show-flex-chrome:false; 

      } 

      BorderContainer.BgCanvas { 

    background-color:"0xE6E6E6"; 

    border-style:solid; 

    border-color:"0xFFFFFF"; 

    border-thickness:10; 

    corner-radius:20; 

      } 

  </fx:Style> 

  <fx:Script> 

      <![CDATA[ 

    import flash.display.NativeWindowSystemChrome; 

    import flash.filters.DropShadowFilter; 

    import flash.filters.BitmapFilterQuality; 

    private var shadowFilter:DropShadowFilter; 

    private function init() : void 

    { 

        stage.addEventListener( MouseEvent.MOUSE_DOWN, onMouseDown ); 

        var color:Number = 0x000000; 

        var angle:Number = 45; 

        var alpha:Number = 0.5; 

        var blurX:Number = 6; 

        var blurY:Number = 6; 

        var distance:Number = 10; 

        var strength:Number = 0.65; 

        var inner:Boolean = false; 

        var knockout:Boolean = false; 

        var quality:Number = BitmapFilterQuality.HIGH; 

        shadowFilter =  new DropShadowFilter(distance, 

      angle, 

      color, 

      alpha, 

      blurX, 

      blurY, 

      strength, 

      quality, 

      inner, 

      knockout); 

        applyShadow(this.bgWindow); 

    } 

    private function applyShadow(comp:DisplayObject):void 

    { 

        comp.filters = [this.shadowFilter]; 

    } 

    private function closeWindow( event : MouseEvent ) : void 

    { 

        this.nativeWindow.close(); 

    } 

    private function onMouseDown( event : MouseEvent ) : void 

    { 

        this.nativeWindow.startMove(); 

    } 

      ]]> 

  </fx:Script> 

  <s:BorderContainer styleName="BgCanvas" id="bgWindow" 

         right="20" 

         bottom="20" 

         top="20" 

         left="20"> 

      <s:HGroup y="0" 

       right="15" 

       left="5" 

       verticalAlign="middle" 

       direction="ltr" 

       width="100%"> 

    <mx:Spacer width="100%"/> 

    <mx:LinkButton label="close" 

          click="closeWindow(event)"/> 

      </s:HGroup> 

      <s:Label text="I can have a drop shadow " 

      horizontalCenter="0" 

      verticalCenter="0" 

      fontSize="12"/> 

  </s:BorderContainer> 

</s:WindowedApplication>

This Flex Addon is a serious plugin for who is using Spring Roo in enterprise enviroment.

Have a look at the Flex Addon documentation:

Spring Roo brings brings a whole new level of productivity to building Java applications. From the Spring Roo Reference Guide:

"Spring Roo is an easy-to-use productivity tool for rapidly building enterprise applications in the Java programming language. It allows you to build high-quality, high-performance, lock-in-free enterprise applications in just minutes. Best of all, Roo works alongside your existing Java knowledge, skills and experience. You probably won't need to learn anything new to use Roo, as there's no new language or runtime platform needed. You simply program in your normal Java way and Roo just works, sitting in the background taking care of the things you don't want to worry about."

To learn more about Spring Roo itself, you'll find numerous resources from the project's homepage at http://www.springsource.org/roo

The Flex Addon for Spring Roo aims to raise the bar for developer productivity in building Spring-based RIAs with a Flex client by meeting the following goals:

1. Provide the fastest way to get a Spring project configured to use Spring BlazeDS Integration set up and running.
2. Eliminate the need to manually perform repetitive tasks such as keeping ActionScript and Java domain objects in sync.
3. Automate round-tripping code-generation of Flex artifacts with a focus on letting developers do what they do best - write code.

I've read a comment on a solution of mine published on the Adobe Cookbook (as part of O'Reilly's Flex 4 Cookbook):

Adding a drop shadow to a custom chrome window

I've updated the example and tested it against Flash Builder 4 and AIR 2.0 SDK.

Problem

You want to add a drop shadow to the border of a window that has custom chrome applied.

Pass a DropShadowFilter instance to the filters Array of the NativeWindow instance, or set the dropShadowEnabled and dropShadowColor styles.

A window that has custom chrome applied can have a drop shadow around its borders. This window can be your main application window or any other window in the application. When you want to add a shadow around your main application window, make sure to set the transparency of this window using the systemChrome and transparent attributes in the application descriptor file:

<systemChrome>none</systemChrome> 
<transparent>true</transparent>

You can then add a drop shadow to your window in two ways. The first way is to instantiate a DropShadowFilter (a subclass of the BitmapFilter class) object and set the properties you want for the drop shadow. Every DisplayObject has a filters Array property where you can store BitmapFilter instances you want to use on that DisplayObject. For the DropShadowFilter, you can define many properties, such as color, alpha, blurX, blurY, distance, and angle, to customize the look and feel of your drop shadow.The following example is a basic AIR application with custom chrome applied (Figure 20-1). Actually, the chrome consists of just three Canvas components from the Flex Framework.

Figure 20-1. A custom chrome window. 

The drop shadow is configured as follows:

1shadowFilter = new DropShadowFilter();

2shadowFilter.color = 0xFF0000;

3shadowFilter.alpha = 0.75;

4shadowFilter.blurX = 5;

5shadowFilter.blurY = 5;

6shadowFilter.distance = 5;

7shadowFilter.angle = 90;

To cast the drop shadow on the window's transparent background, assign the shadowFilter instance to the filters Array of the WindowedApplication instance. In this example, the keyword refers to the WindowedApplication instance:

this.filters = [shadowFilter];

Here is the complete MXML code for the example:

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         applicationComplete="init()" 
         backgroundAlpha="0" 
         showStatusBar="false" 
         title="Main window"> 
   
  <s:layout> 
    
   <s:BasicLayout/> 
    
  </s:layout> 
   
  <fx:Declarations> 
    
   <!-- Place nonvisual elements (e.g., services, value objects) here --> 
    
  </fx:Declarations> 
   
  <fx:Style> 
  
   @namespace "library://ns.adobe.com/flex/spark"; 
    
   WindowedApplication { 
     
    padding-right:"5"; 
     
    padding-left:"5"; 
     
    padding-top:"5"; 
     
    padding-bottom:"5"; 
     
    show-flex-chrome:false; 
     
   } 
    
   BorderContainer.BgCanvas { 
     
    background-color:"0xE6E6E6"; 
     
    border-style:solid; 
     
    border-color:"0xFFFFFF"; 
     
    border-thickness:10; 
     
    corner-radius:20; 
  
     
   } 
    
  </fx:Style> 
   
   
  <fx:Script> 
  
   <![CDATA[ 
    import flash.display.NativeWindowSystemChrome; 
    import flash.filters.DropShadowFilter; 
    import flash.filters.BitmapFilterQuality; 
     
    private var shadowFilter:DropShadowFilter; 
     
    private function init() : void 
    { 
      
     stage.addEventListener( MouseEvent.MOUSE_DOWN, onMouseDown ); 
  
     var color:Number = 0x000000; 
     var angle:Number = 45; 
     var alpha:Number = 0.5; 
     var blurX:Number = 6; 
     var blurY:Number = 6; 
     var distance:Number = 10; 
     var strength:Number = 0.65; 
     var inner:Boolean = false; 
     var knockout:Boolean = false; 
     var quality:Number = BitmapFilterQuality.HIGH; 
      
     shadowFilter =  new DropShadowFilter(distance, 
      angle, 
      color, 
      alpha, 
      blurX, 
      blurY, 
      strength, 
      quality, 
      inner, 
      knockout); 
      
     applyShadow(this.bgWindow); 
      
    } 
     
    private function applyShadow(comp:DisplayObject):void 
    { 
     comp.filters = [this.shadowFilter]; 
    } 
     
    private function closeWindow( event : MouseEvent ) : void 
    { 
      
     this.nativeWindow.close(); 
      
    } 
     
    private function onMouseDown( event : MouseEvent ) : void 
    { 
      
     this.nativeWindow.startMove(); 
      
    } 
   ]]> 
    
  </fx:Script> 
   
  <s:BorderContainer styleName="BgCanvas" id="bgWindow" 
         right="20" 
         bottom="20" 
         top="20" 
         left="20"> 
    
   <s:HGroup y="0" 
       right="15" 
       left="5" 
       verticalAlign="middle" 
       direction="ltr" 
       width="100%"> 
     
    <mx:Spacer width="100%"/> 
     
    <mx:LinkButton label="close" 
          click="closeWindow(event)"/> 
     
   </s:HGroup> 
    
   <s:Label text="I can have a drop shadow " 
      horizontalCenter="0" 
      verticalCenter="0" 
      fontSize="12"/> 
    
  </s:BorderContainer> 
   
</s:WindowedApplication>