Alt+CharKey writing problem in Flex Spark TextInput

,

Hello Everyone,   
Recently I was working on one Adobe AIR enterprise application, and I faced one problem that may be occurred to many developers of Adobe Flash Platform.
I want to share that with other guys, that they might be needed or may face this problem.

In my application, I had a one popup and that popup was listening for some shortcuts keys to open another popup. And shortcuts were basically with the combination with Alter Key (Alt+A, Alt+E, Alt+P etc.).

When I press one shortcut, say Alt+A, one another child popup was opened. And in that popup I have to set focus on one textinput when it is opened.

So when I was pressing Alt+A, one default character was written in that textinput. For example, ‘1’ for Alt+A.
And more different characters for different combination of keys with Alter Key.

So this was the problem with different shortcuts and also if we are in one textinput in main popup, if any shortcut key is pressed then that default character was also written in that textinput.

So I found two solutions for solving this problem.

First, I found that, do not set focus directly, while opening that child popup of shortcut.

For example,

private function openPopup():void
{
    var myPopup:MyChildPopup = new MyChildPopup();
    PopUpManager.addPopUp(myPopup, this, true);
    PopUpManager.centerPopUp(myPopup);
    myPopup.setFocus(); //wrong method
} 
    

Instead of setting forcus directly, use callLater function
Like,

private function openPopup():void
{
    var myPopup:MyChildPopup = new MyChildPopup();
    PopUpManager.addPopUp(myPopup, this, true);
    PopUpManager.centerPopUp(myPopup);
    callLater(setPopupFocus, [myPopup]); //right method
} 

    
public function setPopupFocus(popup:MyChildPopup):void
{
    popup.setFocus();
}
            
So this call later function will be called when that dispatcher key event will be over, and that character will be not listened by new opening popup's textinput.

But still the problem was that if we press any key with alter combination in any textinput, it was writing that default character in textinput.

So, I used event.preventDefault(); to stop writing text with alter key in textinput when alter key is pressed.
So I had created one custom textinput which was listening keyDown method of textinput and do not write any character if alter key is pressed.

So here is my class of that custom textinput.
   

package
{
    import flash.events.KeyboardEvent;
    import spark.components.TextInput;
    
    public class CustomTextInput extends TextInput
    {
        public function CustomTextInput()
        {
            super();
        }

        override protected function keyDownHandler(event:KeyboardEvent):void
        {
            if(event.altKey)
                event.preventDefault();
        }
    }
}



So, I hope this will help to some developers to solve the problem.

Open Custom Extension File with Adobe AIR Application

,
Hi,

In Today's Tutorial we will learn that how to open file with adobe air application and how we can handle it in Adobe AIR application.

Adobe AIR supports InvokeEvent by that we can run the application and can also pass parameters to Adobe AIR Application and can handle it.

We will see one simple file opening and handling in Adobe AIR Application.

In this example when we will open file into Adobe AIR Application, this application will read the contents of file and will display it to the TextArea in the Application.

Let we see it by Code :


<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       invoke="onAppInvokeByFile(event)">

    <fx:Script>
        <![CDATA[

            protected function onAppInvokeByFile(event:InvokeEvent):void
            {
                txtFile.text += "File Path : " + event.arguments[0].toString() + "\r\n\r\n";

                var invokeFile:File = new File(event.arguments[0].toString());
                var fileStream:FileStream = new FileStream();

                fileStream.open(invokeFile, FileMode.READ);
                txtFile.text += "Content : \r\n\r\n" + fileStream.readUTFBytes(invokeFile.size);
                fileStream.close();
            }

        ]]>
    </fx:Script>

    <fx:Declarations>

        <!-- Place non-visual elements (e.g., services, value objects) here -->

    </fx:Declarations>

    <s:Label left="10" top="10" text="File Content : "/>

    <s:TextArea id="txtFile" left="90" right="10" top="10" bottom="10"/>

</s:WindowedApplication> 


So by this way we can handle the file opening into Adobe AIR Application.

Building Custom File Extension with Adobe AIR Application with Example

,
Hi,

By This tutorial we will learn how to create custom file with our custom file extension which will be opened in out flex Adobe AIR application as default application.

For example,
When we create any PSD file for Adobe Photoshop and then will open a PSD file it will be by default opened in Adobe Photoshop.

So in this tutorial, we will create our custom file extension and when that type of extension file will be opened, it will be opened in our Adobe AIR Application.

So, to do this we have to register the file extension with our Adobe AIR Application.
It will be done by giving some filetype parameters in our app.xml file.

So by this way we can do this :
<fileTypes>

        <fileType>

            <name>MyTest.File</name>

            <extension>mt</extension>

            <description>My Test File</description>

            <contentType>text/xml</contentType>

            <icon>

                <image16x16>assets/icon16.png</image16x16>     

                <image32x32>assets/icon32.png</image32x32>     

                <image48x48>assets/icon48.png</image48x48>    

                <image128x128>assets/icon128.png</image128x128>

            </icon>   

            

        </fileType>

</fileTypes>




By explaining above code,

First of all we have to give file types that are supported by our flex application.
Then one single file type will be added.
we have to give name, file extension, file description, file content type and at last we have give four icons for the given resolution for the icon of the file.

Its Over.

Now for Handling this file open in our Adobe AIR Application.
We have to listen " invoke " event listener in our application.

So let me give one example that will be handler the file open and will write the native path of the file and content of the file in one TextArea.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       invoke="onAppInvokeByFile(event)">

    <fx:Script>
        <![CDATA[

            protected function onAppInvokeByFile(event:InvokeEvent):void
            {
                txtFile.text += "File Path : " + event.arguments[0].toString() + "\r\n\r\n";

                var invokeFile:File = new File(event.arguments[0].toString());
                var fileStream:FileStream = new FileStream();

                fileStream.open(invokeFile, FileMode.READ);
                txtFile.text += "Content : \r\n\r\n" + fileStream.readUTFBytes(invokeFile.size);
                fileStream.close();
            }

        ]]>
    </fx:Script>

    <fx:Declarations>

        <!-- Place non-visual elements (e.g., services, value objects) here -->

    </fx:Declarations>

    <s:Label left="10" top="10" text="File Content : "/>

    <s:TextArea id="txtFile" left="90" right="10" top="10" bottom="10"/>

</s:WindowedApplication>

When file will be opened in application onAppInvokeByFile function will be called and we will get that file into InvokeEvent's argument.

Loading and Saving Images from and to Camera Roll Library Flex Mobile Application Adobe Air

,
Hi,

In this tutorial, we will discuss accessing images from the Camera Roll Library of your phone into your application and saving those images of the screen or a part of the screen to the Camera Roll Library back by Flex Mobile Application.

This can be done by new AS3 classes specified in AIR on mobile. By the CameraRoll class and its methods: browseForImage and addBitmapData. We will see this by an example and souce code.

Also Example is available on Documentation of CameraRoll on Adobe Help...

Will be Continue....

Flex Mobile Application Performance Tips on iOS Android

,


How to Optimize Flex Mobile Application Performance?
General Tips and Fundamentals...

Flex Application UI Design Tips

,

    Any application user wants rich interaction with his application. And in now days; most of the application developers focus not only on features that application provides but also on the usability and user-friendly environment of in their applications. Any user wants the application that meets their needs and that are easy to use.

    So, after making some of applications in flex and also reviewing some RIA applications and also by my personal experience, I really realize that the user interface is one most important factor of any flex desktop application.

    So, I will like to share my ideas for building any flex application with flex developers.




    So, when starting any application development, the following things are important:

1) What is the purpose of UI that you are building?
Any UI component is build by other multiple components.

A basic UI component should only do one thing.
-    Display application status
-    Display user status
-    Display user logon
-    Display registration
-    Show a list of users
-    Show a tree of users

2) Keep your UI Simple and independent
Make your UI simple as much as you can.

Also one thing that you had to remember is that, in any application, Always Parent know its children, children should never invoke parent directly or neighbor children.


3) Keep your UI Clear
UI is running from several states during execution.
Those states should be like:
  • Initial State: When UI is just created, no any data is injected in it.
  • Show State: Showing data to user.
  • Type State: Show tips to user where it should require.
  • Update State: When user wants to update his data, suppose he clicked on save button to save his/her data.
Now why state is required in application?
By state designer can know at what status application is currently working.
Also state can divide the UI in several parts and make the development easy. 

4) Keep your UI correct
First, Data is always required to show a UI in correct way then we can see the real application state. So check first your application is working fine without UI ? Unit Testing and log system is good tools for this.

Second, UI always handle two way data, in and out. So also take care of data in/out.

5) Keep UI and data matching
UI change may change data structure and data structure change may change UI structure.
UI and data is two side of one object. They cannot be separated.
So UI can only work well with his data.

Background in Flex Mobile Application

,
Earlier, I was looking at one Flex Mobile Application in that they have set a background to the application. I know this is not a big deal for the experienced flex developer. But for the fresher who has not a deep knowledge of the Flex 4.5 with skinning, for that this may be a big deal.

    But it is easy to set background Image or background color to the Flex Mobile Application. But this may be more complex for the fresher of flex 4.5.
So, now I am putting some basics, how to add background image in Flex Mobile App.

    Let’s we start by one simple Flex Mobile Application. So first of all
Go File->New->Flex Mobile Project

Enter your project name and set the location and choose flex sdk(mostly flex 4.5)

Now choose, Target Platform (you can choose any platform)
And choose View-Based Application and you have more options for Permissions and Platform Settings. But there is no need of then right now.

Now it will ask for Server Settings but leave as it is and click the Next and then click Finish.

So now I will have two files:
One for the application and second for the view.
Code for these two file will be like as follow:
Application file:



<s:viewnavigatorapplication firstview="views.testHomeView" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> 

<fx:declarations>

</fx:declarations>

</s:viewnavigatorapplication>
View file:

<s:view title="HomeView" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">

<fx:declarations>
  
</fx:declarations>

</s:view>



Now let we as one simple vGroup to our application that will be contain one label. And also we are changing our current View Title to Test App View.
So, Now Code will be like as follow :


And application will look like :

Now suppose we want to add background color so we will use property backgroundColor.
So code will be :

<s:view backgroundcolor="#C6D11D" title="Test App View" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
  

<fx:declarations>
       

</fx:declarations>


<s:vgroup height="100%" horizontalalign="center" verticalalign="middle" width="100%">


<s:label fontsize="40" text="My Test App" textalign="center">       


</s:label>


</s:vgroup>


</s:view>



And application will be look like:




Now let we want to add image in the background. So to add background to the Flex Mobile Application we have to create one skin class. Skinning is one of the most important feature of the flex 4.5. So we will create one skin class for the ViewNavigatorApplication and in that we will put our background image.

So I have created one skin class for the View. And I am applying that skin class to my view :

<s:view backgroundcolor="#C6D11D" skinclass="BackImageAppSkin" title="Test App View" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">


<fx:declarations>
        

</fx:declarations>


<s:vgroup height="100%" horizontalalign="center" verticalalign="middle" width="100%">


<s:label fontsize="40" text="My Test App" textalign="center">       


</s:label>


</s:vgroup>


</s:view>



And my skin class will be :

<s:skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">


<fx:metadata>


[HostComponent("spark.components.View")]


</fx:metadata>



<s:states>


<s:state name="disabled">


<s:state name="normal">


</s:state></s:state></s:states>


<s:bitmapimage height="100%" source="@Embed('testIMg.jpg')" width="100%">


<s:group height="100%" id="contentGroup" minheight="0" minwidth="0" width="100%">


</s:group>


</s:bitmapimage>


</s:skin>



This skin will be applied to  this view and if you want global application background then by the same way you have to create a custom skin class for the application view.
 And now if you run your app it will be look like :




I hope that will be useful for the fresher of Flex Mobile Application Developers.