|
|
|
|
Re: [Oxygen] Initial size of Search Form [message #1787150 is a reply to message #1786651] |
Sat, 19 May 2018 18:27  |
Eclipse User |
|
|
|
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 18:29] by Moderator
|
|
|
Powered by
FUDForum. Page generated in 0.06921 seconds