componentone window for asp.net ajaxprerelease.componentone.com/help/legacy/aspnet/asp... ·...

ComponentOne

Window for ASP.NET AJAX

Copyright 2011 ComponentOne LLC. All rights reserved.

Corporate Headquarters ComponentOne LLC 201 South Highland Avenue 3rd Floor

Pittsburgh, PA 15206 ∙ USA

Internet: [email protected]

Web site: http://www.componentone.com

Sales

E-mail: [email protected]

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™.

mailto:[email protected]

http://www.componentone.com/

http://www.doctohelp.com/

iii

Table of Contents

ComponentOne Window for ASP.NET AJAX Overview ...............................................................................1

Installing Window for ASP.NET AJAX ....................................................................................................... 1

C1Window for ASP.NET AJAX Setup Files .................................................................................. 1

System Requirements ....................................................................................................................... 2

Installing Demonstration Versions ................................................................................................... 2

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

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

Window for ASP.NET AJAX 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 in Window for ASP.NET AJAX ................................................................................. 27

C1Window Smart Tag ................................................................................................................................. 27

C1Window Context Menu........................................................................................................................... 28

Modal and Modeless Dialog Windows ........................................................................................................ 28

Modal Dialog Windows............................................................................................................................... 29

iv

Modeless Dialog Windows .......................................................................................................................... 29

C1Window Elements .................................................................................................................................. 29

Content Element .......................................................................................................................................... 29

Caption Bar Element .................................................................................................................................... 30

Status Bar Element ....................................................................................................................................... 31

Window for ASP.NET AJAX Appearance................................................................................................... 33

Visual Styles ................................................................................................................................................. 33

Styles ............................................................................................................................................................ 35

Content Styles ................................................................................................................................. 35

Caption Bar Styles .......................................................................................................................... 37

Status Bar Styles ............................................................................................................................. 45

Content and Status Bar Templates ............................................................................................................... 48

Window for ASP.NET AJAX Behavior ....................................................................................................... 48

Window Positioning and Sizing .................................................................................................................. 48

Window Position ............................................................................................................................ 48

Window Size .................................................................................................................................. 48

Window Moving ............................................................................................................................ 49

Window Minimizing .................................................................................................................................... 49

Animation .................................................................................................................................................... 50

Animation Effects ........................................................................................................................... 50

Animation Duration ....................................................................................................................... 51

Partial Rendering ......................................................................................................................................... 51

Working with Client-Side Script in Window for ASP.NET AJAX ................................................................. 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

v

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 .................................................................... 95

Calling the Show and Hide Methods at Run Time ........................................................................ 97

Resizing the Dialog Window at Run Time .................................................................................... 98

Setting the Dialog Window Location at Run Time ....................................................................... 99

1

ComponentOne Window for ASP.NET

AJAX Overview ComponentOne Window for ASP.NET AJAX allows you to

think outside the traditional dialog box and create robust, AJAX-enabled, interactive, completely customizable dialog windows. The C1Window control can be used to create flexible and robust modal and modeless dialog windows on the client or server-side to display information, external content, and

through the use of input controls such as ComponentOne

Input for ASP.NET AJAX™, receive input from the user.

With a rich client-side object model, several Visual Styles, and content template support you can easily adapt 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.

Getting Started

Get started with the following topics:

- Key Features (page

14)

- Quick Start (page 17)

- Control Elements (page 29)

- Samples (page 59)

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 Files\ComponentOne\Studio 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.

C1WebUi Contains files (at least a readme.txt) related to the product.

C1WebUi\VisualStyles Contains all external file themes.

The ComponentOne Studio for ASP.NET AJAX Help Setup program installs integrated Microsoft Help 2.0 and Microsoft Help Viewer help to the C:\Program Files\ComponentOne\Studio for ASP.NET directory in the following folders:

H2Help Contains Microsoft Help 2.0 integrated documentation for all Studio components.

HelpViewer Contains Microsoft Help Viewer Visual Studio 2010 integrated documentation for all Studio components.

Samples

2

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 Documents\ComponentOne Samples

Windows 7/Vista path: C:\Users\<username>\Documents\ComponentOne 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.

Samples can be accessed from the ComponentOne Sample Explorer. To view samples, on your desktop, click the

Start button and then click All Programs | ComponentOne | Studio for ASP.NET | Samples | Palomino

Samples.

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.

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.

http://ajax.asp.net/downloads/

http://ajax.asp.net/

http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.aspx

3

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.

To uninstall Studio for ASP.NET AJAX integrated help:

1. Open the Control Panel and select Add or Remove Programs (Programs and Features in Windows 7/Vista).

2. Select ComponentOne Studio for ASP.NET AJAX Help and click the Remove button.

3. Click Yes to remove the integrated help.

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.)

http://www.componentone.com/SuperPages/Licensing/

4

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 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.

5

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:Debug\MyApp.exe.licenses

6

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:


7

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.


For ASP.NET 2.x applications, follow these steps:


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).


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/SuperProducts/SupportServices/.

Some methods for obtaining technical support include:

http://prerelease.componentone.com/

http://www.componentone.com/SuperProducts/SupportServices/

8

Online Resources ComponentOne provides customers with a comprehensive set of technical resources in the form of FAQs, samples and videos, Version Release History, 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.

Product Forums ComponentOne's product forums are available for users to share information, tips, and techniques regarding ComponentOne products. ComponentOne developers will be available on the forums to share

insider tips and technique and answer users' questions. 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

Microsoft integrated ComponentOne documentation can be installed with each of our products, and

documentation is also available online. 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.4.dll


Site licenses are available for groups of multiple developers. Please contact [email protected] for details.

About This Documentation Acknowledgements

http://our.componentone.com/

http://www.componentone.com/Members/?ReturnUrl=%2fSupport%2fdefault.aspx%3fnew%3dtrue


http://our.componentone.com/groups/






http://www.componentone.com/SuperProducts/SupportServices/



9

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)


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#


http://www.doctohelp.com/

10

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

Visual Studio 2005 Service Pack 1

ASP.NET AJAX Extensions 1.0

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:

a. From the File menu, select New | Web Site. The New Web Site dialog box opens.

b. 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.

c. In the list of templates, select AJAX 1.0-Enabled ASP.NET 2.0 Web Site.

http://msdn.microsoft.com/en-us/default.aspx


http://msdn.microsoft.com/

http://www.asp.net/ajax/


http://www.asp.net/ajax/downloads/archive/


http://msdn.microsoft.com/en-us/default.aspx

11

d. 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.

a. From the File menu, select New | Project. The New Project dialog box opens.

b. 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.

c. 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.

d. Select AJAX 1.0-Enabled ASP.NET 2.0 Web Application from the list of Templates in the right

pane.

e. Enter a URL for your application in the Location field and click OK.



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:

a. From the File menu in Microsoft Visual Studio .NET, select New Web Site. The New Web Site dialog box opens.

b. Select ASP.NET AJAX-Enabled Web Site from the list of Templates.

c. Enter a URL for your site in the Location field and click OK.







12

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.

a. From the File menu in Microsoft Visual Studio 2005, select New Project. The New Project dialog box opens.

b. Under Project Types, choose either Visual Basic Projects or Visual C# Projects. Note that one of

these options may be located under Other Languages.

c. Select ASP.NET AJAX-Enabled Web Application from the list of Templates in the right pane.

d. Enter a URL for your application in the Location field and click OK.






Adding the C1Window Component to a Project When you install ComponentOne Studio for ASP.NET AJAX, the Create a ComponentOne Visual Studio

2005\2008 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 2005\2008 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.

13

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.


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.




14

Window for ASP.NET AJAX 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 in Window for ASP.NET AJAX (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 28).

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 35).

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 33).




15

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 48).

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

16

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.

17

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 29) 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.

18

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 29) 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.

19

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 28).

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.

20

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.

21

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!

23

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:

Visual Basic Protected Sub Page_Load(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.Load

' other operation

…

' close window after content is updated

Dim clientID As String = C1Window1.ClientID

ScriptManager.RegisterClientScriptBlock(Me, Me.[GetType](), "scriptKey",

String.Format("$find('{0}').hide()", clientID), True)

End Sub

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:



C1Window1.StartPosition = C1WindowPosition.Page

C1Window1.HorizontalAlign = HorizontalPosition.Center

C1Window1.VerticalAlign = VerticalPosition.Middle

End Sub

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:

http://forums.componentone.com/CS/forums/87.aspx

24



C1Window1.ContentUrl = "http://www.msn.com"

End Sub


{

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:



' set icon to visible

C1Window1.CaptionButtons.Icon.Visible = True

' set icon path

C1Window1.ImageUrl = "~/Images/copy.gif"

' set icon size

C1Window1.ImageHeight = 15

C1Window1.ImageWidth = 15

End Sub


{

// set icon to visible

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:



' no proxy

C1Window1.ResizeSettings.UseHelper = False

' set minimum height and width of C1Window

C1Window1.ResizeSettings.MinHeight = 100

C1Window1.ResizeSettings.MinWidth = 300

End Sub

25


{

// 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:



C1Window1.OnEscPressedClose = True

End Sub


{

C1Window1.OnEscPressedClose = true;

}

27

Design-Time Support in Window for

ASP.NET AJAX 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 27) and context menu (page 28), 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

28

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 33).

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 27).

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

29

the different ways applications use dialog boxes, C1Window supports two different types of dialog windows: modal (page 29) and modeless (page 29) dialog windows.

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:

30

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 35).

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:

31

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).

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

32

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:


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:

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.

33

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 35).

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 27) for more information.

Click the drop-down arrow next to VisualStyle in the C1Window control's Properties window.

34

Available Themes

The following predefined schemes are available for C1Window:

Visual Styles Preview

ArcticFox (default)

Office2007Black

Office2007Blue

35

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

is used to dock the window horizontally.

.C1Window_ArcticFox

{

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:


.C1ContentPanel

.C1Outer Sets the outer border for when the control is not in focus.

.C1Window_ArcticFox .C1ContentPanel

.C1Outer

{

background:transparent url('<%=

36

WebResource("C1.Web.UI.Controls.C1

Window.VisualStyles.ArcticFox.Images.content_left_unfocused.gif")%>')

repeat-y scroll left top;

padding-left:5px;

}

.C1ContentPanel

.C1Inner Sets the inner border for when the control is not in focus.


.C1Inner

{


WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.

content_right_unfocused.gif")%>') repeat-y scroll right top;

padding-right:5px;

}

.C1ContentPanel

.C1Content

Sets the content background style.


.C1Content

{

background:#FFFFFF;

}

.C1ContentPanel

.C1ContentTemplate Sets the content template style.


.C1ContentTemplate

{

font-size:12px;

}

.C1Focus

.C1ContentPanel

.C1Outer

Sets the outer border for when the control is in focus.

.C1Window_ArcticFox .C1Focus

.C1ContentPanel .C1Outer

{



content_left.gif")%>') repeat-y scroll left top;

padding-left:5px;

}

.C1Focus

.C1ContentPanel

.C1Inner

Sets the inner border for when the

control is in focus.


.C1ContentPanel .C1Inner

{

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

.C1ContentPanel

Sets the outer border for when the .C1Window_ArcticFox .C1Maximized

37

.C1Outer control is maximized.

.C1ContentPanel .C1Outer

{

background-image: none;

padding-left:0px;

}

.C1Maximized

.C1ContentPanel

.C1Inner

Sets the inner border for when the

control is not maximized.

.C1Window_ArcticFox .C1Maximized

.C1ContentPanel .C1Inner

{


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:


.C1Heading .C1Outer Sets the outer heading border for

when the control is not in focus.

.C1Window_ArcticFox .C1Heading

.C1Outer

{



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



.C1Inner

{



Window.VisualStyles.ArcticFox.Images.title_right_unfocused.gif")%>') no-

repeat scroll right top;

padding-right:5px;

}

.C1Heading

.C1Content Sets the heading's content style.


.C1Content

{



title_center_unfocused.gif")%>') repeat-x scroll left top;

38

padding: 0px 0px 0px 0px;

height: 30px;

}

.C1Focus .C1Heading

.C1Outer Sets the outer heading border for when the control is in focus.


.C1Heading .C1Outer

{


Window.VisualStyles.ArcticFox.Images.

title_left.gif")%>') no-repeat scroll left top;

}

.C1Focus .C1Heading

.C1Inner Sets the inner heading border for when the control is in focus.


.C1Heading .C1Inner

{



title_right.gif")%>') no-repeat scroll right top;

}

.C1Focus .C1Heading

.C1Content Sets the heading's content style when the control is in focus.


.C1Heading .C1Content

{



title_center.gif")%>') repeat-x scroll left top;

}

.C1Focus-

C1Maximized .C1Heading .C1Outer

Sets the outer heading border for

when the control is in focus and maximized.

.C1Window_ArcticFox .C1Focus-

C1Maximized .C1Heading .C1Outer

{


padding-left:0px;

}

.C1Focus-C1Maximized

.C1Heading .C1Inner

Sets the inner heading border for when the control is in focus and

maximized.

.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1Inner

{


padding-right:0px;

}

.C1Focus-

C1Maximized .C1Heading

.C1Content

Sets the heading's content style



C1Maximized .C1Heading .C1Content

{



39


title_center_maximize.gif")%>') repeat-x scroll left top;

}

.C1Heading

.C1TextNode Sets the heading's text node style 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

.C1TextNode


when the control is in focus.


.C1Heading .C1TextNode

{

color:#767676;

}

.C1Focus-

C1Maximized .C1Heading

.C1TextNode




C1Maximized .C1Heading .C1TextNode

{

color: #FFFFFF;

}

.C1Heading .C1Icon Sets the heading's icon image.


.C1Icon

{

float:left;

display:none;

}

.C1Heading .C1List

.C1ListItem

Sets the heading's button styles.


.C1List .C1ListItem

{



Window.VisualStyles.ArcticFox.Images.Tool-Sprites.gif")%>') no-repeat scroll

left top;

cursor:pointer;

float:left;

overflow:hidden;

height: 16px;

40

width: 18px;

margin-left:1px;

}

.C1Heading

.C1ControlBox Sets the heading's button styles. .C1Window_ArcticFox .C1Heading

.C1ControlBox

{

float:right;

padding-top:7px;

}

.C1Heading .C1List

.C1Closer

Sets the heading's Close button

styles when the control is not in focus.


.C1List .C1Closer

{

background-position: 0px 0px;

}

.C1Focus .C1Heading

.C1List .C1Closer


styles when the control is in focus.


.C1Heading .C1List .C1Closer

{

background-position: -18px 0px;

}

.C1Focus .C1Heading

.C1List .C1Closer-C1Hover


styles when the control is in focus and the button is hovered over.


.C1Heading .C1List .C1Closer-C1Hover,


.C1List .C1Closer-C1Hover

{

background-position:-36px 0px;

}

.C1Heading .C1List

.C1Closer-C1Hover Sets the heading's Close button styles when the control is not in

focus and the button is hovered over.

.C1Focus .C1Heading

.C1List .C1Closer-

C1Active

Sets the heading's Close button styles when the control is in focus

and the button is active.


.C1Heading .C1List .C1Closer-C1Active,


.C1List .C1Closer-C1Active

{

background-position:-54px 0px;

}

.C1Heading .C1List

.C1Closer-C1Active Sets the heading's Close button styles when the control is not in

focus and the button is active.

.C1Heading .C1List

.C1Maximizer Sets the heading's Maximize button styles when the control is not in

focus.


.C1List .C1Maximizer

{

background-position : 0px -25px;

}

.C1Focus .C1Heading

.C1List .C1Maximizer Sets the heading's Maximize button styles when the control is in focus.


.C1Heading .C1List .C1Maximizer

{

background-position : -18px -25px;

}

41

.C1Focus .C1Heading

.C1List

.C1Maximizer-

C1Hover

Sets the heading's Maximize button



.C1Heading .C1List .C1Maximizer-C1Hover,


.C1List .C1Maximizer-C1Hover

{

background-position: -36px -25px;

}

.C1Heading .C1List

.C1Maximizer-

C1Hover

Sets the heading's Maximize button styles when the control is not in


.C1Focus .C1Heading

.C1List

.C1Maximizer-C1Active

Sets the heading's Maximize button styles when the control is in focus



.C1Heading .C1List .C1Maximizer-

C1Active,


.C1List .C1Maximizer-C1Active

{


}

.C1Heading .C1List


Sets the heading's Maximize button

styles when the control is not in focus and the button is active.

.C1Maximized

.C1Heading .C1List

.C1Maximizer

Sets the heading's Maximized button

styles when the control is maximized and not in focus.


.C1Heading .C1List .C1Maximizer

{

background-position: 0px -50px;

}

.C1Focus-

C1Maximized .C1Heading .C1List

.C1Maximizer


styles when the control is maximized and in focus.


C1Maximized .C1Heading .C1List .C1Maximizer

{


}

.C1Focus-


.C1Maximizer-C1Hover


styles when the control is maximized and in focus and the button is

hovered over.


C1Maximized .C1Heading .C1List .C1Maximizer-C1Hover,



C1Hover

{


}

.C1Maximized

.C1Heading .C1List

.C1Maximizer-

C1Hover


styles when the control is maximized

and not in focus and the button is

hovered over.

.C1Focus-




styles when the control is maximized and in focus and the button is active.


C1Maximized .C1Heading .C1List .C1Maximizer-C1Active,



C1Active

{


}

.C1Maximized

.C1Heading .C1List


Sets the heading's Maximized button styles when the control is maximized

and not in focus and the button is active.

.C1Heading .C1List Sets the heading's Minimize button .C1Window_ArcticFox .C1Heading

42

.C1Minimizer styles when the control is not in

focus.

.C1List .C1Minimizer

{


}

.C1Focus .C1Heading

.C1List .C1Minimizer Sets the heading's Minimize button styles when the control is in focus.


.C1Heading .C1List .C1Minimizer

{


}

.C1Focus-C1Minimized

.C1Heading .C1List

.C1Minimizer-

C1Hover

Sets the heading's Minimize button styles when the control is in focus

and the button is hovered over.

.C1Window_ArcticFox .C1Focus-C1Minimized .C1Heading .C1List

.C1Minimizer-C1Hover,

.C1Window_ArcticFox .C1Minimized

.C1Heading .C1List .C1Minimizer-C1Hover

{


}

.C1Minimized

.C1Heading .C1List

.C1Minimizer-

C1Hover

Sets the heading's Minimize button

styles when the control is not in

focus and the button is hovered

over.

.C1Focus-

C1Minimized .C1Heading .C1List

.C1Minimizer-C1Active


styles when the control is in focus and the button is active.


C1Minimized .C1Heading .C1List .C1Minimizer-C1Active,

.C1Window_ArcticFox .C1Minimized

.C1Heading .C1List .C1Minimizer-

C1Active

{


}

.C1Minimized

.C1Heading .C1List

.C1Minimizer-

C1Active


styles when the control is not in focus and the button is active.

.C1Heading .C1List

.C1Toggler

Sets the heading's Toggle button

styles when the control is not in focus and is expanded.


.C1List .C1Toggler

{


}

.C1Focus .C1Heading

.C1List .C1Toggler


styles when the control is in focus and is expanded.


.C1Heading .C1List .C1Toggler

{


}

.C1Focus .C1Heading

.C1List .C1Toggler-C1Hover


styles when the control is in focus and is expanded and the button is

hovered over.


.C1Heading .C1List .C1Toggler-C1Hover,


.C1List .C1Toggler-C1Hover

{


}

.C1Heading .C1List

.C1Toggler-C1Hover


styles when the control is not in focus and is expanded and the

button is hovered over.

43

.C1Focus .C1Heading

.C1List .C1Toggler-C1Active


styles when the control is in focus and is expanded and the button is

active.


.C1Heading .C1List .C1Toggler-C1Active,


.C1List .C1Toggler-C1Active

{


}

.C1Heading .C1List

.C1Toggler-C1Active Sets the heading's Toggle button styles when the control is not in

focus and is expanded and the button is active.

.C1Closed

.C1Heading .C1List

.C1Toggler

Sets the heading's Toggle button styles when the control is not in

focus and is collapsed.

.C1Window_ArcticFox .C1Closed

.C1Heading .C1List .C1Toggler

{


}

.C1Focus-C1Closed

.C1Heading .C1List

.C1Toggler

Sets the heading's Toggle button styles when the control is in focus

and is collapsed.

.C1Window_ArcticFox .C1Focus-C1Closed .C1Heading .C1List

.C1Toggler

{


}

.C1Focus-C1Closed

.C1Heading .C1List

.C1Toggler-C1Hover

Sets the heading's Toggle button styles when the control is in focus and is collapsed and the button is

hovered over.

.C1Window_ArcticFox .C1Focus-C1Closed .C1Heading .C1List .C1Toggler-C1Hover,


.C1Heading .C1List .C1Toggler-

C1Hover

{

background-position : -36px -125px;

}

.C1Closed

.C1Heading .C1List

.C1Toggler-C1Hover


styles when the control is not in focus and is collapsed and the button

is hovered over.

.C1Focus-C1Closed

.C1Heading .C1List

.C1Toggler-C1Active

Sets the heading's Toggle button styles when the control is in focus

and is collapsed and the button is active.

.C1Window_ArcticFox .C1Focus-C1Closed .C1Heading .C1List

.C1Toggler-C1Active,


.C1Heading .C1List .C1Toggler-C1Active

{


}

.C1Closed

.C1Heading .C1List

.C1Toggler-C1Active


styles when the control is not in

focus and is collapsed and the button

is active.

.C1Heading .C1List

.C1Reloader Sets the heading's Reload button styles when the control is not in

focus.


.C1List .C1Reloader

{


}

.C1Focus .C1Heading

.C1List .C1Reloader Sets the heading's Reload button styles when the control is in focus.


.C1Heading .C1List .C1Reloader

{

44


}

.C1Focus .C1Heading

.C1List .C1Reloader-C1Hover

Sets the heading's Reload button



.C1Heading .C1List .C1Reloader-C1Hover,


.C1List .C1Reloader-C1Hover

{


}

.C1Heading .C1List

.C1Reloader-C1Hover

Sets the heading's Reload button

styles when the control is not in focus and the button is hovered

over.

.C1Focus .C1Heading

.C1List .C1Reloader-

C1Active

Sets the heading's Reload button styles when the control is in focus



.C1Heading .C1List .C1Reloader-

C1Active,


.C1List .C1Reloader-C1Active

{


}

.C1Heading .C1List

.C1Reloader-

C1Active

Sets the heading's Reload button styles when the control is not in


.C1Heading .C1List

.C1Pinner

Sets the heading's Pin button styles



.C1List .C1Pinner

{


}

.C1Focus .C1Heading

.C1List .C1Pinner Sets the heading's Pin button styles when the control is in focus.


.C1Heading .C1List .C1Pinner

{


}

.C1Focus .C1Heading

.C1List .C1Pinner-

C1Hover

Sets the heading's Pin button styles when the control is in focus and the

button is hovered over.


.C1Heading .C1List .C1Pinner-C1Hover,


.C1List .C1Pinner-C1Hover

{


}

.C1Heading .C1List

.C1Pinner-C1Hover Sets the heading's Pin button styles when the control is not in focus and

the button is hovered over.

.C1Focus .C1Heading

.C1List .C1Pinner-

C1Active

Sets the heading's Pin button styles when the control is in focus and the

button is active.


.C1Heading .C1List .C1Pinner-C1Active,


.C1List .C1Pinner-C1Active

{


}

.C1Heading .C1List

.C1Pinner-C1Active Sets the heading's Pin button styles when the control is not in focus and

the button is active.

.C1Pinned

.C1Heading .C1List Sets the heading's Pinned button styles when the control is not in

.C1Window_ArcticFox .C1Pinned

.C1Heading .C1List .C1Pinner

45

.C1Pinner focus. {


}

.C1Focus-C1Pinned

.C1Heading .C1List

.C1Pinner

Sets the heading's Pinned button styles when the control is in focus.

.C1Window_ArcticFox .C1Focus-C1Pinned .C1Heading .C1List .C1Pinner

{


}

.C1Focus-C1Pinned

.C1Heading .C1List

.C1Pinner-C1Hover

Sets the heading's Pinned button styles when the control is in focus

and the button is hovered over.

.C1Window_ArcticFox .C1Focus-C1Pinned .C1Heading .C1List

.C1Pinner-C1Hover,


.C1Heading .C1List .C1Pinner-C1Hover

{


}

.C1Pinned

.C1Heading .C1List

.C1Pinner-C1Hover

Sets the heading's Pinned button styles when the control is not in


.C1Focus-C1Pinned

.C1Heading .C1List

.C1Pinner-C1Active

Sets the heading's Pinned button

styles when the control is in focus and the button is active.


C1Pinned .C1Heading .C1List .C1Pinner-C1Active,


.C1Heading .C1List .C1Pinner-C1Active

{


}

.C1Pinned

.C1Heading .C1List

.C1Pinner-C1Active

Sets the heading's Pinned button styles when the control is not in


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:


.C1ContentPanel

.C1StatusBar

Sets the status bar's style. .C1Window_ArcticFox .C1ContentPanel

.C1StatusBar

{


Window.VisualStyles.ArcticFox.Images.status.gif")%>') repeat-x scroll 0pt

top;

height:30px;

}

.C1ContentPanel

.C1Spinner

Sets the style and location of the

control's content loading image.


.C1Spinner

46

{

height:16px;

width:16px;

background:url('<%=


Window.VisualStyles.ArcticFox.Images.Loading.gif")%>') no-repeat;

float:left;

margin: 4px 0 0 5px;

}

.C1ContentPanel

.C1SpinnerContainer Sets the loading image container's style.


.C1SpinnerContainer

{

height:30px;

width:30px;

background:url('<%=


status_separator.gif")%>') no-repeat;

background-position:right;

float:left;

}

.C1ContentPanel

.C1StatusTemplate Sets the status template's style.


.C1StatusTemplate

{

line-height:30px;

font-size:12px;

}

.C1Footer .C1Outer Sets the outer status bar border for


.C1Window_ArcticFox .C1Footer

.C1Outer

{




footer_left_unfocused.gif")%>') no-

repeat scroll left bottom;

padding-left:5px;

}

.C1Footer .C1Inner Sets the inner status bar border for when the control is not in focus.


.C1Inner

{



footer_right_unfocused.gif")%>') no-repeat scroll right bottom;

padding-right:5px;

47

}

.C1Footer

.C1Content Sets the status bar's content style when the control is not in focus.


.C1Content

{

height: 5px;



Window.VisualStyles.ArcticFox.Images.footer_center_unfocused.gif")%>')

repeat-x scroll left bottom;

font-size:0px;

}

.C1Focus .C1Footer

.C1Outer Sets the outer status bar border for when the control is in focus.


.C1Footer .C1Outer

{



footer_left.gif")%>') no-repeat scroll left bottom;

padding-left:5px;

}

.C1Focus .C1Footer

.C1Inner

Sets the inner status bar border for



.C1Footer .C1Inner

{


Window.VisualStyles.ArcticFox.Images.footer_right.gif")%>') no-repeat scroll

right bottom;

padding-right:5px;

}

.C1Focus .C1Footer

.C1Content

Sets the status bar's content style



.C1Footer .C1Content

{

height: 5px;


Window.VisualStyles.ArcticFox.Images.footer_center.gif")%>') repeat-x scroll

left bottom;

font-size:0px;

}

.C1Focus-

C1Maximized .C1Footer .C1Outer

Sets the status bar's styles when the

control is in focus and maximized.


C1Maximized .C1Footer .C1Outer

{

display:none;

}

48

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.

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 99).

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.

49

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 98).

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).

50

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.

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

51

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.

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).

53

Working with Client-Side Script in

Window for ASP.NET AJAX 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.C1Window.activate(dialog)

Deactivate(window) Deactivates the dialog window. C1.Web.UI.Controls.C1Window.C1Window. 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 97).

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 string to dialog window content.

dialog.setHtml("html text");

SetUrl(url) Loads passed URL to dialog window content.

dialog.setUrl("http://www.url.com")

For an example of this method, see, Setting

54

the ContentURL Property at Run Time (page

93).

Move(x, y) Moves a dialog window to specified location.

dialog.move(0, 0)

Normalize() Restores dialog window size from maximized or minimized state.

dialog.normalize()

Minimize() Minimizes a dialog window. dialog.minimize()

Maximize() Maximizes a dialog window. dialog.maximize()

Reload() Reloads dialog window content

specified by ContentUrl.

dialog.reload()

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 95).

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 indicating whether the element is

visible.

dialog.get_captionButtons().get_closeButton().get_visible()

set_visible(value) dialog.get_captionButtons().get_closeButton().set_visible(false)

Tooltip get_tooltip() Gets or sets the text

displayed when the mouse pointer hovers over the

button.

dialog.get_captionButtons().get

_closeButton().get_toolTip()

set_tooltip(value) dialog.get_captionButtons().get

_closeButton().set_toolTip("Close window")

55

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.

OnClientButtonClicked Gets or sets the name of the client-side function that

56

should be fired on the client side when one of the

caption buttons is clicked after the dialog window handles the operation.

OnClientButtonClicking

Gets or sets the name of the client-side function that should be fired on the client side when one of the

caption buttons is clicked before the dialog window handles the operation.

OnClientDeactivated Gets or sets the name of the client-side function that should be fired on the client side after the dialog

window is deactivated.

OnClientDragEnd

Gets or sets the name of the client-side function that

should be fired on the client side when the dialog window exits dragging mode.

OnClientDragging Gets or sets the name of the client-side function that should be fired on the client side when the dialog

window is being dragged.

OnClientDragStart Gets or sets the name of the client-side function that should be fired on the client side when the dialog window enters dragging mode.

OnClientHidden


should be fired on the client side after the dialog window is hidden.

OnClientMaximized

Gets or sets the name of the client-side function that should be fired on the client side when the dialog

window is maximized after the dialog window handles the operation.

OnClientMaximizing


window is maximized before the dialog window handles the operation.

OnClientMinimized


window is minimized after the dialog window handles the operation.

OnClientMinimizing


window is minimized before the dialog window handles the operation.

OnClientNormalized


window is normalized after the dialog window handles

the operation.

OnClientNormalizing


should be fired on the client side when the dialog window is normalized before the dialog window

handles the operation.

OnClientPinned


should be fired on the client side when the dialog window is pinned after the dialog window handles the

operation.

OnClientPinning


should be fired on the client side when the dialog window is pinned before the dialog window handles the

operation.

OnClientReloaded Gets or sets the name of the client-side function that

should be fired on the client side when the dialog

57

window content is reloaded after the dialog window


OnClientReloading


should be fired on the client side when the dialog window content is reloaded before the dialog window


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 should be fired on the client side when the dialog

window enters resizing mode.

OnClientResizing


should be fired on the client side when the dialog window is being resized.

OnClientShown

Gets or sets the name of the client-side function that should be fired on the client side after the dialog

window is shown.

59

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. Samples can be

accessed from the ComponentOne Sample Explorer. To view samples, on your desktop, click the Start button and

then click All Programs | ComponentOne | Studio for ASP.NET | Samples | Palomino Samples.

C# Samples

The following pages within the ControlExplorer sample installed with ComponentOne Studio for ASP.NET

AJAX detail the C1Window control's functionality:

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).


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 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.



60

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 27).

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.

2. Add the text ContentUrl="http://www.google.com" within the <cc1:C1Window> tag. The tag

will appear similar to the following:

61


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 48).

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 ...>

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: <ContentTemplate><br />

<span ...>

62

The current server time is:

</span><br />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />

<br />

<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:



Dim tb As TextBox = C1Window1.FindControl("TextBox1")

tb.Text = DateTime.Now.ToString()

HyperLink1.NavigateUrl = "javascript:openWindow($get(""" &

C1Window1.ClientID & """))"

End Sub


{

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">


{


dialog.control.show();

63

}

</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.


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:

64

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> Sample HTML

Content</h2><p> You can add custom HTML content.<br

/></p> Enter text here: <input type=text id="input1" />

<br> 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">

65

function setHtml(dialog)

{

var html = document.getElementById('TextArea1').value;

dialog.control.setHtml(html);

}


{


dialog.control.show();

}

</script>


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.

66

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.


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.


5. Switch to the Source view and add the following content template to C1Window1 between the

<cc1:C1Window> and <CaptionButtons> tags: <ContentTemplate>

<br />   <strong>Select your location:</strong>

<br /><br /><br />

Country: <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 />

<asp:Label ID="Label1" runat="server"

ForeColor="Red"></asp:Label><br /><br />

   City:

<asp:DropDownList

ID="DropDownList2" runat="server">

<asp:ListItem Selected="True">-</asp:ListItem>

</asp:DropDownList><br />

or other

<asp:TextBox ID="TextBox1" runat="server" EnableViewState="False"

Width="117px"></asp:TextBox><br />

<br />

   <br />

<br />

<input id="Button1" style="width:

75px" type="button"

67

value="OK"

onclick="form_dialog.hide();__doPostBack('','');"/>

<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 48).

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".


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 =


Dim tb As TextBox = DirectCast(C1Window1.FindControl("TextBox1"),

TextBox)

If dl.Text <> "-" AndAlso (dlc.Text <> "-" OrElse tb.Text <> "")

Then

68

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 =


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 =


Dim dlc As DropDownList =


dlc.Items.Clear()

dlc.Items.Add(New ListItem("-"))

If dl.Text <> "-" Then

l.Text = "Select a city in " + dl.Text

69

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");

70

DropDownList dl =


DropDownList dlc =


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"));

71

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>


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.

72

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

73

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>


<CloseButton Visible="True" />


<MaximizeButton Visible="True" />

<MinimizeButton Visible="True" />



</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!";

74

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:


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:

75

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>








</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:

76

1. Navigate to the Visual Studio Toolbox and add the C1Window control to your page, and resize the control.




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:

77

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.



78


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 35) topic.


The dialog window appears with your spinner image in the status bar when the window's content is being loaded:

79

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>








</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


80

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>








</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

81

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>








</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>

82








</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;


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>


83







</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;


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 99).

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>








</CaptionButtons>

84

</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);

85

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.


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



' Do not show the status bar.

C1Window1.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





C1Window2.X = 125

C1Window2.Y = 35

86





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;



// Do not show the status bar.

C1Window1.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;





C1Window2.X = 125;

C1Window2.Y = 35;





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"



C# // Set the MinimizeZoneElementId for each dialog window.

C1Window1.MinimizeZoneElementId = "Panel1";


87



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 28).

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 29).

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;


{


form_dialog.show();

}

88

</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 = " 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 = " Information";

dialog.CaptionButtons.MaximizeButton.Visible = false;

dialog.CaptionButtons.MinimizeButton.Visible = false;

dialog.StatusVisible = false;

89

// 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);


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 29).

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)

{


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 Imports C1.Web.UI.Controls.C1Window

90

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 = " 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 = " Modal Dialog Window";

dialog.CaptionButtons.MaximizeButton.Visible = false;

dialog.CaptionButtons.MinimizeButton.Visible = false;

91

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";


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 <cc1:C1Window

id="C1Window1"

height="155"

runat="server"

startposition="Manual"

width="503"

ShowOnLoad="true"

92

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>

</cc1:C1Window>

2. Switch to Code view and implement the ChildrenPostBack method to handle the button click event.

Visual Basic Protected Sub C1Window1ChildrenPostBack(sender As Object, e As

EventArgs)

lblContent.Text = "content updated at:" + DateTime.Now

lblStatus.Text = "status updated at:" + DateTime.Now

End Sub

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:


EventArgs)



TryCast(C1Window1.FindControl("c1contentupdatepanel"),

UpdatePanel).Update()

End Sub


{



(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.

93

7. Add the following code to update the status label:


EventArgs)



TryCast(C1Window1.FindControl("c1contentupdatepanel"),


TryCast(C1Window1.FindControl("c1statusupdatepanel"),


End Sub


{



(C1Window1.FindControl("c1contentupdatepanel") as

UpdatePanel).Update();

(C1Window1.FindControl("c1statusupdatepanel") as UpdatePanel).Update();

}

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 in Window for ASP.NET AJAX (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:


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>

94

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 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


{0}.control;',500)</script>", C1Window1.ClientID)));


1. Run the project and click the Set ContentURL button.

The Web page will appear as follows:

95

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:


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 StartPosition property to Manual.

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>


<div>



</div>

<cc1:C1Window ID="C1Window1" runat="server" ShowOnLoad="True"

StartPosition="Manual"

96

Width="225px" X="10" Y="100">

<CaptionButtons>








</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:








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:

97

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.


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>


<div>



</div>


Height="150px" VisualStyle="Office2007Blue"

VisualStylePath="~/C1WebControls/VisualStyles"

Width="210px" X="0" Y="0">

<CaptionButtons>








</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: <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:




98





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>

<input id="HeightBox" type="text" value="100"

style="width:30px"/>

<label>Set Width:</label>

<input id="WidthBox" type="text" value="225" style="width:30px"/>

<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.








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.

99

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.



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: <strong>Set Dialog Window Location</strong><br/>

<label>Horizontal:</label>

<input id="xValue" type="text" value="10" style="width:30px"/>

<label>Vertical:</label>

<input id="yValue" type="text" value="90" style="width:30px"/>

<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.


Visual Basic

100

Form.Controls.Add(New LiteralControl(String.Format("<script






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: