Futurescale, Inc. PureMVC Home

The PureMVC Framework Code at the Speed of Thought


Over 10 years of community discussion and knowledge are maintained here as a read-only archive.

New discussions should be taken up in issues on the appropriate projects at https://github.com/PureMVC

Pages: [1]
Print
Author Topic: How do I add new custom components?  (Read 13370 times)
spacecom
Newbie
*
Posts: 6


View Profile Email
« on: April 07, 2008, 04:44:41 »

I have am really new to AS3 and even more so the Multiton framework.

The CoolWidgetMediator.as files create a button in AS3 code on line number: 33. What I did was add var panel:Panel = new Panel() just below the button script and called coolWidget.widgetShell.addComponent( panel ) to create the object.

This works perfectly as I click the CoolWidget button in the application bar both the button and the panel are added to the widgetshell.

My question is how do I add an mxml file (container canvas) which contains my custom components? I have created  a new mxml file under the Coolwidget view. New to AS3 so I dont know how add this mxml file eg:confirmCanvas.mxml to the shellwidget when the button is clicked. As mentioned above I coded the panel using AS3 which works with my test.

Im going to have numerous components which I will have to add to the shellwidget when the user clicks single a button. The idea was to add confirmCanvas.mxml with its custom components inside the confirmCanvas.mxml to the shellwidget.

Thanks, Wayne
Logged
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« Reply #1 on: April 10, 2008, 05:40:43 »

Hi Wayne,

Just as you were able to instantiate the new button, you can also instantiate your custom mxml component and do addComponent on the WidgetShell. You just have to import it. This seems straightforward, so I fear I may have misunderstood your question. Of course being new to AS3/MXML, it may not be straightforward to you, so just let me know if you need a little more info.

-=Cliff>
Logged
spacecom
Newbie
*
Posts: 6


View Profile Email
« Reply #2 on: April 13, 2008, 10:17:49 »

Cliff,

Thank you for your reply. I do managed to add a actionscript component but thos is what I would like to now please. See code extract as follows:

Current modularity code from CoolWidgetMediator.as line 32 which i assume is the function which adds the actionscript button to the stage:

protected function onProd( event:Event ):void
{
   // add a button to the canvas
   var button:Button = new Button();
   button.label = 'You prodded the Cool Widget! [ Click to Remove ]';
   button.addEventListener( MouseEvent.CLICK, onComponentClick );
   coolWidget.widgetShell.addComponent( button );
         
   // and add some status message text
   var message:String = "Some data from the CoolWidget Model: "+coolWidgetProxy.getData().toString()+ " ]";
         coolWidget.widgetShell.setStatusMessage( message );
         
}

What want to know is what is the code to add say YourName.mxml file to the stage by replacing the var button:Button = new Button() code that creates a new button on the stage?

I have the import path to the file in question, so its just how do I code this?

PS: This is what i had done to add a panel to the stage with actionscript.

protected function onProd( event:Event ):void
{
            var panel:Panel = new Panel();         
            panel.width = 400;
            panel.height = 300;
            panel.title='This is a tester';
            confirmTimesheet.widgetShell.addComponent( panel );
}

Thanks so much...
Logged
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« Reply #3 on: April 14, 2008, 11:17:58 »

It's exactly the same as when you instantiated the Panel component.

Lets say YourName.mxml is a custom component based on a Panel:
:

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Custom contents of 'YourName.mxml' View Component -->
   
</mx:Panel>


Then in the Mediator for the Widget:
:
protected function onWhatever( event:Event ):void
{
            var yourName:YourName =  new YourName();         
            yourName.width = 400;
            yourName.height = 300;
            yourName.title='This is a custom MXML panel component';
            widget.widgetShell.addComponent( panel );
}
Logged
spacecom
Newbie
*
Posts: 6


View Profile Email
« Reply #4 on: April 15, 2008, 04:04:47 »

Thank you , but I need alittle more help please. The page, ConfirmCanvas.mxml as canvas, I want to have load into the WidgetCanvas.mxml when the button is clicked , see code as follows. The MyPanel.mxml is based as a Panel which is then a view ie: xmlns:v.

:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:v="co.za.hrtrac.modules.confirmwidget.view.components.*" >

<v:MyPanel x="50" y="50"/>

</mx:Canvas>

Please show me how to code the protected function as per your previous posts example code. This is what I have done and this does not work. Have the following errors when I save the function in the widget mediator.
1046: Type not found or was not a complie-time constant:ConfirmCanvas

This is my code for the protected function in the mediator for the widget. ie: ConfirmWidget.mxml

:
protected function onProd( event:Event ):void
{
            // test panel created using actionscript
            var test:Panel = new Panel();         
            test.width = 400;
            test.height = 300;
            test.title='This is a tester';
            confirmTimesheet.widgetShell.addComponent( test );
           
            //this is for the custom component ConfirmCanvas.mxml
            var ConfirmCanvas:ConfirmCanvas = new ConfirmCanvas();         
            ConfirmCanvas.width = 400;
            ConfirmCanvas.height = 300;
            confirmTimesheet.widgetShell.addComponent( ConfirmCanvas );
}

I'm really stuck as to what I'm meant to do here. If I replace the following code as then all I'm doing is creating an actionscript canvas and not importing the ConfirmCanvas.mxml file as intended.

:
var ConfirmCanvas:ConfirmCanvas = new ConfirmCanvas();
with
var ConfirmCanvas:Canvas = new Canvas();

Thanks for your patience and appreciate your time.
« Last Edit: April 15, 2008, 04:23:31 by spacecom » Logged
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« Reply #5 on: April 15, 2008, 07:25:44 »

First suggestion:
Lower the initial cap in the ConfirmCanvas variable. Use camelCase and not StuddlyCaps for variable names. This helps not only the reader but the compiler distinguish between an attempt to reference a class variable and an instance variable.

In particular, the variables ConfirmCanvas.height and ConfirmCanvas.width are intended to refer to the hight and width property of the instance you just created. However since the variable name is capitalized, and the same as the class, it is also the way you reference the static variables height and width of a class named ConfirmCanvas. These properties likely don't exist.

:
            var confirmCanvas:ConfirmCanvas = new ConfirmCanvas();         
            confirmCanvas.width = 400;
            confirmCanvas.height = 300;
            confirmTimesheet.widgetShell.addComponent( confirmCanvas );

However I am not a compiler so all I can say is run it with these changes and see if it works. If you have problems, then it is time to use the debugger. Set a breakpoint on the line with 'new ConfirmCanvas();', run in debug mode and step through the code, inspecting the properties as you go. There's no better way to tell what is going on in the guts of your program than to turn on the x-ray machine and find out.

-=Cliff>
Logged
spacecom
Newbie
*
Posts: 6


View Profile Email
« Reply #6 on: April 15, 2008, 10:44:26 »

I would like to thank you very much. Testing with the debugger as suggested prior to making the camelCase change and then after has taught me tons.

The camelCase fixed the problem.

Kindly

Wayne

Logged
Pages: [1]
Print