Using Dojo with Tapestry 5.4 - dojo

I am planning to use Dojo toolkit with Tapestry 5.4. I started off with the tapestry quickstart project and tried to include dojo. However, I have been facing a lot of issues w.r.t the new require mechanisms.
- Unknown Type error - require is not a function
- Unable to load the dojo module
webapp Directory structure
webapp
+------- mybootstrap
+----------- js (part of tapestry quick start project)
+------- js (js folder I added for Dojo)
+----------- dojo (All dojo files here)
Using it with Tapestry 5.3 was pretty simple - including the dojo.js file in the layout component. The same thing does not work in 5.4
I have tried using requirejs data-main attribute, but still stuck with it.
Any help will be appreciated.

Put all your dojo files in webapp\js folder.
your folder structure should be like
// Folder structure
-webapp
-js
-dojo
-digit
-dojox
Note: Make sure you provide the access to js/* path. So that url : http://localhost:8080/app/js/dojo/dojo.js accessible.
Put a script tag inside your tapestry page (*.tml) and add dojo modules using requireJS using below script,
<script type="text/javascript">
setTimeout(
function() {
var dojoConfig = {
async : true
};
require.config({
packages :
[ {
name : 'dojo',
location : '../js/dojo'
} ],
});
require(
[ 'dojo', 'dojo/dom' ],
function(dojo, dom) {
console.log(dojo);
dom.byId("myDiv").innerHTML = "updatedHTML content";
});
}, 1000);
</script>
thats it.

Related

JSPM / Aurelia / Bootstrap 4 can't find jQuery

So I have an aurelia setup using jspm. I have install Bootstrap 4 like so:
jspm install npm:bootstrap#4.0.0-alpha.2
Then in main.js I did:
import 'jquery';
import 'bootstrap';
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
//Uncomment the line below to enable animation.
//aurelia.use.plugin('aurelia-animator-css');
//if the css animator is enabled, add swap-order="after" to all router-view elements
//Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
//aurelia.use.plugin('aurelia-html-import-template-loader')
aurelia.start().then(() => aurelia.setRoot());
}
I even tried import $ from 'jquery' but when I spin up the aurelia skeleton with BS4 I get:
Uncaught Error: Bootstrap's JavaScript requires jQuery
I can go to the console and do $ and it returns the jquery stuff. I think it is a race condition but not sure how to fix?
EDIT: System.config
System.config({
defaultJSExtensions: true,
transpiler: "none",
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
meta: {
"bootstrap": {
"deps": [
"jquery"
]
}
},
map: {
Use jspm install bootstrap=github:twbs/bootstrap#4.0.0-alpha.2
There are problems installing bootstrap with jspm from npm: (see here).
See this file for how to import it (from this project).
Update: here is the Pull Request that should fix this.
I ran into this issue recently as well. Try installing jquery 2, instead of jquery 3. Apparently jquery 3 doesn't hang itself off window when it's imported as a module the same as it does in jquery 2. Bootstrap 4 doesn't apparently doesn't request it as a dependency either.
One possible solution is to load jQuery from a CDN in the HEAD section of your index.html:
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
Taken from https://code.jquery.com. Use a different version of jQuery if you need. This is actually a better deployment strategy IMHO anyway because you will get more concurrent downloads (better parallelism) in the browser by loading libraries from CDNs.

Load customized Dojo module

I am really new to Dojo so this may sound dumb.
I am using Dojo 1.7 as a hosted resource (that is, I downloaded the dojo package and put it under the source code). Then I have a customized module defined in another folder. The structure looks like this:
/
libs/
js/
dojo/
dojo.js
myPage/
myModules/
myCustomizedModule.js
index.html
I am using the "define" function to define a module in myPage/myModules/myCustomizedModule.js
In "myPage" folder, I am using index.html to require the customized module:
<script>
require(["myPage/myModules/myCustomizedModule"], function(myCustomizedModule){
// Do something.
})
</script>
However, I can't get it to work: the console reported an error:
"http://localhost/myDojoTest/libs/js/dojo/myPage/MyModules/myCustomizedModule.js 404 (Not found)".
I know this directory is not right since "myPage" folder is not under "libs/js/dojo". But it seems when using the "require" statement, instead of using the relative path of the current HTML document, the code uses the current path for the dojo.js file.
Is there anything I can do to correctly refer to my customized module?
Many thanks!
As per your requirement, you need to set up packages as indicated below
<!-- dojo configuration options -->
<!-- For Package configuration refer tutorial at http://dojotoolkit.org/documentation/tutorials/1.7/modules/ -->
<script type="text/javascript">
var dojoConfig = {
async: true,
baseUrl: "/",
tlmSiblingOfDojo: false,
packages: [
{ name: "dojo", location: "libs/js/dojo" },
{ name: "dijit", location: "libs/js/dijit" },
{ name: "dojox", location: "libs/js/dojox" },
{ name: "myModules", location: "myPage/myModules" }
]
};
</script>
You can than access dojo, dijit and myModules in require function call as.
Remember you need to precede the modules with their respective packages.
<script>
require([
//Require resources.
"dojo/store/Memory",
"myModules/myCustomizedModule"
], function(Memory, myCustomizedModule){
....
}
);
</script>
Hope it helps.

Dojo requesting already inlined Dijit templates --Google Closure build

I already asked this question on StackOverflow, the solution was supposed to have been patched in commits :
89bf2786e322323293f52917223aa24db7649951
and
783da4030bf9e727bfb4fc874b59f77521545264
But even after doing some extensive testing with this setup :
Dojo / DojoX / Dijit 1.8.3
Util in it's latest version (master branch on GitHub)
I keep getting the same issue.
The issue is the following :
After building my application with the util build.sh script.
My profile is :
var profile = {
basePath: '../src/',
action: 'release',
cssOptimize: 'comments',
mini: true,
internStrings: true,
optimize: 'closure',
layerOptimize: 'closure',
stripConsole: 'none',
selectorEngine: 'acme',
layers: {
'dojo/dojo': {
include: [ 'dojo/dojo', 'dojo/i18n', 'dojo/domReady', 'app/main', 'app/run', 'app/widgets/Application'],
boot: true,
customBase: true
},
},
staticHasFeatures: {
'dojo-trace-api': 0,
'dojo-log-api': 0,
'dojo-publish-privates': 0,
'dojo-sync-loader': 0,
'dojo-xhr-factory': 0,
'dojo-test-sniff': 0
}
};
and running :
java -Xms256m -Xmx256m -cp ../shrinksafe/js.jar:../closureCompiler/compiler.jar:../shrinksafe/shrinksafe.jar org.mozilla.javascript.tools.shell.Main ../../dojo/dojo.js baseUrl=../../dojo load=build --require "$myConfig" --profile "$myProfile" --releaseDir "$myReleaseDir" $#
1) My Dijit templates are inlined in the output file like they should, but when running the app, Dojo is still making Ajax requests for the already inlined templated !
2*) The nls directory is placed in the wrong directory (dojo directory in place of the root directory) and has to be moved. (I'm not sure if this is related to the bug I encounter.)
Inline format is :
"url:path/to/my/template.html":'<p>Some escaped HTML</p>'
Template require format :
dojo/text!./path/to/my/template.html
Thanks in advance !
I also had similar problem. In my application i used multiple dijit widgets and to avoid many AJAX calls I created a layer.
layers:{
'dijit/mydijit':{
include:["dijit/_base","many dijit widgets"]
}
After including dijit/mydijit.js in my application the browser kept on making AJAX call for dijit/_base
To solve this problem i added dijit/_base as dependency of dijit/mydijit layer
layers:{
'dijit/mydijit':{
include:["dijit/_base","many dijit widgets"],
dependecies:["dijit/_base"]
}
After this there are no requests for dijit/_base.
Hope this helps you :)

dojo looking for build.js in wrong path

I am trying to run my dojo project on a local Tomcat (7.0) server using Eclipse Juno 64bit as a dev environment.
I ran into a problem yesterday concerning how dojo assumes where files are stored within the source tree.
Below is a firebug log showing the issue:
304 Not Modified 23ms dojo.js (Line 295)
GET http://localhost:8080/src/dojo-18/dojo/parser.js
304 Not Modified 46ms dojo.js (Line 295)
GET http://localhost:8080/src/dojo-18/dojo/util.js
404 Not Found 24ms dojo.js (Line 295)
"NetworkError: 404 Not Found - http://localhost:8080/src/dojo-18/dojo/util.js"
The first 2 paths (and a lot before them) are loaded correctly, now the third path is incorrect, there is no util.js in the base dojo folder, I dont know why dojo would look there.
In order to solve the issue I tried describing the path better using the baseUrl property
<script>
dojoConfig = {
isDebug: true,
parseOnLoad: false,
baseUrl: './src/dojo-18/',
};
</script>
the dojo.js is referenced like this:
<script src="./src/dojo-18/dojo/dojo.js"></script>
Dojo does not look for util.js by itself, if it's doing that, you have imported a module called util by yourself, for example:
require([ "dojo/util" ], function(util) {
// This will not work because the util module does not exist
});
If you want to reference a self defined module, you have to configure the package first using dojoConfig:
<script>
dojoConfig = {
isDebug: true,
parseOnLoad: false,
baseUrl: './src/dojo-18/',
packages: [{
name: 'custom',
location: '/path/to/custom'
}]
};
</script>
Then you can reference a module in that package by using:
require([ "custom/util" ], function(util) {
// This will load the custom util module
});
In this case, the Dojo AMD loader will look for util.js inside the /path/to/custom folder, so it would become:
/path/to/custom/util.js

jQuery as AMD module and optimizing with r.js

Allright, he is the thing. I am using curl.js for my AMD loader, but i don't like much of "cram" because it needs to be run on unix and i am developing on Windows. So the r.js adapter for nodeJS from RequireJS library comes in mind, because node has already binary for Windows.
Now jQuery in current version (1.6.4) is not valid AMD module (coming in version 1.7) and there is dependencies in jQueryUI components, so i had to fake like this:
curl( [js!Core/jquery.js] )
.then( function() {
define('jquery', function() { return jQuery; });
})
My application is happy with this. However using r.js (version 0.26.0) fails on this part with following error:
Tracing dependencies for: boot
function (){return jQuery}
node.js:207
throw e; // process.nextTick error, or 'error' event on first tick
^
ReferenceError: jQuery is not defined
at eval at <anonymous> (r.js:7468:30)
at main (r.js:770:33)
at callDefMain (r.js:840:18)
This is my app.build.js
({
appDir: '../',
baseUrl: 'Scripts/',
paths: {
'link': '../../../Lib/#Javascript Libs/curl.js/src/curl/plugin/link.js'
},
dir: 'built',
optimize: 'none',
modules: [
{ name: 'boot' }
]
})
And here is complete boot.js for reference (coffeescript):
require([
'link!styles/main.css'
'js!Core/jquery.js!order'
'js!Core/underscore.js!order'
'js!Core/backbone.js!order'
]).then ->
define 'jquery', -> jQuery
.next(['Router/MainRouter'])
.then (MainRouter) ->
new MainRouter()
Backbone.history.navigate('home') unless Backbone.history.start(
pushState: false
)
Thank you in advance for any hint where the catch can be...
Correct. RequireJS uses a different syntax on its global requirejs() (aka require()) function. RequireJs also doesn't have the "js!" plugin built-in. You may have to include a path to it in your config. You could also use RequireJS's syntax for non-module javascript files.
Also: cram 0.2 will support Windows environments using Rhino. We're writing tests for cram 0.2 and will be releasing it shortly.
RequireJS syntax (remove js! prefix and include .js extension):
require([
'link!styles/main.css'
'order!Core/jquery.js'
'order!Core/underscore.js'
'order!Core/backbone.js'
], function (maincss, jQuery, underscore, backbone) {
// do something here
});