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">
Related
I have seen questions pertaining to accordion but not entirely to my specific need. My table is populated using spacebars, more specific a nested each loop like this:
<tbody>
{{#each piece in pieces}}
<tr id="{{piece._id}}" class="itemList table-warning">
<th class="name tText">{{piece.name}} {{piece._id}}</th>
<td class="pdf tText" style="text-align: center"><a class ="pdf" href="{{piece.pdf}}" target="_blank"><i class="fa fa-file-text-o" aria-hidden="true"></i></a></td>
<td class="audio tText" style="text-align: center"><a class="audio" href="{{piece.audio}}" target="_blank"><i class="fa fa-volume-up" aria-hidden="true"></i></a></td>
<td class="format tText">{{piece.instrumentation}}</td>
<th class="price tText" >${{piece.price}}</th>
<td><input class ="qty" type ="number" name ="quantity" value="0" min="0"></td>
</tr>
<!-- Row that is being clicked-->
<tr class="partsList">
<td colspan="3"></td>
<th class="partName tText">{{piece.name}} Parts</th>
<td colspan="2"></td>
</tr>
{{#each part in piece.parts}}
<!-- Rows that should accordion -->
<!-- Currently ALL rows accordion on click. Need to accordion based on _id-->
<tr class="partList">
<td colspan="3"></td>
<td class="pname tText">{{piece.name}}: {{part.pname}}</td>
<td class="price tText">${{part.pprice}}</td>
<td><input class="qty" type="number" name="quantity" value="0" min="0"></td>
</tr>
{{/each}}
{{/each}}
</tbody>
I have a click function like so:
'click .partsList': function(e){
e.preventDefault();
$('.partList').nextUntil('tr.itemList').toggle();
}
The accordion function works, however it works with every instance of the each loop. i.e. every tr class ="partsList" will accordion at the same time on click.
To my understanding of the each loop, I can access the _id of a document using {{piece._id}}. If I set the table row id to equal that however, it only reads the _id of the FIRST document in the collection.
What I need is on click for the <tr class="partList"> to accordion based on _id. Or perhaps you would go about this a different way than bootstrap tables?
Please let me know if my question needs clarification.
You could filter the clicked .partslist using a data-* attribute. This causes jQuery to select only this specific items. Note that you need to attach the data-* attribute to the row that is clicked and to the rows that should collapse:
<tbody>
{{#each piece in pieces}}
...
<!-- Row that is being clicked-->
<!-- use the _id value of the piece context as data attribute -->
<tr class="partsList" data-id="{{piece._id}}">
<td colspan="3"></td>
<th class="partName tText">{{piece.name}} Parts</th>
<td colspan="2"></td>
</tr>
{{#each part in piece.parts}}
<!-- Rows that should accordion -->
<!-- Currently ALL rows accordion on click. Need to accordion based on _id-->
<!-- use the _id value of the piece context as data attribute -->
<tr class="partList" data-target="{{piece._id}}">
...
</tr>
{{/each}}
{{/each}}
</tbody>
'click .partsList': function(e, templateInstance){
e.preventDefault();
// get the data-id attribute of the clicked row
const targetId = templateInstance.$(e.currentTarget).data('id')
// skip if this row is not intended to toggle
if (!targetId) return
// toggle based on data-target attribute
templateInstance.$(`.partList[data-target="${targetId}"]`).nextUntil('tr.itemList').toggle();
}
I have a table where each td has an input (like a spreadsheet).
My html template the code as follows:
<tr *ngFor="let project of projects" (click)="onSelect(project)">
<th class="panel fixed">{{project.id}}</th>
<th class="panel fixed">{{project.name}}</th>
<td *ngFor="let load of projectLoads[project.code]; let d=index" class="cell panel scrolling">
<input class="load" [(ngModel)]="projectLoads[project.code][d]" title="{{project.code+' . '+d}}" />
</td>
…
When I fill one cell in with a number, for example 1, the number is repeated in the next cell.
How it comes?
(Note that there is no ngForm in my current code.)
I'm trying to add a DataGrid on my view.
I know that a DataGrid can only stay in a Layout Panel, because of the ProvidesResize and RequiresResize interfaces.
The thing is, I want to add a filter on top of the DataGrid Table, and the filter can't have a fixed height, it could be bigger or smaller.
No Layout Panel would accept more then one child to be resized, but the LayoutPanel itself. But still, each layer needs a height to be set in percentage, and that's not OK as well.
If I change the DataGrid with a CellTable and then add both in a Flow Panel, the problem would be solved, but the table has to be scrollable.
What I would need is a FlowLayoutPanel but there is no such Panel in GWT
I was thinking that the only way would be to try to create a custom panel which would implement ProvidesResize and RequiresResize interfaces.
This is how it looks like using a LayoutPanel :
<g:layer left="2%" right="68%" top="2%" bottom="93%">
<g:Label ui:field="gridBlurb" addStyleNames="{res.viewStandardStyle.viewTitle}" />
</g:layer>
<g:layer left="2%" right="68%" top="9%" bottom="56%">
<g:SplitLayoutPanel>
<g:center>
<g:HTMLPanel>
<g:FlowPanel ui:field="criteriaPanel" visible="false" />
<g:FlowPanel>
<g:Button ui:field="refresh">
<ui:text from="{text.refreshButtonCaption}" />
</g:Button>
</g:FlowPanel>
</g:HTMLPanel>
</g:center>
</g:SplitLayoutPanel>
</g:layer>
<g:layer left="2%" right="2%" top="45%" bottom="5%">
<g:SplitLayoutPanel>
<g:center>
<c:DataGrid ui:field='table' />
</g:center>
</g:SplitLayoutPanel>
</g:layer>
<g:layer left='2%' right='2%' top="95%" bottom="0%">
<g:HTMLPanel>
<table style="width:100%">
<tr>
<td align='center'>
<c:SimplePager ui:field='pager' />
</td>
</tr>
</table>
</g:HTMLPanel>
</g:layer>
</g:LayoutPanel>
Can anyone help me with this ?
Many thanks in advance.
If you don't care about very old browsers, use flexbox CSS layout model - I use it with DataGrid (and for everything else) all the time.
Then you simply add display: flex; to your container (i.e. what you used LayoutPanel for), and then set flex-grow: 1 on your DataGrid. This will tell DataGrid to take all the available space after other widgets in the container have been rendered.
P.S. For the past few years I try to avoid LayoutPanels as much as possible for performance reasons, especially on mobile devices.
looks like the CSS did the trick.
Many thanks.
This is how it looks like :
<!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"
xmlns:c="urn:import:com.google.gwt.user.cellview.client">
<ui:with field='res' type='com.vsg.vraweb.client.resource.Resources' />
<ui:with field='text' type='com.vsg.vralang.client.GlobalConstants' />
<!--
CSS Tricks tutorial : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
1) 'display: flex;' - enables a flex context for all its direct children.
2) 'flex-direction: row | row-reverse | column | column-reverse;' - This establishes
the main-axis, thus defining the direction flex items are placed in the flex
container.
3) flex-grow: <number>; - This defines the ability for a flex item to grow if necessary.
-->
<ui:style>
.container {
display: flex;
flex-direction: column;
}
.dataGrid {
width: 100%;
flex-grow: 1;
}
</ui:style>
<g:FlowPanel addStyleNames="{style.container}">
<g:Label ui:field="gridBlurb" addStyleNames="{res.viewStandardStyle.viewTitle}" />
<g:HTMLPanel>
<g:FlowPanel ui:field="criteriaPanel" visible="false" />
<g:FlowPanel>
<g:Button ui:field="refresh">
<ui:text from="{text.refreshButtonCaption}" />
</g:Button>
</g:FlowPanel>
</g:HTMLPanel>
<c:DataGrid ui:field='table' addStyleNames="{style.dataGrid}"/>
<g:HTMLPanel>
<table style="width:100%">
<tr>
<td align='center'>
<c:SimplePager ui:field='pager' />
</td>
</tr>
</table>
</g:HTMLPanel>
</g:FlowPanel>
</ui:UiBinder>
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 have a requirement where, when a button is clicked, the user should be prompted with a popup/dialog box to enter some additional details such as last name, DOB, etc.I tried to play with window.confirm() but I think this does not serve my purpose. Can some help me how this can be achieved in GWT through UIBinder?
I tried some thing like this in my UI binder.xml
<g:HTMLPanel visible="false" >
<g:DialogBox ui:field="dialogPanel"
animationEnabled="true" modal="false" glassEnabled="false">
<g:caption>More Details</g:caption>
<table>
<tr>
<td colspan="2" align="center">
<g:Datepicker ui:field="DOB">DOB:</g:Datepicker>
</td>
</tr>
<tr>
<td>UserName:</td>
<td>
<g:TextBox ui:field="usernameTextBox" />
</td>
</tr>
<tr>
<td></td>
<td align="right">
<g:Button ui:field="loginButton">OK</g:Button>
</td>
</tr>
</table>
</g:DialogBox>
</g:HTMLPanel>
I am not sure which one to go with: popup or dialog box!
Thanks.
Here is the skeleton for a GWT Dialog box using uibinder:
MyDialogBox.java
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Widget;
public class MyDialogBox extends DialogBox {
private static final Binder binder = GWT.create(Binder.class);
interface Binder extends UiBinder<Widget, MyDialogBox> {
}
public MyDialogBox() {
setWidget(binder.createAndBindUi(this));
setAutoHideEnabled(true);
setText("My Title");
setGlassEnabled(true);
center();
}
}
MyDialog.ui.xml
<!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>
.panel {
background-color: ivory;
}
</ui:style>
<g:FlowPanel styleName="{style.panel}">
<g:Label>Dialog Content</g:Label>
</g:FlowPanel>
</ui:UiBinder>
show it using:
MyDialogBox m = new MyDialogBox();
m.show();
DialogBox is a child of PopupPanel and has all its features. Additionally it has (from the docs):
..caption area at the top and can be dragged by the user.
About usage in UiBinder (again from the docs):
DialogBox elements in UiBinder templates can have one widget child and one
<g:caption> child.
So it seems that you need to replace your <table> with a GWT widget, most probably <g:HTMLPanel> and put whole <table> inside it.
Also, PopupPanel and DialogBox are standalone widgets and normally do not get added to other Widgets, but are shown via .show() and hide() methods. So, in your UiBinder, you can put
<g:DialogBox> at the root level.