Amit Shrestha

Posts Tagged ‘Flex

listen for ESC key event at the main application then on key down do following in your event listener :

  1. private function keyDownEvent(event:KeyboardEvent):void {
  2.    if (event.keyCode == Keyboard.ESCAPE) {
  3.       DragManager.acceptDragDrop(null);
  4.       // get drag proxy
  5.       var dragProxy: DragProxy = DragManager.mx_internal::dragProxy;
  6.       if (dragProxy != null) {
  7.       //provide some thing for mouse up
  8.       dragProxy.mouseUpHandler(new MouseEvent(MouseEvent.MOUSE_UP));
  9.    }
  10.  }
  11. }

[Note: it is about Porting / migrating  flex3 project to Flex 4 project with minimal/no change in code and, ofcourse without having to install Flash Builder 4 ie, it does’nt matter if you have  Flex 4 IDE or not ]. If you are looking for changing whole code , like tags, add child etc etc. then have a look at: http://www.learnosity.com/techblog/index.cfm/2010/3/21/Flex-3-to-Flex-4-Migration-Howto

I did following things:

Add “-theme=${flexlib}/themes/Halo/halo.swc” to compiler additional argument [in eclipse” rt click project> properties> Flex compiler”]. So that compiler know  it’s a Hallo theme project

[This should eliminate most of errors]

Now i got following run time errors:

1)Error: Compatibility version has already been read.
at mx.core::FlexVersion$/set compatibilityVersion()
at mx.core::FlexVersion$/set compatibilityVersionString()
at styles_boo_mx_core_FlexModuleFactory()

Solution = I was loading the sytle swf file at run time to set style. Now i conpiled that file too in Felx 4, and this error was gone.

2)VerifyError: Error #1053: Illegal override of activate in mx.managers.SystemManagerProxy.

Solution = I was loading a swf module at the run time.  So again i compile that swf with Flex 4. And now that error was gone too.

And hence a working project in Felx 4 🙂

Tags: ,

This example demonstrate the flex – java communication using open amf

Requirement:

1) openamf [i used openamf-1.0RC12]

2) eclipse [i used 3.4 (example contains eclipse project)]

3) tomcat server [i used 6.0]

Get example project amf helloworld.zip

Unzip the project, and view read me. There are 2 projects inside, one client and one server project.To run just import them in you eclipse and run it.

Requirement for gives example: red5 server [i used : red5-0.9.1], Eclipse [example constains eclipse projects]

Note: before running example, unzip it and view readme

Download example here
changes made in this tutorial:

1)”javaProject” folder constins the javaproject, which was compiled and the resulting class file org.xyz.Applicaiton.class from the “bin”  directory of project was copied to WEB-INF/classes directory [in same folder stucture]
2) in   myapp\WEB-INF\web.xml  following was commented out:
<!–<listener>
<listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
</listener>

<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>–>
3)did’nt used tutorial client code as it was in flash,, it conatins flex client code..and much more simpler

  • INSTALLAION:

1)UNZIP: red5Helloworld.ZIP
2) COPY “myapp” in the “red5*/webapps” directiory
3) run red5.bat to start the server
4) Import the client “Red5Client” project in flex buiilder [Note: it a flex builder 3 project, build using Flex 3.5]
5) run Red5Client.mxml, click “connect” to test server [Note: connection url used is: rtmp://localhost/myapp]

  • Detailed Description which most of you hate to read

    :

First Step –

You will need a default application template which you can find inside your Red5 directory on your hardrive, usually located here:

C:\Program Files\Red5\doc\templates\myapp

Copy the folder about into this directory:

C:\Program Files\Red5\webapps\

Easy enough. Once that’s taken care of, it’s time to move on to the next step.

Second Step –

Since the default template is in the right place to run the server side application we want, we can now change its configuration to meet that need. Change the name of the “myapp” directory to “sample”. The directory’s title is the name of your application. Next, let’s edit the configuration files within this sample directory.

We’ll structure our application so that it has Sample linking with WEB-INF and lib. The WEB-INF will link directly to:

red5.web.properties
red5-web.xml
web.xml
log4j.properties

Now we open red5-web.properties and edit the contextPath to the folder “sample” to look like this:

webapp.contextPath=/sample
webapp.virtualHosts=localhost, 127.0.0.1

Then we open web.xml so we can change the webAppRootKey and display to look like this:

My tutorial application made with Red5

webAppRootKey /sample

Then we are going to open red5-web.xml so we can alter the application names to look like this:
class=”org.xyz.Application”
singleton=”true” />

In the example above, org.xyz represents the package structure we’re using. You could replace it with the application’s real structure if you wanted to. In this instance, the lib directory will have the application’s jar file inside it.

Third Step –

Now that we’re prepared for the server side configuration of the application we will make the application itself so that it can work with the Flash client.

Using a Java IDE such as Eclipse, you need to create a new Java project. You’ll name this sample and give it a structure where Sample links to:

src (which links to org that in turn links to xyz)
classes
lib

The folder named “src” will hold the application package structure we’ve named org.xyz, our compiled class file will reside within the “classes” folder and the folder “lib” will hold the jar file of our compiled class.

In the “jar” target we’ve made a copy of the jar file we created within the folder where our application is, “webapps” inside the Red5 installation. You can copy and paste it by hand.

Remember, add red5.jar from your Red5 installation in CLASSPATH of Eclipse so it will know where to find the Red5 libraries to compile the application. Otherwise you are bound to receive errors.

Fourth Step –

It is now time to create the source file we need. make a new Java file named Application.java

Now we will create our source file. Create a java file, name it to Application.java

Here is the code that needs to be in the Application.java file:

package org.xyz;

//log4j classes
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

//Red5 classes
import org.red5.server.adapter.ApplicationAdapter;
import org.red5.server.api.IClient;
import org.red5.server.api.IConnection;
import org.red5.server.api.IScope;

/**This is the sample application class */

public class Application extends ApplicationAdapter{
/**Variable used for generating the log*/
private static final Log log = LogFactory.getLog(Application.class);

/**This method will execute when Red5 server will start*/
public boolean appStart(IScope app){
if(super.appStart(app) == false){
return false;
}
log.info(”Application start method of Application called”);
return true;
}

/**This method will execute when first client will connect to Red5 server*/
public boolean roomStart(IScope room){
if(super.roomStart(room) == false){
return false;
}
log.info(”Inside room start of Application”);
return true;
}

/**This method will execute everytime when a client will connect to Red5 server*/
public boolean roomConnect(IConnection conn, Object params[]){
if(super.roomConnect(conn, params) == false){
return false;
}
log.info(”Inside room connect method of Application”);
return true;
}

/**This method will be called when a client disconnect from the room*/
public void roomDisconnect(IConnection conn){
super.roomDisconnect(conn);
log.info(”Inside room disconnect method of Application”);
}

/**This method will be called when a client will be disconnected from application*/
public void appDisconnect(IConnection conn){
log.info(”Inside app disconnect method of Application”);
}

/**This method will be called from the client. This method will show “Hello World!” on *the flash client side .
*/
public String sayHello(Object[] params){
log.info(“I got your name:-”+params[0].toString());
return “Hello World!” + params[0].toString();
}

} ////////End of Application class

That file gives us a feel of what the server side code needs to look like. The documentation that comes with Red5 gives further details on the methods for the ApplicationAdapter class. We defined a method called sayHello and this gets the user name from the Flash client and adds it to the “Hello World!” statement before passing it back to the Flash client.

It’s time to run the jar task of our build.xml file to compile the application class, generate the jar we need, and copy it to the application directory we placed inside the Red5 installation.

Fifth and Final Step –

We’ve now prepared our server side application so we can start on the Flash application in order to connect it with the Red5 server.

Now you need to create a new Flash document, so:

Go to window-components in the library and drag an Alert component out. Open the Action-Frame and inside there you need to write this code:

import mx.controls.Alert;

var nc:NetConnection = new NetConnection();

nc.val = this;
nc.onStatus = function(info){
switch(info.code){

case “NetConnection.Connect.Success”:
Alert.show(”Got connected with application);
this.val.callServer();
break;

case “NetConnection.Connect.Failed”:
Alert.show(info.application);
break;

case “NetConnection.Connect.Rejected”:
Alert.show(info.application);
break;

case “NetConnection.Connect.Closed”:
Alert.show(”Client Disconnected”);
break;
}
};
nc.connect(”rtmp://localhost/sample”);

function callServer(){
var resultObj:Object = new Object();
nc.call(”sayHello”, resultObj,”Your Name”);
resultObj.onResult = function(str){
Alert.show(str); //This will display “Hello World! Your Name”
}
};
}

After the code is in place, save the application with the name sample.fla(user preferred)

Since this code shown above is Action Script 1 code it can also be put into an external .As file which can be referred to from within the application but we aren’t covering that method in this tutorial. Nevertheless, it is a valid option.

At last, you can run the Flash client and it should successfully connect with the Red5 server to show an alert box that reads, “Hello World! Your Name”

It really is that simple and now that you know the basics, expanding upon your knowledge will allow you to get the most from your Red5 experience!

Solution: use UTF-32 encoding
var fs:FileStream = new FileStream();
fs.open(,FileMode.READ);
var string:String = fs.readMultiByte(fs.bytesAvailable, "UTF-32");


private function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("some format"))
{
DragManager.acceptDragDrop(event.currentTarget as UIComponent);
}

}

private function dragDropHandler(event:DragEvent):void {
Alert.show(“dropped”);

}

………

<mx:HBox id=”v1″ width=”100%”  height=”100%” label=”dd” dragDrop=”dragDropHandler(event);” dragEnter=”dragEnterHandler(event);”>

……..

Here drop is not accepted by Hbox

solution: just set the background of the container like: backgroundColor=”#ffffff”

<mx:HBox id=”v1″ width=”100%” backgroundColor=”#ffffff” height=”100%” label=”dd” dragDrop=”dragDropHandler(event);” dragEnter=”dragEnterHandler(event);”>
Tags:
//your code//
var a:Alert = Alert.show("..long..text....");
handelOverFlow(a,500);
private function handelOverFlow(alert:Alert,maxHeight:int):void {
var array:Array = alert.getChildren();
var uiCom:UIComponent = array[0];
var txtField:UITextField = uiCom.getChildAt(0) as UITextField;
var box:Box = new Box();
   //if AlertForm (uiCom) has more height then desired height
if(uiCom.height>maxHeight) {
uiCom.height = maxHeight;
txtField.parent.removeChild(txtField);;
box.width = uiCom.width;
box.height = maxHeight – 50;
box.addChild(txtField);
uiCom.addChildAt(box,0);
}
}
Tags:

Nepali – english date converter

Top Clicks

  • None

Blog Stats

  • 13,060 hits