Export to GitHub

masuland - LoginExample.wiki

Login Example

Preface

The Login Example aims to be a quick and easy "Show Me The Code" guide for Flex beginners and intermediate Flex coders that try to build large-scale Flex apps. While you can see the following code examples as a way I would recommend building these apps, I am not in the position to say that: "This is the way you have to do it".

Introduction

Please read the Feature Specification of the Login Example application. The following code examples provide solutions for several dimensions in Flex development:

  1. Flex SDKs (Flex 3.5 "Halo", Flex 4.1 "Gumbo", Flex 4.5 "Hero" and Apache Flex 4.8)
  2. Runtimes (Adobe Flashplayer & Adobe AIR)
  3. Mobile platforms (Google Android, Apple iOS TODO and BlackBerry Tablet OS TODO)
  4. Flex 3 to Flex 4 Migration Guide
  5. MVC Microarchitectures (Cairngorm 2.2.2, PureMVC 2.0.4 TODO)
  6. IoC Microarchitectures (Mate 0.9.1, Robotlegs 1.5.2, Parsley 2.4.1, Spring AS 1.1, Swiz 1.4)
  7. Eventarchitectures (AS3-Signals)
  8. Nanoarchitectures (M, VCb / VCp, Cpll, Cpsh, Ctl, Cmd, NoEvt, PInj)
  9. Design Pattern (Presentation Model, Code Behind, Presenter, Mediator, MVP TODO ... etc.)
  10. Cairngorm 3 Libraries (Validation Library, Task Library, Observer Library)
  11. Continuous Integration (Apache Maven, Flexmojos TODO)
  12. Build and Deployment Tools (Apache Ant with FlexTasks library)
  13. Testing frameworks (FlexUnit 4.0)
  14. Flex Automation (RIATest, FlexMonkey ... etc.)
  15. Server projects (AmfPHP 1.9, Zend AMF 1.11.11, BlazeDS TODO, GraniteDS TODO)
  16. Flex coding conventions (Flex 3, Flex 4)
  17. Project planning (see Login Example Feature Specification)

Screenshots

Login Example for Web

http://masuland.googlecode.com/files/LoginExampleScreenshotWeb.png

Login Example for Desktop

http://masuland.googlecode.com/files/LoginExampleScreenshotDesktop.png

Login Example for Mobile

http://masuland.googlecode.com/files/LoginExampleScreenshotMobile.png

Client

Apache Flex 4.8 (Spark)

Flex 4.8 (Spark) with MVCpshCtlDS_PInj

Features: Flex 4.8 (Spark) with "Model" (M), "View - Code Behind" (VCb), "C-Push" (Cpsh), "Controller" (Ctl), "Delegate" (D), "Service" (S) & "Property Injection" (PInj) Nanoarchitectures

http://masuland.googlecode.com/files/Flex4SparkAppWithNanoarchitecturesMVCpshCtlDS_PInj.png

Adobe Flex 4.5 (Spark)

Flex 4.5 (Spark) with MVCpshCtlDS_PInj

Features: Flex 4.5 (Spark) with "Model" (M), "View - Code Behind" (VCb), "C-Push" (Cpsh), "Controller" (Ctl), "Delegate" (D), "Service" (S) & "Property Injection" (PInj) Nanoarchitectures

http://masuland.googlecode.com/files/Flex4SparkAppWithNanoarchitecturesMVCpshCtlDS_PInj.png

Flex 4.5 (Spark) with MVCpshCmdDS_PInj

Features: Flex 4.5 (Spark) with "Model" (M), "View - Code Behind" (VCb), "C-Push" (Cpsh), "Command" (Cmd), "Delegate" (D), "Service" (S) & "Property Injection" (PInj) Nanoarchitectures

http://masuland.googlecode.com/files/Flex4SparkAppWithNanoarchitecturesMVCpshCmdDS_PInj.png

Flex 4.5 (Spark) with MVCpshCmdDS

Features: Flex 4.5 (Spark) with "Model" (M), "View - Code Behind" (VCb), "C-Push" (Cpsh), "Command" (Cmd), "Delegate" (D) & "Service" (S) Nanoarchitectures

  • Flex 4.5 (Spark) Login Example for Mobile with Robotlegs 1.5.2 / AS3-Signals 0.8 (MVCpshCmd), (air app) (android app) (svn repo)

http://masuland.googlecode.com/files/Flex4SparkAppWithNanoarchitecturesMVCpshCmdDS.png

Adobe Flex 4.1 (Spark)

Flex 4.1 (Spark) with MVCpshStoTskDS_PInjNoEvt

Features: Flex 4.1 (Spark) with "Model" (M), "View - Code Behind" (VCb), "C-Push" (Cpsh), "Story/Task" (StoTsk), "Delegate" (D), "Service" (S), "Property Injection" (PInj) & "No Event" (NoEvt) Nanoarchitectures & Cairngorm 3 Task Library

Flex 4.1 (Spark) with MVCpshCtlDS_PInj

Features: Flex 4.1 (Spark) with "Model" (M), "View - Code Behind" (VCb), "C-Push" (Cpsh), "Controller" (Ctl), "Delegate" (D), "Service" (S) & "Property Injection" (PInj) Nanoarchitectures

http://masuland.googlecode.com/files/Flex4SparkAppWithNanoarchitecturesMVCpshCtlDS_PInj.png

Flex 4.1 (Spark) with MVCpllCtlDS_PInj

Features: Flex 4.1 (Spark) with "Model" (M), "View - Code Behind" (VCb), "C-Pull" (Cpll), "Controller" (Ctl), "Delegate" (D), "Service" (S) & "Property Injection" (PInj) Nanoarchitectures

http://masuland.googlecode.com/files/Flex4SparkAppWithNanoarchitecturesMVCpllCtlDS_PInj.png

Flex 4.1 (Spark) with MVCbCtlDS_PInj

Features: Flex 4.1 (Spark) with "Model" (M), "View - Code Behind" (VCb), "Controller" (Ctl), "Delegate" (D), "Service" (S) & "Property Injection" (PInj) Nanoarchitectures

http://masuland.googlecode.com/files/Flex4SparkAppWithNanoarchitecturesMVCbCtlDS_PInj.png

Flex 4.1 (Spark) with MVCbCtlDS

Features: Flex 4.1 (Spark) with "Model" (M), "View - Code Behind" (VCb), "Controller" (Ctl), "Delegate" (D) & "Service" (S) Nanoarchitectures

http://masuland.googlecode.com/files/Flex4SparkAppWithNanoarchitecturesMVCbCtlDS.png

Adobe Flex 4.1 (MX)

Flex 4.1 (MX) with MVCbStoTskDS_PInj

Features: Flex 4.1 (MX) with "Model" (M), "View - Code Behind" (VCb), "Story/Task" (StoTsk), "Delegate" (D), "Service" (S) & "Property Injection" (PInj) Nanoarchitectures & Cairngorm 3 Task Library

Flex 4.1 (MX) with MVCbCtlDS_PInjNoEvt

Features: Flex 4.1 (MX) with "Model" (M), "View - Code Behind" (VCb), "Controller" (Ctl), "Delegate" (D), "Service" (S), "Property Injection" (PInj) & "No Event" (NoEvt) Nanoarchitectures

http://masuland.googlecode.com/files/Flex4MxAppWithNanoarchitecturesMVCbCtlDS_PInjNoEvt.png

Flex 4.1 (MX) with MVCbCtlDS_PInjDdd

Features: Flex 4.1 (MX) with "Model" (M), "View - Code Behind" (VCb), "Controller" (Ctl), "Delegate" (D), "Service" (S) & "Property Injection" (PInj) Nanoarchitectures & "Domain-Driven Design" (Ddd) approach

Flex 4.1 (MX) with MVCbCtlDS_PInj

Features: Flex 4.1 (MX) with "Model" (M), "View - Code Behind" (VCb), "Controller" (Ctl), "Delegate" (D), "Service" (S) & "Property Injection" (PInj) Nanoarchitectures

Please note: Two Parsley projects. First project Parsley 2.4.1 (MVCbCtl, PInj) uses the Publish/Subscribe-Tags from Parsley. Second project Parsley 2.4.1 (MVCbCtl, PInj, Wire) uses the Wire-tag from the Cairngorm 3 Observer Library.

http://masuland.googlecode.com/files/Flex4MxAppWithNanoarchitecturesMVCbCtlDS_PInj.png

Flex 4.1 (MX) with MVCbCtlDS_Val

Features: Flex 4.1 (MX) with "Model" (M), "View - Code Behind" (VCb), "Controller" (Ctl), "Delegate" (D), "Service" (S) & "Validation" (Val) Nanoarchitectures & Cairngorm 3 Validation Library

Flex 4.1 (MX) with MVCbCtlDS

Features: Flex 4.1 (MX) with "Model" (M), "View - Code Behind" (VCb), "Controller" (Ctl), "Delegate" (D) & "Service" (S) Nanoarchitectures

http://masuland.googlecode.com/files/Flex4MxAppWithNanoarchitecturesMVCbCtlDS.png

Flex 4.1 (MX) with MVCbCmdDS

Features: Flex 4.1 (MX) with "Model" (M), "View - Code Behind" (VCb), "Command" (Cmd), "Delegate" (D) & "Service" (S) Nanoarchitectures

http://masuland.googlecode.com/files/Flex4MxAppWithNanoarchitecturesMVCbCmdDS.png

Flex 4.1 (MX) with MVCtlDS

Features: Flex 4.1 (MX) with "Model - View - Controller - Delegate - Service" (MVCtlDS) Nanoarchitectures

http://masuland.googlecode.com/files/Flex4MxAppWithNanoarchitecturesMVCtlDS.png

Adobe Flex 3

Flex 3 with MVCtlDS

Features: Flex 3 with "Model - View - Controller - Delegate - Service" (MVCtlDS) Nanoarchitectures

http://masuland.googlecode.com/files/Flex3AppWithNanoarchitecturesMVCtlDS.png

Flex 3 with MVCmdDS

Features: Flex 3 with "Model - View - Command - Delegate - Service" (MVCmdDS) Nanoarchitectures

http://masuland.googlecode.com/files/Flex3AppWithNanoarchitecturesMVCmdDS.png

Server

AmfPHP

  • Login Example Server, AmfPHP 1.9, (svn repo)

Zend AMF

  • Login Example Server, Zend AMF 1.11.11, (svn repo)

BlazeDS

  • TODO

GraniteDS

  • TODO

Used Nanoarchitectures

  • "View - Code Behind / Component" (VCb / VCp)
  • "C-Pull" (Cpll)
  • "C-Push" (Cpsh)
  • "Property Injection" (PInj)
  • "No Event" (NoEvt)
  • "Model" (M)
  • "Controller" (Ctl)
  • "Command" (Cmd)
  • "Story/Task" (StoTsk)
  • "Action Chaining" (AChn)
  • "Delegate" (D)
  • "Service" (S)

Frequently Asked Questions (FAQs)

Why have you created the Login Example?

Please read my Letter of Motivation.

I am new to this website. Where should I start?

Please check out this page.

What's a Nanoarchitecture?

Please read this page about Nanoarchitectures.

Which Microarchitecture has the best performance?

Don't know. Maybe somebody could create performance tests for it ;)

Which Microarchitecture do you prefer?

I am not making that decision for you. It is up to you to decide which one suites best to your needs.

Why haven't you choosen Microarchitectures like PureMVC, SmartyPants or Flicc ... etc. for your Login Example?

I am thinking of adding other Microarchitectures, too. If they fit into the concept I will definitely add them. One issue I have with PureMVC and Robotlegs (without AS3-Signals) is that they are using the Mediator pattern for their views. This feels quiet massive when you want to work with SkinnableComponents in Flex 4 (3 classes = Skin class + SkinnableComponent + Mediator). If you have a good solution please let me know. Thanks!

Why do you have only so few Robotlegs and Mate examples for the Login Example? Are you biased?

No! I just have started adding Robotlegs and Mate examples to the Login Example.

Which Nanoarchitectures do you prefer?

For Flex 4 applications, I recommend, you should have a look at the Login Example for Flex 4.1 (Spark) with MVCpshStoTskDS_PInjNoEvt Nanoarchitectures. For Flex 3 applications, consider to use the "Model" (M), "View - Code Behind" (VCb) Nanoarchitecture as shown in the LoginExample for Flex 4.1 (MX) with MVCbCtlDS.

How can I migrate my Flex 3 application to a Flex 4 application?

Please read this Flex 3 to Flex 4 Migration Guide.

I have found issues in your code examples. Where can I post them?

You can post problems and feature enhancements into my issue tracker, or, you can contact me directly.

Can I participate in your project?

Sure! There are still things left for me to do (see issue tracker). Any help would be appreciated!

Would you be willing to donate your code and docs to a higher instance?

Of cause! For the moment, I just haven't found the people sharing the same interest making the lifes of Flex beginners ... etc. easier building large-scale Flex apps. If I would see an authority growing up somewhere I would be happy to jump over.

Who is this guy occupying land in the web?

Details about me can be found here.

More Code Examples

  • Religion Chooser written in Flex 4.1 (Spark)

Feedback

Please feel free to post comments, suggestions or feature requests because the code is still work in progress.