1 Reply Latest reply on May 18, 2008 3:48 PM by slaingod

    Adding Canvas

    flashste
      I am playing around with a MYSQL example and have added an additional Canvas and call the ID server.

      I have added a button to the update canvas with <mx:Button label="Button" id="buttonnew" click="goToserver()"/>

      I get an error stating
      Severity and Description Path Resource Location Creation Time Id
      1180: Call to a possibly undefined method goToserver. test1234/src test1234.mxml line 85 1211144884143 579

      the code is as follows:

      <?xml version="1.0" encoding="utf-8"?>
      <!--
      Main application MXML file.
      MXML defines the UI layout of your application as well as the connection of UI components
      to your data source (via data binding) and the ActionScript event handlers that
      implement your application's UI logic.
      The MXML file that starts with an <mx:Application> tag is the main source code file
      for your Flex application.
      -->
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" pageTitle="employees"
      creationComplete="initApp()" backgroundGradientColors="[#ffffff, #ffffff]" width="800" height="600">

      <!--
      Externalized script "include" tag.
      This file contains the UI logic for the CRUD application. All application logic
      in Flex is written in ActionScript, the same language used by Flash.
      Although all of this code could have been included directly in the mx:Script tag
      within this file, we recommend externalizing it for clarity.
      -->
      <mx:Script source="employeesScript.as" />

      <!--
      The tags below define the application's UI components and their initial properties.
      Every tag can be accessed in ActionScript via its "id" property, similar to HTML tags
      accessed via JavaScript.
      Note that unlike HTML, Flex does not use a flow-based model. With the exception of
      some containers, Flex controls are positioned on the page using their width and height
      properties, so the order of the tags in the file does not affect the layout.
      -->
      <mx:ViewStack id="applicationScreens" width="100%" height="100%">
      <mx:Canvas id="view" width="75%" height="100%">

      <!--
      This DataGrid is bound to a data provider, the object "dataArr" which is
      instantiated in the included script file. In general, data providers are collections
      such as Array, ArrayCollection, XMLObject, etc. that are declared with the [Bindable]
      tag and set as the "dataProvider" property of a UI component. When the data in
      a data provider changes, Flex will automatically update any bound UI components
      with the new data.
      -->
      <mx:DataGrid id="dataGrid"
      dataProvider="{dataArr}"
      rowCount="8"
      editable="true"
      resizableColumns="true"
      headerRelease="setOrder(event);"
      width="479" x="10" height="239" y="10">
      <mx:columns>
      <mx:DataGridColumn headerText="ID" dataField="IDCol" />
      <mx:DataGridColumn headerText="NameLast" dataField="NameLastCol" />
      <mx:DataGridColumn headerText="NameFirst" dataField="NameFirstCol" />
      <mx:DataGridColumn headerText="Position" dataField="PositionCol" />
      </mx:columns>
      </mx:DataGrid>

      <!--
      These Buttons call ActionScript functions defined in
      employeesScript.as when they are clicked (as defined by the "click"
      event on the tag). In general, UI event handling in Flex is done by assigning
      handler functions to the events on the UI component.
      -->
      <mx:Button id="btnAddNew" click="goToUpdate()" icon="@Embed('icons/AddRecord.png')" toolTip="Add Record" x="10" bottom="321"/>
      <mx:Button id="btnDelete" click="deleteItem()" icon="@Embed('icons/DeleteRecord.png')" toolTip="Delete Record" x="68" bottom="321"/>
      <mx:Label text="Search by NameLast" right="566" bottom="322"/>
      <mx:TextInput id="filterTxt" width="238" toolTip="Search by NameLast" enter="filterResults()" right="324" bottom="322"/>
      <mx:Button click="filterResults()" id="filterButton" icon="@Embed('icons/SearchRecord.png')" toolTip="Search by NameLast" right="276" bottom="321"/>

      </mx:Canvas>


      <mx:Canvas id="update" width="325" height="234">
      <mx:Form width="298" height="224" id="employeesForm">
      <mx:FormItem label="ID:" id="ID_form">
      <mx:TextInput id="IDCol" text=""/>
      </mx:FormItem>
      <mx:FormItem label="NameLast:" id="NameLast_form">
      <mx:TextInput id="NameLastCol" text=""/>
      </mx:FormItem>
      <mx:FormItem label="NameFirst:" id="NameFirst_form">
      <mx:TextInput id="NameFirstCol" text=""/>
      </mx:FormItem>
      <mx:FormItem label="Position:" id="Position_form">
      <mx:TextInput id="PositionCol" text=""/>
      </mx:FormItem>
      <mx:Button label="Button" id="buttonnew" click="goToserver()"/>
      <mx:Button label="Cancel" id="btnCancel" click="goToView()"/>
      <mx:Button label="Save" id="btnSubmit" click="insertItem()"/>
      </mx:Form>
      </mx:Canvas>
      <mx:Canvas id="server" width="100%" height="100%">
      </mx:Canvas>

      </mx:ViewStack>
      </mx:Application>


      Do I have to 'declare' the new canvas somehow

      Cheers

      SteveW

        • 1. Re: Adding Canvas
          slaingod Level 1
          Not sure what you mean since the source isn't included. But if you do create a new Canvas in AS code, you would need to do addChild(my_canvas); to add it to the Application or some other container. You can use addChildAtIndex, etc. for layering/z-order.