Eclipse Community Forums: Eclipse Scout » [Oxygen] Initial size of Search Form

Help

Home

Home » Eclipse Projects » Eclipse Scout » [Oxygen] Initial size of Search Form

Show: Today's Messages :: Show Polls :: Message Navigator

[Oxygen] Initial size of Search Form [message #1786395]

Wed, 02 May 2018 15:39

Peter Pfeifer

Messages: 213
Registered: November 2014

Senior Member

Hello there,

I was wondering if it is somehow possible to set the initial size of a search form.

I stumble across this issue within my sample project and just saw the same behavior within the Contacts Demo App (https://scout.bsi-software.com/contacts/)

There the search form is also using more space as it actually might have to (see screenshot).

index.php/fa/32741/0/

So is it possible, that the size can somehow be adjusted to the actual space needed?

Thanks

Peter

Attachment: searchform.png
(Size: 29.30KB, Downloaded 409 times)

Report message to a moderator

Re: [Oxygen] Initial size of Search Form [message #1786598 is a reply to message #1786395]

Tue, 08 May 2018 08:03

Patrick Baenziger

Messages: 96
Registered: September 2011

Member

Hello Peter

It took me some searching, but I believe this is a CSS / LESS property called "table-control-container-height" which defaults to 345 pixels.
You can override this, but note that this is a global property and - as far as I know - not adjustable on a per-form basis to save space.

If you wish to change this property, you'll need the usual procedure for overriding CSS / LESS properties (create a new LESS file with a new altered property definition in your "ui.html" Maven module, create a LESS-Module-File and include your new file there).

Patrick

Report message to a moderator

Re: [Oxygen] Initial size of Search Form [message #1786609 is a reply to message #1786395]

Tue, 08 May 2018 11:17

Claudio Guglielmo

Messages: 256
Registered: March 2010

Senior Member

Hi Peter

Patrick is right, you can adjust the LESS variable called @table-control-container-height.

This variable is rather new and will only work from the 8.0 release. For previous releases you have to adjust the variable using JavaScript:

scout.TableControl.CONTAINER_SIZE = 200;

Setting it for a specific form is not supported so far. You could probably do it by extending SearchFormTableControl, add a property called height, use the new table control by overriding AbstractPageWithTable.createSearchFormTableControl() and make sure the new property will be sent to the UI. In TableControl.js the property 'height' already exists so if it comes along with your table control it should work without the need to write custom JavaScript code.

Hope it helps
Claudio

Report message to a moderator

Re: [Oxygen] Initial size of Search Form [message #1786651 is a reply to message #1786609]

Wed, 09 May 2018 03:48

Peter Pfeifer

Messages: 213
Registered: November 2014

Senior Member

Hi there,

thanks for the answers. So then JavaScript it is.

Unfortunately JavaScript programming is something I have never done before in my life :) If someone could me point to the right direction where to start I am more than happy.

Thanks a lot

Peter

Report message to a moderator

Re: [Oxygen] Initial size of Search Form [message #1787150 is a reply to message #1786651]

Sat, 19 May 2018 22:27

Patrick Baenziger

Messages: 96
Registered: September 2011

Member

I'll try to give you a brief overview how the HTML UI works with the JavaScript and LESS Files. The specific code to change the height as at the end of this post.
The files and locations mentioned here are named like the "HelloWorld" example project, depending on your project it may vary.

The helloworld.ui.html project serves as the home of all UI-related code that is not part of the "model" (the usual Java Code you write to compose the interface, like forms, groupboxes etc., located in helloworld.client).

In the helloworld.ui.html project, you'll see different folders:

src/main/java : Contains UIServletFilters etc.
src/main/resources/WebContent: Contains the basic HTML and Javascript components the app needs to launch.
src/main/js: The location to put your JavaScript code. It will be included as additional resources (build-helper Maven plugin included in the default Master POM).

The way Scout now works:

The index.html is coded to load the helloworld-all-macro.js
The hello-world-macro.js can include further modules/javascript files using the __include('path') directive
Similarly, the helloworld-all-macro.less is included (and pre-processed to a CSS file) and can use the the "@import" directive to include other LESS files
The directives are replaced by the ScriptFileBuilder and turned into actual JS/CSS.

To get around to your actual question:
If you want to change the height of the TableControl (and thus, search form) in every location, do the following: (Scout 7.0)

Create the file "helloworld-module.js" in src/main/js
Add this line to the helloworld-all-macro.js:
__include("helloworld-module.js");
Paste this line into your newly created helloworld-module.js:
scout.TableControl.CONTAINER_SIZE = 200;
Reload your browser (F5), you should get the new version immediately. Watch for messages in the console from the ScriptFileBuilder indicating if the file was not found (check the path). You'll also see a message in the "helloworld-all.js" file delivered to the browser if it fails.

For more elaborate examples, check out the UI HTML module of the Widgets Demo App.

[Updated on: Sat, 19 May 2018 22:29]

Report message to a moderator

Previous Topic:	AbstractPageWithTable.execCreateChildPage
Next Topic:	Fresh Eclipse Oxygen w Scout Install On Centos 7

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Tue Apr 16 08:12:58 GMT 2024

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter