CSC 2720 Building Web Applications FLEX – Data Binding.

Slides:



Advertisements
Similar presentations
Flex Component Life-cycle. What is it? Sequence of steps that occur when you create a component object from a component class. As part of this process,
Advertisements

Adobe Flex as RIA Adobe Flex as RIA Developed by Sagar K Developing Rich Internet Applications with Adobe Flex, ActionScript.
JavaScript Objects - DOM CST 200 JavaScript. Objectives Introduce JavaScript objects Introduce Document Object Model Introduce window object Introduce.
ColdFusion 8 Ajax Features Overview Scott Bennett
Tonight’s JavaScript Topics 1 Conditional Statements: if and switch The Array Object Looping Statements: for, while and do-while.
The Web Warrior Guide to Web Design Technologies
Bind Controls to Data by Using Data-Binding Syntax Web Development Fundamentals LESSON 2.5.
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
Chapter 31 Basic Form-Processing Techniques JavaServer Pages By Xue Bai.
ITCS 6010 XML Grammars. What is a Grammar? Specifies what can be said—all the possible sentences and phrases that can be recognized Includes entry via.
RIA - Flex and ActionScript RIA – Flex and ActionScript CS590 - Ashok Sahu.
Creating Web Page Forms
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
RIA & Adobe Flex Yunhui Fu 11/05/2008. What’s RIA RIA (Rich Internet Applications) –web applications which look and perform like desktop applications.
© 2008 The McGraw-Hill Companies, Inc. All rights reserved. ACCESS 2007 M I C R O S O F T ® THE PROFESSIONAL APPROACH S E R I E S Lesson 4 – Creating New.
Flex data binding pitfalls: 10 common misuses and
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 6 Dynamic Documents With JavaScript.
Parsley Introduction Kui Huang Oct. 13, Topics Background Dependency Injection Object Lifecycle Message Bus Sample FW Extensions.
Suzanne J. Sultan Javascript Lecture 2. Suzanne J. Sultan function What is a function> Types of functions:  Function with no parameters  Function with.
Integrating JavaScript and HTML5 HTML5 & CSS 7 th Edition.
LiveCycle Data Services Introduction Part 2. Part 2? This is the second in our series on LiveCycle Data Services. If you missed our first presentation,
COP INTERMEDIATE JAVA Designing Classes. Class Template or blueprint for creating objects. Their definition includes the list of properties (fields)
2006 Adobe Systems Incorporated. All Rights Reserved. 1 MAX 2006 Flex Best Practices: Applying Design Patterns and Architecture Joe Berkovitz Chief Architect,
1 Data Bound Controls II Chapter Objectives You will be able to Use a Data Source control to get data from a SQL database and make it available.
1.  Use the anchor element to link from page to page  Configure absolute, relative, and hyperlinks  Configure relative hyperlinks to web pages.
Using Client-Side Scripts to Enhance Web Applications 1.
Dreamweaver MX. 2 Overview of Templates n Templates represent a web page design or _______ that will be common to multiple pages. n There are two situations.
CSC 2720 Building Web Applications FLEX –Working with Remote Data.
Lab 3: Actionscript User Interface Lab: GUI Lab Sep. 11 th, 2012.
Button and Textbox. Input  Input objects are used to obtain input from the user viewing the webpage. They allow the user to interact with the Web. 
JAVA Classes Review. Definitions Class – a description of the attributes and behavior of a set of computational objects Constructor – a method that is.
Session 8: Working with Form iNET Academy Open Source Web Development.
ASP.Net, Web Forms and Web Controls 1 Outline Session Tracking Cookies Session Tracking with HttpSessionState.
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All rights reserved Chapter 41 JavaServer Face.
JavaScript, Fourth Edition
DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex for Flash Developers Sho Kuwamoto Sr. Director, Engineering Adobe Systems, Inc.
BPS Prototype August 10, User Requirements See a graph visualization for a selected input file Modify the visualization layout to explore the graph.
Lesson 16. Practical Application 1 We can take advantage of JavaScript and the DOM, to set up a form so that the first text box of a form automatically.
Unit-IV - Flash Player - Flex framework - MXML introduction - Action script introduction - Working with Action script - Flex data binding - Common UI components.
14 Copyright © 2004, Oracle. All rights reserved. Enhancing the User Interface.
Modify Tables and FieldsModify Tables and Fields Lesson 4 © 2014, John Wiley & Sons, Inc.Microsoft Official Academic Course, Microsoft Word Microsoft.
Dependency Property Mahender Senior Software Engineer United Health Group.
Chapter 6 Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc.Slide 1.
JavaScript Events Java 4 Understanding Events Events add interactivity between the web page and the user You can think of an event as a trigger that.
Programming in AS3. AS3 vs MXML MXML is content/structure AS3 ties in with the MXML to create the a functioning program.
UI Tags of Struts2. May 12, 2011 Struts 2.x Tags in detail:- The Struts 2.x tags can be classified under the following categories. i) UI Tags ii) Control.
Data Mangling The key to data-management within your Flex Applications.
JavaScript Events. Understanding Events Events add interactivity between the web page and the user Events add interactivity between the web page and the.
12 Copyright © 2004, Oracle. All rights reserved. Using ADF Struts Components.
Informatics Computer School CS114 Web Publishing HTML Lesson 4.
 2001 Prentice Hall, Inc. All rights reserved. Outline 1 JavaScript.
>> Form Data Validation in JavaScript
JavaScript, Sixth Edition
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
“Under the hood”: Angry Birds Maze
3 Introduction to Classes and Objects.
© 2016, Mike Murach & Associates, Inc.
Web Systems Development (CSC-215)
Invoking Java Code from JSP
SAS in Data Cleaning.
Event Driven Programming & User Defined Functions
Forms, cont’d.
Functions, Regular expressions and Events
Using Templates and Library Items
Lesson 5: HTML Tables.
Process flow for rate limit
Murach's JavaScript and jQuery (3rd Ed.)
Presentation transcript:

CSC 2720 Building Web Applications FLEX – Data Binding

Data Binding  A source property is associated with a destination property such that whenever the source property change, the destination property is automatically updated with the value of the source property.

Performing Data Binding  { expression }, a data binding expression, is used in an attribute's value to establish data binding.  "Bindable" properties within a data binding expression automatically become the source property.  In the above example,  myTextInput.text becomes the source property.  The label's " text " becomes the destination property.

Performing Data Binding <mx:Binding source="myTextInput.text" destination="myLabel.text" />  Data binding can also be established using the element.

Using functions in the source of a data binding expression <![CDATA[ private function doubleStr(str:String): String { return str + " " + str; } ]]> Within { … }, we can  Invoke the method of the source property  Use the source property in an expression  Use the returned value of a function

Data Binding with Multiple Source and Destination Properties

Bindable Properties  A bindable property is a property that emits a property change event when its value changes.  Only a bindable property can be used as a source of a data binding.  Most properties on Flex UI controls are bindable properties.

Binding an ArrayCollection to a List control <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var listData: ArrayCollection = new ArrayCollection( [ "Value 1", "Value 2" ] ); ]]>  [Bindable] is a metadata that makes a property (or a class) bindable.  Must be specified before the access modifier of the property/class.

Binding an ArrayCollection to a List control Value 1 Value 2  A property created using MXML tags is bindable by default.

Exercise  Create a form that would update the message at the bottom whenever the input changes. John FemaleMaleGender Last Name First Name Hi! Mr. John Doe Doe

References and Resources  Adobe Flex 3.0 For Dummies, by Doug McCune, Deepa Subramaniam. Wiley Publishing, Inc. 2008