Home


Tutorials / Tips & Ticks / DynAPI Tools

Contents:

 


Tools & Utilities

 

Using the JScript Compressor

DynAPI Compressor

The main purpose of the compressor is to reduce the size of the dynapi distribution source files. but it can also be used to remove code statements that are not needed for production. 

For example a user might want to create an intranet app that will only run on DOM browsers. In such a case the NS4 support code is not need for his/her project.  All the user needs to do is to uncheck the "NS4 Support" check box on the compiler and click the compile button.  This will remove all NS4 specific codes from the DynAPI library after it's compiled. For more information please see the "About DynAPI Compressor" section of the compiler.

 

Java Compressor

The Java Compressor is similar to the DynAPI Compressor, except that it is Java based, which makes it easier to run from the command line as part of a build process. Along with compression, it also has the ability to merge multiple JavaScipt files into one file, for easier including and faster download at runtime. The Java Compressor has an easily configured xml file to customize which files are being compressed and merged.

Because the merge replaces the DynAPI library features, you must include the right files in the right order. The library normally determines which browser specific files to load. Since the library isn't doing this at runtime, you're going to have to. There are two suggested methods of doing this:

1) You can configure the xml to merge all files needed, and use the "compare-value" attribute to have it parse the proper one at run time. If the compare value is true, that input-file is the only one that will be parsed. If it's false, it moves on to the next one, and tries that input-file. If it's at the last input-file in the input-group, then it uses that one.
        <input-group>
            <input-file  name="D:/development/dynapi/src/api/dynlayer_ie.js" compare-value="dynapi.ua.ie" />
            <input-file  name="D:/development/dynapi/src/api/dynlayer_dom.js"/>
        </input-group>
    
Pro: html file only has one file to include. This makes for cleaner looking code, and the client only needs to hit the server once.
Con: client is downloading more code than it's going to use.
2) You can configure the xml to make N number of merged files, where N is the number of browser types, plus 1 generic. That way, your html file would include the generic cross-browser file first, do the check to see which browser the client is using and manually include the proper file.
        <jscompressor>
            <compressed-file name="D:/development/js/generic.js">
                <input-file  name="D:/development/dynapi/src/dynapi.js"/>
                <input-file  name="D:/development/dynapi/src/api/event.js"/>
            </compressed-file>
            <compressed-file name="D:/development/js/ie_stuff.js">
                <input-file  name="D:/development/dynapi/src/api/dynlayer_ie.js">
                <input-file name="D:/development/dynapi/src/api/mouse_ie.js">
            </compressed-file>
            <compressed-file name="D:/development/js/dom_stuff.js">
                <input-file  name="D:/development/dynapi/src/api/dynlayer_dom.js">
                <input-file name="D:/development/dynapi/src/api/mouse_dom.js">
            </compressed-file>
        </jscompressor>
    
Pro: only the javascript that is needed is downloaded by the client.
Con: the client will need to hit the server multiple times, and your html code will need to have the if / else browser checks in them.
The Java Compressor was built with flexability in mind. You should be able to configure it to generate whatever works best for your situation.

 

Text2Var Converter

DynAPI Text2Var Converter

The DynAPI Text2Var converter is used for converting text/html into a JavaScript String or Array variable.


Tips & Tricks

 

1. Nested var inside for loop

Never use var inside a loop:

// this is inefficient
for (var i=0; i<10;i++){
    for(var c=0;c<10;c++){
        // some code here
    }
}

// this is more efficient
var i,c
for (i=0; i<10;i++){
    for(c=0;c<10;c++){
        // some code here
    }
}
  

2. Get & Set Cursor functions

The getCursor() and setCursor functions will use the word 'hand' to display the "hand pointer" in both ie and ns6+

var lyr = new DynLayer();
lyr.setCursor('hand');

 

3. Giving Layers an alias name

You can use the addChild() alias argument to give the child layer and alias when it's added to a parent layer:

lyrParent.addChild(new DynLayer(),'lyrBar');
lyrParent.lyrBar.setHTML('Hi'); 

Good practice suggest is to always best to add a three letter prefix to the name of your objects. For example  layers could be named as lyrLine, lyrBox, lyrCover, while buttons and other could use the following naming convention. This is to prevent newly added objects from overwriting existing methods or properties:

Object Prefix
DynLayer lyr
Button btn
ScrollBar vsc or hsc
ListBox lst
TreeView tvw
ListView lvw
Grid grd

 

4. Cross Frame Access

With DynAPI it's possible to create and access layers from another frame within the browser

Click here to see an example.

 

5. Using getContentWidth/Height() and setAutoSize()

The methods used to access the width and height of a layer's content will differ from browser to browser. DynAPI however makes it easy with the use of the getContentWidth and getContentHeight functions.

var lyr = new DynLayer('Hello World');
dynapi.functions.addChild(lyr)
dynapi.onLoad(function(){
    var w = lyr.getContentWidth();
    var h =  lyr.getContentHeight();
})

The setAutoSize function causes the layer to automatically adjust to the size of it's content (including child layers) whenever it's content is changed or modified.

var lyr = new DynLayer('<table><tr><td>Hello <br> World</td></tr></table>');
lyr.setAutoSize(true,true);
dynapi.functions.addChild(lyr);

For best results across browsers always wrap your HTML content inside a table.