Using GWT I am trying to create a row of images with text centered below them. There isn't much detail on GWT online so I'm having a difficult time. The image should also be a hyperlink.
You can achieve this layout using standard HTML and CSS. The most obvious solution is to use floating divs which contain an image and its text, with "text-align: center" rule applied to the div.
In GWT you can achieve this either through a Ui:Binder, or, if the images are dynamic, by creating a custom widget to represent each image with its text.
The alternative solution is to use a HorizontalPanel widget and add images and text inside, which is an equivalent of using a table to achieve your desired layout. This solution is not responsive, though.
Related
I met a limit with quite typical operation. Simple document:
http://i.stack.imgur.com/JNI9v.png
As you can see, image has right and bottom margins. But... CKEditor image dialogue provides VSpace and HSpace parameters which influence together to Top-Bottom or Left-Right twin values and adds unnecessary top and left margins:
http://i.stack.imgur.com/vo3oC.png
Of course, users won't use pure code to define this in style="..." attribute. So, how to allow users insert images as shown on the first image? Maybe exists CKEditor plugin or patch... and i just can't find it.
Another, maybe even a simpler way, to achieve what you want would be to use a predefined set of styles for images and use the "Styles" combo to apply one of preselected classes. This way the styles used for images could be more consistent.
To see what I mean you can check the "Standard" demo - click on an Image and in the "Styles" combo select "Object styles -> Styled image (right)"
I have a view designed for printing which includes a watermark, a transparent view which draws some text atop the other content.
When printing and using the Mac OS Save as PDF feature, the watermark text is selectable. Sometimes this interferes with selecting the other content, other times it's just distracting.
How can I make the text not selectable in the generated PDF?
I tried drawing the watermark behind the other content instead of in front. It didn't prevent selecting the watermark, but kept it out of the way of the other content. However, the table view rows occluded the watermark, which of course is worse.
Commenter asked for code, so here's some code which prepares the view:
// self.view is the print view
// watermark is an instance of WatermarkBackground, an NSView
if (watermark) {
watermark.frame = self.view.frame;
[self.view addSubview:watermark positioned:NSWindowAbove relativeTo:nil];
}
And the line in [WatermarkBackground drawRect] which does the drawing:
// _message is an NSString
// textAttributes returns a dictionary with a color and font
[_message drawWithRect:textRect
options:NSLineBreakByWordWrapping
attributes:[WatermarkBackground textAttributes]];
I meant to post this screenshot originally:
One option would be to create one or multiple CGPaths from your string and draw those into the PDF instead. One way to do so would be to use CTFontCreatePathForGlyph, but it's actually quite a lot of work to do this for entire strings, Core Text does help, but it's a pretty low-level framework.
If you're always drawing the same watermark, it would be much easier to create a static PDF in some vector graphics app and use that with CGPDFPageDraw etc. Illustrator has a "Convert to Paths" command for text objects.
As far as I know, there in no way to make text unselectable in PDF. Probably the best solution would be to use an image watermark instead.
However, if it is in front of text, it can make background text difficult to select. If it is behind everything, there will be same issues with obscuring it with tables. So, possibly a better plan of action would be not to try to make text unselectable, but rather make table background transparent. Then, use image watermark.
Taking an idea from omz, instead of using CGPaths and generating them on the fly, the simplest, most elegant solution would be this:
Create a vector watermark by typing the text in a vector editor and expanding text to create outlines.
Save it as SVG or PDF.
Then, put this new vector graphic on top as a watermark. It will not be selectable, will not obscure the view, and will not be obscured by tables.
I have an image with a large amount of text to the right in a textblock control. How can I get that text to wrap on the right and below the image?
The standard TextBlock and Image controls wouldn't work for you.
I think you'd either:
have to use HTML inside a WebBrowser (this is potentially very slow and ugly!)
have to use multiple TextBlock's and you'd have to measure the text in order to implement the wrapping out yourself.
It might be an idea to consider a different layout - is the text really free flowing and needs wrapped around the image? Or can the text be split up into header, caption, body, etc?
In flex, I have HBox in which I have loaded an image. I want to wrap text around it. Hence, there would be an image on right and text will be on left. After the image is cleared, text will be displayed 100% of the width.
How can I achieve it?
Although what you describe is easy to do with HTML. I didn't think the htmlText property in Flex supported anything more than simple HTML.
You'll want to look into the Text Layout Framework for Flex.
Edit: Despite my initial claim, the htmlText property actually does support the img tag with align property. It is documented here
i am pretty new to GWT,
i have an image that i have placed a text on top, i need the text to look as part of the image.
i have used the image widget and the HTML widget to position it on top of it, i need this text to change according the locale.
the problem that the text is selectable, so it does not look right.
1) is there any way to make the text un-selectable?
2) is there a better way to achieve that?
thanks
This is handled by the user-select attribute.
See: http://www.tek-tips.com/viewthread.cfm?qid=1184318&page=1