Are you getting the benefits from ASP.NET and AJAX? Introduction to the CTC ASP.NET Webforms Generator

St Paul de Vence - Sep 2008

Are you getting the benefits from ASP.NET and AJAX?ConsultancyClientTools

Introduction to theCTC ASP.NET WebformsGeneratorThis slide show presents the CTC ASP.NET WebForms Generator, which enables you to get more benefit from the features available with ASP.NET and AJAX.

1The CTC Value Add2The CTC Generator transforms the painted forms into a rich User Interface taking advantage of the capabilities of ASP.NET and 3rd party controls.Standard GeneratorWhat You Paint Is What You GetCTC GeneratorWhat You Configure Is What You Get

EAE PainterAB Suite Painter 2008 CTC The CTC Generator adds value by allowing the user to take full advantage of the capabilities of ASP.NET and to use 3rd party controls to provide for todays End User needs.2The CTC Value Add3The CTC Generator transforms the painted forms into a rich User Interface taking advantage of the capabilities of ASP.NET and 3rd party controls.Standard GeneratorWhat You Paint Is What You GetCTC GeneratorWhat You Configure Is What You Get

EAE PainterAB Suite Painter

2008 CTC For example, instead of a User Interface, as shown here on the left, with the grey background, (continued next slide)3The CTC Value Add4The CTC Generator transforms the painted forms into a rich User Interface taking advantage of the capabilities of ASP.NET and 3rd party controls.Standard GeneratorWhat You Paint Is What You GetCTC GeneratorWhat You Configure Is What You Get

EAE PainterAB Suite Painter

2008 CTC you will be able to generate something like this, shown on the right hand side, with very little effort.4The CTC Value Add5The CTC Generator transforms the painted forms into a rich User Interface taking advantage of the capabilities of ASP.NET and 3rd party controls.Standard GeneratorWhat You Paint Is What You GetCTC GeneratorWhat You Configure Is What You GetEAE PainterAB Suite Painter

2008 CTC Using the CTC environment, the standard dynamic list created in EAE and AB Suite can be presented in different formats.5The CTC Value Add6The CTC Generator transforms the painted forms into a rich User Interface taking advantage of the capabilities of ASP.NET and 3rd party controls.Standard GeneratorWhat You Paint Is What You GetCTC GeneratorWhat You Configure Is What You GetEAE PainterAB Suite Painter

2008 CTC For example, instead of the standard ListBox, as shown here on the left, (continued next slide)6The CTC Value Add7The CTC Generator transforms the painted forms into a rich User Interface taking advantage of the capabilities of ASP.NET and 3rd party controls.Standard GeneratorWhat You Paint Is What You GetCTC GeneratorWhat You Configure Is What You GetEAE PainterAB Suite Painter

2008 CTC you can present the data in a grid using the ASP.NET GridView control with images

(continued next slide)7The CTC Value Add8The CTC Generator transforms the painted forms into a rich User Interface taking advantage of the capabilities of ASP.NET and 3rd party controls.Standard GeneratorWhat You Paint Is What You GetCTC GeneratorWhat You Configure Is What You GetEAE PainterAB Suite Painter

2008 CTC or you can present the data as a chart using 3rd party WebChart controls.8

Replacing Painted Controls9Demo

CTC

ConfiguratorCTC

Generator 2008 CTC The following sequence of slides shows how easily the painted forms can be enhanced to improve the user interface.

910Demo: Standard CUST Ispec

2008 CTC This is the default look and feel of a standard Customer Inquiry screen from the Sample system, before any enhancements are applied.

(continued next slide)1011

2008 CTC Using calendar controls is a high priority requirement and in this screen, the Date Effective field has been replaced with a drop down Calendar control.


2008 CTC Clicking on the Calendar Icon causes the calendar to drop down. On selection of a date, the TextBox is updated with the selection and the Calendar disappears. There are many varieties of calendar control that can be used, depending on the user needs and the usage of the date field.

(continued next slide)

1213

2008 CTC The CTC solution is based on the principle that you should be able to specify any required enhancements to the user interface with little and in most cases no programming at all. The CTC Configurator is a central tool for achieving this and makes the configuration process easy.

In this example, a Control Substitution has been added to the configuration of the bundle.


1314

2008 CTC The TextBox Control has then been selected from the dropdown list and (continued next slide)

1415

2008 CTC the TextBox Control has been substituted with the DatePicker Control selected from the dropdown list.


2008 CTC As this substitution of the TextBox is added at the bundle level, it would be applied to all TextBoxes on all ispecs within this bundle by default.

However, in this example it is only to be applied to date fields. Therefore a match condition will be specified using the expression editor.


1617

2008 CTC Using the Expression Editor, you can specify conditions as complex as required. In this case the match is only required on fields that are of type date.

Thats all it takes to replace date fields with a Calendar control and there is no programming involved.

1718Demo: CUST with GridView

2008 CTC In this screen the standard List Box has been replaced with the standard ASP.NET GridView control.

The GridView control is very popular and is used in many internet applications because it allows for a much better user interface. As seen here, things like column headings and colors on individual rows can be specified.18CE Generate EnvironmentEAEModel DBAB SuiteModel DBEAEDeveloperAB SuiteDeveloperCEGenerateEnvironmentGeneratedUI Application19Plug-In GeneratorsPlug-In Generators 2008 CTC This shows how the CTC Generator fits in with the normal Component Enabler Environment.

The Component Enabler Generate Environment and the way all of its various generators plug-in to this is familiar to all.

Thats a great architecture, as it provides one generic interface between the EAE and AB Suite Development Environments and all types of User Interface generators.

19CTC Generate EnvironmentEAEModel DBAB SuiteModel DBEAEDeveloperAB SuiteDeveloperCEGenerateEnvironmentCTCASP.NETGeneratorCTCConfiguratorCTCConfigXML DBGeneratedUI ApplicationPlug-In Generators20 2008 CTC The CTC Generator behaves in the same way. It is a normal plug-in generator to the CE Environment and therefore it is run in exactly the same way as you run any other Component Enabler Generator.

However, the architecture and design of the CTC Generator is very different in order to achieve the high degree of flexibility thats necessary to generate rich User Interface applications.

As shown in the previous slides, the Configurator is an essential part of the solution.

With the Configurator, your specify what you want to enhance on the painted forms and the generator figures out how to generate it. That gives you full control over what is generated.

This is an open and very flexible solution that allows you to take advantage of all the features of ASP.NET and to use 3rd party controls.

The generator is an all inclusive generator, so when the generate is finished, you are done. There is nothing more to do. There is no post-processing or any manual steps required to further manipulate the generated forms. Just run the User Interface. This makes the whole process simple, reliable and repeatable.

20Third Party Controls

21 2008 CTC The ASP.NET environment from Microsoft is very popular and has attracted a large number of third parties that offer many different and exciting controls for ASP.NET.

The CTC solution is designed to allow you to take advantage of any of these controls to suit your requirements.

Each of these controls are all different. They all have their own unique set of properties and therefore a translation of the controls as they are painted on the forms in EAE and AB Suite to which ever 3rd party control is necessary.

21CTC Custom Controls

Date PickerSingle Column Data ListMasked Edit - AJAXCalendar Extender - AJAXMulti Column GridViewSlider Extender - AJAXNumeric UpDown - AJAXFiltered TextBox - AJAXComponentArt - Web Chart

22 2008 CTC Custom Controls in CTC is how this mapping is achieved.

A number of Custom Controls are included with the generator.

However, you are not limited to just these custom controls. The CTC solution allows you to include any you require.

The source code of the included custom controls is provided with the generator. This can be used as a starting point for creation of new controls.

CTC can also create additional custom controls to suit any specific requirements.22Getting More from ASP.NET

23Any property on any ASP.NET control can be specified. 2008 CTC From working with ASP.NET Controls in Visual Studio, it is clear that each of the ASP.NET controls has many properties that allow a high degree of customization.

However, the controls on the painted forms only use a subset of these properties.

The CTC Configurator allows you to specify any property on any control to suit your User Interface.

This can be simple things such as Background color, Background Images, and Borders. Often it is the simple things that have a huge effect on how the application is received by the users.23ASP.NET Control PropertiesDemo

24CTC

ConfiguratorCTC

Generator 2008 CTC The following sequence shows an example of how to utilize the ASP.NET properties.

2425Demo: Default Button

2008 CTC This is the look and feel of standard default generated buttons as often seen.


2526Demo: Button Round Corners

2008 CTC In this example the buttons are displayed with rounded corners which is achieved simply by removing the grey background color on the buttons.



2008 CTC Using the Configurator, a control specification of the Button control has been added to the configuration. This has been added high in the hierarchy at the bundle level, which means this look and feel of the button will be applied to all buttons on all ispecs within this bundle by the generator.



2008 CTC The Push Button control is selected as the control to configure from the dropdown list of all available controls.



2008 CTC Selection of a control means the system automatically adds the default template specification of the control as it will be generated.



2008 CTC The properties of the control are edited by opening the Properties Editor. This shows the default template of the Push Button control as it will be generated. This template is provided automatically by the system, so all you have to do is to edit the template to suit your requirements.

The square brackets represent the information coming from the form painted in EAE or AB Suite Developer.

Using the Properties Editor to edit the template means you have full control over exactly what is generated.

The editor provides a preview of what the control will look like when it is generated.



2008 CTC The rounded corners is achieved by removing the background color property from the button.

It is so easy to configure a control to take advantage of all properties offered by ASP.NET, with no programming at all.

31CTC Context Menu

Multi level sub-menus

Dynamic creation of menu items according to context

Menu html code created and sent to the browser only when required

Reduces the network load32 2008 CTC The CTC solution include its own Context Menu control with some great features.

It allows dynamic creation of items on the menu that reflect the true context in which it is requested.

As this example shows, you can create the list of ispecs that is currently generated for the interface and allow the user to easily navigate to these ispecs. This example is part of the generator when you install it and can be modified as you like to suit any local requirements.

This context menu is only sent to the browser when the user requests the menu, ensuring efficient processing of the menu.

32Generate OptionsEliminating manual processesAutomatically installs infrastructure filesAutomatically creates virtual directoryAutomatically resets IIS to avoid generate errorsAutomatically builds generated application

Runtime optionsEnable/Disable View StateKeep Session AlivePrevent double transmitCompressed JavaScript files

User own codeCreate Custom Code Module33

2008 CTC The CTC Generator includes a large number of options that make it very flexible and easy to use.

They are all configured using the CTC Configurator.

Some options eliminate manual processes.

Others improve the efficiency of the runtime application.

Where specific code that executes at runtime is needed, an option is provided for adding a Custom Code Module to any generated form. This allows addition of own code to a form to do things such as setting properties on controls depending on values returned from the host system, or validating user input before the data is sent to the host system.33Runtime ConfigurationConfigure Runtime Parameters Graphical interface for runtime configurationOne tool for all configurations (Generate Time and Run Time)Drop down selectionsExtensive help text for each parameterAutomatic update of the Web.config file34

2008 CTC All the runtime parameters can be configured using the CTC Configurator.

This is more convenient than editing the Web.config file with Notepad, as all prior configurations are kept, for both Generate configurations and Runtime configurations, in one directory and use just one tool for maintaining the configuration.

The CTC Configurator provides a graphical interface for setting the runtime parameters. This includes extensive help text for each parameter and drop down selections where appropriate.34CTC ASP.NET Generator V2.035Released July 2008

Supports ASP.NET AJAX as well as standard ASP.NET

Utilizes the ASP.NET Update Panel for partial rendering

Expands available controlsASP.NET AJAX Control Toolkit3rd party AJAX controls

One option for selecting AJAX or StandardThe generator automatically adjusts project files and infrastructure files according to the selection

ASP.NETWebFormsGenerator 2.0AJAX+Standard 2008 CTC Version 2.0 of the CTC ASP.NET Generator was released in July 2008.

It has been enhanced to support AJAX as well as the standard ASP.NET.

It utilizes partial rendering to create a user interface that is more efficient and gives a better user experience.

It is very easy to include AJAX in the user interface. There is just one option to select and the generator will automatically do the rest.

35AJAX and EAE/AB SuiteMore efficientMinimizes full page reloadsReduces number of bytes sent to the browser

Better End User experienceMore immediate response to user actionsReduces annoying screen flicker

Creates richer User InterfaceLarge number of 3rd party AJAX controls available36What are the benefits of AJAX for EAE and AB Suite?CTC - Windows Internet ExplorerXVendorsProductsSales RepsCustomersSalePaymentSubmit

NumberNameAddress

Client Tools ConsultancyWeb Server 2008 CTC These are some of the benefits of using AJAX.36ASP.NET AJAX Control ToolkitCTC ASP.NET Generator supports the toolkitCalendarFiltered Text BoxMasked EditNumeric Up/DownSliderText Box Watermark37

2008 CTC With the advent of AJAX , there is a whole range of new controls available and the ASP.NET AJAX Control Toolkit is one example.

This toolkit is a joint effort between Microsoft and the ASP.NET AJAX community. Currently it includes around 35 different controls and it is a free download.

Version 2.0 of the CTC ASP.NET Generator provides support for the ASP.NET AJAX Control Toolkit.

Initially, CTC has included 6 controls from the toolkit, from which EAE and AB Suite applications can benefit. Others can be added on request.37CTC ASP.NET AJAXDemo

38CTC

ConfiguratorCTC

Generator 2008 CTC The following sequence shows a few sample screens utilizing AJAX.3839Demo: Application look/feel

2008 CTC This shows a completely different look and feel.

On the left hand side the ASP.NET Menu control has been used to create a list of ispecs. This list is created dynamically so it reflects the ispecs that are currently part of this generated system. Having the menu here makes it more accessible for the user.

The green section is where the WebForm Renderer runs and displays the ispec forms.

While a look and feel like this can be achieved without AJAX, it is more efficient when you do use AJAX. This is because the WebForm Renderer has been enhanced to support AJAX and partial rendering. When the user transacts with the host system, only controls on the ispec form are updated, not the complete page.


3940Demo: Application look/feel

2008 CTC When the user navigates to the next customer record, the browser does not get a full page back, only the controls in the green section of the form are returned and updated.

This is more efficient and avoids the annoying screen flicker.



2008 CTC With the CTC solution, controls like the Calendar and GridView are generated to be AJAX aware.

This means, when using the dropdown calendar and selecting a date, only the textbox control is updated.



2008 CTC The Calendar is dropped when clicking on the calendar icon and when selecting the date, the calendar disappears.



2008 CTC The date field is updated immediately when selecting a date from the calendar.

This makes the interface much more efficient and more responsive to user actions.



2008 CTC When an item is selected from the GridView, only the GridView is updated to show the selection.


4445Demo: AJAX Toolkit Controls

2008 CTC This shows the use of the Slider control and the Up/Down control from the AJAX Toolkit.

Using controls like these may not be appropriate for all applications, but it shows the flexibility of the CTC Generator. Any control that conforms to the standards set by ASP.NET can be used in the CTC solution.


4546Demo: AJAX Toolkit Controls

2008 CTC This shows that the TextBox on the Credit Limit field has been configured to be replaced by the AJAX Slider Extender.

46ListBox GridView WebChartDemo

47

CTC

ConfiguratorCTC

Generator 2008 CTC The last demo sequence shows how a standard dynamic List created in EAE and AB Suite can be used for presenting information in different formats to the end user to achieve greater effect.4748Demo: Standard ListBox

2008 CTC This is an ispec showing the product sales as a standard ListBox.4849Demo: GridView

2008 CTC This is the same List, but replaced with the GridView to show the data in a column formatted list.

The GridView is a control with many capabilities. For example, column sorting allows the user to sort the data in ascending or descending order by clicking on the column header.4950Demo: GridView

2008 CTC Here the end user has sorted the data in descending order on Units Sold, to easily see which product is selling best.5051Demo: GridView, Image, Sort

2008 CTC The GridView also allows inclusion of images. Here the Product Number has been used as the key to show product images.5152Demo: ListBox Duplicate

2008 CTC Here, a second list box has been added as a copy of the first one.5253Demo: Bar Chart 3rd Party

2008 CTC Here, the second list box has been replaced with a 3rd party control from the company called ComponentArt. They provide a WebChart control that produces some stunning charts.

All of this has been achieved without any programming. Just configuration. The 3rd party control simply takes the normal list as input and creates the chart from that.

5354Demo: Pie Chart 3rd Party

2008 CTC And finally, this just shows a different type of chart.

54Possible ExtensionsNew generators for the Microsoft user interface technologies based on demandWinForms, Mobile, .NET 3.5, WPF, XAML, WCF, SilverLight,

Additional Custom Controls for utilizing 3rd Party Controls on request.

55

2008 CTC If you are considering taking advantage of any of the other Microsoft user Interface technologies, such as WPF, XAML and SilverLight, please contact CTC.

The design of the CTC solution is based around a framework that allows CTC to easily create new generators with similar capabilities as the CTC ASP.NET WebForms Generator for any of the User Interface technologies from Microsoft. 55In Summary The CTC SolutionEliminates the need to modify the generated sourceEliminates the need to write custom generatorsMakes it simple to maintain enhancements to the look and feelProvides a repeatable solutionAllows unlimited access to the capabilities of ASP.NET and 3rd party controlsCreates a rich UI beyond that painted in the development environment

56

Download the free trial version and experience the benefits with your own applications. 2008 CTC Listed here are some of the benefits the CTC solution provides.

This presentation has shown a small sample of the capabilities of the CTC solution. To get a better idea of the capabilities and benefits, the free trial version can be downloaded from the CTC web site and trialed with your own applications.

56

Documents

Are you getting the benefits from ASP.NET and AJAX? Introduction to the CTC ASP.NET Webforms Generator