Developing a Dice Game Using ASP.NET Futures Drag and Drop Techniques - XML-Script programming

(Page 5 of 6 )

Now let’s see the xml-script code related to this dice game, which is shown in the following:

<script type="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005"

xmlns:cns="javascript:Custom.UI">

<components>

<control id="DragSource1">

<behaviors>

<cns:MagicDragSourceBehavior id="b1" />

</behaviors>

</control>

<control id="DragSource12">

<behaviors>

<cns:MagicDragSourceBehavior id="b2" />

</behaviors>

</control>

<control id="DragSource3">

<behaviors>

<cns:MagicDragSourceBehavior id="b3"/>

</behaviors>

</control>

<control id="DragSource4">

<behaviors>

<cns:MagicDragSourceBehavior id="b4" />

</behaviors>

</control>

<control id="DragSource5">

<behaviors>

<cns:MagicDragSourceBehavior id="b5"/>

</behaviors>

</control>

<control id="DragSource6">

<behaviors>

<cns:MagicDragSourceBehavior id="b6" />

</behaviors>

</control>

 

 

<control id="DropTarget">

<behaviors>

<cns:MagicDropTargetBehavior/>

</behaviors>

</control>

<Button id="restartBtn" click="btnClickHandler"/>

</components>

</page>

</script>

Since the two custom behaviors we are to use are defined in the Custom.UI custom namespace, we have to add a reference to this namespace.

xmlns:cns="javascript:Custom.UI">

Next, we defined six ASP.NET AJAX client-side controls, which are bound to the six <div/> DOM elements that represent the six dice respectively. And, as is discussed above, we should apply the custom MagicDragSourceBehavior to all six controls.

Inside the descriptor block of MagicDragSourceBehavior, we’ve merely exposed one property—dragDropMagic. This property is a rather complex object. Therefore, we decide to use the JavaScript mode, rather than the xml-script mode, to specify this property for the six behaviors (which should be discussed later).

Next, the DOM element <div/> that represents the drop area is also attached to a client-side control (DropTarget), which is also decorated with another MagicDropTargetBehavior.

In the next section we'll see how we use the JavaScript mode to specify the dragDropMagic property for the above six behaviors and how we can attach a click event handler to the ‘Restart the game’ button.

Next: JavaScript programming >>
 

More ASP.NET Articles
More By Xianzhong Zhu

Comments On: Developing a Dice Game Using ASP.NET Futures Drag and Drop Techniques (code unedited)

>>> Be the FIRST to comment on this article!