I'm trying to create a simple Air/Flex app which loads in user selected image and then resizes the window so that the selected image fits into it. If I have understood correctly, I need to set stage.scaleMode = StageScaleMode.NO_SCALE. However, when I call this I just get Error #1009 "Cannot access a property or method of a null object reference."
Below is my default application mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
initialize="init();"
applicationComplete="complete();"
xmlns:local="*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:MenuBar id="myMenubar" width="832" itemClick="menuHandler(event);" labelField="#label" depth="0">
<fx:XMLList xmlns="">
<item label="File">
<item label="New" id="new"/>
<item label="Open" id="open"/>
<item label="Save" id="save"/>
<item label="Save As" id="saveas"/>
<item label="Quit" id="quit"/>
</item>
<item label="Edit">
<item label="Undo" id="undo"/>
<item label="Redo" id="redo"/>
<item label="Preferences" id="preferences"/>
</item>
<item label="Level">
<item label="New Room" id="newroom"/>
<item label="Properties" id="properties"/>
</item>
<item label="Objects">
<item label="Clickable" id="clickable"/>
<item label="Character" id="character"/>
<item label="Door" id="door"/>
<item label="Treasure" id="treasure"/>
</item>
</fx:XMLList>
</mx:MenuBar>
<s:SpriteVisualElement id="flashpunk" depth="-2">
</s:SpriteVisualElement>
<fx:Script>
<![CDATA[
import mx.collections.*;
import mx.controls.Alert;
import mx.core.IUIComponent;
import mx.events.MenuEvent;
import flash.display.StageScaleMode;
public var Maini:Main = new Main;
private function init():void
{
flashpunk.addChild(Maini);
}
private function complete():void
{
stage.scaleMode = StageScaleMode.NO_SCALE;
}
private function menuHandler(evt:MenuEvent):void
{
// Don't open the Alert for a menu bar item that
// opens a popup submenu.
Alert.show("Label: " + evt.item.#label + "\n" +
"Data: " + evt.item.#data, "Clicked menu item");
Maini.foo();
}
]]>
</fx:Script>
</s:WindowedApplication>
What I'm doing wrong?
Also, after I have set scalemode, how exactly I can set the window size to a new size? My debug player doesn't seem to recognize even [SWF(width = "1200", height = "600")] or attempts to set stage width and height. I'm using Flash builder 4.6.
According to http://killerspaz.wordpress.com/2010/10/24/access-to-the-stage-in-flex/ - During component initialization, you can access the stage through this.systemManager reference.
systemManager.stage.scaleMode = StageScaleMode.NO_SCALE;
Related
I'm trying to create a custom slider in Xamarin.Forms, I have created a custom renderer for this purpose
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Slider> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
// Set custom drawable resource
Control.SplitTrack = false;
Control.SetProgressDrawableTiled(
Resources.GetDrawable(
Resource.Drawable.custom_progressbar_style,
(this.Context).Theme));
Control.SetThumb(Resources.GetDrawable(
Resource.Drawable.custom_thumb,
(this.Context).Theme));
// Control.Bottom = 30;
}
}
Here I'm loading two xml files one for progress bar and the other one is for slider's thumb. Progress bar is loaded from custom_progressbar_style and Thumb is being loaded from custom_thumb both of them are placed under Resource/drawable.
Progress bar xml content:
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background" android:height="10dp">
<shape>
<corners android:radius="3dp"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress" android:height="10dp">
<clip>
<shape>
<corners android:radius="3dp"/>
</shape>
</clip>
</item>
<item android:id="#android:id/progress" android:height="10dp">
<clip>
<shape>
<corners android:radius="3dp"/>
</shape>
</clip>
</item>
</layer-list>
Thumb xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:layout_gravity="center_vertical">
<!-- Larger white circle in back -->
<item >
<shape android:shape="oval">
<solid android:color="#f0f0f0"/>
<size
android:width="30dp"
android:height="30dp"/>
</shape>
</item>
<!-- Smaller blue circle in front -->
<item>
<shape android:shape="oval">
<!-- transparent stroke = larger_circle_size - smaller_circle_size -->
<stroke android:color="#android:color/transparent"
android:width="10dp"/>
<solid android:color="#6766f6"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>
</item>
</layer-list>
I have fixed the height of my custom slider to 10dp which is causing alignment issues with the slider's thumb. Can you suggest how I can overcome this alignment issue.
According to your description, I test your code and modify your custom_progressbar_style.xml, and I have on problem.
This is my custom_progressbar_style.xml, please take a look:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<shape>
<corners android:radius="15dip" />
<gradient
android:startColor="#d9d9d9"
android:centerColor="#e6e6e6"
android:endColor="#d9d9d9"
android:centerY="0.50"
android:angle="270" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="15dip" />
<gradient
android:startColor="#e6b3e6"
android:centerColor="#ffcce0"
android:endColor="#e6b3e6"
android:centerY="0.50"
android:angle="270" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="15dip" />
<gradient
android:startColor="#ff0066"
android:centerColor="#ff00ff"
android:centerY="0.50"
android:endColor="#cc0052"
android:angle="270" />
</shape>
</clip>
</item>
</layer-list>
Update:
<StackLayout>
<local:customslider HeightRequest="10" VerticalOptions="CenterAndExpand" />
</StackLayout>
Update again:
protected override void OnLayout(bool changed, int l, int t, int r, int b)
{
base.OnLayout(changed, l, t, r, b);
if (Control == null)
return;
SeekBar seekbar = Control;
Drawable thumb = seekbar.Thumb;
thumb.SetBounds(thumb.Bounds.Left, -4, thumb.Bounds.Left + thumb.IntrinsicWidth, thumb.IntrinsicHeight-4);
}
I do splash screen, but the problem is that I do not know where to add
styles. how do I specify the image size ? How do I add text ?
[Activity(Label = "SplashActivity", Theme = "#style/Theme.Splash", MainLauncher = true)]
public class SplashScreen : Activity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
StartActivity(typeof(MainActivity));
Finish();
OverridePendingTransition(0, 0);
}
}
`
In drawable folder splash_screen.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/splash_background"/>
</item>
<item>
<bitmap
android:src="#drawable/splash_logo"
android:tileMode="disabled"
android:gravity="center"
/>
</item>
</layer-list>
Folder values, style.xml:
<style name="Theme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowActionBar">true</item>
</style>
I think you have two options.
1- create an image and visualize it (as in your sample)
2- create an activity layout, so you can add image, text... what you want
You can find some info in the official documentation: Xamarin.Forms SplashScreen
and here you can find the Android Sample: Xamarin.Android SplashScreen
In this sample, you have a style with a drawable:
<resources>
<style name="MyTheme.Base" parent="Theme.AppCompat.Light">
</style>
<style name="MyTheme" parent="MyTheme.Base">
</style>
<style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowActionBar">true</item>
</style>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/splash_background"/>
</item>
<item>
<bitmap
android:src="#drawable/splash_logo"
android:tileMode="disabled"
android:gravity="center"/>
</item>
</layer-list>
but you can use a layout, in the same way it is used for MainActivity
I want to make a tree based on stores saved in db. I am fetching all stores from db and make tree for each store through action script and also set its data provider.
My code is:
var customTree:Tree = new Tree();
customTree.showRoot = false;
customTree.labelField = 'label';
customTree.dataProvider = xmlval; // xmlval is my XML
when i run the application, then it prints xml as it is. But when i make tree control static and only set its data provider through action script then it work properly.
Please help me.
Have a look at this code. I think you should use "#label" as labelField instead of just "label"
<?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="init()">
<fx:Script>
<![CDATA[
import mx.controls.Tree;
[Bindable]private var xml:XML = new XML(
<item label="root">
<item label="Section A">
<item label="Section A.1"/>
<item label="Section A.2"/>
<item label="Section A.3"/>
</item>
<item label="Section B">
<item label="Section B.1"/>
<item label="Section B.2"/>
<item label="Section B.3"/>
</item>
</item>
);
private function init():void
{
var customTree1:Tree = new Tree();
customTree1.dataProvider = xml;
customTree1.labelField = "label";
customTree1.width = 200;
customTree1.height = 300;
vgMain1.addElement(customTree1);
var customTree2:Tree = new Tree();
customTree2.dataProvider = xml;
customTree2.labelField = "#label";
customTree2.width = 200;
customTree2.height = 300;
vgMain2.addElement(customTree2);
}
]]>
</fx:Script>
<s:HGroup top="20" left="20" width="600" height="300">
<s:VGroup width="200" height="100%">
<s:Label text="MXML Tree"/>
<mx:Tree dataProvider="{xml}" labelField="#label" width="100%" height="300"/>
</s:VGroup>
<s:VGroup id="vgMain1" width="200" height="100%">
<s:Label text="AS Tree with 'label'"/>
</s:VGroup>
<s:VGroup id="vgMain2" width="200" height="100%">
<s:Label text="AS Tree with '#label'"/>
</s:VGroup>
</s:HGroup>
</s:Application>
New with Flex and mxml. How I can bind AS3 class' function to a menubar item? My menubar code is this:
<mx:MenuBar id="myMenubar" labelField="#label">
<fx:XMLList xmlns="">
<item label="File">
<item label="New" />
<item label="Open"/>
<item label="Save"/>
<item label="Save As"/>
<item label="Quit"/>
</item>
<item label="Edit">
<item label="Undo"/>
<item label="Redo"/>
<item label="Preferences"/>
</item>
<item label="Level">
<item label="New Room"/>
<item label="Properties"/>
</item>
<item label="Objects">
<item label="Clickable"/>
<item label="Character"/>
<item label="Door"/>
<item label="Treasure"/>
</item>
</fx:XMLList>
</mx:MenuBar>
I looked through few examples in Google but couldn't find definite explanation or example how to trigger AS3 class functions. I presume that I should somehow make click event listener for my subitems and make a call to my class. However, mxml syntax confuses me.
MXML is just a way to describe data and components declaratively, in the end it's compiled to pure ActionScript anyways, so you can simply subscribe an appropriate listener to myMenubar.
I think you are looking for the itemClick event:
myMenubar.addEventListener(MenuEvent.ITEM_CLICK, function(e:MenuEvent):void
{
trace(e.label + ' was clicked');
});
In order to be able to distinguish the items while being able to change the lablels, i'd recommend to assign IDs to them:
<mx:MenuBar id="myMenubar" labelField="#label">
<fx:XMLList xmlns="">
<item label="File">
<item id="abc" label="New" />
<item id="xyz" label="Open"/>
...
Then you could for example use a simple switch to handle the different items:
myMenubar.addEventListener(MenuEvent.ITEM_CLICK, function(e:MenuEvent):void
{
switch(e.item.#id)
{
case 'abc':
// do something
break;
case 'xyz':
// do something else
break;
}
});
Ofcourse you could also define which function to call using MXML:
<mx:MenuBar id="myMenubar" labelField="#label" itemClick="myMenuItemClickHandler(event)">
-
private function myMenuItemClickHandler(e:MenuEvent)
{
...
}
See also the example in the Adobe LiveDocs to get a grasp on how this all comes together:
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Halo MenuBar control. -->
<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"
initialize="initCollections();">
<fx:Script>
<![CDATA[
import mx.collections.*;
import mx.controls.Alert;
import mx.events.MenuEvent;
[Bindable]
public var menuBarCollection:XMLListCollection;
private var menubarXML:XMLList =
<>
<menuitem label="Menu1" data="top">
<menuitem label="MenuItem 1-A" data="1A"/>
<menuitem label="MenuItem 1-B" data="1B"/>
</menuitem>
<menuitem label="Menu2" data="top">
<menuitem label="MenuItem 2-A" type="check" data="2A"/>
<menuitem type="separator"/>
<menuitem label="MenuItem 2-B" >
<menuitem label="SubMenuItem 3-A" type="radio"
groupName="one" data="3A"/>
<menuitem label="SubMenuItem 3-B" type="radio"
groupName="one" data="3B"/>
</menuitem>
</menuitem>
</>;
// Event handler to initialize the MenuBar control.
private function initCollections():void {
menuBarCollection = new XMLListCollection(menubarXML);
}
// Event handler for the MenuBar control's itemClick event.
private function menuHandler(evt:MenuEvent):void {
// Don't open the Alert for a menu bar item that
// opens a popup submenu.
if (evt.item.#data != "top") {
Alert.show("Label: " + evt.item.#label + "\n" +
"Data: " + evt.item.#data, "Clicked menu item");
}
}
]]>
</fx:Script>
<s:Panel title="Halo MenuBar Control Example"
width="75%" height="75%"
horizontalCenter="0" verticalCenter="0">
<s:VGroup left="10" right="10" top="10" bottom="10">
<s:Label width="100%" color="blue" text="Select a menu item."/>
<mx:MenuBar labelField="#label" itemClick="menuHandler(event);"
dataProvider="{menuBarCollection}" />
</s:VGroup>
</s:Panel>
</s:Application>
I have one problem related to charts.
I have Column chart with 1000+ columns on it with the scroll bar on it. Now I want to save it as Image to my Disktop or any location without scroll.
ScrollableAxisRenderer Class I have Downloaded from one of the link please find it below: -
http://www.connectedpixel.com/blog/scrollingcharts
Sample Column Chart Example: -
<?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"
creationComplete="init();" xmlns:charts="com.connectedpixel.charts.*">
<fx:Declarations>
<fx:XML xmlns="" id="myData">
<items>
<item year="1960" rain="92" />
<item year="1961" rain="192" />
<item year="1962" rain="32" />
<item year="1963" rain="52" />
<item year="1964" rain="112" />
<item year="1965" rain="52" />
<item year="1966" rain="88" />
<item year="1967" rain="52" />
<item year="1968" rain="66" />
<item year="1969" rain="39" />
<item year="1970" rain="192" />
<item year="1971" rain="182" />
<item year="1972" rain="177" />
<item year="1973" rain="179" />
<item year="1974" rain="198" />
<item year="1975" rain="207" />
<item year="1976" rain="388" />
<item year="1977" rain="372" />
<item year="1978" rain="352" />
</items>
</fx:XML>
<s:XMLListCollection id="rainData" source="{myData.children()}" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.graphics.ImageSnapshot;
import mx.graphics.codec.PNGEncoder;
protected function initCreationComp():void
{
var image:ImageSnapshot = ImageSnapshot.captureImage(myChart,300,new PNGEncoder(),true);
var file:FileReference = new FileReference();
var chartName:String = "myChart"+count+".png";
file.save(image.data, chartName);
}
]]>
</fx:Script>
<mx:VBox width="100%" height="100%" x="50" y="50">
<s:Button label="Download Image" click="initCreationComp()"/>
<mx:ColumnChart id="myChart" name="myChart"
width="80%" height="80%"
dataProvider="{myData.children()}"
showDataTips="true" maxColumnWidth="35">
<mx:horizontalAxis>
<mx:CategoryAxis id="yearAxis" categoryField="#year" />
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField="#year" yField="#rain" displayName="Rain" />
</mx:series>
<mx:horizontalAxisRenderers>
<charts:ScrollableAxisRenderer id="scrollAxisRenderer" axis="{yearAxis}" tickPlacement="none"
placement="bottom" labelGap="3" maxVisibleColumns="4"/>
</mx:horizontalAxisRenderers>
</mx:ColumnChart>
</mx:VBox>
</s:Application>
Thanks in advance....
Put the chart inside container which will show scrollbars instead of your chart:
<mx:VBox width="100%" height="100%" x="50" y="50">
<s:Button label="Download Image" click="initCreationComp()"/>
<mx:VBox width="80%" height="80%"
minWidth="100" minHeight="100">
<mx:ColumnChart id="myChart" name="myChart"
dataProvider="{myData.children()}"
showDataTips="true" maxColumnWidth="35">
<!-- etc -->
</mx:ColumnChart>
</mx:VBox>
</mx:VBox>