How to reference an image from a dart polymer component - path

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.

Related

Intellij says Vaadin flow lumo theme css variables not found

Then working on my new Vaadin 14 based application Intellij cannot find the built in lumo theme variables...
These variables exist at runtime in my browser, but where can I point Intellij to see them?
It looks like it's not possible, at the moment, unfortunately.
The problem is that starting from V14 styles you want to reference are packaged as.js files, but styles are written in .css. For example, if in V13 you could import them in your template like this Sizing and spacing:
<link rel="import" href="bower_components/vaadin-lumo-styles/sizing.html">
This would be the current way in V14 instead, which is a js file:
<script type=“module”>
import “#vaadin/vaadin-lumo-styles/sizing.js”;
</script>
So you can use those custom variables in your styles without problems, as long as you load an appropriate js module on your page (like this #JsModule(value="#vaadin/vaadin-lumo-styles/sizing.js") Lumo), but I haven't found a way (and not sure there is one) to make Intellij aware of them.
So the underlying problem is that you can't import a variable from a js file into a css file.

AngularDart Transformation/Deployments

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.

Loading dart file from embedded server

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.

CSS not being used by my view model

I have this code in an Index.cshtml file:
#{ViewBag.Title = "Home";}
<link href="Home.css" rel="stylesheet" type="text/css"/>
<img id="logo" src="~/Content/Images/Logo.png" />
This file is a view in my ASP.NET MVC4 application.
When I run the web application, I can see that the source code adds the appropriate HTML around this, and also adds a reference to the 'Content\Site.css' file.
However, neither the Site.css file nor my own Home.css CSS file appear to be used when running the application. First of all, any edits I make to Site.css aren't reflected when I view source when running the application, which is weird. I have saved everything and built the project before running it and checking out the source code through my browser.
Second of all, the CSS link to Home.css (which is in the same folder as my view) does not appear to be used. The HTML editor doesn't have a problem with the file, and so indicates that the path is valid - but when I click on Home.css in my the source code editor on my browser, I get a 404 error, saying that the file doesn't exist.
Any idea on what I am doing wrong here?
The actual image I am using here loads correctly.
the CSS link to Home.css (which is in the same folder
as my view) does not appear to be used.
The Views folder is restricted direct access to from the clients. So you should not be putting any CSS, javascript or images files inside it. They should reside in your ~/Content folder (or some other folder which is accessible from the clients). And then reference it like this:
<link href="~/Content/Home.css" rel="stylesheet" type="text/css"/>
As far as your first problem about ~/Content/Site.css is concerned, the stylesheet might be cached by the browser. Try clearing the cache. If you are running your application in Release mode and enabled Bundles, ASP.NET MVC 4 will automatically emit a cache response header so that the static resources included in the bundle get cached in the browser.
you also could use #url.content() helper method to convert your relative path to absolute. It's extremely useful when you will implementing website with multiple areas and also it's the common style to set path to the content in MVC so it's better does it this way
css belongs in the head - i can't stand .net
It also needs to NOT have the closing /> at the end of the tag - it messes things up. XHTML proper, but not everyone understands it. Unclose the link tag and try...
Use ~/ before your file statement for example:
<img src="~/images/team-image3.jpg" class="img-responsive" alt="">
instead of
<img src="images/team-image3.jpg" class="img-responsive" alt=""> etc...

Usage of FullCalendar mobile

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

Resources