7.3 developing using adobe flex

213

Developing Using Adobe Flex 7.3

7.3 Developing Using Adobe Flex

This section describes the necessary developments in the Adobe Flexenvironment, including the creation of the basic structure (projectfiles and creating components), design of the application, develop-ment of the “Planning” and “Time-Recording” components, and thereporting analysis using Flex charts. The section concludes with afinal test.

AdvantageDevelopment in Adobe Flex Builder can be conducted outside of theSAP environment, provided the interface has been defined. This is adecisive advantage over traditional BSP applications that presenttheir data on the basis of HTML.

7.3.1 Project Structure of the Application Front End

We will develop the front end of the planning and time-recordingtool in Adobe Flex Builder 2. Once you have started Flex Builder, youcan use a very powerful Eclipse-based development environment.

Project filesIn the first step, we must define the necessary files for our project.The project contains the Flex project, including the MXML applica-tion, the associated MXML components, and the ActionScript filesthat are to contain the application logic.

You can start Adobe Flex Builder from the Windows Start menu.Usually it is installed in Start � Programs � Adobe � Adobe FlexBuilder. Once you have successfully started Adobe Flex Builder, youcan create a new project via the following menu path: File � New �

Flex Project (see Figure 7.50).

Note

Appendix A contains the complete code listings of the files described inthis chapter. You can also download these listings from the web site thataccompanies this book on http://www.sap-press.com.

214

Developing a Sample Application7

Selecting theFlex server

A dialog opens in which you can make the necessary settings for theproject (see Figure 7.51). In the first step, you must select the Flexserver on which you want to create the application.

Figure 7.50 Creating the Flex Project

Figure 7.51 Selecting the Flex Server

215


� The ColdFusion Flash Remoting Service option is an advancedapplication that requires the Flex Data Services 2 and ColdFusionMX 7.1. This application is needed in order to combine Flex andColdFusion applications.

� Flex Data Services are applications that have been extended by anew architecture (data service architecture) and charting compo-nents. They enable you to integrate other technologies with Flex(see Figure 7.52).

Because we haven't installed any Flex server for our example, youmust choose None here and continue. This is the default setting forthe creation of Flex projects.

Unique naming conventions

In the next step, you must assign a name to the project. Here youshould choose the same name as the one you choose for the packagein the ABAP Workbench (Z_DZT_BOOK) in order to attain a uniquenaming method (see Figure 7.53).

You can keep the Use default location setting. This setting specifiesthe directory in which the files will be stored. Of course, you can alsouse a different directory for the project.

Once you have defined the name of the project, you can create addi-tional packages and directories that you want to use later on. Firstyou should create a Source folder called src that is supposed to con-tain the MXML files (see Figure 7.54).

Then you can conclude the creation of the Flex project by clickingthe Finish button.

Figure 7.52 Flex Data Services

J2EE Server/Servlet Container

Flex Applicationin Flash Player

Flex Data Services

EJBs Web Services Java Beans

HTTP/SOAP/AMF

216


ActionScript folder Having created the project, you can now begin developing. But firstwe'll create some more files in order to define the basic structure ofthe application.

Figure 7.53 Assigning a Project Name

Figure 7.54 Creating Directories

217


Right-click on the project name and select New � Folder from the con-text menu to create a new folder (see Figure 7.55). We create thefolder as for our project. This folder is supposed to contain theActionScript files.

Creating the MXML files

The src directory that we defined during creation of the projectalready contains the file Z_DZT_BOOK.mxml, which is the main page ofthe application. The main page—and only the main page—containsthe <mx:Application> tag including the associated namespace decla-ration.

Because our application will consist of several sub-sections it makessense to separate those sub-sections into individual MXML compo-nents. We will now create the following files one after the other.

� plan.mxml

� report.mxml

� tabcontrol.mxml

� tr.mxml

To do that, you must right-click on the src button and select MXMLComponent. The project directory should now look like the oneshown in Figure 7.56.

Figure 7.55 Creating a New Folder

218


ActionScript files The as directory in which we want to store the ActionScript files isdefined in a similar manner. For our application, you need the fol-lowing files.

� application.as

� plan.as

� global.as

� report.as

� tr.as

The final project directory has the structure shown in Figure 7.57.

Figure 7.56 Created MXML Files

Figure 7.57 Project Directory After Creating the Files

219


7.3.2 Basic Structure of the Frontend

TabstripsWe want to implement the functionality of the sample applicationusing tabstrips. That is to say, we will display the Planning, TimeRecording, and Reporting functions in separate tabs. Tabstrips pro-vide a very useful technique for displaying many pieces of informa-tion clearly on one page.

The main page is divided into the login section and the tabstrips thatare stored in the file tabcontrol.mxml. Figure 7.58 shows the logicalstructure of the file.

You can implement this rough structure in MXML, as shown in List-ing 7.31. To include this source text in the application, change fromthe Design view into the Source view.

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"layout="absolute" xmlns:comp="*"width="900" height="700">

<mx:Canvas id="cv_login"><mx:VBox>

</mx:VBox>

</mx:Canvas><mx:Canvas id="cv_tabs">

<mx:VBox><comp:tabcontrol/>

</mx:VBox>

Figure 7.58 Logical Structure of Files

Z_DZT_BOOK.mxml

tabcontrol.mxml

report.mxml

ze.mxml

dispo.mxml

220


</mx:Canvas></mx:Application>

Listing 7.31 Application File Z_DZT_BOOK.mxml

Creating thenamespace

The namespace comp must be created in order to access components.Although it is not necessary to reserve a specific namespace for thispurpose, doing so reduces the degree of complexity of the sourcetext considerably. The application is divided into two <mx:Canvas>areas that contain the login section and the Tabstrip component.The size of the application is defined centrally in the <mx:Applica-tion> tag and is specified with 900 by 700 pixels here.

The tabcontrol.mxml component contains the Planning, TimeRecording, and Reporting tabstrips. Excerpts from these are shownin Listing 7.32.

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"xmlns="*" xmlns:comp="*">

<mx:VBox><mx:Label text="Planning Manager"

fontFamily="Arial" fontSize="20"fontWeight="bold"/>

<mx:TabNavigator height="650" width="850"><comp:report label="Reporting"/><comp:plan label="Planning"/><comp:tr label="Time Recording"/>

</mx:TabNavigator></mx:VBox>

</mx:Canvas>

Listing 7.32 Excerpts from MXML Component tabcontrol.mxml

Tab labels As you can see, no <mx:Application> tag is included here because weare dealing only with a component instead of the main file. Thelabel tag of the individual components in the <mx:TabNavigator>tag is used to define the labels of the tabs, while the superordinate<mx:Label> tag specifies the label.

The application defined in this way can already be displayed in thedesign mode of Flex Builder. Note, however, that the components donot yet contain any data. Figure 7.59 shows the labels of the tabs as

221


well as the label defined in the tabcontrol.mxml file (Planning Man-ager).

Listing 7.33 shows the complete file tabcontrol.mxml. The file con-tains a short script section that can receive data from the main appli-cation and distribute this data across the components. We'll describethis process in more detail later in this chapter.

<?xml version="1.0" encoding="iso-8859–1"?><mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"

xmlns="*" xmlns:comp="*">

<mx:Script><![CDATA[

[Bindable]public var tab_persno:String;

[Bindable]public var tab_url_plan:String;

Figure 7.59 File tabcontrol.mxml in Design Mode of Flex Builder

222


[Bindable]public var tab_url_tr:String;

]]></mx:Script><mx:VBox>

<mx:Label text="Planning Manager"fontFamily="Arial" fontSize="20"fontWeight="bold"/>



<mx:TabNavigator height="650" width="850"><comp:report label="Reporting"

l_persno="{tab_persno}"/><comp:plan label="Planning"

l_persno="{tab_persno}"l_url="{tab_url_plan}"/>

<comp:tr label="Time Recording"l_persno="{tab_persno}"l_url="{tab_url_tr}"/>

</mx:TabNavigator></mx:VBox>

</mx:Canvas>

Listing 7.33 File tabcontrol.mxml

Now that you have defined the basic structure of the application, youcan use it for your further development work.

7.3.3 Developing the Planning Component

Both the planning and time-recording components are referred to asrecording components. This section describes step by step how youcan present the planning component and integrate it with the backend, while Section 7.3.4 describes the same procedure for the time-recording component.

Structure ofthe planning

component

We want to structure the planning component in such a way that youcan enter planning data on the left-hand side and display the data onthe right-hand side. Our goal is to design the layout of the planningcomponent so that it looks like the one shown in Figure 7.60.

223


Layout components

As a rule, Flex positions individual components below each otherwhen they are integrated into the layout. To avoid this, you mustencapsulate components in layout areas: <mx:HBox> and <mx:VBox>.The HBox component groups elements at the horizontal level, whilethe VBox component groups them at a vertical level.

As you can see in Figure 7.60, the planning component is dividedinto two areas: the area on the left is used to enter data, while thearea on the right outputs data. Both areas are separated by a<mx:HBox> tag.

<mx:HBox>

</mx:HBox>

The necessary fields for data entry are the Planning Entries label, theinput fields, and the Submit button, all of which must be displayedone above the other. For this purpose, the elements on the left mustbe subdivided in a <mx:VBox> tag. The same holds true for the right-hand side that consists of the month, a table, and two buttons. List-ing 7.34 shows the structure with these layout elements.

Figure 7.60 Layout of the Planning Component

224


<mx:HBox><mx:VBox>

</mx:VBox>

<mx:VBox>

</mx:VBox>

</mx:HBox>

Listing 7.34 Layout Elements of File plan.mxml

Left-Hand Side of the Planning Component

You can now add functional elements to the two sides. Once youhave defined the function module for adding planning data (see Sec-tion 7.2.3), the personnel number, date, and activity are required.The personnel number is defined during the login process so that theuser only needs to select a date and an activity.

<mx:Form> For this purpose, Flex provides a simple technique to integrate theso-called form elements: the <mx:Form> tag. The <mx:Form> tag is sub-divided into separate <mx:FormItem> tags that contain the actual ele-ments. This enables a structured distribution of the components.

The following are required for the planning component.

� The <mx:ComboBox> component is used to list the activities as adrop-down list.

� The <mx:DateField> component provides a convenient way tointegrate a date.

� The <mx:Button> component will present the Submit of the plan-ning component.

Listing 7.35 shows the <mx:Form> tag of the planning component.

<mx:Form id="form_plan"><mx:FormItem label="Activity" required="true">

<mx:ComboBox id="form_activity"dataProvider="" labelField="value"/>

</mx:FormItem><mx:FormItem label="Date" required="true">

225


<mx:DateField id="form_date"labelFunction="df_convert"/>

</mx:FormItem><mx:FormItem>

<mx:Button id="form_submit" label="Submit"click="add_planning()"/>

</mx:FormItem></mx:Form>

Listing 7.35 Form Elements of the Planning Component

FormItem ActivityThe first FormItem element is used to display the activity and con-tains the corresponding label. The required property indicateswhether the item is a mandatory field.

The FormItem element itself contains the ComboBox that is supposedto display the activities. The activities originate in the back end andare transferred to the front end using the data.xml file. The dataPro-vider property is responsible for filling the ComboBox with data. Thisproperty will be described in greater detail later on in this chapter.

It is important that you set the labelField property in order to indi-cate which element of the XML structure you want to display.

FormItem DateThe second FormItem element displays the date and is also assignedthe required property. The FormItem is also assigned the <mx:Date-Field> tag as a child, and this in turn is assigned an ID and a label-Function. labelFunction enables you to format a date according toyour requirements prior to displaying it. The df_convert() functionis implemented later in the global.as file.

The DateField is a component that consists of an input field and abutton that resembles a small calendar. If you click on this button, acalendar opens that facilitates the entry of the date (see Figure 7.61).

Note

The required property is merely a display variant and displays a redasterisk (*) next to the field. It does not check whether the field was actu-ally filled with data.

226


FormItem Button To transfer the user entries to the back end, you need a button. Thisbutton is integrated using the third FormItem element, and it con-tains the <mx:Button> tag. You can assign to this tag an event—in thiscase it is the system event click—that anticipates a function beingprocessed. The add_planning() function that this event receives willbecome part of the file plan.as.

The planning code defined in this way has the layout shown in Fig-ure 7.62.

Right-Hand Side of the Planning Component

Integrating tables The right-hand side of the planning component is used to display theuser entries in a table that covers one month. In Flex, you can inte-grate tables using the <mx:DataGrid> tag. Usually, the tables are auto-matically assigned the table headers.

Two buttons are created that enable forward and backward naviga-tion between the individual months, as shown in Figure 7.63.

As mentioned earlier in this chapter, the elements are encapsulatedin a <mx:VBox> tag in order to position them one above the other.However, the VBox element contains other HBox elements for a hori-zontal display of the month and the two buttons.

Figure 7.61 Easy Input in the DateField

Figure 7.62 Layout of the Form Tag

227


Displaying the month

To display the month, you need two labels within a <mx:HBox> con-struction. The first one is a static text containing the text “Month:”whereas the second label is assigned its text dynamically, which iscarried out by means of a data binding to an ActionScript variable.

<mx:HBox><mx:Label text="Month:" fontFamily="Arial"

fontSize="14" fontWeight="bold"/><mx:Label text="{l_month_displ}" fontSize="14"/>

</mx:HBox>

In addition to defining the text, you must assign both labels the font,size, and display type (e. g., bold). The l_month_displ variable isused for the data-binding process. You can use curly brackets ({}) tointegrate this variable.

Integrating the DataGrid

As mentioned above, you must use the <mx:DataGrid> tag to inte-grate tables. When doing so, you must specify a dataProvider thatcontains the data to be displayed. In our example, that's the contentof XML file plan_get.xml from the SAP server.

Because the columns in the DataGrid are assigned the names of theXML tags4 it makes sense to correct the names manually:

<mx:DataGrid sortableColumns="true" id="dg"dataProvider=""><mx:columns>

<mx:DataGridColumn headerText="Date"dataField="date"/>

Figure 7.63 Right-Hand Side of the Planning Component

4 The <persno> tag would cause the column name persno to be created in theDataGrid.

228


<mx:DataGridColumn headerText="Activity"dataField="activity"/>

<mx:DataGridColumn headerText="Closed"dataField="finished"/>

</mx:columns></mx:DataGrid>

You can correct the column names using the <mx:columns> tag thatcontains the child elements <mx:DataGridColumn>. The tags areassigned the properties headerText (column name) and dataField(displayed element). The column names are defined as follows: Date,Activity, and Closed.

Forward/Back-ward buttons

The two buttons that are supposed to enable the navigation betweenthe months are encapsulated in a <mx:HBox> element that is assignedthe attribute horizontalGap, which indicates the spacing betweenthe individual elements of the HBox.

<mx:HBox horizontalGap="120"><mx:Button label="Previous month"

click="button_click('back',l_month)"/><mx:Button label="Next month"

click="button_click('fwd',l_month)"/></mx:HBox>

Both buttons are assigned the click event, including a correspond-ing function. The button_click function receives the month that iscurrently being processed as well as the direction in which the userwants to navigate.

Implementing the Logic

Now that you have implemented the layout elements of the applica-tion, you can assign logic to them. To enable the adding, reading out,and display of planning data and activities, you must fill the data-Provider of each corresponding component with data. You can dothat using ActionScript functions (implemented in global.as andplan.as) and the <mx:HTTPService> element.

IntegratingXML files

To integrate an XML file that is located on the server, you need the<mx:HTTPService> tag. Because three different XML files must beprocessed in the planning component, you must integrate three<mx:HTTPService> tags correspondingly:

293

Index

A

ABAP Objects 87Absence types 165Access rights

Definition 269Accordion 61ActionScript 22, 85, 127ActionScript class 47

Creation 47ActionScript files 47, 213, 217, 218ActionScript interface 48ActionScript packages 153ActionScript Virtual Machine 23Activity table 159Adobe ColdFusion 38Adobe Flex 11, 15, 20, 22, 35, 87, 275

Documentation 14Product family 24

Adobe Flex Builder 25, 26, 27, 37, 86, 213Design mode 40, 44Source mode 40, 44

Adobe Flex Charting Components 25Adobe Flex Data Services 28Adobe Flex Framework 25Adobe Labs 265ALV grids 86Analyses 158Application 40, 52, 220Application logic 85Application tests 203Arrays 93, 120, 249

Associative 121Generating 91Indexed 120Multidimensional 122

Assignment operators 116Associativity 113Attributes 53, 101Audio files 128

B

Back-end systemsIntegration 272

Backslash 98Backspace 97Bar chart 250Basic calculating operations 113Bit operators 115Blanks 89Block grouping 90Boolean 93, 101, 107Brackets

Curly 90BSP application 163, 184, 185, 233BSP extensions 16Bubbling phase 147Business applications 15Business intelligence 274Business intelligence patterns 274Business Server Pages 15, 16, 22, 87Button 69, 224, 226, 241ButtonBar 68

C

Canvas 54, 62, 63, 220, 234Carriage return 97Cascading stylesheets 17, 24Case sensitivity 88Casting 109

Boolean 110String 111

CHAR12 165CHAR6 236Charts components 42CheckBox 73Class definition 123Class methods 124Classes 123ColdFusion Flash Remoting Service 215ColumnChart 248, 250, 251Columns 228ColumnSeries 251

294

Index

ComboBox 77, 224, 248ComboBox component 225, 234, 240,

254Comment 86Compilation 44, 107Components 42CONCATENATE 95Constants 92Constructor 124Container components 54Control 68Control structures 117Controller 19Controls components 42Conversion 108

Explicit 108Implicit 108

Custom components 42Customizing 156, 272Customizing table 159, 167

D

Dashboard application 25Data binding 227, 229, 237Data elements 158

Creation 166Data model 158Data service architecture 215Data transfer volume 156Data types 93Database tables 166DataGrid 81, 82, 226DataGrid component 234DataGridColumn 228DataProvider 65, 66, 76, 77, 225, 240,

244, 255Creation 231

Date 137, 141Methods 140Properties 137

Date output 141DateChooser 79DateField 79, 80, 224, 240DateField component 225, 238DateFormatter 140, 141, 238DATS data type 238DDIC objects 169Deblocking filter 133

Decimal place 110Declaration 104Development environment 22, 276DHTML 16, 275Display of data 23Dot syntax 89

For methods 90For properties 89

Do-while loop 120Drag-and-drop 17, 20, 25, 126Drilldown effects 24Dynamization 271

E

Eclipse 22, 37, 213ECMA standard 85ECMA-262 88Employee self-service 277Enterprise services 25Escape sequence 97, 98Event handler 60Event listener object 126

F

Flash Player 11, 17, 51Flash plug-in 21Flex applications 11, 18, 272

Compiling 260Components 22Testing 44

Flex componentUse 42

Flex Data Services 29, 215Flex development environment

Download 14Flex file types 46Flex files 46Flex Message Services 29Flex project 213Flex Samples Explorer 48Flex server 214Floating point number 110FLV files 132For loop 118For-in loop 119Form 224, 240, 256Form elements 224

295

Index

Form fields 237FormHeading 257FormItem 224, 225, 240Function modules 170Functions 93, 122Future viability 276

G

Grid 56GridItem 56, 57GridRow 56, 57

H

HBox 59, 223, 227, 239HDividedBox 59Help 86Hoisting 107HorizontalAxis 251HTML 267

Disadvantages 16HTMLB 16HTTP service 54, 228, 231, 234, 238,

242, 244, 246, 255

I

Identifier 92IEventDispatcher 126Image 78Initial values 107Instance methods 125Int 107Interface definition 268Interfaces 125Internal 124Internet Transaction Server 16iView

Creation 262Testing 264

J

Java 86Java Virtual Machine 17

K

KeyboardEvent 146Properties 146

Keywords 92

L

Label 53, 71, 220LabelField 225LabelFunction 225Layout components 42, 54, 223Leading zeros 97Legend 248, 251Line feed 97Line separator 89LinkBar 66, 67List 75, 76, 147LiveDocs 252, 265Login 183, 211Look and feel 17Loops 118

M

Maintainability 53Manager desktop 35Math 144

Mathematical constants 144Static methods 145

Math.abs 99Math.acos 99Math.asin 99Math.atan 99Math.atan2 99Math.ceil 99Math.cos 99Math.exp 99Math.floor 99Math.log 99Math.max 99Math.min 99Math.pow 99Math.random 99Math.round 99Math.sin 99Math.sqrt 99Math.tan 99MenuBar 68

296

Index

Method 101Concat() 95Static 125

Microsoft Visual SourceSafe 22Microsoft Visual Studio 22Mini SAP system 14Model 19Model-driven approach 274MODIFY 171MODIFY ... FROM TABLE 177Modules 53Month-end closing 157MovieClip 93MP3 file

Loading 131Multilingual support 271MVC model 19, 164MXML 22, 51, 85

Application 46, 213Components 46, 213, 217Documentation 54File 52Naming conventions 52Syntax 52

MXML tagCharacteristics 53

N

Namespace 220Naming conventions 156Navigation components 60Navigators 42NetStream 134Not declared 108Null 102Number 93, 98, 107

O

Objects 101, 107, 123, 144, 249Generating 90

Offline applications 31, 267Offline data

Definition 268Offline data volume

Definition 268On2 VP6 Codec 133

OnInitialization 187, 189, 191, 193, 195, 197, 198, 201

Online checkDefinition 268

On-message format 23Operators 112

Logical 116Primary 114

P

Page attributes 187, 189, 198Panel 42, 55Parentheses 91Planning 31Planning table 159Postfix operators 114Presentation logic 18Private 124Process monitor 32Processing sequence 91Project

Creating 38Property settings 42Protected 124Prototype 124PSP elements 165Public 124Push data services 269

Q

Quotation marks 94Double 97Single 98

R

RadioButton 74, 75RadioButtonGroup 74, 75Ranking order 113Recording components 222Relational operators 115Remote Procedure Calls 28Reporting structure 159, 169Required 225Rich client 267Rich Internet Applications 11, 18, 267

Advantages 19

297

Index

Limits 20Structure 18

RPC services 28

S

Sales board 34SAP Analytics 26, 273, 276SAP Code Inspector 156SAP Developer Network 14SAP GUI 15, 21, 270SAP NetWeaver 15, 29, 35, 274

Integration of Adobe Flex 29SAP NetWeaver 2004s 11, 17, 29SAP NetWeaver Portal 29, 260, 277

Content Administration 262SAP NetWeaver Visual Composer 26,

29, 30, 274SAP Web Application Server 16SAP Workflow 32Script 54, 229, 242Security settings

Definition 268Semicolon 91Send() 234Series 251Server technologies 38, 276Shared objects 269Shockwave Flash 23SICF service 186Small Web Format 23Socket connection 270Sorenson Spark Codec 133Sound 128, 129

Events 129Methods 129Properties 129

SoundChannel 128, 130Properties 130

SoundLoaderContext 128SoundMixer 128SoundTransform 128, 130

Properties 130Statement end 91Static 124String 93, 94, 107String processing 95String.charAt 96String.charCodeAt 96

String.indexOf 96String.lastIndexOf 96String.length 97String.slice 96String.split 96String.substr 96String.substring 96String.toLowerCase 97String.toUpperCase 97Style 54Syntax 86System Landscape Directory 263

T

TabBar 66, 67TabNavigator 63, 220Tabs 163Tabstrip component 220Tabstrips 163Tabulator 89, 97Text 72TextArea 71TextField 149

Methods 151Properties 150

TextFormat 152TextInput 70, 147, 240TextInput fields 248, 250, 256Thin client 267Tile 57, 58Time recording 31Time recording table 159Timer 142

Events 142Methods 142Properties 142

ToggleButtonBar 68Tooltip 250Tracking monitor 32Transaction SCIF 186Transaction SE80 164, 233Tree 64, 65Tree structures 65

U

Uint 107Unary operators 114

298

Index

Undefined 93, 102Usability 156, 271UserDefinedNamespace 124

V

Variable namesDynamic 105

Variable types 105Variables 103

Global 106Local 105

VBox 59, 223, 226, 239VDividedBox 59Vector Markup Language 24Video 128, 132

Methods 134Properties 133

Video files 132VideoStream 136View 19ViewStack 62, 63

W

Web Dynpro 15, 17, 37, 275Web service 54While loop 119WYSIWYG 37, 40

X

XML 52, 65XML documents 271XML files 184

Structure 204XML interface 160

Z

ZDZTB_001 159ZDZTB_002 159ZDZTB_003 159ZDZTB_004 159

7.3 developing using adobe flex

Documents