I need to build a cross platform app with multiple windows. So I would like to know how to use html templates in electron.
Based on a similar question and what I've seen, there's no built in html template language in Electron, which is actually great because it allows you to use any other template language.
I'm currently playing with ejs in Electron.
Below is my index.ejs template file:
<html lang="en">
<head>
<title>The Index Page</title>
</head>
<body>
<h1>Welcome, this is the Index page.</h1>
<% if (user) { %>
<h3>Hello there <%= user.name %></h3>
<% } %>
</body>
</html>
And below is a section of my main.js file where the above template is rendered and loaded onto the BrowserWindow. Note that I've left out most of the boilerplate code:
const ejs = require('ejs');
//... Other code
let win = new BrowserWindow({width: 800, height: 600});
//... Other code
// send the data and options to the ejs template
let data = {user: {name: "Jeff"}};
let options = {root: __dirname};
ejs.renderFile('index.ejs', data, options, function (err, str) {
if (err) {
console.log(err);
}
// Load the rendered HTML to the BrowserWindow.
win.loadURL('data:text/html;charset=utf-8,' + encodeURI(str));
});
I'll give some credit to this gist for helping me find the data:text/html;charset=utf-8 part of the url that can be used to load dynamic content.
UPDATE
I'm actually not using this anymore. It's faster to just load the default html and use the native DOM methods. The Electron Quickstart program shows how to do this nicely.
Another option is to do the templating during your build. Here is a simple example using gulp to add nonces to the CSP meta tag and the inline script.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-<%= scriptNonce %>';">
<title>Basic Electron App</title>
</head>
<body>
<div id="app"></div>
<script type="application/javascript" nonce=<%= scriptNonce %>>
require('./index.js');
</script>
</body>
</html>
and in gulfile.js add the following to what you already have and make sure this task is included in your pipeline. You can also just update your current html task with the code below.
const template = require('gulp-template');
const uuidv4 = require('uuid/v4');
gulp.task('copy-html', () => {
// Create nonces during the build and pass them to the template for use with inline scripts and styles
const nonceData = {
scriptNonce: new Buffer(uuidv4()).toString('base64'),
styleNonce: new Buffer(uuidv4()).toString('base64')
};
return gulp.src('src/*.html')
.pipe(template(nonceData))
.pipe(gulp.dest('dist/'));
});
This is a very stripped down example. I have a more complete example at https://github.com/NFabrizio/data-entry-electron-app if anyone is interested, though there is still one warning when running the application because one of the packages I am using pulls in react-beautiful-dnd, which adds inline styles but does not currently accept nonces.
Related
I'm a newbie to reactjs and trying to test a very basic component, however it seems all my struggle is futile because its not showing up in the browser.
I'm using asp.net MVC 5 app and I've been following along this tutorial https://reactjs.net/getting-started/tutorial_aspnet4.html as the tutorial states you need to add React.Web.Mvc4 Nuget package which have some dependencies.
My simple React component (SimpleComponent.jsx)
var ComponentBox = React.createClass({
render: function() {
return (<div style="background-color:antiquewhite">Hello World ReactJs Component!</div>);
}
});
ReactDOM.render(
<ComponentBox />,
document.getElementById('reactDiv')
);
and my razor view is pretty simple
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
</head>
<body>
<div id="reactDiv"></div>
<script src="#Url.Content("~/Scripts/SimpleComponent.jsx")"></script>
</body>
</html>
Did I miss something?
The Solution for my problem was to replace the style element in my jsx file as following
var ComponentBox = React.createClass({
render: function () {
return (<div style={{background:'antiquewhite'}}>Hello World ReactJs Component!</div>);
}
});
Based on react docs "using the style attribute as the primary means of styling elements is generally not recommended"
by using javascript object to store the style as properties and I hope this'll help someone.
I'm looking to create a test file (test.js). The Test.js file's purpose will be to perform unit tests for a particular controller (ie: Main.controller.js).
How can I load in this controller to an external js file?
I've tried using sap.require:
sap.ui.require(["/pricingTool/Controller/Main.controller"],
function(Main){
//Quint code
test("hello test", function(assert) {
assert.ok(1 == "1", "Passed!");
});
});
But I get an error that says:
failed to load /Controller/Main.controller.js
This tells me I'm either structuring this wrong, using the wrong path, or both. Any suggestions would be helpful. I've attached my file tree below for reference.
Component.js
sap.ui.define(['sap/ui/core/UIComponent'],
function(UIComponent) {
"use strict";
var Component = UIComponent.extend("pricingTool.Component", {
metadata : {
metadata : {
maniest: "json"
},
rootView : "pricingTool.view.Main",
dependencies : {
libs : [
"sap.m",
"sap.ui.layout"
]
},
config : {
sample : {
files : [
"Main.view.xml",
"Main.controller.js"
]
}
}
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// additional initialization can be done here
}
});
return Component;
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Pricing Tool</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="async"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"pricingTool": "./"}'>
</script>
<script src='../pdfmake-master/build/pdfmake.min.js'></script>
<script src='../pdfmake-master/build/vfs_fonts.js'></script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.App ({
pages: [
new sap.m.Page({
title: "Pricing Tool Rapid Prototype",
enableScrolling : true,
content: [ new sap.ui.core.ComponentContainer({
name : "pricingTool"
})]
})
]
}).placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
initialTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
<script src="allTests.js"></script>
<script src="/Controller/Main.controller.js"></script>
<script>
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
You do not need to reference the controller file directly inside the .html file.
The problem is that UI5 does not know where to find your resources. The resolution process is the following:
All standard resources are loaded from a path relative to where your sap-ui-core.js was loaded from.
All resources with custom namespaces are loaded based on the resource roots definition.
Basically, in the resource roots you define a map between a namespace prefix and the location where to find the resources starting with that prefix. If you use relative paths, then the locations are resolved relative to your html file.
In your index.html you have done this: data-sap-ui-resourceroots='{"pricingTool": "./"}' which is perfectly fine. Because your index.thml is located at the root of the project, requesting the pricingTool/Controller/Main.controller will lead to making a request at ./Controller/Main.controller which is actually our file.
But in your initialTest.html you failed to specify any resource root at all. Moreover, you referenced your controller directly and the path seems to not be right (note that a path starting with a leading / is considered an absolute path on the current host; depending on the server you are using, this might not be correct, as usually each application has its own subpath in the server).
You should therefore include a data-sap-ui-resourceroots='{"pricingTool": "../"}' inside your initialTest.html. Notice that I have used .. because the html file is inside the Test folder (and the other stuff is in sibling folders).
I need to initialize the VSS.SDK from a .ts class (outside the html page). I have analyzed some examples from Microsoft and all are initialize under html page.Is it possible to do this outside html page?
You can refer to this link for details: Visual Studio Services Web Extension SDK.
Types
Types of VSS.SDK.js, controls and client services are available in typings/vss.d.ts.
REST Client types for VSTS are available in typings/tfs.d.ts
REST Client and extensibility types for Release Management are available in typings/rmo.d.ts
Using tsd
Although TypeScript declare files do not exist at DefinitelyTyped repo, they can still be used through tsd.
First, make sure that the dependencies are loaded using below
command:
tsd install jquery knockout q --save
Next, run below command to get
vss-web-extension-sdk types added to tsd.d.ts:
tsd link
Finally, add only reference to typings/tsd.d.ts in your
TypeScript files.
Yes, you could to do it outside the html and put it in the JavaScript file or other (e.g. ts), then add the reference to corresponding JS file to the html page.
For example:
VSS.init();
$(document).ready(function () {
VSS.notifyLoadSucceeded();
});
<!DOCTYPE html>
<html>
<head>
<title>Hello word</title>
<meta charset="utf-8" />
<script src="node_modules/vss-web-extension-sdk/lib/VSS.SDK.js"></script>
<script src="Scripts/VSSInit.js"></script>
</head>
<body>
<!--<script type="text/javascript">
VSS.init();
</script>-->
<h1>Hello word</h1>
<!--<script type="text/javascript">
VSS.notifyLoadSucceeded();
</script>-->
</body>
</html>
edit: This questions is solved
Stupidly enough, the url /img/images.json is treated differently by the simpleHttpServer used to test the application than by the iOS simulator.
It was a long search why it would show the list in the browser when testing but not in the simulator. Apparently the simpleHttpServer that comes with python will treat a url starting with the / as it's root, for example the www folder. The simulator does not and would appreciate a relative location, starting with no /
The problem seems mostly caused by the rustiness of my web-dev skills ^.^
====================
I am trying to make a simple ionic app, and for some input I am using the Angular Tutorial.
I have a very simple page that should load the contents of a json-file with image data. And all it needs to do for now is showing the image names. At the end it should dump the complete data from the json-file.
This is all based of the blank project created with ionic.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="phocalsApp">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="imageListCtl">
<ul class="imagelist">
<li ng-repeat="image in imagelist" >
{{image.imgName}}
</li>
</ul>
{{imagelist | json}}
</ion-content>
</ion-pane>
</body>
</html>
app.js:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('phocalsApp', ['ionic', 'phocalsControllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controller.js
'use strict';
var phocalsControllers = angular.module('phocalsControllers', []);
phocalsControllers.controller('imageListCtl', ['$scope', '$http',
function($scope, $http) {
$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
});
$scope.orderProp = 'imgDate';
}]);
images.json:
[
{
"imgUrl":"",
"imgName":"Nieuwste Foto",
"imgDate":20140525
},
{
"imgUrl":"",
"imgName":"tweede Foto",
"imgDate":20140524
},
{
"imgUrl":"",
"imgName":"derde Foto",
"imgDate":20140523
}
]
Seeing as I pretty much use the same code as the angular example, I would expect this to work, unfortunately all the output I am getting when running in the ios Simulator is an empty page with the header-bar. No errors or nothing. Can anyone tell me what I am doing wrong here?
You are missing some console.log(data) in your controller to check whether the controller is initialized, wether $http actually succeeds etc.
Even after using angular for months, i have to log every step cause there are too many things to go wrong :)
Also you should add an error function to
$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
}).error(function(data) ....;
I am experimenting with the JavaFX WebView control and I want to use the MathJax Javascript library to render mathematical content.
As a test I have created a basic JavaFX FXML project, added a WebView to the FXML and updated the controller code like so:
public class SampleController implements Initializable {
#FXML
private WebView webView;
#Override
public void initialize(URL url, ResourceBundle rb) {
webView.getEngine().load(
"file:///Users/benjamin/Desktop/Page.html");
}
}
The html file looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="/Users/benjamin/Downloads/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>
This works as expected and produces the following result:
Note that for the test, both the html and JavaScript file paths are hard coded to locations on my hard drive so the next step is to package the html as a resource that is bundled with the application so that it is not looking for local files.
I have updated the controller code to look up the page like this (the html has not been changed).
#Override
public void initialize(URL url, ResourceBundle rb) {
webView.getEngine().load(
this.getClass().getResource("Page.html").toExternalForm());
}
but this produces the following result:
As you can see, the mathematical content is no longer rendered.
If I change the html <script> tag to reference the JavaScript from a CDN, then everything works as in the original example but I would like to be able to reference the local JavaScript file (and eventually a version that is bundled with the application).
Is what I'm trying to achieve possible?
Add the MathJax.js file to the same package/folder of Page.html then reference to it as
<script type="text/javascript"
src="MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>