Storing element references as public object members
psema4
I've spent several days trying to work this out. Maybe I'm just
searching for the wrong keywords/phrases.
I have some code that looks like:
[-- snippet starts --]
Console = new Object();
Console.init = function() {
this.STDIN = document.getElementById('console0_stdin');
this.STDOUT = document.getElementById('console0_stdout');
// set styles on the element references, eg:
this.STDIN.style.width = '100%';
this.STDOUT.style.width = '100%';
}
Console.focus = function() {
this.STDIN.focus();
}
Console.writeln = function(buffer) {
this.STDOUT.value += "\n" + buffer;
}
[-- snippet ends --]
I'm not sure why, but the Console.focus() and Console.writeln() methods
just don't seem to be able to use the DOM references stored in
Console.STDIN and Console.STDOUT. Everything's fine in the
constructor, but other methods can't seem to use them.
Any ideas? TIA
- Scott
http://atomos.sourceforge.net/
VK
psema4 wrote:
> I'm not sure why, but the Console.focus() and Console.writeln() methods
> just don't seem to be able to use the DOM references stored in
> Console.STDIN and Console.STDOUT.
Because you are wronly assuming that the browser knows in advance the
document structure including all proper DOM references. In fact it
doesn't have an fn clue about it until the </html> close-up is received
(so all document elements can be placed in some kind of hierarchy even
if not all of them are loaded yet).
I like your style, so for a singleton you could:
...
function SysConsole {
if (SysConsole.$_$) {
return Console.$_$;
}
else {
this.sysin = document.forms[0].elements['elmname1'];
this.sysout = document.forms[0].elements['elmname2'];
// your methods using .sysin and .sysout
// ...
SysConsole.$_$ = this;
}
}
function init() {
Console = new SysConsole();
// etc.
}
window.onload = init;
...
Richard Cornford
This fragment of code is insufficient to answer the question. It needs
its context. How and where it is called and how and where the methods
are called, as that makes a big difference to how javascript behaves
(particularly with regard to the - this - reference).
Without that information you are unlikely to receive a sensible answer.
Richard.
psema4
> psema4 wrote:
> > I've spent several days trying to work this out. Maybe
> > I'm just searching for the wrong keywords/phrases.
> >
> > I have some code that looks like:
> >
> > [-- snippet starts --]
> > [-- snippet ends --]
> This fragment of code is insufficient to answer the question. It needs
> its context. How and where it is called and how and where the methods
> are called, as that makes a big difference to how javascript behaves
> (particularly with regard to the - this - reference).
>
> Without that information you are unlikely to receive a sensible answer.
Sorry. Actually, providing enough (read, not too much) context is just
my problem... At least in most of the posts I've been making lately.
The context is that OOP style JavaScript is where we're heading with
the Atomic OS. Understanding Atomic OS and what it's capable of
involves a number of gears being shifted in the minds of web
developers. (IMO)
In order to provide "enough" context, the following resources are
recommended:
* Current Project - http://atomos.sourceforge.net/
* Predecessor - http://www.avidus.ca/wajax/console.html
* Related - http://www.tiddlywiki.com & http://www.masswerk.at/termlib/
For complete context, you'll need to download the sourcecode and build
system (*nix based platforms, first URL above). After extracting,
you'll find the current code in
/your/path/to/atomos/build/kernel/system/console.js
The previously posted snippet is originally (and in part), the work of
a developer that joined the project after Atomic OS showed up on Digg.
I fully support the direction he's moving. I've spent too much time in
BASIC, Assembly, C, C++, Pascal, Delphi, and Perl to "learn" the
JavaScript Paradigms. (Fortunately, it I find it very similar to Perl.
Enough in fact that I'm hoping to write a JIT Perl->JavaScript
converter for Atomic OS.)
The Sourceforge summary is posted as follows:
"Atomic OS is a responsive Web 2.0 operating environment & development
platform. Based on AJAX techniques, it emulates/provides standard
operating system features including a command-line shell, interpreter,
filesystem, database access and GUI services."
psema4
VK wrote:
[...]
> I like your style, so for a singleton you could:
>
> ...
> function SysConsole {
> if (SysConsole.$_$) {
> return Console.$_$;
> }
> else {
> this.sysin = document.forms[0].elements['elmname1'];
> this.sysout = document.forms[0].elements['elmname2'];
> // your methods using .sysin and .sysout
> // ...
> SysConsole.$_$ = this;
> }
> }
>
> function init() {
> Console = new SysConsole();
> // etc.
> }
>
> window.onload = init;
> ...
Heheh, glad u like the stylz. ;-)
Actually, I'm still learning JavaScript... Can you explain the code
snippet above and how it works? Particularly the $_$ construct?
Thanks!
- Scott.
VK
> > ...
> > function SysConsole {
> > if (SysConsole.$_$) {
> > return Console.$_$;
> > }
> > else {
> > this.sysin = document.forms[0].elements['elmname1'];
> > this.sysout = document.forms[0].elements['elmname2'];
> > // your methods using .sysin and .sysout
> > // ...
> > SysConsole.$_$ = this;
> > }
> > }
> >
> > function init() {
> > Console = new SysConsole();
> > // etc.
> > }
> >
> > window.onload = init;
> > ...
> Actually, I'm still learning JavaScript... Can you explain the code
> snippet above and how it works? Particularly the $_$ construct?
Presuming that you need only one instance of Console in the execution
context, you may create a kind-of-sort-of singleton (so a constructor
allowing to create only one instance of given object; kind-of-sort-of
because it is an emulation of class-based paradigm, not something
native to JavaScript).
You are waiting for onload so all DOM elements on the page can be
accessed.
Then you create an instance of SysConsole by Console = new
SysConsole();
At the construction SysConsole stores a reference to the constructed
object in .$_$ property. You can call this property any name you like,
$_$ is just an "unusual name protection" to minimize the risk that you
accidentally create another property with the same name.
So if you try to create another instance of SysConsole, next time
constractor will return a reference to the existing instance instead of
creating a new one.
That is nothing of being bulletproof neither necessary, just a hint.
Feel free to just
...
function SysConsole {
this.sysin = document.forms[0].elements['elmname1'];
this.sysout = document.forms[0].elements['elmname2'];
// your methods using .sysin and .sysout
// ...
}
function init() {
// create global instance Console:
Console = new SysConsole();
}
window.onload = init;
...
or by making a "template" and finish construction onload:
...
var Console = {
"method1" : function(){} ,
"method2" : function(){} ,
// ...
};
function init() {
Console.sysin = document.forms[0].elements['elmname1'];
Console.sysout = document.forms[0].elements['elmname2'];
}
window.onload = init;
...
Richard Cornford
> Richard Cornford wrote:
>> psema4 wrote:
>> > I've spent several days trying to work this out. Maybe
>> > I'm just searching for the wrong keywords/phrases.
>> >
>> > I have some code that looks like:
>> >
>> > [-- snippet starts --]
> [...]
>> > [-- snippet ends --]
>
>> This fragment of code is insufficient to answer the
>> question. It needs its context. How and where it is
>> called and how and where the methods are called, as
>> that makes a big difference to how javascript behaves
>> (particularly with regard to the - this - reference).
> In order to provide "enough" context, ...
So no code then?
Richard.
psema4
> >> This fragment of code is insufficient to answer the
> >> question. It needs its context. How and where it is
> ^^^^^^^^^^^^^
> >> called and how and where the methods are called, as
> ^^^^^^^^^^^^^
> >> that makes a big difference to how javascript behaves
> >> (particularly with regard to the - this - reference).
> <snip>
> > In order to provide "enough" context, ...
>
> So no code then?
I'm not sure what the difference is, but this cut-down version actually
works properly in regards to the Console.STDIN and Console.STDOUT
properties. There must be something else in the Atomic OS sourcecode
that's causing the problems.
Anyway, here's a sample of how the Console object is to be used...
[-- code starts --]
<html>
<head>
<title>jsConsole II</title>
<script language="JavaScript">
// CONSOLE.JS
Console = new Object();
Console.scrolldelta = 0;
Console.init = function () {
this.STDIN = document.getElementById('console0_stdin');
this.STDOUT = document.getElementById('console0_stdout');
this.PROMPT = document.getElementById('console0_prompt');
// Make console a positional element
document.getElementById('console0').style.position = 'absolute';
// Resize console elements
this.STDOUT.style.width = (SCREEN_WIDTH-20)+'px';
this.STDOUT.style.height = (SCREEN_HEIGHT-100)+'px';
this.PROMPT.style.width = (SCREEN_WIDTH-20)+'px';
this.STDIN.style.width = (SCREEN_WIDTH-20)+'px';
// Make stdout read-only
this.STDOUT.disabled = true;
this.STDOUT.style.backgroundColor = '#ddd';
this.STDOUT.style.color = '#000';
this.STDOUT.style.border = '0px solid #000';
// Define scrolldelta
this.scrolldelta = this.STDOUT.scrollHeight;
}
Console.resize = function () {
// Determine size of visible area in browser window
SCREEN_WIDTH = io_AvailBrowserWidth();
SCREEN_HEIGHT = io_AvailBrowserHeight();
// Resize console elements
this.STDOUT.style.width = (SCREEN_WIDTH-20)+'px';
this.STDOUT.style.height = (SCREEN_HEIGHT-100)+'px';
this.PROMPT.style.width = (SCREEN_WIDTH-20)+'px';
this.STDIN.style.width = (SCREEN_WIDTH-20)+'px';
// recalibrate scrolldelta
var tmp = this.STDOUT.value;
this.STDOUT.value = '';
this.scrolldelta = this.STDOUT.scrollHeight;
this.STDOUT.value = tmp;
// Pass the message along to the window manager
if (DesktopUID != -1) {
wm_ResizeDesktop();
}
}
Console.toFront = function () {
document.getElementById('console0').style.zIndex = ++topZ
}
Console.toBack = function () {
document.getElementById('console0').style.zIndex = 0;
}
Console.focus = function () {
// this.STDIN.focus();
//
// Broken, workaround:
// document.getElementById('console0_stdin').focus();
this.STDIN.focus();
}
Console.unfocus = function () {
// Temporary hack
document.getElementById('console0_stdin').blur();
}
Console.writeln = function (str) {
// this.STDOUT.value += "\n" + str;
//
// Broken, workaround:
// document.getElementById('console0_stdout').value += "\n" + str;
this.STDOUT.value += "\n" + str;
}
window.onresize = Console.resize;
//
----------------------------------------------------------------------
// SCREEN.JS
var SCREEN_WIDTH = '0';
var SCREEN_HEIGHT = '0';
function io_InitScreen() {
SCREEN_WIDTH = io_AvailBrowserWidth();
SCREEN_HEIGHT = io_AvailBrowserHeight();
}
function io_AvailBrowserWidth() {
if(window.innerWidth) {
return window.innerWidth;
}
return -1;
}
function io_AvailBrowserHeight() {
if(window.innerHeight) {
return window.innerHeight;
}
return -1;
}
//
----------------------------------------------------------------------
// KEYBOARD.JS
var keyENTER = 13;
var keyUP = 38;
var keyDOWN = 40;
var keyPGUP =33;
var keyPGDN = 34;
function io_GetKey(e) {
if (window.event) return window.event.keyCode;
else if (e) return e.keyCode; // was e.which
else return null;
}
function io_MatchKey(key, test) {
if (key == test) return true;
else return false;
}
//
----------------------------------------------------------------------
// THIS IS A QUICK WASH SHELL HACK FOR EXAMPLE
function CommandlineHandler(event) {
var key = io_GetKey(event);
if (io_MatchKey(key, keyENTER)) {
var result = eval(document.getElementById('console0_stdin').value);
document.getElementById('console0_stdout').value += "\n" + result;
}
}
//
----------------------------------------------------------------------
// INIT.JS
var DOSCOMPAT = false;
var HOSTNAME = 'localhost';
var USERNAME = 'guest';
var GROUPNAME = 'guest';
var CWD = 'guest';
var PATH = '/bin:/sbin';
function system_Init() {
io_InitScreen();
Console.init();
// wm_InitWidgetManager();
// DOMFS.init();
// WashPrompt();
// WashCommand('/etc/rclocal');
Console.focus();
}
//
----------------------------------------------------------------------
</script>
</head>
<body onLoad="system_Init()">
<div id="console0">
<textarea id="console0_stdout"></textarea><br/>
<span id="console0_prompt"></span><br/>
<input type="text" id="console0_stdin"
onKeyPress="CommandlineHandler(event);">
</div>
</body>
</html>
[-- code ends --]
(Just a quick reminder that we're in the process of cleaning this code
up so that it's all object oriented...)
Richard Cornford
> Richard Cornford wrote:
>> >> This fragment of code is insufficient to answer the
>> >> question. It needs its context. How and where it is
>> ^^^^^^^^^^^^^
>> >> called and how and where the methods are called, as
>> ^^^^^^^^^^^^^
>> >> that makes a big difference to how javascript behaves
>> >> (particularly with regard to the - this - reference).
>> <snip>
>> > In order to provide "enough" context, ...
>>
>> So no code then?
>
> I'm not sure what the difference is, but this cut-down
> version actually works properly in regards to the
> Console.STDIN and Console.STDOUT properties.
If the code you posted does what it is supposed to do in isolation then
it remains insufficient to identify the issue.
> There must be something else in the
> Atomic OS sourcecode that's causing the problems.
Seems a reasonable conclusion.
> Anyway, here's a sample of how the Console object is
> to be used...
<snip>
And of what use is that supposed to be?
Richard.