I build an app using smartGWT (3.1) (GWT: 2.5).
To hold changes to the various views (scrollbar-position in ListGrids etc.) I add all the views to the main canvas and just change their visibility (show() / hide())
(hide() all children then show() the one which was selected in the menu)
This works fine until I use hichcharts (gwt.highcharts-1.5.0.jar / highcharts.js -> 2.3.5).
no difference if I wrap the Chart in a smartGWT or GWT widget, when I hide the views some elements of the chart stays visible.
Ledgend-background, Ledgend-lines, and some dots from the data-points stays visible. It happens in firefox 18.0.2 and IE 9. In Chrome (24.0.1312.57 m) it works.
I try TabSet aswell. when i switch tabs (which should hide the 'old' tab) the same elements of the chart stays visible.
besides of the visibility-problem the still active Listener from the chart are another problem.
summary:
highcharts chart do not hide proper when parent-widgets hide (in firefox & IE).
For the display issues, and since you didn't provide any code example, I have used the wrapper provided on GWT Highcharts forum. With correct usage of hide/show calls (e.g. when tab is selected or deselected, call show or hide, respectively) I have managed to overcome the issue described in all browsers.
I had the same issue. I solved it by adding a tabSelectedHandler to the tabSet and inside that I show or hide the charts using StockChart.setVisible(boolean) depending on the selected tab.
tabSet.addTabSelectedHandler(new TabSelectedHandler()
{
#Override
public void onTabSelected(TabSelectedEvent event)
{
if (event.getTab().getTitle().equals("Charts"))
{
chart.setVisible(true);
}
else
{
chart.setVisible(false);
}
}
});
Related
In my Vaadin 14 app, I want to add an Accordion component that has several components in its summary (which is always displayed), among which a Button. Clicking in the summary normally toggles the display of the AccordionPanel content. How can I prevent the AccordionPanel to collapse/expand when the button in the summary is clicked?
Objects are created simply as follows:
Accordion accordion = new Accordion();
MyPanel panel = new MyPanel();
accordion.add(panel);
with MyPanel constructor simply calling setSummary() with a layout containing the button.
I found the answer in this thread on the forum.
It turns out you can prevent the propagation of the button click with this hack:
button.getElement().addEventListener("click", click -> {
//do nothing
}).addEventData("event.stopPropagation()");
This seems like a core functionality that the framework should provide out of the box, but this ticket is still open.
Adding this to your view:
UI.getCurrent().getPage()
.executeJs("Array.from(document.getElementsByTagName('vaadin-accordion-panel')).forEach(element=>element.shadowRoot.querySelector(\"div[role=button]\").replaceWith(element.shadowRoot.querySelector(\"div[role=button]\").cloneNode(true)))");
will disable all clicks on all the accordions toggle and accordion summary. However you will need to include a button or trigger for opening and closing the accordion. I don't know if this is what you want?
In Vaadin 14.4.2, I have a scenario in which I have added a chart inside a splitLayout. However, when I, as a user, expand or shrink the splitLayout, the corresponding chart does not resize. The other components, such as the grid do automatically resize. Is there some "magic" configuration option to get the chart to behave like other components? (The screenshot below shows the chart not having resized, even though the grid beneath it did properly automatically resize.) (Also fyi, I call this: spectraChart.setSizeFull(); so the chart should be using up all the available space.) (Another FYI: I could probably "trap" the splitLayout resize even then redo the plotting, but it seems to me that this should ideally not be necessary in the a 'framework' solution such as Vaadin, since a chart is a component that should behave like other components, such as the grid.)
Yes, unfortunately that is true. You can workaround the issue by doing explicit JavaScript call to Charts to reflow when splitter position has been changed. The code snippet below finds all charts and reflows them:
innerLayout.addSplitterDragendListener(event -> {
getUI().ifPresent(
ui -> ui.getPage()
.executeJavaScript(
"Array.from(window.document.getElementsByTagName('vaadin-chart')).forEach( el => el.__reflow());"
));
});
In my Angular 2 environment, the OpenLaysers and Highcharts components are not rescaling themself after I change the Bootstrap layout. If I click on my button that changes the Bootstrap grid classes, the components should rerender. I tried rerendering the charts through highcharts.redraw() function - that does not fix the problem. As visible in the video, if I press 'F12' and go into 'Developer Tools' (showing as a black box at the bottom - 0:08), the components redraw. Therefore I tried workarounds like giving the body a zoom of 2.0000.1, new zIndex, different height, display 'none' - 'block'. Nothing works.
In Highcharts you should use chart.reflow() not chart.redraw(). Alternatively, you can use chart.setSize(newWidth, newHeight).
I am trying to add an image next to the hamburger menu in my app. I am using a master detail page and it renders fine in ios and android. I tried using setting the icons for the detail pages. but the icons never showed. How do I achive this. I am looking to add an image similar to the amazon app.
I checked out this app on my phone and it uses a lot of custom constructions that aren't supported by out of the box Xamarin Forms controls. Something like the back arrow next to the hamburger menu is not a standard thing (on iOS at least). Also looking at the actual menu that the hamburger button triggers it becomes clear that its not an out of the box hamburger menu. Theirs pops over the content instead of sliding it out of view as the built-in one does.
More than likely they implemented their own hamburger menu and navigation structure which gave them the freedom to add buttons next to it. If you want to achieve this with out of the box controls you will most likely need custom renderers for each platform to create a replica of this navigation structure.
What is built-in in Xamarin Forms is that you can set the page title to an image instead of text by using the NavigationPage.SetTitleIcon method, which could be used to achieve what you want:
public class MyPage : NavigationPage
{
public MyPage ()
{
var myContentPage = new MyContentPage (Color.White);
this.Push (myContentPage);
var s = "icon.png";
NavigationPage.SetTitleIcon (myContentPage, s);
}
}
Even then, this is limited in functionality. If you want to fiddle with the alignment of the image e.g. you would also need to resort to a custom renderer.
I have three tabs in a Jquery UI tabs widget. Inside of the tabs I am creating a Wijmo Grid. One on each tab. The Grid is based on Jquery UI as well. The grid on the first tab seems fine.
The grid on the second and third tabs (the hidden ones) have strange sizing issues. The Grid on one appears roughly 10 pixels wide and the full height. The one on the third tab appears about 50 by 50 pixels.
I know the code on those tabs is fine because if I make one of those the primary tab then it works fine and the other two are broken. So I think it is some sort of interaction between the Jquery UI Tabs widget and the contents of the tabs (a Wijmo Grid). Does anyone know what causes this strange interaction and what I can do to make it work predictably?
The Grid does size calculation when initializing. It needs to be displayed somehow when doing so.
You can add class="ui-helper-hidden-accessible" to make it off screen when rendering.
Make sure you initialize the grids then the widgets. Or you can call $("#grid").wijgrid("doRefresh"); when the tab is activated that it is contained in.