Eclipse Community Forums: Eclipse Scout » [NEON] Overriding org.eclipse.scout.rt.ui.html

Home

Home » Eclipse Projects » Eclipse Scout » [NEON] Overriding org.eclipse.scout.rt.ui.html

[NEON] Overriding org.eclipse.scout.rt.ui.html [message #1755247]

Wed, 01 March 2017 10:21

Eclipse User

Hello,

I hope this is not too broad of a question. To what extend is it possible to modify the HTML UI of Scout as defined in the *.css and *.js files in 'org.eclipse.scout.rt.ui.html' ?

It seems like this is a somewhat big part of the framework but I was unable to find any further documentation.

Thank you in advance for any elaboration. Also keep up the great work, Scout is probably the best designed and most productive framework in its area I have worked with so far.

With kind regards,
Alex

Re: [NEON] Overriding org.eclipse.scout.rt.ui.html [message #1755287 is a reply to message #1755247]

Thu, 02 March 2017 02:44

Eclipse User

I'll try to outline our approach, if you need more details somewhere, don't hesitate to ask:

get hold of the org.eclipse.scout.rt.ui.html-<version>.jar file and unpack it somewhere as a reference to the "original" setup
set your own ui-theme using the following line in your config.properties file:
scout.ui.theme=<your theme name>
find the css or js file you want to customize
in your own ui.html project recreate the structure the corresponding original file can be found at under src/main/java, create a file that has the same name as the original, extended by "-<your theme name>"
in your own file, include the original file, then modify whatever it is you want to modify

For example, we wanted to reduce the white space between table lines and our theme name is "cisi", so we have
our.domain.ui.html/src/main/js/scout/table/Table-cisi.css
which contains:

@import (less) "scout/table/Table.css";
@table-row-padding-y: 3px;

I hope this helps you get started.

Re: [NEON] Overriding org.eclipse.scout.rt.ui.html [message #1755298 is a reply to message #1755287]

Thu, 02 March 2017 03:46

Eclipse User

Thank you.
Changing CSS example is included in the Scout Contacts demo app.

What I really miss is a short documentation of how to modify the "real client" (browser) behaviour besides of the CSS style. There is a BeanField class... with no documentation. I suspect it is for modeling own widgets, but further investigation is needed because no documentation is given. If the BeanField is not for that purpose, then I would really appreciate an example of how to make own widgets or changing/extending the existing ones.

I think that topic is important for other users, too. Some days ago someone ask how to get a close button on the form title tabs. That is a really good question and I have no idea how to achieve that. I am even not sure if it is possible at all.
Sure, you can use just a normal button to close the form. That is totally okay for me. I even see that it has advantages to use a normal button when using the frontend from a mobile device. But unfortunately, not always the users and bosses can be convinced by pragmatic solutions. Sometimes the boss wants a close button on the tab, and if Scout cannot do this, then the boss don't want you to use Scout.

The topic is especially important for me, because my employer is at the moment in the state of evaluating different platforms for a modern HTML UI for our entire software. I was and I am evaluating Scout, and I'm with the OP that so far what I have seen Scout is the best framework I know and that I really learned a lot by just evaluating it. And that is exactly what I stated to the superiors. But they have doubts of using a framework because some think that this means being trapped in its abilities and using plain JavaScript and doing all the work ourselves would be more flexible. Me, I know that we will not be able to achieve what Scout provides in years. But unfortunately I am not the one who will decide. At some point of time in the future, I will have to convince them and for that I will at least have to to show that it is possible to write your own JS widgets in Scout. Showing to modify the existing ones would be even better.
Any help to this task would be really appreciated and again, I think also it would be interesting for other users to. Thank you. Smile

Re: [NEON] Overriding org.eclipse.scout.rt.ui.html [message #1755302 is a reply to message #1755298]

Thu, 02 March 2017 04:07

Eclipse User

Urs Beeli wrote on Thu, 02 March 2017 07:44

I hope this helps you get started.

Yes, thats the kind of thing I have been looking for. Thank you!

Benjamin Schulte wrote on Thu, 02 March 2017 08:46

The topic is especially important for me, because my employer is at the moment in the state of evaluating different platforms for a modern HTML UI for our entire software. I was and I am evaluating Scout, and I'm with the OP that so far what I have seen Scout is the best framework I know and that I really learned a lot by just evaluating it. And that is exactly what I stated to the superiors.

This is essentially my situation. The decision to re-implement our UI in HTML5 has been made and Scout has been declared the desired framework. We have outsourced the task to do so to a company specialized in usability concepts and UI design. Those folks are naturally not coming from a Java background and raised the question to what extend they can customize Scout leveraging HTML/CSS/JS.

Scout has been picked by us since it would allow us to reuse the knowledge we have on Java instead of having to invest a lot of resources in implementing a plain HTML/CSS/JS solution.

[Updated on: Thu, 02 March 2017 04:09] by Moderator

Re: [NEON] Overriding org.eclipse.scout.rt.ui.html [message #1755305 is a reply to message #1755298]

Thu, 02 March 2017 04:21

Eclipse User

> I would really appreciate an example of how to make own widgets
you may have a look at the scout widgets demo app [1]. specifically at the heatmap client (java) [2] and html (javascript + css/less) [3] modules. this custom widget is then consumed in classHeatmapFieldForm [4] of the widgets demo.

> But they have doubts of using a framework because some think that this means being trapped in its abilities

There is always a tradeoff between productivity and flexibility Razz

When productivity is more important than flexibility you should consider/discuss the following points
1) is the framework good enough for your goals?
2) what is the cost for migrating the software to some other technology stack in the future?

regarding 1) Scout is already pretty flexible and will become more flexible in the future.
regarding 2) building business apps against the Scout framework is building an application against an abstract application/UI model. As you are basically writing model code with Scout you should have a much better starting point (think model transfomer) to migrate to some other technology than if you directly start with a typical web framework.

> using plain JavaScript and doing all the work ourselves would be more flexible.

When flexibility matters more than productivity the decision should take into account the following risks:
1) substantially higher cost to develop and maintain an inhouse/custom framework
2) not being able to keep the necessary expertise in the enterprise to maintain/evolve the framework
3) not factoring in 1) and 2) will lead to an expensive legacy technology
4) if you go for some other web framework: for how many years do you expect that this will be state of the art? 2-3 years? what are your plans to move to some other framework?

Hope this helps you in finding more clarity in the situation you are in. As I did not address all of your issues, please continue to ask more specific questions.

[1] https://github.com/BSI-Business-Systems-Integration-AG/org.eclipse.scout.docs/tree/features/version/6.0.200.0/code/widgets
[2] https://github.com/BSI-Business-Systems-Integration-AG/org.eclipse.scout.docs/tree/features/version/6.0.200.0/code/widgets/org.eclipse.scout.widgets.heatmap.client
[3] https://github.com/BSI-Business-Systems-Integration-AG/org.eclipse.scout.docs/tree/features/version/6.0.200.0/code/widgets/org.eclipse.scout.widgets.heatmap.ui.html
[4] https://github.com/BSI-Business-Systems-Integration-AG/org.eclipse.scout.docs/blob/features/version/6.0.200.0/code/widgets/org.eclipse.scout.widgets.heatmap.client/src/main/java/org/eclipse/scout/widgets/heatmap/client/ui/forms/HeatmapFieldForm.java

Re: [NEON] Overriding org.eclipse.scout.rt.ui.html [message #1755347 is a reply to message #1755305]

Thu, 02 March 2017 08:58

Eclipse User

In this message I wrote about extending/replacing the Scout login box: https://www.eclipse.org/forums/index.php?t=msg&th=1083922&goto=1752568&#msg_1752568
In a similary way you're able to extend or replace every single Scout widget in the HTML UI.

Re: [NEON] Overriding org.eclipse.scout.rt.ui.html [message #1755598 is a reply to message #1755347]

Mon, 06 March 2017 04:01

Eclipse User

Hello,
thank you all for your engagement. I did notice the HeatMap widget, but was not aware of the fact that it is a custom widget. Thank you for pointing me on this - I investigated the code very well and together with Paolos example now I have some good examples to show of what is possible.

There is only one thing what I did not get yet: For what is the BeanField intended to use?

Re: [NEON] Overriding org.eclipse.scout.rt.ui.html [message #1755652 is a reply to message #1755598]

Mon, 06 March 2017 10:20

Eclipse User

Benjamin Schulte wrote on Mon, 06 March 2017 09:01

There is only one thing what I did not get yet: For what is the BeanField intended to use?

The BeanField is used if a custom bean (value object) should be visualized individually in the UI. There is no default visualization, adding a concrete bean field means, that you have to add a visual representation as well (CSS/JavaScript code)

There is an example here: https://scout.bsi-software.com/widgets/?dl=widget-beanfield (Advanced Widgets -> BeanField)

Source:
https://github.com/BSI-Business-Systems-Integration-AG/org.eclipse.scout.docs/blob/features/version/6.0.200.0/code/widgets/org.eclipse.scout.widgets.client/src/main/java/org/eclipse/scout/widgets/client/ui/forms/BeanFieldForm.java
https://github.com/BSI-Business-Systems-Integration-AG/org.eclipse.scout.docs/blob/features/version/6.0.200.0/code/widgets/org.eclipse.scout.widgets.ui.html/src/main/js/widgets/ExampleBeanField.js
https://github.com/BSI-Business-Systems-Integration-AG/org.eclipse.scout.docs/blob/features/version/6.0.200.0/code/widgets/org.eclipse.scout.widgets.ui.html/src/main/js/widgets/ExampleBeanField.css

Regards,
Paolo

Re: [NEON] Overriding org.eclipse.scout.rt.ui.html [message #1755750 is a reply to message #1755652]

Tue, 07 March 2017 07:51

Eclipse User

Thank you! I did see the example, but the intention was not clear for me. Now I understand.

Re: [NEON] Overriding org.eclipse.scout.rt.ui.html [message #1759565 is a reply to message #1755247]

Thu, 13 April 2017 04:02

Eclipse User

I did some work in the area of scout this topic is concerned with recently and, as always, was not disappointed in any way.

Even-tough there is not much documentation of this part yet, I was able to extend the UI pretty much as I wanted by extrapolating from the BeanField and Heatmap examples.

My recommendation to anyone interested in this is to clone org.eclipse.scout.docs and start working from there.

Additional information regarding the use of the javascript api of scout can be taken from the standard-widget implementations in org.eclipse.scout.rt.ui.html.

[Updated on: Thu, 13 April 2017 04:07] by Moderator

Previous Topic:	Exception in thread "main" java.lang.NoClassDefFoundError:
Next Topic:	[Blog Post] Overriding a method in Eclipse IDE and (non-Javadoc) comment lines

Goto Forum:

-=] Back to Top [=-

Current Time: Wed Jul 23 22:06:12 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter