I have a pdf file served via regular html ('a' tag) but it can take a while to download on slow connections, is it possible to add a loading gif so the user knows that something is being downloaded instead of staring at the same page and maybe think nothing is happening?
I tried one of the solutions offered here to preload the pdf and store it in the cache until it is requested, it shows no loading image but the file should load faster:
<script language="javascript" type="text/javascript">
//<![CDATA[
<!--
var pdfLoader = document.getElementById("pdfLoader");
pdfLoader.src = "http://mysite.com/mypdf.pdf";
//-->
//]]>
I'm on a decent connection so I have no way of testing it, should that work as it is or is there another option I can try?
Thank you.
Related
Hi I am new to elm and would like to know if it would be possible to set up elm such that it manages only one section of a website. the rest of the site would be in plain javascript, html, css.
but i would like to load up the compiled elm app in a separate script tag and it should manage only a particular section
let us say that the website is divided into 10 divs vertically of height 300px. i would want only the 3rd div to be an elm app.
is such a thing possible? if so how can i get this working
You can use Html packages embed function for this. I once did this just to try it out, but unfortunately cannot recall any details of it. I did found some source code though.
The html page would be something like this
<html>
<head>
</head>
<body>
<div id="personnel"></div>
</body>
<script src="elm.js"></script>
<script>
Elm.Person.embed(document.getElementById('personnel'));
</script>
</html>
By including elm.js, you'll get the Elm runtime. Here Person is my compiled Elm module. Something like
module Person exposing (..)
-- Module details here...
main =
Html.beginnerProgram { model = init, view = view, update = update }
Elm code is compiled to JavaScript with command
elm-make Person.elm --output elm.js
My knowledge on this is quite limited, but I did investigate it enough to be certain that with by doing this, one can add multiple components made with Elm to an html page / existing application.
Addendum: I found the source of my information
In addition to previous answer perhps you would like to take a look on:
https://ellie-app.com/h7vqHrPdWa1/0
I'm looking for a way to inject a custom script into the _Layout.cshtml purely from code. _Layout.cshtml cannot know anything about it. Just like Browser Link does it.
You simple write this:
app.UseBrowserLink();
And this gets injected into the body at runtime.
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
</script>
<script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
There is no sign of it in _Layout.cshtml.
Unfortunately Browser Link isn't open source so I can't see how they have implemented it. Browser Link source now available
So I was wondering how it was done?
It's not open source, but you can easily decompile it to see how it works.
From a comment in the source code:
This stream implementation is a passthrough filter. It's job is to add links to the Browser Link connection scripts at the end of HTML content. It does this using a connection to the host, where the actual filtering work is done. If anything goes wrong with the host connection, or if the content being written is not actually HTML, then the filter goes into passthrough mode and returns all content to the output stream unchanged.
The entire thing seems pretty involved, but doesn't seem to use anything not available out of the box, so I guess it can be possible to code a similar thing.
Razor allows you to do this quite easily - you can even use a flag.
Example:
In your controller:
ViewData["RegisterCustomCode"] = "true";
In your View (.cshtml):
#if (ViewData["RegisterCustomCode"] == "true")
{
<text>
<script src="..."></script>
</text>
}
I'm exploring Electron and I've run into a roadblock. I can't figure out how to load the Dojo Toolkit and use it in Electron.
For example, here is the simple "Hello World" for Dojo:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
That works fine in a browser, but doesn't work at all in Electron. After a couple hours of googling and trying 50 different experiments I've gotten nowhere.
Can someone please enlighten me?
While you can disable node-integration as Shwany said, I believe that will effectively render the ipc modules useless, which will probably pose undesirable limitations since you won't be able to communicate between the main and renderer processes.
However, it is possible, with a bit of finagling, to get Dojo to play nice with Electron. There are only a couple of things you need to do in your entry page.
Firstly, force the host-node has feature to false. This can be done by setting it in dojoConfig.has, e.g.:
var dojoConfig = {
async: true,
has: {
'host-node': false
}
}
Secondly, as Shwany pointed out, Dojo is going to see the already-existing require, so we need to move that out before loading Dojo:
// Move Electron's require out before loading Dojo
window.electronRequire = require;
delete window.require;
After loading dojo.js, you can move Dojo's require elsewhere and move Electron's back, if you wish. Whether you want to do this may depend on how you intend to code the client side of your application. Ostensibly, Dojo's global require is never needed, since you can request a context-sensitive require in any defined module via the 'require' module ID.
If you want to see a scaffolded Electron application incorporating Dojo, I created a boilerplate a few weeks ago (though be advised it's currently relying on a fork of electron-packager). If you want to see an example of a more full-blown Electron/Dojo application, I wrote a music player called Nukebox a couple of months ago which uses Dojo and dgrid (though its scaffolding is a bit different than the newer boilerplate).
I have your test code working in Electron.
First, I assume you are trying to load dojo.js from the web. //ajax.googleapis... etc will probably attempt to pull the file from the file system. I added http: to the front of it. That allowed me to open a .html file in the browser and work. I am not sure if that was an oversight or not.
Secondly, because the browser-window has node-integration on by default, 'require' is already defined and it does not understand what you are passing to it because it expects a path not an array. If you construct your browser window with node-integration turned off it should work:
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600, "node-integration": false});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});
Note the "node-integration": false. This may cause additional issues if you want to use node integrations in your app. However, your code should work.
Is there any way to perform "last minute" substitutions in the HTML (or other) resources that are part of your worklight application?
For example, I want to set the lang and dir attribute on the <html> element based on the end-user's locale.
some background:
I realize I can do dynamic DOM manipulation, but my question comes more from a background of client-server architecture where you have an opportunity on the server-side to replace some variables etc. in your HTML (or other resources) based on the requester's context. We have an existing app already and I'm investigating what it would take to integrate it with worklight including (for performance reasons) moving files from the server-side to the client-side without incurring too much refactoring of the current code.
Update: per the edit to your question, I don't think the below will make any significant impact on your app. Since you say you may move files from the server to client, this means like network traffic and with today's devices I suspect this may even be a boost to the performance rather than a penalty.
My suggestion is to try the below if the above is what you're planning to do.
I'm not even sure how else would you even do that from the server - change the application's UI based on the user's device local's, from the server. Doesn't make much sense to me to do that remotely.
To answer your question, I'll provide some background information that is relevant, I think, to a good user experience in this kind of scenario (as I see it):
By default, Worklight dismisses the splash screen once the framework has finished loading.
However, if you're using Worklight 6.2 then you can use the extended Splash Screen feature to display the splash screen for a longer duration, and during that time you could perform the required tasks -- like altering the UI based on the user's locale. Once you're done, you can then programmatically dismiss the splash screen on your own.
Reading materials:
Common UI Controls training module (slide #29)
Managing the splash screen user documentation topic (for both JS and Native support)
Example:
You need to uncomment the following in common\js\initOptions.js:
// # To disable automatic hiding of the splash screen uncomment this property and use WL.App.hideSplashScreen() API
//autoHideSplash: false,
You can then dismiss the splash screen when ready:
function wlCommonInit() {
function changeUiBasedOnLocale();
...
...
}
function changeUiBasedOnLocale() {
... // get device local
... // use JS to alter CSS
WL.App.hideSplashScreen();
}
Any basic DOM manipulation will help. Here is one example with D3.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3.js"></script>
</head>
<body>
<script type="text/javascript">
d3.select("html").attr("lang","en_EN");
</script>
</body>
</html>
I am a beginer to DOJO , finding difficulty to set up DOJO
This is my Program :
<html>
<head>
<script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
</script>
<title>button</title>
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
function init()
{
alert('Click on the Hello World Button');
}
dojo.addOnLoad(init);
</script>
</head>
<body bgcolor="#FFFFCC">
</body>
</html>
I have used the dojo.js file from the external site itself that is by
**<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>**
But still i am getting errors .
Please see the screen shot related to errors
http://imageshack.us/f/545/dojoh.jpg/
Also i have downloaded , the DOJO Latest relaese , and kept this in C:\dojo-release-1.6.1
Could anybody kindly please tell me , as what should be the source path to dojo js , i tried the below way , but doesn't know why this js file hasn't been recognized
Thank you for your time .
You are on the right track, there's just a small issue with your HTML. The following snippet is not valid:
<script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
</script>
You can't have a <script> tag within another <script> tag. Remove the outer tags, so you're left with just this:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
This is what caused the "unexpected end of XML source" error. Also, since the error prevents dojo from being loaded, you get the "dojo is not defined" right afterwards.
Secondly, you cannot require dojo modules with wildcards ('*'). You have to explicitly require the ones you want to use. So the following is not valid:
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
Lastly, you probably want to run your Dojo application through a web server, not just as a local file. It may work for now, but you're bound to run into some weird issues after a while.
Hope this helps.
In the HTML code you have here Dojo won't load, as script tag loading dojo is inside another script tag. Get rid off the outside script tag.
You should only require modules that you need. Here you do not seem to need any of the extra dojo modules.
Here is an example of having dijit.form.Button http://dojotoolkit.org/reference-guide/dijit/form/Button.html It will give you better idea of how you can load modules.
To load dojo.js file from your computer, if your HTML file is in projects dir then you may add your dojo-release-1.6.1 dir inside projects dir and may want to rename it as libs. Then in your HTML file you should load dojo.js file as
<script type="text/javascript" src="libs/dojo/dojo.js"></script>
In addition to the other answers, please note that your sample code reflects Dojo 0.4 APIs from about 5 years ago. The code has been refactored significantly since then. Most widgets live in the dijit package