Henry Efor Simulation and Optimization User Interface: A Flex Application Helsinki Metropolia University of Applied Sciences Bachelor of Engineering Information Technology Bachelor’s Thesis 4 March 2011 Author Henry Efor Title Simulation and Optimization UI (A Flex Application) Number of Pages 54 pages + 10 appendices Date 4 March 2011 Degree Bachelor of Engineering Degree Programme Information Technology Specialisation option Software Engineering Jaana Holvikivi, Principal Lecturer Instructors Taru Sotavalta, Language Instructor Jussi Rasinmaki, Instructor The goal of this project was to explain the steps taken to create a Graphical user interface (GUI) for the SIMO forest management-planning framework. This was achieved using the Flex Flash builder. The SIMO UI was built as a client-server. The method used in the project was to devise an experimental model that would make it easy to build the GUI with fewer codes and still makes it flexible and easy to maintain in the near future.Mapping the XML directly with the components model was finally used since it is the only popular method used frequently in encoding and decoding XML documents. The results obtained showed that the Flex Adobe datagrid was not fully developed for the project and as such, I had to create a custom datagrid, the datasheet. Furthermore, as at the time of building the GUI, there was no credible way to work with namespaced XML. This problem was later solved through a series of research and writing custom-components to suit the application.In conclusion, the goal of the project was achieved, flexibility and maintainability, but at the expense of excess codes. Keywords SIMO, XML, FXG, MXML, RIA, VM, GUI, DOM, AVM, UI, UX 3 Contents 1 Introduction............................................................................................................................... 4 2 Theoretical Background.......................................................................................................... 5 2.1 Flex Overview.................................................................................................................................................... 5 2.2 Rich Internet Application (RIA)................................................................................................................. 7 2.3 ActionScript 3.0 ................................................................................................................................................ 8 2.4 MacroMedia XML and MXML...................................................................................................................... 9 3 Flex 4 Features ........................................................................................................................11 3.1 Themes...............................................................................................................................................................11 3.2 Spark Components ........................................................................................................................................12 3.3 Flash XML Graphics (FXG) .........................................................................................................................13 3.4 States...................................................................................................................................................................13 3.5 Groups and Layout ........................................................................................................................................14 3.6 Skins ....................................................................................................................................................................14 3.7 Localization ......................................................................................................................................................15 3.8 Events..................................................................................................................................................................17 3.9 Architecture .....................................................................................................................................................19 4 Flex 4: Controls and Containers...........................................................................................20 4.1 Containers.........................................................................................................................................................20 4.2 Controls..............................................................................................................................................................21 5 SIMO User Interface Development Cycle and XML Documents ....................................22 5.1 The SIMO DataSheet .....................................................................................................................................24 5.2 The Model..........................................................................................................................................................26 5.2.1 Mapping XML Documents Using XML Schema Documents......................................................26 5.2.2 Mapping XML Documents Using A Mapper As Library ........................................................30 5.2.3 Mapping XML Documents Directly As Data Source ...............................................................31 5.3 Parameter Table UI.......................................................................................................................................32 6 Discussion ................................................................................................................................50 7 Conclusion................................................................................................................................54 References ...................................................................................................................................55 Appendices ..................................................................................................................................59 Appendix 1-The SIMO UIs MECHANISM .....................................................................................................59 Appendix 2- The parameterWindow.mxml ...............................................................................................60 4 1 Introduction In the summer of 2010, I started my internship with simosol Oy. Simosol Oy is a company established in 2008 that helps its clients in better decision-making about forests by building software that adapts to the needs of the client. The company is into the consulting and training of farmers so that they would increase their investment and reduce operation costs. In achieving these goals, I was faced with the task of building the User Interface of the simulation and optimization (SIMO) framework. SIMO is a forest management-planning framework that helps the client to build different forest growth and yield simulators coupled with optimization methods and applying the combination to the management of forestry. The SIMO framework project was first developed at the department of Forest Resource Management at the University of Helsinki. The project is a joint one with other agencies such as UPM-KYMMENE LTD, Tornator Oy, Metsämannut Oy, and Metsähallitus Forestry Development Center Tapio. SIMO is an open-source project that is written in Python and as such, runs on various platforms as Windows, Linux and OS X.Simosol Oy is now the maintainer and main developer of SIMO. The goal of this project is to explain the steps taken to create a Graphical user interface (GUI) for the SIMO forest management-planning framework. This will be achieved using the Flex Flash builder and Action script. The SIMO UI is built as a client-server. The server would be responsible for the management of XML documents by serving the XML documents to the client and will store them once the client returns the modified XML document. It will also do structural and content validation for the XML documents. The server part is outside the scope of this project. The project will concentrate on the client side development. 5 2 Theoretical Background Before the steps taken to build the SIMO UI are explained, it is worthwhile to discuss the tool used in achieving the task. Simosol Oy wanted to use the same codebase for both web and desktop applications. In addition, the company wanted to do this quickly using a framework that already has a rich set of ready UI controls and components a framework that is extensible and design-friendly. There was only one framework that could do that – Flex. I had never worked with Flex but I soon realized that it is easy to use and it is convenient to build a Rich Internet Application (RIA) that can be deployed on both web and desktop. In this chapter, I will explain the Flex framework. The Flex framework is a stack of classes that makes it easy to build rich-client side applications on top of the Action script implementation. Action script classes are compiled into byte code that runs within flash virtual machine (VM). The framework has already built-in containers, layouts, and controls that are all implemented in Action script. The framework gives the programmer access to the source code for the entire Flex framework and extend those components if the programmer has a special need since the source