setFocus Issue on TextInput – Solution

November 29, 2007

Some days back, I got a mail from a customer with a baffling problem. Consider this…

  • You have 3 TextInputs, adjacent in tab order in an application.
  • You type something on the first, press tab, again type something on the next and tab again
  • Now for some reason, you want the second tab to switch focus onto the first, instead of the last TextInput…

He wrote a listener for the focusOut event on TextInput2 and then wrote the following code in the listener function.

event.preventDefault();
stage.focus = txt1;
txt1.setSelection(txt1.text.length,txt1.text.length);

He expected this…

But got this…

After lots of digging, I found the solution, thanks to Sreeni 🙂

It seems that the problem is that though the application focus moves to TextInput1, the keyboard focus moves to TextInput3, as the keyboard foucs is moved before the focusOut method is called and we are able to call preventDefault() on it.

Sreeni dug out a KEY_FOCUS_CHANGE event which needs to be listened to, on TextInput2 and then repeated the above code for the event-listener method. So,

Instead of writing

<mx:TextInput id=”txt2″ focusOut=”setTxtFocus(event)”/>

You need to write the following code in the creationComplete Listener in AS

txt2.addEventListener(FocusEvent.KEY_FOCUS_CHANGE, setTxtFocus);

Now you can repeat the same code for the setTxtFocus method and solve this issue… You can see the app and the solution code below

Application | Source


FLEX requirement at I.GEN Labs, Bangalore, India

November 29, 2007

Karthik from I.GEN Labs contacted me about an urgent FLEX requirement at their company. I think they are open to freelance options too. Here’s the excerpt from his mail to me…

I.GEN Labs is a consultation startup based in Bangalore handling some “small” projects for some of the biggest retailers in India. We are into building systems that we think are first of their kind in the retail sector.


The profile we are looking at apart from high enthusiasm and a strong desire to create is a solid working knowledge of Flex. Some basic knowledge of Databases will also make life easier.


Do let us know if you could help us find somebody. Our contact numbers are
Karthik.R – 9980005873
NIranjan. Murthy — 9986033579


Flex2 Developer Exam

November 28, 2007

The Adobe Flex 2 Developer Exam is based upon the most critical job activities that a Flex developer performs. The skills and knowledge certified by this examination represent a professional level of expertise for a certified individual. To become certified, you must pass an exam that consists of approximately 65 multiple-choice questions. The exam is delivered in a secure and proctored testing environment. It can be taken at any of the following standard test centers

Here’s a DevNet Article that helps you prepare for the same…


Me at SAP TechEd

November 27, 2007

Today I was at SAP India for the SAP TechEd 2007 Bangalore, Community Day. I know that SAP enjoys a huge community base in India and this event was a testimonial to that. Me, Anirudh & Sunil from the Flex Team where there at “RIA Innovation Track”, which was one of the Breakout Sessions at the Commuity day. We were joined by Aravind from ZOHO, Craig Cmehil, Abesh Bhattacharjee, Thomas Jung and our very own Mrinal Wadhwa from SAP.

I started with an introduction to RIA and to the Flex Technology and its advantages. The Mrinal took over and did an introduction to AIR. What I really liked about his presentation is the fact that it was done in AIR 🙂 We showed some cool demos and I think we really captured the audience’s attention.

What happened in between was that we overshot our time and spilled into Craig’s Session. But Craig generously asked us to continue and said that his session on “Twitter meets NetWeaver” could be found on SAP Dev Net or SDN. Then, Thomas Jung just came in and stole the show after that. He introduced FLOB. FLOB or “Flex On BSP” project represent a library of SAP BSP Extension Elements that generate Adobe Flex instead of the standard BSP Extension output of HTML and JavaScript. It is really awsome and you had to be there to see it. What makes it even more impressive is that his idea is very simple.

An empty, compiled SWF file is loaded into the Flash Player within the Browser. UI elements are then added to the framework via JavaScript and the Adobe Flex/AJAX bridge (FABridge). This allows for a simple interface relying only on JavaScript to manipulate the User Interface. To make the process even easier, these BSP Extensions encapsulate the JavaScript and map concepts to BSP friendly constructs. BSP Server Side Eventing and Data Binding are both supported even with the Flex User Interface Elements. This is available as an open-source project on Google Code.

Aravind also introduced the cool ZOHO APIs that you can play around with. Then it was Abesh’s turn to show a cool demo of how to “Jazz up your xMII UIs using Flex“. It was a neat demo with him connecting to an SAP backend to get data into a Flex DataGrid and then into a LineChart.

We then ran short of time and so I promised to share my code and do a e-seminar of how to write it. Here’s fufilling the first part of the promise. Here’s the application code of the Flex App…

Application | Code

Assets: data.xml | background Image

I will ask Mrinal to post his AIR Code too. I will try to record the eSeminar asap and get it out to you guys…

 


Free registration of FlexBuilder2 with Charting for Students & Faculty

November 26, 2007

Some timeback, I had written about Adobe’s announcement on providing FlexBuilder2 free of cost to students and faculty of educational institutions. I had promised more info on this, so here it is.

First, the great news!! Adobe is giving you not just a FlexBuilder license, but also the Charting package along with it. This is great news as you can now make really awesome applications like the showcase dashboard easily. Here’s what you should do…

  1. Go ahead and create an Adobe ID here (ignore this if you already have one)
  2. Use the same page to sign in
  3. Go to the this link and download FlexBuilder & the Flex Charting package.
  4. Now go to flexregistration.com and register your product as a student or faculty
    • If you are a student, you would need to upload scanned image (GIF or PDF) of the front of your Student ID stating a current date. If you do not have a Student ID please upload a scanned image (GIF or PDF) of a letter on your educational institutions letterhead that verifies that you are a current student at the institution
    • If you are a faculty, you would need to upload scanned image (GIF or PDF) of the front of your Faculty ID stating a current date. If you do not have a Faculty ID please upload a scanned image (GIF or PDF) of a letter on your educational institutions letterhead that verifies that you are a current Faculty at the institution
  5. This info will be verified and then you can get the license key for the software.

On the same note, here are some other resources that students and faculty can leverage if they are interested in Flex.

Do try it out and let me know if there are any issues or queries.


Creating Exploding Pie Slices in Flex 3

November 20, 2007

This post is about creating exploding pie charts in Flex. We will look at both static pie slices as well as dynamic & animated pie slices.

It is very easy to create a static exploding pie. There is a property called explodeRadius on the PieSeries class, whose default value is 0, which can be set to a value between 0 and 1 to get a static exploded pie very easily.

<mx:PieChart id=”pie0″ dataProvider=”{expenses}” showDataTips=”true” >
<mx:series>
<mx:PieSeries field=”Amount” nameField=”Expense” explodeRadius=”.1″/>
</mx:series>
</mx:PieChart>

If you want a dynamic way of pie slicing, like in the Dashboard app, you would need to do more . Here are the steps to achieve something like that…

  • Firstly, in dynamic pie slicing you have to enable mouse clicks on the pie chart. This can be achieved by setting the selectionMode property on the PieChart to single (as we need only a single selection here)
  • You need to also bind the perWedgeExplodeRadius property on the PieSeries to an array object which has items with value between 0 and 1. This array has items as many as there are slices in the pie and all of them are set to zero to begin with. These will decide the explode radiusfor the corresponding wedge.
  • On click, we will have to have a listener configured for an itemClick event on the PieChart and by trapping it, we can assign the explode-radius to that particular slice only by modifying the perWedgeExplodeRadius array. We then reset the array to the PieSeries and refresh it to attain the dynamic slicing.
  • But, the slicing action is still abrupt at this point. To provide a smooth animation, you need to set the showDataEffect on the PieSeries to interpolate.

And there you have your dynamic exploding pie-slice…

Here is the link to the application and the source code… Enjoy 🙂

Application | Source


AIR 1.0 Logo Released

November 19, 2007

Mike Chambers on Friday, revealed the AIR 1.0 Logo. The logo is supposed to represent the 3 core technologies that AIR integrates i.e. HTML, Flash & PDF.

 

Read more on the logo on Mike’s Blogpost