I have a JSF 2 application which creates some SVG content. How can i embed it in the output HTML?
The generated SVG looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; stroke:black; text-rendering:auto; stroke-linecap:square; stroke-miterlimit:10; stroke-opacity:1; shape-rendering:auto; fill:black; stroke-dasharray:none; font-weight:normal; stroke-width:1; font-family:'Dialog'; font-style:normal; stroke-linejoin:miter; font-size:12; stroke-dashoffset:0; image-rendering:auto;" xmlns="http://www.w3.org/2000/svg">
<!--Generated by the Batik Graphics2D SVG Generator-->
<defs id="genericDefs"/>
<g/>
</svg>
I want this output directly in the rendered HTML page. I don't want to use the <object> tag, because i want to be able to manipulate the svg content on the client via javascript.
The result should look like this:
<div id="svgcontent">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 50" id="myDIVBG">
<defs>
[...]
</svg>
</div>
The above is correctly displayed in my browser, I just cant get the XML into the HTML without the XML string being escaped.
What I have always done is edit my SVG files with a tool like inkscape and include them at the appropriate spot with a ui:include tag. Like this:
<ui:include src="images/somedrawing.svg" />
The included file starts with an xml tag followed by an svg tag and the rest of the drawing. The size of the block on the page will be drawn according to the viewPort attributes of the svg tag.
This only works with HTML 5, so make sure your file starts with
<!DOCTYPE html>
I've never used JSF, but searching for "JSF disable escaping" turned up this:
<h:outputText value="???" escape="false" />
Related
I am looking into using an image as an SVG fill. I am currently using the following SVG markup:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="logo" x="0px" y="0px" viewBox="0 0 200 25" enable-background="new 0 0 0 0" xml:space="preserve">
<defs>
<pattern id="bg" patternUnits="userSpaceOnUse" width="300" height="25">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..." preserveAspectRatio="xMidYMid slice"></image>
</pattern>
</defs>
<g class="graphic">
<path d="..."></path>
</g>
(I have left some details out ("...") of which I am sure are not relevant to my issue.)
In CSS, I use the following code to append the pattern ID. Pls see below:
.default-header .site-name svg.logo .graphic {
fill:url(#bg);
}
I've already done some digging and found out that this technique (images as SVG background) isn't supported in FireFox and iOS Safari. Therefore I used the following "fall-back" method in CSS:
.default-header .site-name svg.logo .graphic {
fill:#ddd;
}
#supports (-webkit-appearance:none) {
.default-header .site-name svg.logo .graphic {
fill:url(#bg);
}
}
The above code works, EXCEPT for iOS 8/9's Safari. So my issue is mainly that I don't know how to target those non-supporting browsers, which I'm sure there are more of than I am currently testing. SO... I decided to use Modernizr to look for support, but I can't seeem to find an appropriate, representational way of checking if this SVG technique is supported. In other words, on this page: https://modernizr.com/download?setclasses, I can't find the browser feature appropriate for my issue.
I hope somebody knows what direction I could best look into or better yet, has some experience with this technique, which I still think is so awesome (if it works).
Thanks in advance guys!
I found a solution by using a different approach in markup. Instead of using defs and gs, I used the following markup to achieve the same effect:
<svg id="graphic" width="300" height="40">
<!-- Graphic: Styling (inline as FF fix) -->
<style> svg image { clip-path:url(#clipping); } </style>
<!-- Clip Path -->
<clipPath id="clipping">
<!-- this might as well be any type of path -->
<text id="graphicText" x="0" y="37">My Text</text>
</clipPath>
<!-- Image -->
<image id="graphicImage" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{img_url}" width="300" height="300" x="0" y="-120px"></image>
</svg>
I used CSS styling for the text itself.
Hope this helps someone!
I am trying to set up an integration using the SDK to create KB article records in CRM 2013, and so far haven't been able to figure out a good way to build the article xml. We want to use sharepoint as our document authoring tool , and then send those documents over to CRM. From the research I've done so far, I know that in order to create a new kb article I need to link it to a template. I created a very basic template with one section as a test to work with, then in a test app using the SDK I created a new KBArticle entity instance, set the necessary required fields and assigned the template to the new article. I tried building the xml for the ArticleXML attribute by starting with the StructureXML attribute of the template and filling in the content section with some test html content. I was able to create the kb article successfully and then load it up in CRM, but it doesn't look right yet. I also created a new kb article through the UI and then using the SDK I retrieved it and examined the ArticleXML attribute to compare with the one I'm trying to create programmatically.
Here's the basic structure of the ArticleXML for an article created in the UI:
<articledata>
<section id="0">
<content>
<![CDATA[<b>Article content located here</b>]]>
</content>
</section>
<section id="1">
<content>
<![CDATA[]]>
</content>
</section>
</articledata>
Now here is the StructureXML attribute value from the template I created:
<kbarticle>
<sections nextSectionId="1">
<section type="docprop" name="title"/>
<section type="docprop" name="number"/>
<section type="edit" id="0">
<![CDATA[Content]]>
<instructions>
<![CDATA[Place KB article content here]]>
/instructions>
</section>
</sections>
<stylesheet>
<article>
<style name="background-color" value="#ffffff"/>
<style name="font-family" value="verdana"/>
<style name="font-size" value="10pt"/>
</article>
<title>
<style name="font-family" value="verdana"/>
<style name="font-size" value="16pt"/>
</title>
<number>
<style name="color" value="#666666"/>
<style name="font-size" value="9pt"/>
</number>
<heading>
<style name="font-size" value="10pt"/>
<style name="font-weight" value="bold"/>
<style name="color" value="#000066"/>
<style name="border-bottom" value="1px solid #999999"/>
</heading>
</stylesheet>
</kbarticle>
That template XML is what I tried to use and assign to the new article, but obviously it doesn't look right when the article is viewed, the template content is there along with the content I added, its basically duplicated:
I did also see there is a FormatXML attribute on the template, which contains XSL to transform the XML, I tried using this but it produces HTML output that isn't what I want either. I'm struggling with how to get from the template to the ArticleXML that I need in order to create the new KB article. Any help with this is much appreciated!
I have the following problem, We have web content manager (WCM) running at remote host,
which is responsible for generating header and footer HTML files.
i.e. header.html, footer.html.
The HTML files are not properly formatted syntax wise,
WCM generated files have
Space character ( ) 🡢 it is not allowed in XHTML.
Non Closing break line (<br>) tags 🡢 it is invalid in XHTML.
So the WCM generated HTML pages might not be valid XHTML pages.
We are implementing some of our applications in JSF,
where we need to include the WCM generated header and footer files.
Can we include the non-formatted HTML files into our XHTML files?
commonTemplate.xhtml
<html>
<head>
..........;
</head>
<body>
<ui:include src="remote_host/header.html" />
<ui:insert name="commonBodyContent" />
<ui:include src="remote_host/footer.html" />
</body>
</html>
I guess it is related to this question: Include non-Facelet content in a Facelet template
I do not recommend to mix XHTML with HTML, but most probably the browsers will not have any issues with the mentioned characters, hence you might try to directly render the file contenty, e.g. by
<h:outputText value="#{yourBean.headerCode}" escape="false" />
Whereas YourBean.getHeaderCode() would readout the header file's content and return it as String. YourBean should be ApplicationScoped.
Faster and better would be to get the WCM generating valid XHTML.
In case user downloads particular type of file (let's say .doc), I should show one more item (i.e. possible action) in addition to Save and Open at unknownContentType Firefox dialog.
How can I do it?
Upd. Looking at FlashGot addon sources, I've extracted the following:
chrome.manifest
overlay chrome://mozapps/content/downloads/unknownContentType.xul chrome://flashgot/content/DMOverlayFx.xul
overlay chrome://global/content/nsHelperAppDlg.xul chrome://flashgot/content/DMOverlayMoz.xul
Why do they have two overlays? What second does? And, how to understand that user chosen my option?
DMOverlayFx.xul
<?xml version="1.0" encoding="UTF-8"?>
<overlay id="DMOverlayFF"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="Common.js"/>
<script type="application/x-javascript" src="DMOverlay.js"/>
<radiogroup id="mode" >
<vbox insertbefore="save" id="synoextcontainer" flex="1">
<hbox flex="1">
<radio id="synoext-dmradio" label="Download with Synology NAS" />
</hbox>
</vbox>
</radiogroup>
</overlay>
DMOverlayMoz.xul
<?xml version="1.0" encoding="UTF-8"?>
<overlay id="DMOverlayMoz"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="Common.js"/>
<script type="application/x-javascript" src="DMOverlay.js"/>
<radiogroup id="mode" >
<hbox position="3" >
<radio id="synoext-dmradio" label="Download with Synology NAS"/>
</hbox>
</radiogroup>
</overlay>
The important file to overlay is unknownContentType.xul. You can see an example here: http://code.google.com/p/firedownload/source/browse/chrome/content/unknownContentType-overlay.xul. This adds a new checkbox to the dialog, but you can use the same approach to add a new radio button. You'll want to include a new JS file in the overlay (like unknownContentType-overlay.js in this example) where you can override the standard processing of the radio buttons. Process your new option and hand off the other options to the existing implementation (look at helperApps.js to see how the standard processing works).
I'm having some trouble getting an SVG file set as a background of an element in an MVC 3 Site (Razor View Engine) and wondering if the ASP.Net Development Server (Cassini?) is properly serving the SVG file.
My SVG file is located at /img/plus.svg and here is it's contents
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="25px" height="25px" viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve">
<polygon fill="#231F20" points="25,8.621 16.38,8.621 16.38,0 8.621,0 8.621,8.621 0,8.621 0,16.379 8.621,16.379 8.621,25
16.38,25 16.38,16.379 25,16.379 "/>
</svg>
The css rule I'm using to set the background is this:
.plusIcon { background-image: url(#Url.Content("~/img/plus.svg")); }
I've also added this to my Web.Config <system.webServer><staticContent> section:
<!-- Proper svg serving. Required for svg webfonts on iPad -->
<remove fileExtension=".svg"/>
<remove fileExtension=".svgz"/>
<mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
<mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
When I navigate to the url /img/plus.svg the file is downloaded properly.
Is this just a Dev Server problem, should I try in IIS?
It turns out this is just a Cassini, ASP.Net Development Server problem. When uploaded to a proper IIS Site the SVG files are served properly.