Monday, December 14, 2009

Runtime Shared Libraries

What is RSL:

One of the main problems with Flex is that the swf file size of the applications sometimes becomes a lot heavy resulting in an increased loading time. True that one the app is loaded in the browser, it provides faster access the next time, but the basic problem there is that it is loaded up in the browser. That means that it is easy to loose the cached content when the user deletes his browser cache (which happens way too often these days).
To counter this what can be done is that the shared assets and stand-alone files can be separately downloaded and cached on the client. These libraries are stored not on the browser cache but the Flash Player cache, and hence is never deleted. The creation of RSLs also greatly reduce the application SWF FIle
The basic use of RSL can be to separate out the Framework Libraries. More information here




Wednesday, December 9, 2009

Setting a background fill color in a Sprite

While extending components, it might be useful to set the background color to something. The Sprite in Flex does not provide a backgroundColor property as do UIComponents. But the background can be set just as easily using the "opaqueBackground" property.

All you need to do is:

mySprite.opaqueBackground = my_color;

* my_color can be a uint or a hex color String.



Setting Hand Cursor in Label

Lot of people have asked me this one question. While the answer is relatively simple, I have not found it mentioned at a lot of places. So here goes,

How to set a hand cursor in a label?

There are 3 properties put together that do this (Most places might tell you only 2).
1. useHandCursor = true;
2. buttonMode = true;
3. mouseChildren = false;

And lo and behold. All done.

Thursday, November 19, 2009

Of Mathematics And UI Styling

I was never a fan of Co-ordinate Geometry till now, but then I hadn't really encountered proper UI styling with delicate skins also till recently.
Of course when one uses proper utils for creating skins as Photoshop or Gimp etc, one still doesn't need to encounter a lot of Maths, but then I had different ideas. I wanted to design without the editors and that has led me to find out a lot about equations and other mathematical formulae associated.
Actionscript UI design Rocks... :)
It's great to finally use some proper Maths!!!!

Cheers.

Sunday, November 1, 2009

Database Replication in a nutshell

Database Replication allows is the making of an exact copy of one database into another in the same or a different server. This can be seen as a master-slave relationship wherein the slave copies the changes done into the master.

THE PROCESS:
All the statements that are to be run in a database are stored in a log file by the DB. The log file has a pointer that points to the last run command. At a certain lag from the main pointer a pointer to the replicated DB exits. Thus each command in the log passes through both the pointers thus updating both the databases.

HOW TO:Replication can be set up by granting the permission and setting the slave. This can be done as below:

Ensure that the master db uses a binary update log and has a server id as 1. To do this db config file (my.cnf) should have the following lines
log-bin
server-id=1

To the master database grant access to replication
GRANT REPLICATION SLAVE ON *.* TO user IDENTIFIED BY password

In the slave db config file set the master path, user and password to access and you are done.
Ofcourse there would be lot more configurations to be done based on specific cases.

Securing the Amazon Server

Security attacks on Amazon Server (S3) are common occurence. While studying the nature of the attacks that were sent we found that one of the major gateways was the phpMyAdmin (an open source database access tool).
It seems that the tool is vulnerable to attack and can prove an easy entry into the system. Removing it was the first step to securing. The next step was to restrict entry into the system for which we added the .htaccess file in the system with the allowed ips configured. But as with web based applications this was not a neat solution first it can cause a hindrance if not properly configured. Also since access cannot be completely restricted, getting in using proxy servers cannot be ruled out.
The next step hence was a proper firewall into the system. A nice tool that helps one build a firewall security into the system is the FWBuilder. One can configure the allowed traffic in and out of the system in a couple of easy steps easy to understand options. Once done the rule set is saved in the local system and can be applied to the server. Smart, easy and secure.

Thursday, September 10, 2009

POST with navigateToUrl in Flex

Been struggling from the last 2 days to get a POST to work with navigateToUrl in Internet Explorer.

Sample Code:

var vars:URLVariables = new URLVariables();
vars.action = "some_action";
vars.ZZ_RESPONSE_CONTENT_TYPE = "application/x-download"
vars.ZZ_RESPONSE_HEADER = "Content-Disposition|attachment; filename=\"" +"abc.csv\"";
vars.arg1 = _arg1
vars.arg2 = _arg2

var request:URLRequest = new URLRequest();
request.data = vars;
request.method = URLRequestMethod.POST;
request.url = Server_URL

navigateToURL(request, "_blank");

What I am trying to do is POST some data to the server via a URLRequest and download a file based on the data. I use the navigateToUrl function and pass the request and ask it to open up the download in a new browser window. Everything works well in all browsers when my HTML page moves straight into the server url.
The problem arises when I use an IFrame in the HTML (to mask my server url). The code still works fine with other browsers. But Mr. IE has a problem. It does not get me my download file. On scraping through the logs I found that, it was not passing the parameters to the server and hence the action failed. (Confirmed this from a couple of blogs too).

WorkAround: Don't use IFrame (pretty simple if you don't mind the users looking at the URL changing in their address bar)

OR

use the "_top/_self/_parent" option with the navigate to URL

The latter, however, might again be a hindrance, if the Information Bar in the Internet Explorer is enabled as it tries to reload the page as soon as we try to download from the Information Bar.

I want to try and remove the Information Bar programatically, but have no clue about it till now. Will update as soon as I find something.

All help welcome.

Friday, June 26, 2009

Embedding Skins in CSS - Flex

For a flex application, skinning our components, is a common and a very useful way to add some zing to the application that is being built. However, care has to be taken while creating skins for our components, for it could easily shoot the size of the CSS, that is packaged with the application, resulting in somewhat higher loading times.

One such example could be that, we should not extend a UIComponent while creating skins, extend ProgrammaticSkin instead. That itself can reduce the size of the css, by around 20KB.

I'll keep a lookout for more such factors and try and post them here as soon as possible. :)

Cheers.

Thursday, June 18, 2009

FTP File Transfer - Not Logged In Exception

When I found this error, I did a google search on it and found that most of the queries have been replied as something to do with the XML data.
But then, what the heck, I don't have any XML data in my code. Very soon however, I found the answer. I was trying to set the mode for the FTP Data Transfer even before logging into the FTP Server. Changed that and everything is set right. :)

Before:


FtpClient ftp = null;
try
{
ftp = new FtpClient();


ftp.openServer(FTP_SERVER);


if (filename.endsWith(".txt") || filename.endsWith(".csv"))
{
ftp.ascii();
}
else
{
ftp.binary();
}

ftp.login(FTP_USER, FTP_PASSWORD);
if (REMOTE_DIR != null) ftp.cd("REMOTE_DIR);

// Rest Of the Code Here

}
catch (Exception e)
{
throw e;
}


After:


FtpClient ftp = null;
try
{
ftp = new FtpClient();
ftp.openServer(FTP_SERVER);
ftp.login(FTP_USER, FTP_PASSWORD);
if (REMOTE_DIR != null) ftp.cd("REMOTE_DIR);

if (filename.endsWith(".txt") || filename.endsWith(".csv"))
{
ftp.ascii();
}
else
{
ftp.binary();
}
// Rest Of the Code Here

}
catch (Exception e)
{
throw e;
}


Very simple indeed, but it did put me in a fix for a while and I found out one more thing for sure.. GOOGLE SEARCH might not be the best thing at all times. :)

Tuesday, June 16, 2009

jXls

To those who don't know, jXls is a welcome java tool (read library), for easy conversion of raw data into an excel file. Nice tool and simple to use.

One thing to take care of while using this is not to use same names for the key in your map as present in the Object fieldName or part of the fieldname.
If present, the result does not print those particular fields in the excel sheet

For those who are unclear
We were sending customer data combined with the address data for the customer. Doing something like:

private List customerL = new ArrayList();
private List addressL = new ArrayList();

private void createLists()
{
// Add all that you want to the lists.
}

private void createCustomerFile(Map beans, XLSTransformer transformer) throws IOException
{
beans.put("customer", this.customerL);
beans.put("address", this.addressL); transformer.transformXLS(this.configM.get("CUSTOMER_XLS_TEMPLATE"), beans, (FOLDER_NAME + "/" + "Customer.xls")); beans.remove("customer");
beans.remove("address");
}


My excel sample file contains fields like name, id, loginId, hobbies, customerClass [these come from customer record] and address, city, pincoce [these come from address record].

In this case the customerClass and the address fields were not populated in the result excel sheet.

The solution: simple change the Map keys: customer to customerRecord and address to addressRecord.

All solved.

For more information on jXls pleas visit: http://jxls.sourceforge.net/index.html

Tuesday, January 27, 2009

Dynamic Styles in Flex

Loading CSS at Runtime:

Flex does have many features to offer. One of them, which really catches the eye, is the ability to load your CSS files at runtime.

For a UI intense application, deployed at multiple places a change in color schemes and a few skins could mean a complete copy of the entire project. Fortunately, with this [loading css at runtime] approach, things get a lot simpler.

What we need to do:

  1. Write a css file for your application .
  2. Compile the css file into swf. This can be done either via the command prompt by running the command in the path of the flex compiler mxmlc css_filename.css or by using the Flex Builder option "Compile CSS to SWF".
  3. The compiled file can be found in the output folder of your project.
  4. Load the style sheet in your code. This can be done via the appplication initialize event or in the code itself.
<mx:Application mx="http://www.adobe.com/2006/mxml" layout="absolute" creationcomplete="this.applyStyleSheet();" width=100%" height="90%">

<mx:script>
<![CDATA[

private function applyStyleSheet():void
{
/* You can also load the name of the file from the configuration or the DB. */
var styleSheetUrl:String = "file_path/filename.swf"
var event:IEventDispatcher = StyleManager.loadStyleDeclarations(url);
event.addEventListener(StyleEvent.COMPLETE,this.startInitProcess);
}

private function startInitProcess(event:StyleEvent):void
{
// Rest of the application code starts from here.
}

]]>
</mx:script>

</mx:Application>

The above code loads up the stylesheet from the specified path. The rest of the UI then loads up taking the styles as defined in your custom stylesheet.

Cheers and Happy Styling.