I'm trying to emebed a simple OSMF player into my fex application. But it's not working. Here's my code :
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" applicationComplete="init()" >
<fx:Script>
<![CDATA[
import org.osmf.media.MediaPlayerSprite;
import org.osmf.media.URLResource;
protected function init():void{
var sprite:MediaPlayerSprite = new MediaPlayerSprite();
sprite.resource= new URLResource("http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv");
container.addChild(sprite);
}
]]>
</fx:Script>
<mx:UIComponent id="container" width="640" height="360"/>
I'm having a white screen when running the application
Thanks
here's the pure AS for how to do it:
package {
import flash.display.Sprite;
import org.osmf.media.MediaPlayerSprite;
import org.osmf.media.URLResource;
import org.osmf.media.DefaultMediaFactory;
public class SimpleOSMFPlayer extends flash.display.Sprite {
public static const PATH:String = "path/to/your/video.ext";
public var playerSprite:MediaPlayerSprite;
public var mediaFactory:DefaultMediaFactory;
public function SimpleOSMFPlayer() {
playerSprite = new MediaPlayerSprite();
var resource:URLResource = new URLResource(PATH);
mediaFactory = new DefaultMediaFactory();
playerSprite.media = mediaFactory.createMediaElement(resource);
addChild(playerSprite);
}
}
}
for flex, add the playerSprite to your UIComponent container instead of the sprite on the last line.
Related
I'm not able to set the Label of List Control which I first save to SQLite database and then show that as lebelField of List control my code is following :
List of Cities mxml is :
<?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="Cities"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import model.DataModel;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.events.IndexChangedEvent;
import spark.components.SplitViewNavigator;
import spark.components.ViewNavigator;
import spark.transitions.ViewTransitionBase;
protected function myList_changeHandler():void {
// Create a reference to the SplitViewNavigator.
var splitNavigator:SplitViewNavigator = navigator.parentNavigator as SplitViewNavigator;
// Create a reference to the ViewNavigator for the Detail frame.
var detailNavigator:ViewNavigator = splitNavigator.getViewNavigatorAt(1) as ViewNavigator;
detailNavigator.transitionsEnabled = false;
// Change the view of the Detail frame based on the selected List item.
detailNavigator.pushView(DisplayContents, list_of_cities.selectedItem);
}
]]>
</fx:Script>
<s:VGroup width="100%" height="100%">
<s:List id="list_of_cities" height="100%" width="100%" change="myList_changeHandler();"
dataProvider="{DataModel.getInstance().cityList}">
</s:List>
</s:VGroup>
city value object is ::
package valueobject
{
[Bindable]
public class CityValueObject
{
public var id:uint;
public var nameofcity:String;
}}
and DataModel is ::
package model
{
import flash.data.SQLConnection;
import mx.collections.ArrayCollection;
[Bindable]
public class DataModel
{
public var connection:SQLConnection;
public var cityList:ArrayCollection = new ArrayCollection();
public var logs:String="Application Logs........\n";
public static var _instance:DataModel;
public static function getInstance():DataModel
{
if(_instance == null)
{
_instance = new DataModel();
}
return _instance;
}
}}
and CityUtilities class is:
package utillities
{
import flash.data.SQLResult;
import flash.data.SQLStatement;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.net.URLRequest;
import flash.utils.ByteArray;
import model.DataModel;
import mx.collections.Sort;
import mx.collections.SortField;
import valueobject.CityValueObject;
public class CityUtils
{
public static function getAllCities():void
{
var contactListStatement:SQLStatement = new SQLStatement();
contactListStatement.sqlConnection = DataModel.getInstance().connection;
contactListStatement.text = "SELECT * FROM CITYNAME";
contactListStatement.execute();
var result:SQLResult = contactListStatement.getResult();
if( result.data!=null)
{
DataModel.getInstance().cityList.removeAll();
for(var count:uint=0;count<result.data.length;count++)
{
var cityVO:CityValueObject = new CityValueObject();
cityVO.id = result.data[count].id;
cityVO.nameofcity = result.data[count].city;
DataModel.getInstance().cityList.addItem(cityVO);
}
}
sortData();
}
public static function sortData():void
{
var dataSortField:SortField = new SortField();
dataSortField.name = "nameofcity";
dataSortField.numeric = false;
/* Create the Sort object and add the SortField object created earlier to the array of fields to sort on. */
var numericDataSort:Sort = new Sort();
numericDataSort.fields = [dataSortField];
/* Set the ArrayCollection object's sort property to our custom sort, and refresh the ArrayCollection. */
DataModel.getInstance().cityList.sort = numericDataSort;
DataModel.getInstance().cityList.refresh();
}
public static function updateLog(newLog:String):void
{
DataModel.getInstance().logs += new Date().time+" :-> "+newLog+"\n";
}
}}
Please tell me how to set labelField according to SQLite nameofcity column thanks in advance
You need to display nameofcity means set LabelField property for spark list like following
<s:VGroup width="100%" height="100%">
<s:List id="list_of_cities" height="100%" width="100%" labelField="nameofcity" change="myList_changeHandler();"
dataProvider="{DataModel.getInstance().cityList}">
</s:List>
if it shows [object CityValueObject] then create custom ItemRenderer then override data method
override public function set data(value:Object):void
{
super.data = value;
var vo:CityValueObject=value as CityValueObject;
lblCityName.text = vo.nameofcity.toString();
}
All other code is correct, but mistake is that I placed
for(var count:uint=0;count<result.data.length;count++)
{
var cityVO:CityValueObject = new CityValueObject();
cityVO.id = result.data[count].id;
//cityVO.nameofcity = result.data[count].city; // Here I should Have written like
cityVO.nameofcity = result.data[count].nameofcity;// this works as I needed
DataModel.getInstance().cityList.addItem(cityVO);
}
I am using the following .as file as the component for an itemrenderer in a list. Basically each item is rendered in a TextInput and each TextInput has a remove button as you can see from the code. When clicking the remove button, I want to remove the selectedItem..so I am putting the function removeItem() in MainMxml.xml and calling it from the .as file.
However I am getting an error "Cannot access a method or property of a null object reference". Can you help me out with this error?
The .as file as follows:
package components {
import flash.events.Event;
import flash.events.MouseEvent;
import mx.events.FlexEvent;
import renderers.TextInputRenderer;
import spark.components.Button;
import spark.components.TextInput;
import spark.events.TextOperationEvent;
public class ClearableTextInput extends TextInput {
[SkinPart(required="true")]
public var clearButton:Button;
[Bindable]
public var mainMxml:MainMxml;
public function ClearableTextInput() {
super();
//watch for programmatic changes to text property
this.addEventListener(FlexEvent.VALUE_COMMIT, textChangedHandler, false, 0, true);
//watch for user changes (aka typing) to text property
this.addEventListener(TextOperationEvent.CHANGE, textChangedHandler, false, 0, true);
}
private function textChangedHandler(e:Event):void {
if (clearButton) {
clearButton.visible = (text.length > 0);
}
}
private function clearClick(e:MouseEvent):void {
mainMxml.removeItem();
}
override protected function partAdded(partName:String, instance:Object):void {
super.partAdded(partName, instance);
if (instance == clearButton) {
clearButton.addEventListener(MouseEvent.CLICK, clearClick);
clearButton.visible = (text != null && text.length > 0);
}
}
override protected function partRemoved(partName:String, instance:Object):void {
super.partRemoved(partName, instance);
if (instance == clearButton) {
clearButton.removeEventListener(MouseEvent.CLICK, clearClick);
}
}
}
}
And the ItemRenderer is as such:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true" xmlns:components="components.*" width="100%">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.core.EdgeMetrics;
import mx.core.UIComponent;
import skins.ClearableTextInputSkin;
]]>
</fx:Script>
<components:ClearableTextInput id="clearTxt" text="{data.label}" skinClass="skins.ClearableTextInputSkin" />
</s:ItemRenderer>
I am also setting the clear button in the ClearableTextInputSkin which is shown below:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="100" minHeight="22"
alpha.disabled="0.5"
blendMode="normal">
<fx:Metadata>
[HostComponent("components.ClearableTextInput")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>
<!-- bg -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0" radiusX="3">
<s:fill>
<s:SolidColor id="bgFill" color="#ffffff" />
</s:fill>
<s:stroke>
<s:SolidColorStroke id="borderStroke" color="#333333" weight="1" />
</s:stroke>
</s:Rect>
<!-- text -->
<s:RichEditableText id="textDisplay" left="4" right="24" top="1" bottom="0"
color="#333333"
verticalAlign="middle" />
<s:Button id="clearButton" right="4" verticalCenter="0" />
</s:SparkSkin>
Your help would be much appreciated.
Many thanks.
The answer can be very very long :)
Starting with your code the problem is in line:
mainMxml.removeItem();
Your mainMxml instance is null and that's why you have your NPE (null pointer exception).
But the code in general shows that you currently don't understand Flex, especially data binding. And of course have problems with app's architecture.
First, your line:
[Bindable]
public var mainMxml:MainMxml;
doesn't do anything.
Data binding is just a way to listen changes of variable annotated with [Bindable] metatag. [Bindable] is not a kind of dependency injection but completely opposite of it.
So nobody set the value of your mainMxml field. And to tell the true, it is not the right way to try to inject value there. Instead of that, you should use Observer design pattern and fire event from your component:
package events {
public class ClearableTextInputEvent extends Event {
public static const PERFORM_CLEAR:String = "performClear";
public function ClearableTextInputEvent(type:String) {
super(type);
}
}
}
So now the component:
package components {
import flash.events.Event;
import flash.events.MouseEvent;
import mx.events.FlexEvent;
import renderers.TextInputRenderer;
import spark.components.Button;
import spark.components.TextInput;
import spark.events.TextOperationEvent;
[Event(name="performClear", type="events.ClearableTextInputEvent")]
public class ClearableTextInput extends TextInput {
[SkinPart(required="true")]
public var clearButton:Button;
public function ClearableTextInput() {
super();
//watch for programmatic changes to text property
this.addEventListener(FlexEvent.VALUE_COMMIT, textChangedHandler, false, 0, true);
//watch for user changes (aka typing) to text property
this.addEventListener(TextOperationEvent.CHANGE, textChangedHandler, false, 0, true);
}
private function textChangedHandler(e:Event):void {
if (clearButton) {
clearButton.visible = (text.length > 0);
}
}
private function clearClick(e:MouseEvent):void {
dispatchEvent(new ClearableTextInputEvent(ClearableTextInputEvent.PERFORM_CLEAR));
}
override protected function partAdded(partName:String, instance:Object):void {
super.partAdded(partName, instance);
if (instance == clearButton) {
clearButton.addEventListener(MouseEvent.CLICK, clearClick);
clearButton.visible = (text != null && text.length > 0);
}
}
override protected function partRemoved(partName:String, instance:Object):void {
super.partRemoved(partName, instance);
if (instance == clearButton) {
clearButton.removeEventListener(MouseEvent.CLICK, clearClick);
}
}
}
}
Ok. Now our renderer. There we should use event bubbling to inform our list container (I suppose it is an instance of MainMxml) about need to remove row. We should create an event class for that.
NB. You can use the same event class but the problem is your ClearableTextInput component and item renderer have different responsibilities
and ClearableTextInput can be used again in some other renderers. It is good practice to create different events for the different layers of your application for low coupling:
package events {
public class RemoveRowEvent extends Event {
public static const REMOVE_CURRENT_ROW:String = "removeCurrentRow";
public function RemoveRowEvent(type:String) {
super(type, true);
}
}
}
Now your renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true" xmlns:components="components.*" width="100%">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.core.EdgeMetrics;
import mx.core.UIComponent;
import skins.ClearableTextInputSkin;
]]>
</fx:Script>
<components:ClearableTextInput id="clearTxt" text="{data.label}" skinClass="skins.ClearableTextInputSkin" performClear="dispatchEvent(new RemoveRowEvent(RemoveRowEvent.REMOVE_CURRENT_ROW))" />
</s:ItemRenderer>
And finally in your list's container (MainMxml instance I suppose):
…
addEventListener(RemoveRowEvent.REMOVE_CURRENT_ROW, onRowRemove);
…
private function onRowRemove(event:RemoveRowEvent):void {
removeItem();
event.stopImmediatePropagation();
}
I wrote this draft in the browser so please fix imports etc. by yourself :)
Can any one tell me if i have saved the following file as test.mxml
If i run the program i get some errors.If we include a class in a package how should the program be run??
package {
import flash.display.Sprite;
import flash.media.*;
public class test {
public function Test() {
//alerting some code
}
}
}
You can either have a MXML class that would look something like this
Test.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
Alert.show("test");
}
]]>
</fx:Script>
</s:Application>
Or you can have a pure actionscript class that looks like this:
Test.as
package
{
import mx.controls.Alert;
public class Test
{
public function Test()
{
Alert.show("Test");
}
}
}
Your problem might be the lower case "t" of your class name and the upper case "T" of its constructor. Otherwise it's not clear what you are asking.
My actionscript:
package
{
import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.Event;
import spark.core.SpriteVisualElement;
public class SimpleFill extends SpriteVisualElement
{
public function SimpleFill()
{
//var sprite:Sprite = new Sprite();
//var graphics:Graphics = sprite.graphics;
graphics.beginFill(0x0000FF, 1);
graphics.drawRect(10, 10, width, height);
graphics.endFill();
//addChild(sprite);
}
}
}
I also tried with the commented lines uncommented, but does not work either.
My MXML:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="640" minHeight="480"
creationComplete="initApp()">
<fx:Script>
<![CDATA[
public function initApp():void
{
addElement(new SimpleFill());
}
]]>
</fx:Script>
</s:Application>
any idea why it isn't drawing?
Are you sure width & height in SimpleFill are not equal to zero? I'd check that first.
In my AIR application I am having problems catching dispatched events in my eventmap.
The class that is dispatching the events looks like this:
Shortcuts.as
[Event(name="centeredZoomOut", type="flash.events.Event")]
public class Shortcuts extends EventDispatcher
{
// Event Names
public static const CENTERED_ZOOM_OUT:String = "centeredZoomOut";
public function Shortcuts(target:IEventDispatcher=null)
{
super(target);
NativeApplication.nativeApplication.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
}
private function onKeyUp(event:KeyboardEvent):void
{
this.dispatchEvent(new Event(CENTERED_ZOOM_OUT, true));
}
}
I know that the event is getting dispatched from debugging it, but it is not getting caught by the following eventmap.
ShortcutMap.mxml
<?xml version="1.0" encoding="utf-8"?>
<EventMap
xmlns="http://mate.asfusion.com/"
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import models.Shortcuts;
]]>
</mx:Script>
<EventHandlers type="{ Shortcuts.CENTERED_ZOOM_OUT }">
<MethodInvoker generator="{ShortCutExample}" method="showAlert" arguments="{['centeredZoom']}" />
</EventHandlers>
Here is the main application file called "ShortCutExample"
ShortCutExample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:maps="maps.*"
layout="absolute"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import models.Shortcuts;
private var shortcuts:Shortcuts;
private function init():void
{
this.shortcuts = new Shortcuts();
}
public function showAlert(value:String):void
{
Alert.show(value);
}
]]>
</mx:Script>
<maps:ShortcutMap/>
</mx:WindowedApplication>
Why is my eventmap not catching the event?
Because I was not adding the object to the display list and it did not extend DisplayObject the dispatched events were not being caught by the eventmap. To solve this problem create a private variable of type GlobalDispatcher and dispatch your events from that variable.
private var dispatcher:GlobalDispatcher = new GlobalDispatcher();
...
this.dispatcher.dispatchEvent(new ShortCutEvent(ShortCutEvent.CENTERED_ZOOM_OUT, true));