Click here to Skip to main content
Click here to Skip to main content

ABC to Handling Visual Objects using Javascript

, 13 Jul 2007
Rate this:
Please Sign up or sign in to vote.
This article shows how to create, move, delete and select current visual objects inside a display

Introduction

I know everybody hates Web scripting, the reasons are multiple and I can uphold several of them, BUT for those of you who are seeing the light at the other end of the tunnel, I am willing to offer for practice few lines of code handling sensitive visual aspects when programming Web UIs.

The example shown below is meant to open minds and maybe take the practicants closer to their solutions using basic HTML objects and tags in a not very complicated manner. The classic HTML objects and tags I am talking about are: DIV and TABLE. Further on, we will consider the DIVs as graphical shapes and so, we will only be handling rectangular shapes as these objects natively are.

OBS: Vulnerability of this project: it is only designed to work under Internet Explorer Web browser.

The topics I wanted to reach:

  1. How to visually control graphical shapes – create, move, resize, delete.
  2. Also, in order to have these objects treated likewise, we will need to define a collection of objects of the same type and same behavior.
  3. Then, to put the verbs to work and have some action there, you'll need user friendly Context Menu applied differently on each and every object from the UI.

Of course, each object I am talking about is defined in a different JS file included in the project and uses a different CSS file, as follows:

  • For the zone objects - GCZones.js and styleZone.css
  • For the display – GCDisplay.js and styleDisplay.css
  • For the ContextMenu – GCContextMenu.js and styleCM.css
  • For the document – GCDocument.js

Visual Control Over Graphical Shapes

  1. Creating zones inside the display
    OBS: You need to have implemented default values for the zone's width and height. The location for creating the new zone object is the current mouse position.

    var defaultWidth = 300; 
    var defaultHeight = 200; 
    ... 
    //
    // creates new zone with default size 
    //
    function CreateZone(obj)
    {
        obj = document.getElementById("display");
        if (obj == null)
            return; 
    
        (new Zone(event.clientX, event.clientY, defaultHeight, defaultWidth)).Show();
    }

    display menu

  2. Resizing zones inside the display
    OBS: When resizing, I have implemented a minimum size for the zone and it is hard-coded.

  3. Deleting zones
    OBS: Deleting one zone implies hiding the div object and reset of the zones private counter

    deleting selected zone
  4. Docking the zones inside the display
    OBS: When docking, remember the dock index so that you can use the remaining space of the display.

    docking zones inside the display
  5. Moving the zones inside the display
    OBS: When moving, you need to consider the window's coordinates, the position and size of the display inside the window and the display's border weight.

  6. Selecting the current zone
    OBS: Selecting one zone means "rising" it to the top most level and signal it using different colors

    selecting current zone

Emulating the Zones Collection-like Usage

  • First, create the functions that will define one zone object:

    //
    // define the Zone object 
    //
    function Zone(posX, posY, height, width)
    {
        this.id = "zone" + zoneNo; 
        this.top = posY; 
        this.left = posX; 
        this.height = height; 
        this.width = width; 
        this.Show = function () {ShowZone(this);}
        //this.background = zoneColor; 
        this.dock = "None"; 
        this.deleted = false; 
        ZoneList[zoneNo] = this;
        zoneNo++; 
    }
  • Then create a function with all the functionality of a collection (add, insert, delete, index, etc.) and be specific with the parameter object you send to these functions to consider it as being of the previously defined Zone type.

    //
    // define a simple array  
    //
    var ZoneList = new Array; 
    
    //
    // create functions that describe collection functionality ...
    // 
  • Yeah, and don't forget to declare a private counter for the zones as they are created or deleted from the display.

Create ContextMenu Feature for the Special Shapes You Create

For example, this small application uses a CM defined for two different types of objects:

  • One for the display and it shows the specific actions that can be applied over the display
  • The other for the zones inside the display and it shows the actions that can be applied over the shown zones

Out of my point of view, the best thing for a CM library is to be easy to declare and code non-invasive, and still be able to have an attractive look, just like the one described below:

// 
// declare CM options 
// 
var optMenuDisplay = new Array(); 
// these declarations allow the user to define 
optMenuDisplay[0] = new MenuItem("Create zone", "CreateZone();", "images\\create.gif");
optMenuDisplay[1] = new MenuItem("Change display", "ChangeDisplay();", 
        "images\\check2.gif"); // a CM item with a relevant image attached 
// this option draws a separator between CM items 
optMenuDisplay[2] = new MenuItem("hr", "hr");                                          
// this declaration creates a simple CM item 
optMenuDisplay[3] = new MenuItem("About", "About();");
var cmDisplay = new ContextMenu(optMenuDisplay); 
cmDisplay.Create(); 

... and the rest of the CM functionality resides in the well done JS library.

General Information

There is an option to change the display's size. Resizing the display triggers the resize of the Zones inside the display.

History

  • 13th July, 2007: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gelu Vac

Romania Romania
No Biography provided

Comments and Discussions

 
GeneralExtensions PinmemberMember 12265631-Jul-08 2:02 
GeneralFireFox, Opera... PinmemberMarcelo Franco on Notebook19-Jul-07 3:46 
GeneralRe: FireFox, Opera... Pinmemberparadoxxl27-Jul-07 22:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140814.1 | Last Updated 13 Jul 2007
Article Copyright 2007 by Gelu Vac
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid