Displaying video in Flex - apache-flex

I am new to FLEX and I am planning to display video on web page.My mxml code is below
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Array id="movieList">
<mx:String>http://localhost/Flex/Butterfly.flv</mx:String>
</mx:Array>
<mx:VBox>
<mx:List id="cntlMovie" dataProvider="{movieList}" width="300" />
<mx:Button label="Pause" click="cntlDisp.pause();" />
<mx:Button label="Play" click="cntlDisp.play();" />
</mx:VBox>
<mx:VideoDisplay id="cntlDisp" source="{cntlMovie.selectedItem.valueOf()}"
width="400" height="300" />
</mx:Application>
I am running Apache2.2.11 server.
When I run the above code, the browser just hangs(does not respond).
When the video url(http://localhost/Flex/Butterfly.flv) is directly accessed, it prompts to download the video file.
Could someone provide some help on this.

Install Charles and monitor the request (you might need to use your computer name instead of localhost). Is the request coming through to the server? What's the response status code?

Related

flash builder unable to open file

I am new to adobe flash builder and I am making a mobile flex project.
In my project so far I have a simple two page layout with buttons to go forwards and back. It's a simple hello world just to test.
I wrote an action-script that uses the camera on the phone and want to attach it to a button call so the camera opens when pressed. I have looked all over the internet but cannot find a solution for this on android and would appreciate any links for any tutorials as-well.
My button call looks like this:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Camera">
<!-- The file I want to include -->
<fx:Script source="includes/Camera.as"/>
<!-- Declarations -->
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<!-- alignment for buttons -->
<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<!-- Button that will take the user to camera -->
<s:Button label="Capture" click="button1_clickHandler(event)"/>
<!-- Button to navigate back to the main page -->
<s:Button label="Back" click="navigator.popView()" styleName="back" />
</s:VGroup>
</s:View>
This is my error:
1068: Unable to open included file: C:\Users\denis\Adobe Flash Builder
4.6\app3\src\views\includes\Camera.as.
Includes is a folder I created.
As I stated I could not find any tutorials and I am new to this so apologies for noob questions.
Where did you create the includes folder? My guess is that you created it in your app3 directory, and not as a subdirectory of src\views.

Display text as hyperlink in Flex

<mx:VBox id="paSenate" label="PA Senate" width="100%" verticalGap="0">
<mx:HBox>
<mx:Label text="PA Senate" fontWeight="bold"></mx:Label>
<mx:Label id="paSenateConf" text="" />
</mx:HBox>
<mx:Label id="paSenateNameLabel" text="" paddingLeft="5"/>
<mx:Label id="paSenateCountyLabel" text="" paddingLeft="5"/>
<mx:Label id="paSenateURLLabel" text="" paddingLeft="5"/>
</mx:VBox>
The code I have above displays results based on an address search. All the information being displayed is coming from either database or a web service. Including the web address for Senate and House members. The website is coming back as a string. Right now it is just simply being passed into the text field of paSenateURLLabel. I need to change it somehow to a hyperlink so it's clickable. This is being done in Flex 3.5. Not entirely sure how I would go about doing this.
Flex 3 has a LinkButton component that will do this. (Note, if you were using Flex 4 you would just make text based skin for a Button or use TLF text which has hyperlink functionality.)
<mx:LinkButton label="I'm a link" click="linkClickhandler()" />

How to Import FileReference and FileSystemTree to ActionScript

I tried to insert a FileSystemTree in Flex .
Flash Builder doesn't recognise that and produces the error:
1046: Type was not found or was not a compile-time constant: FileSystemTree
Here's the code . It's a very basic one ....
<mx:HDividedBox width="100%" height="725" paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10" y="41">
<mx:VBox width="200" height="100%">
<mx:FileSystemTree id="fileSystemTree" width="100%" height="100%" change="onChange(event)" />
</mx:VBox>
<mx:Canvas width="100%" height="100%" id="content" ></mx:Canvas>
</mx:HDividedBox>
I'm using Flex 4 , Flash Builder 4. What am i doing wrong ? Is FileSystemTree supported in Flex 4 ?
That component is only available within Adobe AIR applications, not browser-based Flex applications, since browsing the local file system would violate the browser sandbox.
EDIT: Now that I understand your intention, yes, you can upload files from a flex application without having to use AIR. Instead of using the FileSystemTree component (which is AIR only), you use FileReference.browse() to allow the user to select a file from the local filesystem to upload. This page from the documentation will give you all the info you need: Working with file upload and download
Hope that helps.

Classes must not be nested - MXML

I'm trying to build a simple FLEX application. Unfortunately, I get '1131: Classes must not be nested.' errors even with the simples MXML .... the error pops out at the mx:Application openning tag:
(I'm using PureMVC if it's important)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:view="icm.view.components.*"
viewSourceURL="srcview/index.html"
name="ICM"
layout="absolute"
> //FLEX BUILDER SAYS THE ERROR IS HERE
<mx:Script>
<![CDATA[
import mx.effects.easing.Exponential;
import icm.ApplicationFacade;
public static const NAME:String = "AppSkeleton";
private var facade:ApplicationFacade = ApplicationFacade.getInstance(NAME);
]]>
</mx:Script>
<mx:Move id="slideInEffect" yFrom="5000" easingFunction="{Exponential.easeOut}" duration="1300"/>
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
<mx:Style source="css/yflexskin.css" />
<mx:Canvas id="mainViewStack" left="0" top="0" right="0" bottom="0" >
<mx:ViewStack id="vwStack" left="0" top="0" right="0" bottom="0" resizeToContent="false" creationPolicy="auto">
<mx:VBox />
<view:SplashScreen id="splashScreen" showEffect="{slideInEffect}" hideEffect="{fadeOut}" />
<view:LoginScreen id="loginScreen" showEffect="{fadeIn}" />
<view:MainScreen id="mainScreen" showEffect="{fadeIn}" />
</mx:ViewStack>
</mx:Canvas>
</mx:Application>
Can someone help me understand why? I've being doing a lot of non-sense tests because I'm not understanding it.
Sometimes if I remove the Script section the compilation suceed, others not.
Thanks
Thank you all for the comments.
The greatest tip at this topic is: build with the SDK!!!
Flex Builder (both, the IDE and the Plugin) seems to lack a lot of features on error treatment and even when it reports an error it's not reliable.
A prompt window for compiling used with the IDE saved me a lot of headaches.
Thank you all again!
I had this problem using a compiler option to exclude/include some code
like -define+=CONFIG::myOption,true
when the option is true (resulting including some code), and you have such thing into your code :
CONFIG::myOption {
import <a package>;
}
this will result in a 1131 error... I have no workaround but not using such conditional compilation directives.
There is a flex compiler option "Enable Strict type checking" just de-select it. I think that can give so a simple solution....
http://blog.gigantt.com/2011/02/how-to-build-flex-sdk.html
Building
Let's create a batch file to set some useful envars: envars.bat
set JAVA_HOME=c:\Program Files\Java\jdk1.6.0_23
set PATH=c:\dev\ant\bin;%PATH%
set ANT_OPTS=-Xmx256m
Open cmd.exe and run it...
Edit c:\dev\sdk\frameworks\build.xml
Look for:
And fix the location of the manifest file from:
"${datavis.dir}/manifest.xml" to:
"${datavis.dir}/manifest_datavisualization.xml"
Run Ant:c:\dev\sdk\frameworks> ant
It should end with such a message: BUILD SUCCESSFUL
Now let's tell Flash Builder where to find this new SDK: c:\dev\sdk
Add it to the "Installed SDKs" settings in Flash Builder
Make sure your project is configured to use this SDK (it was probably created with the original one and still refers to it).
Rebuild your project. It should work.

Recreating/resetting views with Flex ViewStack

I'm writing an Adobe AIR application using a ViewStack for the different application states. Is there a way to make sure that each view component is created/destroyed each time it is shown/hidden?
For instance, if I have a TextInput in a view, I want it to reset to its initial state each time I change to that view, rather than having previously entered text. Or, if I have a Timer, I want it to be destroyed when I leave the view so that it doesn't keep running when I'm in an unrelated part of the application. I know that I can manually initialize/destroy everything on the show() and hide() events, but is there an easier way?
AFAIK there is no built-in way to do this, so you'll have to do it manually by handling the show and hide events as you mention.
ViewStack does however have two methods "saveState" and "loadState" which could perhaps help you out with this. The history manager uses these methods to enable back/forward navigation. The docs don't seem to have any examples though.
ViewStacks can be the work of the devil when it comes to creation/deletion policies and managing state. We had all sorts of problems when we developed fiat ecoDrive and by about 3/4 of the way though we we're all very anti ViewStacks for the management of view state within our application.
However... a good bet would be to first set the creationPolicy to ContainerCreationPolicy.NONE. That way it's in your control as to when to create any of the panels in your ViewStack. Then i would think you would need to have some sort of logic so that as the ViewStack changes a panel it deletes or resets the one you were on.
Another viable alternative would be to use view states instead. Have a base state which acts as the main container and then a simple state for each of your sections. That way when you switch to a new state, the old state gets removed in reverse order to the way it was created. You do have to be disciplined with states though as they can end up getting really complex and messy when they start becoming nested. If you keep it simple it may work as you require.
In MXML 2009, you can use itemDestructionPolicy="auto" to destroy a component after use it. If you use this property in the first view component with two states (init, logged), you can destroy and reinitialize all child view components. Example :
<s:states>
<s:State name="init" />
<s:State name="logged" />
</s:states>
<s:SkinnableContainer id="skincon" width="100%" height="100%" backgroundAlpha="0"
backgroundColor="#FFFFFF">
<s:VGroup id="MainContainer" width="100%" height="100%" paddingTop="0"
paddingLeft="20" paddingRight="20" gap="0">
<views:_HeaderView id="header" />
<mx:ViewStack id="viewStack" width="100%" height="100%">
<s:NavigatorContent includeIn="init" itemDestructionPolicy="auto">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
</s:layout>
<views:LoginView title="Login" id="loginView" />
</s:NavigatorContent>
<s:NavigatorContent includeIn="logged" itemDestructionPolicy="auto">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="top" />
</s:layout>
<views:_CentralView id="userView" />
</s:NavigatorContent>
</mx:ViewStack>
<views:_FooterView id="footer" />
</s:VGroup>
</s:SkinnableContainer>
Both answers are correct -- there doesn't seem to be any built-in way to do it. I solved the problem by creating a "wrapper" component for my view component. It creates a new view component each time the view is shown. This isn't ideal, but fits my requirements nicely, and required few changes to my application structure.
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" show="init()" hide="cleanup()">
<mx:Script>
<![CDATA[
private var myComponent:MyComponent;
private function init():void
{
myComponent = new MyComponent();
componentContainer.addChild(myComponent);
}
private function cleanup():void
{
componentContainer.removeAllChildren();
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%" id="componentContainer" />
</mx:Canvas>
Build your "views" as separate Modules, and then use the ViewStack to switch between them. You could then write a function to destroy the unused module(s) (check each module against the selectedChild property) when the ViewStack's "change" event is fired.
2ยข
I am using different states for my different views. On each state change i add and remove components.
This causes the add and remove events of UIComponent fire which allows me to initialize and cleanup my components each time they are added.
This is the idea...
<mx:states>
<mx:State name="state1">
<mx:AddChild>
<mx:SomeUIComponent id="myComp" add="myComp.initialize()" remove="myComp.cleanup()"/>
</mx:AddChild>
</mx:State>
</mx:states>

Resources