| Author |
Message |
|
1up
Member
Joined: Wed Feb 21, 2007 1:28 am
Posts: 3
|
Hi Everyone. im new here and id just glad to finally find a forum where people seem to know what they are talking about:). Im in the process of writing my first flex app and im not using an mxml file because it just seems to easy to get it all cluttered up with script tags and id rather do everything programatticaly. with that said i was wondering if it is possible to add components such as datagrids and comboBoxes via actionscript. Ive tried to do it but have had no luck. i dont get an error but i also dont see my controls on the screen. I realize that this is because these controls are not part of the display object but there has got to be a way to add thise controls .....any suggestions?
Just to clear things up my main application class is extending movieClip and when i run the following code i see nothing at all:
Code: private var _combo:ComboBox;
public function Main(){
_combo = new comboBox;
addChild(_combo);
}
|
| Wed Feb 21, 2007 1:35 am |
|
|
|
twalling
Member
Joined: Fri Feb 17, 2006 3:39 pm
Posts: 49
Location: Boston
|
 You really need to start your Flex app with a MXML file. That doesn't mean you can't build your application programmatically. If you follow the instructions regarding setting up FlashDevelop for AS3 and Flex development here:
http://www.flashdevelop.org/community/viewtopic.php?t=1177
you'll notice that Keith Peters wrote some Flex 2 and AS3 project templates. The Flex template includes an MXML file that extends Application. For a Flex app you should be starting with that, not extending MovieClip.
Example starting file:
Code: <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:Application> You continue to write everything programmtically by writing a class which extends something like Canvas, then add it to your application like so: Code: <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:view="*" layout="absolute">
<view:MyCanvas />
</mx:Application> Where MyCanvas is something like this: Code: package
{
import mx.containers.Canvas;
import mx.controls.ComboBox;
public class MyCanvas extends Canvas
{
private var _combo:ComboBox;
public function MyCanvas ()
{
var _combo = new ComboBox();
addChild(_combo);
}
}
} There's nothing wrong with using MXML though, that's really what Flex is all about. To understand a little more about components, Flex and AS3 and how they all relate, check out this post.
http://www.flashdevelop.org/community/viewtopic.php?t=1064
Also, I'd really encourage someone new to Flex to download the free trial of Flex Builder to at least get familiar the syntax. FlashDevelop doesn't have full support for AS3 and Flex.
|
| Wed Feb 21, 2007 2:07 am |
|
|
|
1up
Member
Joined: Wed Feb 21, 2007 1:28 am
Posts: 3
|
Thanks. i have taken your advice and started my app with a MXML file. I also used the code sample you provided to get started and they worked however i was unable to add a sprite to myCanvas. How would I add i sprite under the comboBox?
|
| Thu Feb 22, 2007 1:35 am |
|
|
|
zeus
Member
Joined: Tue Nov 08, 2005 5:49 pm
Posts: 190
Location: Silicon Valley
|
Containers like Canvas cannot contain simple display objects like Sprites. They may only contain UIComponents (like the ComboBox).
_________________
Josh
zeuslabs.us
|
| Thu Feb 22, 2007 5:46 pm |
|
|
|
1up
Member
Joined: Wed Feb 21, 2007 1:28 am
Posts: 3
|
Do you know which components can display sprites so that i can a comboBox and a sprite on the screen at the same time?
|
| Thu Feb 22, 2007 5:48 pm |
|
|
|
twalling
Member
Joined: Fri Feb 17, 2006 3:39 pm
Posts: 49
Location: Boston
|
You can add sprites to a UIComponent instance which can be placed inside of a Flex container like Canvas. Here's an example:
Code: <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="onCreationComplete();">
<mx:Script>
<![CDATA[
private function onCreationComplete():void
{
var sprite:Sprite = new Sprite();
var g:Graphics = sprite.graphics;
g.lineStyle(1, 0xFF0000);
g.beginFill(0xFF0000);
g.drawCircle(200, 200, 20);
g.endFill();
spriteHolder.addChild(sprite);
}
]]>
</mx:Script>
<mx:UIComponent id="spriteHolder" width="400" height="400"/>
</mx:Application> You could have also created the UIComponent programmatically and then added it to the Application.
_________________
Tim
http://timwalling.com
|
| Thu Feb 22, 2007 6:29 pm |
|
|
|
mariorz
Member
Joined: Mon Mar 19, 2007 2:43 am
Posts: 2
|
UIComponent I’m adding a TextField to a Panel (in actionscript), I’m using Flex2 and was getting the "cannot convert ... to mx.core.IUIComponent." mentioned type error.
This is what I tried:
public function putText() : void
{
var ref : UIComponent = new UIComponent();
var field : TextField = new TextField();
field = “a very long text goes here… “;
ref.addChild( field );
somePanel.addChild( ref );
}
This works in a way, but not so well because the text is just drawn over the panel and if it is to long, for example, it wont force the panel to scroll. I think it is similar to what happens with the addrawchild method, isn’t it??.
what I want to do is render a big chunk of text on top of a panel, the text content I get from an xml file (with url loader)…
let’s assume I now have a XML variable (externalXML) with my data.. then…
for each ( var element:XML in externalXML.elements() ) {
field.htmlText += ” ” + element.Name.toString() + “ “;
}
NOW… what would be the correct form to display “field” inside a Panel somewhere on my aplication?? the UIComponent gives me the above mentioned problem, adding the textField directly to the panel is a no go obviusly because of the type error…
any help is appreciated,
mario romero
|
| Mon Mar 19, 2007 2:44 am |
|
|
|
brainy
Member
Joined: Fri Mar 16, 2007 6:37 am
Posts: 46
|
The Flex framework provides you with a TextField that implements IUIComponent for this reason. Use the UITextField instead of the textfield.
Notice the percentWidth/percentHeight properties which would help you auto-adjust the UITextField to your Panel.
|
| Mon Mar 19, 2007 8:09 am |
|
|
|
mariorz
Member
Joined: Mon Mar 19, 2007 2:43 am
Posts: 2
|
UITextField kind of worked thanks for the tip, this got the text to be rendered correctly inside the panel (scrollbars are working) however I have two main problems with this:
1) The app seems very slow, it takes a lot of time to render the text. if I use mx.controls.Text instead it worked great (scrolls, size and speed) however this text control doesn't have all the formatting capabilites of the textfied (I think)
2)This may be some stupid bug in my code but (with UITextField) I can't seem to get percentwidth to work, if i use width=xxx it works, but percentWidth=xx doesnt seem to have any effect at all.
thanks again,
mario romero
|
| Mon Mar 19, 2007 7:23 pm |
|
|
|
brainy
Member
Joined: Fri Mar 16, 2007 6:37 am
Posts: 46
|
The Text class, which inherits from Label, just wraps around a UITextField aswell: http://livedocs.adobe.com/flex/201/lang ... #textField
I'm unsure why setting percentWidth/percentHeight doesn't work. Are you setting them after or before addChild'ing the control?
|
| Mon Mar 19, 2007 7:38 pm |
|
|
|
zeus
Member
Joined: Tue Nov 08, 2005 5:49 pm
Posts: 190
Location: Silicon Valley
|
UITextField ignores percentWidth and percentHeight.
I made a blog post about it a while back.
_________________
Josh
zeuslabs.us
|
| Tue Mar 20, 2007 4:52 pm |
|
|
|
pouncilt
Member
Joined: Wed Jan 23, 2008 1:48 am
Posts: 3
Location: Dallas, TX
|
Need help adding text to Canvas I am just like guy who orginal created this post, I too am doing AS3 programactically. I am running in to issues when I try to display text inside the Canvas of a view in the ViewStack(The view stack is displaying correctly with links for the navbar). See code below. What am I doing wrong. Any help is welcome!
BTW, I know I posted a lot of code but I really want some help on this as I am very new to AS3. The real meat of the code is in the AccountView class.
Thanks in Advance!
Code:
package com.pouncilt.chuckspic3.core{
import mx.containers.Panel;
import mx.containers.ViewStack;
import mx.controls.*;
import mx.core.*;
import com.pouncilt.chuckspic3.views.ViewFactory;
import com.pouncilt.chuckspic3.views.View;
public class Main {
private static var mainPanel:Panel = null;
private static var application:Application = null;
private static var navBar:LinkBar = null;
private static var views:ViewStack = null;
public static function main():void{
init();
}
private static function init():void{
Main.application = Application(Application.application);
Main.application.styleName = "plain";
createMainPanel();
createNavigationBar();
Main.application.addChild(Main.mainPanel);
}
private static function createMainPanel():void{
Main.mainPanel = new Panel();
Main.mainPanel.title = "Chuck's Pic 3";
Main.mainPanel.percentHeight = 95;
Main.mainPanel.percentWidth = 95;
Main.mainPanel.setStyle("paddingTop", 10);
Main.mainPanel.setStyle("paddingLeft", 10);
Main.mainPanel.setStyle("paddingRight",10);
Main.mainPanel.setStyle("paddingBottom", 10);
}
private static function createNavigationBar():void{
Main.navBar = new LinkBar();
Main.views = new ViewStack();
Main.views.setStyle("borderStyle","solid");
Main.views.percentHeight = 100;
Main.views.percentWidth = 100;
Main.views.visible = true;
Main.views.addChild(ViewFactory.createView(ViewFactory.HOME));
Main.views.addChild(ViewFactory.createView(ViewFactory.LOGIN));
Main.views.addChild(ViewFactory.createView(ViewFactory.REGISTRATION));
Main.views.addChild(ViewFactory.createView(ViewFactory.ACCOUNT));
Main.views.addChild(ViewFactory.createView(ViewFactory.APPLICATION));
Main.navBar.dataProvider = views;
Main.mainPanel.addChild(Main.navBar);
}
}
}
package com.pouncilt.chuckspic3.views{
import flash.utils.getDefinitionByName;
import flash.utils.getQualifiedClassName;
public class ViewFactory{
public static const HOME:String = "com.pouncilt.chuckspic3.views.HomeViewFactory";
private static const homeViewFactoryRef:HomeViewFactory = null;
public static const REGISTRATION:String = "com.pouncilt.chuckspic3.views.RegistrationViewFactory";
private static const registrationViewFactoryRef:RegistrationViewFactory = null;
public static const LOGIN:String = "com.pouncilt.chuckspic3.views.LoginViewFactory";
private static const loginViewFactoryRef:LoginViewFactory = null;
public static const ACCOUNT:String = "com.pouncilt.chuckspic3.views.AccountViewFactory";
private static const accountViewFactoryRef:AccountViewFactory = null;
public static const APPLICATION:String = "com.pouncilt.chuckspic3.views.ApplicationViewFactory";
private static const applicationViewFactoryRef:ApplicationViewFactory = null;
public static function createView(className:String):View{
var classReference:Class = getDefinitionByName(className) as Class;
var factory:IViewFactory = new classReference();
return factory.createView(null);
}
}
}
package com.pouncilt.chuckspic3.views{
public class AccountViewFactory implements IViewFactory{
/*public function createView():View{
return new AccountView(null);
}*/
public function createView(label:String):View{
return new AccountView(label);
}
}
}
package com.pouncilt.chuckspic3.views{
import mx.controls.Text;
import mx.controls.Label;
import mx.core.UIComponent;
internal class AccountView extends View{
public function AccountView(label:String){
super(label)
var uic:UIComponent = new UIComponent();
var welcomeText:Text = new Text();
welcomeText.text = "Account Page";
welcomeText.visible = true;
//welcomeText.x = 200;
//welcomeText.y = 300;
uic.addChild(welcomeText);
addChild(uic);
}
}
}
package com.pouncilt.chuckspic3.views{
import mx.containers.Canvas;
internal class View extends Canvas{
public static var COUNT:int = 0;
function View(newLabel:String){
super();
if(newLabel == "" || newLabel == null){
label = "View " + View.COUNT;
} else {
label = newLabel;
}
View.COUNT++;
}
/*function View(){
//View("View " + View.COUNT);
super();
label = "View " + ++View.COUNT;
}*/
}
}
_________________
Tonté Pouncil
|
| Wed Jan 23, 2008 2:03 am |
 
|
|
