Adobe Edge - A tool for designers to create HTML5 content

English: A bubble graphic overview showing the relations between interaction design and its overlapping disciplines. Deutsch: Eine Übersichtsgrafik, die Interaction Design in Relation zu seinen benachbarten Disziplinen zeigt. (Photo credit: Wikipedia)

Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Related articles

• Introducing Adobe Edge Reflow(blogs.adobe.com)
• Understanding ECMAScript 6: Template Strings (#2) (noupe.com)
• Use Upcoming CSS4 Features Right Now (spd.rss.ac)

Save Development Time with Ready made Flash/Flex Components

Adobe Flex Icon (Photo credit: Wikipedia)

1. Flash Components - Buy & Sell Adobe Flex Components: marketplace to buy and sell stunning adobe flex based web components.
2. Flextras - UI Flex components: Save Development Time with all the Flextras components which now have a fully functional, feature complete, free edition.  You can download them from the Flextras web site; but source code is not included with the free edition of the components. 

Related articles

• Flex Past, Present and Future - Adobe's View (ravigeek.wordpress.com)
• Adobe Plays the Open Source Card (arnoldit.com)

HTML 5 vs Flash

  VS

(Photo credit: Wikipedia)

Note: HTML5, JavaScript, CSS and Flex are complementary technologies that can work seamlessly together.

HTML 5:
How does an HTML based data driven application works

1. User request the server page
2. Web server locates the file and passes it to the application server for processing.
3. Business logic of the code accesses the system resources like database, mail server and file system.
4. Server generates a dynamic HTML page from the requested data and service.
5. This dynamically generated HTML page is returned to the browser for rendering.

Apache Flex: 
How adding an compiled SWF file in the server works
1. User request the server page
2. Web server locates the file and passes it to the application server for processing.
3. Business logic of the code accesses the system resources like database, mail server and file system.
4. Server generates a dynamic HTML page from the requested data and service.
5. the generated HTML code with and embedded SWF file reference. (JavaScript code auto-generated by the Flash Builder is used for embedding SWF file into the HTML file).
6. the HTML code reaches browser for rendering
7. Browser requests that the SWF file be downloaded and rendered in Flash Player (as a small widget or an entire application view in the HTML page).
8. the SWF file in the browser can directly communicate with the server code. This allows for dynamic content to update the Flex application UI without refreshing the HTML page and decreases the number of requests to the server and the amount of content that is transferred over the network.

Another good comparision of Flash vs HTML 5 is available at the website.
http://flashvhtml.com/

Flex framework automatically takes care of adjusting the application layout as per the form factor of the device running the application while in HTML 5 the developer needs to take of detecting the platform and device and laying out the components as per the target form factor. But this gap is getting closed widget frameworks like JQuery which are also supporting eventing and data binding and the  forward momentum is with Html and JS.

Read this Interesting Blog published by Gartner about "HTML 5 vs Flash".

Features not possible to implement without Flash.

1. Copy to Clipboard

As of Today (September2014) its not possible to implement Copy to Clipboard functionality in a web page that works consistently and flawlessly across all major browsers (Mozilla Firefox, Chrome, Safari, and Internet Explorer). Suppose you want to develop a button on click of which you want to copy to your Windows or Mac Clipboard some text content say value of any text area within a form. This can only be achieved by using Flash. With JavaScript only approach you would only be able to do this for Internet Explorer (IE). Presently the most reliable solution is to use ZeroClipboard (http://zeroclipboard.org/) which internally make use of a hidden Flash movie and JavaScript interface to achieve this functionality in a secure way. 

Related Articles; 

• Adobe Flash Player 11.2 Beta for Desktops
• Adobe Flash Player and its Future
• Flash Player Demise on Desktop Inevitable, but Years Away, Say Analysts (pcworld.com)
• The web in 2011: HTML5 dominates Flash, trouble for data capped mobile surfers (extremetech.com)
• Adobe: here come 5+ years of Flash advancements (news.cnet.com)

• Howto Embed Flash Using JavaScript(raventools.com)

  ---

• Google Swiffy updates Swiffy converts Flash SWF files to HTML5,...(flashdaily.net)

  ---

Runtime Shared Libraries (RSLs)

runtime shared libraries (RSLs) can be individually loaded, cached, and used by multiple applications.

You use RSLs to reduce the size of Flex applications and there by reduce the time required to download the application.

RSLs are SWF files whose code is used as a shared library between different application SWF files.

there are two kinds of RSLs
* signed RSLs - Signed RSLs are libraries that are signed by Adobe and may be stored in the Flash Player Cache, which can be accessed by applications from any domain.
If you are using a signed RSL, the RSL may not have to be downloaded if the RSL is already in the Flash Player Cache. Singed RSLs have a .swz extension
* unsigned RSLs - are normal SWF files and are not loaded into the Flash Player Cache. They rely on browser's cache to keep them from being downloaded.

Flex Technology Overview

Image by rutty via Flickr

Creating a Simple Application with Adobe Flex Builder

More DIY videos at 5min.com

key points about Flex technology that is relevant to this module.

• Flex applications are compiled to SWF files.
• Flex is a programmer-centric framework and development environment for creating Flash-based rich internet applications.
• Flex applications are executed in ActionScript Virtual Machine (AVM) inside Flash Player.
• Flex is a client-side technology.
• Flex can integrate well with server-based technologies like ColdFusion, PHP, ASP.NET and Java EE.
• Flex can retrieve plain text or XML data over HTTP service.
• Flex can also retrieve Simple Object Access Protocol (SOAP) messages using web services.

You may also refer ActionScript Coding Convention for Flex SDK.

Introducing Flash Builder 4

Flash Builder is a commercial tool from Adobe focused on developer productivity. It supports the following capabilities.

• Intelligent coding help and templates
• Network monitor
• Interactive, step-through debugger
• Emulation and on-device debugging
• Visual design interfae
• Data access wizards
• Memory and performance profilers
• Automated testing support

Hello World in Flash Builder 4


Introducing Flash Builder 4


Related articles

• Adobe's New Tools for Web Apps (technologyreview.com)
• Adobe Flash Builder 4 Beta: Get it while it's hot! (blogs.adobe.com)
• Flash Builder, Flex 4, and Flash Catalyst Betas Available (blogs.adobe.com)
• Adobe gives Flash a programming boost (news.cnet.com)

Related articles

• Flash builder debugger and Firefox 4(flashcarnival.blogspot.com)

  ---

• Flash Builder 4.7 and Adobe Scout 1.0 Released(inflagrantedelicto.memoryspiral.com)

  ---

• Adobe Extension Builder and Creative Cloud 2014(blogs.adobe.com)

  ---

• Getting Started with Adobe Creative Suite Extension Builder and Creative Suite SDK(blogs.adobe.com)

  ---

Learning Adobe Flex for SAP Developers

Image via Wikipedia

Image via Wikipedia

To see how Flex applications can be connected with an SAP backend application watch this workshop session at SAP Developer Network Day - 2006.



Check the URL SAP Community NetWork - Learning Adobe Flex for SAP Developer. These resources will help developers integrate Adobe Flash functionality in SAP applications.

Adobe Flex SAP Sample from SDN Day 2006 - the demo shows how to develop rich and engaging web applications using Adobe Flex over the SAP backend. Following are the steps involved:

1. Login to SAP system, 
2. We need to create a SAP function module from which we create the Web Service.The Processing type in the FM has to be set to Remote-Enabled Module.
3. Go to Transaction WSADMIN to see the list of Web Services(WS) available in the System.
4. Select the WS and open the WSDL associated with the WS. 
5. Open the Adobe Flash Builder and declare the WS with a unique ID and provide the wsdl url.
6. Create a Dashboard to display the data from the WS.

For recent updates about SAP - Adobe Flex integration check the weblogs at Development Trends


Related articles

• Adobe aligns software branding to shine light on Flash (macworld.com)
• Innojam, DemoJam, Train Race, SIT: the innovations SAP might miss? (zdnet.com)
• SAP, meet Force.com #socialenterprise (cloudintegration.wordpress.com)
• Stimulsoft Company Announces New Generation of Reporting Tools: Stimulsoft Reports.Fx for Flex (prweb.com)

Introducing Flash/Flex Builder

Featured Video on Flash Builder
Visit the link below to view featured videos on Adobe Flash Builder
http://tv.adobe.com/product/flash-builder/?source=EWUMA

Intoducing Flash Builder


Introduction to Flex Builder 3

More DIY videos at 5min.com

Related articles

• Adobe Flex Builder 4.6 Extras(practicalflex.blogspot.com)

  ---

• Flash Builder 4.7 Beta is now available.. !!(practicalflex.blogspot.com)

  ---

• PowerFlasher FDT 5 - Yet Another IDE for Flash/Flex/Air(practicalflex.blogspot.com)

  ---

• Introducing Sprout Builder - Flash Content Made Easy(5min.com)

  ---

Preparing Adobe Flex Development Environment (Part 2), updated

Image by TuttleTree via Flickr

Download Adobe Flash Builder (its a pretty big download of around 300 MB, please feel free to read ahead while download is progressing)

- Flash Builder 4 is available for Windows and Macintosh platform.

- During installation you will be required to close your browser(s) so that the installer can upgrade your version of Flash Player to the debugger version so that you can use the full debugging capabilities built into Flash Builder.

You can also install Adobe Flash Builder as a plugin over an existing Eclipse installation, while doing so it is recommended that you edit the eclipse.ini file for your Eclipse instance, so that it includes the following settings:

-vmargs -Xms256m -Xmx512m -XX:MaxPermSize=256m -XX:PermSize=64m

Highlights of Adobe Flash Builder 4.5:

“Adobe Flash Builder 4.5 can be used to Build for Android™, BlackBerry® Tablet OS, and iOS mobile platforms using a common code base”.

• Based on an Eclipse™ Plaform
• Rapid development of expressive mobile, web, and desktop applications
• Support for ActionScript®
• Building applications using open source Flex framework. 
• Supports for mobile application development and testing. 
• Development of applications using common code base to build apps for Android™, BlackBerry® Tablet OS, and iOS mobile platforms while sharing code from web applications.

Tips

• You can install a copy of Flash Builder 4 standalone with Flex Builder 2 or 3 installations on the same machine, it will not interfere with each other.
• Workspaces created in Flex Builder 2 or Flex Builder 3 are not supported by Flash Builder 4.
• You can import existing Flex Builder projects in Flash Builder 4, but a project modified by Flash Builder 4 will no longer open in Flex Builder 3 or Flex Builder 2.

Related Articles

• Adobe updates Flash Builder, Flex; unveils LiveCycle-CQ integration (infoworld.com)

• Building Web & Mobile Applications for SAP Backend using Adobe Flex(practicalflex.blogspot.com)

  ---

• New Features in Adobe Flash Builder™ 4.5 (codenamed "Burrito")(practicalflex.blogspot.com)

  ---

• More Eclipse 3.5 and Flex Builder, for Linux(greylurk.com)

  ---

• Improving Flash Builder Performance(dougr.net)

  ---

• BlackBerry Tablet OS SDK for Adobe AIR - Beta 2 Release!(blogs.blackberry.com)

  ---

• Adobe releases trio of Labs goodies for designers, developers(downloadsquad.com)

  ---

• Flash Builder, Flex 4, and Flash Catalyst Betas Available(blogs.adobe.com)

  ---

• How to install Apache Flex 4.8.0 SDK in Flash Builder(lucamezzalira.com)

  ---

• Flash Builder 4.7 Beta now available!(blogs.adobe.com)

  ---

Getting Started With Adobe Flex

Below is my presentation about Apache Flex overview which covers high level details about what is Flex, its architecture, benefits ...

Apache Flex: Overview from Tarun Telang

Flex can be applied for the following solutions:

•Business systems/Applications

•Standalone custom solutions

•Network, communication and other interactive solutions

•Video and audio messaging solutions/ Collaboration Tools

•CRM and ERP systems

How to create an Application with Adobe Flex

The video below show how to use Flex Builder 3 and walks you true creating a new Flex Builder project demonstrating new functionality available in this release.

More DIY videos at 5min.com

Related articles

• Apache Flex 4.8.0 is now live! Spoon needs feedback for future development!(inflagrantedelicto.memoryspiral.com)

  ---

• Adobe's no-choice embrace of HTML5(macworld.com)

  ---

• SCRC Releases Dedoose, the World's First Web 2.0 Rich Internet Application (RIA) for Qualitative and Mixed Method Research and Data Analysis(prweb.com)

  ---

• Useful Adobe Flash frameworks and graphical engines for developers(woork.blogspot.com)

  ---

• From Flex to Angular JS(flexjunk.com)
  the Flex Google maps APIs are getting deprecated which made him redo the app using Angular JS framework for HTML which has similar data binding mechanism as that of Flex but supports all the latest Google maps APIs.
  

  ---

• Adobe RIA -- Flash, Flex, AIR (TC)(blogs.adobe.com)

  ---

• easyWorker Apache Flex / Adobe Air library to make ease to work...(flashdaily.net)

  ---

• Comparing Silverlight vs. Adobe Flex - Which is better for Rich Internet Applications?(brighthub.com)

  ---

Preparing Adobe Flex Development Environment (Part 1), updated.

Image via Wikipedia

Development Tools Overview 

• Adobe Flash® Builder™ (formerly Flex Builder) - Eclipse™ based Integrated Development Environment (IDE) designed to help software developers build rich Internet applications (RIAs) using the open source Flex framework (including both web and Adobe AIR base desktop applicaitons).While Flex applications can be built using only the free open source framework, developers can use Adobe® Flash® Builder™ software to dramatically accelerate development. It provides useful features for a developer to perform design, development, and debugging of applications in effective manner.
• Adobe Flex SDK - The Adobe Flex® SDK provides the core Flex compilers, Flex framework component library and debugger. Using only the free SDK and an IDE of your choice, you can build and deploy rich Flex applications. (If you are using Flash Builder 4, the SDK is already included.).  This is the link to Download Flex 4 SDK.
• Adobe Flash Catalyst™  (codenamed "Thermo") -  Flash Catalyst is a new professional interaction design tool for rapidly creating user interfaces without coding. Sales of this product has ended in April 2012. Flash Catalyst is no longer be available in future versions of Adobe Creative Suite® software. Adobe recommends interaction designers to consider Creative Suite 6 Master Collection, which is now a professional creative tools to create interactive ubiquitous apps (with reach vitually universal reach).
• Slider: Flex Mobile Framework - A mobile version of the Flex framework which will enable Flex developers to build mobile applications for smartphones and other high-end mobile devices.

The following video provided a brief introduction to of Flex Builder 3 ?

Also Check the following resources for alternate Development Environments for Flex

• Amehtyst - A new ide for flex developers
• Powerflasher FDT 5 - Yet another ide for Flex Developer

Related articles

• Interested in AIR and Flex? (blogs.adobe.com)
• Flex 4 beta in a week
• Zend Integrates with Adobe Flash Builder 4 for Rapid Development of Rich Internet Applications Based on Adobe Flash Platform and PHP (prweb.com)
• Flex SDK 4.6 (ravigeek.wordpress.com)
• Flex 4.6 SDK gets last non-Apache release (h-online.com)
• Life After Adobe Flash Builder(drdobbs.com)

• Updated Flash Player 13 and AIR 13 betas now available on Adobe Labs(blogs.adobe.com)
• How to install Apache Flex 4.8.0 SDK in Flash Builder(lucamezzalira.com)
• Adobe Flash Builder version 4.7(idownloadsworld.wordpress.com)

  ---

• Apache Flex 4.10 Released!(blogs.apache.org)

  ---

• Flex 3.5 and using asdocs(michael.omnicypher.com)

  ---

• Apache FlexJS 0.0.1 and Apache Flex FalconJX 0.0.1 Released(blogs.apache.org)

  ---

Preparing your Runtime enviroment, updated

The so-called “Pepper” implementation of Flash Player provides a layer between the plugin and browser that abstracts away differences between browser and operating system implementations. It is an API Co-developed by Google and Adobe for hosting plugins within the browser.
1) Version Test for Flash Player
2) Installing the latest Flash Player Google Chrome browser includes Adobe® Flash® Player built-in. Google Chrome will automatically update when new versions of Flash Player are available.
3) Installing Adobe AIR
4) Flash Player Version Penetration - check this link if you are wondering which version of Flash Player would be best for you.


Watch the video below to Learn about Flash Player Integration and Support

More DIY videos at 5min.com

Introduction to Adobe AIR

More DIY videos at 5min.com

FlexJS - An introduction from OmPrakash Muppirala

Related articles

• Adobe AIR for Linux now available (hackitlinux.com)
• Adobe gives Flash a programming boost (news.cnet.com)
• Learn about Adobe Integrated Runtime Application (5min.com)
• Adobe aligns software branding to shine light on Flash (macworld.com)
• Adobe Releases Flash Player 11, Air 3 (ghacks.net)
• Important BlackBerry Tablet OS Update: Adobe Flash Player (blogs.blackberry.com)
• Adobe Air Now Supported In ICS (droidflash.wordpress.com)
• Why a Flash-Enabled Browser Matters (mycricket.com)
• Flash Player 11.2 Introduces Automatic Updates (ghacks.net)
• Adobe Releases Another Flash Security Update (ghacks.net)