Advanced JavaScript Library
8.3 Control Containers
Home > Documentation > 8.0 Tutorials > 8.3 Control Containers


The following simple example demonstrates how easy it is to add controls to an existing control within the Cheiron library. The code here will create a Cheiron Window control, position it on screen and then add a second control into the window's client area. You can run the example online by clicking the "Show Me" button at the end of this page. You can also try any of the examples directly via the in browser Development Studio.


Step One: Create Your Html File and Main Function

First you will need to create your Html file ready to insert your Cheiron code. This step was covered in the first tutorial and should be faimiliar to anyone with JavaScript experience. For reference the base code and main function are included in the area below. 

<link href="Themes/CheironBlue/CheironBlue.css" type="text/css" rel="stylesheet" />
        <script src="Scripts/System.js" type="text/javascript"></script>
        <script src="Scripts/System.Imports.js" type="text/javascript"></script>
        <script type="text/javascript">

            function Main()


Step Two: Create Code and Position The Window

Next you will need to create the base window in which to place the child control. The mose obvious example is a window as created in the second tutorial. For reference the code required to create and reposition the window is included below. As in the previous tutorial this code will create, display and move a standard Cheiron window.

var cheironWindow;

cheironWindow = System.CreateObject("System.Controls.Window");
cheironWindow.Move(100, 100);
cheironWindow.Resize(512, 320);

Step Three: Create and Add The Child Control

The System.CreateObject function that you used to create the window supports additional optional arguments. These arguments are automatically passed on to the constructor of the object being created. When creating controls the second parameter always represents the parent control in which the new control should be created.


In the case of the window object, and many other controls, using the main object as the parent would place the child control incorrectly, for example in the title area rather than the client area. For this reasons all controls designed to contain other controls support the GetClientControl() method. This returns an object representing the area in which child items are expected to be placed. The following example shows how to use this call to add a Button control into the window client area.

var cheironWindow;
var controlChild;

// Create Window
cheironWindow = System.CreateObject("System.Controls.Window");
cheironWindow.Move(100, 100);
cheironWindow.Resize(512, 320);

// Create Child
controlChild = System.CreateObject("System.Controls.Button",


Running the code will create, then move and resize the window then add a Button object into the client area. You will notice the window is fully functional, you can resize, mazimize, minimize and close the window without any additional code and click the button, though no action will be performed. To test this right now here in your browser you can click the Show Me button below. Additionally in this demonstration you can select the type of control to be added to the window from the drop down list first.



Next Tutorial: 8.4 Inherited Controls

Shopping Basket
Your shopping basket is currently empty.
RSS Feed   Powered By Commerce Cloud
This site is powered by the Commerce Cloud Engine. Copyright (c) 2009 Exbos Limited. All Rights Reserved. SiteMap   Cookie Policy
Web site design and layout by Exbos Ltd. Copyright (c) 2010 Exbos Ltd. All Rights Reserved.
Exbos Ltd providing Bespoke Software Design and Build in Leeds and West Yorkshire for the whole of the UK