Creating A Javascript Library.
Brian Marshall
I'm looking to create a javascript library that can be used in
combination with an Actionscript based project (similar to the
xmlhttprequest library). Ive looked through the various documentation
on how to create Actionscript libraries but did not see anything when
it comes to a Javascript library. Can someone point me in a direction
where I can find more information about this?
Frank
the ultimate source for this is "hidden" in the Jangaroo build process
documentation:
https://github.com/CoreMedia/jangaroo-tools/wiki/Maven-Build-Process
However, it is more a reference than a "how-to" documentation, so
better start with a good example.
"xmlhttprequest" is not the best example to start with, since its AS3
API is already contained in jangaroo-browser, not in the
"xmlhttprequest" module itself.
(The reason is that xmlhttprequest is actually a browser API, only the
implementation is so quirky in some browsers that you need this
JavaScript to make the browsers conform to the standard).
A better example is soundmanager2, it is here on github:
https://github.com/CoreMedia/jangaroo-libs/tree/master/soundmanager2
So you could clone "jangaroo-libs" and have a close look at the module
soundmanager2
Essentially, you need the obligatory Maven pom.xml, and two source
folders:
* src/main/joo-js holds the actualy JavaScript code of the framework,
preferably in a subfolder called like the framework, and in subfolder
"joo", a <framework>.module.js file that takes care of loading the
JavaScript file. Note that <framework> must be the same as the
<artifactId> in pom.xml!
* src/main/joo-api contains the "fake" ("native") ActionScript API of
classes, variables and functions defined in the JavaScript code. It is
never actually compiled into JavaScript code (as the JavaScript code
is already there!), but instead used as a reference when compiling
other code that uses the framework.
SoundManager2 is really ideal to understand this concept, as it only
consists of one global variable and three classes with a few methods.
The module is built by "mvn install". Then, you'd create a new
Jangaroo application module containing ActionScript code that uses the
JavaScript framework through its AS3 API. The pom.xml of this new
module needs to specify a Maven dependency on your framework module.
When building the application (again, "mvn install", but also "mvn
package" suffices), the Jangaroo compiler uses joo-api as reference
and copies the joo-js files into the resulting Web application.
Eventually, your compiled AS3 code as well as the JavaScript framework
code will be loaded automatically by jangaroo-application.js, which
(as for any Jangaroo application) has to be loaded by your HTML
wrapper (<script src="joo/jangaroo-application.js">).
Hope this helps for getting started, feel free to ask again if you get
stuck!
Greetings,
-Frank-
Brian Marshall
I am close to getting a demo working as my code compiles and builds,
however when I run my application it appears that my java script class
does not get constructed properly.
My application is very simple. It consists of two classes
The application class is named Main.as. The Main.as constructor
instantiates a new instance of the class Apples.
Apples is a Javascript class that has two properties(type and color).
It also has a function called getInfo() which has no parameters and
returns a string.
Once the main application instantiates Apple, the application calls
apple.getInfo(). This is the point at which my application breaks
down. The chrome console shows a Uncaught TypeError: Object
#<generatedConstructor$> has no method 'getInfo' error. When I
inspect the Apple object, the getInfo() function is missing.
Do you have any ideas on why we are not seeing the getInfo method on
the Apple class?
Brian
Brian Marshall
have had little success.
When I create a new instance of the Apple.as Class I receive a joo
$NativeClassDeclaration$318_12 object in return.
This object has a myTest method but is missing the native getInfo
function. Im not sure why my Apple.as class is not getting typed and
does not include a myTest method.
Here is my my apples.js Class.
(function () {
function Apples() {
};
Apples.prototype.getInfo= function() {
return 'test';
};
})()
and my Apples.as
package {
public class Apples
{
public native function getInfo():String;
public function myTest():void
{
}
}
}
my Main.as file
package com.acme.main {
import com.acme.HelloWorld;
public class Main {
public static function main(outputElementId:String):void {
var temp:Apples = new Apples();
trace(temp.getInfo());
Frank
the (only?) problem is that your Apples.js code does not export the
"Apples" class, i.e. it is not defined in global scope! Note that a
function name does not declare a global variable. Thus, it is
impossible for Jangaroo code (or in fact: any JavaScript code!) to use
it.
Using a function closure to avoid global namespace pollution is best
practice, but you need to export your public declarations, here the
constructor function, e.g. like so:
Apples = (function() {
...
var Apples = function Apples() {
...
};
...
return Apples;
})();
Also, for JavaScript code, too, I'd recommend using packages:
joo.getOrCreatePackage("com.acme.example").Apples = (function()
{ ... })();
Did you put Apples.as under src/main/joo-api?
Brian Marshall
I've implemented your suggestions and still nothing...
My Project Structure looks like this:
Applicaiton Projectmy-joo\my-joo-app\src\main\joo\com\acme\main
\Main.as
Java Script Librarymy-joo\my-joo-js-lib\src\main\joo-api\Apples.asmy-
joo\my-joo-js-lib\src\main\joo-src\com\examples\apples.jsmy-joo\my-joo-
js-lib\src\main\joo-src\com\examples\apples-noDebug.jsmy-joo\my-joo-js-
lib\src\main\joo-src\joo\apple.module.js
Ive been stepping through the source js code and It looks like the The
JooClassDelclaration.initMemebers(); Knows about my native functions
but isn't storing them correctly. I'm going to continue to debug to
see if I can find any more information.
Brian Marshall
I do not see the native apples java script class referenced in the
generated js code. If the native js class is stored in the project
target, where would I find it?
Brian
Frank
that I mentioned in my first reply.
File layout:
pom.xml
src\main\joo-api\soundManager.as
src\main\joo-api\com\schillmania\sm2\SMSound.as
src\main\joo-api\com\schillmania\sm2\SMSoundOptions.as
src\main\joo-api\com\schillmania\sm2\SoundManager.as
src\main\joo-js\joo\soundmanager2.module.js
src\main\joo-js\soundmanager2\script\soundmanager2-jsmin.js
src\main\joo-js\soundmanager2\script\soundmanager2-nodebug-jsmin.js
src\main\joo-js\soundmanager2\script\soundmanager2.js
From what you describe, it seems you are missing the
<artifactId>.module.js file, which references the "native" JavaScript
file via joo.loadScript("<relative-file-path-and-name>").
Brian Marshall
src.
Im still having an issue however and I see the same issue when I try
and load the soundmanager2 module. When I build the application my js
classes get moved to the root of the target directory instead of the
joo/classes directory.
When I run this application
package com.acme.main {
import com.schillmania.sm2.SoundManager;
public class Main {
public static function main(outputElementId:String):void {
var temp:SoundManager = new SoundManager();
}
}
I get this error.
Jangaroo Runtime: Class com.schillmania.sm2.SoundManager not found at
URL [file:///C:/my-joo/my-joo-app/target/my-joo-app-0.1-SNAPSHOT/joo/
classes/com/schillmania/sm2/SoundManager.js].
Should the SoundManager.js file be located in "/joo/classes/com/
schillmania/sm2/"?
Nathan Weber
SoundManager into a simple template project and added the dependency
in the project's pom file. It compiled/packaged fine, but when I run
the html file I see the error Brian listed above. I don't see the
file it's trying to reference (SoundManager.js) in the target
directory of the project.
Nathan
Andreas
compiled from ActionScript in
target/my-joo-app-0.1-SNAPSHOT/joo/classes/com/schillmania/sm2/
SoundManager.js
indicates that the native implementation class written in pure
JavaScript has not been loaded properly.
I also tried to run a little application importing the soundmanager
module. Looking into target/my-joo-app-0.1-SNAPSHOT/joo, it turned
out that the soundmanager2.module.js file has not been copied
correctly into the jangaroo-application.js file. The corresponding
line in jangaroo-application.js reads:
// FROM net.jangaroo:com.schillmania.soundmanager2:0.9.6:
// FROM ...
where it should read:
// FROM net.jangaroo:com.schillmania.soundmanager2:0.9.6:
joo.loadScript("soundmanager2/script/soundmanager2-nodebug-jsmin.js",
"soundmanager2/script/soundmanager2.js");
//FROM: ....
Guess we need to investigate if that's a Jangaroo Maven plugin bug.
A quick fix is to load the soundmanager2.module.js yourself, after
the jangaroo-application.js, in your HTML file:
<script type="text/javascript" src="joo/jangaroo-application.js"></
script>
<script type="text/javascript" src="joo/soundmanager2.module.js"></
script>
Let me know if that works for you.
Andreas
jangaroo-libs soundmanager2 module was named incorrectly: it has to be
the complete artifactId from the module pom.xml, which is
com.schillmania.soundmanager2.module.js, not just
soundmanager2.module.js. That's why Jangaroo maven plugin did not
include it in the jangaroo-application.js file.
So make sure your module.js file is named correctly. Check whether the
code form it is included in jangaroo-application.js.
I just fixed the soundmanager2 module on github. If you want to try it
without waiting for the next release: clone jangaroo-libs, run 'mvn
install' to install the new jangaroo-libs snapshot version in your
local maven repository, and change the module dependency in your
application to
<dependency>
<groupId>net.jangaroo</groupId>
<artifactId>com.schillmania.soundmanager2</artifactId>
<version>0.9.7-SNAPSHOT</version>
<type>jangaroo</type>
</dependency>
Frank
the *.module.js file. Since I only use the soundmanager library for my
pet project "Jangaron" and didn't update after renaming, the error got
unnoticed.
Brian Marshall
It turns out my problem was in my pom file, my sourceDirectory was one
to many directories deep. Because of this My Apples.as file was not
converted into the Apples.js file.
Thank you Frank and Andreas for your help!