Packaging components
Requirements
User level
All
Required products
- Flex (Download trial)
One way to distribute your components to other developers is as MXML or ActionScript files. You set them up in the directory structure that matches the package structure, and you compress them into an archive format such as PKZip. The consumers of your components expand that archive into their development environment and use those components in their applications. The downside to this is that they have the source code and source files for your components, and your components are uncompiled.
The alternative method of distributing components is to package your components as a SWC file or as part of a Runtime Shared Library (RSL). The benefits to doing this include ease-of-deployment, run-time efficiency and security.
A SWC file is an archive file for Flex components. SWC files make it easy to exchange components among Flex developers. You need only exchange a single file, rather than several MXML and ActionScript files, images, and other resource files. Also, the SWF file inside a SWC file is compiled, which means that the code is obfuscated from casual view.
SWC files can contain one or more components and are packaged and expanded with the PKZip archive format. You can open and examine a SWC file by using WinZip, JAR, or another archiving tool. However, you should not manually change the contents of a SWC file, and you should not try to run the SWF file that is in a SWC file outside of a SWC file.
This Quick Start covers the following topics:
Creating SWC files
To create a SWC file with the Flex SDK, use the compc command-line utility in the flex_install_dir/bin directory. The compc utility generates a SWC file from MXML component source files and/or ActionScript component source files.
When you use the compc compiler to create a SWC file, you can include any number of components. When you use components from that SWC file in your Flex applications, the mxmlc compiler includes only those components that are used by your application, and dependent classes, in the final SWF file.
To start, create a folder called QuickStartLibrary. In it, create a folder named components and place the following custom component classes in the components folder.
Example
components/AddressFormAlert.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- components/AddressFormAlert.mxml -->
<mx:Form xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:custom="components.*">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function submitButton_clickHandler(event:MouseEvent):void
{
// Compose a string to display the contents of the value object to the user.
var msg:String = "You submitted the following information: \r";
msg += "Name" + ": " + nameInput.text + "\r";
msg += "Street" + ": " + street.text + "\r";
msg += "City" + ": " + city.text + "\r";
msg += "State/County" + ": " + state.text + "\r";
msg += "Country" + ": " + country.selectedItem + "\r";
// Display the contents of the address form to the user.
Alert.show(msg, "Thank you for submitting the form!");
}
]]>
</fx:Script>
<mx:FormItem label="Name">
<s:TextInput id="nameInput"/>
</mx:FormItem>
<mx:FormItem label="Street">
<s:TextInput id="street"/>
</mx:FormItem>
<mx:FormItem label="City">
<s:TextInput id="city"/>
</mx:FormItem>
<mx:FormItem label="State/County">
<s:TextInput id="state"/>
</mx:FormItem>
<mx:FormItem label="Country">
<custom:CountryComboBoxSimpleMXML id="country"/>
</mx:FormItem>
<mx:Button id="submitButton"
label="submit"
click="submitButton_clickHandler(event)"/>
</mx:Form>
components/PaddedPanel.as
// components/PaddedPanel.as
package components
{
import spark.components.Panel;
public class PaddedPanel extends Panel
{
public function PaddedPanel()
{
// Call the constructor of the superclass.
super();
// Set the border styles.
setStyle("borderColor", "blue");
setStyle("dropShadowVisible", false);
setStyle("cornerRadius", 20);
}
}
}
components/CountryComboBoxSimpleMXML.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- components/CountryComboBoxSimpleMXML.mxml -->
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:dataProvider>
<s:ArrayList>
<fx:String>United States</fx:String>
<fx:String>United Kingdom</fx:String>
<!-- Add all other countries... -->
</s:ArrayList>
</s:dataProvider>
</s:ComboBox>
To create the SWC file, ensure that the compc compiler is in your system path (if not, add it to the PATH environment variable under your System settings). From the QuickStartLibrary folder, enter the following command:
compc -source-path+=.
-output=bin/QuickStartLibrary.swc
-include-classes components.AddressFormAlert
components.CountryComboBox
components.PaddedPanel
Note: Type the preceding command on a single line. It appears here on multiple lines here for the sake of clarity.
Tip: When you use the compc compiler to create a SWC file, you can include any number of components by using namespaces or a manifest file. This can keep the command line command from becoming long and unwieldly. For more information about using namespaces and manifest files, refer to Using compc, the component compiler.
The source-path option includes the current directory in the source path. This is how compc finds the various classes that are listed in the include-classes option.
The output option specifies the output location of the SWC file. In this case, compc writes the QuickStartLibrary.swc file to a folder named bin.
The include-classes option specifies the classes that you want to include in the SWC file. These are the classes you just defined.
Tip: You can also create SWC files by creating a Flex Library Project in Adobe Flash Builder. For more information, refer to Using Flex Builder 4.
<?xml version="1.0" encoding="utf-8"?>
<!-- DeployingSWC.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:custom="components.*"
width="400" height="310">
<custom:PaddedPanel title="Creating Libraries">
<custom:AddressFormAlert id="addressForm"/>
</custom:PaddedPanel>
</s:Application>
To compile this example using the stand-alone Flex compiler, enter the following command, substituting the location of the QuickStartLibrary.swc file on your system. In this example, the library is in the ../QuickStartLibrary/bin directory.
mxmlc -library-path+=.;../QuickStartLibrary/bin Main.mxml
Because all SWC files in the flex_install_dir/libs directory are added to the compiler's library path by default, you could just put the QuickStartLibrary.swc file in that directory and compile an application that uses those classes.
Result
Tip: You can also add SWC files to your Flash Builder projects. To add your SWC file, select Project > Properties > Flex Build Path. On the Library tab, click the Add SWC button and add the QuickStartLibrary\bin directory to your project. The following image shows the QuickStartLibrary.swc file in the project's library path.
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
