I have list of articles in html.In every article i have multiple image tags like added below
<img alt="quick-start" class="alignnone size-full wp-image-16745" height="224" sizes="(max-width: 474px) 100vw, 474px" src="http://localhost/myfolder/my-content/uploads/2016/11/Quick-start.jpg" srcset="http://localhost/myfolder/my-content/uploads/2016/11/Quick-start.jpg 474w, http://localhost/myfolder/my-content/uploads/2016/11/Quick-start-300x142.jpg 300w" style="box-sizing: border-box; margin-top: 10px; margin-bottom: 10px;" width="474" />
Problem Statement:
I want to replace urls of image present in src, srcset i-e http://localhost/myfolder/my-content/uploads/2016/11/Quick-start.jpg to some other url.
whats the best approach to do that. I am thinking about functional programming in java
Yes this can be done using java.But it will be easy if you manipulate using java script framework like jquery.
$(".image2").attr("src","image1.jpg");
I'm starting work on a little HTML5 canvas game, and I was thinking GWT would be a great idea. I'd like to use Java, because 1. I have a lot of experience with it and 2. I would like to do it in an OO language. However, I read something about it being a pain to manage the HTML and CSS through GWT. So I was wondering, could I set up the canvas and style it using plain HTML+CSS, but then do everything else in GWT?
You don't need to use GWT to generate HTML or CSS.
I mostly use GWT with Ui:Binder, where the top-level element is HTMLPanel. Inside it, as much as possible is plain HTML and CSS. I try to keep project-level CSS in an outside .css file to ensure consistency, but you can pull as much CSS as necessary inside the Ui:Binder template.
Example of a Ui:Binder template, where I mix widgets (HTMLPanel, FlowPanel) with pure HTML. I use GWT widgets when I need some convenient functionality that they already provide, but you can deal with them as elements as well.
<ui:style>
.empty {
width: 100%;
line-height: 96px;
font-size: 16px;
text-align: center;
}
</ui:style>
<g:HTMLPanel>
<h2 class="sides">My Favorites</h2>
<div ui:field="emptyLabel" class="{style.empty}" >You have no favorites at this time.</>
<g:FlowPanel ui:field="container" addStyleNames="row flex-wrap" />
</g:HTMLPanel>
I am really stuck on redesigning the SplitLayoutPanel draggers of gwt. My main concern is to change their color.
I already tried this solution: Solution but I could not get it to work.
I use GWT 2.6 as Eclipse Plugin with the UIBinder.
After a few hours of searching and trying i finally found the answer (wich is of course quite similar to the mentioned one).
I forgot to add the
.gwt-SplitLayoutPanel{}
to the css.
Here is my code snipped:
<!DOCTYPE ui:UiBinder SYSTEM 'http://dl.google.com/gwt/DTD/xhtml.ent'>
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
<ui:style>
#external .gwt-SplitLayoutPanel-HDragger;
#external .gwt-SplitLayoutPanel-VDragger;
.menuBar {
font-size: 40px;
font-color:red;
font-weight: bold;
background-color: black;
}
.gwt-SplitLayoutPanel {
}
.gwt-SplitLayoutPanel-VDragger {
background: #228899 url(img/Hdragger.png) center center no-repeat;
cursor: row-resize;
}
.gwt-SplitLayoutPanel-HDragger {
background: #228899 url(img/Vdragger.png) center center no-repeat;
cursor: col-resize;
}
</ui:style>
<g:DockLayoutPanel unit="EM">
<g:north size="3">
<!-- ...some Widget-->
</g:north>
<g:center>
<g:SplitLayoutPanel styleName='{style.gwt-SplitLayoutPanel}' ui:field="splitLayoutPanel">
<g:west size="270">
<!-- ...some Widget-->
</g:west>
...
Don't forget the following two lines, without these it dosnt work!
#external .gwt-SplitLayoutPanel-HDragger;
#external .gwt-SplitLayoutPanel-VDragger;
The following Part is to display the draggers, it is optional:
url(img/Vdragger.png) center center no-repeat;
Im new at vaadin 7 and have a little issue with formatting.
I have spend a few hours but no luck.
I have:
2 Form layouts on my vertical Layout.
2 Labels on each form layout.
Better check the screenshot
I want format label test as on the right part of screenshot.
Can you please advice or share thoughts or ideas.
I'm not 100% certain if I get what you're trying to do, but you might be able to achieve this through custom CSS.
It is hard to write out the exact CSS since it would require seeing the HTML generated by Vaadin and testing it with that, but it would be something like this for the labels:
.padded-form-layout v-caption:first-child {
float: left;
padding-left: 30px; /* set desired padding used for each label */
}
Of course, you'll need something similar for the values as well.
Above, padded-form-layout is the class name you define for layouts that need this look. In Java:
formLayout.setStyleName("padded-form-layout");
To figure out what the CSS modifications needed are I recommend you open the page in browser (Chrome or Firefox will do) and use the dev tools to directly modify the CSS to figure out what rules are needed. I usually do this by simply typing a style tag to the element, something like this (in this example, style="XXXXX" would be added manually. This is possible at least with Chrome's developer tools):
<div class="v-formlayout v-layout v-widget v-has-width" style="width: 100%;">
<!-- ... -->
<td class="v-formlayout-captioncell">
<div class="v-caption v-caption-hasdescription">
<span id="gwt-uid-21" for="gwt-uid-22" style="XXXXX">First name:</span>
<span class="v-required-field-indicator" aria-hidden="true">*</span>
</div>
</td>
<!-- ... -->
</div>
To be able to use the CSS, you'll need to either add it to your theme somehow and compile it (see Vaadin documentation about themes), or by using the #StyleSheet annotation
I use "paragraph reference component" to include pages/subpages. Why does this component show empty tiles (see the attached pic for Geometrixx)? Can it be configured sothat empty tiles not shows?
Reference component displays contents of the external paragraph system (ie. parsys from a different page). Its browse dialog consists of page tree on the left and tiles presenting paragraph systems belonging to the selected page on the right.
Attached picture presents dialog with Contact page selected. Apparently, this page contains 3 paragraph systems. The first one is probably the main parsys, containing text component filled with the contact information. I think there are two reasons why the second and the third tiles are blank:
they are presenting contents of the empty paragraph systems,
they are referencing Inheritance Paragraph Systems which is not compatible with the Reference component.
I don't think there is an out-of-the-box configuration allowing to hide such empty parsys tiles.
Expanding on from Tomek's answer above, the Reference component is using a paragraphreference xtype, which is defined under /libs/cq/ui/widgets/source/widgets/form/ParagraphReference.js.
If you create an overlay, you should be able to change the defined behaviour for an empty parsys. Within the xtype defined in ParagraphReference.js, there is a function, onSelectPage:
function(node, event) {
this.proxy.api["read"].url =
CQ.HTTP.externalize(node.getPath() + ".paragraphs.json", true);
this.store.reload();
}
From this, it seems that CQ is using a paragraphs selector to get back specific content from a page, e.g. take a look at "/content/geometrixx/en.paragraphs.json". Here is a sample JSON object returned by this request:
{
"paragraphs": [{
"path": "/content/geometrixx/en/jcr:content/par/image",
"html": "\n\n\n\n<div class=\"genericImage\">\n\n \n \n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\t <img src=\"/content/dam/geometrixx/portraits/jane_doe.jpg/_jcr_content/renditions/original\" alt=\"Jane Doe\" class=\"cq-dd-image\" title=\"Jane Doe\"/>\n\t\t\n\t\n "
}, {
"path": "/content/geometrixx/en/jcr:content/par/title_1",
"html": "<h2>Strategic Consulting<\/h2>\n"
}, {
"path": "/content/geometrixx/en/jcr:content/par/text_1",
"html": "\n\n\n\n\n\n\n<div class=\"copy\"><p><span class="Apple-style-span" style="font-size: 12px;">In today's competitive market, organizations can face several key geometric challenges:</span></p><br><ul><br><li><span class="Apple-style-span" style="font-size: 12px;">Polyhedral Sectioning</span></li><br><li><span class="Apple-style-span" style="font-size: 12px;">Triangulation </span></li><br><li><span class="Apple-style-span" style="font-size: 12px;">Trigonometric Calculation</span></li><br><li><span class="Apple-style-span" style="font-size: 12px;">Ruler and Compass Construction</span></li><br></ul><br><p><span class="Apple-style-span" style="font-size: 12px;"><br/><br>Geometrixx is ready to help your organization deal effectively with all these challenges through our award winning geometric consulting services.</span></p><br><p style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12px;"></p><br><\/div>\n\n\n\n\n\n\n\n\n<p>\n\n\n<\/p>\n\n"
}, {
"path": "/content/geometrixx/en/jcr:content/par/image_0",
"html": "\n\n\n\n<div class=\"genericImage\">\n\n \n \n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\t <img src=\"/content/dam/geometrixx/offices/clean_room.jpg/_jcr_content/renditions/original\" alt=\"Men at Work in the Clean Room\" class=\"cq-dd-image\" title=\"Men at Work in the Clean Room\"/>\n\t\t\n\t\n "
}, {
"path": "/content/geometrixx/en/jcr:content/par/title_2",
"html": "<h2>Shape Technology<\/h2>\n"
}, {
"path": "/content/geometrixx/en/jcr:content/par/text_0",
"html": "\n\n\n\n\n\n\n<div class=\"copy\"><p>The Geometrixx investment in R&D has done more than solidify our industry leadership role, we have now outpaced our competitors to such an extent that we are in an altogether new space.<\/p>\n<p>This is why our high quality polygons and polyhedra provide the only turnkey solutions across the whole range of euclidean geometry. And our mathematicians are working on the next generation of fractal curves to bring you shapes that are unthinkable today.<\/p>\n<p><\/p>\n<p><\/p>\n\n\n <\/div>\n\n\n\n\n\n\n\n\n<p>\n\n\n<\/p>\n\n"
}, {
"path": "/content/geometrixx/en/jcr:content/rightpar/teaser",
"html": "<script type=\"text/javascript\">\nCQURLInfo = {\n \"contextPath\": null,\n \"requestPath\": '\\/content\\/geometrixx\\/en\\/jcr:content\\/rightpar\\/teaser',\n \"selectorString\": null,\n \"selectors\": [],\n \"extension\": 'html',\n \"suffix\": null,\n \"systemId\": '5859bb1d-dee4-484f-ac0d-d83dc1c013ed',\n \"runModes\": 'lbi,dev,publish'\n};<\/script>\n<script type=\"text/javascript\" src=\"/etc/clientlibs/foundation/librarymanager.js\"><\/script>\n<script type=\"text/javascript\">\nCQClientLibraryManager.write([{\"p\":\"/etc/clientlibs/foundation/jquery.js\",\"c\":[]},{\"p\":\"/etc/clientlibs/foundation/shared.js\",\"c\":[]},{\"p\":\"/etc/clientlibs/foundation/jquery-ui.js\",\"c\":[]},{\"p\":\"/etc/clientlibs/foundation/personalization/jcarousel.css\",\"c\":[]},{\"p\":\"/etc/clientlibs/foundation/personalization/jcarousel.js\",\"c\":[]},{\"p\":\"/etc/clientlibs/foundation/personalization.js\",\"c\":[]},{\"p\":\"/etc/clientlibs/foundation/jquery-ui/themes/default.css\",\"c\":[]},{\"p\":\"/etc/clientlibs/foundation/personalization/themes/default.css\",\"c\":[]},{\"p\":\"/etc/clientlibs/foundation/personalization/ie6/themes/default.css\",\"c\":[\"ie6\"]}],false);\n<\/script>\n<script type=\"text/javascript\">$CQ(function() {initializeTeaserLoader([{\"path\":\"/content/campaigns/geometrixx/scott-recommends\",\"name\":\"scott-recommends\",\"title\":\"Scott Recommends\",\"campainName\":\"geometrixx\",\"thumbnail\":\"/content/campaigns/geometrixx/scott-recommends/jcr:content/par/image.img.png\",\"id\":\"geometrixx_scott-recommends\",\"segments\":[\"/etc/segmentation/geometrixx/male\"],\"tags\":[]},{\"path\":\"/content/campaigns/geometrixx/yolanda-recommends\",\"name\":\"yolanda-recommends\",\"title\":\"Yolanda Recommends\",\"campainName\":\"geometrixx\",\"thumbnail\":\"/content/campaigns/geometrixx/yolanda-recommends/jcr:content/par/image.img.png\",\"id\":\"geometrixx_yolanda-recommends\",\"segments\":[\"/etc/segmentation/geometrixx/female\"],\"tags\":[]},{\"path\":\"/content/campaigns/geometrixx/default_teaser\",\"name\":\"default_teaser\",\"title\":\"Default Teaser\",\"campainName\":\"geometrixx\",\"thumbnail\":\"/content/campaigns/geometrixx/default_teaser/jcr:content/par/image.img.png\",\"id\":\"geometrixx_default_teaser\",\"segments\":[],\"tags\":[]}], \"first\", \"_content_geometrixx_en_jcr_content_rightpar_teaser\", \"false\", \"http://localhost:4502/libs/wcm/stats/tracker\", \"/content/geometrixx/en/jcr:content/rightpar/teaser\");\n });<\/script><div id=\"_content_geometrixx_en_jcr_content_rightpar_teaser\" class=\"campaign campaign-geometrixx\"><noscript><div class=\"par parsys\"><div class=\"title section\"><h3>Get the Geometrixx App<\/h3>\n<\/div>\n<div class=\"text module shadow section imagetext\">\n\n\n\n\n\n\n<div class=\"copy\"><p>All things Geometrixx, anytime, anywhere. Our mobile app is is as groundbreaking and remarkably easy-to-use as our shapes. <\/p><p><\/p>\n\n <\/div>\n\n\n\n\n\n\n\n\n<p>\n\n\n<\/p>\n\n<\/div>\n\n\n\n\n<div class=\"genericImage\">\n\n \n \n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\t <img src=\"/content/dam/geometrixx/banners/mobile.jpg/_jcr_content/renditions/original\" alt=\"Geometrixx App\" class=\"cq-dd-image\" title=\"Geometrixx App\"/>\n\t\t\n\t\n <\/div>\n<\/div>\n<\/noscript><\/div>"
}],
"count": 7
}
So maybe use this selector to check out the content of the page currently coming back with blank parsys by using the paragraphs.json selector, (it seems that you need to be authenticated to hit this endpoint).
If is the "html" property of these objects that is blank, you could extend the onSelectPage function in your overlayed version to loop through the array of parsys & copy it's "path" property value to its "html" property for these nodes.