I have a package, defined in dojoConfig like this:
packages: [
{ name: 'Widget', location: '/widgets/Widget' }
]
The /widgets/Widget/main.js file defines my main module. With this config, in Javascript i can require the module Widget/main directly by its package name like this:
require(["Widget"], function(Widget){
var widget = new Widget();
// all is well
});
But doing the same using declarative syntax throws a Unable to resolve constructor for: 'Widget' error:
<div data-dojo-type="Widget"></div>
Am I doing something wrong, or is this expected behaviour?
It would be easier to see how widget is created, but the complaint is that you have no constructor.
a constructor is required for a widget. If you extend WidgetBase its done for you.
check the doc:
http://dojotoolkit.org/reference-guide/1.9/quickstart/writingWidgets.html
You need to add the
require(["Widget"], function(Widget){});
part in a script tag in the HTML document you are using
<div data-dojo-type="Widget"></div>
It should look like something:
<script> require(["Widget"], function(Widget){}); </script>
You have to require the module/widget before you can call it in an HTML page the same way you need to do it in a script tag.
Related
I've been looking through the vuelayers documentation and have found little info on to use the vl-style-icon module, which is quite important if you want to create icons on your vuelayer map.
I'm pretty sure I have proper syntax when it comes to using it but marker.png won't load in through it. I've tried accessing it as just a normal image and it works fine so it is to my assumption that it's something with my syntax.
Here is my code:
<template>
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" style="height: 400px">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation" projection="EPSG:4326"></vl-view>
<vl-feature v-for="crime in crimePoints" :key="crime.id">
<vl-geom-point :coordinates="crime.coords"></vl-geom-point>
<vl-style-box>
<vl-style-icon src="./marker.png" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
</vl-feature>
<vl-layer-tile>
<vl-source-osm></vl-source-osm>
</vl-layer-tile>
</vl-map>
</template>
vl-style-box and vl-style-icon are the main points here. I have also checked to see if the points come up without vl-style-box and they do. What could be wrong with my code?
You can try like this:
<vl-style-icon :src="require('./marker.png')" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
If you used Vue CLI to create your vue project include this in your vue.config.js file. First section tells webpack to parse url attribute on custom tags other than what is already configured (Source).
module.exports = {
chainWebpack: config => {
config.module.rule('vue').use('vue-loader').tap(options => {
options.transformAssetUrls = {
'vl-style-icon': 'src',
...options.transformAssetUrls,
};
return options;
});
}
}
Run the following command to verify the correct vue-loader configuration is there
Source
vue inspect > output.js
Initial Question
How, if at all, can we expose a view/view-model component from a plugin? For instance, we have the following:
// ./open-id/foo-bar.html
<template>
<p>FooBar</p>
</template>
// ./open-id/foo-bar.ts
export class FooBar { }
In the consuming application, we would like to do this:
// ./app.html
<require from="open-id/foo-bar"></require>
<foo-bar></foo-bar>
Edits
Simpler Name
Based on Robinson Collado's answer, we using a simpler name (foo not foo-bar) to reduce complexity.
// ./open-id/foo.html
<template>
<p>Foo</p>
</template>
// ./open-id/foo.ts
export class Foo { }
// ./app.html
<require from="open-id/foo"></require>
<foo></foo>
That approach threw this error:
Unhandled rejection Error: Load timeout for modules: template-registry-entry!open-id/foo.html,text!open-id/foo.html
Global Resource
Based on the Installing Plugins documentations, we tried adding the component as a global resource.
// ./open-id/open-id.ts
function configure(config: FrameworkConfiguration) {
config.globalResources('./foo');
}
That approach threw this error:
GET http://localhost:9000/src/open-id/open-id/foo.js 404 (Not Found)
That means Aurelia is looking for the component in open-id/open-id/, which is one directory too deep.
Loading as a Plugin
During development of the plugin, we're loading the plugin like this, which may be why Aurelia is looking one directory too deep. How can we load the plugin differently during developent?
// ./main.ts
aurelia.use.plugin("./open-id/open-id");
Loading as a Feature
aurelia.use.feature("./aurelia-open-id-connect");
The error now is this for each constructor that receiving an injection from our feature.
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Try changing the name of the custom tag <foo-bar></foo-bar> to <foobar></foobar>. The name of the tag should match the name of it's view-model class. Unless, if you use the #customElement decorator to explicitly declare the tag name for the custom element.
Before AMD, we could use methods directly in chrome/firebug command line like:dojo.byId() or dijit.byId() etc.
But in AMD form, how we will get methods available in a module in command line?
You can just put the complete syntax on one line like this:
require(["dojo/dom"], function(dom) { console.log(dom.byId("search")); });
and for dijit.byId():
require(["dijit/registry"], function(registry) { console.log(registry.byId("search")); });
You can also put the modules in the global space by putting the following snippet in your html :
<script type="dojo/require">
dom : "dojo/dom",
registry : "dijit/registry"
</script>
See http://dojotoolkit.org/reference-guide/1.9/dojo/parser.html#declarative-require
That way, you can use the modules directly in the chrome console. e.g. :
registry.byId("someId")
Trying to figure out why I can't seem to intern strings in my dojo build. My layer files get created correctly, but the code associated with each of the individual dijits doesn't get interned properly.
Here is a piece of portion of the build output that illustrates where it is failing:
release: Interning strings for : ../../release/fwijits5.31.2012/content/fwijits/optionalDijits/commenting.js
release: ../../release/fwijits5.31.2012/content/fwijits/optionalDijits/templates/commenting.htm
release: Optimizing (shrinksafe, stripConsole=normal) file: ../../release/fwijits5.31.2012/content/fwijits/optionalDijits/commenting.js
release: Could not strip comments for file: ../../release/fwijits5.31.2012/content/fwijits/optionalDijits/commenting.js,
error: InternalError: illegal character
It looks like the optimize fails because the template doesn't get added to the js file properly. Here is what the js looks like after the html gets interned. You can't tell from the output, but a byunch of special characters get tacked on at the end of the javascript.
if(!dojo._hasResource["fwijits.optionalDijits.commenting"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["fwijits.optionalDijits.commenting"] = true;
dojo.provide("fwijits.optionalDijits.commenting");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
//The main widget that gets returned to the browser
dojo.declare("fwijits.optionalDijits.commenting", [dijit.layout.ContentPane, dijit._Templated], {
widgetsInTemplate: true,
_earlyTemplatedStartup: true,
templateString: dojo.cache("fwijits.optionalDijits", "templates/commenting.htm"),
basePath: dojo.moduleUrl("fwijits.optionalDijits"),
//This function contains all configurable parameters
constructor: function(params){
params = params ||{};
this.inherited(arguments);
},
//This functions run on a "startup" call
startup: function(){
var _this = this;
this.inherited(arguments);
},
_addPointComment:function(){
console.debug("button clicked");
}
});
}
The htm file is pretty simple, so I don't think it's the root of my problem.
<div dojoAttachPoint="containerNode">
<div dojoattachpoint="_outerDiv">
<div dojoattachpoint="_addPoint" dojotype="dijit.form.Button" dojoattachevent="onClick:_addPointComment"><b>Add Comment</b></div>
</div>
</div>
Any suggestions?
Which version of Dojo? There is a bug in the build system with interning strings that do not end in HTML or HTM, although I've never tried with HTM to know for sure.
Might be worth a check. I know this was fixed in 1.7 and backported to 1.8.
https://bugs.dojotoolkit.org/ticket/15867
I'm new to Dojo world. I tried to create a custom dojo widget from scratch.The problem that I'm facing is the widget is not getting parsed. I see that postCreate method of that widget is not getting called. The widget JS file is being downloaded from the server.
Here are the steps what I followed.
Created a JavaScript file CustomWidget.js in test folder.
dojo.provide('test.CustomWidget');
dojo.require('dijit._Widget');
dojo.declare('test.CustomWidget', dijit._Widget, {
text: "Hello World",
postCreate: function() {
console.log(this.text+'text');
this.domNode.innerHTML=this.text;
}
});
In my jsp file,I imported test.CustomWidget using dojo.require.
<script type="text/javascript">
dojo.require('test.CustomWidget');
dojo.addOnLoad(function(){ dojo.parser.parse("addFavorites"); });
</script>
<div id='addFavorites' dojoType='test.CustomWidget'>
</div>
I can see that CustomWidget.js file is being downloaded, but I don't see the console statement being printed. Can someone plese help me?
Looks like you aren't instantiating the widget, do you have code like this somewhere?
<div dojoType="mindtree.CustomWidget">...</div>
Otherwise it's like declaring a class but never calling new.