I'm using the ThtPanel component from the HTML Component library (version 4.5) to create icons in my application.
On Windows everything looks great, but on Android the same icons are rendered incorrectly.
For example if I set the HTML property of the ThtPanel to something like this:
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:30;stroke:rgb(0,0,0)" />
</svg>
The output on Windows is this:
But on Android it looks like this:
This problem makes all my icons on Android look low quality. I tried messing with the properties on the ThtPanel, but couldn't get it to work.
Without being able to reproduce this I'm pretty sure this is just a misunderstanding and happens often with markup, especially in the context of web documents: if you don't define it then you cannot have expectations.
While the average experience must have reached you that different web browsers slightly differ in what and how they render websites, the culprit is that they have different engines to interpret your markup and then to render the optics out of it. However, it is quickly forgotten that web browsers come with configurations and these can change - either on purpose (every font by default should be a serif) or with slightly unexpected results (because websites always expect that the default font is a sans-serif).
Long story short: your SVG rectangle nowhere defines how edges at the end of strokes should be drawn. As per SVG 13.5.4. Drawing caps at the ends of strokes: the ‘stroke-linecap’ property you should define
stroke-linecap: square
...while you already defined stroke and stroke-width.
Try that first and load it in different browsers/engines - I'm pretty sure it makes a difference. Note: Windows is neither a web browser, nor a rendering engine. And so is Android. They can can different web browsers/engines.
Related
From this question (Hyperlink inside label field in Vaadin 12) I was able to use Vaadin's HTML component to create custom html code (and it worked fine, including putting in ahref links etc.)
However, Vaadin provides the "Anchor" component which appears to be the far more powerful (and potentially more secure) way of creating links that can be used to navigate to either other classes I built or to external website (or even to download dynamically generated data in a streaming fashion).
However, what if I want to have both normal "label-like" text and an achor link all appear in a single paragraph? For example, in "normal html", I could just do this:
<p>
This is my normal text.
Download <a href="/resources/excelTemplate.xlsx" download> this Excel file</a>
and follow the instructions therein
</p>
and it would create the link somewhere within my <p>...</p> paragraph. How can I do this in Vaadin with the Anchor object? The best I came up with thus far is to use Horizontal Layout and then add a label, an achor, and then another label -- but that is really really ugly and doesn't technically have the same effect (it won't wrap properly.) The other option is to NOT use "Anchor" but instead just use "HTML" component and just create ahref links everywhere, but that seems a tiny big ugly too (though I suppose it's an ok workaround.). (I'm assuming I can call any UI I build by sticking the url links in the ahref calls....) Thoughts on the "right Java Vaadin" way to do this?
Paragraph p = new Paragraph("para");
Anchor a = new Anchor("go", "www.go.com");
p.add(a);
p.addClickListener(e-> UI.getCurrent().navigate(a.getHref()));
Vaadin 10+ offers you (atleast) three ways to handle this kind of case. You mentioned two of the..
Make composition of components in Java. Instead of VerticalLayout you could wrap the content in Div and using Text component also in Div instead of Label. You can make this kind of custom component by extending Composite.
The second alternative is to use HTML component as you mentioned.
The third alternative is to create custom html polymer template and connect to it with PolymerTemplate class. That will result in custom component that behaves like the custom component of the first option. It is just different way of implementation.
Which one of the three is a correct way. From framework perspective all of them. Which one is correct for you depends on your preference and application.
[Stackoverflow disallows the word help in the title. Hence the h3lp]
We are in the proces of moving our code from Orbeon 3.9 to Orbeon 4.x. One of the many things that changed is the behavior for display of xforms:alert and xforms:help. Example code:
<xforms:input ref="#code">
<xforms:alert ref="$resources/required-field"/>
<xforms:help ref="$helptext"/>
</xforms:input>
In Orbeon 3.9 the alert is displayed as a red img with a white exclamation mark that has the text as tooltip, only if the binding fails. The help is displayed as a blue-ish image with a question that activated a tiny pseudo window containing the (potentially large) help text.
In Orbeon 4.7 the alert text is displayed as-is, no image and no condition based on binding. This interferes with a carefully designed interface as it takes up a lot more space. The help text is not displayed at all because .xforms-help has display: none;. Overriding that doesn't work because the text would then just be displayed inline.
I could not find documentation for these changes. Does anyone know the rationale and how to make "alert" and "help" useful yet again?
There are two changes with Orbeon Forms 4.x which might be relevant to this:
The HTML layout of elements has changed a bit. This means existing CSS might have to be adapted. You can check this by comparing the HTML produced by 3.9 vs. 4.x for a given page. With 4.x, all form elements, for example, are wrapped within a <span> or <div> element.
Form Runner uses Twitter Bootstrap as a CSS library. But the Bootstrap CSS files are also included for non-Form Runner pages.
This said, "red icon" alerts should still work, see for example the good old Espresso Order or Bookcast demos.
If you see alerts inline and unconditionally, it means that somehow the proper CSS doesn't apply, either because of the HTML layout change mentioned above, or because some CSS files are missing.
Look at this post : http://blog.orbeon.com/2014/01/improving-how-we-show-help-messages.html
and this : http://discuss.orbeon.com/how-to-use-the-quot-new-quot-xforms-help-in-4-5-td4658348.html
julien
I've been doing a bit of research on the ePub 3 format as I am planning on archiving some older magazine and newspaper scans and want to craft some ePubs as a learning exercise. I also want to understand this stuff in order to help develop a JavaScript ePub reader.
I have a magazine that includes a 3-page poster in it, but I can't get the spine(s) for the poster to render properly.
I've tried using properties on the spines:
<itemref idref="034" properties="rendition:page-spread-center" />
<itemref idref="035" properties="rendition:page-spread-center" />
But, iBooks on OS X and iPad display this as regular pages in-line with the rest of them. For example, pages 34 and 35 should be displayed as individual pages, however they are being rendered with 34 on the right of 33 and 35 on the left of 36.
Am I misunderstanding what the page-spread-* is supposed to do?
I also tried using page-spread-left for both of them, to no avail. Ideally, I'd have the poster broken up into 3 pages (e.g. 034-a, 034-b, 034-c) and have the reader render a 3-page spread (page-spread-left, page-spread-center, page-spread-right), but I don't believe that is how the IDPF spec is defined. That is why I'm trying to figure out how to just display a single spine in the middle of a spread layout. (I've also tried removing the spread meta property depicted below).
Here is some additional information regarding my custom ePub file:
Package (OPF):
<package prefix="rendition: http://www.idpf.org/vocab/rendition/#"
...
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:spread">auto</meta>
com.apple.ibooks.display-options.xml:
<display_options>
<platform name="*">
<option name="fixed-layout">true</option>
</platform>
</display_options>
I am definitely no expert here, only started coding recently.
But I feel like a 3 page spread is unlikely but I have a suggestion:
Use a program, like Photo Standard(dont know if that is a popular one people might know) to cut the middle page of the spread in half
and then add the halves to the the right and the left pages of the spread, respectively to their own place.
So it is like only two pages to the e-reader, but visually it is three.
Maybe it will work, not really sure if that is really related to what you are asking.
Hope it helps.
When linking-out text, I save the graphics as Tiny-SVG, and embed the text-passage in a tspan element and wrap this tspan using the <a xlink:href="http://....">. It works but I would like to know more about alternatives, and pros/cons compared to using other elements such as groups: g.
Questions
Is there a quick way to do this directly in Adobe Illustrator CS 4+ ?
What do you use to make links? (markup-wise, that is)
Reference Code
<text font-size="6">created by
<a xlink:href="https://github.com/..."><tspan>{APPNAME}</tspan></a>
{APPVERSION}
</text>
Links
W3C: 17.2 Links out of SVG content: the ‘a’ element
Don't know
You can wrap any rendering svg elements in an <a> element, e.g if you want you can wrap the whole <text> element in it, or even include some shapes. It depends on what you want to make clickable.
I recently tried to do this in Illustrator too, and found a good answer on the Graphic Design Stack Exchange forum. However, Illustrator seems a little buggy to me (check my comment there) when doing this. Further, I found that if I open and edit an existing svg in Illustrator, it didn't preserve the links when it saved out the revision.
Is there a way to get struts 2 (using tiles) to build the whole page before sending it to the browser? I don't want the page to be build "progressively" in the browser one part at a time.
The main problem I'm trying to solve is that internet explorer 7 flashes/blinks the page even if only some of the content changes (firefox does this much more smoothly).
So that if I have a page with:
HEADER
some content
FOOTER
And the "some content" area only changes between page loads, the FOOTER part still flashes the white background before filling it with the background color of the footer. I tought that maybe by getting struts to send the complete page it would load fast enough to eliminate the "blinking".
Now the FOOTER comes from the server a little bit later than the parts before it and so it flashes (in internet explorer, firefox displays the page smoothly).
NB: this is an important requirement for the site, and using ajax to load the middle content is out (as are frames or other "hacks"). The site is built using CSS and not a table layout, maybe I will have to use a table layout to get it to work...
About using tiles flush parameter:
I tried that and it doesn't work as I need. I would need a flush-parameter for the whole page. I have tried the normal jsp page directive "autoFlush=false" but it didn't work. I set this directive on my main template page (and not in the tiles).
Here is an example from the main template, which uses header, body and footer templates. With the Thread.sleep() I added the problem is easy to spot. The footer renders 2 secs later than the rest of the page.
<body>
<div id="container">
<t:insertAttribute name="header" flush="false" />
<div id="content"><t:insertAttribute name="body" flush="false"/></div>
<div class="clear"></div>
<% Thread.sleep(2000); %>
<t:insertAttribute name="footer" flush="false" />
</div>
</body>
UPDATE
Thanks for the comments. The requirement is actually almost reasonable as this isn't a normal web page, think embedded.
But apparently there is no way of configuring IE to start rendering after some delay (like firefox has a configurable delay of some 100ms)?
I tried to intercept the TilesResult but the method doExecute is run before the whole content is apparently evaluated, so the method has already exited before the jsp is evaluated (my Thread.sleep() test). I was wondering how I could render the whole response to a string and then output that all at once to the browser.
I know that this isn't foolproof and network delays etc may factor in this, but if I could get the response to output all at once and maybe use a table based layout (IE possibly renders the table only after the table closes) this could work reasonably.
Or then try to get this switched to firefox or maybe forget all about this little glitch...
UPDATE 2
This started to bother me so I did some investigation.
If I had a plain jsp page (no tiles) the buffering works (with the buffer attribute), so that if I had my Thread.sleep() there the whole page rendered after two seconds if the page size was below the buffer size.
But if I used tiles in the page (as in the example above) I couldn't get the page to render at the same time (I even included the page directive in all my tiles-templates/"components", no help). So tiles probably flushes the response somewhere?
Furthermore, the "problematic tiles" was my body-part, which contained a struts:form tag. I replaced it with a normal form-tag and it worked as I wanted...
UPDATE 3
Ok, nobody seems to know the inner workings of tiles or struts tags...
No big problem as this is a very specific case and requirement.
I worked around it by using apache as a proxt in front of the application, and using apache's proxy configuration options to specify a large buffer.
I'll mark this as answered.
You can send page data all at once at the server end if you like (and many frameworks do that anyway for convenience) but the reality of networking is that it won't all arrive at once and the browser will render it as packets arrive. And this is a good thing for responsiveness, even if you* aesthetically would like the page to display all at once.
You can reduce the lag as much as possible by simplifying markup and using deflate compression to keep the payload size down, and that's a worthwhile thing to do in general. Plus you can make sure you're not hitting a Flash Of Unstyled Content. But you can't control when the browser chooses to render, short of doing it all in JavaScript with all the downsides that entails (and even then, the browser might redraw slowly).
(* - or your client/boss, if that's who has come up with this "important requirement" that your site somehow work differently to every other page on the web.)
Can you use the "flush" attribute on the tiles components?
<tiles:insertAttribute name="body" flush="false"/>
In addition if the output buffer gets too big, it will flush anyway. Try increasing the buffer size?
<%# page language="java" buffer="500kb" autoFlush="false" %>