tag:blogger.com,1999:blog-9541129308315447552024-03-05T20:48:44.325-08:00FLEX ExamplesJonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comBlogger602125tag:blogger.com,1999:blog-954112930831544755.post-35230706896892110852010-03-11T02:31:00.000-08:002010-03-11T02:32:18.837-08:00What is Flex?Flex is a convoluted term for sure. As the history of the product has evolved it has been a j2ee server, an as framework, a compiler and and IDE among other things.<br /><br />In todays day and age we are at a released version 3, with version 4 in beta. The term flex typically refers to a way of developing flash platform application using the components in the open source framework developed by adobe.<br /><br />Flex applications are written as a combination of xml markup (mxml) and actionscript much in the same vein that html applications are written with JS. The big difference is that the output of all your mxml and actionscript files is a single swf that can be embedded in a web page and displayed to the world. You can also use Flex to develop AIR applications, applications that can be installed on a users desktop.<br /><br />Although Adobe produces an IDE to help in developing Flex applications it is not a requirement. EverythingJonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-44576039772780478072010-03-11T02:25:00.000-08:002010-03-11T02:28:18.769-08:00Tutorial On Flex 3<span class="Apple-style-span" style=" color: rgb(85, 85, 85); line-height: 14px; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:small;"><h5 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: 13px; line-height: 18px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">Taking Things Further: ActionScript 3.0</span></h5><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">While MXML defines the structure of your Flex application, ActionScript 3.0 defines your application's behaviour.</span></p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">Now, you may be thinking, "Hang on. If I can do so much with MXML, why do I need ActionScript 3.0?" Well here's the confusing part; MXML is actually a pretty form of ActionScript 3.0. In fact, MXML is converted to ActionScript 3.0 when you compile it. Let's look at an example that shows how similar MXML and ActionScript 3.0 are. The following code creates the same component (a Button), first in MXML, and then in ActionScript 3.0:</span></p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><code style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); font-size: 15px; font-family: 'Courier New', Courier, mono; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;"> <br /></span><mx:application mx="http://www.adobe.com/2006/mxml" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;"> layout="absolute" creationComplete="init()"> <br /></span> <mx:button label="This one is done by MXML" x="10" y="10"><span class="Apple-style-span" style="color:#FFFFCC;"> </span><mx:script><span class="Apple-style-span" style="color:#FFFFCC;"> <br /><br /></span> </mx:script><span class="Apple-style-span" style="color:#FFFFCC;"> <br /></span></mx:button></mx:application></code></p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">The application that results when you compile this file will look like this:</span></p><div><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">You still need to use ActionScript in your application, however; you'll need to define what happens when that button is clicked, for example. Look at it in this way: you design your application with MXML, and you make it work with ActionScript 3.0. By using MXML and ActionScript, you're separating the structural code from the programming logic. This is an important philosophy to remember when building Flex applications -- especially when you're building complex components down the track.</span></p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">ActionScript 3.0 is an ECMAScript-based scripting language, which means that it adopts the ECMA scripting language standards. ActionScript 3.0 is a giant leap forward from is predecessor, ActionScript 2.0. The reason for this is that ActionScript 3.0 is now a truly object oriented programming (OOP) language. In fact, the entire framework of Flex is made up of object classes that have been written by Adobe.</span></p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">If you want to develop complex RIAs, I'd recommend that you invest some time in understanding OOP. Most of the programming done in Flex is event-driven, which means that functions are run when a component triggers an event (for example, when a mouse clicks a button on the page). The </span><a class="sublink" href="http://livedocs.adobe.com/flex/" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">Adobe Livedocs</span></a><span class="Apple-style-span" style="color:#FFFFCC;"> site has some great examples of object-oriented ActionScript.</span></p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">The full details of ActionScript 3.0 syntax and OOP are beyond the scope of this article, but if you've done any JavaScript programming before, you are certainly well on your way.</span></p><h5 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: 13px; line-height: 18px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">Resources</span></h5><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">Flex 3.0 is rapidly gaining steam; as a result there are some fantastic resources out there for anyone who wants to get started in building RIAs with Flex. Here's a sample:</span></p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "></p><ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 35px; padding-top: 0px; padding-right: 10px; padding-bottom: 8px; padding-left: 10px; list-style-position: inside; "><li style="line-height: 19px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><a class="sublink" href="http://livedocs.adobe.com/flex/" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">Flex Livedocs</span></a></li><li style="line-height: 19px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><a class="sublink" href="http://flex.org/" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">Flex.org</span></a></li><li style="line-height: 19px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><a class="sublink" href="http://tech.groups.yahoo.com/group/flexcoders/" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">FlexCoders</span></a></li><li style="line-height: 19px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><a class="sublink" href="http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">Open Source Flex</span></a></li><li style="line-height: 19px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><a class="sublink" href="http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=2" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">The Flex CookBook</span></a></li><li style="line-height: 19px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><a class="sublink" href="http://learn.adobe.com/wiki/display/Flex/Getting+Started" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">Flex 3 Getting Started</span></a></li></ul></div></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-34272188794428490492010-03-11T02:24:00.000-08:002010-03-11T02:25:07.602-08:00Flex 3 Tutorials<b>With Web users expecting richer and more complex interfaces, Rich Internet Applications (RIAs) are seeing a huge increase in popularity. Adobe Flex is the tool of choice for many web developers when it comes to building RIAs.</b><br /><br />Flex used to be one of those technologies that was only used by large corporate organisations -- the first release of Flex was priced at around US$15,000 per CPU (a tad expensive for most developers) Since then, Flex has been released as open source software. Talk about a complete turnaround!<br /><br />Flex is now in version 3.0, and runs on the Adobe Flash Player 9 runtime. Flex 3.0 has been such a success that Flex 4.0 has been announced for release in 2009. As a developer, getting in early and learning all you can now is a good idea -- standing out in the Flex community will soon become extremely difficult.<br /><br />Developers are picking up Flex with great speed. One of the reasons for this is that Flex programming is relatively easy to learn if you're already familiar with XHTML. Of course, there's always a transition period when you're getting used to a new environment, but learning Flex won't take long!<br /><br />Another drawcard is that Flex applications can be developed to run on a user's desktop thanks to the wonders of the Adobe AIR (Adobe Integrated Runtime) platform. Now you can develop and launch an RIA that runs in a web browser and as a desktop application. Deploying an application to a user's desktop with Adobe AIR is easy -- all that users need to do is click a link in the web browser to install the AIR runtime and your RIA on their machine. Now that's quick deployment!<br />he first thing you'll notice is that MXML is an XML format. To indicate to the Flex compiler that we're defining an application, we use the <mx:application> element, in the same way we use the tags to define a web page. We can then add other elements within the <mx:application> tag. In the above example, we've added a <mx:button> tag to create a button, just as we'd use an <input type="button"> tag in a web page form.<br /><br />As you can see, this is all very similar to constructing a traditional web page, and the framework provides you with everything you might use in XHTML (buttons, lists, etc.) and more. All you have to learn is the properties, methods and the names of the components in the framework, all of which are available from the Adobe Flex 3 language reference.</mx:button></mx:application></mx:application>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-28302767312637993092010-03-11T02:21:00.000-08:002010-03-11T02:23:47.170-08:00Why Use Flex?<span class="Apple-style-span" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: small; color: rgb(85, 85, 85); line-height: 14px; "><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If you're considering building a RIA, you have a few choices of technology, including Flex, Ajax, and Microsoft Silverlight. If you look at these options objectively, the development effort required for each (and the resulting user experience) is roughly the same. One of the benefits of Flex is its reach -- the Adobe Flash Player, upon which Flex applications run, is already installed on about a billion computers wordwide!</p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Of course, Ajax also uses technologies that are installed on almost every computer in the world -- JavaScript, XHTML, and CSS. One of the downfalls of Ajax, however, is that cross-browser compatibility can be difficult to achieve. What might work in one browser (for example, Firefox) might not work in another (such as Internet Explorer), so the debugging process has the potential to become difficult and long-winded.</p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Microsoft Silverlight, on the other hand, is similar to Flex in that it runs on a browser plugin. Silverlight, however, has yet to reach the installed userbase of the Flash player.</p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If you're just starting out with building RIAs, you should definitely try all of them to see which one you like best and find easiest to work with -- each of Flex, Silverlight and Ajax has its advantages and disadvantages. In my opinion, though, Flex is definitely the best RIA development technology available. Additionally, if you're a fan of the Adobe Creative Suite, it's good to know that many of these tools (Flash, Photoshop, Illustrator, Fireworks and so on) have Flex component integration built into them, which is a bonus no matter how you look at it.</p><h5 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: 13px; line-height: 18px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; ">Overview of the Flex Framework</h5><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">A lot of people steer clear of the Flex framework because they think it's complicated. But generally speaking, a framework is just a set of reusable classes that can work together to provide a base for an application.</p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Take a house as an analogy: every house on the planet has a framework. Each house has a foundation and walls, and those walls can't stand without the foundation. Once the foundation has been laid and the walls are up, a roof can be applied and the interior designed and implemented, while work continues on the initial foundation.</p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If we apply this analogy to the Flex framework, we have a stack of logic -- the controller logic -- that has been made available for communicating with a database, handling security, writing to the file system, and so on. There are also the user interface elements -- buttons, canvases, dropdown lists, and so on. All of these also form the foundation of your Flex application -- the concrete slab, the timber beams and the bricks with which to build your house.</p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Flex is easy for web developers to learn because, at its core, it has a lot in common with (X)HTML, CSS, and JavaScript. Suppose you wanted to create a simple web page with a form button. In XHTML you'd type the following:</p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><code style="color: rgb(153, 0, 0); background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); font-size: 15px; font-family: 'Courier New', Courier, mono; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-position: initial initial; background-repeat: initial initial; "><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<br /><html xmlns="http://www.w3.org/1999/xhtml">
<br /> <head>
<br /> <meta equiv="Content-Type" content="text/html; charset=utf-8">
<br /> <title>Button Example</title>
<br /> </head>
<br />
<br /> <body>
<br /> <form method="post" id="example" action="http://www.example.com/">
<br /> <input type="button" name="newButton" id="newButton" value="This is a button" onclick="checkForm()">
<br /> </form>
<br /> </body>
<br /></html></code></p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">When you view this markup in a web browser, you'll see a button displayed with the label "This is a button".</p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img src="http://i2.sitepoint.com/graphics/button.png" height="37" width="119" alt="The XHTML button" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); margin-top: 0px; margin-right: 0px; margin-bottom: 1em; margin-left: 0px; display: block; " /></p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">To display something similar in Flex we use a form of markup called MXML. Here's the MXML markup for our previous example:</p><p style="margin-top: 10px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; line-height: 19px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><code style="color: rgb(153, 0, 0); background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); font-size: 15px; font-family: 'Courier New', Courier, mono; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-position: initial initial; background-repeat: initial initial; "><?xml version="1.0" encoding="utf-8"?>
<br /><mx:application mx="http://www.adobe.com/2006/mxml" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "> layout="absolute">
<br /> <mx:button x="10" y="10" label="This is a button" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">id="newButton"
<br /> click="checkForm()"/>
<br />
<br /></mx:Application></code></p></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-35647923574133149772009-09-01T20:34:00.000-07:002009-09-01T20:36:05.196-07:00What is Flex 4<span class="Apple-style-span" style="color: rgb(17, 17, 17); line-height: 22px; font-size:14px;"><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">For the latest information on the next major release of Flex SDK and Flash Builder 4(codenamed “Gumbo”), check out the Flex 4 page on the Adobe Open Source site: </span><a href="http://opensource.adobe.com/wiki/display/flexsdk/Gumbo" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-decoration: underline; "><span class="Apple-style-span" style="color:#FFFFCC;">http://opensource.adobe.com/wiki/display/flexsdk/Gumbo</span></a><span class="Apple-style-span" style="color:#FFFFCC;">. The Flex 4 page includes the latest milestones, as well as links to the various public specifications. Also, you can check out the Flex 4 page on the Adobe Labs site at </span><a href="http://labs.adobe.com/technologies/gumbo/" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-decoration: underline; "><span class="Apple-style-span" style="color:#FFFFCC;">http://labs.adobe.com/technologies/gumbo/</span></a><span class="Apple-style-span" style="color:#FFFFCC;">.</span></p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">To download nightly builds of the Flex 4 SDK, check out</span><a href="http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-decoration: underline; "><span class="Apple-style-span" style="color:#FFFFCC;">http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4</span></a><span class="Apple-style-span" style="color:#FFFFCC;">.</span></p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">For the latest Flex 4 documentation, check out </span><a href="http://livedocs.adobe.com/flex/gumbo/langref/" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-decoration: underline; "><span class="Apple-style-span" style="color:#FFFFCC;">http://livedocs.adobe.com/flex/gumbo/langref/</span></a><span class="Apple-style-span" style="color:#FFFFCC;"> and</span><a href="http://livedocs.adobe.com/flex/gumbo/html/" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-decoration: underline; "><span class="Apple-style-span" style="color:#FFFFCC;">http://livedocs.adobe.com/flex/gumbo/html/</span></a><span class="Apple-style-span" style="color:#FFFFCC;"> (as well as some Flex 4 beta chapters at the bottom of</span><a href="http://opensource.adobe.com/wiki/display/flexsdk/Gumbo" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-decoration: underline; "><span class="Apple-style-span" style="color:#FFFFCC;">http://opensource.adobe.com/wiki/display/flexsdk/Gumbo</span></a><span class="Apple-style-span" style="color:#FFFFCC;">).</span></p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">If you think you’ve found a bug in the Flex SDK or in Flex Builder (any versions), you can file a bug in the public bug base at</span><a href="http://bugs.adobe.com/flex/" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-decoration: underline; "><span class="Apple-style-span" style="color:#FFFFCC;">http://bugs.adobe.com/flex/</span></a><span class="Apple-style-span" style="color:#FFFFCC;">.</span></p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; "><span class="Apple-style-span" style="color:#FFFFCC;">For a list of Flex 4 specific examples on this blog, check out </span><a href="http://blog.flexexamples.com/tag/gumbo/" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-decoration: underline; "><span class="Apple-style-span" style="color:#FFFFCC;">http://blog.flexexamples.com/tag/gumbo/</span></a><span class="Apple-style-span" style="color:#FFFFCC;">.</span></p><p class="alert" style="padding-top: 0.571em; padding-right: 0.786em; padding-bottom: 0.571em; padding-left: 0.786em; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(255, 255, 160); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(229, 229, 151); border-right-color: rgb(229, 229, 151); border-bottom-color: rgb(229, 229, 151); border-left-color: rgb(229, 229, 151); background-position: initial initial; "><span class="Apple-style-span" style="color:#006600;">Want a </span><em style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><span class="Apple-style-span" style="color:#006600;">free</span></em><span class="Apple-style-span" style="color:#006600;"> version of Flex Builder 3? Check out </span><a href="https://freeriatools.adobe.com/" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-decoration: underline; "><span class="Apple-style-span" style="color:#006600;">https://freeriatools.adobe.com/</span></a><span class="Apple-style-span" style="color:#006600;"> and see if you qualify! Then, head over to the </span><a href="https://freeriatools.adobe.com/flashbuilder4beta/" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-decoration: underline; "><span class="Apple-style-span" style="color:#006600;">Adobe Flash Builder 4 Beta Extension Request</span></a><span class="Apple-style-span" style="color:#006600;"> site to request a Flash Builder 4 beta serial number. (Flash Builder 4 beta extension serial numbers are available for all licensed Flex Builder 3 customers. This includes all commercial and education serial numbers.)</span></p></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-38969391395189592632009-09-01T20:31:00.000-07:002009-09-01T20:34:15.962-07:00Setting tab stops on RichText control in Flex 4<span class="Apple-style-span" style="color: rgb(17, 17, 17); font-size: 14px; line-height: 22px; "><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; ">You can also set tabs in a RichText control by setting the <code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 1em; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.929em; background-position: initial initial; ">text</code> property and using \t, as seen in the following example:</p><div class="wp_syntax" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; color: rgb(17, 0, 0); background-color: rgb(249, 249, 249); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: silver; border-right-color: silver; border-bottom-color: silver; border-left-color: silver; overflow-x: auto; overflow-y: hidden; width: 780px; "><div class="code" style="padding-top: 2px; padding-right: 4px; padding-bottom: 2px; padding-left: 4px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; vertical-align: top; "><pre class="mxml" style="padding-top: 0.667em; padding-right: 0.917em; padding-bottom: 0.667em; padding-left: 0.917em; margin-top: 0px; margin-right: 0px; margin-bottom: 1.833em; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); overflow-x: visible; overflow-y: visible; clear: none; width: auto; float: none; font-size: 0.857em; line-height: 1.5em; white-space: pre; font-family: monospace; background-position: initial initial; "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><?xml version=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"1.0"</span> encoding=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"utf-8"</span>?<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:application</span> name=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"Spark_RichText_tabStops_test"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> xmlns:fx=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"http://ns.adobe.com/mxml/2009"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> xmlns:s=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"library://ns.adobe.com/flex/spark"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> xmlns:mx=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"library://ns.adobe.com/flex/halo"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:controlbarcontent</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><mx:form</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><mx:formitem</span> label=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"direction:"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:dropdownlist</span> id=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"dropDownList"</span> requireSelection=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"true"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:dataprovider</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:arraylist</span> source=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"[ltr,rtl]"</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:dataProvider</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:DropDownList</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></mx:FormItem</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></mx:Form</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:controlBarContent</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:panel</span> title=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"Spark RichText tabStops/tab test"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> horizontalCenter=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"0"</span> verticalCenter=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"0"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><mx:vrule</span> x=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"100"</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><mx:vrule</span> x=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"200"</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><mx:vrule</span> x=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"300"</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:richtext</span> id=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"richTxt"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> text=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"Col 1{'\t'}Col 2{'\t'}Col 3{'\t'}Col 4"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> direction=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"{dropDownList.selectedItem}"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> tabStops=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"100 200 300"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> paragraphSpaceAfter=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"20"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> width=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"400"</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:Panel</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:Application</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span></pre></div></div><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; ">Due to popular demand, here is the “same” example in a more ActionScript friendly format:</p><div class="wp_syntax" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; color: rgb(17, 0, 0); background-color: rgb(249, 249, 249); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: silver; border-right-color: silver; border-bottom-color: silver; border-left-color: silver; overflow-x: auto; overflow-y: hidden; width: 780px; "><div class="code" style="padding-top: 2px; padding-right: 4px; padding-bottom: 2px; padding-left: 4px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; vertical-align: top; "><pre class="mxml" style="padding-top: 0.667em; padding-right: 0.917em; padding-bottom: 0.667em; padding-left: 0.917em; margin-top: 0px; margin-right: 0px; margin-bottom: 1.833em; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); overflow-x: visible; overflow-y: visible; clear: none; width: auto; float: none; font-size: 0.857em; line-height: 1.5em; white-space: pre; font-family: monospace; background-position: initial initial; "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><?xml version=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"1.0"</span> encoding=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"utf-8"</span>?<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:application</span> name=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"Spark_RichText_tabStops_test"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> xmlns:fx=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"http://ns.adobe.com/mxml/2009"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> xmlns:s=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"library://ns.adobe.com/flex/spark"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> xmlns:mx=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"library://ns.adobe.com/flex/halo"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> initialize=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"init();"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><fx:script</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><!<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">[</span>CDATA<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">[</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> import flashx.textLayout.formats.Direction;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> import mx.collections.ArrayList;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> import mx.containers.Form;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> import mx.containers.FormItem;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> import mx.controls.VRule;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> import mx.core.FlexGlobals;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> import spark.components.DropDownList;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> import spark.components.Panel;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> import spark.events.IndexChangeEvent;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> import spark.primitives.RichText;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> private var dropDownList:DropDownList;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> private var pnl:Panel;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> private var richTxt:RichText;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> private function init<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>:void <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">{</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> dropDownList = new DropDownList<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> dropDownList.dataProvider = new ArrayList<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">[</span>Direction.LTR, Direction.RTL<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">]</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> dropDownList.requireSelection = true;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> dropDownList.addEventListener<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span>IndexChangeEvent.CHANGE, dropDownList_change<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> var formItem:FormItem = new FormItem<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> formItem.label = <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"direction:"</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> formItem.addElement<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span>dropDownList<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> var form:Form = new Form<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> form.addElement<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span>formItem<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> Application<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span>FlexGlobals.topLevelApplication<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>.controlBarContent = <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">[</span>form<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">]</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> richTxt = new RichText<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> richTxt.text = <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"Col 1\tCol 2\tCol 3\tCol 4"</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> richTxt.setStyle<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"tabStops"</span>, <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"100 200 300"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> richTxt.setStyle<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"paragraphSpaceAfter"</span>, <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(204, 102, 204); ">20</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> richTxt.width = <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(204, 102, 204); ">400</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> var vRule1:VRule = new VRule<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> vRule1.x = <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(204, 102, 204); ">100</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> var vRule2:VRule = new VRule<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> vRule2.x = <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(204, 102, 204); ">200</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> var vRule3:VRule = new VRule<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> vRule3.x = <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(204, 102, 204); ">300</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> pnl = new Panel<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> pnl.title = <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"Spark RichText tabStops/tab test"</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> pnl.horizontalCenter = <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(204, 102, 204); ">0</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> pnl.verticalCenter = <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(204, 102, 204); ">0</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> pnl.addElement<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span>vRule1<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> pnl.addElement<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span>vRule2<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> pnl.addElement<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span>vRule3<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> pnl.addElement<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span>richTxt<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> addElement<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span>pnl<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">}</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> protected function dropDownList_change<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span>evt:IndexChangeEvent<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>:void <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">{</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> richTxt.setStyle<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">(</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"direction"</span>, dropDownList.selectedItem<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">)</span>;</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">}</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">]</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(102, 204, 102); ">]</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></fx:Script</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:Application</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span></pre></div></div><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; ">The following example shows how you can use tab stops on a Spark RichText primitive in Flex 4 by setting the <code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 1em; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.929em; background-position: initial initial; ">tabStops</code> style.</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; ">Full code after the jump.</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; "><span id="more-1754" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></span></p><p class="alert" style="padding-top: 0.571em; padding-right: 0.786em; padding-bottom: 0.571em; padding-left: 0.786em; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(255, 255, 160); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(229, 229, 151); border-right-color: rgb(229, 229, 151); border-bottom-color: rgb(229, 229, 151); border-left-color: rgb(229, 229, 151); background-position: initial initial; ">The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, .</p><div class="wp_syntax" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; color: rgb(17, 0, 0); background-color: rgb(249, 249, 249); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: silver; border-right-color: silver; border-bottom-color: silver; border-left-color: silver; overflow-x: auto; overflow-y: hidden; width: 780px; "><div class="code" style="padding-top: 2px; padding-right: 4px; padding-bottom: 2px; padding-left: 4px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; vertical-align: top; "><pre class="mxml" style="padding-top: 0.667em; padding-right: 0.917em; padding-bottom: 0.667em; padding-left: 0.917em; margin-top: 0px; margin-right: 0px; margin-bottom: 1.833em; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); overflow-x: visible; overflow-y: visible; clear: none; width: auto; float: none; font-size: 0.857em; line-height: 1.5em; white-space: pre; font-family: monospace; background-position: initial initial; "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><?xml version=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"1.0"</span> encoding=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"utf-8"</span>?<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:application</span> name=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"Spark_RichText_tabStops_test"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> xmlns:fx=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"http://ns.adobe.com/mxml/2009"</span> </span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> xmlns:s=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"library://ns.adobe.com/flex/spark"</span> </span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> xmlns:mx=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"library://ns.adobe.com/flex/halo"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:controlbarcontent</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><mx:form</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><mx:formitem</span> label=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"direction:"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:dropdownlist</span> id=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"dropDownList"</span> requireSelection=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"true"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:dataprovider</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:arraylist</span> source=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"[ltr,rtl]"</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:dataProvider</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:DropDownList</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></mx:FormItem</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></mx:Form</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:controlBarContent</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:panel</span> title=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"Spark RichText tabStops/tab test"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> horizontalCenter=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"0"</span> verticalCenter=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"0"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><mx:vrule</span> x=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"100"</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><mx:vrule</span> x=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"200"</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><mx:vrule</span> x=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"300"</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:richtext</span> id=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"richTxt"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> direction=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"{dropDownList.selectedItem}"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> tabStops=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"100 200 300"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> paragraphSpaceAfter=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"20"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> width=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"400"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:content</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:p</span> direction=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"ltr"</span> fontWeight=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"bold"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span>0px<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:tab</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span>100px<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:tab</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span>200px<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:tab</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span>300px<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:p</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:p</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span>Col 1<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:tab</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span>Col 2<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:tab</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span>Col 3<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:tab</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span>Col 4<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:p</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:content</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:RichText</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:Panel</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:Application</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span></pre></div></div><p class="information" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; "><iframe src="http://blog.flexexamples.com/wp-content/uploads/spark/Spark_RichText_tabStops_test/bin/main.html" width="100%" height="350" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></iframe></p></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-83277042260897363562009-09-01T20:27:00.000-07:002009-09-01T20:31:06.967-07:00Creating full-screen Flex applications<span class="Apple-style-span" style="color: rgb(17, 17, 17); font-size: 14px; line-height: 22px; "><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; ">Full-Screen Mode in Flex. I’ve seen this appear a few times in the bugbase and on lists, but here is some simple code to let you toggle between “full screen mode” and “normal mode” in a Flex application. Note that in this example I’m listening for the <code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 1em; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.929em; background-position: initial initial; ">applicationComplete</code> event in the main <mx:application> tag instead of the<code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 1em; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.929em; background-position: initial initial; ">creationComplete</code> event. The <code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 1em; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.929em; background-position: initial initial; ">applicationComplete</code> tag is called slightly after the <code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 1em; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.929em; background-position: initial initial; ">creationComplete</code> event, after the Application has been completely initialized.</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; ">If you try and access the <code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 1em; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.929em; background-position: initial initial; ">Application.application.stage</code> property from the <code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 1em; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.929em; background-position: initial initial; ">creationComplete</code> event, you’ll get a run-time error (RTE) saying the following:</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; "></p><pre class="code" lang="actionscript" style="padding-top: 0.667em; padding-right: 0.917em; padding-bottom: 0.667em; padding-left: 0.917em; margin-top: 0px; margin-right: 0px; margin-bottom: 1.833em; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); overflow-x: auto; overflow-y: auto; clear: both; font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.857em; line-height: 1.5em; background-position: initial initial; "><?xml version="1.0" encoding="utf-8"?> <mx:application mx="http://www.adobe.com/2006/mxml" layout="vertical" applicationcomplete="init(event)"> <mx:script> <![CDATA[ import flash.display.StageDisplayState; private function init(evt:Event):void { /* Set up full screen handler. */ Application.application.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler); dispState = Application.application.stage.displayState; } private function fullScreenHandler(evt:FullScreenEvent):void { dispState = Application.application.stage.displayState + " (fullScreen=" + evt.fullScreen.toString() + ")"; if (evt.fullScreen) { /* Do something specific here if we switched to full screen mode. */ } else { /* Do something specific here if we switched to normal mode. */ } } private function toggleFullScreen():void { try { switch (Application.application.stage.displayState) { case StageDisplayState.FULL_SCREEN: /* If already in full screen mode, switch to normal mode. */ Application.application.stage.displayState = StageDisplayState.NORMAL; break; default: /* If not in full screen mode, switch to full screen mode. */ Application.application.stage.displayState = StageDisplayState.FULL_SCREEN; break; } } catch (err:SecurityError) { // ignore } } ]]> </mx:Script> <mx:string id="dispState"> <mx:label text="width={Application.application.width}"> <mx:label text="height={Application.application.height}"> <mx:label text="displayState={dispState}"> <mx:button label="Toggle fullscreen" click="toggleFullScreen()"> </mx:Application></pre><p></p></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-34409749882131994642009-08-25T11:46:00.000-07:002009-08-25T11:47:38.847-07:00Adobe Flex 4 SDK<span class="Apple-style-span" style="font-family: Arial; font-size: 12px; line-height: 12px; "><p style="font-size: 1em; line-height: 1.35em; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; word-wrap: break-word; ">Welcome to the Adobe Flex® 4 SDK beta release on Adobe Labs (previously code named Gumbo). This release marks an expanded role for the Flex framework, now supporting both developers creating Flex applications and designers using Adobe® Flash® Catalyst™ to create interaction design.</p><p style="font-size: 1em; line-height: 1.35em; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; word-wrap: break-word; ">You can build great Flex applications using only the Flex 4 SDK and an editor of your choice, or you can use the beta version of Adobe Flash Builder™ 4 (previously named Flex Builder) which includes everything in the Flex 4 SDK within it. This beta release aligns with the public beta releases of both <a href="http://labs.adobe.com/technologies/flashbuilder4/" style="text-decoration: none; color: rgb(0, 136, 17); ">Flash Builder</a> and <a href="http://labs.adobe.com/technologies/flashcatalyst/" style="text-decoration: none; color: rgb(0, 136, 17); ">Flash Catalyst</a>.</p><div class="columns-2-Abb-A" style="padding-top: 0px; padding-right: 8px; padding-bottom: 0px; padding-left: 0px; margin-bottom: 0.5em; float: left; margin-left: 0px; width: 359px; "><p style="font-size: 1em; line-height: 1.35em; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; word-wrap: break-word; ">There are 3 main themes for this release:</p><ul style="list-style-type: disc; list-style-position: outside; list-style-image: initial; margin-left: 0.5em; padding-left: 1.5em; margin-top: 1em; margin-bottom: 1.35em; "><li style="font-size: 1em; line-height: 1.35em; padding-bottom: 0.5em; ">Design in Mind: providing a framework for continuous collaboration between designer and developer</li><li style="font-size: 1em; line-height: 1.35em; padding-bottom: 0.5em; ">Developer Productivity: improving compiler performance and adding productivity enhancements to language features</li><li style="font-size: 1em; line-height: 1.35em; padding-bottom: 0.5em; ">Framework Evolution: taking advantage of new Flash Player capabilities and adding features required by common use-cases</li></ul></div><div class="columns-2-Abb-bb" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 8px; margin-bottom: 0.5em; float: right; margin-right: 0px; width: 175px; "><div class="options-pod" style="margin-top: 0px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: url(http://labs.adobe.com/images/shared/optionspod/labs_r.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; background-position: 100% 100%; "><div class="op-head" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: url(http://labs.adobe.com/images/shared/optionspod/labs_head_r.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; background-position: 100% 0%; "><h3 style="font-size: 1em; line-height: normal; background-color: transparent !important; border-bottom-width: initial; border-bottom-style: none; border-bottom-color: initial; color: rgb(255, 255, 255); margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 2px; padding-right: 8px; padding-bottom: 3px; padding-left: 8px; background-image: url(http://labs.adobe.com/images/shared/optionspod/labs_head_l.gif); background-repeat: no-repeat; background-position: 0% 0%; ">Download and Discuss</h3></div><div class="op-body" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 8px; padding-bottom: 6px; padding-left: 8px; background-image: url(http://labs.adobe.com/images/shared/optionspod/labs_l.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; background-position: 0% 100%; "><ul class="iconmarker-16x16" style="list-style-type: none; list-style-position: initial; list-style-image: initial; margin-left: 0px !important; padding-left: 0px; margin-top: 0px !important; margin-bottom: 0.85em !important; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; margin-right: 0px !important; "><li style="font-size: 1em; line-height: 1.35em; padding-bottom: 0.5em; margin-left: 1px; padding-left: 20px; "><a href="http://labs.adobe.com/downloads/flex4sdk.html" title="Download" style="text-decoration: none; color: rgb(0, 136, 17); "><img src="http://labs.adobe.com/images/icons/download_page.gif" alt="Try" width="16" height="16" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; height: 16px; width: 16px; vertical-align: middle; float: none; clear: none; margin-left: -20px; margin-right: 4px; " />Get the Flex 4 SDK beta</a></li><li style="font-size: 1em; line-height: 1.35em; padding-bottom: 0.5em; margin-left: 1px; padding-left: 20px; "><a href="http://forums.adobe.com/community/labs/gumbo/" title="Discuss" target="_blank" style="text-decoration: none; color: rgb(0, 136, 17); "><img src="http://labs.adobe.com/images/icons/discussion.gif" alt="Discuss" width="16" height="16" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; height: 16px; width: 16px; vertical-align: middle; float: none; clear: none; margin-left: -20px; margin-right: 4px; " />Discuss Flex 4 SDK in the Labs forums</a></li></ul></div></div></div><br /><p style="font-size: 1em; line-height: 1.35em; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; word-wrap: break-word; ">For an overview of the new features, please read <a href="http://www.adobe.com/devnet/flex/articles/flex4sdk_whatsnew.html" target="_blank" style="text-decoration: none; color: rgb(0, 136, 17); ">Matt Chotin’s <em>What’s new in the Flex 4 SDK beta</em> article.</a></p><p style="font-size: 1em; line-height: 1.35em; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; word-wrap: break-word; ">Please use this opportunity to explore new features and communicate your feedback. While we are excited about this near feature-complete release, please remember that that this is beta software and there will be bugs, incomplete features, some performance issues and documentation issues, so we suggest that you only use it for testing and exploratory purposes.</p><p style="font-size: 1em; line-height: 1.35em; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; word-wrap: break-word; "><strong>Note:</strong> If you are planning on using the Flash Builder 4 beta, everything included in the Flex 4 SDK will also be included so you will not need to download the SDK.</p><h4 style="font-size: 1em; line-height: 1.3em; margin-top: 0px; margin-bottom: 0px; ">Open Source Nightly Builds</h4><p style="font-size: 1em; line-height: 1.35em; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; word-wrap: break-word; ">The Flex framework is open source, so if you are looking for the open source nightly builds, please visit <a href="http://opensource.adobe.com/flex" style="text-decoration: none; color: rgb(0, 136, 17); ">opensource.adobe.com/flex</a>.</p><h4 style="font-size: 1em; line-height: 1.3em; margin-top: 0px; margin-bottom: 0px; ">Flex 3 SDK</h4><p style="font-size: 1em; line-height: 1.35em; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; word-wrap: break-word; ">If you are looking for older versions of the Flex framework, you can get them from <a href="http://opensource.adobe.com/flex" target="_blank" style="text-decoration: none; color: rgb(0, 136, 17); ">the open source site</a>.</p></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-3253078934207401492009-08-25T11:44:00.000-07:002009-08-25T11:45:55.977-07:00Creating an animated base color effect on a Spark Button control in Flex 4<span class="Apple-style-span" style="color: rgb(17, 17, 17); font-size: 14px; line-height: 22px; ">The following example shows how you can create an animating background effect on a Spark Button control in Flex 4 by using the AnimateColor effect on the <code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 1em; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); font-family: Consolas, 'Andale Mono', Monaco, Courier, 'Courier New', Verdana, sans-serif; font-size: 0.929em; background-position: initial initial; ">baseColor</code> style.</span><div><span class="Apple-style-span" style="font-size:130%;color:#111111;"><span class="Apple-style-span" style="font-size: 14px; line-height: 22px;"><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; ">Full code after the jump.</p><div class="wp_syntax" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; color: rgb(17, 0, 0); background-color: rgb(249, 249, 249); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: silver; border-right-color: silver; border-bottom-color: silver; border-left-color: silver; overflow-x: auto; overflow-y: hidden; width: 780px; "><div class="code" style="padding-top: 2px; padding-right: 4px; padding-bottom: 2px; padding-left: 4px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; vertical-align: top; "><pre class="mxml" style="padding-top: 0.667em; padding-right: 0.917em; padding-bottom: 0.667em; padding-left: 0.917em; margin-top: 0px; margin-right: 0px; margin-bottom: 1.833em; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); overflow-x: visible; overflow-y: visible; clear: none; width: auto; float: none; font-size: 0.857em; line-height: 1.5em; white-space: pre; font-family: monospace; background-position: initial initial; "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><?xml version=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"1.0"</span> encoding=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"utf-8"</span>?<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:application</span> name=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"Spark_Button_AnimateColor_baseColor_test"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> xmlns:fx=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"http://ns.adobe.com/mxml/2009"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> xmlns:s=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"library://ns.adobe.com/flex/spark"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> xmlns:mx=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"library://ns.adobe.com/flex/halo"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><fx:declarations</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:animatecolor</span> id=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"animatr"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> target=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"{btn}"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> colorFrom=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"haloSilver"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> colorTo=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"haloBlue"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> colorPropertyName=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"baseColor"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> duration=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"400"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> repeatCount=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"0"</span> </span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> repeatBehavior=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"reverse"</span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></fx:Declarations</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "><s:button</span> id=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"btn"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> label=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"Spark Button"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> horizontalCenter=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"0"</span> verticalCenter=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"0"</span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "> creationComplete=<span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(255, 0, 0); ">"animatr.play();"</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">/></span></span> <span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 0, 0); "><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); "></s:Application</span><span style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(116, 0, 255); ">></span></span></pre></div></div><p class="information" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; "><a href="http://blog.flexexamples.com/wp-content/uploads/spark/Spark_Button_AnimateColor_baseColor_test/bin/srcview/" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(35, 97, 161); text-decoration: underline; ">View source</a> is enabled in the following example.</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 1.571em; margin-left: 0px; "><iframe src="http://blog.flexexamples.com/wp-content/uploads/spark/Spark_Button_AnimateColor_baseColor_test/bin/main.html" width="100%" height="100" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></iframe></p><div span="googleAdsLeaderboard" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><ins style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; display: inline-table; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; height: 90px; position: relative; visibility: visible; width: 728px; "></ins></div></span></span></div>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-12932367701943192662009-08-25T11:43:00.000-07:002009-08-25T11:44:05.188-07:00Flex FORMATTING DATA GRID ROWS AND HEADERS<span class="Apple-style-span" style="font-family: Arial; color: rgb(71, 72, 72); font-size: 13px; "><p>When developing applications with the DataGrid component, you may want to use a custom font so the data grid fits with your overall design. YOu change fonts by setting a custom text format using a TextFormat object, and the <code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">setStyle()</code> or <code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">setRendererStyle()</code> methods. If you want to set the text format for a DataGrid component’s header, use the <code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">setStyle()</code> method along with the <code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">headerTextFormat</code> style. If you want to set the text format for each row in the DataGrid component, use the <code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">setRendererStyle()</code> method along with the <code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">textFormat</code> style.</p><h4>Example</h4><div class="preWrapper"><pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; overflow-x: auto; overflow-y: auto; font-size: 1.3em; clear: both; "><span class="asReserved"><span style="color: rgb(0, 128, 0); ">import</span></span><span style="color: rgb(0, 128, 0); "> fl.controls.DataGrid; </span><span class="asReserved"><span style="color: rgb(0, 128, 0); ">import</span></span><span style="color: rgb(0, 128, 0); "> fl.controls.dataGridClasses.DataGridColumn; </span><span class="asReserved"><span style="color: rgb(0, 128, 0); ">import</span></span><span style="color: rgb(0, 128, 0); "> fl.data.DataProvider; </span><span class="asVar"><span style="color: rgb(0, 128, 0); ">var</span></span><span style="color: rgb(0, 128, 0); "> comicTextFormat</span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">:</span></span><span style="color: rgb(0, 128, 0); ">TextFormat </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> </span><span class="asReserved"><span style="color: rgb(0, 128, 0); ">new</span></span><span style="color: rgb(0, 128, 0); "> TextFormat</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">()</span></span><span style="color: rgb(0, 128, 0); ">; comicTextFormat.font </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> </span><span class="asString"><span style="color: rgb(0, 128, 0); ">“Comic Sans MS”</span></span><span style="color: rgb(0, 128, 0); ">; </span><span class="asVar"><span style="color: rgb(0, 128, 0); ">var</span></span><span style="color: rgb(0, 128, 0); "> comicBoldTextFormat</span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">:</span></span><span style="color: rgb(0, 128, 0); ">TextFormat </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> </span><span class="asReserved"><span style="color: rgb(0, 128, 0); ">new</span></span><span style="color: rgb(0, 128, 0); "> TextFormat</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">(</span></span><span style="color: rgb(0, 128, 0); ">comicTextFormat.font</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">)</span></span><span style="color: rgb(0, 128, 0); ">; comicBoldTextFormat.bold </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> </span><span class="asReserved"><span style="color: rgb(0, 128, 0); ">true</span></span><span style="color: rgb(0, 128, 0); ">; </span><span class="asVar"><span style="color: rgb(0, 128, 0); ">var</span></span><span style="color: rgb(0, 128, 0); "> dp</span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">:</span></span><span style="color: rgb(0, 128, 0); ">DataProvider </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> </span><span class="asReserved"><span style="color: rgb(0, 128, 0); ">new</span></span><span style="color: rgb(0, 128, 0); "> DataProvider</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">()</span></span><span style="color: rgb(0, 128, 0); ">; dp.addItem</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">({</span></span><span style="color: rgb(0, 128, 0); ">columnA</span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">:</span></span><span class="asString"><span style="color: rgb(0, 128, 0); ">“Row 1A”</span></span><span style="color: rgb(0, 128, 0); ">, columnB</span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">:</span></span><span class="asString"><span style="color: rgb(0, 128, 0); ">“Row 1B”</span></span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">})</span></span><span style="color: rgb(0, 128, 0); ">; dp.addItem</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">({</span></span><span style="color: rgb(0, 128, 0); ">columnA</span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">:</span></span><span class="asString"><span style="color: rgb(0, 128, 0); ">“Row 2A”</span></span><span style="color: rgb(0, 128, 0); ">, columnB</span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">:</span></span><span class="asString"><span style="color: rgb(0, 128, 0); ">“Row 2B”</span></span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">})</span></span><span style="color: rgb(0, 128, 0); ">; dp.addItem</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">({</span></span><span style="color: rgb(0, 128, 0); ">columnA</span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">:</span></span><span class="asString"><span style="color: rgb(0, 128, 0); ">“Row 3A”</span></span><span style="color: rgb(0, 128, 0); ">, columnB</span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">:</span></span><span class="asString"><span style="color: rgb(0, 128, 0); ">“Row 3B”</span></span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">})</span></span><span style="color: rgb(0, 128, 0); ">; </span><span class="asVar"><span style="color: rgb(0, 128, 0); ">var</span></span><span style="color: rgb(0, 128, 0); "> colA</span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">:</span></span><span style="color: rgb(0, 128, 0); ">DataGridColumn </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> </span><span class="asReserved"><span style="color: rgb(0, 128, 0); ">new</span></span><span style="color: rgb(0, 128, 0); "> DataGridColumn</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">(</span></span><span class="asString"><span style="color: rgb(0, 128, 0); ">“columnA”</span></span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">)</span></span><span style="color: rgb(0, 128, 0); ">; colA.headerText </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> </span><span class="asString"><span style="color: rgb(0, 128, 0); ">“Column A:”</span></span><span style="color: rgb(0, 128, 0); ">; </span><span class="asVar"><span style="color: rgb(0, 128, 0); ">var</span></span><span style="color: rgb(0, 128, 0); "> colB</span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">:</span></span><span style="color: rgb(0, 128, 0); ">DataGridColumn </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> </span><span class="asReserved"><span style="color: rgb(0, 128, 0); ">new</span></span><span style="color: rgb(0, 128, 0); "> DataGridColumn</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">(</span></span><span class="asString"><span style="color: rgb(0, 128, 0); ">“columnB”</span></span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">)</span></span><span style="color: rgb(0, 128, 0); ">; colB.headerText </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> </span><span class="asString"><span style="color: rgb(0, 128, 0); ">“Column B:”</span></span><span style="color: rgb(0, 128, 0); ">; </span><span class="asVar"><span style="color: rgb(0, 128, 0); ">var</span></span><span style="color: rgb(0, 128, 0); "> myDataGrid</span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">:</span></span><span style="color: rgb(0, 128, 0); ">DataGrid </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> </span><span class="asReserved"><span style="color: rgb(0, 128, 0); ">new</span></span><span style="color: rgb(0, 128, 0); "> DataGrid</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">()</span></span><span style="color: rgb(0, 128, 0); ">; myDataGrid.setStyle</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">(</span></span><span class="asString"><span style="color: rgb(0, 128, 0); ">“headerTextFormat”</span></span><span style="color: rgb(0, 128, 0); ">, comicBoldTextFormat</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">)</span></span><span style="color: rgb(0, 128, 0); ">; myDataGrid.setRendererStyle</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">(</span></span><span class="asString"><span style="color: rgb(0, 128, 0); ">“textFormat”</span></span><span style="color: rgb(0, 128, 0); ">, comicTextFormat</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">)</span></span><span style="color: rgb(0, 128, 0); ">; myDataGrid.addColumn</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">(</span></span><span style="color: rgb(0, 128, 0); ">colA</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">)</span></span><span style="color: rgb(0, 128, 0); ">; myDataGrid.addColumn</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">(</span></span><span style="color: rgb(0, 128, 0); ">colB</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">)</span></span><span style="color: rgb(0, 128, 0); ">; myDataGrid.dataProvider </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> dp; myDataGrid.width </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> 200; myDataGrid.rowCount </span><span class="asOperator"><span style="color: rgb(0, 128, 0); ">=</span></span><span style="color: rgb(0, 128, 0); "> myDataGrid.length; myDataGrid.move</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">(</span></span><span style="color: rgb(0, 128, 0); ">10, 10</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">)</span></span><span style="color: rgb(0, 128, 0); ">; addChild</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">(</span></span><span style="color: rgb(0, 128, 0); ">myDataGrid</span><span class="asBracket"><span style="color: rgb(0, 128, 0); ">)</span></span><span style="color: rgb(0, 128, 0); ">; </span></pre></div><h4>Result</h4><div id="flashcontent6" class="swfcontent"><embed id="flashcontent6" type="application/x-shockwave-flash" width="220" height="105" src="http://www.adobe.com/devnet/flash/quickstart/datagrid_pt2/swfs/section9.example1.swf" quality="high" bgcolor="#ffffff" name="flashcontent6"></embed></div><p>To download the source files for this example, <a href="http://www.adobe.com/devnet/flash/quickstart/datagrid_pt2/src/section9.example1.zip" style="color: rgb(0, 64, 182); text-decoration: underline; ">click here</a>.</p></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-9864205757636226762009-08-25T11:40:00.000-07:002009-08-25T11:41:40.495-07:00DataGrid component<span class="Apple-style-span" style="font-family: Arial; color: rgb(71, 72, 72); font-size: 13px; "><p>The following quick start demonstrates how to customize data grid columns, sort data grid columns numerically, format numbers in data grid columns using a custom label function, and how to specify a custom text format for both data grid headers and data grid rows.</p><h3>CREATING DATA GRID COLUMNS USING THE DATAGRIDCOLUMN OBJECT</h3><p>There are two main ways to add columns to a DataGrid instance:</p><ul><li>Pass a string to the data grid’s <code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">addColumn()</code> or <code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">addColumnAt()</code> method.</li><li>Pass a DataGridColumn object (fl.controls.dataGridClasses.DataGridColumn) to the data grid’s <code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">addColumn()</code> or <code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">addColumnAt()</code> method.</li></ul><p>By using the DataGridColumn object, you can control additional attributes of the data grid column, such as the following:<span id="more-1824"></span></p><ul><li>Specify whether the column is editable (<code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">DataGridColumn.editable</code>)</li><li>Specify whether the column is resizable (<code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">DataGridColumn.resizable</code>)</li><li>Specify the column’s header text (<code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">DataGridColumn.headerText</code>)</li><li>Specify a custom function which generates a cell’s text (<code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">DataGridColumn.labelFunction</code>)</li><li>Specify whether the column is sortable (<code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">DataGridColumn.sortable</code>)</li><li>Specify sorting options (<code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">DataGridColumn.sortOptions</code>)</li><li>Specify a custom sorting function (<code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">DataGridColumn.sortCompareFunction</code>)</li></ul><h4>Example</h4><p>The following example creates a new DataGridColumn instance and adds it to the DataGrid using the <code style="color: rgb(71, 72, 72); font-family: Courier, monospace; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 5px; ">addColumn()</code> method:</p><div class="preWrapper"><pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; overflow-x: auto; overflow-y: auto; font-size: 1.3em; clear: both; "><span class="asReserved">import</span> fl.controls.DataGrid; <span class="asReserved">import</span> fl.controls.dataGridClasses.DataGridColumn; <span class="asReserved">import</span> fl.data.DataProvider; <span class="asVar">var</span> dp<span class="asOperator">:</span>DataProvider <span class="asOperator">=</span> <span class="asReserved">new</span> DataProvider<span class="asBracket">()</span>; dp.addItem<span class="asBracket">({</span>columnA<span class="asOperator">:</span><span class="asString">“Row 1A”</span>, columnB<span class="asOperator">:</span><span class="asString">“1234.000″</span><span class="asBracket">})</span>; dp.addItem<span class="asBracket">({</span>columnA<span class="asOperator">:</span><span class="asString">“Row 2A”</span>, columnB<span class="asOperator">:</span><span class="asString">“56.300″</span><span class="asBracket">})</span>; dp.addItem<span class="asBracket">({</span>columnA<span class="asOperator">:</span><span class="asString">“Row 3A”</span>, columnB<span class="asOperator">:</span><span class="asString">“789.123″</span><span class="asBracket">})</span>; <span class="asVar">var</span> colA<span class="asOperator">:</span>DataGridColumn <span class="asOperator">=</span> <span class="asReserved">new</span> DataGridColumn<span class="asBracket">(</span><span class="asString">“columnA”</span><span class="asBracket">)</span>; <span class="asVar">var</span> colB<span class="asOperator">:</span>DataGridColumn <span class="asOperator">=</span> <span class="asReserved">new</span> DataGridColumn<span class="asBracket">(</span><span class="asString">“columnB”</span><span class="asBracket">)</span>; <span class="asVar">var</span> myDataGrid<span class="asOperator">:</span>DataGrid <span class="asOperator">=</span> <span class="asReserved">new</span> DataGrid<span class="asBracket">()</span>; myDataGrid.addColumn<span class="asBracket">(</span>colA<span class="asBracket">)</span>; myDataGrid.addColumn<span class="asBracket">(</span>colB<span class="asBracket">)</span>; myDataGrid.dataProvider <span class="asOperator">=</span> dp; myDataGrid.width <span class="asOperator">=</span> 200; myDataGrid.rowCount <span class="asOperator">=</span> myDataGrid.length; myDataGrid.move<span class="asBracket">(</span>10, 10<span class="asBracket">)</span>; addChild<span class="asBracket">(</span>myDataGrid<span class="asBracket">)</span>;</pre></div><h4>Result</h4><div id="flashcontent1" class="swfcontent"><embed id="flashcontent1" type="application/x-shockwave-flash" width="220" height="105" src="http://www.adobe.com/devnet/flash/quickstart/datagrid_pt2/swfs/section5.example1.swf" quality="high" bgcolor="#ffffff" name="flashcontent1"></embed></div><p>To download the source files for this example, <a href="http://www.adobe.com/devnet/flash/quickstart/datagrid_pt2/src/section5.example1.zip" style="color: rgb(0, 64, 182); text-decoration: underline; ">click here</a>.</p></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-75805914360606715432009-07-06T04:27:00.000-07:002009-07-06T04:30:21.221-07:00flex html tooltip component<span class="Apple-style-span" style="color: rgb(238, 238, 238); line-height: 21px; font-family:'Lucida Grande';font-size:12px;"><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; ">Flex components accepts plain text to display as ToolTip. So there is no way to format the ToolTip text. So i looked into this problem, i checked the source code of the class “ToolTip”. There i got a very easy solution for this.</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; "><span id="more-73" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "></span>The ToolTip class object uses <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">IUITextField</strong> object to display the ToolTip text. In component lifeCycle, at the process of <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">commitProperties()</strong> method, <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">text </strong>property of the IUITextField is get assigned by the String which is specified to for component’s <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">tooltip </strong>property. I got the right place, The Trick is just instead of assigning the tooltip string to the <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">text </strong>property, override it by the property <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">htmlText</strong>property of the IUITextField object, which will enable the html text to appear in tooltip.</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; ">So i created a component HTMLToolTip, which overrides the protected function <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">commitProperties()</strong>method of the <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">TootTip</strong> object. here is the source code of the component;</p><div class="dp-highlighter" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; font-size: 12px; width: 99%; overflow-x: auto; overflow-y: hidden; direction: ltr !important; border-top-style: solid; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-top-color: rgb(231, 229, 220); border-right-color: rgb(231, 229, 220); border-bottom-color: rgb(231, 229, 220); border-left-color: rgb(231, 229, 220); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; "><ol class="dp-c" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal; list-style-position: initial; list-style-image: initial; background-image: url(http://s1.wordpress.com/wp-content/plugins/highlight/highlighter_bg.gif?a); background-repeat: repeat-y; background-attachment: scroll; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(255, 255, 255); padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 8px !important; padding-left: 45px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 1px !important; margin-left: 0px !important; color: rgb(92, 92, 92); background-position: 0% 50%; "><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">package</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> com </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;">{ </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">import</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> mx.containers.*; </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">import</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> mx.controls.Text; </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">import</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> mx.controls.ToolTip; </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">import</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> mx.core.*; </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">public</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">class</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> HTMLToolTip </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">extends</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> ToolTip </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> { </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">public</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">function</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> HTMLToolTip() </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> { <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">super</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;">(); } </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> override <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">protected</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">function</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> commitProperties():</span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">void</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;">{ </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background- color:inherit;">super</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;">.commitProperties(); </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> textField.htmlText = text; </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> } </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> } </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;">} </span></li></ol></div><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; ">To use this component, after loading the application (<strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">creationComplete()</strong>) use<strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">ToolTipManager.toolTipClass</strong> to assign this component as toolTip custom class, and asign the components <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">toolTip </strong>property to assign html text. here is sample code;</p><div class="dp-highlighter" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; font-size: 12px; width: 99%; overflow-x: auto; overflow-y: hidden; direction: ltr !important; border-top-style: solid; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-top-color: rgb(231, 229, 220); border-right-color: rgb(231, 229, 220); border-bottom-color: rgb(231, 229, 220); border-left-color: rgb(231, 229, 220); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; "><ol class="dp-xml" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal; list-style-position: initial; list-style-image: initial; background-image: url(http://s1.wordpress.com/wp-content/plugins/highlight/highlighter_bg.gif?a); background-repeat: repeat-y; background-attachment: scroll; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(255, 255, 255); padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 8px !important; padding-left: 45px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 1px !important; margin-left: 0px !important; color: rgb(92, 92, 92); background-position: 0% 50%; "><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"><span class="cdata" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; background-color: inherit; color: rgb(255, 20, 147); "></span> </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"><span class="cdata" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; background-color: inherit; color: rgb(255, 20, 147); "> import com.*;</span> </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"><span class="cdata" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; background-color: inherit; color: rgb(255, 20, 147); "> private function init():void{</span> </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"><span class="cdata" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; background-color: inherit; color: rgb(255, 20, 147); "> ToolTipManager.toolTipClass = HTMLToolTip;</span> </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"><span class="cdata" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; background-color: inherit; color: rgb(255, 20, 147); "> mtBtn.toolTip = "this is <strong>HTML</strong>Tool<strong>Tip."</strong></span><strong> </strong></span><strong></strong></li><strong><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"><span class="cdata" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; background-color: inherit; color: rgb(255, 20, 147); "> }</span> </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color:inherit;"><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"><span class="cdata" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; background-color: inherit; color: rgb(255, 20, 147); ">]]></span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background- color:inherit;"> </span></span></li></strong></ol><strong></strong></div><strong><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "></strong></p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "></strong></p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "></strong></p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "></strong></p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; ">The trick is overriding the components <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">commitProperties()</strong> method<strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">.</strong></p></strong></span><strong></strong>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-52927778395356094002009-07-06T04:24:00.000-07:002009-07-06T04:25:27.770-07:00uploading an image into flash without server side script using flash player 10<span class="Apple-style-span" style="color: rgb(238, 238, 238); font-family: 'Lucida Grande'; font-size: 12px; line-height: 21px; "><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; ">The FileReference class in flash player 10 has a new method : <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">FileReference.load()</strong> which provides the power of uploading the image, text file etc into flash player without any server side script.</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; ">Before proceeding with <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">FileReference.load() </strong>method, we need to call <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">FileReference.browse()</strong>method so that user can select a file to load a selected file into flash player. Once the file get loaded into flash player you can access the loaded data by using a property of <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">FileReference.data</strong>.<br />The data loaded at <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">FileReference.data</strong> property is commonly a type of <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">ByteArray</strong>. we want to convert it to bitmap. so the trick is to use the loader class; <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">loader.loadBytes()</strong> method. The method converts the ByteArray to a loader image object. once it completes loading we can add the loader object to display list to display the image. so here we go;</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Note: the example has been created in flash cs4 and targets flash player 10;</strong></p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; ">settings:</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; ">1) create a blank flash document in flash cs4.</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; ">2) create a folder named with “flexScript” and copy and paste the below code to a new actionscript file and save the file into “flexScript” folder with the name “uploadImage”.</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; ">3) put a button component on the stage and put a instance name as “upload_Image”;</p><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; ">4) set the document class as “flexScript.uploadImage”; and run the application and check the magic;</p><div class="dp-highlighter" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; font-size: 12px; width: 99%; overflow-x: auto; overflow-y: hidden; direction: ltr !important; border-top-style: solid; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-top-color: rgb(231, 229, 220); border-right-color: rgb(231, 229, 220); border-bottom-color: rgb(231, 229, 220); border-left-color: rgb(231, 229, 220); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; "><div class="bar" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; direction: ltr !important; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; padding-left: 45px; background-image: url(http://s1.wordpress.com/wp-content/plugins/highlight/highlighter_bg.gif?a); background-repeat: repeat-y; background-attachment: scroll; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(255, 255, 255); background-position: 0% 50%; "><div class="tools" style="direction: ltr !important; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; padding-top: 3px; padding-right: 8px; padding-left: 10px; font: normal normal normal 9px/normal Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; background-color: rgb(248, 248, 248); padding-bottom: 10px; "><a href="http://flexscript.wordpress.com/2009/01/12/uploading-an-image-into-flash-without-server-side-script-using-flash-player-10/#" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;" style="direction: ltr !important; border-bottom-width: 1px; border-bottom-color: rgb(204, 204, 204); background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; font-size: 9px; color: rgb(160, 160, 160); background-color: inherit; text-decoration: none; margin-right: 10px; background-position: initial initial; ">view plain</a><a href="http://flexscript.wordpress.com/2009/01/12/uploading-an-image-into-flash-without-server-side-script-using-flash-player-10/#" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;" style="direction: ltr !important; border-bottom-width: 1px; border-bottom-color: rgb(204, 204, 204); background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; font-size: 9px; color: rgb(160, 160, 160); background-color: inherit; text-decoration: none; margin-right: 10px; background-position: initial initial; ">copy to clipboard</a><a href="http://flexscript.wordpress.com/2009/01/12/uploading-an-image-into-flash-without-server-side-script-using-flash-player-10/#" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;" style="direction: ltr !important; border-bottom-width: 1px; border-bottom-color: rgb(204, 204, 204); background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; font-size: 9px; color: rgb(160, 160, 160); background-color: inherit; text-decoration: none; margin-right: 10px; background-position: initial initial; ">print</a><a href="http://flexscript.wordpress.com/2009/01/12/uploading-an-image-into-flash-without-server-side-script-using-flash-player-10/#" onclick="dp.sh.Toolbar.Command('About',this);return false;" style="direction: ltr !important; border-bottom-width: 1px; border-bottom-color: rgb(204, 204, 204); background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; font-size: 9px; color: rgb(160, 160, 160); background-color: inherit; text-decoration: none; margin-right: 10px; background-position: initial initial; ">?</a></div></div><ol class="dp-c" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal; list-style-position: initial; list-style-image: initial; background-image: url(http://s1.wordpress.com/wp-content/plugins/highlight/highlighter_bg.gif?a); background-repeat: repeat-y; background-attachment: scroll; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(255, 255, 255); padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 8px !important; padding-left: 45px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 1px !important; margin-left: 0px !important; color: rgb(92, 92, 92); background-position: 0% 50%; "><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">package</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> flexScript { </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">import</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> flash.display.Sprite; </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">import</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> flash.events.MouseEvent; </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">import</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> flash.net.*; </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">import</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> flash.display.*; </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">import</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> flash.events.*; </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">import</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> flash.utils.ByteArray; </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">public</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">class</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> uploadImage </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">extends</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> Sprite { </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">private</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">var</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> jagFileRefSave:FileReference = </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">new</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> FileReference(); </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">private</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">var</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> loader:Loader = </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">new</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> Loader(); </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">private</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">var</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> imagesFilter:FileFilter = </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">new</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> FileFilter(</span><span class="string" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: blue; background-color: inherit; ">"Images"</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; ">, </span><span class="string" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: blue; background-color: inherit; ">"*.jpg;*.gif;*.png"</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; ">); </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">public</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">function</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> uploadImage(){ </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">super</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; ">(); </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> upload_Image.addEventListener(MouseEvent.CLICK,onClickSave); </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> } </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">private</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">function</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> onClickSave(e:MouseEvent):</span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">void</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; ">{ </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> jagFileRefSave.browse([imagesFilter]); </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> jagFileRefSave.addEventListener(Event.SELECT, selectedFile); </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> } </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">private</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">function</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> selectedFile(e:Event):</span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">void</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; ">{ </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> jagFileRefSave.load(); </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> jagFileRefSave.addEventListener(Event.COMPLETE, loaded); </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> } </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">private</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">function</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> loaded(e:Event):</span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">void</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; ">{ </span></span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">var</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> rawBytes:ByteArray = jagFileRefSave.data; </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> loader.contentLoaderInfo.addEventListener(Event.COMPLETE, getBitmapData) </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> loader.loadBytes(rawBytes); </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> } </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> <span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">private</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">function</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> getBitmapData(e:Event):</span><span class="keyword" style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit; ">void</span><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; ">{ </span></span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> addChild(loader); </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> } </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> </span></li><li class="" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; background-color: rgb(248, 248, 248); color: rgb(92, 92, 92); padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; "> } </span></li><li class="alt" style="direction: ltr !important; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; list-style-type: decimal-leading-zero; list-style-image: initial; list-style-position: outside !important; padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; line-height: 14px; white-space: nowrap; background-color: rgb(255, 255, 255); color: inherit; "><span style="direction: ltr !important; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; color: black; background-color: inherit; ">} </span></li></ol></div></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-4687908016246985422009-07-06T04:23:00.001-07:002009-07-06T04:23:53.578-07:00Using a Web Service to populate a DataGrid with XML data<span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 13px; line-height: 19px; "><span style="font-size:85%;"><span class="Apple-style-span" style="color: rgb(255, 255, 255);">In this example I will be using XML data that is returned from a remote site. This example retrieves data about web sites (Name and URL). The XML data will be consumed and displayed in a FlexDataGrid control. Make sure you see the next blog about customizing a DataGrid. Here is a sample of the data returned by the program:</span></span><pre><span style="font-size:85%;"><code style=""><span class="Apple-style-span" style="color: rgb(255, 255, 255);"><sites>
<br /> <site>
<br /> <name>Google</name>
<br /> <url>http://google.com</url>
<br /> </site>
<br /> <site>
<br /> <name>Yahoo</name>
<br /> <url>http://yahoo.com</url>
<br /> </site>
<br /></sites>
<br />
<br /></span></code></span></pre><span style="font-size:85%;"><span class="Apple-style-span" style="color: rgb(255, 255, 255);">In this example, the data returned will be parsed and stored in an ArrayCollection object. Using an ArrayCollection is a good idea because it used in a lot of Flex tags as a data provider. It also include many methods that will allow you to manipulate the data. The following are the steps taken in Flex to retrieve the data and populate the DataGrid.
<br /></span></span><ol><li style="font-weight: bold; list-style-type: none; list-style-position: initial; list-style-image: initial; padding-left: 14px; margin-bottom: 3px; background-image: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; background-position: 0% 6px; "><span style="font-size:85%;"><span class="Apple-style-span" style="color: rgb(255, 255, 255);">Create the </span></span><span style="font-family:courier new;font-size:85%;"><span class="Apple-style-span" style="color: rgb(255, 255, 255);">HttpService</span></span><span style="font-size:85%;"><span class="Apple-style-span" style="color: rgb(255, 255, 255);"> tag in Flex and link it to the XML source:</span></span></li><span style="font-size:85%;"><span class="Apple-style-span" style="color: rgb(255, 255, 255);"><mx:HTTPService id="getSitesService" resultFormat="e4x"
<br />url="http://some.examplewebsite.com/getSitesInXML.php"
<br />result="handleSiteData(event)" />
<br />
<br />id -- The name assigned to the service
<br />url -- is the source of the XML
<br />result -- Specify the name of the function that will handle the results. This function is called automatically. Incidentally, you can also add a method that will be invoked on errors (fault="someMethod()").
<br />resultFormat -- self explanatory.
<br /></span></span><li style="list-style-type: none; list-style-position: initial; list-style-image: initial; padding-left: 14px; margin-bottom: 3px; background-image: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; background-position: 0% 6px; "><span style="font-size:85%;"><span style="font-weight: bold; "><span class="Apple-style-span" style="color: rgb(255, 255, 255);">Send service request</span></span></span></li><span style="font-size:85%;"><span class="Apple-style-span" style="color: rgb(255, 255, 255);">getSitesService.send();
<br />This is usually done upon application loading. For example, in the application tag you can add the code:
<br />applicationComplete="getSitesService.send();"
<br />Remember the method "handleSiteData()" will be called automatically upon successful return of the web service. Now, let's look at the method that will handle the returned result.
<br /></span></span><span class="Apple-style-span" style="color: rgb(255, 255, 255);">
<br /></span><li style="list-style-type: none; list-style-position: initial; list-style-image: initial; padding-left: 14px; margin-bottom: 3px; background-image: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; background-position: 0% 6px; "><span style="font-weight: bold; "><span class="Apple-style-span" style="color: rgb(255, 255, 255);">Handle Site Data (Parse XML data)</span></span><span class="Apple-style-span" style="color: rgb(255, 255, 255);">
<br /></span><pre><code style=""><span class="Apple-style-span" style="color: rgb(255, 255, 255);">
<br />[Bindable]
<br />private var siteList:ArrayCollection;
<br />public function handleSiteData(event:ResultEvent):void {
<br /> xmlData = XMLList(event.result);
<br /> var siteArray:Array = new Array();
<br /> for (var i:int = 0; i < xmlData.site.length(); i++) {
<br /> //Create an object of type Site.
<br /> //Site is a simple ActionScript class
<br /> //that incldes a URL and a Name
<br /> var s:Site = new Site(xmlData.site[i].URL,
<br /> xmlData.site[i].Name);
<br /> //Add the object to the array
<br /> siteArray.push(s);
<br /> }
<br /> //Convert the array to an ArrayCollection
<br /> siteList = new ArrayCollection(siteArray);
<br />}
<br /></span></code></pre><span class="Apple-style-span" style="color: rgb(255, 255, 255);">
<br />Now we have an </span><span style="font-style: italic; "><span class="Apple-style-span" style="color: rgb(255, 255, 255);">ArrayCollection</span></span><span class="Apple-style-span" style="color: rgb(255, 255, 255);"> of sites. This collection will be used as the "dataProvider" for the DataGrid control.
<br /></span></li><span class="Apple-style-span" style="color: rgb(255, 255, 255);">
<br /></span><li style="list-style-type: none; list-style-position: initial; list-style-image: initial; padding-left: 14px; margin-bottom: 3px; background-image: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; background-position: 0% 6px; "><span style="font-weight: bold; "><span class="Apple-style-span" style="color: rgb(255, 255, 255);">Define the DataGrid Control to use the ArrayCollection "siteList" defined above.</span></span><span class="Apple-style-span" style="color: rgb(255, 255, 255);">
<br /></span><pre><code style=""><span class="Apple-style-span" style="color: rgb(255, 255, 255);"><mx:datagrid dataprovider="{siteList}"></code></pre></li></ol></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-40900256577539667452009-07-06T04:22:00.001-07:002009-07-06T04:22:45.574-07:00Customizing Flex DataGrid with ItemRenderer<span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 13px; line-height: 19px; ">In this example I will be using an ArrayCollection as the data provider for the DataGrid. The ArrayCollection is of objects that represent web sites. Each object contains a <span style="font-style: italic; ">Name and a URL</span>. The data will be displayed with some customization. The customization include color, decoration, and action. Each of the items displayed will be linkable to the appropriate web site.
<br /><ul style="list-style-type: none; list-style-position: initial; list-style-image: initial; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><li style="list-style-type: none; list-style-position: initial; list-style-image: initial; padding-left: 14px; margin-bottom: 3px; background-image: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; background-position: 0% 6px; "><span style="font-weight: bold; ">Define the DataGrid Control</span>
<br /><pre><code style="color: rgb(153, 102, 102); "><mx:datagrid id="sitesDataGrid" dataprovider="{siteList}" usehandcursor="true">
<br /><mx:columns>
<br /><mx:datagridcolumn headertext="Top Rated Sites" datafield="col1">
<br /> <mx:itemrenderer>
<br /> <mx:component>
<br /> <mx:Label text="{data.Name}" color='#009ad4'
<br /> rollOver="setStyle('textDecoration','underline')"
<br /> rollOut="setStyle('textDecoration','none')"
<br /> useHandCursor="true" buttonMode="true"
<br /> mouseChildren="false"
<br /> click='navigateToURL(new URLRequest(data.URL),"_mine")'
<br /> </mx:Label>
<br /> </mx:Component>
<br /> </mx:itemRenderer>
<br /> </mx:DataGridColumn>
<br /></mx:columns>
<br /></mx:DataGrid>
<br /></code></pre>
<br /><span style="font-style: italic; ">data</span> refers the object being rendered. So, <span style="font-style: italic; ">data.Name</span> refers the the instance data <span style="font-style: italic; ">Name</span> within the object. Here the item renderer defines each item from the site list as a label. The label is then styled as follows:
<br /><ul style="list-style-type: none; list-style-position: initial; list-style-image: initial; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">
<br /><li style="list-style-type: none; list-style-position: initial; list-style-image: initial; padding-left: 14px; margin-bottom: 3px; background-image: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; background-position: 0% 6px; ">The text is assigned the color #009ad4</li>
<br /><li style="list-style-type: none; list-style-position: initial; list-style-image: initial; padding-left: 14px; margin-bottom: 3px; background-image: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; background-position: 0% 6px; ">Text is underlined when the cursor is placed on it and removed when rolled out.</li>
<br /><li style="list-style-type: none; list-style-position: initial; list-style-image: initial; padding-left: 14px; margin-bottom: 3px; background-image: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; background-position: 0% 6px; ">It uses the hand cursor for the mouse</li>
<br /><li style="list-style-type: none; list-style-position: initial; list-style-image: initial; padding-left: 14px; margin-bottom: 3px; background-image: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; background-position: 0% 6px; ">When text is clicked it calls navigateToURL method to launch the web site. If <span style="font-style: italic; ">click</span> event is calling a method defined in your file, you need to qualify the call with<span style="font-style: italic; ">outerDocument</span> to bring the functions within scope. For example,
<br /><pre><code style="color: rgb(153, 102, 102); ">click='outerDocument.myFunction(data.URL)'</code></pre></li></ul></li></ul></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-9263832043291381582009-07-06T04:21:00.000-07:002009-07-06T04:22:04.996-07:00Calling a JavaScript Function from A Flex Application<span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 13px; line-height: 19px; ">Sometimes it might be necessary to call a Javascript function from your Flex application. The technique is quite simple. It involves sending the Javascript function name along with any parameters to the ExternalInterface class. For example, let's assume that a Javascript function called <span style="font-style: italic; ">changeMainContent</span> was defined to take a tag name (id) and a url. Normally using Javascript the functions is called this way: changeMainContent(id, url). Let's define a Flex method that invokes this Javascript method:<br /><pre><code style="color: rgb(153, 102, 102); ">public function callWrapper(id:String, url:String):void {<br /> var f:String = "changeMainContent";//Javascript function<br /> ExternalInterface.call(f,id, url);<br />}<br /></code></pre><br />Now a call this method when a button is clicked is as follows:<br /><pre><code style="color: rgb(153, 102, 102); "><mx:button click="'callWrapper(id,"></code></pre></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-19271280117730979172009-07-06T04:18:00.000-07:002009-07-06T04:21:32.757-07:00Flex Associative Arrays<span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Verdana; font-size: 13px; line-height: 19px; ">In this example I will be showing the use of associative array to change the content of a DataGrid control. Associative arrays work just like regular arrays except they use an Object (normally a string) as their index. For example, <code style="color: rgb(153, 102, 102); ">inventory['price'] = 12.99.</code> I will be creating an associative array of ArrayCollections. Each of these ArrayCollections will be used to populate a DataGrid.<br /><br />First let's create the ComboBox and the DataGrid controls:<br /><pre><code style="color: rgb(153, 102, 102); "><br /><mx:ComboBox id="cbCategory" x="10" y="37"<br /> dataProvider="{categories}"<br /> change="changeCBHandler()"></mx:ComboBox><br /><br /><mx:DataGrid id="dgSites" x="178" y="36"<br /> dataProvider="{searchList}"><br /> <mx:columns><br /> <mx:datagridcolumn headertext="Site Name" datafield="name"><br /> <mx:datagridcolumn headertext="URL" datafield="url"> <br /> </mx:columns><br /></mx:DataGrid><br /></code></pre><br /><br />Now let's look at the code used in these examples. Comments are provided throughout the code.<br /><pre><code style="color: rgb(153, 102, 102); "><br /><br />import mx.collections.ArrayCollection;<br /><br />//Array for the ComboBox control<br />[Bindable]<br />private var categories:ArrayCollection =<br />new ArrayCollection(["Search", "News"]);<br /><br />//Array collections to be placed in the Associative Array<br />[Bindable]<br />private var searchList:ArrayCollection = new ArrayCollection([<br />{name:'Yahoo',url:'http://yahoo.com'},<br />{name:'Google',url:'http://google.com'},<br />{name:'Ask', url:'http://ask.com'}]);<br /><br />[Bindable]<br />private var newsList:ArrayCollection = new ArrayCollection([<br />{name:'CNN', url:'http://cnn.com'},<br />{name:'Yahoo News', url:'http://news.yahoo.com'},<br />{name:'CNet', url:'http://cnet.com'}]);<br /><br /><br /><br />//Associative Array<br />[Bindable]<br />private var allLists:Array = new Array();<br /><br />//Intialization of the Associative array<br />//to be called on applicationComplete event<br />private function loadAllLists():void {<br /> <br />allLists['Search'] = searchList;<br />allLists['News'] = newsList;<br />}<br /><br />//Event handler for the change event<br />private function changeCBHandler():void {<br />var category:String = cbCategory.selectedLabel;<br />dgSites.dataProvider = allLists[category];<br /> <br />}<br />]]><br />Here is the complete application. Right click to see the complete source code.</code></pre><pre><span class="Apple-style-span" style="color: rgb(153, 102, 102);"><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Verdana; white-space: normal; "><br /><embed src="http://nasseef.net/projects/aarrays/AssociativeArrays.swf" quality="high" bgcolor="#FFFFFF" width="400" height="460" align="" type="application/x-shockwave-flash"></embed></span><br /></span></pre></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-57568185261118061072009-06-22T01:57:00.000-07:002009-06-22T01:58:25.709-07:00Importing Flash assets into FlexFlex Component Kit for CS3<br />The Flex Component Kit for Flash CS3 allows you to create interactive, animated content in Flash, and use it in Flex as a Flex component.<br />Please download and install this component kit before proceeding to the next sections.<br />URL for download:<br />Flex Component Kit<br /><br /><br />You typically import two types of assets<br />Static assets: Assets used for simple artwork or skins that do not contain any ActionScript 3.0 code.<br />Dynamic assets: Assets that correspond to Flex components and contain ActionScript 3.0 code. These components are designed to work with Flex features such as view states and transitions, skinning, and tool tips. To use dynamic assets in a Flex application, export the assets to a SWC file, and then link the SWC file to your Flex application.<br />For importing assets in<br /><br />Static Assets<br />Creating static assets in Flash CS3<br />Few points to be considered while creating assets for using in Flex:<br />Registration Point<br />The registration point for the exported symbol must be the upper left corner. If you have Flash content that has a different registration point you can always wrap the content in a new symbol with an upper left registration point.<br />Frame Rate<br />In order for the timing to remain consistent, the Flash frame rate must match the Flex frame rate. The default Flex frame rate is 24fps, so it is recommended that the Flash content matches this. If needed, the Flex frame rate can be set to a different value, although this should only be done as a fallback. Setting the Flex frame rate to a value less than 24fps will cause sluggishness in the UI.<br />Content Bounds<br />By default, the measured size of the Flash content matches the actual size. Any changes to the content size will automatically be recognized by Flex, and the component will be layed out again in its new size. You can avoid the resizing done by Flex when the flash asset is resized using the Bounding Box, which is explained below.<br />Symbol Type<br />Only “Movie Clip” and “Button” symbols can be imported in Flex.<br />Creating the asset<br />After creating the shape using the drawing tools in Flash CS3, select the shape and press F8 (shortcut for converting to symbol). In the convert to symbol dialog box, do the following<br />In the “Name” text box enter the name which you want use in Flex to refer to this symbol<br />Under “Linkage” section, select the “Export to action script” check box. This will make sure the symbol is visible in Flex.<br />Press OK to create the symbol.<br /><br />Importing static assets<br />Use Flash CS3 to create static assets. You can either embed the entire SWF or selected objects from the library.<br />Embed entire SWF<br /><mx:Script><br /><![CDATA[<br />[Embed(source="../assets/sample.swf")]<br />[Bindable]<br />public var sampleSwf:Class;<br />]]><br /></mx:Script><br /><mx:Image source="{sampleSwf}"/><br />Embed library symbols<br /><mx:Script><br /><![CDATA[<br />[Embed(source="../assets/sample.swf", symbol="Normal")]<br />[Bindable]<br />public var logoNormal:Class;<br />]]><br /></mx:Script><br /><mx:Button upSkin="{logoNormal}" click="anim.currentState = 'LastOne'" overSkin="{logoMouseOver}" downSkin="{logoClicked}"/><br />value to the “symbol” attribute should be the name of the symbol created in using Flash CS3.<br />Dynamic Assets<br />For importing dynamic assets into Flex application you need Flex component kit for Flash CS3.<br />Please refer to http://blogs.adobe.com/flexdoc/pdf/swf9.pdf for more details on how to import dynamic assets in to your Flex application.<br />References:<br />Adobe wiki on component kit<br />http://adobedev.adobe.acrobat.com/p75214263/Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-86945480770116690932009-06-22T01:54:00.000-07:002009-06-22T01:57:46.403-07:00Handling Java Exceptions in Flex<span class="Apple-style-span" style="font-size: 13px; line-height: 19px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Accessing the Throwable object in Flex</b></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; ">RemoteObject component invokes the <i style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">fault</i> event when an error occurs while remote method invocation. The fault event handler is provided with the FaultEvent object. This FaultEvent object has property named <b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><i style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">message</i></b> of type mx.messaging.messages.ErrorMessage. The <b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><i style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">message</i></b> property holds the Throwable object from the Java method in the <b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><i style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">rootCause</i></b> property. We need to use this <b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><i style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">rootCause</i></b>property to retrieve the properties which are set to the Throwable object in Java. All the public properties from the Throwable object are available.</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; ">We will see a sample application. In this application I am creating a custom Exception and adding a getter method to that, which will return my custom data. From the Flex application I will access both the error message and the custom data.</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">MyException.java</b></p><blockquote style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-left: 1em; font-style: italic; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">public class MyException extends Exception {</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">public MyException(String message) {</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">super(message);</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">}</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">public String getMyName(){</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">return “Sujit Reddy G”;</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">}</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">}</span></p></blockquote><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Method throwing exception</b></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; ">This method will throw the custom exception created above, add this method to a Java class. Invoke the below method using RemoteObject component in Flex.</p><blockquote style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-left: 1em; font-style: italic; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">public void throwCheckedException() throws Exception{</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">throw new MyException(”This is a checked exception”);</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">}</span></p></blockquote><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Reading values in Flex application</b></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; ">We add the method below as the fault event handler to the RemoteObject component in the Flex application. You can see that we accessed the <b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><i style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">rootCause</i></b> object to retrieve the properties of the custom Exception object returned from the Java method.</p><blockquote style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-left: 1em; font-style: italic; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">private function handleException(event:FaultEvent):void{</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">var errorMessage:ErrorMessage = event.message as ErrorMessage;</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">Alert.show(errorMessage.rootCause.message);</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">Alert.show(errorMessage.rootCause.myName);</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">}</span></p></blockquote><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; ">We are adding the above method as fault event handler to the RemoteObject component.</p><blockquote style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-left: 1em; font-style: italic; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;"><mx:remoteobject id="”exceptionObj”" destination="”CreatingRpc”" result="”handleRPC(event)”</font"></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;">fault=”handleException(event)”/></span></p></blockquote><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; ">Invoking the method in the Java class on button click</p><blockquote style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-left: 1em; font-style: italic; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color:#666699;"><mx:button label="”Invoke" click="”exceptionObj.throwCheckedException()”/"></span></p></blockquote><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 10px; ">You can also use the flex.messaging.MessageException. This class is packaged in the flex-messaging-core.jar. You should throw MessagException instead of MyException or any custom exception created. MessageException provides a property named extendedData, which is a HashMap. You can add any data to this property and access it from the Flex application using ErrorMessage(event.message).extendedData.</p></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-69090583565290289972009-06-22T01:52:00.000-07:002009-06-22T01:53:41.043-07:00Learn flex with java<span class="Apple-style-span" style="font-family: arial; font-size: 13px; "><h3 class="r" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: medium; display: inline; "><a href="http://www.adobe.com/devnet/flex/flex_java.html" class="l" onmousedown="return clk(this.href,'','','res','1','')" style="color: rgb(34, 0, 204); ">Adobe - <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Flex</em> Developer Center - Learn <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Flex</em> and <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Java</em></a></h3><div class="s" style="max-width: 42em; ">SpringSource and Adobe are collaborating to make it easy for <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Java</em> developers to create enterprise-class rich Internet applications (RIAs) using Adobe <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Flex</em> <b style="text-decoration: inherit; ">...</b><br /><cite style="color: green; font-style: normal; ">www.adobe.com/devnet/<b style="text-decoration: inherit; ">flex</b>/<b style="text-decoration: inherit; ">flex</b>_<b style="text-decoration: inherit; ">java</b>.html</cite></div><div class="s" style="max-width: 42em; "><span class="Apple-style-span" style="color: rgb(0, 128, 0);"><br /></span></div><div class="s" style="max-width: 42em; "><span class="Apple-style-span" style="color: rgb(0, 128, 0);"><span class="Apple-style-span" style="color: rgb(0, 0, 0); "><h3 class="r" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: medium; display: inline; "><a href="http://learn.adobe.com/wiki/display/Flex/Flex+and+Java" class="l" onmousedown="return clk(this.href,'','','res','2','')" style="color: rgb(34, 0, 204); "><em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Flex</em> and <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Java</em> - <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Flex</em> 3 Getting Started - Adobe Learning Resources</a></h3><div class="s" style="max-width: 42em; "> <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Flex</em> is a great solution for <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Java</em> developers because it enables them to utilize the power of <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Java</em> servers while creating expressive and <b style="text-decoration: inherit; ">...</b><br /><cite style="color: green; font-style: normal; ">learn.adobe.com/wiki/display/<b style="text-decoration: inherit; ">Flex</b>/<b style="text-decoration: inherit; ">Flex</b>+and+<b style="text-decoration: inherit; ">Java</b></cite></div><div class="s" style="max-width: 42em; "><span class="Apple-style-span" style="color: rgb(0, 128, 0); font-weight: bold;"><br /></span></div><div class="s" style="max-width: 42em; "><span class="Apple-style-span" style="color: rgb(0, 128, 0); font-weight: bold;"><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-weight: normal; "><h3 class="r" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: medium; display: inline; "><a href="http://www.manning.com/allmon/" class="l" onmousedown="return clk(this.href,'','','res','9','')" style="color: rgb(34, 0, 204); ">Manning: <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Flex</em> on <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Java</em></a></h3><div class="s" style="max-width: 42em; "><em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Flex</em> on <em style="font-weight: bold; font-style: normal; text-decoration: inherit; ">Java</em> assumes you live in the real world—not the demo. This unique book shows you how to refactor an existing web application using the server-side <b style="text-decoration: inherit; ">...</b><br /><cite style="color: green; font-style: normal; ">www.manning.com/allmon/</cite></div></span></span></div></span></span></div></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-88993599193634902462009-06-10T12:30:00.001-07:002009-06-10T12:30:28.174-07:00Flex with Ajax<span class="Apple-style-span" style="font-family: Verdana; font-size: 11px; "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">The Flex Ajax Bridge (FABridge) is a small code library that you can insert into an Flex application, a Flex component, or an empty SWF file to expose it to scripting in the browser.</p><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Rather than having to define new, simplified APIs to expose a graph of ActionScript objects to JavaScript, with FABridge you can make your ActionScript classes available to JavaScript without any additional coding. After you insert the library, essentially anything you can do with ActionScript, you can do with JavaScript.</p><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Adobe Flash Player has the native ability, through the External API (the ExternalInterface class), to call JavaScript from ActionScript, and vice versa. But ExternalInterface has some limitations:</p><ul style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 15px; "><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">The ExternalInterface class requires you, the developer, to write a library of extra code in both ActionScript and JavaScript, to expose the functionality of your Flex application to JavaScript, and vice versa.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">The ExternalInterface class also limits what you can pass across the gap - primitive types, arrays, and simple objects are legal, but user-defined classes, with associated properties and methods, are off-limits.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">The ExternalInterface class lets you define an interface so your JavaScript can call your ActionScript. FABridge lets you write JavaScript instead of ActionScript.</li></ul><h2 class="h2nobreak" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; padding-top: 1em; padding-right: 0px; padding-bottom: 0.5em; padding-left: 0px; margin-top: 20px; margin-right: 0px; margin-bottom: 0px; margin-left: 0em; font-style: normal; "><a name="193691" id="193691" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></a>When to use the Flex Ajax Bridge</h2><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">The FABridge library is useful in the following situations:</p><ul style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 15px; "><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">You want to use a rich Flex component in an Ajax application but do not want to write a lot of Flex code. If you wrap the component in a FABridge-enabled stub application, you can script it entirely from JavaScript, including using JavaScript generated remotely by the server.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">You have only one or two people on your team who know Flex. The FABridge library lets everyone on your team use the work produced by one or two Flex specialists.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">You are building an integrated rich Internet application (RIA) with Flex and Ajax portions.Although you could build the integration yourself using ExternalInterface, you might find it faster to start with the FABridge.</li></ul><h2 class="h2nobreak" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; padding-top: 1em; padding-right: 0px; padding-bottom: 0.5em; padding-left: 0px; margin-top: 20px; margin-right: 0px; margin-bottom: 0px; margin-left: 0em; font-style: normal; "><a name="193700" id="193700" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></a>Requirements for using the Ajax Bridge</h2><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">To use the FABridge library and samples, you must have the following:</p><ul style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 15px; "><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">Flex Ajax Bridge, which is included in the following directory of the Flex 3 SDK installation:<p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: 11px; "><i style="font-family: Verdana, Arial, Helvetica, sans-serif; ">installation_dir</i>\frameworks\javascript\fabridge</p></li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">Adobe Flex SDK</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">Adobe® Flash® Player 9 or Adobe® AIR™</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">Microsoft Internet Explorer, Mozilla Firefox, or Opera with JavaScript enabled</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">Any HTTP server to run the samples</li></ul><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">To run the samples:</p><ol style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 23px; margin-bottom: 0px; margin-left: 23px; "><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; ">Browse to the files found within the <i style="font-family: Verdana, Arial, Helvetica, sans-serif; ">installation_dir</i>\frameworks\javascript\fabridge</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; ">Place the src and samples folders side by side on any HTTP server.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; ">Open a web browser to http://<i style="font-family: Verdana, Arial, Helvetica, sans-serif; ">yourwebserver</i>/samples/FABridgeSample.html and samples/SimpleSample.html and follow the instructions there. Make sure you access the samples through http:// URLs and not file:// URLs. The Flash Player security sandbox prevents them from working correctly when they are accessed as local files.</li></ol></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-85316374874962262702009-06-10T12:22:00.000-07:002009-06-10T12:23:57.127-07:00Top Flex Tips<span class="Apple-style-span" style="font-family: Verdana; color: rgb(51, 51, 51); font-size: 11px; line-height: 13px; "><p style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; margin-top: 3px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><table class="sectionMacro" border="0" cellpadding="5" cellspacing="0" width="100%" style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; "><tbody><tr style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; "><td class="confluenceTd" valign="top" width="80%" style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); padding-top: 3px; padding-right: 4px; padding-bottom: 3px; padding-left: 4px; vertical-align: top; border-width: initial; border-color: initial; "><h2 style="font-size: 14px; line-height: normal; font-weight: bold; background-color: rgb(255, 255, 255); border-bottom-width: initial; border-bottom-style: none; border-bottom-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 13px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; color: rgb(51, 51, 51); ">Top Things You Need to Know When Working With Flex</h2><p style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; margin-top: 16px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Explore the key features of Flex with code examples and working sample applications. These step-by-step code-based tutorials are written in easy to digest 15 minute chunks. We suggest going through them (at least glancing at them) in order, but you can also pick and choose among the topics if you're already familiar with the concepts:</p></td><td class="confluenceTd" valign="top" style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); padding-top: 3px; padding-right: 4px; padding-bottom: 3px; padding-left: 4px; vertical-align: top; border-width: initial; border-color: initial; "> </td></tr></tbody></table> </p><h2 style="font-size: 14px; line-height: normal; font-weight: bold; background-color: rgb(255, 255, 255); border-bottom-width: initial; border-bottom-style: none; border-bottom-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 13px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; color: rgb(51, 51, 51); "><a name="PartIII.Topthingsyouneedtoknow-A.WorkingwithData3a.WorkingwithData" style="text-decoration: none; "></a><a href="http://learn.adobe.com/wiki/display/Flex/3a.+Working+with+Data" title="3a. Working with Data" style="color: rgb(0, 51, 102); text-decoration: none; ">A. Working with Data</a></h2><p style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; margin-top: 16px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Use data modeling and data binding when working with data.</p><h2 style="font-size: 14px; line-height: normal; font-weight: bold; background-color: rgb(255, 255, 255); border-bottom-width: initial; border-bottom-style: none; border-bottom-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 13px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; color: rgb(51, 51, 51); "><a name="PartIII.Topthingsyouneedtoknow-B.HandlingEvents3b.HandlingEvents" style="text-decoration: none; "></a><a href="http://learn.adobe.com/wiki/display/Flex/3b.+Handling+Events" title="3b. Handling Events" style="color: rgb(0, 51, 102); text-decoration: none; ">B. Handling Events</a></h2><p style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; margin-top: 16px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Use event handler functions to handle asynchronous network and UI events.</p><h2 style="font-size: 14px; line-height: normal; font-weight: bold; background-color: rgb(255, 255, 255); border-bottom-width: initial; border-bottom-style: none; border-bottom-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 13px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; color: rgb(51, 51, 51); "><a name="PartIII.Topthingsyouneedtoknow-C.DesigningaUI%3AUsingComponentsandContainers3c.DesigningaUILayout" style="text-decoration: none; "></a><a href="http://learn.adobe.com/wiki/display/Flex/3c.+Designing+a+UI+-+Layout" title="3c. Designing a UI - Layout" style="color: rgb(0, 51, 102); text-decoration: none; ">C. Designing a UI: Using Components and Containers</a></h2><p style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; margin-top: 16px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Use Flex's built-in components and containers to lay out your Flex Application</p><h2 style="font-size: 14px; line-height: normal; font-weight: bold; background-color: rgb(255, 255, 255); border-bottom-width: initial; border-bottom-style: none; border-bottom-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 13px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; color: rgb(51, 51, 51); "><a name="PartIII.Topthingsyouneedtoknow-D.DesigningaUI%3ADisplayingListsofItems3d.Displayinglistsofitems" style="text-decoration: none; "></a><a href="http://learn.adobe.com/wiki/display/Flex/3d.+Displaying+lists+of+items" title="3d. Displaying lists of items" style="color: rgb(0, 51, 102); text-decoration: none; ">D. Designing a UI: Displaying Lists of Items</a></h2><p style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; margin-top: 16px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Use the powerful List based components of Flex to display groups of related data items using either the built-in or custom item renderers and item editors.</p><h2 style="font-size: 14px; line-height: normal; font-weight: bold; background-color: rgb(255, 255, 255); border-bottom-width: initial; border-bottom-style: none; border-bottom-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 13px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; color: rgb(51, 51, 51); "><a name="PartIII.Topthingsyouneedtoknow-E.DesigningaUI%3ACreatingamultipageapplication3e.Multipageapplications" style="text-decoration: none; "></a><a href="http://learn.adobe.com/wiki/display/Flex/3e.+Multi-page+applications" title="3e. Multi-page applications" style="color: rgb(0, 51, 102); text-decoration: none; ">E. Designing a UI: Creating a multi-page application</a></h2><p style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; margin-top: 16px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Use navigation controls such as ViewStack and TabNavigator to easily add a navigaton system to your applicaton.</p><h2 style="font-size: 14px; line-height: normal; font-weight: bold; background-color: rgb(255, 255, 255); border-bottom-width: initial; border-bottom-style: none; border-bottom-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 13px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; color: rgb(51, 51, 51); "><a name="PartIII.Topthingsyouneedtoknow-F.ExtendingandCustomizingComponents3f.Customizingcomponents" style="text-decoration: none; "></a><a href="http://learn.adobe.com/wiki/display/Flex/3f.+Customizing+components" title="3f. Customizing components" style="color: rgb(0, 51, 102); text-decoration: none; ">F. Extending and Customizing Components</a></h2><p style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; margin-top: 16px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Create your own components from scratch or by extending existing classes in the Flex Class Library using Object Oriented Programming and Code Behind Techniques.</p><h2 style="font-size: 14px; line-height: normal; font-weight: bold; background-color: rgb(255, 255, 255); border-bottom-width: initial; border-bottom-style: none; border-bottom-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 13px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; color: rgb(51, 51, 51); "><a name="PartIII.Topthingsyouneedtoknow-G.DebugginganApplication3g.Debugyourapplication" style="text-decoration: none; "></a><a href="http://learn.adobe.com/wiki/display/Flex/3g.+Debug+your+application" title="3g. Debug your application" style="color: rgb(0, 51, 102); text-decoration: none; ">G. Debugging an Application</a></h2><p style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; margin-top: 16px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Learn about Flex Builder's rich debugging capabilities.</p><h2 style="font-size: 14px; line-height: normal; font-weight: bold; background-color: rgb(255, 255, 255); border-bottom-width: initial; border-bottom-style: none; border-bottom-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 13px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; color: rgb(51, 51, 51); "><a name="PartIII.Topthingsyouneedtoknow-ImporttheseprojectsintoFlexBuilder" style="text-decoration: none; "></a>Import these projects into Flex Builder</h2><p style="font-family: Verdana, arial, sans-serif; font-size: 11px; line-height: 13px; color: rgb(51, 51, 51); font-weight: normal; margin-top: 16px; margin-right: 0px; margin-bottom: 16px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Each of these modules is available on the <a href="http://learn.adobe.com/wiki/display/Flex/Download+Projects" title="Download Projects" style="color: rgb(0, 51, 102); text-decoration: none; ">Download Projects Page</a> as exported ZIP files that you can import into Flex Builder.</p></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-62469999617629345272009-06-10T12:19:00.000-07:002009-06-10T12:21:38.752-07:00What is a rich Internet application?<span class="Apple-style-span" style="font-family: Arial; color: rgb(51, 51, 51); font-size: 12px; line-height: 12px; "><h2 style="font-weight: normal; line-height: 1em; margin-top: 1em; margin-bottom: 0.5em; font-size: 1.835em; color: rgb(79, 79, 79); ">Ingredients for RIAs</h2><div class="columns-2-AB-A" style="margin-bottom: 0.5em; float: left; width: 452px; "><p style="font-size: 1.083em; line-height: 1.462; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; ">RIAs may look rather sophisticated, but you don't need to be an expert Flex, Flash, or Adobe AIR developer to build one. You can build RIAs using a variety of tools, techniques, and technologies.</p><ul style="word-spacing: -2ex; letter-spacing: -2ex; line-height: 0; list-style-type: disc; margin-left: 1ex; padding-left: 2.5ex; margin-top: 1em; margin-bottom: 1.35em; "><li style="word-spacing: normal; letter-spacing: normal; line-height: 1.25em; font-size: 1em; padding-bottom: 0.5em; ">If you're a coder interested in building complex interactive web apps such as branded, multimedia-rich business productivity or e-commerce apps, you can use <a href="http://www.adobe.com/devnet/flex/" style="color: rgb(0, 102, 204); text-decoration: none; ">Adobe Flex</a> and <a href="http://www.adobe.com/devnet/coldfusion/" style="color: rgb(0, 102, 204); text-decoration: none; ">Adobe ColdFusion</a>.</li><li style="word-spacing: normal; letter-spacing: normal; line-height: 1.25em; font-size: 1em; padding-bottom: 0.5em; ">If you're more into creating animations, games, or branded interactive marketing content, you can use <a href="http://www.adobe.com/devnet/flash/" style="color: rgb(0, 102, 204); text-decoration: none; ">Adobe Flash</a>. Alternatively, you can take advantage of <a href="http://www.adobe.com/devnet/ajax/" style="color: rgb(0, 102, 204); text-decoration: none; ">Ajax frameworks</a>, including Ext and the <a href="http://www.adobe.com/devnet/spry/" style="color: rgb(0, 102, 204); text-decoration: none; ">Spry framework for Ajax</a>, to build HTML-based RIAs, using tools such as <a href="http://www.adobe.com/devnet/dreamweaver/" style="color: rgb(0, 102, 204); text-decoration: none; ">Adobe Dreamweaver</a> or <a href="http://www.adobe.com/devnet/ajax/" style="color: rgb(0, 102, 204); text-decoration: none; ">Aptana Studio</a>.</li><li style="word-spacing: normal; letter-spacing: normal; line-height: 1.25em; font-size: 1em; padding-bottom: 0.5em; ">To extend your JavaScript- and Ajax-based web apps, you can use the <a href="http://labs.adobe.com/wiki/index.php/Ajax_Data_Services" target="_blank" style="color: rgb(0, 102, 204); text-decoration: none; ">Ajax Data Services</a> library or the <a href="http://labs.adobe.com/wiki/index.php/Flash-Ajax_Video_Component" target="_blank" style="color: rgb(0, 102, 204); text-decoration: none; ">Flash Ajax video component</a>. These libraries and technologies enable rich media support, data services and synchronization, and server technologies for rapid development and deployment of RIAs.</li><li style="word-spacing: normal; letter-spacing: normal; line-height: 1.25em; font-size: 1em; padding-bottom: 0.5em; ">To take your Ajax, HTML, Flex, or Flash apps to the desktop, you can use<a href="http://www.adobe.com/devnet/air/" style="color: rgb(0, 102, 204); text-decoration: none; ">Adobe AIR</a>. With Adobe AIR, you can build and deploy your RIAs to the desktop using the tools, technologies, and development models you employ today when developing for the browser.</li><li style="word-spacing: normal; letter-spacing: normal; line-height: 1.25em; font-size: 1em; padding-bottom: 0.5em; ">And to create prototypes of your web or AIR apps that help communicate your ideas, you can use <a href="http://www.adobe.com/devnet/fireworks/" style="color: rgb(0, 102, 204); text-decoration: none; ">Adobe Fireworks</a>.<span class="Apple-style-span" style="line-height: 12px; "><embed type="application/x-shockwave-flash" src="http://www.adobe.com/swf/shared/video/aeon/videoplayer.swf" width="448" height="302" id="edgemovie" name="edgemovie" bgcolor="#ffffff" quality="high" scale="noscale" salign="tl" wmode="opaque" flashvars="configURL=/devnet/projects/ria/xml/video_config.xml&stageWidth=448&stageHeight=302"></embed></span></li><div><span class="Apple-style-span" style="letter-spacing: normal; line-height: 12px; word-spacing: 0px;"><br /></span></div></ul></div><div class="columns-2-AB-B" style="margin-bottom: 0.5em; float: right; width: 452px; "><h4 style="line-height: 1.31; font-size: 1.083em; color: rgb(17, 17, 17); margin-top: 0px; margin-bottom: 0px; ">Ingredients</h4><ul style="word-spacing: -2ex; letter-spacing: -2ex; line-height: 0; list-style-type: disc; margin-left: 1ex; padding-left: 2.5ex; margin-top: 1em; margin-bottom: 1.35em; "><li style="word-spacing: normal; letter-spacing: normal; line-height: 1.25em; font-size: 1em; padding-bottom: 0.5em; ">An integrated development environment (IDE) or authoring tool such as Flex Builder, Flash, Dreamweaver, Aptana Studio, Eclipse, or a simple text editor</li><li style="word-spacing: normal; letter-spacing: normal; line-height: 1.25em; font-size: 1em; padding-bottom: 0.5em; ">A software development kit (SDK) such as Flex SDK or Adobe AIR SDK</li><li style="word-spacing: normal; letter-spacing: normal; line-height: 1.25em; font-size: 1em; padding-bottom: 0.5em; ">Images, videos, or other rich assets such as Flash content</li><li style="word-spacing: normal; letter-spacing: normal; line-height: 1.25em; font-size: 1em; padding-bottom: 0.5em; ">A web host or server space<span class="Apple-style-span" style="line-height: 12px; "><h2 style="font-weight: normal; line-height: 1em; margin-top: 1em; margin-bottom: 0.5em; font-size: 1.835em; color: rgb(79, 79, 79); ">See RIAs in action</h2><div class="columns-3-ABC-A" style="margin-bottom: 0.5em; float: left; width: 282px; "><a href="http://fotoflexer.com/demos.php" target="_blank" style="color: rgb(0, 102, 204); text-decoration: none; "><p style="font-size: 1.083em; line-height: 1.462; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; "><img src="http://www.adobe.com/devnet/projects/ria/images/fotoflexer.jpg" alt="FotoFlexer" width="248" height="148" border="0" class="border" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; vertical-align: middle; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(153, 153, 153); border-right-color: rgb(153, 153, 153); border-bottom-color: rgb(153, 153, 153); border-left-color: rgb(153, 153, 153); " /></p></a><h4 style="line-height: 1.31; font-size: 1.083em; color: rgb(17, 17, 17); margin-top: 0px; margin-bottom: 0px; "><a href="http://fotoflexer.com/demos.php" target="_blank" style="color: rgb(0, 102, 204); text-decoration: none; font-size: 1.25em; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; font-family: Georgia, 'Times New Roman', Times, serif; ">FotoFlexer</a></h4><p style="font-size: 1.083em; line-height: 1.462; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; ">Edit your images online with the powerful RIA features in FotoFlexer, built with Adobe Flex.</p></div><div class="columns-3-ABC-B" style="margin-bottom: 0.5em; float: left; width: 282px; margin-left: 47px; "><p style="font-size: 1.083em; line-height: 1.462; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; "><a href="http://www.bigspaceship.com/archive/nikeair/" target="_blank" style="color: rgb(0, 102, 204); text-decoration: none; "><img src="http://www.adobe.com/devnet/projects/ria/images/nike_air.jpg" alt="Nike Air" width="248" height="148" border="0" class="border" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; vertical-align: middle; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(153, 153, 153); border-right-color: rgb(153, 153, 153); border-bottom-color: rgb(153, 153, 153); border-left-color: rgb(153, 153, 153); " /></a></p><h4 style="line-height: 1.31; font-size: 1.083em; color: rgb(17, 17, 17); margin-top: 0px; margin-bottom: 0px; "><a href="http://www.bigspaceship.com/archive/nikeair/" target="_blank" style="color: rgb(0, 102, 204); text-decoration: none; font-size: 1.25em; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; font-family: Georgia, 'Times New Roman', Times, serif; ">Nike Air</a></h4><p style="font-size: 1.083em; line-height: 1.462; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; ">Experience the feel of the Nike brand in this Adobe Flash site built by Big Spaceship.</p></div><div class="columns-3-ABC-C" style="margin-bottom: 0.5em; float: right; width: 282px; "><a href="http://www.adobe.com/devnet/flex/tourdeflex/" style="color: rgb(0, 102, 204); text-decoration: none; "><p style="font-size: 1.083em; line-height: 1.462; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; "><img src="http://www.adobe.com/devnet/images/248x148/tour_de_flex248x148.gif" alt="Tour de Flex" width="248" height="148" border="0" class="border" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; vertical-align: middle; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: initial; border-top-color: rgb(153, 153, 153); border-right-color: rgb(153, 153, 153); border-bottom-color: rgb(153, 153, 153); border-left-color: rgb(153, 153, 153); " /></p></a><h4 style="line-height: 1.31; font-size: 1.083em; color: rgb(17, 17, 17); margin-top: 0px; margin-bottom: 0px; "><a href="http://www.adobe.com/devnet/flex/tourdeflex/" target="_blank" style="color: rgb(0, 102, 204); text-decoration: none; font-size: 1.25em; font-weight: normal; margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; font-family: Georgia, 'Times New Roman', Times, serif; ">Tour de Flex</a></h4><p style="font-size: 1.083em; line-height: 1.462; margin-top: 0px; padding-bottom: 1px; margin-bottom: 1.2em; ">Explore what you can do with Flex in this Adobe AIR application.</p><div><span class="Apple-style-span" style="font-size:100%;"><span class="Apple-style-span" style="font-size: 13px; line-height: 18px;"><br /></span></span></div></div></span></li></ul><div><span class="Apple-style-span" style="line-height: 15px;"><br /></span></div><div><span class="Apple-style-span" style="line-height: 15px;"><br /></span></div><ul style="word-spacing: -2ex; letter-spacing: -2ex; line-height: 0; list-style-type: disc; margin-left: 1ex; padding-left: 2.5ex; margin-top: 1em; margin-bottom: 1.35em; "><div><span class="Apple-style-span" style="letter-spacing: normal; line-height: 15px; word-spacing: 0px;"><br /></span></div></ul></div></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-9476756057959995242009-06-10T12:13:00.000-07:002009-06-10T12:14:30.854-07:00Flex Using Shared Objects<span class="Apple-style-span" style="font-family: Verdana; font-size: 11px; "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; "><span class="Apple-style-span" style="font-size: 16px; line-height: normal; "></span></p><h1 style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: normal; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 3px; margin-top: 14px; margin-right: 0px; margin-bottom: 25px; margin-left: 10px; ">About shared objects</h1><div id="content_wrapper" style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 15px; font-size: 11px; "><div style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Shared objects function like browser cookies. You use the <a href="http://livedocs.adobe.com/flex/3/langref/flash/net/SharedObject.html" target="_blank" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 68, 119); ">SharedObject</a> class to store data on the user's local hard disk and call that data during the same session or in a later session. Applications can access only their own SharedObject data, and only if they are running on the same domain. The data is not sent to the server and is not accessible by other Adobe® Flex® applications running on other domains, but can be made accessible by applications from the same domain.</p><h2 class="h2nobreak" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; padding-top: 1em; padding-right: 0px; padding-bottom: 0.5em; padding-left: 0px; margin-top: 20px; margin-right: 0px; margin-bottom: 0px; margin-left: 0em; font-style: normal; "><a name="149651" id="149651" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></a>Shared objects compared with cookies</h2><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Cookies and shared objects are very similar. Because most web programmers are familiar with how cookies work, it might be useful to compare cookies and local SharedObjects.</p><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Cookies that adhere to the RFC 2109 standard generally have the following properties:</p><ul style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 15px; "><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">They can expire, and often do at the end of a session by default.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">They can be disabled by the client on a site-specific basis.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">There is a limit of 300 cookies total, and 20 cookies maximum per site.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">They are usually limited to a size of 4 KB each.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">They are sometimes perceived to be a security threat, and as a result, they are sometimes disabled on the client.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">They are stored in a location specified by the client browser.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">They are transmitted from client to server through HTTP.</li></ul><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">In contrast, shared objects have the following properties:</p><ul style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 15px; "><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">They do not expire by default.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">By default, they are limited to a size of 100 KB each.</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">They can store simple data types (such as String, Array, and Date).</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">They are stored in a location specified by the application (within the user's home directory).</li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px; line-height: 16px; list-style-type: square; ">They are never transmitted between the client and server.</li></ul><h2 class="h2nobreak" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; padding-top: 1em; padding-right: 0px; padding-bottom: 0.5em; padding-left: 0px; margin-top: 20px; margin-right: 0px; margin-bottom: 0px; margin-left: 0em; font-style: normal; "><a name="149036" id="149036" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></a>About the SharedObject class</h2><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Using the <a href="http://livedocs.adobe.com/flex/3/langref/flash/net/SharedObject.html" target="_blank" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 68, 119); ">SharedObject</a> class, you can create and delete shared objects, as well as detect the current size of a SharedObject object that you are using. The SharedObject class consists of the following methods.</p><table border="0" cellpadding="0" cellspacing="0" style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 20px; margin-right: 15px; margin-bottom: 20px; margin-left: 15px; border-collapse: collapse; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font-size: 11px; "><tbody style="font-family: Verdana, Arial, Helvetica, sans-serif; "><tr style="font-family: Verdana, Arial, Helvetica, sans-serif; "><th nowrap="nowrap" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; font-weight: bold; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; background-color: rgb(255, 255, 255); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Method</p></th><th nowrap="nowrap" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; font-weight: bold; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; background-color: rgb(255, 255, 255); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Description</p></th></tr><tr style="font-family: Verdana, Arial, Helvetica, sans-serif; "><td style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; "><samp class="codeph" style="font-family: 'Courier New', Courier, monospace; font-size: 11px; ">clear()</samp></p></td><td style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Purges all of the data from the SharedObject object, and deletes the SharedObject file from the disk.</p></td></tr><tr style="font-family: Verdana, Arial, Helvetica, sans-serif; "><td style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; "><samp class="codeph" style="font-family: 'Courier New', Courier, monospace; font-size: 11px; ">flush()</samp></p></td><td style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Immediately writes the SharedObject file to a file on the client.</p></td></tr><tr style="font-family: Verdana, Arial, Helvetica, sans-serif; "><td style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; "><samp class="codeph" style="font-family: 'Courier New', Courier, monospace; font-size: 11px; ">getLocal()</samp></p></td><td style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Returns a reference to the client's domain-specific, local SharedObject object. If none exists, this method creates a new shared object on the client.</p></td></tr><tr style="font-family: Verdana, Arial, Helvetica, sans-serif; "><td style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; "><samp class="codeph" style="font-family: 'Courier New', Courier, monospace; font-size: 11px; ">getSize()</samp></p></td><td style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Gets the size of the SharedObject file, in bytes. The default size limit is 100 KB, although it can be larger if the client allows it.</p></td></tr></tbody></table><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">In addition to these methods, SharedObject objects have the following properties:</p><table border="0" cellpadding="0" cellspacing="0" style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 20px; margin-right: 15px; margin-bottom: 20px; margin-left: 15px; border-collapse: collapse; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font-size: 11px; "><tbody style="font-family: Verdana, Arial, Helvetica, sans-serif; "><tr style="font-family: Verdana, Arial, Helvetica, sans-serif; "><th nowrap="nowrap" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; font-weight: bold; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; background-color: rgb(255, 255, 255); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Property</p></th><th nowrap="nowrap" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; font-weight: bold; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; background-color: rgb(255, 255, 255); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Description</p></th></tr><tr style="font-family: Verdana, Arial, Helvetica, sans-serif; "><td style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; "><samp class="codeph" style="font-family: 'Courier New', Courier, monospace; font-size: 11px; ">data</samp></p></td><td style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Read-only property that represents the collection of attributes the shared object stores.</p></td></tr><tr style="font-family: Verdana, Arial, Helvetica, sans-serif; "><td style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; "><samp class="codeph" style="font-family: 'Courier New', Courier, monospace; font-size: 11px; ">onStatus</samp></p></td><td style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 2px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">The shared object's event handler that is invoked for every warning, error, or informational note.</p></td></tr></tbody></table></div></div></span><p></p><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; "><br /></p><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">You use the SharedObject class to store small amounts of data on the client computer.</p><ul class="navlinklist" style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; line-height: 16px; list-style-type: none; list-style-image: none; "><a href="http://livedocs.adobe.com/flex/3/html/lsos_2.html#132694" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 68, 119); ">About shared objects</a></li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; line-height: 16px; list-style-type: none; list-style-image: none; "><a href="http://livedocs.adobe.com/flex/3/html/lsos_3.html#149114" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 68, 119); ">Creating a shared object</a></li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; line-height: 16px; list-style-type: none; list-style-image: none; "><a href="http://livedocs.adobe.com/flex/3/html/lsos_4.html#150379" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 68, 119); ">Destroying shared objects</a></li><li style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; line-height: 16px; list-style-type: none; list-style-image: none; "><a href="http://livedocs.adobe.com/flex/3/html/lsos_5.html#149298" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 68, 119); ">SharedObject example</a></li></ul>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.comtag:blogger.com,1999:blog-954112930831544755.post-29418530387620891602009-06-10T12:09:00.000-07:002009-06-10T12:10:52.050-07:00Optimizing Flex Applications<span class="Apple-style-span" style="font-family: Verdana; "><h1 style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: normal; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 3px; margin-top: 14px; margin-right: 0px; margin-bottom: 25px; margin-left: 10px; ">Improving client-side performance</h1><div id="content_wrapper" style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 15px; font-size: 11px; "><div style="font-family: Verdana, Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; "><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Tuning software to achieve maximum performance is not an easy task. You must commit to producing efficient implementations and monitor software performance continuously during the software development process.</p><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Employ the following general guidelines when you test applications for performance, such as using the <a href="http://livedocs.adobe.com/flex/3/langref/flash/utils/package.html#getTimer()" target="_blank" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 68, 119); ">getTimer()</a> method and checking initialization time.</p><p style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px; ">Before you begin actual testing, you should understand some of the influences that client settings can have on performance testing. For more information, see <a href="http://livedocs.adobe.com/flex/3/html/performance_05.html#276613" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(0, 68, 119); ">Configuring the client environment</a>.</p></div></div></span>Jonhttp://www.blogger.com/profile/10247055052512255066noreply@blogger.com