Building ASP.NET AJAX Controls (Pt 4 - Hold on, aren't you forgetting some things?)

  • Article

Links to the other posts in this series

So just before we get ahead of ourselves and build or fresh new VEMapControl into a server control, a couple of things (well three actually):

  1. How do I access my component after it's been created?
  2. Can I expose my own events on my component?
  3. What about those property change notifications you mentioned?

How do I access my component after it's been created?

Well that depends on what type of component it is but you're either going to use Sys.Application.findComponent() (shortcut $find() ) or Sys.UI.DomElement.getElementById() (shortcut $get() ).

Using $find()

  • Usage: var o = $find(id, parent);
  • parent is optional and allows you to narrow the search, by default you get the Sys.Application object which happens to be the container your component was added to by $create().
  • Typically you would just call $create passing the component id. But what's the component id?
    • For a Sys.Component you set an id (just set the 'id' property in $create())
    • A Sys.UI.Behavior by default will be given an id of the form associated_element_id$behavior_name. In other words if my behavior is called ServerControls.VEMapBehavior and the associated element has an id of 'map' then the behavior id will be map$VEMapBehavior.
    • For a Sys.UI.Control the id is just the associated element id. In the example above we'd just use $find('map') to get a reference to our control.

Using $get()

  • Usage: var o = $get(id, element);
  • element is optional with the default being the document element
  • You can only use this method for controls and behaviors (ie components that have associated UI elements)
  • In both cases you'll find that the associated element has an expando property that gives you access to the component
    • For a Sys.UI.Behavior the expando is the behavior name so again, in the above example you could use $get('map').VEMapBehavior.
    • For a Sys.UI.Control the expando is just 'control' so you would use $get('map').control (this works because an element can only be associated with a single control).

The other thing to say is, you shouldn't try and access your component during the init event (ie just after creation) as you'll most likely run into problems. Wait until the load event instead.

So, in our example of the VEMapControl we might do something along the lines of

 function pageInit() {
    $create(    ServerControls.VEMapControl,
                        { 'lat' : 52.0, 'lon' : -1.0 },
                        {},
                        {},
                        $get("div1"))        
}

function pageLoad() {
    $find('div1').set_lat(100.0);
}

 

One issue with our implementation is that we don't actually update the map when we change the lat / lon on properties of our control but that's another issue and not entirely relevant here (but I'm making a note of it for future improvements!)

Can I expose my own events on my component?

Of course you can. See my the next post (I'm going to break these up as the last one was a monster)

What about those property change notifications you mentioned?

Yep, we'll get to that as well.

I'll continue in another post just so this doesn't get too big as I felt Pt 3 was a bit overwhelming :-).

Technorati Tags: asp.net,ajax,visual studio,virtual earth