I came across the extjs class on GitHub that I would like to use in my application.
Where should I put that file?
I know that file structure in extjs follows some patterns, so for example if the name of my application is MyApp, then I put classes in corresponding folders, like MyApp.view.myfolder.MyClass.
However, in this case the usage of class is given as
GLC.tip.toast(title, message, options)
so I doubt that I should put it in some view folder. On the other hand I tried to copy those two files (glc_tip.js and tip.scss) in the root folder of my application and include in index.html the following line:
<script type="text/javascript" src="glc_tip.js"/>
but it also doesn't work. I got an error that it is not defined.
UPDATE
I created folder /ux/tip/ in the application root directory and put files toast.js (renamed glc_tip.js) and tip.scss into it.
After that I modified app.json, so the section with "js" and "css" looks like:
"js": [{
"path": "app.js",
"bundle": true
},{
"path": "/ux/tip/toast.js",
"bundle": true
}],
"css": [{
// This entry uses an ant variable that is the calculated value of the generated
// output css file for the app, defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
},{
"path": "/ux/tip/tip.scss"
}],
After that I did sencha app refresh and sencha app build development, but it still doesn't work. i am getting an error:
Uncaught ReferenceError: GLC is not defined
at constructor.handler
It is better to register the third party libs in 'app.json' file. There must be js and css sections. You can put it in '/ux/tip/toast.js' file (create dirs if they do not exist).
Js files in
"js": [
{
"path": "${framework.dir}/build/ext-all-rtl-debug.js"
},
{
"path": "app.js",
"bundle": true
}
],
CSS files will be registered in
"css": [
{
// this entry uses an ant variable that is the calculated
// value of the generated output css file for the app,
// defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
}
],
And do not forget to rebuild and refresh your project to apply changes.
Related
I'm trying to show an image on an electron app. I've included it via extraResources in package.json like that:
"extraResources": [
{
"from": "app/assets/images",
"to": "../app/assets/images",
"filter": [
"**/*"
]
}
]
I'm calling it from JavaScript like that:
./app/assets/images/a.jpg
But it's calling wrong path which is: file:///D:/Program%20Files/nodejs/Nodejs_Projects/paletten4/release/win-unpacked/resources/app.asar/app/app/assets/images/a.jpg
There is no app.asar folder in the resources.
How can I get this image?
I'm creating an application using Angular 2. I started using it in the RC2 phase and after alot of updates I made to my app according to the released RC I finally got it to run on the Angular 2.0.0 final version.
As I'm using the angular-cli as well and updated to the currently latest version (1.0.0-beta.15). I also did all the required changes needed as it e.g. now uses webpack instead of SystemJs.
My problem now is, that I can't seem to find a way to include external libraries (lets take jQuery for this example) to my application without the need to include from a CDN.
In previous versions of Angular 2 there was an angular-cli-build.js like this:
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'jquery/dist/*.min.+(js|map)'
]
});
};
Which (looking to the last line of the vendorNpmFiles array) mapped the jquery library to the folder of the ready build app together with the system-config.js which had a little something like this:
/** Map relative paths to URLs. */
const map: any = {
'jquery': 'vendor/jquery'
};
And what it did was creating a vendor folder inside the final build folder (by default called dist) from which I could simply import jquery from in my parent most index.html with a statement like:
<script src="vendor/jquery/dist/jquery.min.js"></script>
My question now is how to get a similar result as described in the angular-cli version I'm using.
For now I use the libraries globally so I include them in the angular-cli.json
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
This way it is also not needed to include them into the index.html.
If someone finds another way to do it I'm still very interested in it.
The application I build at the moment runs in an angular 2.0.0 final environment using typescript. Furthermore it uses the angular-cli 1.0.0-beta.15.
As the whole application is produced by several different developers (all using typescript) I get some .js files that are compiled from typescript and should be included and used in my angular 2 app.
My problem however is, that I can't seem to find a way to integrate the .js file and use it in e.g. a component.
I allready checked this SO question as well as this question in the official repo but neither of these answers worked for me.
I even tried a workaround where I include the .js file globally in the angular-cli.json like this:
"scripts": [
"../path/to/custom.js"
]
How can I (generally and specifically for this scenario) include custom .js files which do not come as e.g. npm module or have any d.ts files.
EDIT:
The including itself by using the angular-cli.json seems to work well but for now I still could not find a way to use the scripts methods. Whenever I do
declare var customJsObject: any;
It throws an
EXCEPTION: Uncaught (in promise):
Error: Error in CustomComponent caused by: customJsObject is not defined
From my project:
{
"project" : {
"version": "1.0.0-beta.15",
"name" : "my-project"
},
"apps" : [
{
"root" : "src",
"outDir" : "dist",
"assets" : "assets",
"index" : "index.html",
"main" : "main.ts",
"test" : "test.ts",
"tsconfig" : "tsconfig.json",
"prefix" : "",
"mobile" : false,
"styles" : [
"sass/application.scss",
"assets/fonts/bebas/bebasneue.css"
],
"scripts" : [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/fastclick/lib/fastclick.js",
"../node_modules/jquery.cookie/jquery.cookie.js",
"../node_modules/jquery-placeholder/jquery.placeholder.js",
"../node_modules/foundation-sites/dist/foundation.js",
"../node_modules/jquery-ui/ui/version.js",
"../node_modules/jquery-ui/ui/plugin.js",
"../node_modules/jquery-ui/ui/widget.js",
"../node_modules/jquery-ui/ui/widgets/mouse.js",
"../node_modules/jquery-ui/ui/widgets/draggable.js",
"assets/rollbar.js"
],
"environments": {
"source": "environments/environment.ts",
"dev" : "environments/environment.ts",
"prod" : "environments/environment.prod.ts"
}
}
],
"addons" : [],
"packages": [],
"e2e" : {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test" : {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt" : "scss",
"prefixInterfaces": false
}
}
Solution Edit:
For this specific problem there was a naming issue which caused the problem. In general the provided answer "entering the script in the angular-cli.json" was correct.
The only thing one need to do afterwards is
declare var customJsObject: any;
in the component you want to use the custom.js in.
I am using custom build of dojo as specified here http://dojotoolkit.org/reference-guide/1.7/quickstart/custom-builds.html
profile file (say sample.profile.js) is something like -
dependencies ={
layers: [
{
name: "mydojo.js",
dependencies: [
"dijit.Button",
"dojox.wire.Wire",
"dojox.wire.XmlWire",
"explosive.space.Modulator"
]
}
],
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "explosive", "../../explosive" ]
]
};
Now I want to add all the files in explosive/space as dependencies. How can I do this apart from running a script which lists all the files and adds them in this profile file?
There is no wildcard option. If you are doing a build properly, it shouldn’t matter, since dependency resolution will find all of the modules that your application is actually using so long as you provide a reference to the entrypoint module in your build profile.
I'm making use of RequireJs, and I'm having trouble with the build.
My structure is
webroot
css
/* css here */
files
img
js
emails
verify.js
lib
jquery-1.8.3.min.js
jquery-ui.min.js
jquery.ui.selectmenu.js
modernizr.js
require.js
orders
form.js
common.js
js-build
/* expected build output here */
js-tools
app.build.js
This is a part of a CakePHP project, but the webroot is where the actual webroot of the web server will be.
node and r.js.cmd are both on my path, so I haven't included it in the js-tools directory.
When accessing the default page, the is /, but it could also appear as /orders/form. For this reason, relative Urls to the JS is an issue.
When I load the JS, I'm using
<script type="text/javascript" src="/js/lib/require.js"></script>
<script type="text/javascript">
//<![CDATA[
require(['/js/common.js'], function(common){
require(['orders/form']);
});
//]]>
</script>
This is taken from https://github.com/requirejs/example-multipage-shim.
My common.js is
requirejs.config({
"baseUrl": "/js/lib",
"paths": {
"orders": "../orders",
"emails": "../emails",
"jquery": [
"//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min",
"jquery-1.8.3.min"
],
"jquery-ui": [
"//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min",
"jquery-ui.min"
]
},
"shim": {
"jquery.ui.selectmenu": ["jquery", "jquery-ui"]
}
});
As it stands, this works when working with unoptimized code. The important feature is that js is referenced with an absolute URL, is it can be picked up by the code from either /, or /orders/form.
My app.build.js is
({
appDir: '..', /* relative to app.build.js */
mainConfigFile: '../js/common.js', /* relative to app.build.js */
baseUrl: 'js/lib', /* relative to current directory */
dir: '../js-build', /* relative to app.build.js */
optimize: 'uglify2',
paths: {
"jquery": "empty:",
"jquery-ui": "empty:",
"jquery.ui.selectmenu": "empty:",
"common": "../common",
"orders": "../orders",
"emails": "../emails"
},
modules: [
{
name: 'common',
include: [
'modernizr'
],
exclude: ['jquery-1.8.3.min', 'jquery-ui.min', 'jquery.ui.selectmenu']
},
{
name: 'orders/form',
exclude: ['common', 'jquery.ui.selectmenu']
},
{
name: 'emails/verify',
exclude: ['common', 'jquery.ui.selectmenu']
}
]
})
When optimization runs as r.js.cmd -o js-tools\app.build.js from the webroot, I get a js-build directory with a copy of the whole webroot directory, optimized. Although not ideal (I wanted to limit it to just the js directory getting optimized), I can use my Ant driven build script to copy the contents of the js-build\js directory to the correct location.
When I run the build from the command line, the generated common.js, orders/form.js and emails/verify.js all exclude jquery.ui.selectmenu. common.js has modernizr included, as well as the header from the same lib. form.js and verify.js also exclude jquery.ui.selectmenu, and are devoid of any headers.
However, when I run from my Ant script, orders/form.js and emails/verify.js include jquery.ui.selectmenu and modernizr, even though I've given specific instruction for common and jquery.ui.selectmenu to be excluded.
I've excluded jquery.ui.selectmenu, because the particular version I am working with is written the the following form, and the browser has an issue with the end jQuery variable not being available. By excluding jquery.ui.selectmenu, I can attempt to load it separately, as though it came from a CDN.
(function($, undefined) {
$.widget("ui.selectmenu", {...
});
}( jQuery ));
So, my issue is, how come the same app.build.js is resulting in different output?
When dealing with relative paths you might need to include a "." at the beginning of the path string (to specify that you want to go from the current path). I ran into this issue recently while testing out r.js on grunt. I had set my baseUrl to "/" initially when it should've been "."
In your case, your baseUrl is set to "js/lib" - perhaps try ".js/lib"
It's a little weird since the error message I got seemed to have the correct base path as well as the relative path, but r.js was still unable to locate the file.
This question is pretty old but I see it has a bunch of views, so I figured I'd put this on here as it might help someone out there.