I'm starting in web2py and I need to link my static files in my view files.
I'm trying to use URL() helper to make the links but I doesn't work properly...
My application is called red, my controller default and my function index.
My view is called index.html and is inside default folder, when I go to the page I see the view correctly but my URL are all wrong...
So far I tryed:
URL('static', 'css/bootstrap.min.css')
which gave back: "/static/css/bootstartp.css"
URL(a=request.application, args='static/css/bootstrap.css')
which gave: "/default/red/static/css/bootstrap.min.css"
URL(r=request, arg='static/css/bootstrap.min.css')
which gave: "/index/static/css/bootstrap.min.css"
URL('static/css/bootstrap.min.css')
which gave: "/default/static/css/bootstrap.min.css"
URL(a=request.application, c='static/css/bootstrap.min.css', f='')
which gave: "/red/red/static/css/bootstrap.min.css"
I may have tried some more but with no success...
My index function only returns dict().
And my router:
routers = dict(
# base router
BASE = dict(
applications = ['red', 'admin'],
default_application = 'red',
default_controller = 'default',
default_function = 'index',
map_static = True
)
)
I think it's also important to say I'm testing it on google app engine.
I want to get "/red/static/css/bootstrap.min.css".
I hope you want to link the css files in your view.
You can do this is tow ways.
1.In controller file (inside index():)
response.files.append(URL(request.application,'static/css','bootstrap.min.css'))
the same command you can use in view (index.html) also:
{{response.files.append(URL(request.application,'static/css','bootstrap.min.css'))}}
2.in the view (index.html) you can mention the normal css linking.
<LINK rel="stylesheet" type="text/css" href="{{=URL('static/css','bootstrap.min.css')}}">
if you want to link this file for the entire application. Then mention the above line in the layout.html page.
To get "/red/static/css/bootstrap.min.css":
URL('red/static', 'css/bootstrap.min.css')
I found the solution.
URL('static', 'css/bootstrap.min.css')
This line is correct, however I needed to turn map_static off in the routers file.
Related
TLDR; In a Javascript file for my Firefox extension, how can I load the contents of other files from inside my extension (such as an HTML view & CSS stylesheet) for use on the current web-page?
I'm working on my first Firefox extension, for personal use.
So I setup my manifest.json to load /script/panel.js when any page of the site loads.
In panel.js, I would like to do something like:
const html = MyExtension.getFileContent('/view/panel.html');
const node = document.createElement('div');
node.innerText = html;
document.body.appendChild(node);
But I can't find anything like MyExtension.getFileContent(). All I've been able to find is how to add sidebar (through manifest?) & browser action for the toolbar at the top of the browser & other non-programmatic ways of exposing files that are inside my extension.
Then in /view/panel.html, Ideally, I'd like to also reference /style/panel.css which is also found inside my extension's root directory, such as with a <link tag.
Did you set web_accessible_resources in your manifest.json? It is required to make resources in your extension readable from webpages.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
Here's my Dropwizard (0.8.5) app's basic project structure:
myapp/
src/main/groovy/
org/example/myapp/
MyApp.groovy
<lots of other packages/classes>
controllers/
site/
SiteController.groovy
dashboard/
DashboardController.groovy
org/example/myapp/views
site/
SiteView.groovy
dashboard/
DashboardView.groovy
src/main/resources/
assets/
images/
mylogo.png
org/example/myapp/views/
site/
header.ftl
index.ftl
dashboard/
dashboard.ftl
Where the gist of each of those classes is:
class MyApp extends Application<MyAppConfiguration> {
#Override
void initialize(Bootstrap<MyAppConfiguration> bootstrap) {
bootstrap.addBundle(new AssetsBundle('/assets/images', '/images', null, 'images'))
bootstrap.addBundle(new ViewBundle())
}
// etc...
}
#Path('/')
#Produces('text/html')
class SiteController {
#GET
SiteView homepage() {
new SiteView()
}
}
#Path('/app/dashboard')
#Produces('text/html')
class DashboardController {
#GET
DashboardView dashboard() {
new DashboardView()
}
}
header.ftl (dropwizard-views-freemarker)
=========================================
<!DOCTYPE html>
<html>
<head> <!-- lots of stuff omitted here for brevity --> </head>
<body>
<div class="well">
<img src="images/mylogo.png" />
<br/>This is the header!
</div>
index.ftl
=========
<#include "header.ftl">
<p>
Homepage!
</p>
</body>
</html>
dashboard.ftl
=============
<#include "../site/header.ftl">
<p>
Dashboard!
</p>
</body>
</html>
So you can see I'm using DW as an actual web app/UI, and that I'm utilizing both Dropwizard Views (Freemarker binding) as well as Dropwizard Assets.
When I run this, the app starts up just fine and I am able to visit both my homepage (served from / which maps to index.ftl) as well as my dashboard page (served from /app/dashboard which maps to dashboard.ftl).
The problem is that both pages use the header.ftl, which pulls in my assets/images/mylogo.png, but only my homepage actually renders the logo. On my dashboard page, I do see the "This is the header!" message, so I know the header is being resolved and included with my dashboard template. But, I get a failed-to-load-image "X" icon, and when I open my browser's dev tools I see that I'm getting HTTP 404s on the image.
So it seems that DW is unable to find my image asset from a view/URL not directly living under root (/).
On the Dropwizard Assets page (link provided above) there's a peculiar warning:
Either your application or your static assets can be served from the root path, but not both. The latter is useful when using Dropwizard to back a Javascript application. To enable it, move your application to a sub-URL.
I don't entirely understand what this means, but suspect it is the main culprit here. Either way, anyone see where I'm going awry, and what I can do (exact steps!) to fix this?
You need to add / before your URI:
<img src="/images/mylogo.png" />
this can be explained from the examples in RFC 3986 URI Generic Syntax, I pulled out the relevant examples.
5.4. Reference Resolution Examples
Within a representation with a well defined base URI of
http://a/b/c/d;p?q
a relative reference is transformed to its target URI as follows.
5.4.1. Normal Examples
"g" = "http://a/b/c/g"
"g/" = "http://a/b/c/g/"
"/g" = "http://a/g"
"../g" = "http://a/b/g"
"../../g" = "http://a/g"
Putting in the preceding / makes the URI begin from the domain name regardless of the referring URI, which allows you to do precisely what you want.
Load both pages up (the one that works, and the one that doesn't), and use Firebug or Chrome dev tools to inspect the logo element. What path is it trying to get to? I suspect on your index page it's going to http://some.thing/images/mylogo.png whereas on your dashboard it's trying to load http://some.thing/app/dashboard/images/mylogo.png
Try putting an additional / in front of the path in your template, and it should resolve from anywhere.
(Originally answered here: Dropwizard-user Google Group)
I am building Firefox extension, that creates single XMPP chat connection, that can be accessed from all tabs and windows, so I figured, that only way to to this, is to create connection in javascript module and include it on every browser window. Correct me if I am wrong...
EDIT: I am building traditional extension with xul overlays, not using sdk, and talking about those modules: https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules
So I copied Strophe.js into js module. Strophe.js uses code like this:
/*_Private_ function that creates a dummy XML DOM document to serve as
* an element and text node generator.
*/
[---]
if (document.implementation.createDocument === undefined) {
doc = this._getIEXmlDom();
doc.appendChild(doc.createElement('strophe'));
} else {
doc = document.implementation
.createDocument('jabber:client', 'strophe', null);
}
and later uses doc.createElement() to create xml(or html?) nodes.
All worked fine, but in module I got error "Error: ReferenceError: document is not defined".
How to get around this?
(Larger piece of exact code: http://pastebin.com/R64gYiKC )
Use the hiddenDOMwindow
Cu.import("resource://gre/modules/Services.jsm");
var doc = Services.appShell.hiddenDOMWindow.document;
It sounds like you might not be correctly attaching your content script to the worker page. Make sure that you're using something like tabs.attach() to attach one or more content scripts to the worker page (see documentation here).
Otherwise you may need to wait for the DOM to load, waiting for the entire page to load
window.onload = function ()
{
Javascript code goes here
}
Should take at least diagnose that issue (even if the above isn't the best method to use in production). But if I had to wager, I'd say that you're not attaching the content script.
Im currently in the process of porting a completely static site using trigger io to convert it to an app. The site comprises of lots of folders in folders with index.html files in them to make the urls nice. The site uses absolute urls to include stylesheets, javascripts, on a tags, and images in every page.
I would like to set a root directory for trigger.io, but I cannot find any way of doing this. Is this even possible?
Cheers,
Rich
Edit:
Example:
<script src="/json.js" type="text/javascript"></script>
<img alt="Bar_hat" class="bar_hat" src="/assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
The script tag is in all of the files.
The img tag is used in 90% of the files. These are obviously not being found from within the app.
Copy your "assests" directory to the "src" directory and use without a "slash" before assets -
<img alt="Bar_hat" class="bar_hat" src="assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
Also, if you want to access via javascript you must use this pattern:
forge.file.getUrl("assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg",
function(file) {
// If using zepto or jquery
$("#whateverImage").attr("src", file);
},
function(err) {
// error
}
);
Edit: getUrl vs getLocal
I have a WebForms app that I'm converting to MVC, but for now running legacy stuff side-by-side.
For some reason, the ScriptManager left to it's own devices tries to load the following files from a very strange (and non-existent) location:
<script src="Scripts/WebForms/MsAjax/MicrosoftAjax.js" type="text/javascript"></script>
...
<script src="Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js" type="text/javascript"></script>
I can't find the setting of that location, and googling "Scripts/WebForms/MsAjax" brings back nothing.
Changing the (obsolete) ScriptPath property on the ScriptManager does nothing to help with these two scripts.
Trying to override the Path location like the following also does not work (it just tries to load both scripts)
Scripts.Add(new ScriptReference { Name = "MicrosoftAjax.js", Path = ContextUtil.MapApplicationPath("~/My/Script/Location/MicrosoftAjax.4.0.js") });
Scripts.Add(new ScriptReference { Name = "MicrosoftAjaxWebForms.js", Path = ContextUtil.MapApplicationPath("~/Shared/Scripts/Legacy/MicrosoftAjax/MicrosoftAjaxWebForms.4.0.js") });
What I can't understand is
Why is it not loading the scripts by default from a Embedded Resource?
Where is this strange path coming from?
Why won't it accept my overridden script paths?
Can anyone help?