Hi,
I've been asking questions about library design over the last week and
would like to get feedback on my overall idea for a JavaScript GUI
library. I need a nice GUI library so there is a good chance I will
write this as I need new widgets. I haven't found anything like this
and I'm surprised/disapointed this doesn't already exist. My library
prototype works nicely. I think parts of these ideas are not commonly
used for JavaScript library development and before I dive in too deeply
any experienced advice might make my efforts a lot better.
While trying to develop a rich GUI for a web app backend I started
needing a large set of GUI widgets that behaved and were coded
similarly. Things like flyout menus, drop down menubars, tree menus,
adjustable table widths, spinners...all the things that are in Java
Swing or other GUI widget libraries. Yes I know all of these things
exist individually as JavaScripts but I would like to build a library
that uses a class hierarchy structure and inheritance to take advantage
of all the nice OOP ideas of encapsulation etc. Certainly this library
will be different than a desktop app GUI library since HTML, CSS and
the browser already provide a lot of what is needed (<ul>'s for menus,
<table> for tables, all sorts of font display stuff, some form
elements). In JavaScript we are adding functionality on top of what the
browser already gives us.
This could end up being a big library but if each class is in it's own
file and the class hierarchy is known then people could string together
only the pieces they need. I would like a develop a way to automate
this step. Something like compiling one JavaScript file with all you
need for your page from the big library.
For JavaScript inheritance I want to use these ideas
http://www.kevlindev.com/tutorials/j...t/inheritance/
I will use one namespace for everything. My library will not interfere
with other libraries.
No direct extending of Function or Array and breaking stuff like
Prototype.js does. Instead I will subclass these as necessary and
extend in the subclass. Directly extending Function or Array would not
go well with my namespace requirement.
No monolithic support script like Prototype.js that tries to turn
JavaScript into Ruby or Python or whatever. Just JavaScript.
All machinery CSS (the stuff that makes the items work eg. display:none
or display:block) inserted with JavaScript and the DOM into the tag's
style elements so that they have specificity 1,0,0,0. This way a user
of the library cannot override without using !important in their CSS
rules.
Separation of machinery CSS and the rest of the JavaScript with the
idea that every change to a DOM element's style attribute is and
"effect". So all the effects will be tucked away nicely in a single
Effects object. This one object will be the only place to look for
browser specific hacks. Hacks can be reused by composite effects.
A default set of CSS files for the pretty stuff that can be overridden
as desired by the library user in their own style sheets. This has
lowest possible specificity so these rules are easily overridden.
Two library interfaces. One advanced interface that allows access to
widget options through a single line of JavaScript per widget.
<head>
<script type="text/javascript" src="seriousWid gets.js"></script>
</head>
<body>
<ul id="myMenuBar" >
<li>item 1<li>
<li>item 2<li>
<ul>
<script>
var my_menu_bar = new
Serious.MenuBar (document.getEl ementById("myMe nuBar"),
{option1:value1 ,
option2:value2} );
</script>
</body>
A second interface, a completely non-obtrusive facade for those who
want to avoid JavaScript at all costs and have widgets that function in
standard ways. Appearance still easily overridden with CSS.
<head>
<script type="text/javascript" src="easyWidget s.js"></script>
</head>
<body>
<ul class="easyMenu Bar">
<li>item 1<li>
<li>item 2<li>
<ul>
</body>
Any thoughts, ideas, cautions or warnings appreciated.
Thanks,
Peter
