Window for ASP.NET AJAX
Upcoming SlideShare
Loading in...5
×
 

Window for ASP.NET AJAX

on

  • 2,068 views

 

Statistics

Views

Total Views
2,068
Views on SlideShare
2,068
Embed Views
0

Actions

Likes
0
Downloads
39
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Window for ASP.NET AJAX Window for ASP.NET AJAX Document Transcript

  • ComponentOne Window for ASP.NET AJAX
  • Copyright  1987-2010 ComponentOne LLC. All rights reserved. Corporate Headquarters ComponentOne LLC 201 South Highland Avenue 3rd Floor Pittsburgh, PA 15206 ∙ USA Internet: info@ComponentOne.com Web site: http://www.componentone.com Sales E-mail: sales@componentone.com Telephone: 1.800.858.2739 or 1.412.681.4343 (Pittsburgh, PA USA Office) Trademarks The ComponentOne product name is a trademark and ComponentOne is a registered trademark of ComponentOne LLC. All other trademarks used herein are the properties of their respective owners. Warranty ComponentOne warrants that the original CD (or diskettes) are free from defects in material and workmanship, assuming normal use, for a period of 90 days from the date of purchase. If a defect occurs during this time, you may return the defective CD (or disk) to ComponentOne, along with a dated proof of purchase, and ComponentOne will replace it at no charge. After 90 days, you can obtain a replacement for a defective CD (or disk) by sending it and a check for $25 (to cover postage and handling) to ComponentOne. Except for the express warranty of the original CD (or disks) set forth here, ComponentOne makes no other warranties, express or implied. Every attempt has been made to ensure that the information contained in this manual is correct as of the time it was written. We are not responsible for any errors or omissions. ComponentOne’s liability is limited to the amount you paid for the product. ComponentOne is not liable for any special, consequential, or other damages for any reason. Copying and Distribution While you are welcome to make backup copies of the software for your own use and protection, you are not permitted to make copies for the use of anyone else. We put a lot of time and effort into creating this product, and we appreciate your support in seeing that it is used by licensed users only. This manual was produced using ComponentOne Doc-To-Help™.
  • Table of Contents ComponentOne Window for ASP.NET AJAX Overview .............................................................. 1 What's New in Window for ASP.NET AJAX ..........................................................................................1 Installing Window for ASP.NET AJAX ...................................................................................................1 C1Window for ASP.NET AJAX Setup Files ............................................................................................1 System Requirements ...............................................................................................................................2 Installing Demonstration Versions ............................................................................................................3 Uninstalling Window for ASP.NET AJAX ..............................................................................................3 End-User License Agreement ...................................................................................................................3 Licensing FAQs .......................................................................................................................................3 What is Licensing? ...................................................................................................................................3 How does Licensing Work? ......................................................................................................................3 Common Scenarios ..................................................................................................................................4 Troubleshooting .......................................................................................................................................6 Technical Support ....................................................................................................................................7 Redistributable Files .................................................................................................................................8 About This Documentation ......................................................................................................................8 Namespaces .............................................................................................................................................9 Creating an AJAX-Enabled ASP.NET Project........................................................................................10 Adding the C1Window Component to a Project .....................................................................................12 Key Features.......................................................................................................................14 Window for ASP.NET AJAX Quick Start .................................................................................17 Step 1 of 4: Add C1Window to the Page.................................................................................................17 Step 2 of 4: Customize the Dialog Window ............................................................................................18 Step 3 of 4: Add Code and Script to the Project.......................................................................................19 Step 4 of 4: Run your Application...........................................................................................................19 Window for ASP.NET AJAX Top Tips ....................................................................................23 Design-Time Support............................................................................................................25 C1Window Smart Tag............................................................................................................................25 C1Window Context Menu .....................................................................................................................26 Modal and Modeless Dialog Windows......................................................................................26 Modal Dialog Windows .........................................................................................................................27 Modeless Dialog Windows.....................................................................................................................27 C1Window Elements............................................................................................................27 Content Element ....................................................................................................................................27 Caption Bar Element ..............................................................................................................................28 Status Bar Element .................................................................................................................................30 Window for ASP.NET AJAX Appearance ................................................................................31 Visual Styles ...........................................................................................................................................31 Styles......................................................................................................................................................33 Content Styles ........................................................................................................................................33 Caption Bar Styles ..................................................................................................................................35 Status Bar Styles .....................................................................................................................................45 Content and Status Bar Templates ..........................................................................................................47 Window for ASP.NET AJAX Behavior ....................................................................................48 Window Positioning and Sizing..............................................................................................................48 Window Position ...................................................................................................................................48 iii
  • Window Size..........................................................................................................................................48 Window Moving ....................................................................................................................................49 Window Minimizing ..............................................................................................................................49 Animation..............................................................................................................................................49 Animation Effects...................................................................................................................................49 Animation Duration...............................................................................................................................51 Partial Rendering ...................................................................................................................................51 Working with Client-Side Script .............................................................................................53 Dialog Window Client-Side Methods .....................................................................................................53 Dialog Window Client-Side Properties ...................................................................................................54 Caption Button Client-Side Methods ......................................................................................................54 Client-Side Events ..................................................................................................................................55 Window for ASP.NET AJAX Samples .....................................................................................59 Window for ASP.NET AJAX Task-Based Help..........................................................................59 Customizing the Content Area ...............................................................................................................59 Showing External Content in the Content Area ......................................................................................59 Creating a Content Template..................................................................................................................61 Adding Custom HTML Content in the Content Area .............................................................................63 Using Partial Rendering .........................................................................................................................66 Customizing the Caption Bar..................................................................................................................72 Hiding Caption Bar Buttons ...................................................................................................................72 Setting the Caption Bar Title...................................................................................................................73 Setting the Caption Bar Icon...................................................................................................................74 Customizing the Status Bar.....................................................................................................................75 Showing the Status Bar...........................................................................................................................75 Setting the Status Bar Content ................................................................................................................75 Setting the Loading Image ......................................................................................................................77 Customizing the Dialog Window ...........................................................................................................79 Showing the Dialog Window on Page Load ...........................................................................................79 Adding Keyboard Support......................................................................................................................80 Preventing Window Resizing .................................................................................................................80 Preventing Window Repositioning .........................................................................................................81 Setting the Window Location .................................................................................................................82 Setting the Height and Width .................................................................................................................83 Using the MinimizeZoneElementID Property ........................................................................................85 Programming Tasks................................................................................................................................87 Creating a Modeless Dialog Window in Code ........................................................................................87 Creating a Modal Dialog Window in Code.............................................................................................89 Setting the ChildrenAsTriggers Property.................................................................................................91 Client-Side Tasks....................................................................................................................................93 Setting the ContentURL Property at Run Time ......................................................................................93 Adding a New Title to the Caption Bar at Run Time ..............................................................................94 Calling the Show and Hide Methods at Run Time ..................................................................................96 Resizing the Dialog Window at Run Time .............................................................................................97 Setting the Dialog Window Location at Run Time .................................................................................98 iv
  • ComponentOne Window for ASP.NET AJAX Overview ComponentOne Window for ASP.NET AJAX allows Getting Started you to think outside the traditional dialog box and create robust, AJAX-enabled, interactive, completely Get started with the customizable dialog windows. The C1Window control can following topics: be used to create flexible and robust modal and modeless - Key Features (page dialog windows on the client or server-side to display 14) information, external content, and through the use of input controls such as ComponentOne Input for ASP.NET - Quick Start (page 17) AJAX™, receive input from the user. - Control Elements With a rich client-side object model, several Visual Styles, (page 27) and content template support you can easily adapt - Samples (page 59) C1Window to meet your users' needs. Develop interactive Web applications that are as much experience as application with Window for ASP.NET AJAX AJAX's polished, full-featured, AJAX-powered dialog windows. What's New in Window for ASP.NET AJAX There were no new features added to ComponentOne Window for ASP.NET AJAX in the 2010 v1 release. Tip: A version history containing a list of new features, improvements, fixes, and changes for each product is available on HelpCentral at http://helpcentral.componentone.com/VersionHistory.aspx. Installing Window for ASP.NET AJAX This section describes the setup files and system requirements for Window for ASP.NET AJAX. It also explains how to install demonstration versions of ComponentOne products and uninstall Window for ASP.NET AJAX. C1Window for ASP.NET AJAX Setup Files The ComponentOne Studio for ASP.NET AJAX installation program will create the following directory: C:Program FilesComponentOneStudio for ASP.NET. This directory contains the following subdirectories: Bin Contains copies of all binaries (DLLs, Exes) in the ComponentOne Visual Studio ASP.NET package. H2Help Contains documentation for Studio for ASP.NET AJAX components. 1
  • C1WebUi Contains files (at least a readme.txt) related to the product. C1WebUiVisualStyles Contains all external file themes. Samples Samples for the product are installed in the ComponentOne Samples folder by default. The path of the ComponentOne Samples directory is slightly different on Windows XP and Windows 7/Vista machines: Windows XP path: C:Documents and Settings<username>My DocumentsComponentOne Samples Windows 7/Vista path: C:Users<username>DocumentsComponentOne Samples The ComponentOne Samples folder contains the following subdirectories: Common Contains support and data files that are used by many of the demo programs. C1WebUi Contains samples and tutorials for Window for ASP.NET AJAX. System Requirements System requirements include the following: Operating Systems: Windows 2000 Windows Server® 2003 Windows Server® 2008 Windows XP SP2 Windows Vista™ Windows 7 Web Server: Microsoft Internet Information Services (IIS) 5.0 or later Environments: .NET Framework 2.0 or later Visual Studio 2005 Visual Studio 2008 Internet Explorer® 6.0 or later Firefox® 2.0 or later Safari® 2.0 or later Disc Drive: CD or DVD-ROM drive if installing from CD Note: Window for ASP.NET AJAX requires Microsoft ASP.NET AJAX Extensions installed and a ScriptManager on the page before the C1Window control is placed on the page. You must create an ASP.NET AJAX-Enabled Project so that the ScriptManager and Microsoft AJAX Extensions are included on the page. For more information, see Creating an AJAX-Enabled ASP.NET Project (page 10). For more information about Microsoft ASP.NET AJAX Extensions, see http://ajax.asp.net/. For information about the ScriptManager, see MSDN. 2
  • Installing Demonstration Versions If you wish to try Window for ASP.NET AJAX and do not have a registration serial number, follow the steps through the installation wizard and use the default serial number. The only difference between unregistered (demonstration) and registered (purchased) versions of our products is that registered versions will stamp every application you compile so a ComponentOne banner will not appear when your users run the applications. Uninstalling Window for ASP.NET AJAX To uninstall Window for ASP.NET AJAX: 1. Open Control Panel and select Add or Remove Programs or Programs and Features (Windows 7/Vista). 2. Select ComponentOne Studio for ASP.NET AJAX and click the Remove button. 3. Click Yes to remove the program. End-User License Agreement All of the ComponentOne licensing information, including the ComponentOne end-user license agreements, frequently asked licensing questions, and the ComponentOne licensing model, is available online at http://www.componentone.com/SuperPages/Licensing/. Licensing FAQs This section describes the main technical aspects of licensing. It may help the user to understand and resolve licensing problems he may experience when using ComponentOne .NET and ASP.NET products. What is Licensing? Licensing is a mechanism used to protect intellectual property by ensuring that users are authorized to use software products. Licensing is not only used to prevent illegal distribution of software products. Many software vendors, including ComponentOne, use licensing to allow potential users to test products before they decide to purchase them. Without licensing, this type of distribution would not be practical for the vendor or convenient for the user. Vendors would either have to distribute evaluation software with limited functionality, or shift the burden of managing software licenses to customers, who could easily forget that the software being used is an evaluation version and has not been purchased. How does Licensing Work? ComponentOne uses a licensing model based on the standard set by Microsoft, which works with all types of components. Note: The Compact Framework components use a slightly different mechanism for run time licensing than the other ComponentOne components due to platform differences. When a user decides to purchase a product, he receives an installation program and a Serial Number. During the installation process, the user is prompted for the serial number that is saved on the system. (Users can also enter the serial number by clicking the License button on the About Box of any ComponentOne product, if available, or by rerunning the installation and entering the serial number in the licensing dialog box.) When a licensed component is added to a form or Web page, Visual Studio obtains version and licensing information from the newly created component. When queried by Visual Studio, the component looks for 3
  • licensing information stored in the system and generates a run-time license and version information, which Visual Studio saves in the following two files:  An assembly resource file which contains the actual run-time license  A "licenses.licx" file that contains the licensed component strong name and version information These files are automatically added to the project. In WinForms and ASP.NET 1.x applications, the run-time license is stored as an embedded resource in the assembly hosting the component or control by Visual Studio. In ASP.NET 2.x applications, the run-time license may also be stored as an embedded resource in the App_Licenses.dll assembly, which is used to store all run-time licenses for all components directly hosted by WebForms in the application. Thus, the App_licenses.dll must always be deployed with the application. The licenses.licx file is a simple text file that contains strong names and version information for each of the licensed components used in the application. Whenever Visual Studio is called upon to rebuild the application resources, this file is read and used as a list of components to query for run-time licenses to be embedded in the appropriate assembly resource. Note that editing or adding an appropriate line to this file can force Visual Studio to add run-time licenses of other controls as well. Note that the licenses.licx file is usually not shown in the Solution Explorer; it appears if you press the Show All Files button in the Solution Explorer's Toolbox, or from Visual Studio's main menu, select Show All Files on the Project menu. Later, when the component is created at run time, it obtains the run-time license from the appropriate assembly resource that was created at design time and can decide whether to simply accept the run-time license, to throw an exception and fail altogether, or to display some information reminding the user that the software has not been licensed. All ComponentOne products are designed to display licensing information if the product is not licensed. None will throw licensing exceptions and prevent applications from running. Common Scenarios The following topics describe some of the licensing scenarios you may encounter. Creating components at design time This is the most common scenario and also the simplest: the user adds one or more controls to the form, the licensing information is stored in the licenses.licx file, and the component works. Note that the mechanism is exactly the same for Windows Forms and Web Forms (ASP.NET) projects. Creating components at run time This is also a fairly common scenario. You do not need an instance of the component on the form, but would like to create one or more instances at run time. In this case, the project will not contain a licenses.licx file (or the file will not contain an appropriate run-time license for the component) and therefore licensing will fail. To fix this problem, add an instance of the component to a form in the project. This will create the licenses.licx file and things will then work as expected. (The component can be removed from the form after the licenses.licx file has been created). Adding an instance of the component to a form, then removing that component, is just a simple way of adding a line with the component strong name to the licenses.licx file. If desired, you can do this manually using notepad or Visual Studio itself by opening the file and adding the text. When Visual Studio recreates the application resources, the component will be queried and its run-time license added to the appropriate assembly resource. 4
  • Inheriting from licensed components If a component that inherits from a licensed component is created, the licensing information to be stored in the form is still needed. This can be done in two ways:  Add a LicenseProvider attribute to the component. This will mark the derived component class as licensed. When the component is added to a form, Visual Studio will create and manage the licenses.licx file, and the base class will handle the licensing process as usual. No additional work is needed. For example: [LicenseProvider(typeof(LicenseProvider))] class MyGrid: C1.Win.C1FlexGrid.C1FlexGrid { // ... }  Add an instance of the base component to the form. This will embed the licensing information into the licenses.licx file as in the previous scenario, and the base component will find it and use it. As before, the extra instance can be deleted after the licenses.licx file has been created. Please note, that C1 licensing will not accept a run-time license for a derived control if the run-time license is embedded in the same assembly as the derived class definition, and the assembly is a DLL. This restriction is necessary to prevent a derived control class assembly from being used in other applications without a design- time license. If you create such an assembly, you will need to take one of the actions previously described create a component at run time. Using licensed components in console applications When building console applications, there are no forms to add components to, and therefore Visual Studio won't create a licenses.licx file. In these cases, create a temporary Windows Forms application and add all the desired licensed components to a form. Then close the Windows Forms application and copy the licenses.licx file into the console application project. Make sure the licenses.licx file is configured as an embedded resource. To do this, right-click the licenses.licx file in the Solution Explorer window and select Properties. In the Properties window, set the Build Action property to Embedded Resource. Using licensed components in Visual C++ applications There is an issue in VC++ 2003 where the licenses.licx is ignored during the build process; therefore, the licensing information is not included in VC++ applications. To fix this problem, extra steps must be taken to compile the licensing resources and link them to the project. Note the following: 1. Build the C++ project as usual. This should create an .exe file and also a licenses.licx file with licensing information in it. 2. Copy the licenses.licx file from the app directory to the target folder (Debug or Release). 3. Copy the C1Lc.exe utility and the licensed .dlls to the target folder. (Don't use the standard lc.exe, it has bugs.) 4. Use C1Lc.exe to compile the licenses.licx file. The command line should look like this: c1lc /target:MyApp.exe /complist:licenses.licx /i:C1.Win.C1FlexGrid.dll 5. Link the licenses into the project. To do this, go back to Visual Studio, right-click the project, select properties, and go to the Linker/Command Line option. Enter the following: /ASSEMBLYRESOURCE:DebugMyApp.exe.licenses 5
  • 6. Rebuild the executable to include the licensing information in the application. Using licensed components with automated testing products Automated testing products that load assemblies dynamically may cause them to display license dialog boxes. This is the expected behavior since the test application typically does not contain the necessary licensing information, and there is no easy way to add it. This can be avoided by adding the string "C1CheckForDesignLicenseAtRuntime" to the AssemblyConfiguration attribute of the assembly that contains or derives from ComponentOne controls. This attribute value directs the ComponentOne controls to use design-time licenses at run time. For example: #if AUTOMATED_TESTING [AssemblyConfiguration("C1CheckForDesignLicenseAtRuntime")] #endif public class MyDerivedControl : C1LicensedControl { // ... } Note that the AssemblyConfiguration string may contain additional text before or after the given string, so the AssemblyConfiguration attribute can be used for other purposes as well. For example: [AssemblyConfiguration("C1CheckForDesignLicenseAtRuntime,BetaVersion")] THIS METHOD SHOULD ONLY BE USED UNDER THE SCENARIO DESCRIBED. It requires a design-time license to be installed on the testing machine. Distributing or installing the license on other computers is a violation of the EULA. Troubleshooting We try very hard to make the licensing mechanism as unobtrusive as possible, but problems may occur for a number of reasons. Below is a description of the most common problems and their solutions. I have a licensed version of a ComponentOne product but I still get the splash screen when I run my project. If this happens, there may be a problem with the licenses.licx file in the project. It either doesn't exist, contains wrong information, or is not configured correctly. First, try a full rebuild (Rebuild All from the Visual Studio Build menu). This will usually rebuild the correct licensing resources. If that fails follow these steps: 1. Open the project and go to the Solution Explorer window. 2. Click the Show All Files button on the top of the window. 3. Find the licenses.licx file and open it. If prompted, continue to open the file. 4. Change the version number of each component to the appropriate value. If the component does not appear in the file, obtain the appropriate data from another licenses.licx file or follow the alternate procedure following. 5. Save the file, then close the licenses.licx tab. 6. Rebuild the project using the Rebuild All option (not just Rebuild). Alternatively, follow these steps: 1. Open the project and go to the Solution Explorer window. 6
  • 2. Click the Show All Files button on the top of the window. 3. Find the licenses.licx file and delete it. 4. Close the project and reopen it. 5. Open the main form and add an instance of each licensed control. 6. Check the Solution Explorer window, there should be a licenses.licx file there. 7. Rebuild the project using the Rebuild All option (not just Rebuild). For ASP.NET 2.x applications, follow these steps: 1. Open the project and go to the Solution Explorer window. 2. Find the licenses.licx file and right-click it. 3. Select the Build Runtime Licenses from its context menu (this will rebuild the App_Licenses.licx file). 4. Rebuild the project using the Rebuild All option (not just Rebuild). I have a licensed version of a ComponentOne product on my Web server but the components still behave as unlicensed. There is no need to install any licenses on machines used as servers and not used for development. The components must be licensed on the development machine, therefore the licensing information will be saved into the executable (.exe or .dll) when the project is built. After that, the application can be deployed on any machine, including Web servers. For ASP.NET 2.x applications, be sure that the App_Licenses.dll assembly created during development of the application is deployed to the bin application bin directory on the Web server. If your ASP.NET application uses WinForms user controls with constituent licensed controls, the runtime license is embedded in the WinForms user control assembly. In this case, you must be sure to rebuild and update the user control whenever the licensed embedded controls are updated. I downloaded a new build of a component that I have purchased, and now I'm getting the splash screen when I build my projects. Make sure that the serial number is still valid. If you licensed the component over a year ago, your subscription may have expired. In this case, you have two options: Option 1 – Renew your subscription to get a new serial number. If you choose this option, you will receive a new serial number that you can use to license the new components (from the installation utility or directly from the About Box). The new subscription will entitle you to a full year of upgrades and to download the latest maintenance builds directly from http://prerelease.componentone.com/. Option 2 – Continue to use the components you have. Subscriptions expire, products do not. You can continue to use the components you received or downloaded while your subscription was valid. Technical Support ComponentOne offers various support options. For a complete list and a description of each, visit the ComponentOne Web site at http://www.componentone.com/Support. Some methods for obtaining technical support include: 7
  •  Online Support via HelpCentral ComponentOne HelpCentral provides customers with a comprehensive set of technical resources in the form of FAQs, samples, Version Release History, Articles, searchable Knowledge Base, searchable Online Help and more. We recommend this as the first place to look for answers to your technical questions.  Online Support via our Incident Submission Form This online support service provides you with direct access to our Technical Support staff via an online incident submission form. When you submit an incident, you'll immediately receive a response via e-mail confirming that you've successfully created an incident. This email will provide you with an Issue Reference ID and will provide you with a set of possible answers to your question from our Knowledgebase. You will receive a response from one of the ComponentOne staff members via e-mail in 2 business days or less.  Peer-to-Peer Product Forums and Newsgroups ComponentOne peer-to-peer product forums and newsgroups are available to exchange information, tips, and techniques regarding ComponentOne products. ComponentOne sponsors these areas as a forum for users to share information. While ComponentOne does not provide direct support in the forums and newsgroups, we periodically monitor them to ensure accuracy of information and provide comments when appropriate. Please note that a ComponentOne User Account is required to participate in the ComponentOne Product Forums.  Installation Issues Registered users can obtain help with problems installing ComponentOne products. Contact technical support by using the online incident submission form or by phone (412.681.4738). Please note that this does not include issues related to distributing a product to end-users in an application.  Documentation ComponentOne documentation is installed with each of our products and is also available online at HelpCentral. If you have suggestions on how we can improve our documentation, please email the Documentation team. Please note that e-mail sent to the Documentation team is for documentation feedback only. Technical Support and Sales issues should be sent directly to their respective departments. Note: You must create a ComponentOne Account and register your product with a valid serial number to obtain support using some of the above methods. Redistributable Files ComponentOne Studio for ASP.NET AJAX is developed and published by ComponentOne LLC. You may use it to develop applications in conjunction with Microsoft Visual Studio or any other programming environment that enables the user to use and integrate the control(s). You may also distribute, free of royalties, the following Redistributable Files with any such application you develop to the extent that they are used separately on a single CPU on the client/workstation side of the network:  C1.Web.UI.2.dll  C1.Web.UI.Controls.2.dll  C1.Web.UI.3.dll  C1.Web.UI.Controls.3.dll Site licenses are available for groups of multiple developers. Please contact Sales@ComponentOne.com for details. About This Documentation Acknowledgements 8
  • Microsoft Visual Studio, Visual Basic, Windows, and Windows Vista are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Firefox is a registered trademark of the Mozilla Foundation. Safari is a trademark of Apple Inc., registered in the U.S. and other countries. ComponentOne If you have any suggestions or ideas for new features or controls, please call us or write: Corporate Headquarters ComponentOne LLC 201 South Highland Avenue 3rd Floor Pittsburgh, PA 15206 • USA 412.681.4343 412.681.4384 (Fax) http://www.componentone.com/ ComponentOne Doc-To-Help This documentation was produced using ComponentOne Doc-To-Help® Enterprise. Namespaces Namespaces organize the objects defined in an assembly. Assemblies can contain multiple namespaces, which can in turn contain other namespaces. Namespaces prevent ambiguity and simplify references when using large groups of objects such as class libraries. The general namespace for ComponentOne Web products is C1.Web.UI.Controls. The following code fragment shows how to declare a C1TreeView (which is one of the core Studio for ASP.NET AJAX classes) using the fully qualified name for this class:  Visual Basic Dim TreeView As C1.Web.UI.Controls.C1TreeView  C# C1.Web.UI.Controls.C1TreeView TreeView; Namespaces address a problem sometimes known as namespace pollution, in which the developer of a class library is hampered by the use of similar names in another library. These conflicts with existing components are sometimes called name collisions. Fully qualified names are object references that are prefixed with the name of the namespace where the object is defined. You can use objects defined in other projects if you create a reference to the class (by choosing Add Reference from the Project menu) and then use the fully qualified name for the object in your code. Fully qualified names prevent naming conflicts because the compiler can always determine which object is being used. However, the names themselves can get long and cumbersome. To get around this, you can use the Imports statement (using in C#) to define an alias — an abbreviated name you can use in place of a fully qualified name. For example, the following code snippet creates aliases for two fully qualified names, and uses these aliases to define two objects:  Visual Basic Imports C1TreeView = C1.Web.UI.Controls.C1TreeView Imports MyTreeView = MyProject.Objects.C1TreeView Dim wm1 As C1TreeView Dim wm2 As MyTreeViewMenu  C# 9
  • using C1TreeView = C1.Web.UI.Controls.C1TreeView; using MyTreeView = MyProject.Objects.C1TreeView; C1TreeView wm1; MyTreeView wm2; If you use the Imports statement without an alias, you can use all the names in that namespace without qualification provided they are unique to the project. Creating an AJAX-Enabled ASP.NET Project ComponentOne Window for ASP.NET AJAX requires you to create an ASP.NET AJAX-Enabled project so that Microsoft ASP.NET AJAX Extensions and a ScriptManager control are included in your project before the C1Window control is placed on the page. This allows you to take advantage of ASP.NET AJAX and certain features such as partial-page rendering and client-script functionality of the Microsoft AJAX Library. When creating AJAX-Enabled ASP.NET projects, Visual Studios 2008 and 2005 both give you the option of creating a Web site project or a Web application project. MSDN provides detailed information on why you would choose one option over the other. If you are using Visual Studio 2008 with .NET Framework 2.0 or .NET Framework 3.0 or if you are using Visual Studio 2005, you must install the ASP.NET AJAX Extensions 1.0, which can be found at http://ajax.asp.net/. Additionally for Visual Studio 2005 users, creating a Web application project requires installation of a Visual Studio 2005 update and add-in, which can be found at http://msdn.microsoft.com/; however, if you have Visual Studio 2005 SP1, Web application project support is included and a separate download is not required. If you are using Visual Studio 2008 and .NET Framework 3.5, you can easily create an AJAX-enabled ASP.NET project without installing separate add-ins because the framework has a built-in AJAX library and controls. Note: If you are using Visual Studio 2010, see http://www.asp.net/ajax/ for more information on creating an AJAX- Enabled ASP.NET Project. The following table summarizes the installations needed: Visual Studio Version Additional Installation Requirements Visual Studio 2008, .NET Framework 3.5 None Visual Studio 2008 and .NET Framework 2.0 or 3.0 ASP.NET AJAX Extensions 1.0 Visual Studio 2005 Service Pack 1 http://www.asp.net/ajax/downloads/archive/ Visual Studio 2005 ASP.NET AJAX Extensions 1.0 Visual Studio update and add-in (2 installs for Web application project support) The following topics explain how to create both types of projects in Visual Studio 2008 and 2005.  Creating an AJAX-Enabled Web Site Project in Visual Studio 2008 To create a Web site project in Visual Studio 2008, complete the following steps: 1. From the File menu, select New | Web Site. The New Web Site dialog box opens. 10
  • 2. Select .NET Framework 3.5 or the desired framework in the upper right corner. Note that if you choose .NET Framework 2.0 or 3.0, you must install the extensions first. 3. In the list of templates, select AJAX 1.0-Enabled ASP.NET 2.0 Web Site. 4. Click Browse to specify a location and then click OK. Note: The Web server must have IIS version 6 or later and the .NET Framework installed on it. If you have IIS on your computer, you can specify http://localhost for the server. A new AJAX-Enabled Web Site is created at the root of the Web server you specified. In addition, a new Web Forms page called Default.aspx is displayed and a ScriptManager control is placed on the form. The ScriptManger is needed to enable certain features of ASP.NET AJAX such as partial-page rendering, client-script functionality of the Microsoft AJAX Library, and Web-service calls.  Creating an AJAX-Enabled Web Application Project in Visual Studio 2008 To create a new Web application project in Visual Studio 2008, complete the following steps. 1. From the File menu, select New | Project. The New Project dialog box opens. 2. Select .NET Framework 3.5 or the desired framework in the upper right corner. Note that if you choose .NET Framework 2.0 or 3.0, you must install the extensions first. 3. Under Project Types, choose either Visual Basic or Visual C# and then select Web. Note that one of these options may be located under Other Languages. 4. Select AJAX 1.0-Enabled ASP.NET 2.0 Web Application from the list of Templates in the right pane. 5. Enter a URL for your application in the Location field and click OK. Note: The Web server must have IIS version 6 or later and the .NET Framework installed on it. If you have IIS on your computer, you can specify http://localhost for the server. A new Web Forms project is created at the root of the Web server you specified. In addition, a new Web Forms page called Default.aspx is displayed and a ScriptManager control is placed on the form. The ScriptManger is needed to enable certain features of ASP.NET AJAX such as partial-page rendering, client-script functionality of the Microsoft AJAX Library, and Web-service calls.  Creating an AJAX-Enabled Web Site Project in Visual Studio 2005 To create a Web site project in Visual Studio 2005, complete the following steps: 1. From the File menu in Microsoft Visual Studio .NET, select New Web Site. The New Web Site dialog box opens. 2. Select ASP.NET AJAX-Enabled Web Site from the list of Templates. 3. Enter a URL for your site in the Location field and click OK. Note: The Web server must have IIS version 6 or later and the .NET Framework installed on it. If you have IIS on your computer, you can specify http://localhost for the server. 11
  • A new Web Forms project is created at the root of the Web server you specified. In addition, a new Web Forms page called Default.aspx is displayed and a ScriptManager control is placed on the form. The ScriptManger is needed to enable certain features of ASP.NET AJAX such as partial-page rendering, client-script functionality of the Microsoft AJAX Library, and Web-service calls.  Creating an AJAX-Enabled Web Application Project in Visual Studio 2005 To create a new Web application project in Visual Studio 2005, complete the following steps. 1. From the File menu in Microsoft Visual Studio 2005, select New Project. The New Project dialog box opens. 2. Under Project Types, choose either Visual Basic Projects or Visual C# Projects. Note that one of these options may be located under Other Languages. 3. Select ASP.NET AJAX-Enabled Web Application from the list of Templates in the right pane. 4. Enter a URL for your application in the Location field and click OK. Note: The Web server must have IIS version 6 or later and the .NET Framework installed on it. If you have IIS on your computer, you can specify http://localhost for the server. A new Web Forms project is created at the root of the Web server you specified. In addition, a new Web Forms page called Default.aspx is displayed and a ScriptManager control is placed on the form. The ScriptManger is needed to enable certain features of ASP.NET AJAX such as partial-page rendering, client-script functionality of the Microsoft AJAX Library, and Web-service calls. Adding the C1Window Component to a Project When you install ComponentOne Studio for ASP.NET AJAX, the Create a ComponentOne Visual Studio 20052008 Toolbox Tab checkbox is checked, by default, in the installation wizard. When you open Visual Studio, you will notice a ComponentOne Studio for ASP.NET AJAX tab containing the ComponentOne controls has automatically been added to the Toolbox. If you decide to uncheck the Create a ComponentOne Visual Studio 20052008 Toolbox Tab checkbox during installation, you can manually add ComponentOne controls to the Toolbox at a later time. To use C1Window, add the C1Window control to the form or add a reference to the C1.Web.UI.Controls.2 assembly in your project. Manually Adding C1Window to the Toolbox When you install C1Window, the C1Window component will appear in the Visual Studio Toolbox customization dialog box. To manually add the C1Window control to the Visual Studio Toolbox: 1. Open the Visual Studio IDE (Microsoft Development Environment). Make sure the Toolbox is visible (select Toolbox in the View menu if necessary) and right-click it to open the context menu. 2. To make the C1Window control appear on its own tab in the Toolbox, select Add Tab from the context menu and type in the tab name, C1Window, for example. 12
  • 3. Right-click the tab where the component is to appear and select Choose Items from the context menu. The Choose Toolbox Items dialog box opens. In the dialog box, select the .NET Framework Components tab. Sort the list by Namespace (click the Namespace column header) and select the check boxes for the component belonging to the namespace C1.Web.UI.Controls. Note that there may be more than one component for each namespace. Adding C1Window to the Form To add C1Window to a form: 1. Add C1Window to the Visual Studio Toolbox. 2. Double-click on C1Window or drag the control onto your form. Note: Window for ASP.NET AJAX requires Microsoft ASP.NET AJAX Extensions installed and a ScriptManager on the page before the C1Window control is placed on the page. For more information about Microsoft ASP.NET AJAX Extensions, see http://ajax.asp.net/. For information about the ScriptManager, see MSDN. You must create an ASP.NET AJAX-Enabled Project so that the ScriptManager and Microsoft AJAX Extensions are included on the page. For more information, see Creating an AJAX-Enabled ASP.NET Project (page 10). Adding a Reference to the Assembly To add a reference to the Window for ASP.NET AJAX assembly: 1. Select the Add Reference option from the Website menu of your Web Site project or from the Project menu of your Web Application project. 2. Select the ComponentOne Window assembly from the list on the .NET tab or browse to find the C1.Web.UL.Controls.2.dll file and click OK. 3. Double-click the form caption area to open the code window. At the top of the file, add the following Imports statements (using in C#): Imports C1.Web.UI.C1Window Note: This makes the objects defined in the Window for ASP.NET AJAX assembly visible to the project. See Namespaces (page 9) for more information. 13
  • Key Features The C1Window control is a special type of dialog window that can be created on the client-side or server-side to display information and receive input from the user. You can use C1Window to create modal or modeless dialog windows by calling either the ShowModal() or Show() methods. Dialog windows can be used to:  Prompt users for additional information when using items that require user input.  Retrieve input for an application.  Display information or options relative to the application while the user works in another window. Note: C1Window requires Microsoft ASP.NET AJAX Extensions installed and a ScriptManager on the page before the C1Window control is placed on the page. You must create an ASP.NET AJAX-Enabled Project so that the ScriptManager and Microsoft AJAX Extensions are included on the page. For more information, see Creating an AJAX-Enabled ASP.NET Project (page 10). For more information about Microsoft ASP.NET AJAX Extensions, see http://ajax.asp.net/. For information about the ScriptManager, see MSDN. Feature Overview C1Window provides several unique features including, a rich object model, Modal and Modeless Dialog windows, Partial Page Rendering, style properties, built-in themes, template support, HTML content, external content, window positioning, minimizing options, movable dialog windows, and resizable dialog windows.  Rich Object Model C1Window has a very rich client-side object model since it is almost identical to the object model in the server-side control. This allows you to access any property or method of C1Window when you are using client-side code. For more information on Window for ASP.NET AJAX's client-side object model, see Working with Client-Side Script (page 53).  Modal and Modeless Dialog Windows To support the different ways applications use dialog boxes, C1Window provides two different types of dialog windows: Modal and Modeless dialog windows. A modal dialog window is a child window that must be closed before the user can continue working on the current application. A modeless dialog window enables users to interact with other windows while the dialog window is present. For more information on these types of dialog windows see, Modal and Modeless Dialog Windows (page 26).  Partial-Page Rendering C1Window supports the Partial Page Rendering (PPR) technology which enables partial page updates without the need to use custom JavaScript code. PPR allows a portion of a page to be updated rather than reloading the entire page. This improves application performance and provides more direct feedback when users perform actions. For more information on this feature, see Partial Rendering (page 51).  Special Appearance Style Properties C1Window provides unique property styles for its caption bar and content elements. For more information on this feature see Styles (page 33).  Built-in Themes C1Window provides several built-in themes, including Vista and Office 2007 themes, that can be easily applied. For more information on this feature, see Visual Styles (page 31). 14
  •  Template Support You can add templates to the content area of the dialog window through the ContentTemplate property. Dynamic Templates can be used in the content area of the dialog window for achieving rich presentation of the dialog window. For more information on templates, see Content and Status Bar Templates (page 47).  Spinner when loading content The C1Window control includes a spinner element that indicates when content is loading. You can customize this image using styles. For more information, see Setting the Loading Image (page 77).  Custom HTML as content You can use custom HTML content in the dialog window and apply JavaScript to get an action from the user's input. For more information on how to do this see, Adding Custom HTML Content in the Content Area (page 63).  External content You can show external content in the dialog window using the ContentUrl property. See the topic Showing External Content in the Content Area (page 59) for more information.  Window Positioning You can specify the window's relative position or specific location. When you select manual positioning you can use the (x, y) coordinates to specify start position by x and y. For more information, see the topic Window Positioning and Sizing (page 48).  Window Pinning 15
  • You can specify if a dialog window is 'pinned' to the Web page and so moved when the page is scrolled. If the PinButton is Visible, end users can choose to pin and unpin the dialog window with the click of a button.  Window Expanding and Collapsing You can specify if users can expand and collapse the dialog window. If the CollapseExpandButton is Visible, end users can choose to collapse and expand the body of the dialog window with the click of a button.  Window Animation Window for ASP.NET AJAX provides over 20 animation effects allowing you to create a dynamic, engaging experience for your end users.  Minimize the dialog window on a task bar You can minimize the dialog window on a task bar by enabling the MinimizeZoneElementId property. For more information on this feature, see Using the MinimizeZoneElementId property (page 85).  Moveable Dialog Windows The dialog window can be dragged anywhere on the page by enabling the AllowMove property. For more information, see the topic Window Positioning and Sizing (page 48).  Resizable Dialog Windows You can resize the dialog window by enabling the AllowResize property. To resize the window position your cursor in the bottom-right corner of the window and then drag it to increase or decrease the size of the window. For more information on this feature, see Window Positioning and Sizing (page 48).  CSS Styling Window for ASP.NET AJAX includes CSS supported styling so that you can use cascading style sheets to easily style the C1Window control to match the design of your current Web site.  Browser Support Window for ASP.NET AJAX includes support for the Internet Explorer (6.0 or later), Firefox (2 or later), and Safari Web browsers.  XHTML Compliant Window for ASP.NET AJAX provides complete XHTML compliance. The output that is generated is fully XHTML 1.1 compliant. 16
  • Window for ASP.NET AJAX Quick Start This quick start describes how to get started with Window for ASP.NET AJAX. In the quick start you'll create an ASP.NET AJAX-Enabled Web Site, add a modeless (page 27) C1Window dialog window to the page, change the appearance and behavior of the dialog window, and observe the dialog window's run-time behavior. Step 1 of 4: Add C1Window to the Page In this step you'll create a new ASP.NET AJAX-Enabled Web Site and add a Window for ASP.NET AJAX dialog window to your project. To begin the Quick Start, complete the following steps: 1. Begin by creating a new ASP.NET AJAX-Enabled Web Site. For more information, see Creating an AJAX-Enabled ASP.NET Project (page 10). Note that as you've created an AJAX-Enabled Web site, a ScriptManager control initially appears on the page. 2. While in Design view navigate to the Visual Studio Toolbox and double-click the Hyperlink and C1Window icons to add the Hyperlink and C1Window controls to your page. The page will appear similar to the following: 3. Select Hyperlink1, navigate to the Properties window, and set the Text property of the control to "Click Me!". Later you'll add code and script to your project so that clicking on the Hyperlink opens the C1Window dialog window. You've completed creating a new project and adding a C1Window dialog window to your project. In the next step you'll customize the dialog window's appearance and behavior. 17
  • Step 2 of 4: Customize the Dialog Window In this step you'll change the appearance and behavior of the dialog window you created in the last step. Complete the following steps to customize your Window for ASP.NET AJAX dialog window: 1. Select the C1Window smart tag to open the C1Window Tasks menu and select the Visual Style drop- down box to change the appearance of the dialog window. 2. Select Vista to apply the to apply the Microsoft Vista style to the C1Window dialog window. 3. Click once on the C1Window control to select it and set the following properties in the Properties window:  Set the Text property to "I just wanted to say..." to set the caption bar title.  Set the Height to 200 to increase the size of the dialog window.  Set StartPosition to Manual to manually specify where the dialog window will appear.  Set Y to 30 so the dialog window will appear below the hyperlink. 4. Click once in the Content Area (page 27) of the dialog window and type "Hello World!" to add text content to your dialog window. It should now appear similar to the following: You've completed step 2 of the Window for ASP.NET AJAX quick start guide. In the next step you'll add code and JavaScript to your project. 18
  • Step 3 of 4: Add Code and Script to the Project In the last steps you set up your project and a Window for ASP.NET AJAX dialog window. In this step you'll add code and JavaScript to your project to complete the project before running. 1. Switch to Source view and add the following JavaScript in just after the hyperlink tag to get and show a modeless dialog window: <script type="text/javascript"> var form_dialog; function openWindow(dialog) { form_dialog = dialog.control; form_dialog.show(); } </script> For more information about modal and modeless dialog windows, see Modal and Modeless Dialog Windows (page 26). 2. Return to Design view and double-click on the Web page to switch to Code view and open the Page_Load event. 3. Add the following code to the Page_Load event to initialize the Hyperlink control:  Visual Basic ' Set the open dialog window handler. HyperLink1.NavigateUrl = String.Format("javascript:openWindow({0});", C1Window1.ClientID)  C# // Set the open dialog window handler. HyperLink1.NavigateUrl = String.Format("javascript:openWindow({0});", C1Window1.ClientID); You've completed step 3 of the Window for ASP.NET AJAX quick start guide. In the next step you'll run the project. Step 4 of 4: Run your Application Now that you've customized your dialog window and added code and JavaScript to your project, the only thing left to do is to run your application and observe some of the run-time functionality of the C1Window dialog window. Complete the following steps: 1. Click the Click Me hyperlink. The dialog window will appear in the Web page. 19
  • 2. Move the dialog window on the Web page by clicking on the dialog window's header and performing a drag-and-drop operation. 3. Resize the dialog window by clicking on the dialog window's bottom right corner and performing a drag and drop operation. 4. Minimize the dialog window by clicking the dialog window's Minimize button. 20
  • The dialog window will minimize to the bottom of the Web page. 5. Close the dialog window by clicking the Close button. Congratulations, you've created and customized a C1Window dialog window control and completed the Window for ASP.NET AJAX Quick Start guide! 21
  • Window for ASP.NET AJAX Top Tips The following tips were compiled from frequently asked user questions posted in the ComponentOne Studio for ASP.NET AJAX’s online forum. Tip 1: Showing and hiding he window from postback When a postback is raised from within a C1Window, you want to hide the window immediately after handling the postback. Two UpdatePanels, namely Content and Status Panel, are embedded in C1Window. As a result, any postback raised within is an asynchronous one. So to hide the C1Window immediately after the postback you could use ScriptManager in the handler method to register some scripts after the postback is finished. For example:  C# protected void Button1_Click(object sender, EventArgs e) { // other operation … // close window after content is updated string clientID = C1Window1.ClientID; ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "scriptKey", string.Format("$find('{0}').hide()", clientID), true); } Tip 2: Centering the window on the page To center a C1Window control on the page, you could set properties as in the following example:  C# protected void Page_Load(object sender, EventArgs e) { C1Window1.StartPosition = C1WindowPosition.Page; C1Window1.HorizontalAlign = HorizontalPosition.Center; C1Window1.VerticalAlign = VerticalPosition.Middle; } Tip 3: Embedding a external page in the window To embed an external page in C1Window, you could set the ContentUrl property. For example:  C# protected void Page_Load(object sender, EventArgs e) { C1Window1.ContentUrl = "http://www.msn.com"; } If you already have content in the content template of C1Window you could switch between the frame and content view by using the setUpdatePanel and setUrl client-side methods. The client side reload method could be used to refresh the external page. Tip 4: Setting the caption bar icon You can add and customize the icon that appears in the C1Window caption bar. For example, the following code sets and the image and image size:  C# protected void Page_Load(object sender, EventArgs e) { // set icon to visible 23
  • C1Window1.CaptionButtons.Icon.Visible = true; // set icon path C1Window1.ImageUrl = "~/Images/copy.gif"; // set icon size C1Window1.ImageHeight = 15; C1Window1.ImageWidth = 15; } Tip 5: Setting window resizing options The resizing behavior of C1Window can be changed by setting children properties in ResizeSettings. For example, by default C1Window resizes with a resizing proxy. You can change the behavior by setting resizing properties with the following code:  C# protected void Page_Load(object sender, EventArgs e) { // no proxy C1Window1.ResizeSettings.UseHelper = false; // set minimum height and width of C1Window C1Window1.ResizeSettings.MinHeight = 100; C1Window1.ResizeSettings.MinWidth = 300; } Tip 6: Hiding the window on pressing ESC button C1Window can be closed when the user presses ESC button at run time. You can implement this option by setting the OnEscPressedClose property to True:  C# protected void Page_Load(object sender, EventArgs e) { C1Window1.OnEscPressedClose = true; } 24
  • Design-Time Support Window for ASP.NET AJAX includes customized context menus, smart tags, and rich design-time support that simplify working with the object model. The following sections describe how to use the Window for ASP.NET AJAX design-time environment, particularly the C1Window Tasks menu accessible from the C1Window smart tag (page 25) and context menu (page 26), to configure the C1Window control. C1Window Smart Tag In Visual Studio 2005 and 2008, the C1Window control includes a smart tag. A smart tag represents a short- cut tasks menu that provides the most commonly used properties in each component/command. To access the C1Window Tasks menu, click on the Smart Tag ( ) in the upper right corner of the C1Window control. This will open the C1Window Tasks menu. The C1Window Tasks menu operates as follows:  ShowOnLoad When the ShowOnLoad check box is checked, the ShowOnLoad property is set to True and the dialog window will appear on the page on load. By default the ShowOnLoad check box is not checked and the ShowOnLoad property is set to False.  VisualStylePath The VisualStylePath property specifies the location of the visual styles used for the control. By default, embedded visual styles are located in ~/C1WebControls/VisualStyles. If you create a custom style, add it to this location ~/VisualStyles/StyleName/C1Window/styles.css, set the VisualStylePath property to ~/VisualStyles, and set the VisualStyle property to StyleName (assuming that StyleName is the name used to define the style in the style.css file). Uncheck the UseEmbeddedVisualStyles property.  UseEmbeddedVisualStyles This check box is checked by default so that the internal visual styles, such as ArcticFox and Vista can be used. If you want to use your own custom styles, uncheck this check box and specify the location of your visual styles using the VisualStylePath property.  Visual Style Clicking the Visual Style drop-down box allows you to select from various built-in visual schemes. For more information about available visual styles, see Visual Styles (page 31). 25
  •  About Clicking About displays the C1Window control's About dialog box, which is helpful in finding the build number of the control along with licensing, registration and purchasing information, and additional online resources. C1Window Context Menu The C1Window control has additional commands with the context menu that Visual Studio provides for all .NET controls. To access the C1Window context menu, right-click anywhere on the C1Window control. This will open the C1Window context menu. The C1Window context menu includes the following custom commands added by C1Window:  Show Smart Tag Shows the smart tag for the C1Window control. For more information on how to use the smart tag and available features, see C1Window Smart Tag (page 25). Modal and Modeless Dialog Windows Dialog boxes are commonly used in applications to retrieve input from the user. In some applications a dialog box is used to prompt the user for input and once the application retrieves the input the dialog box is automatically closed or destroyed. On the other hand, some applications use dialog boxes to display information while the user works in other windows. For example, when you check spelling in Microsoft Word a dialog box remains open so you can go through and edit your text in the document while the spell checker looks for the next misspelled word. To support the different ways applications use dialog boxes, C1Window supports two different types of dialog windows: modal (page 27) and modeless (page 27) dialog windows. 26
  • Modal Dialog Windows A modal dialog window is a child window that must be closed before the user can continue working on the current application. Typically modal dialog windows either take control of the entire system or application displaying them until they are closed. For example, you can use a modal dialog window to retrieve login information from a user before the user can continue working on an application. To show a modal dialog window in JavaScript use the ShowModal() method. Modal windows are useful in presenting important information or requiring user interaction. To add a modal dialog window programmatically, see Creating a Modal Dialog Window in Code (page 89). Modeless Dialog Windows A modeless dialog window enables users to interact with other windows while the dialog window is present. Use this type of dialog window when the requested information is not necessary to continue. Modeless dialog windows do not keep the input focus so you can work on two applications at once. Show a modeless dialog window in JavaScript using the Show() method. A modeless dialog window is commonly used in menus and help systems where the user can use the dialog window and the application window concurrently. For example, a toolbar is a modeless dialog window because it can be detached from the application and the user can select items in the toolbar to apply features to the detached or separated application. To add a modeless dialog window programmatically, see Creating a Modeless Dialog Window in Code (page 87). C1Window Elements This section provides a visual and descriptive overview of the elements that comprise the C1Window control. The topics are categorized into the three distinct elements, the content element, the caption bar element, and the status bar element that represent different aspects of the dialog window control. Content Element The main part of the C1Window control is the content area. In the content area you can add rich text through custom HTML content, URL links through its ContentUrl property, and add arbitrary controls through its content template. Elements in the content area of the control can be added and moved on the control through a simple drag-and-drop operation. C1Window includes the following properties to make it simple to add and customize any type of item such as text, images, arbitrary controls, and links to the content area:  ContentTemplate  ContentUrl The following image labels the content area in the C1Window control: 27
  • You can use a style sheet to apply unique styles to the content in the C1Window control. For more information on the available styles, see Content Styles (page 33). You can enter text in the content area of the dialog window at design time. When you enter text into the content area, C1Window adds a <ContentTemplate> tag inside the <cc1:C1Window> tag like the following: <cc1:C1Window ID="C1Window1" runat="server" AllowResize="True" Height="150px" VisualStylePath="~/C1WebControls/VisualStyles" Width="300px" X="0" Y="0"> <ContentTemplate> This is where the content information is placed. </ContentTemplate> ... </cc1:C1Window> For more information about creating a content template, see the topic Creating a Content Template (page 61). You can use the ContentUrl property to set external content to appear in the dialog window. For more information, see Showing External Content in the Content Area (page 59). Caption Bar Element The caption bar appears at the top of the C1Window dialog window, and appears similar to a traditional dialog box with a few differences. From left to right the caption bar includes an icon, title text, and several buttons. It has optional pin, reload, collapse/expand, minimize, maximize, and close buttons that appear on the right side of the caption bar when you enable the PinButton, ReloadButton, CollapseExpandButton, MinimizeButton, MaximizeButton, and CloseButton buttons. By default, the Visible property of the pin, reload, collapse/expand, minimize, maximize, and close buttons is set to True; for information about hiding these buttons see Hiding Caption Bar Buttons (page 72). You can set the icon using the Icon property and you can specify text for the title on the caption bar by setting the string for the Text property. The following diagram labels the properties that appear on the caption bar: 28
  • The following table describes each of the elements on the caption bar: Element Description Icon An image shown on the left side of the C1Window dialog window title area. By default Icon is Visible. Text Gets or sets text which dispayed on the caption bar of the C1Window dialog window. By default Text is blank. PinButton Button that pins and unpins the C1Window dialog window. By default PinButton is not Visible. ReloadButton Button that reloads the C1Window dialog window content set by the ContentUrl property. By default is not Visible. CollapseExpandButton Button that collapses or expands the C1Window dialog window. By default CollapseExpandButton is not Visible. MinimizeButton Button that minimizes the C1Window dialog window. By default MinimizeButton is Visible. MaximizeButton Button that resizes the C1Window dialog window to fit all available space in the browser window. By default MaximizeButton is Visible. CloseButton Button that closes the C1Window dialog window. By default CloseButton is Visible. RestoreButton Button that is shown instead of the MinimizeButton button or the MaximizeButton button of C1Window dialog window when the window is minimized or maximized. Clicking this button restores the window to the previous size. For more information on how to change the caption bar's appearance, see Customizing the Caption Bar (page 72). 29
  • Status Bar Element The status bar appears at the bottom of the C1Window dialog window when the StatusVisible property is set to True. By default StatusVisible is set to False and the status bar is not visible. You can use the status bar element to present information and updates as you would in a traditional WinForms dialog box. You can also use the status bar to provide a page loading indicator. The following diagram labels the status bar element: C1Window includes the following properties to make it simple to add and customize content in the status area:  StatusVisible  StatusTemplate To show the status bar use the StatusVisible property. For details see, Showing the Status Bar (page 75). You can enter text in the status bar area of the dialog window at design time. When you enter text into the status bar area, C1Window adds a <StatusTemplate> tag inside the <cc1:C1Window> tag like the following: <cc1:C1Window ID="C1Window1" runat="server" AllowResize="True" Height="150px" VisualStylePath="~/C1WebControls/VisualStyles" Width="300px" X="0" Y="0"> <StatusTemplate> This is where the status bar content is placed. </StatusTemplate> ... </cc1:C1Window> The status bar includes a page loading image that appears in the lower left corner, and by default is set to a spinner image: 30
  • The location and appearance of this image varies depending on the theme used. For example in the ArcticFox theme the loading image appears on the left side of the status bar. You can customize this loading image with your own animated graphic. See the Setting the Loading Image (page 77) topic for information. You can add a style sheet to style the status bar's appearance. See Customizing the Status Bar (page 75) for more information. Window for ASP.NET AJAX Appearance C1Window is designed to make customization easy for you. The possibilities are endless when it comes to changing your C1Window dialog window's appearance. C1Window provides several styles for its caption bar, content area, and status bar elements and built-in themes, including those for Office 2007. In addition to the property styles for each dialog window element, C1Window provides full support for CSS styles so you can further customize each dialog window element through CSS styles. For more information on the property styles, see Styles (page 33). Visual Styles C1Window provides several built-in themes that can be easily applied. Changing the Visual Style You can change the Visual Style from the designer in one of two ways:  Click VisualStyle in the C1Window Tasks menu. See C1Window Smart Tag (page 25) for more information.  Click the drop-down arrow next to VisualStyle in the C1Window control's Properties window. 31
  • Available Themes The following predefined schemes are available for C1Window: Visual Styles Preview ArcticFox (default) Office2007Black Office2007Blue 32
  • Office2007Silver Vista Styles The C1Window control provides CSS properties so you can further customize the C1Window control's elements through CSS styles. By using CSS you can flawlessly integrate your dialog window into your new or existing Web site. Included styles include content, caption bar, and status bar styles. Note: The ContentStyle, CaptionStyle, and StatusStyle properties available in the former C1WebDialog control have been replaced with CSS element styling. For more information, see the following topics. Style Property Description Example (ArcticFox theme) [None] The base style. In the example this .C1Window_ArcticFox is used to dock the window horizontally. { float:left; } .C1Invisible Sets invisible items. .C1Window_ArcticFox .C1Invisible { display:none; } Content Styles The C1Window control includes several CSS elements that allow you to customize the appearance of the dialog window's content. These elements include the following: Style Property Description Example (ArcticFox theme) .C1ContentPanel Sets the outer border for when the .C1Window_ArcticFox .C1ContentPanel .C1Outer control is not in focus. .C1Outer 33
  • { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. content_left_unfocused.gif")%>') repeat-y scroll left top; padding-left:5px; } .C1ContentPanel Sets the inner border for when the .C1Window_ArcticFox .C1ContentPanel .C1Inner control is not in focus. .C1Inner { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. content_right_unfocused.gif")%>') repeat-y scroll right top; padding-right:5px; } .C1ContentPanel Sets the content background style. .C1Window_ArcticFox .C1ContentPanel .C1Content .C1Content { background:#FFFFFF; } .C1ContentPanel Sets the content template style. .C1Window_ArcticFox .C1ContentPanel .C1ContentTemplate .C1ContentTemplate { font-size:12px; } .C1Focus Sets the outer border for when the .C1Window_ArcticFox .C1Focus .C1ContentPanel control is in focus. .C1ContentPanel .C1Outer .C1Outer { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. content_left.gif")%>') repeat-y scroll left top; padding-left:5px; } .C1Focus Sets the inner border for when the .C1Window_ArcticFox .C1Focus .C1ContentPanel control is in focus. .C1ContentPanel .C1Inner .C1Inner { 34
  • background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. content_right.gif")%>') repeat-y scroll right top; padding-right:5px; } .C1Maximized Sets the outer border for when the .C1Window_ArcticFox .C1Maximized .C1ContentPanel control is maximized. .C1ContentPanel .C1Outer .C1Outer { background-image: none; padding-left:0px; } .C1Maximized Sets the inner border for when the .C1Window_ArcticFox .C1Maximized .C1ContentPanel control is not maximized. .C1ContentPanel .C1Inner .C1Inner { background-image: none; padding-right:0px; } Caption Bar Styles The C1Window control includes several CSS elements that allow you to customize the appearance of the dialog window's caption bar, including buttons and text. These elements include the following: Style Property Description Example (ArcticFox theme) .C1Heading .C1Outer Sets the outer heading border for .C1Window_ArcticFox .C1Heading when the control is not in focus. .C1Outer { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. title_left_unfocused.gif")%>') no- repeat scroll left top; padding-left: 5px; overflow:hidden; } .C1Heading .C1Inner Sets the inner heading border for .C1Window_ArcticFox .C1Heading when the control is not in focus. .C1Inner { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 35
  • Window.VisualStyles.ArcticFox.Images. title_right_unfocused.gif")%>') no- repeat scroll right top; padding-right:5px; } .C1Heading Sets the heading's content style. .C1Window_ArcticFox .C1Heading .C1Content .C1Content { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. title_center_unfocused.gif")%>') repeat-x scroll left top; padding: 0px 0px 0px 0px; height: 30px; } .C1Focus .C1Heading Sets the outer heading border for .C1Window_ArcticFox .C1Focus .C1Outer when the control is in focus. .C1Heading .C1Outer { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. title_left.gif")%>') no-repeat scroll left top; } .C1Focus .C1Heading Sets the inner heading border for .C1Window_ArcticFox .C1Focus .C1Inner when the control is in focus. .C1Heading .C1Inner { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. title_right.gif")%>') no-repeat scroll right top; } .C1Focus .C1Heading Sets the heading's content style .C1Window_ArcticFox .C1Focus .C1Content when the control is in focus. .C1Heading .C1Content { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. title_center.gif")%>') repeat-x scroll left top; } .C1Focus- Sets the outer heading border for .C1Window_ArcticFox .C1Focus- C1Maximized when the control is in focus and 36
  • .C1Heading .C1Outer maximized. C1Maximized .C1Heading .C1Outer { background-image: none; padding-left:0px; } .C1Focus- Sets the inner heading border for .C1Window_ArcticFox .C1Focus- C1Maximized when the control is in focus and C1Maximized .C1Heading .C1Inner .C1Heading .C1Inner maximized. { background-image: none; padding-right:0px; } .C1Focus- Sets the heading's content style .C1Window_ArcticFox .C1Focus- C1Maximized when the control is in focus and C1Maximized .C1Heading .C1Content .C1Heading maximized. .C1Content { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. title_center_maximize.gif")%>') repeat-x scroll left top; } .C1Heading Sets the heading's text node style .C1Window_ArcticFox .C1Heading .C1TextNode when the control is not in focus. .C1TextNode { font-family: System; font-size: 12px; color: #000000; -moz-user-select: none; -khtml-user-select: none; user-select: none; line-height:30px; padding-left:2px; } .C1Focus .C1Heading Sets the heading's content style .C1Window_ArcticFox .C1Focus .C1TextNode when the control is in focus. .C1Heading .C1TextNode { color:#767676; } 37
  • .C1Focus- Sets the heading's content style .C1Window_ArcticFox .C1Focus- C1Maximized when the control is in focus and C1Maximized .C1Heading .C1TextNode .C1Heading maximized. .C1TextNode { color: #FFFFFF; } .C1Heading .C1Icon Sets the heading's icon image. .C1Window_ArcticFox .C1Heading .C1Icon { float:left; display:none; } .C1Heading .C1List Sets the heading's button styles. .C1Window_ArcticFox .C1Heading .C1ListItem .C1List .C1ListItem { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. Tool-Sprites.gif")%>') no-repeat scroll left top; cursor:pointer; float:left; overflow:hidden; height: 16px; width: 18px; margin-left:1px; } .C1Heading Sets the heading's button styles. .C1Window_ArcticFox .C1Heading .C1ControlBox .C1ControlBox { float:right; padding-top:7px; } .C1Heading .C1List Sets the heading's Close button .C1Window_ArcticFox .C1Heading .C1Closer styles when the control is not in .C1List .C1Closer focus. { background-position: 0px 0px; } 38
  • .C1Focus .C1Heading Sets the heading's Close button .C1Window_ArcticFox .C1Focus .C1List .C1Closer styles when the control is in focus. .C1Heading .C1List .C1Closer { background-position: -18px 0px; } .C1Focus .C1Heading Sets the heading's Close button .C1Window_ArcticFox .C1Focus .C1List .C1Closer- styles when the control is in focus .C1Heading .C1List .C1Closer-C1Hover, C1Hover and the button is hovered over. .C1Window_ArcticFox .C1Heading .C1Heading .C1List Sets the heading's Close button .C1List .C1Closer-C1Hover .C1Closer-C1Hover styles when the control is not in focus and the button is hovered { over. background-position:-36px 0px; } .C1Focus .C1Heading Sets the heading's Close button .C1Window_ArcticFox .C1Focus .C1List .C1Closer- styles when the control is in focus .C1Heading .C1List .C1Closer-C1Active, C1Active and the button is active. .C1Window_ArcticFox .C1Heading .C1Heading .C1List Sets the heading's Close button .C1List .C1Closer-C1Active .C1Closer-C1Active styles when the control is not in focus and the button is active. { background-position:-54px 0px; } .C1Heading .C1List Sets the heading's Maximize button .C1Window_ArcticFox .C1Heading .C1Maximizer styles when the control is not in .C1List .C1Maximizer focus. { background-position : 0px -25px; } .C1Focus .C1Heading Sets the heading's Maximize button .C1Window_ArcticFox .C1Focus .C1List .C1Maximizer styles when the control is in focus. .C1Heading .C1List .C1Maximizer { background-position : -18px -25px; } .C1Focus .C1Heading Sets the heading's Maximize button .C1Window_ArcticFox .C1Focus .C1List styles when the control is in focus .C1Heading .C1List .C1Maximizer- .C1Maximizer- and the button is hovered over. C1Hover, C1Hover .C1Window_ArcticFox .C1Heading .C1Heading .C1List Sets the heading's Maximize button .C1List .C1Maximizer-C1Hover .C1Maximizer- styles when the control is not in C1Hover focus and the button is hovered { over. background-position: -36px -25px; } .C1Focus .C1Heading Sets the heading's Maximize button .C1Window_ArcticFox .C1Focus 39
  • .C1List styles when the control is in focus .C1Heading .C1List .C1Maximizer- .C1Maximizer- and the button is active. C1Active, C1Active .C1Window_ArcticFox .C1Heading .C1Heading .C1List Sets the heading's Maximize button .C1List .C1Maximizer-C1Active .C1Maximizer- styles when the control is not in C1Active focus and the button is active. { background-position: -54px -25px; } .C1Maximized Sets the heading's Maximized button .C1Window_ArcticFox .C1Maximized .C1Heading .C1List styles when the control is maximized .C1Heading .C1List .C1Maximizer .C1Maximizer and not in focus. { background-position: 0px -50px; } .C1Focus- Sets the heading's Maximized button .C1Window_ArcticFox .C1Focus- C1Maximized styles when the control is maximized C1Maximized .C1Heading .C1List .C1Heading .C1List and in focus. .C1Maximizer .C1Maximizer { background-position: -18px -50px; } .C1Focus- Sets the heading's Maximized button .C1Window_ArcticFox .C1Focus- C1Maximized styles when the control is maximized C1Maximized .C1Heading .C1List .C1Heading .C1List and in focus and the button is .C1Maximizer-C1Hover, .C1Maximizer- hovered over. C1Hover .C1Window_ArcticFox .C1Maximized .C1Heading .C1List .C1Maximizer- .C1Maximized Sets the heading's Maximized button C1Hover .C1Heading .C1List styles when the control is maximized .C1Maximizer- and not in focus and the button is { C1Hover hovered over. background-position: -36px -50px; } .C1Focus- Sets the heading's Maximized button .C1Window_ArcticFox .C1Focus- C1Maximized styles when the control is maximized C1Maximized .C1Heading .C1List .C1Heading .C1List and in focus and the button is active. .C1Maximizer-C1Active, .C1Maximizer- C1Active .C1Window_ArcticFox .C1Maximized .C1Heading .C1List .C1Maximizer- .C1Maximized Sets the heading's Maximized button C1Active .C1Heading .C1List styles when the control is maximized .C1Maximizer- and not in focus and the button is { C1Active active. background-position: -54px -50px; } .C1Heading .C1List Sets the heading's Minimize button .C1Window_ArcticFox .C1Heading .C1Minimizer styles when the control is not in .C1List .C1Minimizer focus. { background-position: 0px -75px; 40
  • } .C1Focus .C1Heading Sets the heading's Minimize button .C1Window_ArcticFox .C1Focus .C1List .C1Minimizer styles when the control is in focus. .C1Heading .C1List .C1Minimizer { background-position: -18px -75px; } .C1Focus- Sets the heading's Minimize button .C1Window_ArcticFox .C1Focus- C1Minimized styles when the control is in focus C1Minimized .C1Heading .C1List .C1Heading .C1List and the button is hovered over. .C1Minimizer-C1Hover, .C1Minimizer- C1Hover .C1Window_ArcticFox .C1Minimized .C1Heading .C1List .C1Minimizer- .C1Minimized Sets the heading's Minimize button C1Hover .C1Heading .C1List styles when the control is not in .C1Minimizer- focus and the button is hovered { C1Hover over. background-position: -36px -50px; } .C1Focus- Sets the heading's Minimize button .C1Window_ArcticFox .C1Focus- C1Minimized styles when the control is in focus C1Minimized .C1Heading .C1List .C1Heading .C1List and the button is active. .C1Minimizer-C1Active, .C1Minimizer- C1Active .C1Window_ArcticFox .C1Minimized .C1Heading .C1List .C1Minimizer- .C1Minimized Sets the heading's Minimize button C1Active .C1Heading .C1List styles when the control is not in .C1Minimizer- focus and the button is active. { C1Active background-position: -54px -50px; } .C1Heading .C1List Sets the heading's Toggle button .C1Window_ArcticFox .C1Heading .C1Toggler styles when the control is not in .C1List .C1Toggler focus and is expanded. { background-position: 0px -100px; } .C1Focus .C1Heading Sets the heading's Toggle button .C1Window_ArcticFox .C1Focus .C1List .C1Toggler styles when the control is in focus .C1Heading .C1List .C1Toggler and is expanded. { background-position: -18px -100px; } .C1Focus .C1Heading Sets the heading's Toggle button .C1Window_ArcticFox .C1Focus .C1List .C1Toggler- styles when the control is in focus .C1Heading .C1List .C1Toggler- C1Hover and is expanded and the button is C1Hover, hovered over. .C1Window_ArcticFox .C1Heading .C1Heading .C1List Sets the heading's Toggle button .C1List .C1Toggler-C1Hover .C1Toggler-C1Hover styles when the control is not in focus and is expanded and the { 41
  • button is hovered over. background-position: -36px -100px; } .C1Focus .C1Heading Sets the heading's Toggle button .C1Window_ArcticFox .C1Focus .C1List .C1Toggler- styles when the control is in focus .C1Heading .C1List .C1Toggler- C1Active and is expanded and the button is C1Active, active. .C1Window_ArcticFox .C1Heading .C1Heading .C1List Sets the heading's Toggle button .C1List .C1Toggler-C1Active .C1Toggler-C1Active styles when the control is not in focus and is expanded and the { button is active. background-position: -54px -100px; } .C1Closed Sets the heading's Toggle button .C1Window_ArcticFox .C1Closed .C1Heading .C1List styles when the control is not in .C1Heading .C1List .C1Toggler .C1Toggler focus and is collapsed. { background-position: 0px -125px; } .C1Focus-C1Closed Sets the heading's Toggle button .C1Window_ArcticFox .C1Focus- .C1Heading .C1List styles when the control is in focus C1Closed .C1Heading .C1List .C1Toggler and is collapsed. .C1Toggler { background-position: -18px -125px; } .C1Focus-C1Closed Sets the heading's Toggle button .C1Window_ArcticFox .C1Focus- .C1Heading .C1List styles when the control is in focus C1Closed .C1Heading .C1List .C1Toggler-C1Hover and is collapsed and the button is .C1Toggler-C1Hover, hovered over. .C1Window_ArcticFox .C1Closed .C1Closed Sets the heading's Toggle button .C1Heading .C1List .C1Toggler- .C1Heading .C1List styles when the control is not in C1Hover .C1Toggler-C1Hover focus and is collapsed and the button is hovered over. { background-position : -36px -125px; } .C1Focus-C1Closed Sets the heading's Toggle button .C1Window_ArcticFox .C1Focus- .C1Heading .C1List styles when the control is in focus C1Closed .C1Heading .C1List .C1Toggler-C1Active and is collapsed and the button is .C1Toggler-C1Active, active. .C1Window_ArcticFox .C1Closed .C1Closed Sets the heading's Toggle button .C1Heading .C1List .C1Toggler- .C1Heading .C1List styles when the control is not in C1Active .C1Toggler-C1Active focus and is collapsed and the button is active. { background-position: -54px -125px; } .C1Heading .C1List Sets the heading's Reload button .C1Window_ArcticFox .C1Heading 42
  • .C1Reloader styles when the control is not in .C1List .C1Reloader focus. { background-position: 0px -150px; } .C1Focus .C1Heading Sets the heading's Reload button .C1Window_ArcticFox .C1Focus .C1List .C1Reloader styles when the control is in focus. .C1Heading .C1List .C1Reloader { background-position: -18px -150px; } .C1Focus .C1Heading Sets the heading's Reload button .C1Window_ArcticFox .C1Focus .C1List .C1Reloader- styles when the control is in focus .C1Heading .C1List .C1Reloader- C1Hover and the button is hovered over. C1Hover, .C1Heading .C1List Sets the heading's Reload button .C1Window_ArcticFox .C1Heading .C1Reloader- styles when the control is not in .C1List .C1Reloader-C1Hover C1Hover focus and the button is hovered over. { background-position: -36px -150px; } .C1Focus .C1Heading Sets the heading's Reload button .C1Window_ArcticFox .C1Focus .C1List .C1Reloader- styles when the control is in focus .C1Heading .C1List .C1Reloader- C1Active and the button is active. C1Active, .C1Heading .C1List Sets the heading's Reload button .C1Window_ArcticFox .C1Heading .C1Reloader- styles when the control is not in .C1List .C1Reloader-C1Active C1Active focus and the button is active. { background-position: -54px -150px; } .C1Heading .C1List Sets the heading's Pin button styles .C1Window_ArcticFox .C1Heading .C1Pinner when the control is not in focus. .C1List .C1Pinner { background-position: 0px -175px; } .C1Focus .C1Heading Sets the heading's Pin button styles .C1Window_ArcticFox .C1Focus .C1List .C1Pinner when the control is in focus. .C1Heading .C1List .C1Pinner { background-position: -18px -175px; } .C1Focus .C1Heading Sets the heading's Pin button styles .C1Window_ArcticFox .C1Focus .C1List .C1Pinner- when the control is in focus and the .C1Heading .C1List .C1Pinner-C1Hover, C1Hover button is hovered over. .C1Window_ArcticFox .C1Heading .C1Heading .C1List Sets the heading's Pin button styles 43
  • .C1Pinner-C1Hover when the control is not in focus and .C1List .C1Pinner-C1Hover the button is hovered over. { background-position: -36px -175px; } .C1Focus .C1Heading Sets the heading's Pin button styles .C1Window_ArcticFox .C1Focus .C1List .C1Pinner- when the control is in focus and the .C1Heading .C1List .C1Pinner-C1Active, C1Active button is active. .C1Window_ArcticFox .C1Heading .C1Heading .C1List Sets the heading's Pin button styles .C1List .C1Pinner-C1Active .C1Pinner-C1Active when the control is not in focus and the button is active. { background-position: -54px -175px; } .C1Pinned Sets the heading's Pinned button .C1Window_ArcticFox .C1Pinned .C1Heading .C1List styles when the control is not in .C1Heading .C1List .C1Pinner .C1Pinner focus. { background-position: 0px -200px; } .C1Focus-C1Pinned Sets the heading's Pinned button .C1Window_ArcticFox .C1Focus- .C1Heading .C1List styles when the control is in focus. C1Pinned .C1Heading .C1List .C1Pinner .C1Pinner { background-position: -18px -200px; } .C1Focus-C1Pinned Sets the heading's Pinned button .C1Window_ArcticFox .C1Focus- .C1Heading .C1List styles when the control is in focus C1Pinned .C1Heading .C1List .C1Pinner-C1Hover and the button is hovered over. .C1Pinner-C1Hover, .C1Pinned Sets the heading's Pinned button .C1Window_ArcticFox .C1Pinned .C1Heading .C1List styles when the control is not in .C1Heading .C1List .C1Pinner-C1Hover .C1Pinner-C1Hover focus and the button is hovered over. { background-position: -36px -200px; } .C1Focus-C1Pinned Sets the heading's Pinned button .C1Window_ArcticFox .C1Focus- .C1Heading .C1List styles when the control is in focus C1Pinned .C1Heading .C1List .C1Pinner-C1Active and the button is active. .C1Pinner-C1Active, .C1Pinned Sets the heading's Pinned button .C1Window_ArcticFox .C1Pinned .C1Heading .C1List styles when the control is not in .C1Heading .C1List .C1Pinner-C1Active .C1Pinner-C1Active focus and the button is active. { background-position: -54px -200px; } 44
  • Note that you can set the visibility and ToolTips for elements on the caption bar, such as the icon image and button elements, by using the CaptionButtons property. Status Bar Styles The C1Window control includes several CSS elements that allow you to customize the appearance of the dialog window's status bar, including the spinner image and text. These elements include the following: Style Property Description Example (ArcticFox theme) .C1ContentPanel Sets the status bar's style. .C1Window_ArcticFox .C1ContentPanel .C1StatusBar .C1StatusBar { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. status.gif")%>') repeat-x scroll 0pt top; height:30px; } .C1ContentPanel Sets the style and location of the .C1Window_ArcticFox .C1ContentPanel .C1Spinner control's content loading image. .C1Spinner { height:16px; width:16px; background:url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. Loading.gif")%>') no-repeat; float:left; margin: 4px 0 0 5px; } .C1ContentPanel Sets the loading image container's .C1Window_ArcticFox .C1ContentPanel .C1SpinnerContainer style. .C1SpinnerContainer { height:30px; width:30px; background:url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. status_separator.gif")%>') no-repeat; background-position:right; float:left; 45
  • } .C1ContentPanel Sets the status template's style. .C1Window_ArcticFox .C1ContentPanel .C1StatusTemplate .C1StatusTemplate { line-height:30px; font-size:12px; } .C1Footer .C1Outer Sets the outer status bar border for .C1Window_ArcticFox .C1Footer when the control is not in focus. .C1Outer { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. footer_left_unfocused.gif")%>') no- repeat scroll left bottom; padding-left:5px; } .C1Footer .C1Inner Sets the inner status bar border for .C1Window_ArcticFox .C1Footer when the control is not in focus. .C1Inner { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. footer_right_unfocused.gif")%>') no- repeat scroll right bottom; padding-right:5px; } .C1Footer Sets the status bar's content style .C1Window_ArcticFox .C1Footer .C1Content when the control is not in focus. .C1Content { height: 5px; background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. footer_center_unfocused.gif")%>') repeat-x scroll left bottom; font-size:0px; } .C1Focus .C1Footer Sets the outer status bar border for .C1Window_ArcticFox .C1Focus .C1Outer when the control is in focus. .C1Footer .C1Outer { 46
  • background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. footer_left.gif")%>') no-repeat scroll left bottom; padding-left:5px; } .C1Focus .C1Footer Sets the inner status bar border for .C1Window_ArcticFox .C1Focus .C1Inner when the control is in focus. .C1Footer .C1Inner { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. footer_right.gif")%>') no-repeat scroll right bottom; padding-right:5px; } .C1Focus .C1Footer Sets the status bar's content style .C1Window_ArcticFox .C1Focus .C1Content when the control is in focus. .C1Footer .C1Content { height: 5px; background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1 Window.VisualStyles.ArcticFox.Images. footer_center.gif")%>') repeat-x scroll left bottom; font-size:0px; } .C1Focus- Sets the status bar's styles when the .C1Window_ArcticFox .C1Focus- C1Maximized control is in focus and maximized. C1Maximized .C1Footer .C1Outer .C1Footer .C1Outer { display:none; } Content and Status Bar Templates The contents of the content area and status bar area of the dialog window can be controlled by using templates. C1Window has special properties, ContentTemplate and StatusTemplate, that are used to apply templates to the content area and status bar area of the C1Window control. The dialog window content templates are useful for customizing your dialog window so its appearance integrates into your application and for adding content to the content area of the dialog window. The status template allows you to customize the content of your status bar. See the Creating a Content Template (page 61) topic for more information about creating a content template for C1Window. 47
  • Window for ASP.NET AJAX Behavior The C1Window control's behavior can be customized to meet any user's needs. You can determine where the dialog window will appear in the parent application, whether or not the dialog window can be moved and resized, and whether the dialog window can be minimized. In addition to controlling the behavior of the dialog window, you can control the content inside the window pane. For example, in situations where you only need to update a particular item in the window pane, you can use Partial Page Rendering (PPR) so you can update that item without reloading all of the items in the entire page. Window Positioning and Sizing You can determine where the dialog window will appear in the parent application, whether or not the dialog window can be resized, and whether the dialog window can be moved. Window Position You can easily specify whether you would like the dialog window to appear at the center of the page, in the center of the dialog window's parent element, at the top-left corner of the page (the default position), or at a specific (x, y) location on the page through the StartPosition property. You can set the StartPosition property to ByDefault, Page, Parent, Manual, or OffSet. When you set the dialog window's start position to Manual you will need to specify an integer value for the horizontal (X) and vertical (Y) location of the dialog window through the X and Y properties. For more information, see Setting the Window Location (page 82). You can also set the dialog window's location on the client side. For more information, see Setting the Dialog Window Location at Run Time (page 98). Window Size You can specify the initial size of your dialog window. To resize the dialog window at design time, position your cursor over the bottom-right corner of the dialog window, press and hold the left mouse button, drag the dialog window edge to resize, and release the mouse when you are done. See Setting the Height and Width (page 83) for more information. For information on setting the control's height and width on the client side, see Resizing the Dialog Window at Run Time (page 97). 48
  • You can prevent users from resizing the dialog window at run time by setting the AllowResize property to False. For more information, see Preventing Window Resizing (page 80). Window Moving The dialog window is moveable by default. You can move the dialog window at run time by selecting the caption bar on the dialog window and dragging the window across the page. If you would like to hold the initial set position of the dialog window, set the AllowMove property to False. For more information, see Preventing Window Repositioning (page 81). Window Minimizing For a C1Window dialog window to be minimized you need a minimize button to be visible on the dialog window's caption bar. By default, the Minimize button is enabled and the MinimizeButton.Visible property is set to True. You can disable dialog window minimizing by setting the MinimizeButton.Visible property to False. When a dialog window is minimized at run time it will appear in the lower-left area of the Web page. Once minimized, the Minimize button will become a Restore button. When pressed the Restore button will return the dialog window to its previous size. Docking Dialog Windows in a Form Element If you would like to specify an element to store the minimized windows, you can use the MinimizeZoneElementId property. For example, in the following image dialog windows are docked in a panel control: Using the MinimizeZoneElementId property, you can specify a form element to store the minimized dialog windows. When minimized, the dialog windows will appear docked in the form element designated by the MinimizeZoneElementId property, similar to the way that windows are docked in a task bar. For more information, see Using the MinimizeZoneElementId property (page 85). Animation Window for ASP.NET AJAX includes twenty-six built-in animation options that allow you to completely customize interaction with the C1Window control. You can set animation effects for when the control is shown, hidden, expanded, and collapsed. See the following topics for more information. Animation Effects You can customize interaction with the C1Window control using any of the twenty-six built-in effects. You can change how the control is shown and hidden by setting the AnimationEffectOnShowing and AnimationEffectOnHiding properties. You can change how the control expands and collapses by setting the AnimationEffectOnExpanding and AnimationEffectOnCollapsing properties. By default these four properties are set to None and the control does not use any animation effects. Sample Project Available For a demonstration of each animation effect possible in the C1Window control, see C1Window's Animation page in the ControlExplorer sample. 49
  • Available Animation Effects The following table describes each animation effect choice. Note that while you can use all animations to show, hide, expand, or collapse the control, the terms "expands" and "collapses" were used to indicate which selection is suggested for each animation: Name Description None (default) No animation used. FadeIn Expands body of the control so that it appears to fade in. FadeOut Collapses the body of the control, so that it appears to fade out. ScrollInFromTop Expands the body of the control, scrolling into view from the top. ScrollInFromRight Expands the body of the control, scrolling into view from the right. ScrollInFromBottom Expands the body of the control, scrolling into view from the bottom. ScrollInFromLeft Expands the body of the control, scrolling into view from the left. ScrollOutToTop Collapses the body of the control, scrolling out of view to the top. ScrollOutToRight Collapses the body of the control, scrolling out of view to the right. ScrollOutToBottom Collapses the body of the control, scrolling out of view to the bottom. ScrollOutToLeft Collapses the body of the control, scrolling out of view to the left. Fold Collapses the body of control vertically and then horizontally so it appears to fold. UnFold Expands the body of control horizontally and then vertically so it appears to unfold. OpenVertically Expands the body of control vertically from the center of the body area. CloseVertically Collapses the body of control vertically from the center of the body area. OpenHorizontally Expands the body of control horizontally from the center of the body area. CloseHorizontally Collapses the body of control horizontally from the center of the body area. Shake Expands or Collapses the body of control with a horizontal shaking motion. Bounce Expands or Collapses the body of control with a vertical bouncing motion. DropInFromTop Expands the body of the control from below the control to the top. DropInFromRight Expands the body of the control from the left of the control to the right. DropInFromBottom Expands the body of the control from above the control to the bottom. 50
  • DropInFromLeft Expands the body of the control from the right of the control to the left. DropOutToTop Collapses the body of the control out to above the control. DropOutToRight Collapses the body of the control out to the right of the control. DropOutToBottom Collapses the body of the control out to below the control. DropOutToLeft Collapses the body of the control out to the left of the control. Animation Duration You can set how long each C1Window show, hide, expand, and collapse animation effect takes by using the AnimationDurationOnShowing, AnimationDurationOnHiding, AnimationDurationOnExpanding, and AnimationDurationOnCollapsing properties. The unit of time used for specifying animation effect duration is in milliseconds, and the default setting for all of the above four properties is 1000 milliseconds (one second). Increase this value for a longer animation effect, and decrease this number for a shorter animation effect. Sample Project Available For a demonstration of setting the AnimationDurationOnShowing, AnimationDurationOnHiding, AnimationDurationOnExpanding, and AnimationDurationOnCollapsing properties, see C1Window's Animation page in the ControlExplorer sample. Partial Rendering C1Window supports Partial Page Rendering (PPR) technology which enables partial page updates without the need to use custom JavaScript code. PPR allows a portion of a page to be updated rather than reloading the entire page. This improves application performance and provides more direct feedback when users perform actions. For more information, see Using Partial Rendering (page 66). 51
  • Working with Client-Side Script Window for ASP.NET AJAX has a very rich client-side object model as it is similar to the object model in the server-side control. When a C1Window control is rendered, an instance of the client-side dialog window will be created automatically. This means that you can enjoy the convenience of accessing any property and method of the C1Window control without having to postback to the server. For example, suppose a C1Window control with name C1Window1 is hosted on Web page; when the page is rendered, a corresponding client-side dialog window object will be created. Use the following syntax to get the client-side object on a Web page: $get("C1Window1").control OR $find("C1Window1") By using Window for ASP.NET AJAX's client-side code, you can implement many features in your Web page without the need to take up time by sending information to the Web server. Thus, using client-side code can increase the efficiency of your Web site. For more information about the C1Window control's client-side code, see Client-Side Tasks (page 93). Dialog Window Client-Side Methods Window for ASP.NET AJAX supports several client-side methods. The following table lists the object methods available from client-side script: Client-Side Method Description Example Activate(window) Makes the dialog window active. C1.Web.UI.Controls.C1Window.C1Wind ow.activate(dialog) Deactivate(window) Deactivates the dialog window. C1.Web.UI.Controls.C1Window.C1Wind ow. deactivate (dialog) Show() Shows a dialog window. dialog.show() For an example of this method, see Calling the Show and Hide Methods at Run Time. Hide() Hides a dialog window. dialog.hide() For an example of this method, see Calling the Show and Hide Methods at Run Time (page 96). ShowModal() Shows modal dialog window. dialog.showModal() For an example of this method, see Creating a Modal Dialog Window in Code (page 89). SetHtml(html) Loads HTML code passed as a dialog.setHtml("html text"); string to dialog window content. SetUrl(url) Loads passed URL to dialog dialog.setUrl("http://www.url.com") window content. For an example of this method, see, Setting the ContentURL Property at Run Time (page 53
  • 93). Move(x, y) Moves a dialog window to specified dialog.move(0, 0) location. Normalize() Restores dialog window size from dialog.normalize() maximized or minimized state. Minimize() Minimizes a dialog window. dialog.minimize() Maximize() Maximizes a dialog window. dialog.maximize() Reload() Reloads dialog window content dialog.reload() specified by ContentUrl. Dialog Window Client-Side Properties The following conventions are used when accessing the client object properties:  Server properties on the client are implemented as a pair of Get- and Set- methods.  Method names must start with "get_" (Get-method) and "set_" (Set-method) followed with the server property name. The first letter of the server property name must be lowercase. For example in the code below the C#, Visual Basic, and JavaScript examples are equivalent:  Visual Basic Dim s As String = C1Window1.Text C1Window1.Text = s  C# string s = C1Window1.Text; C1Window1.Text = s;  JavaScript var dialog = $get("C1Window1").control; var s = dialog.get_text(); dialog.set_text(s); For an example of setting the Text property at run time, see Adding a New Title to the Caption Bar at Run Time (page 94). Caption Button Client-Side Methods The following table lists the object methods available from client-side script for the dialog window caption buttons, including the Pin, Reload, CollapseExpand, Minimize, Maximize, Close, and Restore buttons: Property Client-Side Method Description Example Visible get_visible() Gets or sets value dialog.get_captionButtons().get indicating whether the _closeButton().get_visible() element is visible. set_visible(value) dialog.get_captionButtons().get _closeButton().set_visible(false) Tooltip get_tooltip() Gets or sets the text dialog.get_captionButtons().get displayed when the _closeButton().get_toolTip() mouse pointer hovers set_tooltip(value) over the button. dialog.get_captionButtons().get _closeButton().set_toolTip("Clos e window") 54
  • Client-Side Events C1Window includes a rich client-side object model in which includes several client-side events. You can access these client-side events from the Properties window. To create a new client-side event, select the drop- down arrow next to a client-side event and select Add new client side handler. A placeholder for the client-side event will be added in the Source view. The placeholder will appear similar to the following: function C1Window1_OnClientActivated(sender, e){ // // Put your code here. // }; Available Client-Side Events The following table names and describes the built-in client-side events available for your use: Client-Side Event Description OnClientActivated Gets or sets the name of the client-side function that should be fired on the client side after the dialog window is activated. Gets or sets the name of the client-side function that OnClientButtonClicked should be fired on the client side when one of the 55
  • caption buttons is clicked after the dialog window handles the operation. Gets or sets the name of the client-side function that should be fired on the client side when one of the OnClientButtonClicking caption buttons is clicked before the dialog window handles the operation. Gets or sets the name of the client-side function that OnClientDeactivated should be fired on the client side after the dialog window is deactivated. Gets or sets the name of the client-side function that OnClientDragEnd should be fired on the client side when the dialog window exits dragging mode. Gets or sets the name of the client-side function that OnClientDragging should be fired on the client side when the dialog window is being dragged. Gets or sets the name of the client-side function that OnClientDragStart should be fired on the client side when the dialog window enters dragging mode. Gets or sets the name of the client-side function that OnClientHidden should be fired on the client side after the dialog window is hidden. Gets or sets the name of the client-side function that should be fired on the client side when the dialog OnClientMaximized window is maximized after the dialog window handles the operation. Gets or sets the name of the client-side function that should be fired on the client side when the dialog OnClientMaximizing window is maximized before the dialog window handles the operation. Gets or sets the name of the client-side function that should be fired on the client side when the dialog OnClientMinimized window is minimized after the dialog window handles the operation. Gets or sets the name of the client-side function that should be fired on the client side when the dialog OnClientMinimizing window is minimized before the dialog window handles the operation. Gets or sets the name of the client-side function that should be fired on the client side when the dialog OnClientNormalized window is normalized after the dialog window handles the operation. Gets or sets the name of the client-side function that should be fired on the client side when the dialog OnClientNormalizing window is normalized before the dialog window handles the operation. Gets or sets the name of the client-side function that should be fired on the client side when the dialog OnClientPinned window is pinned after the dialog window handles the operation. Gets or sets the name of the client-side function that should be fired on the client side when the dialog OnClientPinning window is pinned before the dialog window handles the operation. Gets or sets the name of the client-side function that should be fired on the client side when the dialog OnClientReloaded window content is reloaded after the dialog window handles the operation. Gets or sets the name of the client-side function that should be fired on the client side when the dialog OnClientReloading window content is reloaded before the dialog window handles the operation. Gets or sets the name of the client-side function that OnClientResizeEnd should be fired on the client side when the dialog window exits resizing mode. OnClientResizeStart Gets or sets the name of the client-side function that 56
  • should be fired on the client side when the dialog window enters resizing mode. Gets or sets the name of the client-side function that OnClientResizing should be fired on the client side when the dialog window is being resized. Gets or sets the name of the client-side function that OnClientShown should be fired on the client side after the dialog window is shown. 57
  • Window for ASP.NET AJAX Samples Please be advised that this ComponentOne software tool is accompanied by various sample projects and/or demos which may make use of other development tools included with the ComponentOne Studios. Note: The ComponentOne Samples are also available at http://helpcentral.componentone.com/Samples.aspx. The following pages within the ControlExplorer sample installed with ComponentOne Studio for ASP.NET AJAX detail the C1Window control's functionality: C# Samples Sample Description Animation Demonstrates various show, hide, expand, and collapse animations and their duration. Docking Shows various methods of docking the C1Window control. VisualStyles Illustrates Visual Style properties as well as other appearance and behavior settings. Window for ASP.NET AJAX Task- Based Help The task-based help assumes that you are familiar with programming in ASP.NET and know how to use controls in general. By following the steps outlined in the help, you will be able to create projects demonstrating a variety of Window for ASP.NET AJAX features, and get a good sense of what the C1Window control can do. Each topic provides a solution for specific tasks using the C1Window control. Each task-based help topic also assumes that you have created a new ASP.NET AJAX-Enabled project. For additional information on this topic, see Creating an AJAX-Enabled ASP.NET Project (page 10). Note: Window for ASP.NET AJAX requires Microsoft ASP.NET AJAX Extensions installed and a ScriptManager on the page before the C1Window control is placed on the page. For more information about Microsoft ASP.NET AJAX Extensions, see http://ajax.asp.net/. You must create an ASP.NET AJAX-Enabled Project so that the ScriptManager and Microsoft AJAX Extensions are included on the page. For more information, see Creating an AJAX-Enabled ASP.NET Project (page 10). Customizing the Content Area The following procedures show how to add different types of content to C1Window such as: external website content, content in the content template, and custom HTML, and partial rendering content. Showing External Content in the Content Area In Window for ASP.NET AJAX you can show external content in a dialog window. This means that you can have the content of another Web page in your project or even the content of a Web site outside of your project appear in a dialog window. Pointing to external content is simple using the ContentUrl property. In this topic 59
  • you'll set the ContentUrl property at design time. To change the ContentUrl property at run time instead, see the Setting the ContentURL Property at Run Time (page 93) topic. To show external content in the dialog window, complete the following steps: 1. Navigate to the Visual Studio Toolbox, and double-click the C1Window icon to add the C1Window control to your page. 2. Click the control's smart tag ( ) to open the C1Window Tasks menu and select the ShowOnLoad checkbox to set the ShowOnLoad property to True: For more information on accessing the smart tag, see C1Window Smart Tag (page 25). 3. In the C1Window Tasks menu click on the VisualStyle drop-down arrow and select Office2007Blue. 4. Navigate to the Properties window and set the following properties for C1Window1:  Set the StatusVisible property to False.  Set the Height property to 225px.  Set the Width property to 300px. 5. Set the ContentURL property to the location of the content that you want to appear in the content area of the dialog window: In the Designer To show external content in the content area using the designer, navigate to the Properties window and set the following property:  Set the ContentURL property to "http://www.google.com". In Code To show external content in the content area in code, switch to the Code view and add the following code to the Page_Load event:  Visual Basic C1Window1.ContentUrl = "http://www.google.com"  C# C1Window1.ContentUrl = "http://www.google.com"; In Source view To show external content in the content area from the Source view, switch to the Source view and complete the following: 1. Locate the <cc1:C1Window></cc1:C1Window> tags. 60
  • 2. Add the text ContentUrl="http://www.google.com" within the <cc1:C1Window> tag. The tag will appear similar to the following: <cc1:C1Window ID="C1Window1" runat="server" AllowResize="True" Height="225px" ShowOnLoad="True" VisualStyle="Office2007Blue" VisualStylePath="~/C1WebControls/VisualStyles" Width="300px" StatusVisible="False" X="0" Y="0" ContentUrl="http://www.google.com"> Run the program and observe: The Web site indicated by the ContentURL property appears in the content area of the dialog window: Creating a Content Template Content templates are useful for customizing your dialog window for your application and for displaying additional information in the content area in the dialog window. For more information on templates, see Content and Status Bar Templates (page 47). In the following example, you will add content to the content template of a dialog window in the design view and in the source view. In addition, the dialog window will function as an update panel updating content without reloading the rest of the page. To create a content template for C1Window, complete the following: 1. Navigate to the Visual Studio Toolbox, and double-click the Hyperlink and C1Window icons to add the controls to your Form. 2. Select Hyperlink1 and in the Properties window set its Text property to "Show Window". 3. Click inside the content area of C1Window1 and press the ENTER key, then type the following text: " The current server time is:". 4. Switch to source view, notice that the text you just entered is located within the <ContentTemplate> tags, like the following: <ContentTemplate></br> <span ...> &nbsp; The current server time is: </span> </ContentTemplate> Any content you enter in the content area of the dialog window at design time will appear within the content template tags. 5. In between the Content Template opening and closing tags you can add arbitrary controls and text. Add the following to the <ContentTemplate> tag to add text box and button controls to the dialog window: 61
  • <ContentTemplate><br /> <span ...> &nbsp; The current server time is: </span><br /> &nbsp; <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> <br /> &nbsp; <asp:Button ID="Button1" runat="server" Text="Update Time" /> </ContentTemplate> 6. Switch to Design view and notice the text box and button controls were added inside the content area: 7. Resize the C1Window to fit the controls by dragging the lower right-hand corner of the control. 8. Double-click the Web page to switch to code view and create an event handler for the Load event. Enter the following code in the Page_Load event to initialize the control:  Visual Basic Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim tb As TextBox = C1Window1.FindControl("TextBox1") tb.Text = DateTime.Now.ToString() HyperLink1.NavigateUrl = "javascript:openWindow($get(""" & C1Window1.ClientID & """))" End Sub  C# protected void Page_Load(object sender, EventArgs e) { TextBox tb = (TextBox)C1Window1.FindControl("TextBox1"); tb.Text = DateTime.Now.ToString(); HyperLink1.NavigateUrl = "javascript:openWindow($get("" + C1Window1.ClientID + ""))"; } 9. Switch to the source view and add the following JavaScript just after the Hyperlink tag, so that clicking the hyperlink will open the dialog window: <script type="text/javascript"> function openWindow(dialog) { 62
  • form_dialog = dialog.control; dialog.control.show(); } </script> This topic illustrates the following: If you run the program and click Show Window; the dialog window will appear like the following: Select the Update Time button. Notice that the time is refreshed – the dialog window acts as an update panel refreshing content without the page being reloaded. Adding Custom HTML Content in the Content Area You can customize the appearance and content of your C1Window dialog window with HTML. In this topic, you'll add heading and text to a dialog window as well as an input text box and button; you will be able to change this content at run time, adding your own custom HTML content. To add custom HTML content in the dialog window, complete the following steps: 1. In the Visual Studio Toolbox, double-click the C1Window, TextArea, and Hyperlink controls to add them to your page. 2. Open the C1Window Tasks menu from its smart tag and click the VisualStyle drop-down arrow. For more information on accessing the smart tag, see C1Window Smart Tag (page 25). 3. Select Office2007Black to apply the new scheme. 4. Place the cursor just after the TextArea control and press the ENTER button so the Hyperlink appears on the next line. 5. Navigate to the Properties window and set the following properties:  Set C1Window1's Height property to 200.  Set C1Window1's Width property to 300.  Set TextArea1's Style property to "WIDTH: 400px; HEIGHT: 200px"  Set Hyperlink1's Text property to "Show Window". The page will appear similar to the following: 63
  • 6. Double-click the Web page to create an event handler for the Load event. Enter the following code for the Page_Load event to initialize the control:  Visual Basic HyperLink1.NavigateUrl = String.Format("javascript:setHtml($get(""{0}""));openWindow($get(""{0}" "));", C1Window1.ClientID)  C# HyperLink1.NavigateUrl = String.Format("javascript:setHtml($get("{0}"));openWindow($get("{0} "));", C1Window1.ClientID); 7. Switch to the source view and add content to the <textarea> tag, so it looks like this: <textarea id="TextArea1" style="width: 400px; height: 200px" onclick="return TextArea1_onclick()"><h2>&nbsp;Sample HTML Content</h2><p>&nbsp;You can add custom HTML content.<br /></p>&nbsp;Enter text here: <input type=text id="input1" /> <br>&nbsp;And then click: <input type=button value="Show" onclick="alert(document.getElementById('input1').value)"></textarea> 8. Add the following JavaScript just after the </asp:HyperLink> tag: <script type="text/javascript"> 64
  • function setHtml(dialog) { var html = document.getElementById('TextArea1').value; dialog.control.setHtml(html); } function openWindow(dialog) { form_dialog = dialog.control; dialog.control.show(); } </script> This topic illustrates the following: 1. Run the program; notice the HTML content that you entered in the textarea control: 2. Click Show Window, the dialog window will appear like the following image: Note that the content of the dialog window reflects the text entered in the TextArea control. 3. Enter text in the text box and click Show; a dialog box will appear that contains the content you just entered. 65
  • 4. Close the dialog box and close the dialog window. 5. Enter text or HTML content in the TextArea and click Show Window for the dialog window containing that content to appear. Using Partial Rendering Window for ASP.NET AJAX supports Partial Page Rendering (PPR) technology which enables partial page updates without the need to use custom JavaScript. For more information about Partial Page Rendering see the topic, Partial Rendering (page 51). The following example uses Partial Page Rendering to create a typical "select location" dialog window. At run time after the user selects a country from a drop-down list, a drop-down list of selectable cities within that country is refreshed from server. Complete the following steps to create a location selection dialog window that uses Partial Page Rendering: 1. Navigate to the Toolbox and add a C1Window control to your page. 2. Click C1Window1's smart tag to open the C1Window Tasks menu and click the VisualStyle drop-down arrow. For more information on accessing the smart tag, see C1Window Smart Tag (page 25). 3. Select Office2007Silver to apply the new scheme. 4. Navigate to the Properties window and set the following properties for C1Window1:  Set the Height property to 325px.  Set the Width property to 275px. 5. Switch to the Source view and add the following content template to C1Window1 between the <cc1:C1Window> and <CaptionButtons> tags: <ContentTemplate> <br />&nbsp;&nbsp; <strong>Select your location:</strong> <br /><br /><br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Country: &nbsp;<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True" Width="123px"> <asp:ListItem Selected="True">-</asp:ListItem> <asp:ListItem>UK</asp:ListItem> <asp:ListItem>USA</asp:ListItem> <asp:ListItem>Russia</asp:ListItem> <asp:ListItem>Canada</asp:ListItem> </asp:DropDownList><br /><br /> &nbsp;<asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label><br /><br /> &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; City: &nbsp; &nbsp; &nbsp;&nbsp; <asp:DropDownList ID="DropDownList2" runat="server"> <asp:ListItem Selected="True">-</asp:ListItem> </asp:DropDownList><br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;or other <asp:TextBox ID="TextBox1" runat="server" EnableViewState="False" Width="117px"></asp:TextBox><br /> <br /> &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;<br /> <br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input id="Button1" style="width: 75px" type="button" 66
  • value="OK" onclick="form_dialog.hide();__doPostBack('','');"/>&nbsp; <input id="Button2" style="width: 75px" type="button" value="Cancel" onclick="form_dialog.hide();"/><br /> </ContentTemplate> For more information about templates, see Content and Status Bar Templates (page 47). 6. Switch to the Design view; the form should now look like the following: 7. Navigate to the ToolBox and add the Hyperlink and Label controls to the Web page below the C1Window control. 8. Set the Hyperlink's Text property to "Show Location". 9. Double-click the Web page to create an event handler for the Load event. Enter the following code for the Page_Load event to initialize the controls:  Visual Basic HyperLink1.NavigateUrl = [String].Format("javascript:openWindow({0});", C1Window1.ClientID) If Me.IsPostBack Then Dim dl As DropDownList = DirectCast(C1Window1.FindControl("DropDownList1"), DropDownList) Dim dlc As DropDownList = DirectCast(C1Window1.FindControl("DropDownList2"), DropDownList) Dim tb As TextBox = DirectCast(C1Window1.FindControl("TextBox1"), TextBox) If dl.Text <> "-" AndAlso (dlc.Text <> "-" OrElse tb.Text <> "") Then 67
  • Dim text As String = "You selected " If dlc.Text <> "-" Then text += dlc.Text Else text += tb.Text End If text += ", " + dl.Text Label2.Text = text End If Else Label2.Text = "" End If  C# HyperLink1.NavigateUrl = String.Format("javascript:openWindow({0});", C1Window1.ClientID); if (this.IsPostBack) { DropDownList dl = (DropDownList)C1Window1.FindControl("DropDownList1"); DropDownList dlc = (DropDownList)C1Window1.FindControl("DropDownList2"); TextBox tb = (TextBox)C1Window1.FindControl("TextBox1"); if (dl.Text != "-" && (dlc.Text != "-" || tb.Text != "")) { string text = "You selected "; if (dlc.Text != "-") { text += dlc.Text; } else { text += tb.Text; } text += ", " + dl.Text; Label2.Text = text; } } else { Label2.Text = ""; } 10. Add the following SelectedIndexChanged event to your code:  Visual Basic Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Dim l As Label = DirectCast(C1Window1.FindControl("Label1"), Label) Dim dl As DropDownList = DirectCast(C1Window1.FindControl("DropDownList1"), DropDownList) Dim dlc As DropDownList = DirectCast(C1Window1.FindControl("DropDownList2"), DropDownList) dlc.Items.Clear() dlc.Items.Add(New ListItem("-")) If dl.Text <> "-" Then l.Text = "Select a city in " + dl.Text 68
  • Select Case dl.Text Case "UK" dlc.Items.Add(New ListItem("London")) dlc.Items.Add(New ListItem("Birmingham")) dlc.Items.Add(New ListItem("Leeds")) dlc.Items.Add(New ListItem("Glasgow")) dlc.Items.Add(New ListItem("Glasgow")) dlc.Items.Add(New ListItem("Sheffield")) dlc.Items.Add(New ListItem("Bradford")) dlc.Items.Add(New ListItem("Edinburgh")) dlc.Items.Add(New ListItem("Liverpool")) Exit Select Case "USA" dlc.Items.Add(New ListItem("New York, New York")) dlc.Items.Add(New ListItem("Los Angeles, California")) dlc.Items.Add(New ListItem("Chicago, Illinois")) dlc.Items.Add(New ListItem("Houston, Texas")) dlc.Items.Add(New ListItem("Philadelphia, Pennsylvania")) dlc.Items.Add(New ListItem("Phoenix, Arizona")) dlc.Items.Add(New ListItem("San Diego, California")) dlc.Items.Add(New ListItem("Dallas, Texas")) dlc.Items.Add(New ListItem("Detroit, Michigan")) Exit Select Case "Russia" dlc.Items.Add(New ListItem("Moscow")) dlc.Items.Add(New ListItem("Chelyabinsk")) dlc.Items.Add(New ListItem("Ekaterinburg")) dlc.Items.Add(New ListItem("Irkutsk")) dlc.Items.Add(New ListItem("St. Petersburg")) dlc.Items.Add(New ListItem("Volgograd")) dlc.Items.Add(New ListItem("Petrozavodsk")) dlc.Items.Add(New ListItem("Nizhni Novgorod")) dlc.Items.Add(New ListItem("Novosibirsk")) Exit Select Case "Canada" dlc.Items.Add(New ListItem("Toronto, Ontario")) dlc.Items.Add(New ListItem("Montreal, Quebec")) dlc.Items.Add(New ListItem("Vancouver, British Columbia")) dlc.Items.Add(New ListItem("Calgary, Alberta")) dlc.Items.Add(New ListItem("Edmonton, Alberta")) dlc.Items.Add(New ListItem("Ottawa - Gatineau, Ontario/Quebec")) Exit Select Case Else Exit Select End Select End If End Sub  C# protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { Label l = (Label)C1Window1.FindControl("Label1"); 69
  • DropDownList dl = (DropDownList)C1Window1.FindControl("DropDownList1"); DropDownList dlc = (DropDownList)C1Window1.FindControl("DropDownList2"); dlc.Items.Clear(); dlc.Items.Add(new ListItem("-")); if (dl.Text != "-") { l.Text = "Select a city in " + dl.Text; switch (dl.Text) { case "UK": dlc.Items.Add(new ListItem("London")); dlc.Items.Add(new ListItem("Birmingham")); dlc.Items.Add(new ListItem("Leeds")); dlc.Items.Add(new ListItem("Glasgow")); dlc.Items.Add(new ListItem("Glasgow")); dlc.Items.Add(new ListItem("Sheffield")); dlc.Items.Add(new ListItem("Bradford")); dlc.Items.Add(new ListItem("Edinburgh")); dlc.Items.Add(new ListItem("Liverpool")); break; case "USA": dlc.Items.Add(new ListItem("New York, New York")); dlc.Items.Add(new ListItem("Los Angeles, California")); dlc.Items.Add(new ListItem("Chicago, Illinois")); dlc.Items.Add(new ListItem("Houston, Texas")); dlc.Items.Add(new ListItem("Philadelphia, Pennsylvania")); dlc.Items.Add(new ListItem("Phoenix, Arizona")); dlc.Items.Add(new ListItem("San Diego, California")); dlc.Items.Add(new ListItem("Dallas, Texas")); dlc.Items.Add(new ListItem("Detroit, Michigan")); break; case "Russia": dlc.Items.Add(new ListItem("Moscow")); dlc.Items.Add(new ListItem("Chelyabinsk")); dlc.Items.Add(new ListItem("Ekaterinburg")); dlc.Items.Add(new ListItem("Irkutsk")); dlc.Items.Add(new ListItem("St. Petersburg")); dlc.Items.Add(new ListItem("Volgograd")); dlc.Items.Add(new ListItem("Petrozavodsk")); dlc.Items.Add(new ListItem("Nizhni Novgorod")); dlc.Items.Add(new ListItem("Novosibirsk")); break; case "Canada": dlc.Items.Add(new ListItem("Toronto, Ontario")); dlc.Items.Add(new ListItem("Montreal, Quebec")); dlc.Items.Add(new ListItem("Vancouver, British Columbia")); dlc.Items.Add(new ListItem("Calgary, Alberta")); dlc.Items.Add(new ListItem("Edmonton, Alberta")); 70
  • dlc.Items.Add(new ListItem("Ottawa - Gatineau, Ontario/Quebec")); break; default: break; } } } 11. Switch to the Source view and add the following JavaScript code just after the Hyperlink tag, so that clicking the hyperlink will open the dialog window: <script type="text/javascript"> var form_dialog; function openWindow(C1Window1) { form_dialog = C1Window1.control; C1Window1.control.show(); } </script> This topic illustrates the following: Run the program and complete the following steps: 1. Click on the Show Location link to open the dialog window. 2. Select a country from the first drop-down list. Notice that the next drop-down list of selectable cities within that country is refreshed from the server. 3. Select a city from the second drop-down list and click OK. The name of the city you select is reflected on the Web page. 71
  • Customizing the Caption Bar The following topics detail how you can customize the C1Window caption bar simply and easily by hiding caption bar buttons and customizing the content and appearance of the caption bar Hiding Caption Bar Buttons By default the C1Window control displays the Minimize, Maximize, and Close buttons. Hiding these buttons is simple and can be done in either the designer or in code. In Source View To hide the Minimize, Maximize, and Close buttons add text to the <CaptionButtons> tag so it appears similar to the following: <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="False" /> <Icon Visible="True" /> <MaximizeButton Visible="False" /> <MinimizeButton Visible="False" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> In Design View To hide the Minimize, Maximize, and Close buttons in the designer, navigate to the Properties window and complete the following steps:  Set the MinimizeButton.Visible property to False.  Set the MaximizeButton.Visible property to False.  Set the CloseButton.Visible property to False. In Code To hide the Minimize, Maximize, and Close buttons, add the following code to the Page_Load event:  Visual Basic C1Window1.CaptionButtons.MinimizeButton.Visible = False 72
  • C1Window1.CaptionButtons.MaximizeButton.Visible = False C1Window1.CaptionButtons.CloseButton.Visible = False  C# C1Window1.CaptionButtons.MinimizeButton.Visible = false; C1Window1.CaptionButtons.MaximizeButton.Visible = false; C1Window1.CaptionButtons.CloseButton.Visible = false; Setting the Caption Bar Title You can set a title to appear at the top of a C1Window dialog window in the caption bar. The title can indicate the content of the dialog window or give context to the content. Adding a title can also make minimized dialog windows easier to identify. You can easily set the title in Source view, in Design view, or in code using the Text property. In Source View To add a title to the caption bar add Text="" to the <cc1:Window> tag so it appears similar to the following: <cc1:C1Window ID="C1Window1" runat="server" Text="Hello World!"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> </cc1:C1Window> In Design View To add a title to the caption bar using the designer, navigate to the Properties window and set the Text property to the title: In Code To add a title to the caption bar, add the following code to the Page_Load event:  Visual Basic C1Window1.Text = "Hello World!"  C# C1Window1.Text = "Hello World!"; 73
  • Setting the Caption Bar Icon You can set an image that will appear in the upper left corner of the dialog window's caption bar. This icon image can indicate a window's contents or be used to differentiate dialog windows; this is particularly useful when the dialog window is minimized. Setting this icon image is simple using styles. In the following steps you'll set the control's theme and add a style to override the icon element in that theme. Complete the following steps to add an icon to the caption bar: 1. Navigate to the Visual Studio Toolbox and add the C1Window control to your page. 2. Open the C1Window Tasks menu from its smart tag and select the ShowOnLoad checkbox to set the ShowOnLoad property to True: For more information on accessing the smart tag, see C1Window Smart Tag (page 25). 3. In the C1Window Tasks menu click on the VisualStyle drop-down box and select Vista. 4. Select Website | Add Existing Item. The Add Existing Item dialog box will open. 5. Locate the image you wish to add to the caption bar and select Add to add it to the project. Note that in this example, the following image was used: Image Name Size mail.gif 16 x 12 pixels You can add your own image, or use the one above. To use the above image, right-click the image in the table above and select Copy. Paste the image into a paint program of your choice and save it with the name and dimensions indicated above. 6. Switch to source view and add the following <style> tag between the <head> and </head> tags at the top of the page: <style> .C1Window_Vista .C1Heading .C1Icon { float:left; height:12px; margin-right:3px; margin-top:20px; width:16px; background: transparent url('mail.gif') no-repeat; } </style> Replace mail.gif in the above with the name of your image, if different. This style will override the default icon image (none) in the Vista style. 7. Run your application. The dialog window appears with an icon in the caption bar: 74
  • Customizing the Status Bar The following topics detail how you can customize the C1Window status bar simply and easily by hiding status and customizing the content and appearance of the status bar Showing the Status Bar By default the C1Window control does not display a status bar at the bottom of the control. You can easily add the status bar in source markup, the designer, or in code using the StatusVisible property. In Source View To show the status bar add StatusVisible="True" to the <cc1:Window> tag so it appears similar to the following: <cc1:C1Window ID="C1Window1" runat="server" StatusVisible="True"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> </cc1:C1Window> In Design View To show the status bar using the designer, navigate to the Properties window and set the StatusVisible property to True. In Code To show the status bar, add the following code to the Page_Load event:  Visual Basic C1Window1.StatusVisible = True  C# C1Window1.StatusVisible = true; Setting the Status Bar Content Adding text to the status bar is a simple as clicking in the C1Window status bar area and typing. In this topic you'll add a drop-down box to the dialog window's status bar that will change the content of the dialog window. To customize the status bar, complete the following steps: 75
  • 1. Navigate to the Visual Studio Toolbox and add the C1Window control to your page, and resize the control. 2. Open the C1Window Tasks menu from its smart tag and select the ShowOnLoad checkbox to set the ShowOnLoad property to True: For more information on accessing the smart tag, see C1Window Smart Tag (page 25). 3. In the C1Window Tasks menu click the VisualStyle drop-down arrow and select Office2007Blue. 4. Select the C1Window control and set the following in the Properties window:  Set the Width property to 325.  Set the Height property to 200.  Set the Text property to "Search!".  Set the ContentUrl property to "http://www.yahoo.com". 5. Click once in the status bar of the dialog window and type "Go to: ". 6. Switch to Source view and notice that the text you just added is enclosed in the <StatusTemplate> tag. 7. Add a drop-down list to the <StatusTemplate> tag so that it appears like the following: <StatusTemplate> Go to: <asp:DropDownList ID="searchSites" runat="server" onchange="ddlChange(this)"> <asp:ListItem Value="http://www.yahoo.com/" Selected="True">Yahoo!</asp:ListItem> <asp:ListItem Value="http://www.google.com/">Google</asp:ListItem> <asp:ListItem Value="http://www.wikipedia.com/">Wikipedia</asp:ListItem> </asp:DropDownList> </StatusTemplate> 8. Add the following script between the <head> and </head> tags of your page: <script id="c1d_script" type="text/javascript"> function ddlChange(sender) { var option = sender.options[sender.selectedIndex]; $get("<%= C1Window1.ClientID %>").control.setUrl(option.value); } </script> 9. Switch to Design view and note that your page now looks similar to the following: 76
  • Run your application and observe: The dialog window appears with the drop-down list in the status bar; select a Web site from the list and observe that the dialog window loads that Web site: Setting the Loading Image By default, an image appears in the status bar while the content of the dialog window is loading. By default this loading image is set to a spinner image. You can set the image used as a spinner using styles. Note that to complete the steps in this topic you should have a small animated image available to replace the default spinner image. To customize the loading image, complete the following steps: 1. Navigate to the Visual Studio Toolbox and double-click the C1Window icon to add the control to your page. 2. Resize the C1Window control on the page. 3. Open the C1Window Tasks menu from its smart tag and select the ShowOnLoad checkbox to set the ShowOnLoad property to True: 77
  • For more information on accessing the smart tag, see C1Window Smart Tag (page 25). 4. In the C1Window Tasks menu click on the VisuaStyle drop-down arrow and select Office2007Silver. 5. To add content to be loaded, navigate to the Properties window and set the ContentUrl property to a Web site, for example "http://labs.componentone.com/". 6. In the Website menu select Add Existing Item. 7. Locate your image file and then click OK to add it to the project. Note that in this example the following image was used: Image Name spinner.gif 8. Add the following <style> tag to the <head> tag on your page, so that it looks like the following: <head runat="server"> ... <style> .C1Window_Office2007Silver .C1ContentPanel .C1Spinner { height:16px; width:16px; background:url('spinner.gif') no-repeat; float:left; margin: 4px 0 0 5px; } </style> </head> Replace "spinner.gif" above with the name of your image. For more about styles, see the Styles (page 33) topic. This topic illustrates the following: The dialog window appears with your spinner image in the status bar when the window's content is being loaded: 78
  • Customizing the Dialog Window You have full control over the initial size and location of the dialog window and the user's ability to resize, reposition, and minimize the dialog window. The following topics describe how customizing the dialog window is as simple as setting a few properties. Showing the Dialog Window on Page Load By default the C1Window control is not shown on page load. You can set a dialog window to show on page load by setting the ShowOnLoad property to True in Source view, Design view, or in code. In Source View To set the ShowOnLoad property to True add ShowOnLoad="True" to the <cc1:Window> tag so it appears similar to the following: <cc1:C1Window ID="C1Window1" runat="server" ShowOnLoad="True"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> </cc1:C1Window> In the Properties Window Select the dialog window and in the Properties window set the ShowOnLoad property to True. In the C1Window Tasks Menu Open the C1Window Tasks menu from its smart tag and select the ShowOnLoad checkbox to set the ShowOnLoad property to True: 79
  • In Code To set a dialog window to show on page load, add the following code to your project:  Visual Basic C1Window1.ShowOnLoad = True  C# C1Window1.ShowOnLoad = true; Adding Keyboard Support The C1Window control lets you easily add keyboard accessibility to the control. You can use the C1Window.AccessKey property to set how the user navigates to the dialog windows and through your user interface. In the following examples you'll set the C1Window.AccessKey property to w so that pressing the ALT+W key combination at run time brings the C1Window control into focus. In Source View In Source view add AccessKey="w" to the <cc1:C1Window> tag so it appears similar to the following: <cc1:C1Window ID="C1Window1" runat="server" AccessKey="w"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> </cc1:C1Window> In Design View In Design view select the C1Window control and in the Properties window set the C1Window.AccessKey property to w. In Code Add the following code to the Page_Load event to set the C1Window.AccessKey property to w:  Visual Basic Me.C1Window1.AccessKey = "w"  C# this.C1Window1.AccessKey = "w"; Preventing Window Resizing By default users can resize the dialog window at run time, but you can prevent users from doing so by using the AllowResize property. You can set the AllowResize property in Source view, Design view, or in code. In Source View 80
  • To prevent users from resizing the C1Window dialog window add AllowResize="False" to the <cc1:Window> tag so it appears similar to the following: <cc1:C1Window ID="C1Window1" runat="server" AllowResize="False"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> </cc1:C1Window> In Design View To prevent users from resizing the C1Window dialog window navigate to the Properties window and set the AllowResize property to False. In Code To allow users to resize the C1Window dialog window in code, add the following code to your project:  Visual Basic C1Window1.AllowResize = False  C# C1Window1.AllowResize = false; This topic illustrates: After setting the AllowResize property to True, run the application and observe that you can no longer resize the dialog window at run time by dragging the bottom right corner of the dialog window. Preventing Window Repositioning By default users can reposition the dialog window at run time through a drag-and-drop operation. If you do not want users to be able to move the dialog window you can prevent this in Source view, Design view, or in code by setting the AllowMove property. In Source View To prevent users from repositioning the C1Window dialog window add AllowMove="False" to the <cc1:Window> tag so it appears similar to the following: <cc1:C1Window ID="C1Window1" runat="server" AllowMove="False"> <CaptionButtons> 81
  • <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> </cc1:C1Window> In Design View To prevent users from repositioning the C1Window dialog window navigate to the Properties window and set AllowMove to False. In Code To prevent users from repositioning the C1Window dialog window in code, add the following code to your project:  Visual Basic C1Window1.AllowMove = False  C# C1Window1.AllowMove = false; This topic illustrates the following: Run your application and notice that you cannot reposition the dialog window at run time. Setting the Window Location You can control where the dialog window should initially appear through the StartPosition property. You can set the StartPosition property to ByDefault, Page, Parent, Manual, or OffSet. The default position for the dialog window is in the upper left corner of the Web page and by setting the StartPosition property to Manual you can control the exact location of the dialog window. You can easily set the dialog window's location in the designer or in code. In Source View To set the initial location of the C1Window dialog window add text to the <cc1:Window> tag so it appears similar to the following: <cc1:C1Window ID="C1Window1" runat="server" StartPosition="Manual" X="200" Y="100"> <CaptionButtons> <CollapseExpandButton Visible="False" /> 82
  • <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> </cc1:C1Window> In Design View To set the initial location of the C1Window dialog window in the designer, complete the following steps: Select the C1Window control and in the Properties window set the following properties:  Set the StartPosition property to Manual. If the StartPosition property is set to something other than Manual, changes you make to the X and Y properties will not take effect.  Set the X property to 200.  Set the Y property to 100. The dialog window will initially appear 200 pixels from the left and 100 pixels from the top of the Web page. In Code To set the initial location of the C1Window dialog window in code, add the following code to the Page_Load event:  Visual Basic C1Window1.StartPosition = C1WindowPosition.Manual C1Window1.X = 200 C1Window.Y = 100  C# C1Window1.StartPosition = C1WindowPosition.Manual; C1Window1.X = 200; C1Window1.Y = 100; This topic illustrates the following: Run your application and note that the dialog window initially appears 200 pixels from the left and 100 pixels from the top of the Web page. For information about setting the dialog window's location at run time, see Setting the Dialog Window Location at Run Time (page 98). Setting the Height and Width You can adjust the height and width of the C1Window dialog window in the designer or in code. In Source View To set the height and width of the C1Window dialog window add text to the <cc1:Window> tag so it appears similar to the following: <cc1:C1Window ID="C1Window1" runat="server" Height="100px" Width="200px"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> 83
  • </cc1:C1Window> In Design View To set the height and width of the C1Window dialog window in the designer, simply drag the bottom right corner of the dialog window to set the initial dialog window size: Or To set the height and width of the C1Window dialog window in the Properties window, expand the Layout node and enter the Height and Width properties in the Properties window: In Code To set the height and width of the C1Window dialog window in code, add the following code to the Page_Load event:  Visual Basic ' Set the dimensions of the dialog window to 100 pixels tall and 200 pixels wide. C1Window1.Height = Unit.Pixel(100) C1Window1.Width = Unit.Pixel(200)  C# // Set the dimensions of the dialog window to 100 pixels tall and 200 pixels wide. C1Window1.Height = Unit.Pixel(100); 84
  • C1Window1.Width = Unit.Pixel(200); Using the MinimizeZoneElementID Property The MinimizeZoneElementId property allows you to indicate a form element used to dock dialog windows. When the dialog windows are docked, they will appear similar to windows docked on a task bar. In the following example, you will create a panel control and three dialog windows that dock within that panel control. Complete the following steps to create three windows that dock within a panel: 1. From the Toolbox add the following controls to your Web page:  One Panel control  Three C1Window controls 2. For each C1Window control, open the C1Window Tasks menu from its smart tag and click on the VisualStyle drop-down arrow and select the following schemes:  Set the C1Window1 scheme to Office2007Black.  Set the C1Window2 scheme to Office2007Blue.  Set the C1Window3 scheme to Office2007Silver. 3. Double-click the Web page to create an event handler for the Load event. Enter the following code for the Page_Load event to set the size, style, and location of the controls:  Visual Basic ' Set Panel1's size and style. Panel1.BorderColor = System.Drawing.Color.DarkBlue Panel1.BorderStyle = BorderStyle.Dashed Panel1.BorderWidth = 2 Panel1.Height = 112 Panel1.Width = 115 ' Show the dialog windows on page load. C1Window1.ShowOnLoad = True C1Window2.ShowOnLoad = True C1Window3.ShowOnLoad = True ' Do not show the status bar. C1Window1.StatusVisible = False C1Window2.StatusVisible = False C1Window3.StatusVisible = False ' Set C1Window1's size and starting position. C1Window1.Height = 135 C1Window1.Width = 200 C1Window1.StartPosition = C1WindowPosition.Manual C1Window1.X = 100 C1Window1.Y = 10 ' Set C1Window2's size and starting position. C1Window2.Height = 135 C1Window2.Width = 200 C1Window2.StartPosition = C1WindowPosition.Manual C1Window2.X = 125 C1Window2.Y = 35 85
  • ' Set C1Window3's size and starting position. C1Window3.Height = 135 C1Window3.Width = 200 C1Window3.StartPosition = C1WindowPosition.Manual C1Window3.X = 150 C1Window3.Y = 60  C# // Set Panel1's size and style. Panel1.BorderColor = System.Drawing.Color.DarkBlue; Panel1.BorderStyle = BorderStyle.Dashed; Panel1.BorderWidth = 2; Panel1.Height = 112; Panel1.Width = 115; // Show the dialog windows on page load. C1Window1.ShowOnLoad = true; C1Window2.ShowOnLoad = true; C1Window3.ShowOnLoad = true; // Do not show the status bar. C1Window1.StatusVisible = false; C1Window2.StatusVisible = false; C1Window3.StatusVisible = false; // Set C1Window1's size and starting position. C1Window1.Height = 135; C1Window1.Width = 200; C1Window1.StartPosition = C1WindowPosition.Manual; C1Window1.X = 100; C1Window1.Y = 10; // Set C1Window2's size and starting position. C1Window2.Height = 135; C1Window2.Width = 200; C1Window2.StartPosition = C1WindowPosition.Manual; C1Window2.X = 125; C1Window2.Y = 35; // Set C1Window3's size and starting position. C1Window3.Height = 135; C1Window3.Width = 200; C1Window3.StartPosition = C1WindowPosition.Manual; C1Window3.X = 150; C1Window3.Y = 60; 4. Add the following code to set the MinimizeZoneElementId property for the C1Window controls:  Visual Basic ' Set the MinimizeZoneElementId for each dialog window. C1Window1.MinimizeZoneElementId = "Panel1" C1Window2.MinimizeZoneElementId = "Panel1" C1Window3.MinimizeZoneElementId = "Panel1"  C# // Set the MinimizeZoneElementId for each dialog window. C1Window1.MinimizeZoneElementId = "Panel1"; 86
  • C1Window2.MinimizeZoneElementId = "Panel1"; C1Window3.MinimizeZoneElementId = "Panel1"; This topic illustrates the following:  Run the program. The Web page will appear similar to the following:  Minimize the dialog windows. When minimized, the dialog windows appear docked within the panel control: Programming Tasks The following topics detail how you can create modeless and modal dialog windows programmatically. For more information about modeless and modal dialog windows, see Modal and Modeless Dialog Windows (page 26). Creating a Modeless Dialog Window in Code This topic details how to create a modeless dialog window in code. For more information about modeless dialog windows see the topic, Modeless Dialog Windows (page 27). Complete the following steps to create a modeless C1Window in code: 1. Add a reference to the C1.Web.UI.Controls.2.dll file in your project. 2. Navigate to the Toolbox and double-click the PlaceHolder icon to add the control to your page. 3. Switch to Source view and add the following JavaScript just above the opening <html> tag to get and show the modeless dialog window: <script type="text/javascript"> var form_dialog; function openWindow(dialog) { form_dialog = dialog.control; form_dialog.show(); 87
  • } </script> 4. Return to Design View and double-click the page to switch to Code view and create the Page_Load event. 5. Add the following at the top of the page to import the C1.Web.UI.Controls.C1Window namespace:  Visual Basic Imports C1.Web.UI.Controls.C1Window  C# using C1.Web.UI.Controls.C1Window; 6. In the Page_Load event add the following code to create the content, style, and general appearance for the modeless dialog window:  Visual Basic 'Create a hyperlink and add it to the page's controls. Dim hyprlnk As HyperLink = New HyperLink hyprlnk.Text = "Show Modeless Dialog Window" Page.Controls.Add(hyprlnk) ' Create a new C1Window control and add it to the page's controls. Dim dialog As C1Window = New C1Window PlaceHolder1.Controls.Add(dialog) ' Set the dialog window's caption bar content. dialog.Text = "&nbsp;Information" dialog.CaptionButtons.MaximizeButton.Visible = False dialog.CaptionButtons.MinimizeButton.Visible = False dialog.StatusVisible = False ' Set the dialog window's initial position. dialog.StartPosition = C1WindowPosition.Manual dialog.X = 50 dialog.Y = 50 ' Set the dialog window's initial size. dialog.Width = Unit.Pixel(250) dialog.Height = Unit.Pixel(150) ' Set the open dialog window handler. hyprlnk.NavigateUrl = String.Format("javascript:openWindow({0});", dialog.ClientID))  C# //Create a hyperlink and add it to the page's controls. HyperLink hyprlnk = new HyperLink(); hyprlnk.Text = "Show Modeless Dialog Window"; Page.Controls.Add(hyprlnk); // Create a new C1Window control and add it to the page's controls. C1Window dialog = new C1Window(); PlaceHolder1.Controls.Add(dialog); // Set the dialog window's caption bar content. dialog.Text = "&nbsp;Information"; dialog.CaptionButtons.MaximizeButton.Visible = false; dialog.CaptionButtons.MinimizeButton.Visible = false; dialog.StatusVisible = false; 88
  • // Set dialog window's initial position. dialog.StartPosition = C1WindowPosition.Manual; dialog.X = 50; dialog.Y = 50; // Set dialog window's initial size. dialog.Width = Unit.Pixel(250); dialog.Height = Unit.Pixel(150); // Set the open dialog window handler. hyprlnk.NavigateUrl = String.Format("javascript:openWindow({0});", dialog.ClientID); This topic illustrates the following: Run the program and click on the Show Modeless Dialog Window link; the dialog window will appear similar to the following: Creating a Modal Dialog Window in Code This topic details how to create a modal dialog window in code. A modal dialog window is a dialog window that must be closed before the user can continue working with the application. For more information about modal dialog windows see the topic, Modal Dialog Windows (page 27). Complete the following steps to create a modal dialog window: 1. Add a reference to the C1.Web.UI.Controls.2.dll file in your project. 2. Navigate to the Toolbox and double-click the PlaceHolder icon to add the control to your page. 3. Switch to Source view and add the following JavaScript just before the opening <html> tag to get and show the modal dialog window: <script type="text/javascript"> var form_dialog; function showModalDialog(dialog) { form_dialog = dialog.control; dialog.control.showModal(dialog); } </script> 4. Return to Design View and double-click the page to switch to Code view and create the Page_Load event. 5. Add the following at the top of the page to import the C1.Web.UI.Controls.C1Window namespace:  Visual Basic 89
  • Imports C1.Web.UI.Controls.C1Window  C# using C1.Web.UI.Controls.C1Window; 6. In the Page_Load procedure add the following code to create the content, style, and general appearance for the modal dialog window:  Visual Basic ' Create two hyperlinks and add them to the page's controls. Dim link1 As HyperLink = New HyperLink link1.Text = "Show Modal Dialog Window <BR/>" Page.Controls.Add(link1) Dim link2 As HyperLink = New HyperLink link2.Text = " Navigate Away" Page.Controls.Add(link2) ' Create a new C1Window control and add it to the page's controls. Dim dialog As C1Window = New C1Window PlaceHolder1.Controls.Add(dialog) dialog.VisualStyle = "Vista" ' Set caption bar content. dialog.Text = "&nbsp;Modal Dialog Window" dialog.CaptionButtons.MaximizeButton.Visible = False dialog.CaptionButtons.MinimizeButton.Visible = False dialog.StatusVisible = False ' Set initial position. dialog.StartPosition = C1WindowPosition.Manual dialog.X = 10 dialog.Y = 60 ' Set initial size. dialog.Width = Unit.Pixel(250) dialog.Height = Unit.Pixel(150) ' Set the hyperlink navigation. link1.NavigateUrl = String.Format("javascript:showModalDialog({0});", dialog.ClientID) link2.NavigateUrl = "http://www.componentone.com"  C# // Create two hyperlinks and add them to the page's controls. Hyperlink link1 = new HyperLink; link1.Text = "Show Modal Dialog Window <BR/>"; Page.Controls.Add(link1); Hyperlink link2 = new HyperLink; link2.Text = " Navigate Away"; Page.Controls.Add(link2); // Create a new C1Window control and add it to the page's controls. C1Window dialog = new C1Window(); PlaceHolder1.Controls.Add(dialog); dialog.VisualStyle = "Vista"; ' Set caption bar content. dialog.Text = "&nbsp;Modal Dialog Window"; 90
  • dialog.CaptionButtons.MaximizeButton.Visible = false; dialog.CaptionButtons.MinimizeButton.Visible = false; dialog.StatusVisible = false; // Set initial position. dialog.StartPosition = C1WindowPosition.Manual; dialog.X = 10; dialog.Y = 60; // Set initial size. dialog.Width = Unit.Pixel(250); dialog.Height = Unit.Pixel(150); // Set the hyperlink navigation. link1.NavigateUrl = String.Format("javascript:showModalDialog({0});", dialog.ClientID); link2.NavigateUrl = "http://www.componentone.com"; This topic illustrates the following:  Run the program and click on the Show Modal Window link; the dialog window will appear on the Web page similar to the following:  Attempt to click the Navigate Away link. Notice that you cannot click the link or interact with elements on the page unless you close the dialog window. Setting the ChildrenAsTriggers Property The ChildrenAsTriggers property sets the ChildrenAsTriggers of the embedded UpdatePanels. When the ChildrenAsTriggers property of C1Window is set to True, the ChildrenAsTriggers of the UpdatePanels is set to True and UpdateMode is set to Always. If the C1Window's ChildrenAsTriggers property is set to False, the ChildrenAsTriggers of the UpdatePanels is set to False and UpdateMode is set to Conditional automatically. The following steps provide an example of using the ChildrenAsTriggers property: 1. Add the following markup to the aspx page:  Markup to Add <c1controls:C1Window id="C1Window1" height="155" runat="server" 91
  • startposition="Manual" width="503" ShowOnLoad="true" ChildrenAsTriggers="true"> <CaptionButtons> <CollapseExpandButton Visible="true" /> <PinButton Visible="true" /> <ReloadButton Visible="true" /> </CaptionButtons> <ContentTemplate> <asp:Label ID="lblContent" runat="server" /> <asp:Button ID="btnPostBack" runat="server" Text="PostBackFromC1Window" OnClick="C1Window1ChildrenPostBack" /> </ContentTemplate> <StatusTemplate> <asp:Label ID="lblStatus" runat="server" /> </StatusTemplate> </c1controls:C1Window> 2. Switch to Code view and implement the ChildrenPostBack method to handle the button click event.  C# protected void C1Window1ChildrenPostBack(object sender, EventArgs e) { lblContent.Text = "content updated at:" + DateTime.Now; lblStatus.Text = "status updated at:" + DateTime.Now; } 3. Run the project and at run time, click on the button within the C1Window control. Notice that both labels in the content and status areas are updated. This is because you set ChildrenAsTriggers to True. 4. Return to the project and set the ChildrenAsTriggers to False. Run the application again and notice that label text will not be updated on clicking the button at run time. 5. Add the following code to explicitly update content update panel in ChildrenPostBack:  C# protected void C1Window1ChildrenPostBack(object sender, EventArgs e) { lblContent.Text = "content updated at:" + DateTime.Now; lblStatus.Text = "status updated at:" + DateTime.Now; (C1Window1.FindControl("c1contentupdatepanel") as UpdatePanel).Update(); } 6. Run the project and notice that the content of the label is updated when the button is clicked. 7. Add the following code to update the status label:  C# protected void C1Window1ChildrenPostBack(object sender, EventArgs e) { lblContent.Text = "content updated at:" + DateTime.Now; lblStatus.Text = "status updated at:" + DateTime.Now; (C1Window1.FindControl("c1contentupdatepanel") as UpdatePanel).Update(); (C1Window1.FindControl("c1statusupdatepanel") as UpdatePanel).Update(); } 92
  • Client-Side Tasks The following topics detail how you make changes to the dialog window at run time. By using Window for ASP.NET AJAX's client-side code, you can implement many features to your Web page without the need to send information to the Web server which takes time. Thus, using client-side code can increase the efficiency of your Web site. For more information, see the Working with Client-Side Script (page 53) topic. Setting the ContentURL Property at Run Time In C1Window you can include external content in a dialog window. This means that you can have the content of another Web page in your project appear in your website or event the content of a Web site outside of your project. Pointing to external content is simple using the ContentURL property. To change the dialog window's ContentURL property at run time, call the set_contentURL method on the client side to get and set the content of the dialog window. To set the ContentURL in design time or in code instead, see Showing External Content in the Content Area (page 59). Complete the following steps to set the ContentURL property on the client side: 1. Navigate to the Visual Studio Toolbox, and double-click the C1Window icon to add the C1Window control to your page. 2. Click on the Source tab to switch to the .aspx code. Note that the code in the body of the page looks similar to the following: <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:C1Window ID="C1Window1" runat="server"> </cc1:C1Window> </div> </form> </body> 3. To customize the location and size of the dialog window, add text to the <cc1:C1Window> tag so it looks like the following: <cc1:C1Window ID="C1Window1" runat="server" Height="250px" Width="375px" ShowOnLoad="True" StartPosition="Manual" X="10" Y="80"> This sets the ShowOnLoad property to True, the Width property to 375px, the Height property to 225px, the StartPosition property to Manual, the X property to 10, and the Y property to 80. 4. Enter the following code after the </cc1:C1Window> tag to create a text box and a button to get and set the content of the dialog window: <br /><input id="TxtUrl" type="text" value="http://www.componentone.com" /> <input id="button1" type="button" value="Set ContentUrl" onclick="dialog.setUrl(document.getElementById('TxtUrl').value)" /> 5. Click on the Design tab to switch to design view. Notice that the size of the dialog window reflects the changes you just made. 6. Click the control's smart tag ( ) to open the C1Window Tasks menu. 7. In the C1Window Tasks menu, click on the VisuaStyle drop-down arrow and select Office2007Black. 8. Double-click the page to switch to the Code view and create the Page_Load event handler. 9. Add the following code to the Page_Load event handler to initialize the C1Window control:  Visual Basic 93
  • Form.Controls.Add(New LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID)))  C# Form.Controls.Add(new LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID))); This topic illustrates the following: 1. Run the project and click the Set ContentURL button. The Web page will appear as follows: 2. Enter a new URL in the text box and click the Set ContentURL button again. The Web site you have just entered will be loaded into the dialog window. Adding a New Title to the Caption Bar at Run Time To change the text on the dialog window's caption bar at run time, call the set_text method on the client side to get and set the input value entered from the text box. In the following example a C1Window dialog window is added to the Web page with a text box to enter a new title in and a button to set the new title. Complete the following steps to add a new text to the caption bar at run time: 1. Navigate to the Visual Studio Toolbox, and double-click the C1Window icon to add the C1Window control to your page. 2. Click once on the C1Window control to select it and in the Properties window set the following properties:  Set the ShowOnLoad property to True.  Set the Width property to 225px.  Set the StartPosition property to Manual. 94
  •  Set the X property to 10px.  Set the Y property to 100px. 3. Click on the Source tab to switch to the .aspx code. Notice that the properties you just set are visible within the <cc1:C1Window> tag. The following code should appear in the body of your .aspx file: <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <cc1:C1Window ID="C1Window1" runat="server" ShowOnLoad="True" StartPosition="Manual" Width="225px" X="10" Y="100"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> </cc1:C1Window> </form> </body> 4. Enter the following code after the </cc1:C1Window> tag to create text box and button controls to get and set the value of the title for the dialog window: <br /><strong>Title</strong><br /> <input id="TextTitle" type="text" value="New Title" /> <input id="bSetTitle" type="button" value="Set Title" onclick="dialog.set_text(document.getElementById('TextTitle').value)"/> <br /> Switch to Design view. Note that the elements you added are reflected on your page. 5. Double-click the page to switch to the Code view and create the Page_Load event handler. 6. Add the following code to the Page_Load event:  Visual Basic Form.Controls.Add(New LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID)))  C# Form.Controls.Add(new LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID))); This topic illustrates the following: 1. Enter a new title in the text box, for example: "Reminder". 2. Click the Set Title button. The Web page will appear as follows: 95
  • Calling the Show and Hide Methods at Run Time You can use JavaScript to call the Show and Hide methods to show or hide a C1Window dialog window. In the following example, you will add a C1Window control to your page and two buttons: one that will show the dialog window and one that will hide the dialog window when shown. To call the Show and Hide methods, complete the following steps: 1. Navigate to the Visual Studio Toolbox, and double-click C1Window to add the C1Window control to your page. 2. Click the control's smart tag ( ) to open the C1Window Tasks menu. 3. Click on the VisuaStyle drop-down arrow and select Office2007Blue. 4. Navigate to the Properties window and set the Width property to 210px. 5. Click on the Source tab to switch to the .aspx code. The following code should appear within the <body> tag of your .aspx file: <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <cc1:C1Window ID="C1Window1" runat="server" AllowResize="True" Height="150px" VisualStyle="Office2007Blue" VisualStylePath="~/C1WebControls/VisualStyles" Width="210px" X="0" Y="0"> <CaptionButtons> <CollapseExpandButton Visible="False" /> <CloseButton Visible="True" /> <Icon Visible="True" /> <MaximizeButton Visible="True" /> <MinimizeButton Visible="True" /> <PinButton Visible="False" /> <ReloadButton Visible="False" /> </CaptionButtons> </cc1:C1Window> </form> </body> 6. Enter the following code after the </cc1:C1Window> tag to create a button to show the dialog window and another button to hide the dialog window: 96
  • <br /><strong>Window<br /> </strong><input id="bShow" type="button" value="Show" onclick="dialog.show()" /> <input id="bHide" type="button" value="Hide" onclick="dialog.hide()"/><br /><br /> 7. Switch to Design view. 8. Double-click the Web page to switch to Code view and create an event handler for the Load event. 9. Enter the following code in the Page_Load event to initialize the control:  Visual Basic Form.Controls.Add(New LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID)))  C# Form.Controls.Add(new LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID))); This topic illustrates the following: Run the application and observe that when you click the Show button the dialog window appears and when you click the Hide button the dialog window no longer appears. Resizing the Dialog Window at Run Time You can easily resize the height and width of the dialog window at run time. In the following steps you'll call the get_style().height and get_style().width methods on the client side to resize the dialog window based on values entered in text boxes. In the following example a C1Window dialog window is added to the Web page with two text boxes to enter height and width values and a button to resize the dialog window. Complete the following steps to resize the dialog window at run time: 1. In Design view, navigate to the Visual Studio Toolbox, and double-click the C1Window icon to add the C1Window control to your page. 2. Click on the Source tab to switch to the .aspx code. 3. Update the <cc1:C1Window> tag to show the dialog window on page load and set the initial dialog window size and location: <cc1:C1Window ID="C1Window1" runat="server" Height="100px" ShowOnLoad="True" Width="225px" StartPosition="Manual" X="10" Y="80"> 4. Enter the following code just after the </cc1:C1Window> tag to create text box and button controls to set the dialog window height and width: <strong>Set Dialog Window Height and Width</strong><br/> <label>Set Height:</label>&nbsp; <input id="HeightBox" type="text" value="100" style="width:30px"/>&nbsp; <label>Set Width:</label>&nbsp;&nbsp; <input id="WidthBox" type="text" value="225" style="width:30px"/> &nbsp;&nbsp; &nbsp;<input id="resizeButton" runat="server" type="button" value="Resize" onclick="dialog.resize(parseInt(document.getElementById('WidthBox').val ue), parseInt(document.getElementById('HeightBox').value))" /> 5. Switch to Design view. 6. Double-click the form to switch to Code view create the Page_Load event handler. 97
  • 7. Enter the following code in the Page_Load event to initialize the control:  Visual Basic Form.Controls.Add(New LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID)))  C# Form.Controls.Add(new LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID))); Run the application and observe: 1. Enter new values in the height or width text boxes, for example set the Set Height text box to 100 and the Set Width text box to 100. 2. Click the Resize button. The dialog window resizes to the entered values: Setting the Dialog Window Location at Run Time You can easily change the location of the dialog window at run time. In the following steps you'll call the move(x,y) method on the client side to move the dialog window to a location specified in text boxes. In the following example a C1Window dialog window is added to the Web page with two text boxes to enter the horizontal (X) and vertical (Y) location and a button to move the dialog window. Complete the following steps to resize the dialog window at run time: 1. Navigate to the Visual Studio Toolbox, and double-click C1Window to add the C1Window control to your page. 2. Click the control's smart tag ( ) to open the C1Window Tasks menu. For more information on accessing the smart tag, see C1Window Smart Tag (page 25). 3. Click on the VisuaStyle drop-down arrow and select Office2007Silver. 4. Click on the Source tab to switch to the .aspx code. 5. Update the <cc1:C1Window> tag to show the dialog window on page load and set the initial dialog window size and location: <cc1:C1Window ID="C1Window1" runat="server" VisualStyle="Office2007Silver" VisualStylePath="~/C1WebControls/VisualStyles" Height="175px" ShowOnLoad="True" Width="225px" StartPosition="Manual" X="10" Y="90"> 6. Enter the following code after the </cc1:C1Window> tag to create text box and button controls to set the dialog window's horizontal and vertical location: 98
  • <strong>Set Dialog Window Location</strong><br/> <label>Horizontal:</label>&nbsp; <input id="xValue" type="text" value="10" style="width:30px"/>&nbsp; <label>Vertical:</label>&nbsp;&nbsp; <input id="yValue" type="text" value="90" style="width:30px"/> &nbsp;&nbsp; &nbsp; <input id="moveButton" runat="server" type="button" value="Set Location" onclick="dialog.move(parseInt(document.getElementById('xValue').value), parseInt(document.getElementById('yValue').value))"/> 7. Switch to Design view. Notice that the changes you made are now reflected on the page. 8. Double-click the form to switch to Code view and create the Page_Load event handler. 9. Enter the following code in the Page_Load event to initialize the control:  Visual Basic Form.Controls.Add(New LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID)))  C# Form.Controls.Add(new LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID))); Run the application and observe: 1. Enter new values in the horizontal and vertical text boxes, for example set the Horizontal text box to 100 and the Vertical text box to 50. 2. Click the Set Location button. The dialog window moves to reflect the entered values: 99