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
Related
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>
-
hey folks,
i am building a Java-tool, trying to automatically fill out some form input elements in an HTML-Page using Java and Jaunt API.
the HTML-Code is like:
<fieldset class = "fieldsetlong">
<legend>searchprofile</legend>
<label for="reference">reference:</label>
<input maxlength="50" name="reference" id="reference" type="text" />
</fieldset>
<fieldset class = "fieldsetlong">
<legend>searchcriteria</legend>
<label for="surname">surname:</label>
<input name="searchprofile.surname" id="surname" type="text" />
</fieldset>
The Java-Code for filling in the "normal" Input-field reference (it works) looks like:
form.set("reference", "123Test");
Unfortunately, I am not able to fill out the fields that use the dot-notation searchprofile.surname in the name
Here's a sample of what i've tried (without success):
form.set("surname", "TestPerson");
form.set("searchprofile.surname", "TestPerson");
form.set("name=\"searchprofile.surname\"", pers.getSurname());
form.set("id=\"surname\"", pers.getSurname());
For each of these commands I get a NotFoundException and don't know whether I can do this with Jaunt.
It would appreciate any kind of help in this regard.
Thanks in advance
Edit - is there a way to reach the dot-notated input-field searchprofile.surname with JSoup?
HTML allows dots in the name-Attribute, but does Jaunt accept this abc.name?
Not sure about Jaunt, never used it before. However Jsoup seems to be a pretty decent library to be used here. I myself have been using Jsoup for a fairly long time and it has been very successful in scraping web pages, filling input form and submit, and of course, HTML parsing!
I've posted a step by step guide to fill in form input fields and submit to server in the following answer: How to login with Jsoup
Basically it works very similar to your code, a very brief example would be:
Connection.Response response = Jsoup.connect(url)
.data("Name", "Value")
.method(Method.POST).execute();
Today, at work the Jaunt solution with
form.set("searchprofile.surname", "TestPerson");
worked like a charm.
I don't know what the problem was earlier but I am glad that it worked.
The HTML allows to use dots and minus, etc. which I misinterpreted as some kind of nested forms or hierarchies but the dot-notation is just a valid name-attribute in HTML.
I have a site having source code :
<article id="post-438" class="post-438 post type-post status-publish format-standard has-post-thumbnail hentry category-history tag-africa tag-asia tag-europe tag-maps tag-middle-east tag-mongol-empire tag-ottoman-empire tag-rise-of-islam">
<header class="entry-header">
<div class="entry-meta smallPart">
<span class="posted-on"><i class="fa fa-clock-o spaceRight"></i><time class="entry-date published updated" datetime="2015-07-23T00:26:22+00:00">July 23, 2015</time></span><span class="byline"> <i class="fa fa-user spaceLeftRight"></i><span class="author vcard"><a class="url fn n" href="https://muslimmemo.com/author/sufyan/">Sufyan bin Uzayr</a></span></span><span class="comments-link"><i class="fa fa-comments-o spaceLeftRight"></i><span class="dsq-postid" data-dsqidentifier="438 https://muslimmemo.com/?p=438">Leave a comment</span></span> </div><!-- .entry-meta -->
<h1 class="entry-title">Map Showing The Rise of Islam Down The Ages</h1> </header><!-- .entry-header -->
<div class="entry-summary">
<p>This is a rather interesting map that shows the spread of Islam across Asia, Europe and Africa, down the ages. The earliest period is marked in shades of brown and red, followed by shades of yellow. South-east Asia is shown separately as an inset using shades of blue. While this map is far from perfect…</p>
</div><!-- .entry-summary -->
<footer class="entry-footer smallPart">
<div class="cruzy-bottom-content">
<span class="cat-links"><i class="fa fa-folder-open spaceRight"></i>History</span> <span class="read-link">
<a class="readMoreLink invertPart" href="https://muslimmemo.com/map-rise-islam/">Read More<i class="fa fa-angle-double-right spaceLeft"></i></a>
</span>
</div>
</footer><!-- .entry-footer -->
</article>
I need to fetch :
What I need to fetch from the site:
entry-title. -> document.getElementByClassName("entry-title");
entry-link -> document.select("span.entry-title > a[href]")
summary of the entry. -> document.getElementByClassName("entry-summary");
author's link. -> document.select("span.author > a[href]")
author's name. -> document.getElementByClassName("author");
category. -> document.getElementByClassName("cat-links");
category's link. -> document.select("span.cat-links > a[href]")
posting date -> document.getElementsByClass("published");
I am doing it by this way:
Document document = Jsoup.connect(url).get();
heading = document.getElementsByClass("entry-title");
headingLink = document.select("h1.entry-title > a[href]");
headingSummary = document.getElementsByClass("entry-summary");
author = document.getElementsByClass("author");
authorLinks = document.select("span.author > a[href]");
category = document.getElementsByClass("cat-links");
categoryLinks = document.select("span.cat-links > a[href]");
published = document.getElementsByClass("published");
It is working well but working very slowly. How should I change my code for the same. Please help me.
Some hints from luksch:
From my experience Jsoup is doing a pretty good job speed wise, altough a SAX based approach should be a bit faster. Anyway, I use Jsoup a lot and never found it slow. Network access however can be very slow, depending on a lot of parameters, some of which you don't have much control over. I advise you to check out the connection over which you retrieve the data. Maybe this is the culprit and not JSoup parsing.
your JSoup use seems okay to me. At least I don't see a way to speed that up by much. One thing could be to restrict the search for Elements by not starting at the document level, but at a suitable inner node. element.select(".whatever") will start at element not at the document. If your document is very big, this might help
I'm trying to adapt the code used in PSI Probe (or more generally, the idea of PSI Probe) to be used inside of my company's web application. I can get the majority of the portions of what I'm looking to do, but I have become stuck on one bit of code - the 'Status' tab. One column of data is the processing time for the thread, data I would really like to have, but I can't figure out where it is coming from. Here's the relevant snippet:
<c:forEach items="${pools}" var="pool" varStatus="poolStatus">
<div class="poolInfo">
<h3>${pool.name}</h3>
<div class="processorInfo">
<span class="name">
<spring:message code="probe.jsp.status.processor.maxTime"/>
</span>
${pool.maxTime}
I can't figure out where the pools object is coming from! Does anyone have experience with this sort of thing? Thanks!
Looking at the source code (this being Google code, a Google search works really quick)
the pools is being populated in the ListThreadPoolsController
List pools = containerListenerBean.getThreadPools();
return new ModelAndView(getViewName())
.addObject("pools", pools);
A closer look at ContainerListenerBean
shows the properties which are listed in status.jsp
<span class="name"><spring:message code="probe.jsp.status.currentThreadCount"/></span> ${pool.currentThreadCount}
<span class="name"><spring:message code="probe.jsp.status.currentThreadsBusy"/></span> ${pool.currentThreadsBusy}
<span class="name"><spring:message code="probe.jsp.status.maxThreads"/></span> ${pool.maxThreads}
<span class="name"><spring:message code="probe.jsp.status.maxSpareThreads"/></span> ${pool.maxSpareThreads}
<span class="name"><spring:message code="probe.jsp.status.minSpareThreads"/></span> ${pool.minSpareThreads}
are being populated in the getThreadPools() method
ThreadPool threadPool = new ThreadPool();
threadPool.setName(executorName.getKeyProperty("name"));
threadPool.setMaxThreads(JmxTools.getIntAttr(server, executorName, "maxThreads"));
threadPool.setMaxSpareThreads(JmxTools.getIntAttr(server, executorName, "largestPoolSize"));
threadPool.setMinSpareThreads(JmxTools.getIntAttr(server, executorName, "minSpareThreads"));
threadPool.setCurrentThreadsBusy(JmxTools.getIntAttr(server, executorName, "activeCount"));
threadPool.setCurrentThreadCount(JmxTools.getIntAttr(server, executorName, "poolSize"));
It can come from two places, generally. A Servlet that is invoked before the JSP or a Filter. Check all filters, and the servlet mapped to the url you are opening.
thanks in advance for your help.
I'm currently trying to create a w3c standards compliant HTML/CSS interface for a GWT app, much of this rests on using the right types of panel in the right place rather than using nested horizontal and vertical panels which write out tables in the UI.
I'm a total n00b at GWT and cannot figure out why replacing the top Vertical Panel in the code below causes the app to stop working. Any UI coding resources, advice of any kind would be very much appreciated.
<g:VerticalPanel>
<g:FormPanel ui:field="loginFormPanel" action="/cms/j_acegi_security_check.rpc" >
<g:HTMLPanel>
<g:Label ui:field="signinLabel" styleName="{style.signinStyle}">
<ui:msg key="signInText">Welcome to Perform CMS</ui:msg>
</g:Label>
<g:Label ui:field="emailLabel" styleName="{style.loginFontStyle}">
<ui:msg key="emailAddress">Email adress</ui:msg>
address
</g:Label>
<g:TextBox ui:field="email" name="j_username" styleName="{style.loginTextBoxStyle}"/>
<g:Label styleName="{style.fontStyle}" ui:field="usernameError"/>
<g:Label ui:field="passwordLabel" styleName="{style.loginFontStyle}">
<ui:msg key="password">Password</ui:msg>
</g:Label>
<g:PasswordTextBox ui:field="password" name="j_password" styleName="{style.loginTextBoxStyle}"/>
<g:Label styleName="{style.fontStyle}" ui:field="passwordError"/>
<g:HTMLPanel ui:field="submitPanel">
<g:HTMLPanel ui:field="submitButtonPanel" styleName="{style.buttonPanelStyle}">
<g:Image url="/cms/images/new_button_search_left.png" styleName="{style.image}"></g:Image>
<g:Label ui:field="signIn" styleName="{style.submitLabelStyle}">
<ui:msg key="signIn">Sign in</ui:msg>
</g:Label>
<g:SubmitButton styleName="{style.hide}">Submit</g:SubmitButton>
<g:Image url="/cms/images/new_button_search_right.png" styleName="{style.image}"></g:Image>
</g:HTMLPanel>
</g:HTMLPanel>
<g:HTMLPanel ui:field="submitErrorsPanel" styleName="{style.submitErrorPanel}">
<g:Label styleName="{style.fontStyle}" ui:field="submitErrorMessages"/>
</g:HTMLPanel>
</g:HTMLPanel>
</g:FormPanel>
<g:HTMLPanel ui:field="loginSuccessPanel" styleName="{style.hide}">
<g:Label styleName="{style.fontStyle}" ui:field="loginSuccessMessageLabel"/>
</g:HTMLPanel>
</g:VerticalPanel>
You don't say how your app stops working, but the GWT compiler generates different JS for every user agent specified in your project's gwt.xml. By default there may be 5 or 6 different versions of your program and the right one is decided in at runtime. These versions exist because there is no such thing as W3C compliance in browsers. One browser might get closer than others but all have their quirks that GWT tries to hide you from.
The GWT vertical panel at your root usually gets turned into a table with each child being a cell in a row. Note you still need a root element in the XML, but it could be a flow or html panel. Changing from a vertical panel will probably cause the child elements to flow sideways or do other weird things. If you wanted them to stay vertical you could throw a <br> between them, or style the enclosing <div>.
The best thing to do for layout issues is to install a tool into your browser which allows you to inspect the DOM. For example, Firefox has Firebug, IE has the IE Developer Toolbar, Opera has a developer console etc. You can select the errant element and see its place in the hierarchy as well as which styles apply to that element. Firebug even let you tweak styles in real time which can be handy for on the spot experimentation.