I am trying to set the align property in vertical panel in GWT like this:
vpanel = new VerticalPanel();
vPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT);
and then adding children which gives me a table like this:
<table>
<tbody>
<tr><td align="left"></td></tr>
<tr><td align="left"></td></tr>
</tbody>
</table>
But what I want is
<table align="left">
<tbody>
<tr><td></td></tr>
</tbody>
</table>
I know it's a stupid question but I am stuck with browser compatibility issue and only the HTML specified fixes issue on all browsers. Any ideas?
You can get the underlying element of a widget and set an attribute to it using getElement().setAttribute(..) for instance :
VerticalPanel panel = new VerticalPanel();
panel.getElement().setAttribute("align", "left");
RootPanel.get().add(panel);
Related
I am new to wicket ,Please someone help me with a thought. I have a logic around a checkbox to display or not to display.
Problem:
when the logic of not to display a checkbox is on , which is by adding a display:none to the checkbox element dynamcially in code , there is a white space because of td surronding the checkbox.
my html looks like
<span wicket:id="checkgroup">
<table>
<tr wicket:id="srow" >
<td><input type="checkbox" wicket:id="scheck"/></td>
<td><img wicket:id="sicon"></img></td>
</tr>
</table>
</span>
so in code I have if else logic for adding a display:none to check box element which removes the checkbox from the view which looks like the below
<span wicket:id="checkgroup">
<table>
<tr wicket:id="srow" >
<td><input type="checkbox" wicket:id="scheck" style="display:none"/></td>
<td><img wicket:id="sicon"></img></td>
</tr>
</table>
</span>
final CheckGroup<Scope> checkGroup = new CheckGroup<>("checkGroup",
new ArrayList<> ());
ListView<Scope> listView = new ListView<Scope>
("srow", sList);
#Override
protected void populateItem(final ListItem<S> item)
{
Check<S> check = new Check<>("scheck", item.getModel(), checkGroup);
if(defaultscope)
{
check.add(new AttributeModifier("style","display:none"));
}
item.add(check);
}
so now my checkbox disappears but the surrounding td stays and causing a white space in display.
Any ideas on how to approach this issue.
Thanks.
You can use <wicket:enclosure> to remove html if the referenced child is not present. wicket enclosure.
Your code in populateItem could look like this:
Check<S> check = new Check<>("scheck", item.getModel(), checkGroup);
if(defaultscope)
{
check.setVisible(false);
}
item.add(check);
Your markup would look like this:
<tr wicket:id="srow" >
<wicket:enclosure>
<td><input type="checkbox" wicket:id="scheck"/></td>
</wicket:enclosure>
<td><img wicket:id="sicon"></img></td>
</tr>
I want to create this simple static layout:
but unfortunately I cannot find a description on how to do that with a FlexTable (or something else). This can't be done with a simple Vertical* or HorizontalPanel since the alignment of the labels and textboxes would not be correct that way.
Is there a way to do something like this in the UiBinder:
<x:TableView>
<x:TableRow>
<x:TableCell><g:Label ../></xTableCell>
<x:TableCell><g:TextBox ../></xTableCell>
</x:TableRow>
<x:TableRow>
<x:TableCell><g:Label ../></xTableCell>
<x:TableCell><g:TextBox ../></xTableCell>
</x:TableRow>
<x:TableRow>
<x:TableCell><g:Label ../></xTableCell>
<x:TableCell><g:CheckBox../><g:CheckBox../> .. </xTableCell>
</x:TableRow>
</x:TableView>
Just use a <table> in a <g:HTMLPanel>, or probably better, use <div>s with CSS (flexbox comes to mind).
<table>
<tr>
<td><label>…</label></td>
<td><g:TextBox/></td>
</tr>
<tr>
<td><label>…</label></td>
<td><g:TextArea/></td>
</tr>
<tr>
<td><label>…</label></td>
<td><g:CheckBox/><g:CheckBox/>…</td>
</tr>
</table>
I'm using uiBinder to layout my views in a gwt project and I've been using a regular table to handle the basic layout of the view. It became kinda messy and static so I was looking into using layers inside a layoutPanel instead. This seemed like a better way of doing it. So before I had the structure:
docklayoutpanel
center
tablayoutpanel
tab
table
// tabel rows and cells with various content
and now the table with its rows and columns has been replaced with a layoutPanel with layers. At first it seemed to work fine, looking almost exactly the same (just some margins and padding were off), but then I noticed that all the content inside the layers were completely disabled. Not only buttons and textFields, but I can't even select static text. It's like there's an invisible glass pane over everything. What is causing this and how do I fix it?
Throwing in some code as well. This is what the beginning looked like before (working fine):
<g:DockLayoutPanel unit="EM" height="100%">
<g:center>
<g:TabLayoutPanel barUnit='EM' barHeight='3'
ui:field="tabs">
<!-- TABB 1 -->
<g:tab>
<g:header styleName="viewSubtitleText">
<!-- Flikrubrik -->
View Person
</g:header>
<g:LayoutPanel>
<g:layer>
<g:ScrollPanel>
<g:HTMLPanel>
<table>
<tr>
<td valign="top">
<g:HTMLPanel styleName="roundedBox">
<g:HTMLPanel styleName="viewSubtitleText">People</g:HTMLPanel>
<table>
<tr>
<td>
<table>
<tr>
<td>
<g:HTML>Search </g:HTML>
</td>
<td>
<j:DemiaSuggestBox ui:field="sgtPerson"></j:DemiaSuggestBox>
</td>
And it was replaced by this:
<g:DockLayoutPanel unit="EM" height="100%">
<g:center>
<g:TabLayoutPanel barUnit='EM' barHeight='3'
ui:field="tabs">
<!-- TABB 1 -->
<g:tab>
<g:header styleName="viewSubtitleText">
<!-- Flikrubrik -->
View Person
</g:header>
<g:LayoutPanel>
<g:layer styleName="roundedBox">
<g:HTMLPanel>
<g:HTMLPanel styleName="viewSubtitleText">People</g:HTMLPanel>
<table>
<tr>
<td>
<table>
<tr>
<td>
<g:HTML>Search </g:HTML>
</td>
<td>
<j:DemiaSuggestBox ui:field="sgtPerson"></j:DemiaSuggestBox>
</td>
So it turned out I just forgot to specify the dimension of the layers, e.g:
<g:layer left="1em" top="1em" bottom="1em" width="42em">
Is it possible to create table using Repeater control which has rows wrapped in ItemContainer controls? Something along the line:
<table id="products">
<thead>
<tr>
<td>Name</td>
<td>Description</td>
<td>Type</td>
<td>Billing Periodicity</td>
<td>Average Life Time (in months)</td>
<td>Is default</td>
</tr>
</thead>
<tbody id="tableBody" data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: products">
<tr data-win-control="WinJS.UI.ItemContainer">
<td data-win-bind="textContent: name"></td>
<td data-win-bind="textContent: description"></td>
<td data-win-bind="textContent: type"></td>
<td data-win-bind="textContent: costPeriodicity"></td>
<td data-win-bind="textContent: averageLifeTime"></td>
<td data-win-bind="textContent: isDefault"></td>
</tr>
</tbody>
</table>
Given example throws exception at runtime:
Unable to get property 'children' of undefined or null reference
I' d like to use ItemContainer's functionality to make table rows clickable. Is my approach to the issue invalid? Is ItemContainer control wrong to use in that scenario?
Side note - if I apply ItemContainer control to table cells (td), evertything runs smoothly (they behave like windows8 - like clickable objects).
You incorrectly declared data source for repeater, it should be declared as win-options not -win-bind, when you change it to:
<tbody data-win-control="WinJS.UI.Repeater" data-win-options="{data: products}">
it should work with no problems.
I would like to display an HTML table clicking on a button.
This is what I've tried so far:
My SCALA code:
object Snippet {
def render = {
def showTable() = {
val table = <table border="1">
<caption>My Table</caption>
<thead>
<tr>
<td>Entry</td>
<td>Value1</td>
<td>Value2</td>
</tr>
</thead>
<tbody>
<tr>
<td>PREV</td>
<td>1</td>
<td>10</td>
</tr>
<tr>
<td>CURR</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<td>NEXT</td>
<td>3</td>
<td>30</td>
</tr>
</tbody>
</table>
SetHtml("table_div",table)
}
"#getTable" #> SHtml.button("Get Table", () => null, "onclick" -> "$('#msg_div').html('<span>Getting table...</span>')") &
"name=proc" #> SHtml.hidden(showTable)
}
}
And my HTML:
<div class="lift:Snippet.render">
<form>
<input type="hidden" name="proc"/>
<button id="getTable" value="Get Table" class="btn btn-inverse">Get Table</button>
</form>
<div id="msg_div"></div>
<div id="table_div"></div>
</div>
Nothing is displayed clicking the button.. Do you see what is the problem?
Or someone could tell me another way to do that?
I am not sure what you are looking to accomplish with the hidden input. Why not just do something like:
"#getTable" #> SHtml.ajaxButton("Get Table", showTable)
If you are looking to display a waiting indicator, Lift has a mechanism for setting the ajax loading animation. In Boot.scala:
//Show the spinny image when an Ajax call starts
LiftRules.ajaxStart =
Full(() => LiftRules.jsArtifacts.show("ajax-loader").cmd)
// Make the spinny image go away when it ends
LiftRules.ajaxEnd =
Full(() => LiftRules.jsArtifacts.hide("ajax-loader").cmd)
You can use any JsCmd instead to call your own function. I'd probably opt for that.
Totally agree with jcern. A slightly different way could also be:
"#getTable [onclick]" #> SHtml.ajaxInvoke(showTable)
(this way you won't override the original button name)
Also note that you don't even need to use the <form> tag -- you can delete it.