Building in support for custom JS libraries

[JimStoner]

Hi there,

I wanted to raise the issue of how users could/should handle custom javascript libraries in conjunction with Ext.nd. Obviously you can manually include any javascript libraries you want on a db by db, form by form basis. However, if you have made a few custom extensions to Ext.nd that you want to use across many databases/applications, it seems to me like it might be nice to have them packaged up with your Ext.nd application profile.

Here's a summary of some simple changes I've made to the Ext.nd Beta 1 db:

I've edited the Application Profile form to add one more visible field called CustomLibraries; this field can have multiple values.

I've edited the HTMLHeadNoUI hidden computed field so that if there are one or more entries in the CustomLibraries field, they get added to the end of the JS header that Ext.nd generates for each application profile. I'll include a copy of the exact changes below.

Finally, I've added a few JS libraries to the Ext.nd db ScriptLibrary.

Now, whenever I create an application profile in Ext.nd, I can just name any additional JS libraries I want to include in that application, and those libraries are automatically included anytime I use Ext.nd in that application. It seems really convenient and easy to me.

Does this seem like a reasonable way to proceed? If so, would it be worthwhile adding this simple functionality to the next Ext.nd release?

Thanks,
Jim

Here's the new formula I'm using for the HTMLHeadNoUI field, with my additions in red. Basically it just adds a temporary string variable called customLibs that has a script tag for each entry in the CustomLibraries multi-value field, and then it includes that string of script tags at the end of the output.



webDbName := @WebDbName;
extUrl := "/" + webDbName + "/ext/" + ExtndVersion + "/";
extndUrl := "/" + webDbName + "/extnd/" + ExtndVersion + "/";
sViewName := "'" + ViewName + "'";
sOutlineName := "'" + OutlineName + "'";
bShowSearch := "true";
theme := @If(
Theme != "default";
"\"<link rel='stylesheet' type='text/css' href='" + extUrl + "resources/css/xtheme-" + Theme + ".css' />\"";
"\"\"");

customLibs := @If (
CustomLibraries != "" ;
"<script type='text/javascript' src='" + extndUrl + CustomLibraries + ".js'></script>";
"" );

REM {Now the code that will be injected into your page/form};

"mode := @If(@UrlQueryString(\"debug\") = \"true\"; \"-debug\"; \"\");
thisWebDbName := @WebDbName;
unid := @If(@IsNewDoc;\"\";@Text(@DocumentUniqueID));
editMode := @If(@IsDocBeingEdited;\"true\";\"false\");
output := \"\";
output := output + @NewLine + @NewLine;
output := output + \"<!-- Ext JS library -->\" + @NewLine;
output := output + \"<script type='text/javascript' src='" + extUrl + "adapter/ext/ext-base.js'></script>\" + @NewLine;
output := output + \"<script type='text/javascript' src='" + extUrl + "ext-all\" + mode + \".js'></script>\" + @NewLine;
output := output + \"<!-- Ext.nd JS library -->\" + @NewLine;
output := output + \"<script type='text/javascript' src='" + extndUrl + "extnd-all\" + mode + \".js'></script>\" + @NewLine;
output := output + \"<script type='text/javascript' src='" + extndUrl + "Session.js?OpenAgent&db=\" + thisWebDbName + \"'></script>\" + @NewLine;
output := output + \"<script type='text/javascript' src='" + extndUrl + "UIDocument.js?OpenAgent&db=\" + thisWebDbName + \"&unid=\" + unid + \"&editmode=\" + editMode + \"'></script>\" + @NewLine;
output := output + \"<script type='text/javascript'>\" + @NewLine;
output := output + \" Ext.nd.init({extndUrl : '" + extndUrl + "', extUrl : '" + extUrl + "'});\" + @NewLine;
output := output + \"</script>\" + @NewLine;
output := output + \"<link rel='stylesheet' type='text/css' href='" + extUrl + "resources/css/ext-all.css' />\" + @NewLine;
output := output + " + theme + " + @NewLine;
output := output + \"<link rel='stylesheet' type='text/css' href='" + extndUrl + "resources/css/domino.css' />\" + @NewLine;
output := output + \"" + @Implode(customLibs ) + "\";
output;"

[Zakaroonikov]

Hi there,

I wanted to raise the issue of how users could/should handle custom javascript libraries in conjunction with Ext.nd. Obviously you can manually include any javascript libraries you want on a db by db, form by form basis. However, if you have made a few custom extensions to Ext.nd that you want to use across many databases/applications, it seems to me like it might be nice to have them packaged up with your Ext.nd application profile.

Here's a summary of some simple changes I've made to the Ext.nd Beta 1 db:

I've edited the Application Profile form to add one more visible field called CustomLibraries; this field can have multiple values.

I've edited the HTMLHeadNoUI hidden computed field so that if there are one or more entries in the CustomLibraries field, they get added to the end of the JS header that Ext.nd generates for each application profile. I'll include a copy of the exact changes below.

Finally, I've added a few JS libraries to the Ext.nd db ScriptLibrary.

Now, whenever I create an application profile in Ext.nd, I can just name any additional JS libraries I want to include in that application, and those libraries are automatically included anytime I use Ext.nd in that application. It seems really convenient and easy to me.

Does this seem like a reasonable way to proceed? If so, would it be worthwhile adding this simple functionality to the next Ext.nd release?

Thanks,
Jim

Here's the new formula I'm using for the HTMLHeadNoUI field, with my additions in red. Basically it just adds a temporary string variable called customLibs that has a script tag for each entry in the CustomLibraries multi-value field, and then it includes that string of script tags at the end of the output.



webDbName := @WebDbName;
extUrl := "/" + webDbName + "/ext/" + ExtndVersion + "/";
extndUrl := "/" + webDbName + "/extnd/" + ExtndVersion + "/";
sViewName := "'" + ViewName + "'";
sOutlineName := "'" + OutlineName + "'";
bShowSearch := "true";
theme := @If(
Theme != "default";
"\"<link rel='stylesheet' type='text/css' href='" + extUrl + "resources/css/xtheme-" + Theme + ".css' />\"";
"\"\"");

customLibs := @If (
CustomLibraries != "" ;
"<script type='text/javascript' src='" + extndUrl + CustomLibraries + ".js'></script>";
"" );

REM {Now the code that will be injected into your page/form};

"mode := @If(@UrlQueryString(\"debug\") = \"true\"; \"-debug\"; \"\");
thisWebDbName := @WebDbName;
unid := @If(@IsNewDoc;\"\";@Text(@DocumentUniqueID));
editMode := @If(@IsDocBeingEdited;\"true\";\"false\");
output := \"\";
output := output + @NewLine + @NewLine;
output := output + \"<!-- Ext JS library -->\" + @NewLine;
output := output + \"<script type='text/javascript' src='" + extUrl + "adapter/ext/ext-base.js'></script>\" + @NewLine;
output := output + \"<script type='text/javascript' src='" + extUrl + "ext-all\" + mode + \".js'></script>\" + @NewLine;
output := output + \"<!-- Ext.nd JS library -->\" + @NewLine;
output := output + \"<script type='text/javascript' src='" + extndUrl + "extnd-all\" + mode + \".js'></script>\" + @NewLine;
output := output + \"<script type='text/javascript' src='" + extndUrl + "Session.js?OpenAgent&db=\" + thisWebDbName + \"'></script>\" + @NewLine;
output := output + \"<script type='text/javascript' src='" + extndUrl + "UIDocument.js?OpenAgent&db=\" + thisWebDbName + \"&unid=\" + unid + \"&editmode=\" + editMode + \"'></script>\" + @NewLine;
output := output + \"<script type='text/javascript'>\" + @NewLine;
output := output + \" Ext.nd.init({extndUrl : '" + extndUrl + "', extUrl : '" + extUrl + "'});\" + @NewLine;
output := output + \"</script>\" + @NewLine;
output := output + \"<link rel='stylesheet' type='text/css' href='" + extUrl + "resources/css/ext-all.css' />\" + @NewLine;
output := output + " + theme + " + @NewLine;
output := output + \"<link rel='stylesheet' type='text/css' href='" + extndUrl + "resources/css/domino.css' />\" + @NewLine;
output := output + \"" + @Implode(customLibs ) + "\";
output;"


How are you making use of the code? Is it interacting with Ext.nd? Are you kicking it off in the onReady event from ExtJS? I am just curious how you would make your application aware of this JS without putting it into you Ext.nd code.

[JimStoner]

Well, the first library I'm using this with involves picklists. Ext.nd has the whole "backend" PickList functionality, but doesn't seem to have any built-in ways to handle the returned value. That needs to be custom written for each application, primarily by writing an appropriate callback function that gets used by the Ext.nd picklist code.

For example, I am working with several applications that will use picklists in a number of different ways. I decided to write a little library, currently about 50 lines of code, that will provide several custom callback functions that do different things. The "setField" callback function might be used to assign the returned value(s) to a field, while the "openURL" callback function adds the returned value as a parameter to the end of a URL and then opens that URL in the same or a new window, etc. I'm pretty happy with the way it works. I can now call a single custom PickList function, passing into it a custom literal object to control exactly how it works. The config object properties specify general things like database name, view name, window title, etc. (all of which get passed on to the Ext.nd picklist function), but it also can have properties that specify which callback function to use, which field the return value should be assigned to (for the setField callback function) or the base URL to append the return value to (for the openURL callback function), etc.

So given that example, my custom code would be invoked by having a button or link that calls the custom PickList function whenever the user needs to use a picklist. But you're right that it could certainly use the Ext.onReady functionality to kick it off, or whatever.

The problem I was facing was how to deploy my custom javascript libraries that provide extensions to Ext.nd to any of my applications that might use it, site-wide. I could just put a copy in each database and manually add it to the headers of each form/page/view after loading Ext.nd. Or, more efficiently, I could put the library in one database and have all the applications access it from there, but still need to manually load it on the form/page/view in each application. Or I could add it to the Ext.nd database and let it get auto-magically loaded for any applications that are configured to use it in the Ext.nd application profile.

Since Ext.nd comes with this nice application profile and an automated way of loading lots of javascript files, I thought it might be nice to use that system rather than reinventing the wheel. The changes I made let me simply specify the name of one or more additional JS libraries in the Ext.nd application profile, and then lets Ext.nd deliver those javascript libraries to browser at the same time as its own js files. It seems convenient enough that I thought I'd mention it here and see if anyone else agreed, or if anyone had any better suggestions.

Cheers,
Jim

[RWaters]

I don't think this is a bad approach. I have intentions to continue expanding upon the profile document to allow configuring the code that is generated, and had envisioned allowing people to insert custom or perhaps even tweak the generated code within the profile.