ASP.NET AJAX in Action phần 10 potx

480 CHAPTER 13 Implementing common Ajax patterns page together with the drag-and-drop components. The ScriptManager control looks like this: <asp:ScriptManager ID="scriptManager" runat="server"> <Scripts> <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" /> <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewDragDrop.js" /> </Scripts> </asp:ScriptManager> After the ScriptManager control, you have to define the static HTML that will become the drag-drop list. To obtain the kind of layout shown in figure 13.8, you style two div elements as the two columns that host the draggable widgets. This is done in a CSS file referenced in the ASP.NET page, which isn’t included in the fol- lowing listings. (You can access and run the complete source code for this exam- ple after downloading it from www.manning.com/gallo.) Listing 13.22 shows the static HTML to add to the ASP.NET page. <div class="widgets"> <% Left List %> <div id="leftArea" class="left_col"> <% Widget 1 %> <div id="widget1" class="widget"> <div id="widget1_Handle" class="widget_handle">Widget 1</div> <div class="widget_content"> <asp:Login ID="myLogin" runat="server" CssClass="centered"></asp:Login> </div> </div> <% Widget 2 %> <div id="widget2" class="widget"> <div id="widget2_Handle" class="widget_handle">Widget 2</div> <div class="widget_content"> <span>Enter some text:</span> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </div> </div> </div> Listing 13.22 Static HTML for the declarative widgets example Widget C Left-side list B Declarative widgets 481 <% Right List %> <div id="rightArea" class="right_col"> <% Widget 3 %> <div id="widget3" class="widget"> <div id="widget3_Handle" class="widget_handle">Widget 3</div> <div class="widget_content"> <asp:Calendar ID="Calendar1" runat="server" CssClass="centered"></asp:Calendar> </div> </div> </div> <% Templates %> <div class="templates"> <% Drop Cue template %> <div id="dropCueTemplate" class="drop_cue"></div> <% Empty template %> <div id="emptyTemplate" class="emptyList">Drop widgets here.</div> </div> </div> The static HTML includes two div elements, both containing two widgets. The outer div elements B act as drop zones for the widgets and will be associated with instances of the DragDropList behavior. The div elements that act as the widgets C will become items of the containing list and will be associated with instances of the DraggableListItem behavior. At the bottom of the markup code, you define templates used by the Drag- DropList behavior. The drop-cue template D highlights a valid drop zone for the widget being dragged. The empty template E displays some text when a list doesn’t contain any items. Because the templates are used by the DragDropList , you don’t need to show them in the page; you just need to declare the HTML and wire it to a DragDropList instance. For this reason, templates are hidden by the templates CSS class, which sets the display mode of the child elements to false . To turn the static HTML into dynamic HTML, you write some XML Script code in the page. The HTML Script code contains the declarative markup that wires the DOM elements to instances of the DragDropList and DraggableListItem behav- iors. The entire XML Script block to embed in the ASP.NET page is shown in list- ing 13.23. Drop Cue template D Empty template E 482 CHAPTER 13 Implementing common Ajax patterns <script type="text/xml-script"> <page> <components> <! Left Area > <control id="leftArea"> <behaviors> <dragDropList dragDataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical"> <dropCueTemplate> <template layoutElement= ➥ "dropCueTemplate" /> </dropCueTemplate> <emptyTemplate> <template layoutElement= ➥ "emptyTemplate" /> </emptyTemplate> </dragDropList> </behaviors> </control> <! Right Area > <control id="rightArea"> <behaviors> <dragDropList dragDataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical"> <dropCueTemplate> <template layoutElement= ➥ "dropCueTemplate" /> </dropCueTemplate> <emptyTemplate> <template layoutElement= ➥ "emptyTemplate" /> </emptyTemplate> </dragDropList> </behaviors> </control> <! Draggable items > <control id="widget1"> <behaviors> <draggableListItem handle="widget1_Handle" /> </behaviors> </control> <control id="widget2"> <behaviors> Listing 13.23 Declarative XML Script code for the widgets example DragDropList declaration B Drop Cue template C Empty template D Widget E Widget handle F Declarative widgets 483 <draggableListItem handle="widget2_Handle" /> </behaviors> </control> <control id="widget3"> <behaviors> <draggableListItem handle="widget3_Handle" /> </behaviors> </control> </components> </page> </script> The approach followed in the code is to encapsulate the relevant DOM elements into generic client controls. You do so by declaring a control tag with the id attribute set to the ID of the associated DOM element. In the XML Script code, you create controls for the two drag-drop lists B and the widgets E . Because the two drag-drop lists are declared in a similar manner, let’s focus on the one that occu- pies the left portion of the page area. Each DragDropList behavior is added as a behavior of the corresponding con- trol. You do this by adding a dragDropList element in the behaviors element of the control. As a consequence, the control associated with the container div of the left list has a DragDropList behavior whose attributes are set as follows: ■ The dragDataType attribute must be set to HTML to make the list automati- cally rearrange its items when a widget is dropped over the list’s area. ■ The acceptedDataType attribute lets you specify a comma-separated list of accepted data types. Each data type is a string enclosed in single quotes. The dragDataType is set to HTML , so the acceptedDataTypes attribute con- tains at least the HTML data type. ■ The dragMode attribute is set to Move . Copy mode has no effect on the Drag- DropList behavior. ■ The direction attribute is set to Vertical to specify that the list has a verti- cal orientation. The dropCueTemplate C and emptyTemplate D tags wire the HTML for the tem- plates to the DragDropList instance. This is done by specifying the ID of the DOM element that contains the HTML for the template in the id attribute of the tem- plate tag. 484 CHAPTER 13 Implementing common Ajax patterns Widgets E are declared as generic client controls with an associated Dragga- bleListItem instance. Each widget has a handle F that is used to drag it around the page. The handle is represented by a div element rendered at the top of the widget, as shown in figure 13.8. To specify that this element is the widget’s handle, you set the handle attribute of the draggableListItem element to the ID of the handle element. All the remaining widgets have similar declarations. Note that you don’t have to wire the widgets to the drag-drop list in the XML Script code. The list items are considered child elements of the DOM element associated with the drag-drop list, as specified in the static structured HTML. 13.6 Summary In the final chapter of this book, you have used the ASP.NET AJAX framework to implement some of the many Ajax patterns available. A large portion of the chap- ter has been dedicated to coding and development patterns. Due to the role of JavaScript as the main client development language for Ajax applications, we showed how to implement some patterns that make JavaScript files shorter and easier to debug. We provided patterns on how to provide informative stack traces, comment the JavaScript files (in order to also take advantage of the IntelliSense tool in Visual Studio Orcas) and performing parameters validation in the debug version of a script file. Since in JavaScript size matters, we provided two helper methods for creating client properties and events using a single statement. These helpers, which extend the Microsoft Ajax Library itself, allow writing less client code and saving a lot of keystrokes, while decreasing the size of JavaScript files sent to the browser. Then, we moved to examine the implementations of some design patterns. We started with logical navigation and unique URLs. Logical navigation fixes the “bro- ken Back button” problem by allowing access to different views of the same page. Unique URLs is a pattern that allows bookmarking the state of a page, to realize a sort of permalink-like solution. The last two patterns are related to drag and drop widgets (ala PageFlakes) and data binding. To implement these patterns, we used some of the features available in the ASP.NET Futures package, such as the declarative XML Script lan- guage and the drag and drop engine. For performing data binding on the client side, we took advantage of the client ListView control to display a list of products from the AdventureWorks database. Appendices Appendix A contains instructions for installing ASP.NET AJAX, the ASP.NET Futures package, and the Ajax Control Toolkit. It also shows you how to set up the AdventureWorks database, in order to run some of the examples presented in the book. Appendix B is dedicated to debugging tools. It contains an overview of the main features provided by Firebug for Firefox and Web Development Helper for Internet Explorer. The final section shows you how to debug Java- Script files using the Visual Studio Debugger. 487 appendix A: Installing ASP.NET AJAX 488 APPENDIX A Installing ASP.NET AJAX In this appendix, you’ll learn how to install ASP.NET AJAX and the additional packages available on the official website, such as the ASP.NET Futures, including the ASP.NET AJAX source code. We’ll also explain how to install the Ajax Control Toolkit and how to interact with the Toolkit homepage hosted at the CodePlex website. Because some of the examples presented in the book take advantage of the AdventureWorks database, the last section shows how to use this database in an ASP.NET website. A.1 Downloading and installing ASP.NET AJAX You can download the ASP.NET AJAX Extensions installer from the official website at http://ajax.asp.net. Figure A.1 shows the Downloads page of the official web- site. To reach it, click the Downloads button at the top of the page. From this page, you can download the latest release of ASP.NET AJAX as well as additional packages and resources such as the official documentation. Once you’ve downloaded the ASP.NET AJAX Extensions installer, you can launch it by double-clicking the executable file. This starts the installation wizard, shown in Figure A.1 You can download all the ASP.NET AJAX packages from the Downloads page of the official website. APPENDIX A Installing ASP.NET AJAX 489 figure A.2. The installer copies the necessary files to the default installation direc- tory, which is the following: C:\Program Files\Microsoft ASP.NET\ ➥ ASP.NET 2.0 AJAX Extensions\v1.0.61025 The installation folder has the same name as the current version number, which will vary for subsequent releases. If you browse to the installation folder, you’ll find the following files: ■ The Microsoft Ajax Library files, stored in the MicrosoftAjaxLibrary folder ■ The System.Web.Extensions and System.Web.Extensions.Design assem- blies, which contain the ASP.NET AJAX server framework ■ A web.config file already configured for ASP.NET AJAX The System.Web.Extensions assembly is automatically added to the Global Assembly Cache ( GAC) by the installer. For this reason, there’s no need to refer- ence it in a website’s bin folder. The Microsoft Ajax Library files are also embed- ded as web resources in the System.Web.Extensions assembly . To configure an ASP.NET AJAX-enabled website, the only thing you have to do is use the web.config file found in the installation directory. If you’re upgrading an existing website, Figure A.2 The ASP.NET AJAX Extensions installer [...]... to the Visual Studio Toolbox APPENDIX A Installing ASP.NET AJAX A.1.3 493 Additional ASP.NET AJAX downloads In addition to the main ASP.NET AJAX package and the ASP.NET Futures CTP, you can download the following files from the Downloads page of the official ASP.NET AJAX website: ■ ASP.NET AJAX Extensions Source Code—The source code for ASP.NET AJAX, written in C# The code can be modified and re-compiled...490 APPENDIX A Installing ASP.NET AJAX Figure A.3 Templates installed by the ASP.NET AJAX installers you have to copy all the settings of the web.config file found in the installation directory to the web.config file of the website to upgrade To make it easier starting with ASP.NET AJAX, the installer configures also a Visual Studio template that sets up an ASP.NET AJAX- enabled website To... settings of the web.config file found in the installation directory to the web.config file of the website to upgrade The installer also configures a Visual Studio template to create an ASP.NET AJAX CTP-enabled website To select the template, open Visual Studio 2005, and choose New Project from the File menu 492 APPENDIX A Installing ASP.NET AJAX Figure A.5 The ASP.NET AJAX CTP Installer The ASP.NET AJAX. .. 496 APPENDIX A Installing ASP.NET AJAX Finally, when you’re dealing with the Toolkit controls programmatically, be sure to import the AjaxControlToolkit namespace: using AjaxControlToolkit; A.2.3 Interacting with CodePlex The CodePlex website offers a nice interface to deal with... set a breakpoint by clicking the left zone near the line numbers You can use the Watch window on the right to examine the values of all the variables and references in the current statement In addition, you can step into the code, add new watch expressions, and examine all the breakpoints by clicking the Breakpoints tab Next, in the DOM tab, you can inspect the page’s entire DOM tree In the same way... Toolkit controls are in the new tab in the Visual Studio Toolbox, as shown in figure A.4 The Downloads page of the official ASP.NET AJAX website contains additional packages available for download The following sections will guide you through the installation process A.1.2 Figure A.4 The ASP.NET AJAX controls added to the Visual Studio Toolbox Installing the ASP.NET Futures CTP The ASP.NET Futures CTP... AdventureWorks database in an ASP.NET website: 498 APPENDIX A Installing ASP.NET AJAX 1 Download and install the AdventureWorks database with the AdventureWorksDB.msi installer This creates two files—AdventureWorks_Data.mdf and AdventureWorks_Log.ldf in the installation directory 2 In Visual Studio, select New Website from the File menu, then choose the ASP.NET Website template or the ASP.NET AJAX- Enabled Website... available in Firebug, starting from the logging console Figure B.3 The Firebug tool up and running in Firefox Figure B.2 Firefox prompts you before installing the Firebug add-on 501 502 APPENDIX B Tools for debugging Ajax applications B.1.2 Quick Overview of Firebug Clicking the Console tab switches to the console window, where messages are logged As we explained in chapter 2, the Microsoft Ajax Library... The installation directory contains the following: ■ The Microsoft Ajax Library script files, stored in the ScriptLibrary folder ■ The Microsoft.Web.Preview.dll assembly ■ A web.config file already configured for ASP.NET AJAX CTP To configure a new website for ASP.NET AJAX CTP, the only thing you have to do is use the web.config file found in the installation directory If you’re upgrading an existing... of the ASP.NET features include examining the ViewState, trace information, and cache APPENDIX B Tools for debugging Ajax applications Figure B.11 B.2.3 507 Web Development Helper appears as an explorer bar at the bottom of the browser Inspecting HTTP traffic You configure Web Development Helper for HTTP logging by selecting HTTP Logging from the drop-down list in the command bar and selecting the . explains how to do it. Figure A.3 Templates installed by the ASP. NET AJAX installers APPENDIX A Installing ASP. NET AJAX 491 A.1.1 Adding the ASP. NET AJAX controls to the Toolbox To add the ASP. NET. Java- Script files using the Visual Studio Debugger. 487 appendix A: Installing ASP. NET AJAX 488 APPENDIX A Installing ASP. NET AJAX In this appendix, you’ll learn how to install ASP. NET AJAX and the. The ASP. NET AJAX CTP Installer. Figure A.6 The ASP. NET Futures CTP controls added to the Visual Studio Toolbox APPENDIX A Installing ASP. NET AJAX 493 A.1.3 Additional ASP. NET AJAX downloads In