Several key improvements are implemented:

1. Separated onDOMContentLoaded/init/ and onLoad/load/ events

onDomContentLoaded event is called when DOM tree has been constructed. Most of initialization code should go here.

onLoad even is called when all page resources has been loaded.  Code that calculate position or size need to wait the images, so should be called here.

//To show a message onDOMContentLoaded call:
init.push("alert('domload')");
//or define 
function init(){ alert('domload');}
//To show a message onLoad call:
load.push("alert('pageload')");
//or define 
function load(){ alert('pageload');}

The loading sequence is:

1. auto object creation – domLoad- dl.make(‘div’)

2. modules auto-init array – domLoad- init.push(‘myinit()’)

3. page init- domLoad - function init() { myinit()}

4. modules auto-load array- pageLoad- load.push(‘myinit()’)

5. page-load – pageLoad- function load() { myinit()}

2. Added silent mode for trace(what, silent) – returns string instead alert

If the second parameter of trace() is true the output will be returned by the function instead of outputting to the screen. The feature is useful when making loggers.

3. Object auto creation uses classNames instead tag parameters

As we adopted XHTML Strict as standard DocType adding custom attributes to the HTML tags is no longer possible /invalidates the document/

The only way to pass custom parameters is to put then into the class attribute.

This dynlite release supports automatic object creation using this technique.

<div id="test" class="dl.someclass()"></div>
is equivalent to
var test = new dl.someclass('test');

The objects are created onDOMContentLoaded.

The auto-creation works if the following conditions are met:

1. The HTML element has Id

2. Specified class exists and its file is included

3. The class is dynlite extension

4. Method  dl.make(‘div’) is called somewhere in the script /usually the library class calls it statically/

5. Removed “type” parameter from make(tag, type)

Setting the classes in the className attribute of the tag makes this parameter irrelevant.  It was never used anyway.

6. Multiple objects can be created be element

Unlike the previous release now many classes can be instantiated for one HTML element.

<div id="test" class="dl.someclass() dl.otherclass()"></div>
is equivalent to
var test = new dl.someclass('test');
var test = new dl.otherclass('test');

Please note that all collisions are left for the developer to solve.

Do not use the global object, because it will point to the last class.

Classes should be separated by space.

7. Object auto creation supports parameters

It is possible to pass parameters to class constructors the same way as if the class is called itself. The passed parameters come as a second argument for the class /the first is always the element Id/. If more that one parameter is passed – they are grouped in array.

<div id="test" class="dl.someclass(1, 'John', 'Smith')"></div>
is equivalent to
var test = new dl.someclass('test', [1, 'John', 'Smith']);

8. Introduced cash parameters to dl.el

Originally the HTML elements selector dl.el() cashes the queried nodes, i.e if once an element is selected the next time it is requested it is taken from the cash. Of course the pointer to the element is cashed, not the element itself. The performance is increased a lot because the costly DOM requests are avoid.

Unfortunately when part of the DOM tree is replaced /usually working with AJAX/ the cash pointers no longer point to a valid element/

In this case the DOM query has to be executed every time.

dl.cash=1; //enables the cash
dl.cash=0; //disables it

9. Introduced -1 status /in execution/

When it is important to know if some method has been executed /onLoad initialization for example/ a status variable is required.

dynlite convention is:

//status variable for dl.method()
dl.is.method = 0; // not executed
dl.is.method = 1; // executed

Sometimes when the execution of the method can take some time or is done asynchronously is important also to know if the execution is underway. The following statuses should be used:

//status variable for dl.method()
dl.is.method = -1;  // in  execution- general
dl.is.method = -23; // in execution with timestamp /ms from the dl initialization/. Used when completion is not certain.

10.  Class prototype naming convention

To avoid polluting dl name-space class prototypes should be named as the class itself by with capital letter.

dl.info = function() {}       //class dl.info
dl.Info = dl.info.prototype;  //dl.info prototype
dl.Info.method = function(){} //dl.info method definition

11.  Implement on-fly script loading

Loading all scripts in page head is costly because is done synchronously. The page have to wait not only script loading, but also its evaluation.  Loading the scripts at the bottom of the page solves the issue, but spoils readability.

A good solution is all js libraries and modules to be loaded dynamically. The following methods are available:

dl.mods[]; /* stores the loaded libraries- the key is module name and value is loading status.
              possible statuses are: 0- not loaded, -1 - loading, 1- loaded */
dl.mod.add('form');  // icludes instantly forms module  - dl.forms.js
dl.mod.add(['form','list']); // multiple scripts loading is supported if the parameter is array
dl.mod.init('forms'); // module is included when the DOM tree is constructed- onDomContentLoaded
dl.mod.load('forms'); // module is included onPageLoad
dl.mod.add('forms').init('list').load('flash'); //all methods return the object, so chaining is possible

Please note that the inclusion/execution order is random, so do not rely on it.

After the inclusion an initialization function is called.

dl.mod.add('form'); // will execute dl.form.init()

The source code can be found in html.dev/dynlite or downloaded from here: dynlite
Documentation and Unit tests will follow shortly.

Cheers!
Peter

1. Firebug - http://getfirebug.com/
2. IE Tab – https://addons.mozilla.org/en-US/firefox/addon/1419
3. MeasureIt -http://www.kevinfreitas.net/extensions/measureit/
4. ColorZilla – http://www.colorzilla.com/firefox/
5. Resizeable textarea – https://addons.mozilla.org/en-US/firefox/addon/3818
6. Web Developer – http://chrispederick.com/work/web-developer/
7. HTML Validator – http://users.skynet.be/mgueury/mozilla/
8. CSS Validator – http://www.nu22.com/firefox/cssvalidator/
9. Operator - http://www.kaply.com/weblog/operator/
10. Tails Export – https://addons.mozilla.org/en-US/firefox/addon/2240?id=2240
11. ShowIP - http://code.google.com/p/firefox-showip/
12. YSlow - http://developer.yahoo.com/yslow/

A great overview for the concepts and common solutions of this problem can be found at: Embed Flash or Die Trying
Btw, nice title too… I will start from there, so reading the above is a good idea. Also my previos post on this topic can help /Include flash content in html page/.

So the task was: make simple, flexible, easy to use, easy to maintain and browser/platform compatible class for including flash into html page. Not bad… Did I mention 2 days time-frame /1 research and 1 implementation/? Will be fun for sure…

Everything begins with the usability. We have 2 scenarios:
1. Should be possible to include Flash at a certain point in the body. The code should be something like:

<div><script type="text/javascript">dl.swf()</script></div>

2. Sometimes is better to replace the content of an element, so for example if there is no flash player alternate content will be present:

<div id="containerId">Alternate Content</div>
<script type="text/javascript">dl.swf("containerId")</script>

Looks simple enough but in case we need multiple instances we should register them. If the instances are created by a Factory method, then the Id will be generated automatically, but when there is communication between JS and AS is better to set it up manually. So no escape- Id parameter is necessary- will be the first argument passed to the constructor.

The other thing that bothers me is that all the logic is executed in the constructor- not much object oriented, eh… Frankly I don’t care /OOP was not part of the requirements /, the problem is that this approach, although simple, somehow shuts the door for future extension and in-between processing, so decided- the final replace will be done by a separate method- write(); Let see what we have:

<div id="containerId">Alternate Content</div>
<script type="text/javascript">
var myObj=dl.swf("flashId")
myObj.write("containerId")
</script>

In case the constructor returns the object/little nasty js trick/ will be much shorter:

<div id="containerId">Alternate Content</div>
<script type="text/javascript">
dl.swf("flashId").write("containerId")
</script>

or flexibility when there are no multiple instances and you don’t replace content in another element, then the Id will be auto-generated and the writing method will not need a parameter.

<div><script type="text/javascript">dl.swf().write()</script></div>

Still simple enough, yet much more flexible.

Then probably we need to adjust some parameters of the html object or pass variables to the .swf itself. Since it is not possible to predict the number of these parameters we can pass them as associate arrays. Unfortunately in Javascript there is no easy way to create associate arrays/they support Alpha calculus though /- something like [key1=>val1,key2=>val2] would have been great, but we have to use objects {key1:val1,key2:val2} – at the end its the same. Our example code should be like:

<div id="containerId">Alternate Content</div>
<script type="text/javascript">
dl.swf("flashId",{par1:val2,par2:val2},{swfvar1:val1,swfvar2:val2}).write("containerId")
</script>

Most of the times there is no need for passing parameters to the .swf and I can preset the most common paratemeters of the html object, so the array parameters should not be required. Again we’re back to:

<script type="text/javascript">dl.swf().write()</script>

Not complex at all, but at the end of the day the class should be used primarily by designers. They seem to be scared of all these dots and brackets/not to mention anonymous objects as parameters/- so a simple function will be perfect for them. Let it be! Also they are used to pass certain parameters to it. No problem- I will take them from swfObject …

<script type="text/javascript">dlswf("path/movie.swf","movie_id","333","333","7","#777")</script>

Enough for the usage. Next is the implementation…

peter.

Here comes the tricky part…

I took the uncompressed version of one popular class- swfobject 2.1 and I was surprised- it was 23KB! Well I know that these days 23K  are nothing for the web bandwidth but if you gonna maintain the code- they are a lot.  Isn’t it all about checking if there is Flash Player present and if yes just replace the innerHTML of some DIV- sounds  not so complex to require 700+ lines of code. I said- that’s ok the volume is not important if the code is simple and understandable. I scrolled down the code and I saw the file is ending with:

                }
            }
        }
    };
}();

Well, this simple complexity test just adds more concerns… what is this complex logic that requires such nesting? Besides what is the point you declare a function just to execute it on creation- can’t you just write the code, or if you want to be more structured- use static class for example.

And the final blow was the conditional parsing/line 88/ for detecting the OS in Internet explorer. Come on we’re not here to show how great programmers we are we just need to replace the innerHTML of a DIV.

Its not that I don’t appreciate the work done by the guys- they are great and I’d like to thank them for sharing it with others, but it’s just not my vision how it should be done.

So I thought to myself- there must be a simpler way… I don’t need complex event management, onDomContentLoaded handling or dynamic DOM elements manipulations- they are all out of scope of flash inclusion class and besides I already have them in the API’s core/I will introduce it in another post/.

I created my own class nearly 9 times smaller and doing exactly what is needed- include flash content  into html page.

When I have time I will write some documentation but it is so simple that I think the usage examples should be enough. If not, one can always take a look at the code . Here they are:

Usage: http://blog.aip-solutions.com/wp-content/uploads/2009/02/dl.swf.htm Actually this was my class test page used in its creation,  so don’t take into account the visual.

Source: http://blog.aip-solutions.com/wp-content/uploads/2009/02/dl.swf.js

Hope will be useful to you…

Cheers,

Peter