Advanced JavaScript Library
 
 
 
8.2 Creating Controls
Home > Documentation > 8.0 Tutorials > 8.2 Creating Controls

Summary

The following simple example demonstrates how easy it is to create any control within the Cheiron library. The code here will create a Cheiron Window control and position it on screen. 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. 

<html>
    <head>
        
<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()
            {
            }

        </script>
    </head>
    <body>
    </body>
</html>

Step Two: Add Your Create Code

All Cheiron objects are created by a simple call to the System.CreateObject function. This can be used to create the simplest objects such as System.Type upto more complex control objects such as System.Controls.HtmlEditor with just a single call. The object returned by the create function alows you to access all of the functions of that class. When creating control objects, which have a user interface, you must also call the Initailize() method to display the control to the browser.

var cheironWindow;

cheironWindow = System.CreateObject("System.Controls.Window");
cheironWindow.Initialize();

Step Three: Move and Resize

Running the code from the previous step will create a Cheiron window of the default size at the default position. This is rarely the most useful size or position and so the window, or any other control, will require a resize and move. To do this we add two simple lines of code one to change the window's size, Move(x,y), and the other its position, Resize(width, height). The position of the Move is relevant to the parent control as this window has no parent the position is relative to the browser window.

var cheironWindow;

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

 

Running the code will create, then move and resize the window. You will notice the window is fully functional, you can resize, mazimize, minimize and close the window without any additional code. To test this right now here in your browser you can click the Show Me button below.


 

Next Tutorial: 8.3 Control Containers

 
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 - Publishers of Print Cloud - the complete Printers online toolkit in one package