I'm trying to get my dummy Dart webapp running in browsers. Here's the code of my html page:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
</head>
<body>
<div id='button'>hello world</div>
</body>
<script src='my_app.dart' type='application/dart'></script>
<script src='packages/browser/dart.js'></script>
</html>
and this is what I'm getting in js console when trying to open it:
GET http://localhost:4567/my_app.dart.js 404 (Not Found)
(I'm running it on a local server, thus the url - got the same error if simply opening an html file though).
If I open the same url in Dartium, the webapp works. So the problem, I suppose, is that dart.js doesn't work as expected. What could be the problem?
packages/browser/dart.js is a bootstrap script that checks if a Dart VM is available on your browser. If a Dart VM is available, your dart script is executed directly, otherwise packages/browser/dart.js appends to the document a new js script with a url that points to a file with the same name as your dart file but with a appended .js. Depending on how you work you may have to generate this JS file manually with dart2js :
dart2js --out=my_app.dart.js my_app.dart
Try to "Run as Java Script" it should generate additional files like "my_app.dart.js"
Related
Trying to build a test pdf with jspdf 1.5.3 and it works fine with jsfiddle. But when I use the exact same script on my apache or iis servers, chrome cannot open the pdf. When I look at the pdf in a text viewer, it appears my version has some additional binary code.
This is the script:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript">
var doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.save('xyz.pdf');
</script>
</head>
<body>
</body>
</html>
Working version on jsfiddle:
https://jsfiddle.net/orz3jb4v/
Here is a screenshot of both versions side by side in text editor:
https://i.imgur.com/bLi6f1E.png
(Invalid pdf on left)
Edit: After testing, this only happens with version 1.5.3. Reverting to 1.5.2 works perfectly fine. I can't find why this only happens on certain servers.
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>
I'd like to be able to unit test my custom polymer elements.
Given a component in lib/web_components:
class Foo extends PolymerElement {
Foo.created() : super.created();
}
and a test in test/web_components:
main() {
test("Should Be a PolymerElement", (){
Foo undertest = new Foo.created();
expect(undertest, new isInstanceOf<PolymerElement>());
});
}
Running the test results in the error mentioned in the title. How can I avoid this error?
Edit:
So I've tried adding #TestOn('content-shell') at the top of my client side test files, and adding #TestOn('vm') to the server side tests.
In Grinder I have:
#Task('Test')
test() {
new PubApp.local('test').run([]);
new PubApp.local('test').run(["-p", "content-shell"]);
}
The server-side tests run fine but the client-side tests throw the following error:
pub run test -p content-shell test/web_component/foo_test.dart
"Failed to start content shell: No such file or directory"
Edit 2:
I've tried running in the dartium platform with the following command since content-shell doesn't seem to work:
pub run test:test -p dartium test/web_component/foo_test.dart
The result is:
Failed to load "test/web_component/foo_test.dart": type 'test.backend.declarer.Declarer' is not a subtype of type 'test.backend.declarer.Declarer' of 'function result'.
packages/test/test.dart 44:32 _declarer
packages/test/test.dart 108:5 test
foo_test.dart 9:3 main
package:test IframeListener.start
foo_test.dart.browser_test.dart 6:18 main
You need to create an html page for the test and run the test in the browser. The new test package has a decent readme explaining how to do that. (I have an issue that browser tests time out often. This is a known issue and will probably be fixed soon.)
Update
See Instantiating polymer element via dart code, Dynamically create polymer element for how to create a Polymer element dynamically.
Instead of main() use
#whenPolymerReady
init() {
#TestOn('content-shell') is ok but it's better to use #TestOn('browser') and then specify the concrete browser using the -p argument (-pchrome, -pdartium, -pfirefox, -pcontent-shell, ... see test README for a list of supported browsers). You can pass more than one -p at a time to run the tests at more than one browser.
You can also use a custom HTML page for the test
<!doctype html>
<!-- custom_html_test.html -->
<html>
<head>
<title>browser/polymer test</title>
<link rel="import" href="app_element.html">
<link rel="import" href="child_element.html">
<link rel="x-dart-test" href="html_test.dart">
<script src="packages/test/dart.js"></script>
</head>
<body>
<div id="granny">
<div>
<div id="parent">
<div>
<div id="child">child</div>
</div>
</div>
</div>
</div>
<app-element id="polymer-parent" unresolved>
<child-element id="polymer-child"></child-element>
</app-element>
</body>
</html>
where the file names needs to be the same as the Dart test file except .html as file extension and <link rel="x-dart-test" href="html_test.dart"> refers to your Dart test file. app-element, child-element are Polymer elements I used in my test (like your Foo)
Another update
I assume you need to use a custom HTML file (not tried without yet) for Polymer tests because otherwise there is no way to register an entry point for the transformer.
And then add the html file as entry point to the Polymer transformer section in pubspec.yaml
I have few questions on partials and overriding templates.
For that i used the following folder structure.
projectRoot
dust-core-0.6.0.min.js
jquery.js
test.html
partial.tl
main_without_override.tl
The content of partial.tl:
{+greeting} Hola {/greeting}
{+world} World {/world}
The content of main_without_override.tl:
{>partial/}
The content of test.html:
<!DOCTYPE html>
<html>
<head>
<script src="dust-core-0.6.0.min.js" type="text/javascript"></script>
<script src="jq.js" type="text/javascript"></script>
</head>
<body>
</body>
<script>
$.get('main_without_override.tl', function(){
console.log(arguments);
})
</script>
</html>
In the index.html when i try to get the main_without_override.tl its saying 404. But im sure that the file is there. The path that firebug is showing is correct.But browser says 404.
I want to know
How to get this main_without_override.tl
Apply templating for main_without_override.tl and render in the browser.
I searched in google most of the examples give only the syntax. Can somebody help me in rendering the main_without_override.tl template.
In order to compile templates on the client (which is probably not a really good idea), you need to include dust-full instead of dust-core. This is because dust-core does not include the Dust compiler.
The reason that compiling templates on the client is probably not a good idea is that Dust compiles to JavaScript and as #monshi mentioned, you can compile the templates and then serve them as JavaScript. It is possible to get .tl files through AJAX if you include dust-full, but it is a better idea to compile that template beforehand and then make a dynamic request for that .js file when you need.
You can include your dust template as a JavaScript file by using <script> tag, but you need to compile it first, which is explained here
Then add following templates (scripts) to test.html:
<script type="text/javascript" src="partial.js"></script>
<script type="text/javascript" src="main_without_override.js"></script>
And in you JavaScript render the template by dust.render method:
dust.render('main_without_override', your_json_object, function(err, out){
your_dom_element.innerHTML = out;
});
Related question:
how to use dustjs-linkedin as client side templating?
I have an ASP.Net MVC site that I want to render some custom HTML 5 canvasses in. I am getting a strange issue with the server serving up extra characters that are not in the source code.
In order to use an HTML 5 canvas in IE 8 you have to add the following tag in the html head:
<!--[if IE]><script src="../../Scripts/excanvas.js"></script><![endif]-->
For some reason this is served up as:
<!--[if IE]>IE]><script src="../../Scripts/excanvas.js"></scr<![endif]-->
Of course the duff markup causes the excanvas script to not be loaded by IE. I can't understand why the line gets garbled. I have the following doctype which is documented at http://www.w3schools.com/html5/tag_doctype.asp:
<!DOCTYPE html>
I'm not familiar with using HTML 5 or the new doctype so I'm suspicious of it. I'm also hosting on Apache with Mono so maybe that's what's garbling the line.
The page in question is at: http://openancestry.org/FamilyTree/Simpsons
Anyone seen this before or know why I cant use the "if IE" syntax?
UPDATE:
Well I'm pretty sure it's either Mono or Apache thats garbling the HTML so I've used the workaround below which adds a compatibility meta tag for IE8 and includes excanvas for any IE that predates IE9.
I'd still appreciate any answers on why the HTML gets garbled.
<% if (Request.Browser.Browser.Contains("IE") && float.Parse(Request.Browser.Version) < 9) { %>
<% if (float.Parse(Request.Browser.Version) > 7) { %>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<% } %>
<script type="text/javascript" src="../../Scripts/excanvas.js"></script>
<% } %>
Before I answer, I want to point out that you are missing type="text/javascript" in your example.
It is possible that the ASP.NET parser in Mono is mangling your comment. What version of Mono are you using (and what platform I suppose).
I just tried this on Mono 2.10 on Mac and did not have this problem.