EXPERIENCE THE CTC SMART CLIENT SOLUTION ENVIRONMENT

ConsultancyClient Tools

Niels GebauerDirectorClient Tools Consultancy ngebauer@ClientTools.com.au

Lab Session

2

Agenda

Introduction to the Environment Exercise 1: Remove

Foreground/Background on Buttons Exercise 2: Replace Date Fields with Date

Picker Exercise 3: Replace List Box with Data

Grid Exercise 4: Configure CopyFrom as Grid

3

The Environment

1. .NET 3.5 SP1 or higher

2. IIS 5.0 or higher

3. IE 8/9/10, Chrome 26+, Safari 5+, Firefox 20+

4. Visual Studio 2008 SP1 or Visual Studio 2010 SP1

5. EAE 3.3, AB Suite 1.2, AB Suite 2.0 or AB Suite 3.0

6. Component Enabler for .NET

7. CTC Smart Client Generator

8. SampleABS_CTCLab Model loaded into EAE or AB Suite

4

Exercise 1: Remove Foreground/Background on Buttons

1. Start the CTC Configurator

2. Specify the Push Button properties:A. Right click on the bundle node and select Control

Specifications/Add Control Specification

B. In the property pane, click on the ControlName property to get the dropdown arrow and click arrow to open the dropdown list

C. From the dropdown list, select PushButtonControl

D. Click on the ControlProperties property to get the ellipsis button and open the Properties Editor

E. Remove color and background-color properties

F. Click OK to close the Properties Editor

3. Click the Save icon to save this configuration

4. Close the CTC Configurator

5. Run the CTC Smart Client Generator

5

Run the CTC Smart Client Generator

1. Open the AB Suite SampleABS_CTCLab Model in Visual Studio or click on the desktop shortcut

2. In Class View, right click on the SMARTCLIENT bundle node and select Rebuild

3. In the Build Details dialog,enter Password

4. Click OK to start theCTC Smart Client Generator

5. Wait for the generate to finish

6. Run the generated Smart Client UIapplication

6

Run the Smart Client UI Application

1. Start a browser (Internet Explorer) orclick on the desktop shortcut

2. Enter URL: http://localhost/SampleABS_CTCLAB_SmartClient/

7

Exercise 2: Replace Date Fields with Date Picker

1. Start the CTC Configurator

2. Substitute Date Fields with Date Picker:A. Right click on the bundle node and select Control

Substitutions/Add Control Substitution

B. In the property pane, click on the ControlName property and open the dropdown list

C. From the dropdown list, select TextBoxControl

D. Click on the SubstituteWith property and open the dropdown list

E. From the dropdown list, select DatePickerControl

F. Click on the MatchOnField property and open the Expression Editor

G. In the Expression Editor window, drag and drop the IsTypeDate expression to the Match Expression box

H. Click OK to close the Expression Editor

3. Click the Save icon to save this configuration

4. Close the CTC Configurator

5. Run the CTC Smart Client Generator

8

Exercise 3: Replace List Box with Data Grid

1. Start the CTC Configurator

2. Add CUST ispec:A. Right click on the bundle node and select Add Ispec

B. In the properties pane, click the Name property and open the dropdown list

C. From the dropdown list, select CUST

3. Substitute ListBox with DataGrid:A. Right click on the ispec CUST node and select Control

Substitutions/Add Control Substitution

B. In the property pane, click on the ControlName property and open the dropdown list

C. From the dropdown list, select ListBoxControl

D. Click on the SubstituteWith property and open the dropdown list

E. From the dropdown list, select DataGridControlContinues

9

Exercise 3: Replace List Box with Data Grid

4. Specify the Data Grid properties:A. Right click on the ispec CUST node and select Control

Specifications/Add Control Specification

B. In the property pane, click on the ControlName property and open the dropdown list

C. From the dropdown list, select DataGridControl from -<Custom Controls>-

D. Click on the ControlProperties property and open the Properties Editor

E. Change columns line 1as follows:{ header:’Name’, binding:’column1’, width:’120px’, canSort:true, textAlign:’left’ }

F. Change columns line 2 as follows:{ header:’Region’, binding:’column2’, width:’110px’, canSort:true, textAlign:’left’ }

G. Click OK to close the Properties Editor

5. Click the Save icon to save this configuration

6. Close the CTC Configurator

7. Run the CTC Smart Client Generator

Continued

10

Exercise 3: Replace List Box with Data Grid Using sub-column specification

Change List.Columns property in Data Grid Control Specifications to: List.Columns=“%2(0-30) %2(31-30)“

%2(0-30) %2(31-30)

column 2

0-30 31-30

column 1

S01S02S03S04S05S06S07

column 1 column 2key

S01S02S03S04S05

EAE/AB Suite

Smart Client

sub-column specification:

11

Exercise 4: Configure CopyFrom as Grid

1. Start the CTC Configurator

2. Configure CopyFrom properties:A. Right click on the options node and select Add

CopyFrom As Grid

B. Set CopyFromAsGrid property to True

C. Right click on the options node and select Add CopyFrom Auto Column Headers

D. Set CopyFromAutoColumnHeaders property to True

3. Click the Save icon to save this configuration

4. Close the CTC Configurator

5. Run the CTC Smart Client Generator

12

Wrapping up

More information available online Free trial version available for download Free remote assistance for proof of concept projects

Contact: ngebauer@ClientTools.com.au

www.ClientTools.com.au