Using the Spinner control in flex 4

May 12, 2010 by

The Spinner control is an alternate to NumericStepper’s in Flex 4. The advantage is while it works with ranges, it is not hard bound to a numeric input. You can choose to step through a collection and display images or any other content.

Spinner Control Sample App

Spinner Control Example in Flex 4

Below is some code which associates text from a collection to the numeric stepper as seen in image above.

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"  width="350" height="150">

<fx:Script>
<![CDATA[

import mx.collections.ArrayCollection;
[Bindable] private var dataColl:ArrayCollection = new ArrayCollection
(["Flex","Flash","Catalyst","Slider","FlashLite","DeviceCentral"])
]]>
</fx:Script>

<s:HGroup x="50" y="58" verticalAlign="middle" >
<s:RichText textAlign="right" width="200" text="{dataColl.getItemAt(spinner.value)}"/>
<s:Spinner id="spinner" minimum="0" maximum="{dataColl.length - 1}"/>
</s:HGroup>


<s:Label x="78" y="38" text="Click on the arrows to change values"/>
</s:Application>

Advertisements

LCDS – how it all works

May 11, 2010 by

We have been consulting/training on LCDS for some time now there is a common need for an overview from a working perspective which helps decide whether to go with it or not.

This article is one such effort to shed some light on how it all works

LCDS is a Java web project which enables Flex/AIR clients to invoke Java methods, concurrently update clients, and supports proxy. It mainly contains 2 things

  1. A webserver
  2. A socket – server

So why is LCDS required?
One of the reasons for which it (and BlazeDS) are widely used is: Clients like Flex/Flash/AIR can publish data in an AMF format. AMF is a binary protocol and hence the footprint of data is lighter so it travels much faster over the network.

Java does not have native support to understand AMF (which is an Open Spec. protocol). LCDS contains a suite of Java classes which deserializes AMF data and passes it to Java as a Java data type.

It primarily has 4 types of services:

  1. (HTTP)Proxy Service
  2. Remoting Service
  3. Messaging Service
  4. Data Management Service

All these services are supported by protocols. A protocol defines how data is passed to the Java layer.

3 key protocols supported are are:

  1. HTTP
  2. AMF
  3. RTMP

You can also use variants like AMFX (non – binary XML version of AMF). These protocols are used to pass message objects via a Channel. A message object is the entity that Flex want’s to send across

There are  various channels that support these protocols

AMF, Secure AMF, HTTP, RTMP, Secure RTMP, NIO – AMF, NIO RTMP and others.

You can select a channel depending on the type of communication you want to establish.

Each of these Channels are associated with end points. So a message objects travels over a channel and hits an end point on the LCDS server. Making an endpoint unique for a channel

There are 2 types on end-points:

  1. Serverlet based end point (typically the MessageBroker Servlet) – Uses a webserver
  2. Socket based end point – these are more scalable (NIO/RTMP) – Uses a socket server

Once a message has hit the end point, It starts its journey inside the LCDS server. Here it goes through a series of layers starting from

  • The MessageBroker -Here is where authentication takes place, and the service is identified for the message
  • The Service is identified and one of these HTTPProxyService/RemotingService/DataService/MessagingService is invoked Depending on the destination of the message.
  • This destination is set by Flex in the message when it serializes it. The association between Flex and your Java Service is mapped using a destination.

Flex - LCDS Destination - Java
Flex – LCDS Destination – Java

  • Finally the Adapter kicks in. This is the entity responsible of invoking the Java class and passing data. This Adapter depends on the service that you use
  • Typically for a DataService (read Data Management Service) there is another layer of Assembler which could be either a standard from LCDS or custom created depending on the back-end or the data tier.

LCDS has in built assemblers for Hibernate and others.

The entire flow can be summarized as:

Flex LCDS Communication

Flex LCDS Communication

That, in a nutshell, speaks about LCDS. Most things also apply for BlazeDS. If you have queries/suggestions/comments. Please feel free to put them in the comments section.

Y

ReferenceError: Error #1069 – Property maxFrequency not found on mx.data.DataManagementConsumer LCDS DataManagement service

February 13, 2010 by

If you are facing this issue while using RTMP channels in LCDS:

ReferenceError: Error #1069: Property maxFrequency not found on mx.data.DataManagementConsumer and there is no default value.
at mx.data::ConcreteDataService/get maxFrequency()[C:\depot\DataServices\branches\dune_rc\frameworks\projects\data\src\mx\data\ConcreteDataService.as:705

There are 2 problems here 1 with the Flex SDK and  other with the LCDS/BlazeDS version:

1. Make sure you have the correct version of Flex SDK (3.4 or higher) This issue is because of the fds.swc (make it compatible with your lcds version)

2. Check you data-management-config for throttle policies in network configuration in destination tag -> Set them to NONE or IGNORE (earlier versions supported ERROR and REPLACE) -> This if your LCDS is 3.0 or higher

<network>
<session-timeout>20</session-timeout>
<paging enabled=”false” pageSize=”10″ />
<throttle-inbound policy=”NONE” />
<throttle-outbound policy=”IGNORE” />
</network>
Restart LCDS and recompile your application to include newer version of your data-management-config
This should solve the problem

The business of wire-framing

July 17, 2009 by
With emergence of web 2.0 everything is going online. Websites are no longer small partly usable entities but have grown in to become full fledged applications. With this the scope and expectation of a web application have risen dramatically over past 2 years. Everybody want’s an intelligent good looking and robust application developed quickly and in budget. But how good does it go when we get real?

If you want a web-application to be developed or are a developing one it is extremely important to look at the process that you are following. Some rough requirement document, some inputs from the technical team and some rough ideas? Why do you think so many software projects fail or lose track and overshoot time and effort estimation?

This incorrect estimation comes due to lack of clarity of the requirement and the process. Isn’t there a clear disconnect between your ideas and the person who is implementing them? How do you bridge the gap? The answers is WIREFRAMES

So, what is a wire-frame:

A wire-frame is a pictorial representation of data (and not design) of your application.  Creating a wire frame is normally an iterative process which involves some Business intelligence, Product technical know how and a usability analyst to come together. It could be a PPT or there are several tools available like Omnigraffle, Axure, MockupScreens or for that matter open office draw. It is like they say, always write an algorithm before you write an implementation. Wireframes bring an application flowchart and work flow algorithms to an easily understandable level.

In the first iteration ideally you would want the person who understands the business to roughly sketch his ideas on a piece of paper. As an iteration a Usability Analyst armed with the technical know how and behavioral aspects of a web application can start mapping them onto a wireframe.

Wire frame is not how your application but what it contains and some part of how it behaves.

 The 3 major advantages which impact everything from time to cost and success of the project are:

1) Wireframes increase the clarity about the application that you are getting developed or developing. If  there are any uncertainties or challenges they can be handled right at the beginning. The picture becomes more clear on every single piece of information that the system will get in or display. You do not want to create something you cannot sell, right?

2) Better estimation of cost and time: No doubt creating a wireframe would bring in its overhead on cost and time. But if you look at the overall picture it simplifies things for a developer/technical architect to such an extent that they can virtually see what they want. Also a  designer can create the views with better understanding and focus.

3) Project management: As the application grows and comes closer to being realized that’s when you can expect some major surprises. A wire-frame coupled with an iterative release process will ensure that you get what you expect

It is again not necessary that you stick to the wire frame as is. While the application gets developed there will be challenges and constraints however the magnitude of problem and the time taken to get over them will reduce drastically

I think in a nutshell. No wireframes there is a very little chance of you getting a quality product in time.

 

A sample wireframe:

A Sample Wireframe build with powerpoint

BlazeDS + IE+ HTTPS issue

July 14, 2009 by

Problem:  While using blazeDS content is not transferred over HTTPS this may be because of a firewall or a reverse proxy like web-seal in deployment.

So if you have blocked the port 80 on server you will notice that application gets loaded but calls are throwing a ChannelFaultEvent.

Reason:

The request coming in from client over https hits the firewall which should be the endpoint URL and because of this the server side(firewall) should fire the request on the non-secure/HTTP port of BlazeDS server.

Solution:

The configuration of the channel should look something like

<channel-definition id=”secure-amf” class=”mx.messaging.channels.SecureAMFChannel“>
   <endpoint url=” {contextRoot}/messagebroker/amf” class=”flex.messaging.endpoints.AMFEndpoint“/>
   <properties>
                 <add-no-cache-headers>false</add-no-cache-headers>
</ properties>
</ channel-definition>

 Notice the client uses a secure channel and the server uses an insecure endpoint

Cheers,

Y

Flash Builder 4 ( Flex 4) : Overview part 2

June 3, 2009 by

So as promised , here I am with part 2 of overview on what’s new with Flash Builder 4. The part 1 was about IDE related changes in FB4.

Part 2:  Components and Syntax

In part 1 we have been talking about the IDE features. Staying in the design view, the components explorer now you can notice a few folders.
Adobe has released a new suite of (sprite) flex components with the sdk 4.0 which are called as spark components. So now we have 2 types of components
1.    Halo Components – The existing UIComponents (sdk 3.4)
2.    Spark Components – The new set of components
Let look at each folder
Controls
While most of the controls remain the same in both versions a there a few changes
Added:
•    Spinner (close to Numeric Stepper)
•    DropDown (redefined ComboBox)
•    VideoPlayer (newly added in place of VideoDisplay component)
•    RichEditableText (newly added). This is where you can see the amazing text control features like right-to-left, baseline-control and justification of text

The RichTextEditor has been removed from the list.

Data Controls:
All lists have now been grouped under data controls. Apart from the regular ones, there is one addition to this – the paged List control. The Spark list control offers higher-level functionality like paged-data  (by a ‘layering’ mechanism).

Containers:
No VBox,  HBox or Canvas, they have now been replaced by Group containers. So you have HGroup, VGroup well mostly the styling behavior has changed. You can review the example that follows the article to see how they behave.
Then there are these which have been added:
•    DataGroup
•    Scroller
•    SkinnableContainer
•    SkinnableDataContainer

Custom Components
Two new components
Flash component and Flash container: To allow you to directly access a component created in Flash Authoring tool.

New Flash Custom Components

New Flash Custom Components

NameSpaces
Moving onto syntax, the way new elements are created is a little different than Flex 3. Again most of these changes are on the styling side which I plan to explore a little later. We ll stick to the changes on code:
Namespaces have been changed. Now there are 2 basic namespaces that you would find yourself working with:
1.    xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243; – Contains non UI objects like arrays, objects, metadata declarations. That means when you add a script block in flex 4 the tag would be <fx:Script>.
2.    xmlns:s=”library://ns.adobe.com/flex/spark” – Contains the spark component library.
3.    xmlns:mx=”library://ns.adobe.com/flex/halo” – Contains the Halo component library.

Coming up next : Flash Builder 4 : Overview Part 3 on Styling

Flash Builder 4 (Flex 4): overview part 1

June 2, 2009 by

Finally Flash Builder 4 (read Flex Builder 4) is out. I was trying to review on what has changed and whats new in the latest release. Flash Builder… I don’t know I think I like Flex Builder better 🙂

I will review new features in Flash Builder 4 with respect to IDE ,Syntax,Components,Styling,Performance and finally a Conclusion.

So lets get started with the IDE,

On the whole the IDE looks just about the same. But look a little closer and you will notice a host of other things. The top then things that you might notice (If  you start building a project right away) are…

1 The Package Explorer (Flex Navigator in FB 3)
-The code management has changed a little.
-The packages are now grouped, which is a very good thing (you will know why if you use cairngorm)
-Outline has been included with the class shows SDK (framework) packages
-Uses swfobject.js instead of AC_OETags.js

The new Package Explorer (earlier: navigator)
The new Package Explorer (earlier: navigator)

2 The Component Explorer

The  Components view in the design mode now has a different folder structure. Some new components have been added and you won’t find some old components like the numeric-stepper. I will be adding a detailed review on components in part 2.

Components have been recatogerized

3 Data Services Tab

By Far, the most exciting feature of FB4. This tab allows you to link data from a source without a single line of code. See it to believe it.

The Data Services TabThe Data Services Tab

4 The Network Monitor

Adobe has really worked on Developer productivity and I say this because of this super cool feature that allows you to see the communication your app makes with your data server. No more searching for analyzers and http sniffers online  🙂

The network monitorThe network monitor

5 ASDocs window
Another one for developer productivity. If you are working on Flex 3 I am sure you ll love this. No more opening new windows or googling up what some property means. The ASDocs  window allows you to see it there and then.

ASDocs Window

6 Auto Function Generator
Another one that generates a function definition without any typing 🙂

Auto generate functions for events

7 Theme chooser

Components are now divided into Spark and Halo(standard flex 3 components) compoents and with the theme chooser you can how you want to display them…

Theme Chooser

8 Appearence Window
Along with the Properties components (enhanced quiet a lot) there is another tab for Appearece. The styling for Flex 4 components has changed (especially for spark). The appearance window mainly caters to it.

Appearence window (For Spark components)

9  States in Code View
This release will amaze you if you are a flex developer. State management, it seems has been enhanced drastically and this options grey’s out everything that is not included in the selected state. WOW !

States selector for code view

10 Export as FXP – The new export format

The flex project archive (.zip) is now FXP.
This has been about the IDE Features and there is a lot more to explore, for the next part lets try our hands on some new flex compoents .

Export as FXP from File Menu

Coming up  : Review of Flash builder 4 Syntax,Components,Styling,Performance and finally a Conclusion.
Download Flash Builder 4 today

Flash (Flex) Builder 4 available for download

June 2, 2009 by

Yes Flex Builder 4 renamed to Flash Builder 4 and Flash Catalyst are  available for download on labs.adobe.com -> Get Flexing guys…

Cheers,

Y

Installing flex sdk 3.2 or higher

May 30, 2009 by

Download latest Flex SDK (It will be a zip file)
Shut down Flex Builder 
(Take Backup and) Delete the license.properties file at:  C:\Documents and Settings\All Users\Application Data\Adobe\Flex\license.properties
Extract the files at <FB3-install-dir>\sdk (Typically C:\Program files\Adobe\Flex Builder\…)
Start Flex Builder again -> This time it will prompt for a license key, if not prompted to enter the license information at startup, use Help -> Manage Flex Licensesput the  license key.
Datavisualization source files will be extracted

Flex problem: ArgumentError: Error #1063

May 30, 2009 by

If you are getting this error while using RSL
ArgumentError: Error #1063: Argument count mismatch on mx.core::CrossDomainRSLItem(). Expected 5, got 6.
Make sure your applications are compiles using a consistent verions of sdkIn this case the application  (which uses the remote library) needs to be compiled with flex sdk  version 3.2 or higher


%d bloggers like this: