I have created an embedded webserver on a sam3x(with rtos). Just for fun I thought it would be cool to see if I could get dart to run on it as well. My question is how does dartium ask for the .dart file?
I thought it would work similar to a js file. In my current implementation when I load a very basic index.html. I saved the dart.js from the bleeding edge server to the sd card. Debugging I can see the css, js, ico files being loaded but no dart file. Any thoughts would be great thanks.
<h1>Test_app</h1>
<p>Hello world from Dart!</p>
<div id="container">
<p id="text"></p>
</div>
<script type="application/dart" src="test_app.dart"></script>
<script src="dart.js"></script>
I eventually found the "navigator.webkitStartDart" js code on the dart site. That worked and I was able to get the dart scripts to load and run so I am enthused about that.
Related
We have an application written entirely dart/polymer with quite a few polymer components. We use the custom tags in out index.html and compile to dart with pub build. The compile to javascript creates index.html of 24K lines. Original index.html is 150. The application works perfectly.
However we would like to distribute the code to third party sites so that they also can use the components with custom tags. Ideally by just linking to an already compiled script and simple using our custom tags in their pages.
I know this is possible without polymer. Question is does polymer support this? Is it possible to compile a polymer app and keep to a minimum amount of changes in the html file?
To reduce the problem to an example:
We would like our customers to be able to do some thing like this, without the use of dart sdk:
<head>
<script src="what_ever_required.js"></script>
<script src="our_application.js"></script>
</head>
<body>
<our-custom-tag></our-customer-tag>
<p>What ever else content</p>
</body>
Regards
That's currently not supported.
Currently an application that used Dart code needs to be compiled to JS as a whole at once. There is no way to build parts of a Dart application and compose an application from them later.
With the upcoming DDC (Dart Development Compiler) there might be a way to accomplish that. An experimental approach is https://pub.dartlang.org/packages/polymerize
I am trying to build a react native app for production on iOS device.
In this project I am loading a local html page. Currently I am using the WebView component.
<WebView source={{require('./webapp/index.html')}}/>
And below is webapp/index.html.
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
</head>
<body>
<h1>Hello World</h1>
<script src="js/script.js" type="text/javascript">
</script>
</body>
</html>
I am building for production by following the steps listed here: https://facebook.github.io/react-native/docs/running-on-device-ios.html#building-your-app-for-production (v0.34)
How can I make sure that index.html is able to load js/script.js?
Most likely we need own server.I was looking for this also and I haven't found any relevant answer to this question too.
I have react-native-webview-bridge hereit seems that now is right inside react-native core but i doubt we can use allowFileAccessFromFileURLs... i will update this answer if i find out something else
I personally use a tool like inliner to insert all the file contents (you might need the dot in your path strings) in my html automatically and then use the html string in my app.
I import my html string in a way that works well for ios and android by implementing this with the current versions of the libraries mentioned.
I am building a client/server app in Dart using Angular for the front-end and Shelf on the backend. When I do a pub build it generates the javascript for the Dart files as expected but is does not replace the dart references in my HTML files. So in my index.html I have the following script reference:
<script type="application/dart" src="main.dart"></script>
This makes my application not load correctly. If I manually change it to
<script src="main.dart.js"></script>
My application works as expected. My question is, is there a way to configure my pub build to do this automatically? Or are dart files references not supposed to be replaced with JS references? If so, how do I build a basic server?
I know this produces an error message in the browser console but never experienced any problems because of this.
I haven't used it myself yet but I think this transformer https://pub.dartlang.org/packages/dart_to_js_script_rewriter does what you want.
I have a Dart polymer component referring to an image. The component is in the path component/logo-header.html
<polymer-element name="logo-header">
<template>
<style>
</style>
<img src="../image/youtube.png" style="width: 109px;height:47px;float:left" />
</template>
<script type="application/dart" src="LogoHeader.dart"></script>
</polymer-element>
This code works fine for when I Build the project and use the built application. It does NOT work if I just run the application.
How can I refer to the image so that the URL is correct for the built version and the run from the debugger?
My problem was that the URL is in the img src, when this is run from the dart editor the relative path is different to when this is run from the build html. (When I say run, I mean open the html page).
Putting the URL into the style tag fixed the problem, this made the relative URL to be the same when it is run from dart editor or run from the build html. Now the image directory is located in the web directory so its web/image/youtube.png.
<polymer-element name="logo-header">
<template>
<style>
.youtube {
background-image:url('image/youtube.png');
}
</style>
<div class="youtube" style="width: 109px;height:47px;float:left"></div>
</template>
<script type="application/dart" src="LogoHeader.dart"></script>
</polymer-element>
This fixed the problem.
You can reference your image like this:
/packages/<pkg_name>/<path>
This is based on How to refer to assets
This should work when you put the image in the [package]/asset/image (image subdir is optional of course) directory and use the path assets/image/youtube.png. This may fail when run from DartEditor though because DartEditor IMHO still doesn't support the asset directory.
see also Assets and Transformers
If you use a path relative to your web directory it should also work.
To provide a concrete example it's necessary to know in which directory your logo-header element is stored.
The problem was specifically that when the Dart application was run from the Dart editor (IDE) the path to the image was different to the path to the image when running the build HTML (the build product).
Perhaps this is a bug or ... not a bug, I don't know. Its annoying that a path should have a different path when running from IDE or running from build product. The fix was to use CSS, the fix is documented in the question now.
Has anyone used the FullCalendar-mobile plugin? I am trying to use this in a jQuery Mobile app bundled with Phonegap. There are tons of js and css files in the src folder but I can't seem to figure out which one to use. Linking all of them to my html page didn't yield any results.
Pardon the very noob question. Kinda new to jQuery, HTML5 & CSS. Would greatly appreciate the help.
Thanks!
I'm just going through this myself. My understanding is that you'll need to do the following:
Download the files from
https://github.com/JordanReiter/fullcalendar-mobile using either git
or the 'download as zip' button.
Navigate to your downloaded directory
Type make zip, as per the instruction from the link above. (You'll need java installed apparently)
In the dist directory created by the above process you should see the fullcalendar directory containing the js and css files you need.
Copy those to your project and link appropriately. You are now officially good to go
I have the same problem with the css files. Until now I'm not able to combine the style sheets delivered with jquery and jquery mobile for the desired result:
http://thomkerle.blogspot.ch/2012/07/problems-with-jquerys-fullcalendar-and.html
Note:
for basic usage you can just take the latest fullcalendar version! There will be some events that are not supported (but basically you can press on a event and navigate through the calendar).
See also:
http://forum.primefaces.org/viewtopic.php?f=8&t=23763
Looks like you want to use the _loader.js file
just keep the structure of the directories that exists
I am working on this right now ill post updates as a reference. The documentation states:
<link rel='stylesheet' type='text/css' href='fullcalendar.css' />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='fullcalendar.min.js'></script>
<script type='text/javascript' src='ui.core.js'></script>
<script type='text/javascript' src='ui.draggable.js'></script>
<script type='text/javascript' src='ui.resizable.js'></script>
None of these files are on github the last 3 are clearly from jquery UI