Category Archives: Flex

Download links for the latest offline Flash Player Installer

Latest Update (05 April 2016) – Flash Player 21

Tired of searching, here the direct download links of the offline Flash Player Installer :

Found after some search here:

https://helpx.adobe.com/flash-player/kb/installation-problems-flash-player-windows.html#main-pars_header

Detected duplicate HTTP-based FlexSessions… so what?


Apache Flex

This annoying particular problem is quite easy to solve in most cases. What makes it complicated sometimes, is either the misleading message tail:

generally due to the remote host disabling session cookies. Session cookies must be enabled to manage the client connection correctly.

which will guide you to a wrong road generally, either the initial concurrent calls to BlazeDs Server associating two different flex ID with the same JEE session.

  • Identifying the root cause

    • Install flash player debugger version on your Firefox
    • Enable BlazeDs debug traces

<target class="flex.messaging.log.ConsoleTarget" level="DEBUG">

    • Enable log4j debug traces
    • Identify Flex remote object calls

logo_02_fullcolor_wb

  • Must-know before troubleshooting

  1. Flex Session is different from JEE session (JSEESSIONID)
  2. You don’t have to disable duplicate session check in BlazeDs, that’s why I won’t tell you how to do it.
  3. Each Endpoint is associated with a distinct flex client; So if you are using two endpoints for example you have two flex client at the same time created on first method call.
  • Flex Session mechanism

  1. On the first call for JEE server, the Flex application has a null Session ID.
  2. When BlazeDs receives a call from a session with a null ID, it generates a new Flex session ID and binds it with the current Java server session.
  3. The SWF holds this id for the relative Endpoint and assign it on every call to that endpoint.
  • The problem

Somehow, BlazeDS received two calls from the SWF with null ID, “at the same time”, so he creates and ID for the first call and another one for the second call. Those IDs are binded to the active Java session.

On the next remote object call, BlaseDS will check the Flex session associated with this Java session and will detect that two different flex session IDs are associated with the same Java session… and throw the famous “Detectd duplicate HTTP-based FlexSessions”, but that’s not due to host disabling session cookies.

  • How to solve the issue

  1. Load you application inside a JSP: Instead of calling your HTML main project page, let’s say it FlexProject.html, load your page inside a JSP page FlexProject.jsp

<%@ include file="FlexProject.html" %>

If that won’t help, you may consider Lin’s blog from adobe team. There’s also an in depth explanation of the issue in Alex Glosband blog.

Flex & Javascript : Why that won’t work?

Some tricks to keep in mind while trying to make a Flex application and Javascript communicate between them. Tutorials are available in the official documentation here and here. But you may be in a hurry, and omit some details that may prevent you from achieving what you want. So, either RTFM pretty slowly, or check those features:

That's you'll always get whenyou are in hurry!

  • ExternalInterface.available

You have to  check whether the browser supports the interface by using its available property:

if(ExternalInterface.available)
{
  //make calls
}
  • Check Browser constraints

The ExternalInterface class requires the user’s web browser to support either ActiveX or the NPRuntime API that is exposed by some browsers for plug-in scripting.

  • Check Embedded SWF ID

Your SWF object is included in the HTML page using the Object tag.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
<strong>id="logon"</strong> width="100%" height="100%" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">

The id and the name mustn’t  contain those characters :   [.-+*/\].  The sample application here is called “logon”.

  • Referencing your SWF Object

Not all browsers reference the swf object in the same way, some you may add a JS function to avoid this browser incompatibility issue:


<script language="javascript">

function getFlexApp(appName) {
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return window[appName];
} else {
return document[appName];
}
}

</script>

Be sure to make the correct reference to you application, because:


getFlexApp(logon);

won’t work. You forgot the double quotes :p


getFlexApp("logon");

That’s the correct way.

  • Make your Flex methods accessible

Inside the Object tag, in the swf object, change the


allowScriptAccess="sameDomain"

to


allowScriptAccess="always"

And in the Flex side, add a callback to your method to be added to the externalInetrface dictionary.


if(ExternalInterface.available){

//callFlexMethod is the AS function you want to call from JS

ExternalInterface.addCallback('YouWillCallTheMethodFromJSByThisName',callFlexMethod);

}

Allow security domain using Security.allowDomain(‘your js domain’) and make concerned functions public accessible via a wrapper function:


public function callFlexMethod():void{
Security.allowDomain('*');
if(ExternalInterface.available){
var wrapperFunction:String = "myPrivateMethod";
ExternalInterface.call(wrapperFunction);
}
 }

private function myPrivateMethod():void{
//some code here
}

Got it?… Good for you 😉

Axiis Data Visualization

Axiis library

Axiis is a data visualization library based on the basic Degrafa framework. It improves data charting presentation on Flex dashboarding, which visual graphs are still poor and under the level of the flex design.

The given samples are always based on CSV or XML transformation which may not be the case if you are receiving live data or plotting real time informations.

Before you start, as usual, RTFM :p Then you need to understand some primary concepts: Geometry, layouts, scaling and grouping. You need also to understand how dataProviders are wrapped before binding them to DataCanvas.

Here‘s the sample structure given on the official website from LineAreaAxis project :

Axiis LineAreaSeries sample

Base code

The dataProvider is a bindable global attribute containing data to plot on the chart. This data source is used twice on the LineSeriesGroup attribute of DataCanvas and on the LinearScale‘s (vertical scale) dataProvider .

Let’s have an example to get things illustrated. I want to display my server used bandwidth on real-time: So the X-Axis will contain time, Y-Axis the used bandwidth. So every drawn dot is a couple of (time,bandwidth).  So the first thing to do is to create an array of those dots alongside with another array containing the X-Axis labels.

//points to draw
private var dots:ArrayCollection;
//X-Axis Labels
[Bindable]private var xLabels:Array;
private var dataCollection:ArrayCollection = null;
private var wrapper:Object = new Object();
private var finalData:Object = new Object();

public function start():void
{
      dots = new ArrayCollection();
      dots.addItem({time:'00:00:00',bandwidth:'10'});
      xLabels.push('00:00:00');
      dots.addItem({time:'00:00:10',bandwidth:'17'});
      xLabels.push('00:00:10');
     //add all other points ...
}

Then, we need to wrap data and assign it to the dataProvider:

wrapper = new Object();
wrapper.columns = dots;
wrapper.pivotName = bandwidth;

dataCollection = new ArrayCollection();
dataCollection.addItem(wrapper);

dataProvider = dataCollection;

and finally we need to assign the X-Axis headers/labels dataProvider and throw redraw event by invalidating components:


hscale.dataProvider = XLabels;
hAxis.invalidateDataProvider();
dc.invalidateDisplayList();

On the MXML side,  we need to change those three properties from the standard given sample:


plotCollection="columns"
 dataField="bandwidth"
 labelField="pivotName"
 plotLabelField="bandwidth"

To create real time charting we need to pull data from any source periodically using technologies like JSP( see example of using JSP on Flex). That’s all for today… hope that you’ve got it like…

Spring/Hibernate Search on WAS 7: The Impossible Jar Combination



Instead of spending hours and hours in jars conflicts resolution, I suggest this combination which is working under Websphere:

Sping Framework 2.5.6 (with dependencies)
Hibernate 3.6.8
Hibernate Search 3.4.1
Lucene 3.1

This might be insignificant at first sight, but once you start getting

Error creating bean with name ‘propertyConfigurer’ defined in ServletContext resource [/WEB-INF/classes/webApplicationContext.xml]: Initialization of bean failed; nested exception is java.lang.NullPointerException (Solution)

and

Invocation of init method failed; nested exception is java.lang.NoClassDefFoundError: org.hibernate.annotations.common.reflection.MetadataProvider(Solution)

you will start focusing on this listing :

antlr-2.7.6.jar
antlr-runtime-3.0.jar
aopalliance.jar
apache-solr-core-1.4.0.jar
asm-2.2.3.jar
asm-attrs.jar
asm.jar
backport-util-concurrent.jar
c3p0-0.9.1.jar
cfgatewayadapter.jar
cglib-2.2.jar
cglib-nodep-2.1_3.jar
commons-beanutils-1.8.3.jar
commons-beanutils-1.8.3-sources.jar
commons-beanutils-bean-collections-1.8.3.jar
commons-beanutils-core-1.8.3.jar
commons-codec-1.3.jar
commons-collections-3.1.jar
commons-dbcp.jar
commons-digester-2.0.jar
commons-digester-2.0-sources.jar
commons-discovery-0.4.jar
commons-fileupload-1.2.1.jar
commons-httpclient-3.0.1.jar
commons-io-1.4.jar
commons-lang.jar
commons-logging1.1.jar
commons-pool.jar
compass-2.2.0.jar
concurrent.jar
dom4j-1.6.1.jar
ehcache-1.2.3.jar
flex-messaging-common.jar
flex-messaging-core.jar
flex-messaging-opt.jar
flex-messaging-proxy.jar
flex-messaging-remoting.jar
hibernate3.jar
hibernate-commons-annotations-3.2.0.Final.jar
hibernate-core-3.6.7.Final.jar
hibernate-entitymanager.jar
hibernate-search-3.4.1.Final.jar
iText-2.1.7.jar
jasperreports-3.7.2.jar
jasperreports-applet-3.7.2.jar
jasperreports-fonts-3.7.2.jar
jasperreports-javaflow-3.7.2.jar
javassist-3.9.0.GA.jar
javassist.jar
javax.persistence-2.0.0.jar//under websphere should be moved somewhere else (see http://bit.ly/JprRim)
jdbc2_0-stdext.jar
jgroups-2.8.0.GA.jar
jms.jar
jsr173_1.0_api.jar
jsr250-api.jar
jstl-1.2.jar
jta-1.1.jar
junit-4.4.jar
log4j-1.2.15.jar
lucene-analyzers-3.1.0.jar
lucene-core-3.1.0.jar
lucene-highlighter-3.1.0.jar
lucene-memory-3.1.0.jar
lucene-misc-3.1.0.jar
lucene-queries-3.1.0.jar
lucene-spellchecker-3.1.0.jar
mysql-connector-java-5.1.6-bin.jar
naming-resources.jar
ojdbc14.jar
poi-3.0.1-FINAL-20070705.jar
quartz.jar
richfaces-api-3.2.2-SNAPSHOT.jar
richfaces-impl-3.2.2-SNAPSHOT.jar
richfaces-ui-3.2.2-SNAPSHOT.jar
servlet-api.jar
slf4j-api-1.5.8.jar
slf4j-api.jar
slf4j-log4j12-1.5.0.jar
solr-common.jar
solr-core-1.4.0.jar
solr-solrj-1.4.0.jar
spring-aop.jar
spring-beans.jar
spring-context.jar
spring-context-support.jar
spring-core.jar
spring.jar
spring-jdbc.jar
spring-jms.jar
spring-orm.jar
spring-test.jar
spring-tx.jar
spring-web.jar
spring-webmvc.jar
spring-webmvc-portlet.jar
spring-webmvc-struts.jar
sqljdbc.jar
standard.jar
xalan.jar
xml-apis-1.0.b2.jar

Hope that helps and avoid humanity torture on jar conflicts resolution 😀

Spring Flex3 Quick Integration

Prerequisite:

Eclipse 3.3 (Europa) + WTP plugin
Flex Builder 3 Plugin Installed on Eclipse
MySql Server
Apache Tomcat 6
Spring

Step By Step:

1) Create New Dynamic Web Application:

2) Right click on the new created application, go to Flex Project Nature > Add Flex Project Nature

It's not really LiveCycle Data Cycle, rather BlazeDs

Choose the J2EE Application server Type. Then check the “use remote object access service” and keep LCDS selected. It’s not really LCDS, but its Open Source version (BlazeDs).

3) Click Next, Browse, Navigate to the blazeds.war:

then click Finish.

4) In the problem’s view, you may see this error:
the solution is quite there 😉

5) Go to project properties > Flex Server > Context Root and change  the “/WebContent” to “/[YourProjectName]”

6) Go to the WebContent/WEB-INF, add a directory(config) and create an xml file (webApplicationContext.xml)

7)  a- Add the datasource bean to your configuration file:

b- Then the sessionFactory one:

c- the most important part in the integration is the servelet mapping, and you can do it as described here:


8)  Then go the web.xml file and put the current configuration:


Keep in mind the /slmDem/* url template. we’ll need it later.

9) Now, unzip the spring integration with dependencies files and copy all the jars into your lib directory. You’ll find some double version jars, so just choose the newest.

10)  Add a java entity to your src dir. In this project, we start with a small sample class “Document”:
domain model for document database entity and then create a database table called Document with three fields (id:Integer,type:varchar(20), title:varchar(50));

11) Create the DTO class that extends the HibernateDaoSupport. Here is my DTO:

That’s all with Spring and hibernate code. we need just to add those entities to our configuration file:
add the annotated class to your session factory:

Click to enlarge
and  then declare and expose your  service (DTO) to the flex consumers:

12)Now move to the Flex part and create the corresponding AS3(ActionScript 3) entity to your Java ‘Document’ class.
Note the meta-tag RemoteClass that describes the corresponding class on the Java side. It’s crucial to keep the same names of attributes, but don’t care that much about the scope (private/public/…) of the AS class attribute.

13) Create a simple form with WISYWIG designer of FlexBuilder with 3 fields (id,type,title) and a button to insert a “Document”.

and then declare the mx:RemoteObject and some code for insert operation:

14) Go to WebContent\WEB-INF\flex and open the services-config.xml. You still remember the /slmDemo/pattern. We need it here to correctly route our request:

you need to add a default channel to you services-config.xml file for general use.
15) One final Step. You don’t need your application to be re loadable, but for some reason, leaving it re loadable by default give me some perm-gen space errors.  So, run your project as >run on server. Choose the tomcat 6 server and then click finish. Stop your application and go to a second project in your workspace called Servers. Open the server.xml file  of this application, and scroll to the last line; Change the reloadable property to false:
Your project hierarchy should look like :
This is the result:
Send Me an email to (salemba@live.fr) with the title of the post as subject to get source code.

Google Maps , Flex and JSP

The sample application provided on this post explains a simple way of using Google Maps API on Flex to mark some places and add a discription to the Marker.

Google Maps & JSP

Google Maps API Sample

To use the jsp, we first define a HttpService objet in our MXML  with a result and an error handler:

<mx:HTTPService id="saveCoordSrv"
url="http://[server:port]/googleMapToMySql/insert.jsp"
result="handleListResult(event)"
fault="errorFault(event)"/>

then we need a model for our entity to manage , I preferred to make it binded to input fields(inAdress,inLat,…):

<!-- The marker model -->
<mx:Model id="coordToSave">
	<root>
            <adress>{inAdress.text}</adress>
            <lat>{inLat.text}</lat>
            <lng>{inLng.text}</lng>
            <commentaire>{inComment.text}</commentaire>
	</root>
</mx:Model>

and then just make the call :

saveCoordSrv.send(coordToSave);

In the insert JSP, we just collect sent params using request.getParameter(“param_name”) :

String adr = request.getParameter("adress");
String lat = request.getParameter("lat");

and then manipulate your database driver to make an insert/delete/update query. In this sample i used MySql.

Next time we’ll be discussing google maps events use.  If you need any explanation about the code, please do not hesitate 🙂

Send me an email (salemba@live.fr) to get Source Code(I uploaded it in many providers but links are dead).