First look on Mirroring and Charts

Couple of quick updates before i elaborate on mirroring.

1. Flex 4 and Flash builder 4 are up for grabs. You can download them from here
2. Advanced Data visualization components (which include ADG, ODG and Charts) are now a part of free open source flex sdk.

There's gonna be a follow up version for flex sdk 4.0, which will include layout mirroring feature. This feature is intended to trivialize repurposing a GUI designed for a LTR language, like English, for a RTL language like Hebrew or Farsi. Following Q&As might help you to understand\ picturize the feature better. I have focussed on its impact on charts.

Q: How can I set the layout for a RTL language?

A: The mirroring API is defined by a new interface called ILayoutDirectionElement. The interface defines the layoutDirection property whose value can be "ltr" or "rtl". By setting the property value to "rtl", at the application (root) level , the layout will be mirrored.

Q: Can i set layoutDirection at component\container level, instead of setting it at application(root) level?

A: Yes. For example, you can set layoutDirection for ColumnChart by using this code

Q: How would a chart look in a RTL layout?

A: Sample image of a line chart with DateTimeAxis whose layoutDirection is set to RTL is shown below

Q: layoutDirection for the Application is ltr , and layoutDirection for chart is set as rtl. Is this a valid scenario? How would the application look at the runtime?

A: Yes. It is a valid scenario. Only the chart will be mirrored and not the application. Hence, the chart will be on the left hand side at the run time. An HLOC chart for the above scenario is shown below

Q: When layoutDirection is set to rtl, what will be the text allignment of the text in the datatip for a chart?

A: Text alignment in the datatip depends on the style "direction". If we want the text inside the datatip to be right aligned, we should set the direction to "rtl" as given below. This is independent of layoutDirection.

Comments\feedback are welcome.

Thanks,

Sudhir

How to set timezone manually for php

Recently, i was trying to fetch some data which had date in it, using XAMPP 1.7.2 and FlashBuilder 4 , and I faced the error given below.

InvocationTargetException:There was an error while invoking the operation. Check your server settings and try invoking the operation again.
Reason: Server error DateTime::__construct() [datetime.--construct]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'Asia/Calcutta' for '5.5/no DST' instead #0

To overcome this, we have to manually set the timezone. Explanation is given below.

Since PHP 5.1, there has been an extension named 'date' in the PHP core. This is the new implementation of PHP's datetime support. Although it will attempt to guess your system's timezone setting, you should set the timezone manually. You can do this in three ways :

1) in your php.ini using the date.timezone INI directive

2) on your system using the TZ environmental variable

3) from your script using the convenience function date_default_timezone_set()

I chose the step 3 to make things work. Since i reside in India, i added the below line in my php service.

• date_default_timezone_set('Asia/Calcutta');

For other countries, timezones can be found here

Below links can be useful for further understanding, which i have used as references.

http://php.interec.es/UPDATE_5_2.txt

http://php.net/manual/en/function.date-default-timezone-set.php

How to set basic authentication for php in flex 4

I have listed down the steps which will help you to use basic authentication for php services using Zend in FlashBuilder4

1. Have a function called initAcl($acl) in the php service similar to the one given below. All the functions inside the service which need authentication should be mentioned in this function( i.e., initAcl)

function initAcl(Zend_Acl $acl) {
$acl->allow('role1', null, 'function1');
$acl->allow('role2', null, array('function1', 'function2'));
return true;
}

Please find a sample service here

2. Have a security.xml file which specifies the user roles and has user name and passwords stored in it. Sample contents of the xml file is given below.

<roles>
<role id='admin'>
<user name='user1' password='pwd'/>
</role>
<role id='hr'>
<user name='user2' password='pwd2'/>
</role>
</roles>

3. Security.xml file can be placed anywhere (placing it outside the webroot is recommended. ) The path has to be specified in the gateway.php file . Also a small code has to be added in the gateway.php file as given below.

$auth = new Zend_Amf_Adobe_Auth("C:\wamp\security.xml");
$server->setAuth($auth);
$server->setAcl($auth->getAcl());

Refer to this gateway.php file to know where exactly should the above code be added

4. below code has to be added in the mxml, where serviceName1 is the name of the service created.

serviceName1.serviceControl.setCredentials(
'username','password',null);

Support for basic authentication in php is added in Beta 2 release of FlashBuilder 4.

Whats new in charts in Flex 4

I have already discussed about few of the enchancements done in Charts for Flex4, in my earlier posts. Direct links to those posts can be found below.

1. http://sudhirmanjunath.blogspot.com/2009/06/inverted-axis-supported-in-flex-4.html

2. http://sudhirmanjunath.blogspot.com/2009/06/new-style-called-renderdirection-added.html

Apart from the above two enhancements, support is also provided for custom filter functions on the chart series. 2 new properties filterDataValues and filterFunction have been added to series.

3. filterDataValues: If filterFuction is set, filterDataValues and filterData are ignored. If filterDataValues property is set to none, series will not filter its data before displaying. If filterDataValues is set to nulls, series filters data like null, undefined, or NaN before displaying. If this property is set to outsideRange, series filters its data like null, undefined, or NaN and also the values that are outside the range of the chart axes. If you know that all of the data in the series is valid, you can set this to none to improve performance.

4. filterFunction: Specifies a method that returns the array of chart items in the series, that are to be displayed. If this property is set, the return value of the custom filter function takes precedence over the filterDataValues andfilterData properties. But if it returns null, then filterDataValues and filterData will be prefered in that order.

The custom filterFunction has the following signature:

     function_name (cache:Array):Array { ... }

Below is an example of custom filter function:

public function myFilterFunction(cache:Array):Array {
var filteredCache:Array=[];
var n:int = cache.length;
for(var i:int = 0; i < n; i++){
var item:ColumnSeriesItem = ColumnSeriesItem(cache[i]);
if(item.yNumber > 0 && item.yNumber < 700)
{
filteredCache.push(item);
}
}
return filteredCache;
}

5. If you are working with Data Centric applications, binding data to charts has been made very simple in Flash Builder 4. I am going to talk about this in my future posts. Watch out this space for more on DataCentricDevelopment support for Charts.

6. Apart from the enhancements mentioned above, there have been a lot of bug fixes. Please use this link to log\ serach for bugs.

Thanks,
Sudhir

Reading from the web "Readefined"

U are reading a really long blog and are lazy to scroll till you reach the end of the page. Imagine how cool it would be if you can read the same blog in a multi-column layout, just as if you were reading a paper!

Here is a cool app which helps you do just the same which is developed by one of our collegues, Anirudh. It uses TLF(Text layout format) included in Flex 4. Now this is what i call awesomeness reAdefined.

Inverted axis supported in Flex 4 charts

We can now create charts with inverted axis. A column Chart with inverted axis will look like this.

This is made possible by adding a new property "direction" on NumericAxis from which the LinearAxis, LogAxis and DateTimeAxis are derived. Accepted values for "direction" are normal and inverted. If the value is inverted for its "direction" property, axis will be inverted. The default value for direction is normal.

Here is a sample and source for the same.

New style renderDirection for PieSeries added in Flex 4

A new style renderDirection is added to PieSeries depending on which the wedges in the series are drawn. It accepts 2 values "clockwise" and "counterClockwise".
Default is counterClockwise which shows current behavior, renders the wedges in anti-clockwise direction. clockwise renders them in clockwise direction.

Click here to check out a working example
Click here for the source