DATA VISUALIZATION WITH FLASH BUILDER

Size: px

Start display at page:

Download "DATA VISUALIZATION WITH FLASH BUILDER"

Isaac Boyd
5 years ago
Views:

1 DATA VISUALIZATION WITH FLASH BUILDER DESIGNING RIA AND AIR APPLICATIONS WITH REMOTE DATA SOURCES CESARE ROCCHI

2 First published 2011 by Focal Press Published 2017 by Routledge 2 Park Square, Milton Park, Abingdon, Oxon OX14 4RN 711 Third Avenue, New York, NY 10017, USA First issued in hardback 2017 Routledge is an imprint of the Taylor & Francis Group, an informa business Copyright 2011 Taylor & Francis. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means electronic, mechanical, photocopying, recording or otherwise without the prior written permission of the publisher. Notices Knowledge and best practice in this field are constantly changing. As new research and experience broaden our understanding, changes in research methods, professional practices, or medical treatment may become necessary. Practitioners and researchers must always rely on their own experience and knowledge in evaluating and using any information, methods, compounds, or experiments described herein. In using such information or methods they should be mindful of their own safety and the safety of others, including parties for whom they have a professional responsibility. To the fullest extent of the law, neither the Publisher nor the authors, contributors, or editors, assume any liability for any injury and/or damage to persons or property as a matter of products liability, negligence or otherwise, or from any use or operation of any methods, products, instructions, or ideas contained in the material herein. Library of Congress Cataloging-in-Publication Data Rocchi, Cesare. Data visualization with Flash builder : designing RIA and AIR applications with remote data sources / Cesare Rocchi. p. cm. ISBN (pbk.) 1. User interfaces (Computer systems) 2. Information visualization. 3. Cloud computing. 4. Flash (Computer file) I. Title. QA76.9.U83R '8--dc British Library Cataloguing-in-Publication Data A catalogue record for this book is available from the British Library. ISBN 13: (hbk) ISBN 13: (pbk)

3 Dedication Even when there is only one author on the cover, a book is the fruit of a choral work. The content in the following pages would have never been possible without the help of the folks at Focal Press. First I want to thank Matthew David: besides being a great writer he is also a great editor. My biggest thanks goes to Paul Temme, who offered me the possibility to write this book. I want to thank Anais Wheeler: your check in messages helped me to deliver on time. Laura Aberle has been a great manager throughout the review process. Thanks to Carlin Reagan for organizing the schedule to match all the deadlines. Finally, I want to thank Giorgia and my family for supporting me.

5 CONTENTS Section 1 Your First Information-Rich Application...3 The Flex Framework... 3 Flash Builder... 5 Creating an Empty Application... 7 How to Run/Debug... 9 Using the Design View... 9 The Application Tag Namespace Visual Components Sizing Components Including Scripting ActionScript Classes Object-Oriented Support in Flash Builder Binding Very First Piece of GUI in Flash Builder Loading Data from Remote Locations Importing a Service Building a Data Model Refining the Application Conclusion v

6 vi CONTENTS Project 1: Music Store Browser...63 Description of the Project Creating the Layout Adding States Adding Backend Capabilities Connecting Backend to User Interface Adding State-Switching Logic Possible Improvements Section 2 Building User Interaction...83 Events The Login Scenario Events in ActionScript Custom Events Flex 4 Components Debugging Conclusion Project 2: Tweets on a Map Description of the Project Building the Layout Configuring Twitter Web Service Searching on Twitter Configuring Google Maps Web Service Displaying Information on a Map Possible Improvements Section 3 Charting and Multimedia Building Charts in Flex Chart Types

7 CONTENTS vii Flex Built-in Chart Components My First Chart in Flex Data Tips Extending Our First Chart Example Effects Styling Other Chart Components Working with Video and Audio Conclusion Project 3: YouTube Inspector Description of the Project Design of the User Interface Configuration of the Web Service Showing Videos in the List Showing the Video Stop Current Video Displaying Data on the Chart Possible Improvements Section 4 Building AIR Applications Architecture of an AIR Application Differences between Web and Desktop Applications First Dummy Application Detect Storage Devices Interacting with the Database Create a Database Building a Simple Address Book Deploy an AIR Application Interacting with Native Processes Conclusion

8 viii CONTENTS Project 4: Flickr with Cache Description of the Project Design of the User Interface Set Up the Web Service Creation of the Item Renderer Implementation of the Cache Mechanism Creation on the CacheItem Usage of the CacheItem Usage of the FlickrCache When Offline Possible Improvements Section 5 Customizing the User Interface mx and Spark Components Themes, Skins, and Styles Styling Single Components Skinning Conclusion Project 5: Customizing Projects Description of the Project Design of the User Interface Grouping Projects Together Creating the Application Skin Making the Application Draggable Creating the Close Button Customizing the Text Input Customizing the Combo Box Possible Improvements Index Companion website:

9 1SECTION

11 YOUR FIRST INFORMATION- RICH APPLICATION In this section you will learn to build a Flex application. You will discover that Macromedia Flex Markup Language (MXML) is a great markup language to quickly create a working application. The application will load data from RSS and will display information accordingly. To get to this result, we need some theory about the Flex framework and to get acquainted with the Flash Builder IDE. Are you ready? The Flex Framework It all began when somebody at Adobe woke up and said: Sometimes I feel I am resolving similar problems each time I work on a new project. After some mumbling, a friend replied: Why don t we put in the same place a set of solutions to the repetitive problems you solve each time? At that moment Flex was born. Flex is not a place it is a framework. Although there is some dispute on the definition of the word framework, I like mine: Something that helps to connect different components of a project; it can encompass libraries, patterns, and a scripting language. Flex is all of this: it embeds a library of components (visual and nonvisual) and a scripting language (ActionScript 3), and implements a set of patterns to adopt in different situations. There are a few reasons for this: It is easier to develop. It favors the team to work consistently. It aggregates objects/components into something useful. It reduces repetitive tasks. It favors the creation of reusable code. It decouples dependencies between components. In this section I will give you a brief introduction of the Flex framework. Although you will create applications with Flash Builder most of the time, it is nonetheless important to know what is under the hood. 3

HTML5 MOBILE WEBSITES

HTML5 MOBILE WEBSITES HTML5 MOBILE WEBSITES TURBOCHARGING HTML5 WITH jquery MOBILE, SENCHA TOUCH, AND OTHER FRAMEWORKS MATTHEW DAVID AMSTERDAM BOSTON HEIDELBERG LONDON NEW YORK OXFORD PARIS SAN DIEGO