Adobe Flash Builder for the iSeries Programmer, Part 1
August 10, 2011 Shannon O'Donnell
|
Note: The code accompanying this article is available for download here. If I’ve heard it once, I’ve heard it a thousand times: “The AS/400 is a legacy system with character-based data that is good for nothing but running batch programs.” That sentiment drives me right up the wall. In all fairness, however, the traditional iSeries/RPG programmer has done very little to prove these nay-sayers wrong. Sure, every once in a while you will see an RPG programmer throw some nice colors on a display file or maybe even use a message subfile, but while those were pretty cool tricks back in 1993, they do nothing to impress the current generation of users who are used to doing everything in a browser or on a mobile phone, and who are used to seeing bright, animated colors and designs. This generation of users expects their interfaces to look and work in a certain way and if your software cannot do that, then no matter how fool-proof and rock-solid it may be, it will always be perceived as legacy and old-fashioned. That’s why it is time for you, the traditional RPG programmer, to learn some new tools and find out how easy it really is to give your iSeries data a modern look and feel using Adobe Flash. In this series of articles, I am going to show you how to use Adobe Flash Builder to create exciting and dynamic front ends to your iSeries data. In this first article, I will show you where to get Flash Builder, show you how to install it, discuss a few of its features, describe what you can do with it, and, very briefly, show you how to create a simple app and then deploy it to your iSeries. In future articles in this series, I will show you how to use Flash Builder to build exciting Flash front-ends to your iSeries data, how to use the open source WAMP server with open source MySQL and PHP to build PC-based applications that can also talk to iSeries, and finally, how to build iSeries apps for Facebook. So stay tuned! There’s a lot of information coming your way! Getting Started Adobe Flash Builder is an Eclipse-based development tool that allows you to build Rich Internet Applications (RIA), mobile and tablet applications (even for Facebook), all built on Flash. Using Adobe’s Flash Builder, the programmer uses a combination of Action Script and MXML along with the WYSIWYG interface of Flash Builder to create exciting Flash-based interfaces. There are a few versions of Flash Builder available, but the latest is Flash Builder 4.5 and you can get it as part of one of the Adobe Suites that include other Adobe tools such as PhotoShop, Illustrator, and After Effects, or it can be purchased and downloaded separately. But first, a clarification. You are going to starting seeing the name “Flex” a lot. So why say “Flex” when you mean “Flash Builder”? Because the original version of Flash Builder was called Flex. It has only been in the last year or so (since version 4 of the Flash Builder (Flex) compiler came out) that Adobe rebranded the product as Flash Builder. They did this to signify that Flash Builder is an integral part of the Flash development environment and part of the integrated suite of Adobe tools. So when you see “Flex”, think Flash Builder. If by this point you are already feeling overwhelmed because this is a totally new topic to you, don’t worry. I am going to try to make the learning curve as painless as possible because this is truly a worthwhile endeavor you are about to embark upon: learning to build Flash-based User Interfaces to boring old iSeries Data! To make this as simple as we can, I want to strongly suggest that you start by downloading the free Flash Builder trial product from Adobe here, rather than purchasing it as part of one of the Adobe Suites. That way you get to try it first and if you like it, you simply purchase the license from Adobe and you’re ready to crank out commercial applications. However, in just a moment I am going to tell you about some of the other Adobe Suites and give you some suggestions as to why I think you would benefit, ultimately, from purchasing a full suite of applications. After you have downloaded the installation program, getting it installed on your PC (or Mac) is as simple as opening the file and taking all of the defaults. If your system is lacking in any required component, such as the current version of Java or Adobe AIR, the installation program will prompt you to download and install it. Once you have done so it will continue on with the installation and in just a few minutes you will be ready to begin programming your first Flash Builder application. One caveat here: Please read the hardware and software requirements for Flash Builder on the Adobe Website before you install it. Chances are very good that if you purchased your PC new within the last two years, you will not have any problems. But if you are using an older model PC (or Mac) and/or you are using a PC that your IT department slapped together from parts (to keep the costs down perhaps) then you could potentially have problems. So save yourself some diagnostic headaches before they happen and read the requirements first. If you choose to purchase (or download a trial version of) one of the Adobe Suites, then Flash Builder will be installed as part of that suite’s setup. Incidentally, although you will probably only download Flash Builder 4.5 as a trial for now, you should strongly consider purchasing one of the Adobe suites, such as Adobe Creative Suite Web Premium, which contains not only Flash Builder 4.5 but also Photoshop CS 5.5, Catalyst CS 5.5, DreamWeaver CS 5.5, Flash Professional CS 5.5, and a whole host of other useful tools. The benefit of purchasing a suite of tools is that although you spend slightly more money up front over purchasing the individual Flash Builder software, you gain so much more by having access to all the other integrated Adobe tools. For example, if you need to create custom graphics for your new IDE, you need look no further than Photoshop and Illustrator. If you have a design team in house already, they can use Illustrator to literally draw your new application’s interface (buttons, list boxes, data grids, and all), and then import that drawing directly into Catalyst 5.5 and very rapidly turn the individual parts of their drawing into a functioning interactive user interface that can then be exported directly into Flash Builder with most of the ActionScript and MXML already coded for you. What’s better than that? I Installed It . . . Now What’s It Good For? So now that you have Flash Builder 4.5 installed, what can you do with it? That is a big question! Here’s just a partial list of things you can do with Flash Builder 4.5 right out of the box:
As you can see, the hard thing will not be answering the question: How do I use Flash Builder? Rather, the hard thing will be in answering the question: What do I build with it first!!?!?! Building Your First App The first app we will build will be something very simple, just to get your hands on the software and play with it a little bit, and to give you something to export to the iSeries so you can see it running there. To get started, open Flash Builder. You should see an Eclipse Workspace selection screen that will look very familiar to you if you have any experience at all with the IBM Websphere Development Studio tools (see Figure 1).
Go ahead and name your workspace something appropriate. (I named mine “Article 1” because this is the first article in the series.) Then click the OK button. It is also possible that the first time out of the gate that Flash Builder will use a default workspace. That’s OK, too, but you may want to choose your own workspace, just so that you can store things in a location that is easier for you to remember. If that’s the case, to get to the new workspace, after Flash Builder opens click the File menu item followed by Switch Workspace/other. That will bring up the panel you see in Figure 1. Now you will need to decide what type of application you will create. For the purposes of this article, we will create an app that allows the user to scroll through a series of photographs using a cover flow-style Flash object. The photos that appear in the cover flow will be provided in a simple XML file and when the user clicks on one of them, the user will be taken to a predetermined Web site/page. Not incredibly useful all by itself, but a great component you can use in many other applications, and of course, all served up by your iSeries. So to get started, go ahead and click the File menu item, then the word New, and finally choose Flex Project. When you do, you will see a screen like the one shown in Figure 2.
As you can see in Figure 2, I named my project “Image_Cover_Flow”. You can give it your own name, but it might be easier to follow along with this article if you keep the name the same. Incidentally, the name you choose here will be the name the application is known as when you deploy it. There are ways to change it, but in general whatever you name it here is what it will forever be known as when you call it or link to it for your users, so keep that in mind. I am going to take all the defaults on this panel and all the others that follow. You can poke around a bit here though if you want to see the other options that are available to you. Before we are finished with this article series, you will have had a chance to try out most of these other options. When you’re done, you will be presented with the skeleton Flash Builder project, in Code view as shown in Figure 3.
I am not going to go into too much of what each of these pieces are or too much into how to use the IDE or even how to program in Action Script. There are a ton of books and articles out there already that will teach you step by step Action Script and Flash Builder 4.5 programming. You can click on any of the references at the bottom of this article for some examples. Instead, I am going to concentrate only on the pieces you need to build your app and to deploy it to the iSeries. So in that vein, notice that there are two tabs on the center pane: Source and Design. The Source is the default (unless you change it) view you will see when you create a new Flex project. If you click the Design tab (go ahead and click it now, I know you’re dying to try it), you will see what your application will look like when it is running. Right now it’s pretty boring. That’s because we haven’t added any components or functionality to it yet. Let’s do that now. The first thing we want to do is to add a Label Component to the window to tell the user what they are looking at. Click on the Design tab, if you haven’t done so already, and then drag a Label control to the design panel by clicking on it and holding down the left mouse button, dragging it to where you want to position it and then releasing your mouse button. You should also see the properties panel on the right side of the IDE. We will change the relevant properties of this label there. Click in the Text box, where it currently says “label,” and change the text to “Mobile Device Selection Tool”. Next, click the font size (probably set to 12 already) and make it larger. Let’s make it 28. Now, let’s make the text stand out a bit by changing its color to a bright red. To do that, click in the black-colored box to the right of the font size and select a bright red color. You may also choose to underline and bold the label text. Finally, scroll down in the Properties panel until you see the Constraints panel and change the values until they match what are shown in Figure 4.
By setting the constraints, you tell the final output that no matter how the user resizes your app, the component you are setting constraints for will always maintain the same relative position on the screen. Adding Exciting Functionality Without Having To Create It Yourself The next piece we want to add is the Image Cover Flow component that will allow your users to flip through your images much like they would if they were flipping through album covers using their iPhone or iPod. We could write this piece ourselves using Adobe’s Flash tool along with some fairly complex mathematics and Action Script, but it’s a whole lot easier, and more convenient, if we just visit a site like Flash Den and do a quick search to find one we like and download and use it instead. One of the coolest things about working with languages and tools like Flash Builder, Flash, PHP, and other modern tools is that so much of what you want to do has already been written for you. There is no need to build it again. In fact, it would be crazy to waste the time to build a component that already exists and is either free or available for a very low cost when someone else has already done so. With Flash Builder, if you find a component on line such as the cover flow component we will use in this article, then it only makes sense to use it rather than create your own. The component has already been written, tested and deployed hundreds, sometimes thousands of times and gone through at least as good, if not better user testing than you could possibly throw at it in the time you typically have available to work on a project. So that’s what we are going to do now. I have chosen a cover flow-type image viewer from Active Den, (a subset of the Flash Den website) called IgalleryX . This component cost me $15 for something that would have taken me two or three weeks or more to write on my own (assuming I had the necessary math skills to plot it out in the first place, which is I don’t). If you look around on that Website, do a search for the terms “image” or “cover flow” and you will see many other examples of components you might like better. But for the purposes of this article, try to stick to the cover flow component I have included with the downloadable code for this article. Adding the CoverFlow Component So let’s add the cover flow component to our project now. If you haven’t already done so, download the source and object code for this article and unzip it to a location on your PC that you can find again. At this point I am making the assumption that you have been going through each of the steps as I gave them in this article. If that’s the case, then you will need to add the images and SWF and XML files required by the component to your Flash Builder project yourself. If you simply opened the completed project included in the download, then everything is already in place. So assuming you are doing this step-by-step, open the directory you unzipped the source files to and drill down to the /src folder beneath /Article1/Image_Cover_Flow/src and select the following three objects:
Select all three of those objects (or one at a time if that’s more comfortable for you) and choose Copy. Now go back to your Flash Builder project and right-click on the /src folder on the left side of your screen at the top under Package Explorer and choose Paste. That will place all the required objects for the cover flow component into your Flash Builder project. When you’re done, your Project Explorer should look pretty much like the one shown in Figure 5.
How the IgalleryX Cover Flow Component Works The way this particular Flash component works is that you supply all the images to the project up front and store them in a folder named /images. The images are already specified as 200x 150 in size and if you replace them with your own images, then the new ones will also need to be this size to fit correctly. In addition to the images there is a file named data.xml. In this file, we specify the name of each image, a caption for it, and a link that the user will be taken to when they click on the image. For this article, I just grabbed a bunch of random cell phone and tablet images and links from Amazon. The images could, of course, be anything you want and link to anything you want. If you double-click on the data.xml file in the Project Explorer, it should open in the IDE and you can take a look at the XML. It’s pretty basic and it wouldn’t take much at all for you to create an RPG program to write out your own XML file to update this list of images dynamically. Finally we have the IgalleryX.swf file. SWF is a multimedia file created in Adobe Flash. It is actually a compiled Flash object so it will load and play quickly. The IgalleryX.swf file is a Flash object that was created from a whole bunch of Action Script and organized into a Flash file named: IgalleryX.fla. The IgalleryX.fla file is not included with this article’s downloadable code. If you like the IgalleryX component in this article and want to use it in your own projects, then you will need to go to Flash Den and purchase it yourself for $15. When you do, you will gain access to all the source files for the component and you will be able to change such things as which image the component starts on when the user launches the application, the type of animation transitions it uses, the size of the images, whether or not to run it as an automatic slide-show, and so on. To edit the *.fla file you get when you purchase the component, you will need Adobe Flash Professional. That is also another great example of why you might consider purchasing an entire suite of products from Adobe, rather than just the standalone Flash Builder tool. You will find that you are forever needing to change, modify or create something needed by Flash Builder that you hadn’t thought of yet and if you already own the correct Adobe tool to do it, then you are that much further ahead of the game. Adding the IgalleryX Cover Flow Component There are only a few more steps to take before you are ready to run this. We want to add the IgalleryX.swf file to the Flash Builder canvas and we want to change the background color of the canvas to black. Because the component we need to add is a SWF file, we have to use a SWFLoader Component to load it into Flash Builder. This is actually very easy to do. Simply click on the Design tab in Flash Builder, and select the SWFLoader Component that you will find on the lower left side of the IDE under the Components section. Drag the SWFLoader to your canvas and drop it in place. Don’t worry about resizing it. As long as you did not change any of the defaults, it will automatically size itself to the SWF object when it runs. When you have the SWFLoader component on your canvas, look in the Properties dialog on the lower right side of your screen. Click the open folder icon next to the Source box and navigate to the IgalleryX.swf file in this project that you will find under the /src folder. That’s all you have to do to add that cover flow component to your project! Pretty simple way to add in a whole lot of functionality, huh? The last thing we want to do then is to set our canvas color to all black. There is no real reason for this other then it shows you another way to interact with Flash Builder, not to mention a black background looks really cool! To set the entire application color to a black background, add this bit of coded to the <s: Application tag at the top of your Flash Builder source file (make sure you clicked on the Source tab if you were still in Design mode): backgroundColor="#000000" So that when you are done, your <s: Application tag block looks like this: <s:Application width="1123" height="782" minWidth="955" minHeight="600" backgroundColor="#000000"> Try It Out! You’re now ready to try it out. If you did everything correctly then you should be able to simply click on the white arrow in a green circle at the top of the IDE, or press Run, to run it. It should open up in your default browser and look a whole lot like what you see in Figure 6.
Moving the Flash Builder Project to the iSeries The last thing we will do is to move the completed project to the iSeries so you can serve it up from there. To do that we will need to Export the project as a Release Build and then copy the release files to your iSeries’ IFS. To Export the project, click the Project menu item at the top of the IDE, then click the Export Release Build menu item. Notice, as shown in Figure 7, that pretty much everything is already filled in for you. If you want, and if you already have a drive mapped to your IFS on your iSeries, you can export it directly to there from this panel. Otherwise you can do what I usually do and export it to the bin-release folder of my Flash Builder project and then I manually copy the required components from there to my iSeries. However you choose to do it, click the Finish button and you will have created the release build of your project.
Open a Windows Explorer session and navigate to the /bin-release folder under your Flash Builder project folder for this project. Once there you will see several files and sub-folders. Copy the contents of the /bin-release folder to the appropriate /www directory you would have previously set up in your IFS where you will be serving this project from. By the way, because we had to cover so much information in this first article, I will not be covering how to serve up Web pages from the iSeries IFS. By this time (the year 2011), this topic has been covered many, many times in a variety of venues and everyone should already be familiar with this topic and how to accomplish it. If you do not know, however, or if you need a refresher, then I would refer you to an article I wrote on that very topic back in 2002: Displaying Static HTML Pages from the iSeries. That article is for OS/400 Version 4.5, but it is still pretty much all you need to do today, even with OS/400 Version 6.00 or higher. Some of the screens may appear slightly different but the basic steps are exactly the same. So give Flash Builder a try and see what you think. Once you get used to it, you will find that it is extremely easy to use. It lets you start with simple projects and ultimately create very complex projects that could potentially run your entire business. As we continue on with this series of articles covering Flash Builder and iSeries, you will also see how you can serve up iSeries data, interact with it, and even serve iSeries data to that ultimate social medium: Facebook! Shannon O’Donnell is a freelance writer and has been working with the AS/400 and iSeries for more than 20 years. Send your questions or comments for Shannon via the IT Jungle Contact page. RELATED STORY Displaying Static HTML Pages from the iSeries
|
