In SAPUI5 I can load local files this way:
jQuery.sap.require("util.someFile");
But is it possible to load external libraries when required in some view using the above command or a similar approach? Ideally, I am looking for something like:
theLoadingCommand("some_url");
Thanks
Basically it is possible to register a module path to some URL.
jQuery.sap.registerModulePath('external.library', 'http://....'); //not working
There is only one problem with that. UI5 loads the resources via AJAX requests. Your browser will give you an error because you are trying to load files from a different host.
You can include external libraries by including the file in a normal script tag. It is also possible to include requireJS in your project and use its features. Unfortunately, at the moment UI5 doesn't support requireJS out of the box.
jQuery is supported by SAPUI5, so you can extend your heading from controller, for example:
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://somedomain.com/somescript";
$("head").append(s);
Related
What I'm trying to do in Aurelia, is something like Prism is doing in WPF- Composite applications.
So lets say I have a "shell" application that defines the main application layout, then i have modules that I can plugin at run-time. Those modules can be an Aurelia application per se or Aurelia plugin (don't know what to use - need recommendation).
When loaded, the module needs to add it's menu items to the main application menu to expose it's features.
This is a mockup of the application:
Each module can have multiple menu items and can be pretty complex.
I'm using latest Typescript, Aurelia-CLI to create the application, and I'm using the built-in bundler : Aurelia's new built-in bundler.
So What I don't know is:
Those modules/features - what must they be? (Maybe Aurelia Plugins, or another Aurelia application?)
How to load those modules/features at run-time? (like deploy it in some plugins folder and tell the main shell application to load them)
How to modify the main menu and add new menu items from the loaded module?
Please help
Aurelia supports ultra dynamic applications. Also, there have been other community members who have had similar requirements and was able to resolve it. So I think the scenario is possible.
It seems the sub-application can just be a route.How/where to load the route should be determined based on the application URL
Those modules doesn't need to do anything specific, they can just be a normal, plain JS/TS class with lifecycle methods to handle activation/deactivation. I guess that main shell and all sub-applications need to share a common URL, you cannot have more than one router.
There could be a singleton/central store for new route to register information about loaded features, or it can be loaded upfront by a configuration file/metadata file or a database fetch.
Here is a similar question from another community member that I think can help you see how to glue things to https://discourse.aurelia.io/t/dynamicaly-load-routes/1906
I am trying to use Inferno to render on the server. The documentation inferno-server and server-side-rendering does not say show to set-up babel & run the sever.
All I could find is InfernoJS Babel Plugin but noting about running it on Node.
Any help would be appreciated.
Could you explain what you mean by "Running on node"?
Inferno Babel plugin converts the JSX code into a regular JS code, which runs without problems on node (the server uses renderToString). While you are not using browser elements (document and other tools), everything should be fine.
Then you need to make a separate component for the client, which when requested will be given as a bundle along with the html page, and then using hydrate function to "cling" into webpage and bind items.
you can check my repository (although this is for TypeScript): https://github.com/MrFoxPro/inferno-isomorphic-tempalte
I would like to optimize the loading time of my website which is built on Chaplin + brunch (coffeescript).
How could I pack everything so that only one js file would be seen / loaded by the browser ?
It is mainly a workflow question, I don't know if this can be achieved by brunch itself or if I should rely on an external package such as webpack or even jspm.
That does it: config.files.javascripts.joinTo = 'app.js'
http://brunch.io/docs/config#-files-
I am looking for an example about combining the four technologies in the title :) I have a working ReactJS application using Play, Scala and WebJars, it's here on GitHub.
Now I would like to add RequireJS, but I'm not sure how to go, especially because it seems to require a different JSXTransformer? If anybody has a pointer (or even a PR) it would be very appreciated.
This is not the easiest thing to do, but I was able to pull it off. I will give you some tips here. I also uploaded my own project to github. This is a very simple snake game built using React and RequireJs. It based on Webjars and Play Framework.
Remember that RequireJs is part of Play Framework. Here's a step by step guide to create React/RequireJs/WebJars/Play integration:
In your plugins.sbt add addSbtPlugin("com.github.ddispaltro" % "sbt-reactjs" % "0.5.2"). This is a plugin which transforms JSXes into JSes and also strips flow types if you want that.
In your main scala.html file add #helper.requireJs(core = routes.WebJarAssets.at(WebJarAssets.locate("require.js")).url, module = routes.Assets.at("javascripts/main").url). This will add add a script tag with data-main and src attributes that are used to bootstrap your RequireJs app.
Create react.js file in your assets/javascripts folder:
define(['../lib/react/react-with-addons'], function(React) {
window.React = React;
return React;
});
Create main.jsx file in your assets/javascripts folder:
require.config({
// standard requirejs config here
});
require(['react', 'components/YourComponent'], function(React, YourComponent) {
'use strict';
$(document).ready(function() {
React.render(<YourComponent />, document.getElementById('container'));
});
});
Your standard React component goes to assets/javascripts/components/YourComponent.jsx and is defined like standard RequireJs module. Remember to return a React class:
define(function(require) {
var React = require('react');
var AnotherComponent = require('components/AnotherComponent');
return React.createClass({ ... });
}
I hope that helps. If you have any questions, please let me know.
Someone said to have got the text plugin working with sbt-rjs: https://groups.google.com/forum/#!topic/play-framework/F789ZzTOthc
I would attempt with the text plugin first, as it's the simplest plugin of all, right? Once this is successful, move on to the JSX plugin:
https://github.com/philix/jsx-requirejs-plugin
Have a look at: https://github.com/nemoo/democratizer
This is an example project that uses play framework, scala, slick, mysql as a restful backend.
The client is a javascript single page application (SPA) written in react. It uses react router for client site routing and ES6 javascript.
The build process combines webpack and play activator which enables simple automatic browser refresh for server and client side code.
I have created two separate add ons. One for getting input from the user and storing in simple-storage. In the other one the actual add on function. Both work fine. But when i merge these both main add on code in to a single main code they didn't work. So i wonder whether there can be two js files in "main" add on directory and is communication possible between them?I need one of the js in main directory to be able to access the simple-storage of the other js in the same main directory.
I'm really not sure what your overall goal is, please provide an example for a more specific answer. If you're using the Add-on SDK, only code in main.js will be run, but you can use commonJS modules to implement various features and use require to import them into main.js.
Please see the docs for more information on how the Add-on SDK works:
https://developer.mozilla.org/en-US/Add-ons/SDK