Integrating DOJO into an Existing STRUTS Application - dojo

I am trying to integrate DOJO to my existing struts application.
Listed below are the steps I followed.
1.Downloaded DOJO 1.4, copied dijit,dojo and dojox folders under my application folder jsp->js>DOJO
copy paste "dialog via mark up example" (http://www.dojotoolkit.org/reference-guide/dijit/Dialog.html#dijit-dialog)
When I run the application, I am getting javasript error dojo undefined.
What I am missing?
Also where is dojo.xd.js? I don't see it under dojo folder

You are probably missing a reference to the dojo script on your page.
http://www.dojotoolkit.org/reference-guide/quickstart/install.html#quickstart-install
You need to add a <script src="path to where you put dojo"></script> to your page.

Simple alternative is to use the DOJO from CDN - Content Distribution Network (Multiple repositories which has all dijit,dojo and dojox folders . So you don't have to copy anything). Use the following code if you want to use the latest DOJO.
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js"></script>
If you want a specific version, then
<script type="text/javascript" src="http://o.aolcdn.com/dojo/<version>/dojo/dojo.xd.js"></script>

Related

Default version of boot strap not recognized

So I created a web app using visual studio .net core 3.1. I see that boostrap came with it by default. So what I did was copy and paste the accordion example from bootstrap and was expecting it to work by default but it is not rendering. I double checked and see that jquery is referenced before boost strap. I checked the css and JS file and it is loaded, and there is no error in the console. Is there something else I need to do?
Update:
This is where I got the sample code, it is the very first example: Bootsrap example
You can open bootstrap.js in your project,you will find the version of bootstrap is v4.3.1,and you are referencing the official document of bootstrap v5.0,so you need to add the css and js of v5.0.
You can try to add the css and js of v5.0 to your _layout.cshtml.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Problem with Bootstrap and bundle in ASP.NET Core

I use Visual Studio 2017, I downloaded the Bootstrap package but I have no idea what should I do next. I am using bundle file and package...
What should I do?
Also I downloaded a file from get bootstrap website but I don't know how to compile it!
The first way is to copy the css and js file to wwwroot/lib folder in your project.
The second way is to use BootstrapCDN if you want to skip the download.
A better way of using bootstrap in asp.net core project is to use LibMan(To be able to use LibMan you should have VS 2017 version 15.8 or higher.):
1.In Solution Explorer, right-click the project folder in which the files should be added. Choose Add > Client-Side Library. The Add Client-Side Library dialog appears:
2.Select the jsdelivr provider from the Provider drop down.
3.Type the library name to fetch in the Library text box.
4.Specify the project folder for storing the files in the Target Location text box.
5.Cilck Install button.
Then you could use the following code to reference the boostrap:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
Note: As mentioned on the download site, this does not include jQuery, so if you want to use jQuery, you need to download that separately.

Bootswatch theme file loads twice

I have included a bootswatch theme in my website.
<!-- Bootstrap CSS served from a CDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" integrity="sha384-zF4BRsG/fLiTGfR9QL82DrilZxrwgY/+du4p/c7J72zZj+FLYq4zY00RylP9ZjiT" crossorigin="anonymous">
<!-- Scripts -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The problem is that bootstrap.min.css file loads twice. I can see it twice in resources when I open developer console on any browser. It is the same file because I can see that it is loaded by the same html line. Because of this, when I want to close a collapse or a menu, it just closes and opens again fast. I have no idea why it loads twice. How can I fix this?
I can think about two reason for your issue---
No.1
You have a plugin that uses bootstrap and it is loading the additional cdn.
No.2
You are adding some include file in your page which have the bootstrap cdn inside it. Hence your main page loads two bootstrap cdn.
Suggestion
Try removing bootstrap cdns from the bootswatch theme. As I am assuming that your website has already bootstrap cdn included in it.
I know it's a old thread, but I was searching for the same and also found the answer.
Remove integrity attribute from the url and it downloads only once.
This new attribute integrity attribute which I think is what makes the browser to call the cdn the first time to check that the file is not manipulated and then the second call happens to load the file.
Somehow it is flawed and should not download twice.

Using bootstrap 3 glypicons with webjars and jsf2.2

I'm trying to make a simple page with bootstrap and glypicons in jsf 2.2. I've included webjar's bootstrap dependency (and opening the jar I can see the fonts file are present).
When deploying the app to wildfly, bootstrap css works correctly, but icons shown are horrible (like a default font or something). Looking at the network tab in the browser, I only see 404 errors:
http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff 404
http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.ttf 404
I tried including the other dependency (bootstrap-glypicons) and I only get the 404 errors twice. What am I missing?
This is how I'm including boostrap, which works correctly for css:
<h:outputStylesheet library="webjars" name="bootstrap/3.1.1/css/bootstrap.min.css" />
And this is how I'm using the css classes:
<button><span class="glyphicon glyphicon-minus"></span></button>
You should use <link> tag instead of <h:outputStylesheet>
eg.
<link rel="stylesheet" type="text/css" media="all" href="webjars/bootstrap/3.1.1/css/bootstrap.min.css"/>
--- UPDATE
This happen because ResourceHandler in JSF add library value (webjars) to the end of URI as a parameter:
faces/javax.faces.resource/bootstrap/3.1.1/css/bootstrap.min.css?ln=webjars
in bootstrap.min.css CSS there are such references to files:
url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
so if you want to use <h:outputStylesheet> you can write own ResourceHander or you can edit bootstrap.min.css and fix paths to glyphicons-halflings-regular.* files
In my opinion is better to use standard html tag <link> instead of <h:outputStylesheet> because JSF component tree will be smaller and it act on performance. Inside bootstrap.min.css there is no EL so there is no need to use <h:outputStylesheet>
Small update: webjars has JSF specific versions of several CSS libraries, in case of the bootstrap CSS the following will work just fine:
<h:outputStylesheet library="webjars" name="bootstrap/3.3.5/css/bootstrap-jsf.css" />
Note the -jsf suffix.

How to play dojo with sprockets in rails edge?

Rails 3.1 edge use sprockets to handle .js and .scss files.
Sprockets use comments to deal with dependencies.
I put the three folders (dojo dijit dojox) in vendor/assets/javascripts.
Then add a line in app/assets/javascripts/application.js
//= require dojo/dojo
console.log(dojo);
Now dojo has been merged into application.js.
But dojo has dependency system itself. When I require more dojo modules. It cannot find the right path.
dojo.require("dojox.grid.DataGrid");
// Error in webkit console: Error: Could not load 'dojox.grid.DataGrid'; last tried '../dojox/grid/DataGrid.js'
// Error in rails server log: Started GET "/undefined../dojox/grid/DataGrid.js" for 127.0.0.1 at Sat Apr 16 01:26:05 +0800 2011
These are two different dependency systems. How can I put them together?
dojo.js doesn't take too naturally to being renamed. This is because part of Dojo's initialization process involves searching through the DOM for the script tag responsible for loading itself. It does this for two reasons:
Determine its baseUrl if not already specified
Pick up any djConfig (or data-dojo-config in 1.6+) properties specified in the script tag itself
When it searches for this script tag, it looks for one with src set to dojo.js or dojo.xd.js; it's not finding it in your case, thus the failures.
It should be possible to work around both of these issues, by specifying djConfig (or dojoConfig in 1.6+) fully programmatically in another script tag before the one that loads Dojo, and by specifying baseUrl manually in these config properties.
For example, if your application.js were in vendor/assets/javascripts as referred to in your original post, you could try doing this:
<script type="text/javascript">
//if you're using 1.5 or earlier, use djConfig instead of dojoConfig
var dojoConfig = {
//note that baseUrl points to the folder containing dojo.js, therefore the dojo folder
baseUrl: 'vendor/assets/javascripts/dojo/'
};
</script>
<script type="text/javascript" src="vendor/assets/javascripts/application.js"></script>
For more information on dojo config settings: http://dojotoolkit.org/reference-guide/djConfig.html (in fact, that page actually has a note under baseUrl specifically about renamed dojo.js.)
Try adding the dojo files into a dojo/scripts directory under /vendor/assets/javascripts. In the dojo directory, create a dojo.js file in the dojo directory and put //= provide "scripts" in that file.
Then in your application.js file put //= require <dojo>. Check out the Sprockets site http://getsprockets.org/ for info but that should work.
The docs aren't out for Rails 3.1 and the asset pipeline yet so a lot of this stuff is kind of trying to figure out on your own.
Umm... why are you placing your javascripts in vendor and app rather than public/javascripts? you have include anything in public/javascripts with =javascript_include_tag('path_to_javascript') where path_to_javascript would be "dojo/DataGrid" for public/javascripts/dojo/DataGrid.js
http://guides.rubyonrails.org/getting_started.html
I know it's maybe a bit late but I could help someone else.
I finally made it work and posted the explanations here.