I'm a new developer and im trying the framework Dojo-Toolkit and especially d-grid .
So i follow the tutorial (http://dgrid.io/tutorials/1.0/hello_dgrid/) here is my index :
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello dgrid!</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" href="djgrid.css">
<link rel="stylesheet" href="claro.css">
</head>
<body class="claro">
<div id="grid"></div>
<!-- load Dojo -->
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="dojoconfig.js"></script>
<script>
require([ 'dgrid/Grid', 'dojo/domReady!' ], function (Grid) {
var data = [
{ first: 'Bob', last: 'Barker', age: 89 },
{ first: 'Vanna', last: 'White', age: 55 },
{ first: 'Pat', last: 'Sajak', age: 65 }
];
var grid = new Grid({
columns: {
first: 'First Name',
last: 'Last Name',
age: 'Age'
}
}, 'grid');
grid.renderArray(data);
});
</script>
</body>
</html>
So when i run on "localhost/DOJO/index.html" i get this error :
http://localhost/DOJO/dgrid/Grid.js Failed to load resource: the server responded with a status of 404 (Not Found)
I dont understand why it search on this location ... and also i get 2 :
Error: scriptError(…)
If someone can tell me how that work that ll be lovely :)
Even if the problem seems solved, this answer will clarify Ken's comments and help other people who try to integrate DGrid to Dojo.
Your code require a dgrid/Grid module the same way it require the dojo\domReady
require([ 'dgrid/Grid','dojo/domReady!'], ...);
so your dgrid folder have to be at the same level as your dojo folder.
DOJO
app
dgrid
dijit
dojo
dojox
In your dojoConfig.js, you should have a line like :
packages: ['dojo', 'dijit', 'dojox', 'app', 'dgrid'],
Related
I'm trying to get the MiradorImageTools plugin to work with mirador image viewer.
I'm using a very basic html page to test:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mirador-Test</title>
</head>
<body>
<h1>Title</h1>
<div>
<p>blah</p>
<div id="my-mirador" />
<script src="https://unpkg.com/mirador#latest/dist/mirador.min.js"></script>
<script src="https://unpkg.com/mirador-image-tools#0.10.0/umd/mirador-image-tools.min.js"></script>
<script type="text/javascript">
const config = {
"id": "my-mirador",
"manifests": {
"https://iiif.lib.harvard.edu/manifests/drs:48309543": {
"provider": "Harvard University"
}
},
"windows": [
{
"imageToolsEnabled": "true",
"manifestId": "https://iiif.lib.harvard.edu/manifests/drs:48309543",
}
]
};
// var mirador = Mirador.viewer(config);
var mirador = Mirador.viewer(config, [MiradorImageTools]); // <-- Error!
</script>
</div>
</body>
</html>
This gives me the following error:
Uncaught ReferenceError: MiradorImageTools is not defined
<anonymous> ./test3.html:36
test3.html:36:45
If I leave the plugin out, replacing the problematic line with the commented-out line above it, the whole thing works and I get mirador showing as it should.
So clearly I'm referencing the plugin wrong. But what would be the right way to do it?
To use MiradorImageTools, and any other Mirador plugin (as of v3.0.0), you will need to import the packages and create a build of the project using a tool like Webpack or parcel.
An example of this type of setup can be seen here: https://github.com/projectmirador/mirador-integration that includes examples using both Webpack and parcel.
./src/index.js
import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools';
const config = {
id: 'demo',
windows: [{
imageToolsEnabled: true,
imageToolsOpen: true,
manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
}],
theme: {
palette: {
primary: {
main: '#1967d2',
},
},
},
};
Mirador.viewer(config, [
...miradorImageToolsPlugin,
]);
See the README there for more information about how to build for the specific tools.
I am trying to access a simple javascript variable / object I defined in an external file. My question is how to load it by dojo. Here is my plunker code that didn't work:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
require({
packages: [
{
name: 'myApp',
location: window.location.href.replace(/\/$/, "")
}]},
["dojo/dom", "myApp/config", "dojo/domReady!"], function(dom, config) {
console.log(config.keys);
});
</script>
</body>
</html>
config.js
var keys = {
"key_1": {
"your_name": "jimmy",
"your_msg": "hello world"
},
"key_2": {
"your_name": "billy",
"your_msg": "foo equals bar"
}
};
As you can see I tried to load the config.js file as config, and tried to access it as config in my code. I am getting undefined in the console.
I did some research and what I need to use looks like the dojo's define function so that config.js looks like this:
define({
keys : {
"key_1": {
"your_name": "jimmy",
"your_msg": "hello world"
},
"key_2": {
"your_name": "billy",
"your_msg": "foo equals bar"
}
}
})
You should define a module for your configuration file.
This can be achieved using the define passing as argument your object.
Basic example:
define({ yourProperty: yourValue});
More information can be found here: https://dojotoolkit.org/documentation/tutorials/1.10/modules/
So I want to use requirejs, kendo ui and knockout JS together.
I read Using Kendo with RequireJS and the Knockout JS article Asynchronous Module Definition (AMD) With RequireJs and then I found the Knockout-Kendo library via Knockout.js and Kendo UI - a Potent Duo and I thought to myself - this is awesome - I'm about to be in a beautiful world of rainbows, MVVM, AMD and HTML5 lusciousness.
But now it seems more like I'm in a dark underground world of pain and suffering. Here's the deal...
I have a simple web site that has a js folder that has the following inside:
jquery-2.0.3.min.js
knockout-2.3.0.js
knockout-kendo.min.js
require.js
kendo-ui/** all the kendo files under here
and an index.html file that I have put in the root containing this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js"></script>
</head>
<body>
<div id="grid" data-bind="kendoGrid: items"> </div>
<script type="text/javascript">
require.config({
baseUrl : 'js',
paths: {
'jquery': 'jquery-2.0.3.min',
'knockout': 'knockout-2.3.0',
'kendo': 'kendo-ui',
'knockout-kendo': 'knockout-kendo.min',
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
define('mainViewModel', ['knockout'], function (ko) {
return function mainViewModel(){
this.items = ko.observableArray([
{ id: "1", name: "apple"},
{ id: "2", name: "orange"},
{ id: "3", name: "banana"}
]);
};
});
require(['jquery','knockout','mainViewModel','knockout-kendo'],
function($, ko, mainViewModel) {
ko.applyBindings(new mainViewModel());
});
</script>
</body>
</html>
As far as I can fathom, that should be basically correct but I am getting this exception:
GET http://localhost/ko-kendo/js/kendo-ui.js [HTTP/1.1404 Not Found 1ms]
Error: Script error for: kendo
http://requirejs.org/docs/errors.html#scripterror #http://localhost/ko-kendo/js/require.js:163
Seems that knockout-kendo is trying to load up kendo-ui.js but it, unsurprisingly since it doesn't exist, can't find it.
In an attempt to verify the mappings I knocked up this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js"></script>
</head>
<body>
<div id="grid" data-bind="kendoGrid: items"> </div>
<script type="text/javascript">
require.config({
baseUrl : 'js',
paths: {
'jquery': 'jquery-2.0.3.min',
'knockout': 'knockout-2.3.0',
'kendo': 'kendo-ui',
'knockout-kendo': 'knockout-kendo.min',
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
define('mainViewModel', ['knockout'], function (ko) {
return function mainViewModel(){
this.items = ko.observableArray([
{ id: "1", name: "apple"},
{ id: "2", name: "orange"},
{ id: "3", name: "banana"}
]);
};
});
require(['jquery','knockout','mainViewModel','kendo/kendo.grid.min'],
function($, ko, mainViewModel) {
var vm = new mainViewModel();
$(document).ready(function () {
$('#grid').kendoGrid({
dataSource: new mainViewModel().items()
});
});
ko.applyBindings(vm);
});
</script>
</body>
</html>
That worked fabulously (well, it worked) - you can see that the difference between the two is that in the second case I am not using knockout-kendo and therefore, the binding does not apply, which is why I do that kendoGrid thing in the document ready function.
So, does anyone know how on this green and beautiful earth I can get knockout-kendo working with require JS? I feel like there might be something fancy with a shim that would get it going but I can't work it out...
Knockout-Kendo is set to depend on a kendo module. The easiest thing to do is point kendo at the kendo.web file like: kendo: kendo.web.min (in whatever directory kendo.web.min.js is in).
I am unable to configure a dojo data grid to remote server. The tutorial example I am following is:
http://dojotoolkit.org/documentation/tutorials/1.6/populating_datagrid/demo/datagrid-items.html
My code is written in a single jsp and is shown here:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: dojox.grid.DataGrid Simple Structure</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">
<!-- load dojo and provide config via data attribute -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"
data-dojo-config="isDebug: true,parseOnLoad: true">
</script>
<script>
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
var grid, store;
dojo.ready(function(){
store = new dojo.data.ItemFileWriteStore({
url: "MilestoneAjaxPopulateMsListEditor.json"
});
grid = new dojox.grid.DataGrid({
query: { id: "*" },
store: store,
structure: [
{ name: "First Name", field: "first", width: "25%" },
{ name: "Last Name", field: "last", width: "25%" }
]
},dojo.byId("grid"));
grid.startup();
});
</script>
</head>
<body class="claro">
<%# include file="ui_init.jsp" %>
<h1>Demo: dojox.grid.DataGrid Simple Structure</h1>
<br/>
<div id="grid"></div>
<%# include file="footer.jsp" %>
</body>
</html>
The Ajax request completes without any error (getting 200 OK response code). I am getting the following JSON from the remote server and is shown in firebug:
{"msdetails":[
{"first":"146", "last":"Concept Commit"}
, {"first":"147", "last":"Execution Commit"}
, {"first":"148", "last":"EFT Start"}
, {"first":"149", "last":"Throttle Pull Review"}
, {"first":"150", "last":"Throttle Pull"}
, {"first":"151", "last":"PSIRT Verification"}
, {"first":"152", "last":"Commit Test"}
, {"first":"153", "last":"FTS Complete"}
, {"first":"154", "last":"Image List"}
, {"first":"155", "last":"Upgrade Planner"}
, {"first":"156", "last":"Market Matrix"}
, {"first":"157", "last":"Reg Test Cmp"}
, {"first":"158", "last":"ISSU CM Creation"}
, {"first":"144", "last":"Build Start Time"}
, {"first":"159", "last":"ISSU CM Verification"}
, {"first":"160", "last":"OPUS"}
, {"first":"161", "last":"Docs Complete"}
, {"first":"162", "last":"TAC Readiness"}
, {"first":"145", "last":"CCO FCS"}
, {"first":"163", "last":"Field CCO FCS"}
, {"first":"164", "last":"HPC Date"}
, {"first":"165", "last":"EoLA"}
, {"first":"166", "last":"EoS"}
, {"first":"167", "last":"EoL/EoSM"}
, {"first":"168", "last":"EoVS Date"}
, {"first":"169", "last":"End of Support"}
]}
The error I get is:
Please help with any pointers on this error.
For ItemWriteStore to work properly, your array part of the json should be given key name as "items" and also, your json objects need to have key "id", if not then, you also need to specify which key will act as id of json objects
{"identifier:"first","items":[
{"first":"146", "last":"Concept Commit"}
, {"first":"147", "last":"Execution Commit"}
, {"first":"148", "last":"EFT Start"}
, {"first":"149", "last":"Throttle Pull Review"}]}
Looking into ExtJS 4 and I am attempting to do the "Hello World" tutorial here: http://www.sencha.com/learn/getting-started-with-ext-js-4/
I have all my files setup as recommended in the tutorial:
But, I keep getting an error due to the funky syntax that starts their file:
I'm not using JQuery or any other libraries - since Sencha is supposed to be a complete javascript environment.
Here is the complete code:
app.js
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
index.html
<!doctype html>
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Any ideas on what could be the culprit?
You're not supposed to have any HTML in a JS file. The code in the tutorial is screwed up. Those anchor href tags are links to ExtJS API documentation, that somehow got inserted into example code.
The actual code should be:
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
I've put up a bug report about that page here: http://www.sencha.com/forum/showthread.php?175129-Documentation-Getting-Started-with-Ext-JS-4.0&p=717098#post717098
Added Jan 21st, 2012: apparently the correct version of that tutorial is available at: http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started
You need to update your "app.js"(strip out html tags):
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
Javascript parser does not understand html tags you happened to copy while creating your "app.js" file.
This is minimal HTML page to run ExtJS 4 without MVC:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/ext/4.0.0/resources/css/ext-all.css" rel="stylesheet" />
<script src="/ext/4.0.0/ext-all.js"></script>
</head>
<body>
<script>
Ext.onReady(function() {
Ext.Msg.alert('Welcome', 'Hello, World!');
});
</script>
</body>
</html>
And this one is with MVC:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/ext/4.0.7/resources/css/ext-all.css" rel="stylesheet" />
<script src="/ext/4.0.7/ext-all.js"></script>
<script src="/app.js"></script>
</head>
<body></body>
</html>
The code of app.js:
Ext.application({
name: 'HelloWorld',
launch: function () {
Ext.Msg.alert('Welcome', 'Hello, World!');
}
});
More details in my online demos:
ExtJS 4 "Hello World" Application
ExtJS 4 "Hello World" Application Using Ext Loader
ExtJS 4 MVC "Hello World" Application