• Blog
  • Info Support
  • Career
  • Training
  • International Group
  • Info Support
  • Blog
  • Career
  • Training
  • International Group
  • Search
logo InfoSupport
  • Latest blogs
  • Popular blogs
  • Experts
      • All
      • Bloggers
      • Speakers
  • Meet us
  • About us
    • nl
    • en
    • .NET
    • 3D printing
    • Advanced Analytics
    • Agile
    • Akka
    • Alexa
    • Algorithms
    • Api's
    • Architectuur
    • Artificial Intelligence
    • ATDD
    • Augmented Reality
    • AWS
    • Azure
    • Big Data
    • Blockchain
    • Business Intelligence
    • Chatbots
    • Cloud
    • Code Combat
    • Cognitive Services
    • Communicatie
    • Containers
    • Continuous Delivery
    • CQRS
    • Cyber Security
    • Dapr
    • Data
    • Data & Analystics
    • Data Science
    • Data Warehousing
    • Databricks
    • DataOps
    • Developers life
    • DevOps
    • Digital Days
    • Digital Twin
    • Docker
    • eHealth
    • Enterprise Architecture
    • Event Sourcing
    • Hacking
    • Infrastructure & Hosting
    • Innovatie
    • Integration
    • Internet of Things
    • Java
    • Machine Learning
    • Microservices
    • Microsoft
    • Microsoft Bot Framework
    • Microsoft Data Platform
    • Mobile Development
    • Mutation Testing
    • Open source
    • Pepper
    • Power BI
    • Privacy & Ethiek
    • Python
    • Quality Assistance & Test
    • Quality Assurance & Test
    • Requirements Management
    • Scala
    • Scratch
    • Security
    • SharePoint
    • Software Architecture
    • Software development
    • Software Factory
    • SQL Server
    • SSL
    • Start-up
    • Startup thinking
    • Stryker
    • Test Quality
    • Testing
    • TLS
    • TypeScript
    • Various
    • Web Development
    • Web-scale IT
    • Xamarin
    • All
    • Bloggers
    • Speakers
Home » Connecting Adobe Flex with Flash Builder 4’s Data Centric Development features to a .Net service based backend
  • Connecting Adobe Flex with Flash Builder 4's Data Centric Development features to a .Net service based backend

    • By Alex van Beek
    • .NET 13 years ago
    • .NET 0 comments
    • .NET .NET
    Connecting Adobe Flex with Flash Builder 4's Data Centric Development features to a .Net service based backend

    This post is about some of the new Flash Builder 4 Data Centric Development features. I’m going to use these features to integrate a Flex 4 front-end, with a .Net back-end. Let’s start with the .Net back-end.

    The .Net Back-end

    The .Net back-end will be a WCF Service Application. We’re going to write a webservice which loads employees. Employees are simple objects with two properties, just an Id and a Name will suffice:

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Web;

    using System.Runtime.Serialization; 

    namespace MyApp

    {

        [DataContract]

        public class Employee

        {

            [DataMember]

            public string Name

            {

                get;

                set;

            }

            [DataMember]

            public int Id

            {

                get;

                set;

            }

        }

    } 

     Nothing to fancy about this class…. Next up is the interface “IEmployeeService”: 

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Runtime.Serialization;

    using System.ServiceModel;

    using System.Text; 

    namespace MyApp

    { 

        [ServiceContract]

        public interface IEmployeeService

        {

            [OperationContract]

            Employee GetEmployee(int id);

            [OperationContract]

            Employee[] GetEmployees();

            [OperationContract]

            void UpdateEmployee(Employee emp, Employee original);

            [OperationContract]

            int AddEmployee(Employee emp);

            [OperationContract]

            void DeleteEmployee(int id);

        }

    }

     Notice that we have defined five methods, but four of them are of particular interest:

    • GetEmployee, this method will find an Employee by id.
    • UpdateEmployee, this method will take two Employees used for updating, first is the updated one, second is the original, used for optimistic concurrency.
    • DeleteEmployee, deletes an Employee by id.
    • AddEmployee, which adds a newly created Employee to the data store.

    Pay attention to the signatures of these four methods, later we will come back to them.

    And finally, the implementing class: 

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Runtime.Serialization;

    using System.ServiceModel;

    using System.Text;

     

    namespace MyApp

    {

        public class EmployeeService : IEmployeeService

        {

            private static int _newId = 3;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; private static List<Employee> _emps =new List<Employee>() {

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; new Employee { Name=“Alex”, Id=1},

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; new Employee { Name=“Chris”, Id=2},

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #region IEmployeeService Members&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; public Employee GetEmployee(int id)

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return (from e in _emps

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; where e.Id == id

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; select e).Single();

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; public Employee[] GetEmployees()

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return _emps.ToArray();

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; public void UpdateEmployee(Employee emp, Employee original)

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Employee old = (from e in _emps

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; where e.Id == emp.Id

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; select e).Single();

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (original.Name != old.Name)

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; throw new ArgumentException(“Data has been modified”);

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; old.Name = emp.Name;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; public int AddEmployee(Employee emp)

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {

    &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;emp.Id = _newId++;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _emps.Add(emp);

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return emp.Id;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; public void DeleteEmployee(int id)

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _emps.Remove((from e in _emps

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; where e.Id == id

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; select e).Single());

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #endregion

    &nbsp;&nbsp;&nbsp; }

    }&nbsp;

    &nbsp;

    &nbsp;

    This is a simple class which isn’t thread safe and uses an in memory list to store it’s data for the sake of simplicity. We could have used the Entity &nbsp;Framework, LINQ To SQL, ADO.NET or any other&nbsp;technology of our choosing. You can find the source of the whole WCF Service Application here.

    The Flex 4 Application

    Now we’re going to build the Flex 4 application, begin with firing up Flash Builder 4 and choose to create a new Flex project. Keep the project settings as follows:

    and click finish. Next up, drag a DataGrid onto the design surface and position it nicely. Make sure&nbsp; your EmployeeService is running and click “Data” from the Flash Builder menu bar. The following screen will appear:

    Choose WebService and click “Next”. In the following screen, enter the uri to the WSDL of your service and click next again. The final screen will appear:

    &nbsp;

    Click “select all” and click finish. Flash Builder will generate some code for us to call the WebService and will create a strongly typed Employee class. The files that are generated starting with an _ are not for our use, any changes we’ll make to them will be lost when regenerating the code. Instead we can use the empty subclasses generated, which do not start with an _. You should notice that the new “Data / Services” panel (usually below the code / design&nbsp;view)&nbsp;becomes populated. In this panel, click on the getEmployees method and drag the method onto the previously created datagrid in the&nbsp;design view:

    After the drag and drop, notice that Flash Builder has generated code to call the webservice&nbsp;in the&nbsp;”creationComplete” event of the datagrid&nbsp;and has added columns to the datagrid for every property in our Employee class. Start your application and if everything went well, you should see your Employees loaded in your datagrid!

    Adding Data Management

    &nbsp;But…………. the fun doesn’t stop there! Right click on any operation in the “Data / Services” panel and choose “Enable Data Management”. In the following screen, select the “Id” property and choose “Next”. Make sure the next screen looks like this:

    We can only select these methods because of their signatures! Their names are not important, but the Add&nbsp;item&nbsp;for example,&nbsp; should accept one business object and return the newly generated Id. Click finish and Flash Builder will generate some more code. On the surface, it will look like nothing has changed…..

    Adding Save functionality

    Drag a new button onto the design service and label it “Save”. Put it beneath the datagrid. Make the datagrid editable, but the Id column non-editable. This way users will only be able to change the name. Create a click event handler by right clicking on the button and choose “Generate Click Handler”. Flash Builder will jump to code view. Implement the handler in the following way:&nbsp;

    protected function button1_clickHandler(event:MouseEvent):void {

    &nbsp;&nbsp;&nbsp; employeeService.commit();

    }

    Add another button labeled “Cancel”, next to the Save button. Implement the handler for it in the following way:&nbsp;

    protected function button2_clickHandler(event:MouseEvent):void&nbsp;&nbsp;&nbsp;&nbsp; {

    &nbsp;&nbsp;&nbsp; employeeService.revertChanges();

    }

    &nbsp;In MXML, bind the “enabled” properties of the two buttons as follows:&nbsp;

    enabled=”{employeeService.getDataManager(employeeService.DATA_MANAGER_EMPLOYEE).commitRequired}”

    &nbsp;This way, users will only be allowed to save or cancel when they’ve made some actual changes! You can find the final Flex application here.

    Conclusion

    The upcoming release of what is currently known as Flex Builder 3, namely&nbsp;Flash Builder 4, will greatly decrease development time when using Flex in a data oriented manner. In this blog I’ve shown how you can connect with any (web)service based&nbsp;server side technology. The beauty of this all is, Data Management doesn’t only work with webservices, but also with remoting!

    Share this

Alex van Beek

View profile

Related IT training

Go to training website

Related Consultancy solutions

Go to infosupport.com

Related blogs

  • Building a custom Kubernetes operator in C#

    Building a custom Kubernetes operator in C# Willem Meints - 2 months ago

  • Transform SpecFlow Table Column

    Transform SpecFlow Table Column Ronald Bosma - 5 months ago

  • Building a passwordless login flow with WebAuthn and th…

    Building a passwordless login flow with WebAuthn and th… Willem Meints - 7 months ago

Data Discovery Channel

  • Explainable AI - Break open the blackbox

  • Toekomstvaste microservice data architecturen

  • Modern Data Platform

Nieuwsbrief

* verplichte velden

Contact

  • Head office NL
  • Kruisboog 42
  • 3905 TG Veenendaal
  • T +31 318 552020
  • Call
  • Mail
  • Directions
  • Head office BE
  • Generaal De Wittelaan 17
  • bus 30 2800 Mechelen
  • T +32 15 286370
  • Call
  • Mail
  • Directions

Follow us

  • Twitter
  • Facebook
  • Linkedin
  • Youtube

Newsletter

Sign in

Extra

  • Media Library
  • Disclaimer
  • Algemene voorwaarden
  • ISHBS Webmail
  • Extranet
Beheer cookie toestemming
Deze website maakt gebruik van Functionele en Analytische cookies voor website optimalisatie en statistieken.
Functioneel Always active
De technische opslag of toegang is strikt noodzakelijk voor het legitieme doel het gebruik mogelijk te maken van een specifieke dienst waarom de abonnee of gebruiker uitdrukkelijk heeft gevraagd, of met als enig doel de uitvoering van de transmissie van een communicatie over een elektronisch communicatienetwerk.
Voorkeuren
De technische opslag of toegang is noodzakelijk voor het legitieme doel voorkeuren op te slaan die niet door de abonnee of gebruiker zijn aangevraagd.
Statistieken
De technische opslag of toegang die uitsluitend voor statistische doeleinden wordt gebruikt. De technische opslag of toegang die uitsluitend wordt gebruikt voor anonieme statistische doeleinden. Zonder dagvaarding, vrijwillige naleving door uw Internet Service Provider, of aanvullende gegevens van een derde partij, kan informatie die alleen voor dit doel wordt opgeslagen of opgehaald gewoonlijk niet worden gebruikt om je te identificeren.
Marketing
De technische opslag of toegang is nodig om gebruikersprofielen op te stellen voor het verzenden van reclame, of om de gebruiker op een website of over verschillende websites te volgen voor soortgelijke marketingdoeleinden.
Manage options Manage services Manage vendors Read more about these purposes
Voorkeuren
{title} {title} {title}