Adobe Flash Builder for the iSeries Programmer, Part 2
September 7, 2011 Shannon O'Donnell
|
NOTE: The code accompanying this article is available for download here. In my last article, I introduced you to the Adobe Flash Builder tool and showed you just how easy it is to create Flash-based user interfaces. In addition, I showed you how to integrate Flash components that other people create without having to know much, if anything, about them. And I told you that in future articles I would be showing you how to use Flash Builder to display and interact with iSeries DB2/400 data. Well, the future has arrived! In this article, which is the first of two parts, you will learn how to use Flash Builder to build a new customer information user interface that contains buttons, text input boxes, labels, a tab navigator control, and a few other GUI components. You will learn about On Click events, variable definitions, and a little bit more about Action Script programming. In my next article, you will learn how to connect your newly built Flash-based GUI to your iSeries via a Web service. Once again we have a lot of information to cover in a short amount of space, so let’s get started. Designing the GUI I’m not sure how other programmers get started with a new user interface project, but I always start by designing the GUI first. Open up Flash Builder 4.5 and choose a new Workspace. NOTE: You could use the same workspace that we used in my previous article, but to avoid confusion, let’s just create a new Workspace now, and let’s call it CustomerProjects. (See Figure 1.)
Once Flash Builder finishes the initial workspace setup, click on the File/New menu options and then choose Flash Builder Project. Name your new project Customer_Information. (See Figure 2.) You can take all other defaults by clicking on the Finish button.
Now go ahead and click on the Design tab so we can get into the WYSIWYG designer. For this project, we want the user to be able to select a Customer Number from a dropdown list, and when they click the Get Information button, we will go to the iSeries via a Web service call and pull in our customer data for the selected customer number. At least that’s what we will do in the next article in this series. In this article, clicking on the buttons will simply change views that the user sees. So for this project then we will need the following GUI pieces:
Let’s start by adding a Label control for the heading. While in Design view, click on the Label control under the Components panel on the bottom left side of your IDE and drag it to the top center of your screen. Go to the Properties panel on the right side of your IDE and locate the box labeled “Text:”. It will currently say “Label”. Change that value to “Customer Information”. Now we need to change the Style of the Label control. If the Style values are not currently visible click on the arrow next to the word “Style” to expand it (below the Text: box in the properties panel). Let’s change the Font to Verdana and the font size to 24. Let’s also change the color of the label to a dark blue. To change the color, click on the black color box to the right of the font size and select a dark blue color of your choice. Finally, go down to the Constraints box in the Properties panel and click in the top center and top left-hand Constraint boxes. I have mine set to -23 for the top center and 23 for the top left, but you can set yours to what you feel is appropriate for your own project. The main thing here is that you are telling Flash Builder to anchor the label so that it does not wander all around the screen when the user resizes their display. Next we need to add another Label control, a Dropdown list control, and a Button control. Go ahead and drag all of those to the center of your screen. Set the properties for each as follows:
Notice that we are giving the Dropdown List and the Button an ID value/name. Besides the fact that you will often need to refer to specific controls by name, it’s also just a good idea to name all the components that the user can interact with to avoid confusion when you have to debug your projects. Also, just to make it stand out a bit, let’s change the color of the button to a light violet color. To set the Button color, scroll down in the properties panel to where you see the Color section and click in the Chrome box. I selected the color x’7d85ab’, but again, choose a color that appeals to you. When you’re done, your project’s initial state should look like that shown in Figure 3.
A Word About States As a Flash Builder programmer, you will hear a lot about states so it’s important that you understand what they are and how to work with them. A “state” in Flash refers to the current view the user sees. The equivalent in a Display File on the iSeries would be a Record Format. With Flash Builder, and specifically Flash, which of course is the output from Flash Builder, your users do not physically transfer from one screen to the next like you do with a Display File. Instead, the way your present new information to your users is to change the “state” or “view” that they are shown. A state then is a way to group discreet information logically to control the user navigation/experience. A state has a name, which must be unique for the project, and a state can be based upon the description/properties of a previously defined state. You can specify which state is the default state, that is, the state the user sees when the project is first opened, and you can specify the order that states are shown both explicitly and implicitly. For this project we will need two states. To create a new state, locate the State property window (by default it will be in the upper-right corner of the Design view), and you will see an icon at the top of the State properties box that looks a bit like a small GUI screen. If you hover your cursor over that icon, you will see that is says “New State”. Go ahead and click on that icon to create a New State. Give the state a name of “Customer_Detail” and select the “Blank State” radio button. (See Figure 4.) You could have selected the “Duplicate of” button to duplicate all the components from the first state, but doing so can cause its own set of problems once your projects start becoming more complex. You have to remember to change a lot of other properties in the ActionScript later on when you select “Duplicate of”, and that can lead to debug issues if you forget or miss something. I find it’s just easier to start with a new blank state and copy the components you need or want from other states manually. Click the OK button when you’re done.
By default, a state is given a name like “State1”, “State2”, and so on, but this is not very helpful when designing or programming. So one of the first things you should do is edit your initial state so that it is named something appropriate to your project. To edit the state, right-click on the name State1. Choose “edit” from the context menu and you will be taken to the State Edit view. Change the name to “Choose_Customer”. Setting the Canvas Size Also, while we are on States, let’s explicitly set the size of both states. To set the size, click anywhere in the canvas (the blank white area) of the state to select it, and then find the Size and Position section of the Properties panel. Set the properties of both States as follows:
Designing the Customer Detail State Now let’s copy the Label control from the Choose_Customer state and paste it to the Customer_Detail state. This will preserve all the properties of the Label control you have already set and save you the trouble of having to redo it. To copy that Label, click on the “Choose_Customer” name from the State dropdown box at the top of the Design panel to bring that state into focus. Click on the label at the top that says “Customer Information” and copy it (Ctl + C). Next, select the Customer_Detail state from the State dropdown list at the top of the screen and paste (Ctl + V) the label you just copied to the Customer_Detail state. Because you set the Constraints for this control on the first state when you paste it to the new state, it will automatically be positioned in the same spot as the first state. Now that we have the second state created, it’s time to add the components that we need to it so we can display the customer detail data. Scroll down in the components section on the lower left side of the screen (in Design view) and click on the Tab Navigator control and drag it to your Customer_Detail state. The Tab Navigator control is a great way to show a lot of information in a small amount of real estate. You can create as many tabs as you need to show as much data as you want. In addition, each tab can contain any other control, or even Flash objects you get from other places. (See the first article in this series for an example of using Flash objects created by other users.) For the Customer_Detail Tab Navigator control, we will need to show the customer name, address, and the last item and quantity they purchased. You can, of course, display any amount of data you want in your own projects, but in order to keep this tutorial manageable we will only show a small amount of data. Given that we are only going to be showing such a small amount of data, we could probably fit it all onto a single screen (tab), but since we are using a tab control, let’s arrange the data so that the customer name is on one tab, their address is on a second tab, and the last item and quantity they purchased is on a third tab. That means we need three tabs. To add tabs to the tab control, simply click on the “+” symbol at the top of the tab control. You will be prompted with a panel like the one shown in Figure 5. Change the label of this tab to “Address”. GRAPHIC5
Repeat that last step and name the label “Items”. We also need to change the label of the original tab to “Name”. To change the original name, click on the first tab (currently labeled “Tab 1”) and change its property Label to “Name”. Also, while you’re in the Properties tab, set the ID to “tcCustInfo”. You should stretch the size of the Tab Navigator out so that it fills up more of the main screen and so that it is big enough to actually show the data. To resize the Tab Navigator, control move your cursor to any of the edges, and click on one of the resizing controls there, and drag it to the size you need. Finally, we need to add some Labels and Text Input boxes to each of the Tabs so that we have a place to display the data. The data that we will be returning from the iSeries will be as follows:
Therefore, we will need a label for each and a text input box for each. To get started, make sure you are on the Name tab and then drag two Labels and two Text Input boxes to the tab. Set the properties for each as follows:
Arrange them so that you have one Label next to one Text Input control and stack them on top of each other. Now let’s add the data fields for the second tab. Click on the Address tab at the top of the Tab Navigator panel and drag five Label controls and five Text Input controls to the display. Arrange them so that you have one Label next to one Text Input control and stack them on top of each other. Set the properties for each as follows:
For the Item screen, we need three Labels and three Text Input controls. Set the properties for each as follows:
One last, and very important, note: In the Properties panel for each control, make sure that you set the “In States:” property to “Customer_Detail” for each label and text input. If you leave it set at the default value of “All States” you can run into issues where the data does not display correctly. To prevent that, set the “In States:” property to “Customer_Detail” to indicate that this control should only display when this state is active. Finally, we want to add a button and a couple more label controls. The label controls are to let the user know what customer was selected on the first State and the button will allow the user to select a different customer. So drag a button control and drop it below the Tab Navigator control and set its properties as follows:
You may also want to set its color to the color you chose for the button in the first state, just for consistency’s sake. Add two label controls and place them side-by-side below the Customer Information label at the top of the screen. Set your two label properties as follows:
When you are done, your Customer_Detail state should like that shown in Figure 6, Figure 7, and Figure 8.
Changing Between States and Creating a Function Now that you have designed the GUI, we want to add a little bit of intelligence to it so that your user can change between states. To do that, we have to set the “On Click” event for each button. Go to the “Choose_Customer” state and click on the button to select it. Locate the “On Click:” box in the Properties panel and type getCustomer(); in that box. This is telling Flash Builder that when the user clicks that button, to execute the function named getCustomer(). At this point, the getCustomer() function does not yet exist so we will create it next. Click the Source tab at the top of the Flash Builder workspace (next to the Design tab) and go into Source view. To create a function, you will need to set up a section of the Application code that allows you to run ActionScript. ActionScript is the language used by Flash Builder (and Flash and a few other Adobe tools) that allows you to give your application intelligence and functionality and allows you to interface directly with the various visual components. A complete description and how-to of the basics of ActionScript are outside of the scope of this article, but I strongly urge you to explore ActionScript programming on your own so that you can get the most out of it. For now, you need to insert a Script block where all of your ActionScript will live. To do that, in Source view, locate the <fx:Declarations> </fx:Declarations> block. Position your cursor right after </fx:Declarations> and type in <fx:Script>. Auto-insert will prompt you to select <fx:Script>. Allow it to find it for you and press Enter. This will insert the following bit of required code for you: <fx:Script> <![CDATA[ ]]> </fx:Script> You will enter all of your ActionScript code between the <![CDATA[ and ]]> blocks. Add the following lines of code right after the <![CDATA[ line: [Bindable] private var customerSelected:String; Using the [Bindable] keyword is how you specify to ActionScript that the variable defined after it will be alerted when its value changes anywhere within the code. So that if you set a value for the variable customerSelected in one function, all other functions will know what that value is. If you do not use the [Bindable] keyword, then only the function you change the value in will know about it. We will use the customerSelected variable to store the value that the customer selects from the dropdown list control. To create the getCustomer() function, next, add the following lines of code. protected function getCustomer():void { // Retrieve the value selected from the dropdown list customerSelected = ddlCustomers.selectedItem // change the state to the Customer_Detail state currentState='Customer_Detail'; // set the lbCustomer control's label value to the value selected lbCustomer.text = customerSelected; } Preload the Dropdown List Control The next thing we want to do is to load the Dropdown List control with some values. To do that we need to first define the values it will display with an ArrayList and then set the Dropdown List control’s data value to use that ArrayList as the Data Provider. Scroll back to the top of your ActionScript source and locate the <fx:Declarations> section. Insert the following ArrayList code just after the <fx:Declarations> line: <s:ArrayList id="customerNumbers"> <fx:String>Acme Fishing Poles</fx:String> <fx:String>Sunshine Filet Knives</fx:String> <fx:String>Harry's Hooks</fx:String> <fx:String>Sams Sinkers</fx:String> </s:ArrayList> Finally, to tell the Dropdown List control to use this ArrayList, locate the Dropdown List control in the source code, and set its dataProvider property to “customerNumbers” as follows: <s:DropDownList id="ddlCustomers" includeIn="Choose_Customer" x="471" y="144" width="167" fontFamily="Verdana" fontSize="18" dataProvider="{customerNumbers}" > </s:DropDownList> You could also have set the dataProvider value from the Properties panel in Design mode. We also need to set the On Click value for the “Choose New Customer” button on the Customer_Detail state. Go to the Customer_Detail state and select the Choose New Customer button. Set its On Click value to setDefaultState();. Then add the following lines of code to your ActionScript to create the setDefaultState function. This code will do nothing more complex than set the currentState to “Choose_Customer” state. //************************** // Set the default state //************************** protected function setDefaultState():void { // change the state to the default state currentState='Choose_Customer'; } That’s it! You are now ready to try it out! Click the Run menu item or click the white arrow in a green circle at the top of the Flash Builder IDE to launch the project. Try clicking on the Dropdown List control and selecting a customer and then clicking the Get Customer Information button. You should be taken to the Customer_Detail state and you should see the customer name you selected displayed in the label at the top of your screen. Clicking the Choose New Customer button will take you back to the Choose_Customer state. Connecting It To Your iSeries The complete source code for this project can be downloaded here. To use it, unzip the files to your Documents directory on your PC and then open the workspace from that folder. For example, if you unzip the files to C:UsersShannonMy Documents it will create a directory structure under that named CustomerProjects. So the Flash Builder workspace you open would be C:UsersShannonMy DocumentsCustomerProjects. In my next article, I will show you how to take the GUI you created here and integrate it with your iSeries data using a Web service running on your iSeries. From there you can adapt this program to your own individual requirements and use this code as the basis for displaying your own company’s information from a browser or even a desktop or mobile application. Stay tuned! Shannon O’Donnell is a freelance writer who specializes in the IBM iSeries and Adobe Suite of tools. He can be reached via email here. RELATED STORY Adobe Flash Builder for the iSeries Programmer, Part 1
|
