Referencing External Javascript from Javascript Code window in SandCastle

713 views
Skip to first unread message

bp3...@gmail.com

unread,
Aug 9, 2013, 12:43:10 PM8/9/13
to cesiu...@googlegroups.com
Hello there,

I am rather new to Cesium and am trying to get my head around things.

I am trying to create a Javascript file in Eclipse, that will contain certain properties and functions. Id like to be able to create an instance of this Javascript object inside of the "Javascript code" window in Sandcastle running locally.

It is my understanding that the following are essentially the Import/Using statements for Javascript. This was pulled directly from the <head> of the HelloWorld.html example

<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript" src="../../../Build/CesiumUnminified/Cesium.js"></script>
<script type="text/javascript" src="../Sandcastle-warn.js"></script>

<script type="text/javascript" src="../../../Source/Test/test.js"></script>

I have created a Test folder and test.js script inside of the Source folder, and have put what I think is the correct statement here in HTML to include this.

test.js looks like this:


/*global define*/
define([ ], function()
{
"use strict";

var test = function test()
{
this.publicMember = "hello";
};
function MyTestFunction()
{
return this.publicMember;
}
});


My problem is that I cant reference this object properly through the "Javascript code" window in SandCastle. Can someone give me a simple example or point me in the right direction?

bp3...@gmail.com

unread,
Aug 9, 2013, 1:05:26 PM8/9/13
to cesiu...@googlegroups.com, bp3...@gmail.com
I realized that I made a mistake. I now have the test.js file inside of the SandCastle directory and have changed the import statement to

<script type="text/javascript" src="../test.js"></script>.

I am however still having the same issues.

Scott Hunter

unread,
Aug 9, 2013, 2:28:37 PM8/9/13
to cesiu...@googlegroups.com
The define function you're using is part of the AMD standard (http://requirejs.org/docs/why.html) for defining modules in JavaScript, but using Cesium with modules is a slightly more advanced use case.  Since you're new to JavaScript, I'd suggest avoiding that syntax for now, and sticking with simpler scripts that work in the global scope.

If you change your test.js file to remove the define wrapper, and simply contain:

var test = function test()
{
    this.publicMember = "hello";
};
function MyTestFunction()
{
    return this.publicMember;
}

This will declare your functions in the global scope, which will allow you to reference them from within the script block in the Sandcastle code editor.

While you're developing your code, make sure you keep an eye on your browser's JavaScript console for any errors or files that can't be loaded correctly.





--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.



bp3...@gmail.com

unread,
Aug 9, 2013, 5:10:37 PM8/9/13
to cesiu...@googlegroups.com
Hi Scott thanks for the reply.

I have tried modifying test.js to be as simple as possible. It now only includes the following function.

function MyTestFunction()
{

}

and HelloWorld.html looks like this.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="Use the Cesium Widget to start building new applications or easily embed Cesium into existing applications.">
<meta name="cesium-sandcastle-labels" content="Beginner">
<title>Cesium Demo</title>


<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript" src="../../../Build/CesiumUnminified/Cesium.js"></script>
<script type="text/javascript" src="../Sandcastle-warn.js"></script>

<script type="text/javascript" src="../test.js"></script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-plain.html" data-sandcastle-title="Cesium (standalone)">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<script id="cesium_sandcastle_script">
var widget = new Cesium.CesiumWidget('cesiumContainer');
</script>

</body>
</html>


test.js is inside of the SandCastle directory, one up from where HelloWorld.html is included in the SandCastle>Gallery directory.


All i have inside of the "JavaScript code" window in Cesium is

var widget = new Cesium.CesiumWidget('cesiumContainer');
MyTestFunction();


When running this I have been receiving the following errors.

Documentation not available. Please run the 'generateDocumentation' build script to generate Cesium documentation.
Uncaught ReferenceError: MyTestFunction is not defined (on line 3)

Not sure what I am doing wrong here.

Scott Hunter

unread,
Aug 12, 2013, 1:59:02 PM8/12/13
to cesiu...@googlegroups.com
OK, I tried it out and I see the problem.  For various reasons, Sandcastle assembles the code in the right-hand panel dynamically, pulling different pieces from multiple sources.  The scripts in the head are not read from the gallery file (e.g. Hello World.html), instead they are read from the file listed in the "data-sandcastle-bucket" attribute, which in this case is "bucket-plain.html".

If you add your script tag to load test.js to "bucket-plain.html", it should then be able to find your test function.



bp3...@gmail.com

unread,
Aug 13, 2013, 10:02:10 AM8/13/13
to cesiu...@googlegroups.com
Ahh I see!

Thanks so much for the help Scott! This solved my problem.

Reply all
Reply to author
Forward
0 new messages