any documentation ?

Hi guys,

I am trying to build a custom component which should look like a horizontal list of servers (icon and description on the bottom) and should be scrollable horizontally only.

is there any documentation on how to collaborate multiple widgets togeher in a fashionable way?
I would assume that I need a some kind of group, or DIV and scroller and then put a table inside of that DIV or group.

to control entries (add, remove etc) I would need some methods like addServer. then I would need some way to control clicks on each server, or drag-n-drop actions tobe attached.

so, to accomplish all that I would probably have to know more than you have on your site (moreover the doc is way outdated).

do you guys have anything available read, or I need to go the way of trial and failure ?
thanks
andrew

No, there is still no documentation for v2 - just a list of classes/methods/properties on this website plus few examples in the distribution.

From your description it looks like list control with horizontal list flow and vertical item shape. You can get the horizontal list with either

obj.setClass("flow", "horizontal");

or

obj.setClass("flow", "inline");

but for vertical item shape I don't have pre-defined classes yet. Though I am sure it can be done as it is the same icon and text combination.

Andrew (and anyone else that wants a basic lesson in creating new controls),

What I do is that I first sketch out the entire control on paper. This will tell me what sort of 'controls' I am going to need and in what order I am going to need to create them. I list all of the methods I will need to interact with my new control, it sounds like you have thought about that part already. Then I start to create the new control one piece at a time. Start with the containing part and work inward.

So for your container, I suggest using a AW.System.Control, this will give it full template capability. Then change it's Tag to DIV if you want it to be a DIV, it is a SPAN by default. You add new pieces to the control with defineTemplate, this allows you to add more templates or actual UI controls. You can also add simple HTML objects as well by creating a var of the new object. In all cases, any object that you create needs to be accounted for in the setContent function of the container control. you can get a handle to your created template controls via getTemplate("nameofthetemplate"), and with that you can set properties or call functions or whatever else you can do with a control. Here is a simple example of how to create your own complex control including 2 input boxes and a button, also a new method for the control to copy information from the first input box into the second. Try it out, enter information into the top box then press the button to see the info copied into the bottom box. Using these simple techniques you can create some sophisticated controls. But remember that when you are creating your own controls, create and test in tiny pieces! Do not try and create too much at one time as JavaScript is not forgiving and you will not be able to troubleshoot very easily. Here is the sample:

AW.HTML.myTestControl = AW.System.Control.subclass();
AW.HTML.myTestControl.create = function(  )
{
  var obj = this.prototype;
  obj.setTag( "DIV" );
  obj.setStyle( "border-size", 1 ); 
  obj.setStyle( "border-color", "red");
  obj.setStyle( "border-style", "solid" );
  obj.setPosition( 10,10 );
  obj.setSize( 200,100 );

  obj.defineTemplate( "myInput", new AW.UI.Input );
  with ( obj.getTemplate( "myInput" ) )
  {
    setPosition( 10,10 );
  }
  obj.defineTemplate( "myOutput", new AW.UI.Input );
  with ( obj.getTemplate( "myOutput" ) )
  {
    setPosition( 10,40 );
  }
  obj.copyText = function(  )
  {
    var a = this.getTemplate( "myInput" ).getControlText();
    this.getTemplate( "myOutput" ).setControlText( a );
    this.getTemplate( "myOutput" ).refresh(  );
  }
  obj.defineTemplate( "myButton", new AW.UI.Button );
  with( obj.getTemplate( "myButton" ) )
  {
    setPosition( 10, 70 );
    setControlText( "Do it" );
    setEvent( "onclick", function(  )
    {
      this.$owner.copyText(  );
    } );
  }

  obj.setContent( "html", function(  )
  {
    return this.getMyInputTemplate(  ) + this.getMyOutputTemplate(  ) + this.getMyButtonTemplate(  );
  } );
}

a = new AW.HTML.myTestControl;
document.write( a );

have fun.

hi Jim,

great example, I will try to use it to create my own controls.
By the way how do I define new style classes for inside elements of that control, so I can set styles for the entire class of controls and for individual instances of those controls and their internal controls.

thanks
andrew

Yes Jim, that's incredibly helpful. I guess this is the sort of thing that a much awaited 'programming guide' document will contain.

One thing, I don't get the line "this.$owner.copyText( );" - what is "$owner"? (maybe this shows how my javascript is lacking..)

Thanks for all your ongoing contribution in the forum.

Excellent code Jim,

But isn't that supposed to be?

obj.setStyle( "border-width", "1px" );

First time i am coming across border-size for width usage.. hehe.. ;)

Great work!

Oh, By the way Will,

this.$owner (for a template) points to the parent object that defined the template. In this case it is obj (any instance of AW.HTML.myTestControl). $owner is a custom implementation.. So, now you that it is not part of any Javascript spec.. and also the fact that you exactly know the proper Javascript as how you know that there are only 26 alphabets in English.. ;)

Regards

Sheriff,

Oops, yes it is "border-width", what was I thinking?

Andrew,

You can always create new styles for any AW control. The caveat is that you have to use the naming convention:

.aw-firstlevel-secondlevel

And when you assign a CSS class, or classes, to a control remember that the firstlevel name will be unique to each control. That is you can not assign .aw-edit-bold and .aw-edit-italic to the same control at the same time. When you assign the second one it will replace the first one. But you can assign .aw-italic-edit and .aw-bold-edit to the same control and they will cascade normally (last assigned has priority). So if you were to create your own style for the above example it might look like this:

<style>
.aw-myTest-basicPosition {
  left : 10;
  top : 10;
  height : 100;
  width : 200;  
}
.aw-red-border{
  border-width : 1;
  border-color : red;
  border-style : solid;
}
</style>

and in your object creation you assign the class like:

obj.setClass("myTest", "basicPosition");
  obj.setClass("red", "border");

Jim,

Thanks to your example, I've been able to create a new control, modelled along the lines of a date selector. It consists of a grid of days of the month with four buttons to roll forward or backwards by a month or a year.

I'd like to use it to enter and edit dates ie when a user attempts to edit a date cell, the date selector pops up.

In a simple test page, I've added a line of code to define the date selector as the editor:

obj.setEditorTemplate(new Datepicker, 2);

The page loads, but when I double click on a cell, I get an "undefined" error from _cell.js specifically the following line from the edit() function

var text = editor.element().getElementsByTagName("input")[0];

It looks like the AW code expects my new control to contain something to pass a cell value back and forth. I've not added anything because I don't know what it expects.

Could you, or anyone else who reads this post, point me in the right direction please? Thank you.

When you create an AW.UI.Input control, in reality it's not an <input> type control. It's a collection of <SPAN>'s. So you will not be able to locate it with GetElementsByTagName. I would have to see your code and what you are trying to do to offer more assistance.

;; This buffer is for notes you don't want to save, and for Lisp evaluation.
;; If you want to create a file, visit that file with C-x C-f,
;; then enter the text in that file's own buffer.

Is it just me, or does the above example just not work?

The control itself renders ok but when you click the button nothing happens. It code indicates that the content of first text box is supposed to be copied into the second box. However, when I do this nothing happens.

From what I can tell, the child components that are rendered are clones of the templates. However, copyText() gets the value of the template myInput and updates the value of myOutput and finally refreshes the template of myOutput. As everything is cloned nothing happens. When myOutput is refreshed it gets displayed with the original value of the myOutputTemplate.

To varify this I modified the code to put values in the text controls and to keep references of the cloned templates. copyText copies the value from the saved myOutput to value of the saved myOutput. This partially works because the original value myInput is stored in the saved myOutput. The problem is that any values I type into myInput are nowhere to be seen. I suspect this is because when the saved input controls are rendered it is basically some sort of toString(). Therefore the physical input controls are not linked to the saved controls inside of this class. So now my question is, how do you link the rendered input controls with actual control. I hope I making sense here.

Anyway, here is my modified script.


AW.HTML.myTestControl = AW.System.Control.subclass();
AW.HTML.myTestControl.create = function( )
{
var obj = this.prototype;
obj.setTag( "DIV" );
obj.setStyle( "border-size", 1 );
obj.setStyle( "border-color", "red");
obj.setStyle( "border-style", "solid" );
obj.setPosition( 10,10 );
obj.setSize( 200,100 );

obj.defineTemplate( "myInput", new AW.UI.Input );
with ( obj.getTemplate( "myInput" ) )
{
setPosition( 10,10 );
setControlText("input");
}
obj.defineTemplate( "myOutput", new AW.UI.Input );
with ( obj.getTemplate( "myOutput" ) )
{
setPosition( 10,40 );
setControlText("output");
}
obj.copyText = function( )
{
var a = this.myInput.getControlText();
this.myOutput.setControlText( a );
this.myOutput.setControlTooltip( "hello" );
this.myOutput.refresh( );
}
obj.defineTemplate( "myButton", new AW.UI.Button );
with( obj.getTemplate( "myButton" ) )
{
setPosition( 10, 70 );
setControlText( "Do it" );
setEvent( "onclick", function( )
{
this.$owner.copyText( );
} );
}

obj.setContent( "html", function( )
{
this.myInput = this.getMyInputTemplate( );
this.myOutput = this.getMyOutputTemplate( );
return this.myInput + this.myOutput + this.getMyButtonTemplate( );
} );
}

var a = new AW.HTML.myTestControl();
document.write( a );

Ok, now this one works.

myInput and myOutput are no longer templates but properties of myTestControl. myButton remains a template because we don't need access to its runtime instance.

AW.HTML.myTestControl = AW.System.Control.subclass(); 
AW.HTML.myTestControl.create = function(  ) 
{ 
  var obj = this.prototype; 
  obj.setTag( "DIV" ); 
  obj.setStyle( "border-size", 1 );  
  obj.setStyle( "border-color", "red"); 
  obj.setStyle( "border-style", "solid" ); 
  obj.setPosition( 10,10 ); 
  obj.setSize( 200,100 ); 
  
  obj.myInput = new AW.UI.Input();
  obj.myInput.setPosition( 10,10 ); 
  obj.myInput.setControlText("input"); 
  obj.myOutput = new AW.UI.Input();
  obj.myOutput.setPosition( 10,40 ); 
  obj.myOutput.setControlText("output"); 
  
  obj.copyText = function(  ) 
  { 
    var a = this.myInput.getControlText();
    this.myOutput.setControlText( a );   
  } 
  obj.defineTemplate( "myButton", new AW.UI.Button );
  with( obj.getTemplate( "myButton" ) )
  {
    setPosition( 10, 70 );
    setControlText( "Do it" );
    setEvent( "onclick", function(  )
    {
      this.$owner.copyText(  );
    } );
  } 
  obj.setContent( "html", function(  ) 
  { 
    return this.myInput + this.myOutput + this.getMyButtonTemplate(); 
  } ); 
} 

var a = new AW.HTML.myTestControl(); 
document.write( a );