| Most abstract GUI component for us to customize? [message #1768429] |
Tue, 18 July 2017 11:02  |
Eclipse User |
|
|
|
We are developing the web frontend for a Scout application. We have a specific plan as to how the GUI should look. It seems there is no component which fits our needs exactly, so we will have to customize one of the available ones. So right now I am trying to figure out which GUI component is best suited for what we want to do.
I'll try to explain what we need (I hope I'm using the correct names for things):
The idea is that after a certain GUI interaction a new Form comes sliding in from the right, mostly but not completely covering the previous Form. Then, after another interaction, yet another Form comes sliding in, and so on. In the end it may look like when you spread playing cards from left to right on the table.
I looked at Views and Dialogs, and of course they are both heavily controlled by JavaScript and not easily stripped of all the functionality we don't want (e.g. resizability). What we need is something more simple/abstract which still contains the functionality (backend connectivity, ability to instantiate more of its kind) of its specialized inheritors. Ideally, we would have an empty div for us to put other components in, without the ability to be resized, dragged around, etc.
Am I right in assuming I can just extend AbstractLayout with a layout of my own?
If this is correct, is there a place where can I get documentation about the process?
Thanks a lot!
Marius
|
|
|
| Re: Most abstract GUI component for us to customize? [message #1769206 is a reply to message #1768429] |
Thu, 27 July 2017 11:50  |
| Eclipse User |
|
|
|
Hi Marius
On JavaScript side, the most abstract component is the Widget (https://eclipsescout.github.io/7.0/technical-guide.html#widget). You could use that, but then you probably have a lot of work to do.
I think the form is better suited for your use case. At first I thought you could introduce a new display hint in addition to view and dialog. But that seems to be unnecessary time-consuming because you would need to extend at least the classes Desktop, FormStore and JsonDesktop. It is probably easier to use the display hint view and to add a custom property to your form, in that case you would only have to extend JsonForm and override initJsonProperties to make sure that property is sent to client.
However, you still need to write some JavaScript to actually display it.
A form is managed by its display parent. The display parent typically is the desktop, but may be another form or an outline as well. The display parent holds a list of the forms which belong to him. The forms are only visible if the display parent is visible. If you call desktop.showForm(form) the form is added to that list and eventually shown, if you call desktop.hideForm(form) it will be removed.
On server side, this is managed by the class FormStore, on JavaScript side by FormController resp. DesktopFormController. I think you could extend the DesktopFormController and override the function registerAndRender. This is the place where either a dialog or view is opened. In order to replace the controller, you can use the ObjectFactory, see https://eclipsescout.github.io/7.0/technical-guide.html#object-factory for details.
In order to achieve the slide in effect, you could do it in the same way as the scout.MobilePopup.js does. The mobile popup may embed any widget (also forms) and slides in from the bottom of the screen using a CSS animation. You may find its usage in scout.FormMenu.js.
I have not tried it but I think it might work :-)
Claudio
[Updated on: Thu, 27 July 2017 11:51] by Moderator |
|
|
Powered by
FUDForum. Page generated in 0.03875 seconds
Home