I am making a GWT app based off of an HTML mockup. The mockup has about 4 or 5 different layouts made with divs and css. Right now I have one HTML page with just the basic elements of my layout (header, body, footer). The other layouts are the same thing, with different layouts for the body (i.e. two column, three column). I attempted to add the extra markup the the base template using the following code:
RootPanel.get("main_area").add(html);
Where main_area is the ID of my body div and html is an HTML object with the additional divs for the column layout.
This works fine, but when I try to add some text (or anything) to the divs I added:
RootPanel.get("left_column").add(new Label("test"));
I get the following error:
java.lang.AssertionError: A widget that has an existing parent widget may not be added to the detach list
at com.google.gwt.user.client.ui.RootPanel.detachOnWindowClose(RootPanel.java:122)
at com.google.gwt.user.client.ui.RootPanel.get(RootPanel.java:197)
I assume that I'm going about this completely wrong, but I have no idea what the correct way of doing this would be.
You may want to look into HTMLPanel.
i.e.
HTMLPanel hpanel = new HTMLPanel("<div id='morehtml'></div>");
hpanel.add(new Label("Hello, I am inside morehtml"), "morehtml");
RootPanel.get("main_area").add(hpanel);
I usually have an div which is the entry point and then I build all my GWT layout from that, e.g. ( not checked in IDE):
Panel root = RootPanel.get("entryPoint");
VerticalPanel rows = new VerticalPanel();
rows.add(new Label("Row 1"));
rows.add(new Label("Row 2"));
root.add(contents);
Related
I have an ant design table. One of its columns is something like this:
which contains three icons and one "AutoComplete" component showing some names. In editing mode, I have put all these four components ( 3 icons and one autocomplete) in a "Form.Item" tag. But the autocomplete component does not work properly in editing mode.( I mean when it is clicked for edit, the name inside it is cleared and the new selected name will not put in autocomplete input). But when I remove the three icons from the code, the autocomplete works fine.
Why this happens? can any body help on this?
As far as I know Form.Item need to have one child element because he implicitly pass to child value and onChange props. You probalby can create wrapper for your Autocomplete component, something like following (it's just idea):
function Autocomplete (props) {
return (
<div>
<Icon1/>
<Icon2/>
<Icon3/>
<AntdAutocomplete value={props.value} onChange={props.onChange}/>
<div/>
);
}
I am new to TYPO3 and tried out a little bit so far. Now I am stucked or lets say unsure if it's the right way how I would do it.
First I created a simple HTML file and put some CSS to it. When this simple site was finished, I tried a transition to TYPO3 and created some templates + typoscript code. Now I want to work on the content, so I can create this with the integrated editor in TYPO3 and remove it from my templates.
My site would look like this:
Header
News Row (4 Columns)
Another Content Row (3 Columns)
Another Content Row (3 Columns)
Footer
Header and Footer are in partials and don't get any content from the editor. For the news section I would use a plugin. The other content rows have to be filled with content from the TYPO3 editor so my first thoughts are that my backend layout must look like this:
News Row (do I need 4 columns here or just one and let the plugin work?)
left1 center1 right1
left2 center2 right2
Would the backend layout look like this? And for the implementation with typoscript do I have to write all columns in variables e.g. center < styles.content.get... and create all elements in the columns there or can I outsource every variable in one file for example?
Hope you guys understand my problem and can give me some good hints!
About the news row, use just one column and then modify the EXT:news templates to arrange the list of news on four columns;
About the other two rows, you have several options, I think
1) each "cell" is defined in your backend layout, and then yes, you would need a separate colPos for each, something like (in TypoScript):
center < styles.content.get
left < styles.content.get
left.select.where = colPos = 1
2) Same as 1) but you can use the interesting approach used by Benjamin Kott on his sitepackagebuilder . To make it short, he defines a "dynamicContent" TypoScript object that can accept as parameters the colPos and even the id of a specific page. You just write in yout Fluid Template:
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}" />
And so forth for the others. If you want to discover more, visit https://www.sitepackagebuilder.com/ and create a package (that you could use as a base for your development or just "pillage" it ;) ) You will also find several videos on this topic on the Youtube TYPO3 official channel
3) same as 1) but using the EXT:vhs that adds a specific viewhelper to render the content of a colPos:
<v:content.render column="0" />
4) Last but not the least you can use EXT:gridelements to build content element that can have other content elements as children with a "backend_layout" approach. In this approach you just need one "cell" in your backend layout, and in this cell you will put a "gridelement" CE that is sub-divided into three separate columns and in each one you can put one or more content elements (same for the third row). This approach will give you the maximum flexibility
I hope I made myself clear, if I misunderstood your question, don't hesitate to write :)
I am creating a GWT app with a DataGrid. The DataGrid hierarchy is:
RootLayoutPanel->DockLayoutPanel->DockLayoutPanel->LayoutPanel->DockLayoutPanel->DockLayoutPanel->DataGrid
Apart from the adding to RootLayoutPanel, the structure is all defined in uiBinder XML
The DataGrid is included in the XML using the following code
<g:ScrollPanel>
<c:DataGrid ui:field='ownershipGrid' visible="true"/>
</g:ScrollPanel>
In my view I have
#UiField
DataGrid<OwnershipInformation> ownershipGrid;
...
ownershipGrid = new DataGrid<OwnershipInformation>(OwnershipInformation.KEY_PROVIDER);
ownershipGrid.setMinimumTableWidth(140, Style.Unit.EM);
ownershipGrid.setKeyboardSelectionPolicy(HasKeyboardSelectionPolicy .KeyboardSelectionPolicy.ENABLED);
... add comlumns to ownershipGrid ...
ownershipInformationList.addDataDisplay(ownershipGrid);
However, I still don't get my table to show. I have called ownershipGrid.getRowCount() and it shows as having 6 rows, so I know that data is there. The panels in which the DataGrid is contained are all visible.
Regards, Richard
The problem is that after adding the DataGrid in the uiBinder, I then call new and point the private variable to a different DataGrid that isn't being displayed.
You've forgot to declare the grid provided:
#UiField DataGrid<OwnershipInformation> ownershipGrid;
should be:
#UiField(provided=true) DataGrid<OwnershipInformation> ownershipGrid;
Let's say I create an HTMLPanel with some HTML like:
<p>
Blah blah <span id='1'>more html... </span>
</p>
Now I want to attach an event handler to the span. I want to see it as an InlineHTML GWT widget. I tried:
HTMLPanel html = new HTMLPanel(stringOfHTML);
parentWidget.add(html);
String id = "1";
Element span = html.getElementById(id);
InlineHTML wid = InlineHTML.wrap(span); // -- error here
html.addAndReplaceElement(wid, id);
The second-to-last line dies with the AssertionError: A widget that has an existing parent widget may not be added to the detach list.
Is there a way to wrap sub elements in a HTMLPanel?
This is GWT 2.4.
Note
After a few comments and answers I realized that I forgot to mention: usually UiBinder is the answer here, but I'm not using it because the input is html text created in another context by non-programmers.
No, not really. You getting this exception because <span> element is already a part of some widget. wrap methods can be used only to create widgets on top of elements which are not part of some other widget. If you want to handle clicks on this span, you can add dom handler to the HTMLPanel, and then detect which element was clicked.
Convert your <span> into an InlineLabel inside your UiBinder template and attach anything you want to it :).
I want get html id of input field & icon field of a TextItem widget, how can i do this ???
(no getId methos is available for TextItem widget & seems that setAttribiute("id", "foo") has no effect)
since everything is on a single page, i wouldn't dare to set any IDs yourself, the probability that you create two items (by mistake) with the same id is quite high.
why would you need it anyway?
you may get the html element by name
textItem.setName("foo");
DOM.getElementsByName("foo")