We have a GWT project using RequestFactory, Editor Framework and UiBinder. Once the data is loaded from the server using RequestFactory, we determine whether the page should be read-only based on a status in the data.
At this point I would like to render either an input widget or a label (if read-only).
Ideally I would swap out the rendering of the widget depending on the data, however by the time that the data is loaded it looks like the rendering side has been completed (based on debugging I've done).
I don't want to have two widgets on the page with one hidden. This has caused us issues already with data from the hidden one overriding the other, not to mention the impact of twice the number of widgets in the DOM.
One thought so far was to removeFromParent() when the data was received. Is there a better way to do this?
Thanks.
My first idea is...
Only works for input fields and textareas. If you have dropdowns, radioboxes or checkboxes it doesn't work...
...to style an input field via css so it doesn't look like one (remove border and background color should do it) and disable it if its read only. If its not read only remove the css class, so it looks like a normal input field and make it editable.
Something like this:
<style>
.label {
background-color: white;
border: 0px;
color: black;
}
</style>
<input type="text" class="label" disabled value="Read only data"/>
<input type="text" value="Editable data"/>
An other idea is..
It has been some time that I was using GWT. But can't you just add the widget in the callback from the rcp call where you get the data?
Something like this:
In the ui Binder you just have the container for the data.
In a method you draw the Data as Label or Input field in the container, depending on the data you get. You call this method in the callback from the data request.
Related
Is it possible to set a variable in thymeleaf and then change it depending on an option in a select element and then display a specific div based on the selection? Here's what I mean.
I have three options in select:
1) DESKTOP_PC
2) LAPTOP_PC
3) TABLET_PC
When the user selects DESKTOP_PC, I would like to show the div with the related inputs for it. Likewise if it's LAPTOP_PC or TABLET_PC.
Only problem is, I'm not sure how I would go about doing this.
The other thing, is that I have the following:
In my entry class I have an enum class:
public static enum Type {
DESKTOP_PC,
LAPTOP_PC,
TABLET_PC
}
In my Thymeleaf form, I have the following to access and display this enum:
<div class="section-question">
<p>Type</p>
<select name="type" th:field="$*{type}">
<option th:each="type : ${T(com.project.entities.Entry.Type).values()}" th:value="${type}" th:text="${type}" ></option>
</select>
</div>
Any help would be much appreciated!
Thanks
it is very possible, but has very little to do with Java or Thymeleaf, even though you could do it with them too (not recommended)
All you need to do is create basic JavaScript function that onClick to different options makes different divs visible (through adding/removing classes with css defined in them like display: none;).
Of course you could implement it on backend, through each click being a separate request sent to a controller that then saves the option into a for example boolean variable and based on this variable returns a different thymeleaf view but that is an awkward looking solution for such simple case that doesn't really require backend processing.
Any simple book on JS will show you how to do this, I can recommend A smarter way to learn JS for this scenario
To achieve what you want we need to to take help of Javascript or jQuery.
Write an onchange function on select tag.
Get the value of option selected inside the function.
Show/hide div depending on value
Vote if it helps you
I have a radio choice form which is generated with the RadioChoice component in wicket. Here <span/> covers all of the possible choices in the form. I want the span to go downwards. One option per row on screen, but I am currently stuck with the problem that if i try to style choice it get styled as one. For example, if i try to take border: 1px solid red; it creates only one border, and not one for each choice.
<form class="mapSelector" wicket:id="radioForm">
<span class="choice" wicket:id="radio"></span>
</form>
I am not sure I understand what you mean with I want the span to go downwards. One option per row on screen but it sounds like you need a <div> instead of <span>, i.e. an element with display:block.
I am not sure how CSS border is related to downwards and row.
I'd suggest you to see what is the generated HTML because this Wicket Component may generate <label> too for each radio element.
I have an extrange case with JMesa..
When I'm doing tests without a form element as parent (to apply filters and pages) JMesa table is rendered.
But when I put the Jmesa element as form's child, the style disappears and is rendered as a basic table without colors or borders ._.
<fieldset>
<s:form action="listUsers">
<jmesa:tableModel id="test" items="${users}" var="bean">
<jmesa:htmlTable caption="${pageScope.caption}" width="100%">
<jmesa:htmlRow>
... Rows ....
</jmesa:htmlRow>
</jmesa:htmlTable>
</jmesa:tableModel>
</s:form>
</fieldset>
On head tags I have the css refered and jmesa/jquery.jmesa ..
Since the table renders with correct styles when not wrapped in a form tag but renders with no styling when it is inserted into the body of a form tag, my first thought is that there is a style somewhere at the form tag level that is causing the table styles to be lost or overridden. Another possibility is that if your CSS Selectors are configured with very specific parent/child relationships, the introduction of another tag could conceivably prevent styles from being applied.
Without more information as to what styles are present, the best suggestion I can offer is to use a tool that allows you to interactively assess your styles. Internet Explorer 8 has the Developer Tools feature. Conveniently, you can use a feature to click on an item on your Web page and it will load that element along with its styles. You can then analyze the styles or dynamically tweak styles to immediately see results.
I'd recommend loading the page that works and screen capturing the styles for the table when it looks good. Then you can do the same for when the styles are not being applied to the table and compare the two as a starting point to determining what's causing the difference.
I am using <s:doubleselect> in my jsp. The problem is both come on different row while I want the in same line. Here is the code
<s:doubleselect theme="css_xhtml" labelposition="top"
requiredposition="left" name="index" cssClass="dropdown_menu" list="#request.constants.keySet()"
doubleList="#request.constants[top]" doubleName="oldValue"
doubleCssClass="dropdown_menu" ></s:doubleselect>
How it can be possible to put them on same line?
This behavior is an unfortunate holdover from the old UI tags.
The easiest solution is to use CSS to change <br/> styling inside the .wwctrl class (changes all controls, which may be what you want anyway):
.wwctrl br {
display: none;
}
A less-practical, but potentially cleaner, solution would be to extend the theme and tweak the control's template. There are a number of controls that have some questionable HTML, but hardly anybody uses the specialized controls, so we never fix them.
I'm working on a web project which uses JSF 2.0, PrimeFaces and PrettyFaces as main frameworks / libraries. The pages have the following (common) structure: Header, Content, Footer.
Header:
The Header always contains the same menu. This menu is a custom component, which generates a recursive html <ul><li> list containing <a href="url"> html links, this is all rendered with a custom renderer. The link looks like 'domain.com/website/datatable.xhtml?ref=2'. Where the ref=2 used to load the correct content from the database. I use prettyfaces to store this request value in a backingbean.
Question 1: Is it ok to render the <a href> links myself, or should I better add an HTMLCommandLink from my UIComponent and render that in the encodeBegin/End?
Question 2: I think passing variables like this is not really the JSF 2.0 style, how to do this in a better way?
Content:
The content contains dynamic data. It can be a (primefaces) datatable, build with dynamic data from the database. It can also be a text page, also loaded from the database. Or a series of graphs. You got the point, it's dynamic. The content is based on the link pressed in the header menu. If the content is of type datatable, then I put the ref=2 variable to a DataTableBean (via prettyfaces), which then loads the correct datatable from the database. If the content is of type chart, I'll put it on the ChartBean.
Question 3: Is this a normal setup? Ideally I would like to update my content via Ajax.
I hope it's clear :)
It's ok to just output link yourself, commandLink is out of the question (it does a postback using javascript, it's not what you want);
Parameter are all in the param implicit object. You can insert them by a #ManagedProperty annotation, like this:
#ManagedProperty("#{param.ref}")
String ref
// .. getters, setters (obligatory!)
You can also use (if you are on JSF 2) the f:viewParam tag (a nice description http://blogs.oracle.com/rlubke/entry/jsf_2_0_bookmarability_view), you get the bonus of validation and conversion.
The way I understand it, your setup is rather complicated. Using a handwritten custom component for a menu is a huge overkill (at least judging from the provided description), a composite component would probably do. JSF has no special way of making ajax calls between views or embedding views one into another, so - unless you use iframes - your only choice would be to include all the possible pieces of content into a single view, wrapped in panels, and render them as required:
<h:panelGroup rendered='#{backingBean.ref == 2}'>
... content 2 ...
</h:panelGroup>
and so on. Careful, this would be heavy on resources.
You could also write your own ajax solution in javascript. This would require all the pieces of content to be fully independent views, with their own forms. Also, all their postbacks would have to go through ajax, so the main page does not get reloaded.