I've read that H5BP Ant Build Script "Updates your HTML to reference [the compiled] hyper-optimized CSS + JS files". Does that include references in the HTML to event handlers whose names have been changed by the minification process?
It appears that I can accomplish this by exporting the names from the script (as described at https://developers.google.com/closure/compiler/docs/api-tutorial3#export) while using the ADVANCED_OPTIMIZATIONS flag.
The Ant Build Script knows nothing about your inline event handlers. It's built with an eye towards the common method of using a library like jQuery to handle your event binding unobtrusively so even if closure compiler offers some export, you would have to adjust the build script yourself to have some task that rewrites the inline event handlers.
Related
I need to design how to implement JavaScript module pattern in existing large .NET Web Forms application. Currently there are no rules and lot of JavaScript code uses global variables. The problem is also with communication between server and JavaScript client code, currently lot of JavaScript functions are called from code-behind classes and are inlined into page.
Current JavaScript usage example
A server control adds link to some JavaScript file to the <head> element so it will be downloaded. The file contains one or more global functions. Then the server control call's this global functions whenever it needs them, like following:
string script = string.Format("GlobalFunction1('{0}');", param);
And this string is inserted somewhere inside the <body> element in the HTML. There are no rules and the server can call any of the global function whenever it needs them.
The main goals for improvements are:
Separate server-side code from client-side JavaScript. This means no chaotic inline calls for JavaScript global functions.
JavaScript self functioning modules, which are not dependent on each other.
JS modules should not expose anything to global scope.
Every JS module has only one place to initialize itself.
Server-side should be able to populate some parameters to JS module initialization.
Here is the approach that I came with:
How would it look like on Server-Side
Every Control has its own JavaScript module
Every Control is wrapped inside its root <div> element.
Server can call this helper method in every page life-cycle: ScriptModule.AddParam("param_name", "param_value"); This params will be added to the Control's wrapper (div) on pre_render event call as HTML5's data- attributes.
Finally Server registers the module with ScriptModule.Register("module_name", "path_to_js_file", "controlWrapperId").
This results in these steps in HTML:
The <script> file (path_to_js_file) is inserted into the page which links to desired module's file.
The parameters are added into Control's wrapper (div) through data- attributes.
At the end of the page the inlined Core.start("module_name", "controlWrapperId"); is inserted, which starts the module's initialization. This method is discussed later in client-side section.
How would it look like on Client-Side
The first file that is downloaded is the Core.js file, which registers one global variable Core that is used to define new modules.
Every JavaScript file will be defined as module. This module should not expose anything to the global scope and should be self functioning. The template follows:
// 1. first param is module's name
// 2. than the array with dependencies to helpers modules
// 3. than the callback with following parameters
// a. jQuery object which references wrapper (i.e. div) of this module
// b. params hash-object, which contains server parameters from wrapper's -data attributes in format
// { 'param1_name': 'param_val',
// 'param2_name': 'param2_val' }
// c. then the external dependencies to helper modules
Core.htmlModule('mod name', ['external', 'deps'], function ($w, params, external, deps) {
// Here the module initializes itself
// it can communicate with other modules through Core.publish(); Core.subscribe();
// it does not return anything, because it is HTML module and so it does not expose anything
});
The second parameter defines so-called helper modules, which are for code reusing. Due to the normal module's independence and inability to expose some functions outside, there is needed something to share same code. This can be achieved by defining helper module, which can expose some of its properties and then be referenced from normal module.
I have yepnope to dynamically load css and js files. My yepnode calls on a specific event (button-click for eg:).
When I call for the very first time (js, css) - it loads file - I can see css properly done.
However, when the event is triggered second time which calls yepnope again - it just fails to download css again (or does not even use the older one).
Js works fine second time too when called. But css does not work.
However when I call injectcss in the callback of the js call, it injects again forcefully but it defeats the entire purpose of the speed.
Thanks.
I am developing an AIR app. In the main app I have a module loader 'mainModuleLoader'. I am creating modules as separate mxml files using the <mx:Module> tag. And I am loading such a module in mainModuleLoader dynamically using actionscript. Everything works fine.
For the module which I am creating as mxml files, I would like to know how to add an unload event handler. So that, whenever I call mainModuleLoader.unload(), the unload event hander is triggered from inside the module.mxml. I have tried the following without any success.
<mx:Module creatingComplete="init()" unload="unloadHandler()"/>
<mx:Module creatingComplete="init()" remove="unloadHandler()"/>
The problem with the second statement above is that it triggers the unloadHandler even if some child is removed inside the module. I have also tried to add the following in the action script.
private function init()
{
this.addEventListener(ModuleEvent.UNLOAD, unloadHandler);
}
But, it doesn't trigger on unloading the module. Kindly let me know if I am going wrong somewhere or if there is any other method to attach the event handlers.
Thanks!!
You are part-way there with the remove; just check that event.target is the module before doing your work. It'll ignore the other ones then.
I think you have to handle the unload event of your mainModuleLoader:
<mx:ModuleLoader id="mainModuleLoader" unload="unloadHandler()"/>
In Flash Professional CS4, I get "migration issue" warnings when I use mouse/keyboard input handler names such as onMouseDown, onKeyUp, etc., even though I have added event listeners for them. These names are perfectly legal for functions, but since these were automatically fired in ActionScript 2.0, we are now (albeit sensibly) warned that their use is no longer automatic in AS3.
I understand the purpose of the warnings, but they aren't useful for me. I want to suppress these warnings, but without suppressing any other warnings, which I generally do find useful.
E.g., when I use code like this:
/** #constructor */
public function MyClass() {
addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
}
protected function onMouseDown(e:MouseEvent):void {
I get an annoying warning like this:
Warning: 1090: Migration issue: The onMouseDown event handler is not triggered automatically by Flash Player at run time in ActionScript 3.0. You must first register this handler for the event using addEventListener ( 'mouseDown', callback_handler).
There are flex compiler (mxmlc) flags (and a Flash Pro setting) which can suppress actionscript warnings, or all warnings, but I don't want that. That's too general.
Ideally I could suppress a specific error/warning number (Warning #1090).
Edit: I've found more "advanced" compiler flags with mxmlc -help advanced, which look promising. Specifically, the following seem like likely candidates:
warn-deprecated-event-handler-error
warn-deprecated-function-error
warn-deprecated-property-error
How do I get Flash to use these?
Edit 2: I found a flex-info.xml style document in the Flash User Data dir.
[userdatafolder]/Adobe/Flash CS4/en/Configuration/ActionScript 3.0/FlexInfo.xml
However, this file contains a disappointing comment: <!-- Flash does not support most flex-config options. -->, and doesn't seem to respond to my directives even after restarting flash.
This is getting sad.
Edit 3: Found an issue "Erroneous, annoying "Migration issue" warnings" on Adobe bug tracker. A fix is confirmed for the Flex SDK, but no mention of Flash...
You can if you edit EnabledWarnings.xml in $Flash/$LOCALE/Configuration/Actionscript 3.0/EnabledWarnings.xml, where $Flash is the path to Flash inside your Applications/Program Files folder and $LOCALE is your language.
e.g.
/Applications/Adobe Flash CS4/en/Configuration/ActionScript 3.0/EnabledWarnings.xml
You will need to edit line 29, setting the enabled attribute to false for warning with id 1090:
<warning id="1090" enabled="false" label="kWarning_DepricatedEventHandlerError">EventHandler was not added as a listener.</warning>
Quick sidenote:
"Flash Builder (CS4)" is a confusing term. After Flex Builder 3, Flex Builder got renamed to Flash Builder, there is no Flash Builder CS4. The regular Flash IDE is known as Flash Professional/Flash Professional CS4, this was to avoid confusion between products with similar names: Flash Catalyst, Flash Builder(was Flex Builder), Flash Professional. Obviously it doesn't always work that great :)
What about changing the name of the function being called from onMouseDown to handlerOnMouseDown. Would it solve the issue?
Are you using Flex Builder?
If so, go to Project -> Properties -> Flex Compiler. There you can add arguments to the compiler.
Why are you overriding that? It never existed in the first place. The error message is actually telling you something useful. Don't suppress it.
If you want to create an event handler called onMouseDown, try something like
private function onMouseDown(e:MouseEvent) : void {
// statements
}
I agree with the previous post; the message is trying to tell you that you need to register that event handler. Just adding a method called onMouseDown() won't do it. What you need to do is to add something like
addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
in either your constructor or maybe in the parent component.
You can filter out these warnings using Flash Builder's problems filtering capability:
open problems view
on the right click on the small triangle that opens a drop-down menu
select Configure Contents...
on the left side, create a new configuration, name it as you wish
on the right side adjust its settings:
Scope: On any element in the same project (or anything you want)
Description: choose doesn't contain and type in Migration issue (this will filter out warnings with migration issue in the description)
choose at least Flex problems
You can combine predefined and custom configurations by selecting more then one on the left side.
I am working on a small AIR desktop application and I have some configuration infos that I want to store in a little file that's loaded at some point when the application starts and will be used to set public properties on the root application object. This should work just as if I had public variables declared in an <mx:Script> block at the beginning of my main MXML file.
I seem to have the choice of three events that could be used to initiate loading the configuration file:
invoke
initialize
creationComplete
Did I overlook some more? Which one is appropriate and why? Does it matter at all?
Example issues that come to my mind are:
are all components already accessible or will I get NULL references?
will some of my settings be overwritten in a phase that's coming after the event?
There's probably more.
If your handler needs to access UI components directly, you should wait for creationComplete; otherwise you'll get NULL references.
If you simply want to set properties on the root Application object, initialize seems the best place to do this. If you wait until creationComplete, and if the properties that you set are bound to your controls, then you might get a run-time resize or flicker as those components are updated.