free barcode generator asp.net c# s USING CLIENT CONTROLS IN ATLAS in Java

Print ECC200 in Java s USING CLIENT CONTROLS IN ATLAS

Another style you can change on the <div> element is the cursor that is used when the mouse hovers over it. You can do this in this example with a click of the button to toggle it between the default cursor and a hand cursor. The label indicates the status of the current cursor. You ll now look at how these controls are initialized. First the button you set this up by constructing a Sys.UI.Button control with cursorButton, which is the ID of the underlying HTML control: // Set up the buttons, and attach the click event var btnCursor = new Sys.UI.Button($('cursorButton')); btnCursor.initialize(); btnCursor.click.add(onCursorButtonClick); Then you assign the onCursorButtonClick function as the delegate event for when the user clicks the button. This function looks like this: function onCursorButtonClick() { if (g_panel.containsCssClass('special')) { g_panel.removeCssClass('special'); g_label.set_text("Regular cursor"); } else { g_panel.addCssClass('special'); g_label.set_text("Hand pointer cursor"); } }

This function toggles the hover cursor for the panel. To do this, it inspects the panel using the containsCssClass method of the g_panel control. This is a great example of how useful client-side controls are. With Atlas, all the underlying plumbing is handled for you, so you can just call methods like this one to inspect the CSS classes that are attached to a control. If the panel contains the class special, that means it currently has this CSS attached to it: .special {cursor: hand;} And as you can see, this sets the cursor to be a hand. So, if it currently contains this CSS class, the way to toggle it is simply to remove this class from the panel, therefore reverting the panel to its default. You also set the text of the label to Regular Cursor. Otherwise, if it isn t present, you add it and update the label accordingly. Very simple, right You can see the effect of clicking this button in Figure 5-3. The button has been clicked to set the cursor to be a hand (first image). Note the state of the label and the cursor as it hovers over the <div> element. In the second image, the button has been clicked again, the special class has been removed, and both the label and the cursor have been updated.

This example was a simple one, showing how you can manipulate CSS classes on the underlying controls by using the various methods available to Atlas client-side controls. In addition, you saw how event delegates can be added to controls to allow for complex functionality to be performed upon an event. As you work through this chapter, I will expand on this example to show you how to achieve more sophisticated functionality.

You can achieve the same functionality using Atlas Script instead of JavaScript. In this case, the same HTML is used, but the following XML-based Atlas Script is used instead of the JavaScript code you saw earlier: <script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <control targetElement="panel" cssClass="normal"> <bindings> <binding id="setCss" dataContext="colorSelect" dataPath="selectedValue" property="cssClass" /> </bindings> </control> <select targetElement="colorSelect"> <selectionChanged> <invokeMethod target="setCss" method="evaluateIn" /> </selectionChanged> </select>

<button targetElement="cursorButton"> <click> <invokeMethod target="panel" method="toggleCssClass"> <parameters className="special" /> </invokeMethod> <setProperty target="cursorLabel" property="text" value="Cursor set" /> <setProperty target="cursorButton" property="enabled" value="true" /> </click> </button> <label targetElement="cursorLabel" text="Regular cursor" /> </components> </page> </script>

This script declaratively achieves the same functionality you saw in the previous expression that used explicit programming. Let s go through it piece by piece so you can understand completely what is happening. First, you set up the outside tags that define the page: <script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> The script tag informs the browser that the processor for the type text/xml-script should be used for the following sections. The Atlas runtime handles this script for you. Next, the tag appears that defines to Atlas that what is following is Atlas Script defining the page and the controls that are on the page. It uses the xml-script/2005 schema for validation, again informing Atlas to validate the page according to this schema. Within the page is a <components> tag, within which each of the components resides.