|
|
| Line 2: |
Line 2: |
| | [[Category:Developer's Guide]] | | [[Category:Developer's Guide]] |
| | <!-- END CATEGORIES --> | | <!-- END CATEGORIES --> |
| − | = gCube GWT Widgets Library (gWL) = | + | = General guidelines about Portlet StyleSheets = |
| | | | |
| − | '''gWL''' has been created to '''uniform the Look & Feel''' for gCube Portlets using plain GWT (Not GWT-Ext).
| + | * Starting from gCube 3.7.0. we started to adopt Bootstrap [http://getbootstrap.com getbootstrap.com], a sleek, intuitive, and powerful front-end framework for faster and easier web development. Current version supported by the gCube Portal is v2.3.2 |
| | | | |
| − | '''Note:'''
| + | * If you develop with GWT please use the GWT Wrapper available https://gwtbootstrap.github.io (current version is 2.3.2-SNAPSHOT) |
| − | | + | |
| − | This guide is divided in two parts, in the first part you will learn how to configure/setup you GWT Application to use gWL, in the second one a tutorial will show you how to actually exploit gWL in your GWT Application.
| + | |
| − | | + | |
| − | == Setup you GWT Application to use gWL ==
| + | |
| − | | + | |
| − | Your existing GWT Portlet needs few changes to make use the of '''gWL'''
| + | |
| − | | + | |
| − | === First Step - Download gWL ===
| + | |
| − | | + | |
| − | You can download the gWL from here: [http://maven.research-infrastructures.eu/nexus/index.html#nexus-search;quick~gcube-widgets nexus-search;quick~gcube-widgets]. Make sure you always get the latest version.
| + | |
| − | | + | |
| − | If you use maven you can add the following dependency:
| + | |
| − | <source lang="xml">
| + | |
| − | <dependency>
| + | |
| − | <groupId>org.gcube.portlets.user</groupId>
| + | |
| − | <artifactId>gcube-widgets</artifactId>
| + | |
| − | <version>1.4.0-SNAPSHOT</version> <!-- Check the latest -->
| + | |
| − | </dependency>
| + | |
| − | </source>
| + | |
| − | | + | |
| − | === Second Step - Add gWL to your Build Path ===
| + | |
| − | | + | |
| − | Edit your GWT Application configuration file (file.gwt.xml). Add the following:
| + | |
| − | | + | |
| − | <source lang="xml">
| + | |
| − | | + | |
| − | ...
| + | |
| − | <!-- inherits gCube Widgets Library -->
| + | |
| − | <inherits name='org.gcube.portlets.user.gcubewidgets.WidgetFactory'/>
| + | |
| − | ...
| + | |
| − | ...
| + | |
| − | ...
| + | |
| − | | + | |
| − | </source>
| + | |
| − | | + | |
| − | === Third Step - Remove the default GWT style sheet (if any) ===
| + | |
| − | | + | |
| − | edit your GWT Application configuration file (file.gwt.xml). remove or comment the following:
| + | |
| − | | + | |
| − | <source lang="xml">
| + | |
| − | ...
| + | |
| − | <!-- Inherit the default GWT style sheet. You can change -->
| + | |
| − | <!-- the theme of your GWT application by uncommenting -->
| + | |
| − | <!-- any one of the following lines. -->
| + | |
| − | <inherits name='com.google.gwt.user.theme.standard.Standard'/>
| + | |
| − | ....
| + | |
| − | <!-- inherits name='com.google.gwt.user.theme.dark.Dark'/ -->
| + | |
| − | ...
| + | |
| − | ...
| + | |
| − | ...
| + | |
| − | </module>
| + | |
| − | </source>
| + | |
| − | | + | |
| − | '''You should also remove all the .gwt-* css classes from your portlet css (if any)''' e.g. .gwt-Button, .gwt-TextBox etc.
| + | |
| − | | + | |
| − | '''You are now ready to use gWL!!'''
| + | |
| − | | + | |
| − | == gCube Widgets Library Tutorial ==
| + | |
| − | | + | |
| − | Using gWL is a straight forward operation, it defines css classes for all GWT Widget, hence you don't need to define css classes anymore for them.
| + | |
| − | | + | |
| − | However you should make use of the ''org.gcube.portlets.user.gcubewidgets.client.GCubePanel'' class as main panel in your entry point class.
| + | |
| − | | + | |
| − | * the GCubePanel class constructor can be instanciated in two ways:
| + | |
| − | ** GCubePanel(String helpLink)
| + | |
| − | ** GCubePanel(String headerCaption, String helpLink)
| + | |
| − | | + | |
| − | '''Note:'''
| + | |
| − | a helpLink parameter must be always passed to the constructor, if you don't have any help url for your portlet just pass an empty String to the constructor. Make sure to edit it once the portlet is deployed in production though.
| + | |
| − | | + | |
| − | | + | |
| − | ===GCubePanel usage examples:===
| + | |
| − | | + | |
| − | ==== Panel with Header and Caption ====
| + | |
| − | | + | |
| − | <pre>
| + | |
| − | /**
| + | |
| − | * This is the entry point method.
| + | |
| − | */
| + | |
| − | public void onModuleLoad() {
| + | |
| − | GCubePanel mainLayout = new GCubePanel( "My Header Caption", "http://myporlet-usersguide-url");
| + | |
| − | ...
| + | |
| − | ...
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | gives the following result (panel content is arbitrary):
| + | |
| − | | + | |
| − | [[Image:Gcube-panel-s1.jpg]]
| + | |
| − | | + | |
| − | ==== Panel with Header NO Caption ====
| + | |
| − | | + | |
| − | <source lang="java">
| + | |
| − | /**
| + | |
| − | * This is the entry point method.
| + | |
| − | */
| + | |
| − | public void onModuleLoad() {
| + | |
| − | GCubePanel mainLayout = new GCubePanel("http://myporlet-usersguide-url");
| + | |
| − | ...
| + | |
| − | ...
| + | |
| − | </source>
| + | |
| − | | + | |
| − | gives the following result (panel content is arbitrary):
| + | |
| − | | + | |
| − | [[Image:Gcube-panel-s2.jpg]]
| + | |
| − | | + | |
| − | ==== Adding custom widgets to gCubePanel Header ====
| + | |
| − | | + | |
| − | If you want to add your widget to the header you'll need to use the ''addHeaderWidget(Widget toAdd)'' method.
| + | |
| − | | + | |
| − | in the example shown below a MenuBar widget has been added to the header, '''no css styles need to be defined for your Menubar widget'''
| + | |
| − | | + | |
| − | [[Image:Gcube-panel-s3.jpg]]
| + | |
| − | | + | |
| − | ==== Panel without Header ====
| + | |
| − | | + | |
| − | If you don't want to have a header in your gCubePanel you just need to use the ''enableHeader(boolean enable)'' to disable it.
| + | |
| − | | + | |
| − | [[Image:Gcube-panel-s4.jpg]]
| + | |
| − | | + | |
| − | ===GCubeDialog usage examples:===
| + | |
| − | | + | |
| − | When you need to whether use a Popup or a Dialog Box you may use the ''org.gcube.portlets.user.gcubewidgets.client.popup.GCubeDialog'' class.
| + | |
| − | | + | |
| − | Just use it as you would use a Standard GWT DialogBox.
| + | |
| − | | + | |
| − | == '''Overridden css styles''' ==
| + | |
| − | | + | |
| − | gWL overrides css styles for the following GWT Widgets:
| + | |
| − | | + | |
| − | *Button
| + | |
| − | *PushButton
| + | |
| − | *TextBox
| + | |
| − | *TextArea
| + | |
| − | *TabPanel
| + | |
| − | *DecoratedTabBar
| + | |
| − | *MenuBar
| + | |
| − | *Tree & Tree Item
| + | |
| − | *StackPanel
| + | |
| − | | + | |
| − | This means that you either don't have to apply styles to the widgets above nor to define .gwt-* style for any of them.
| + | |
| − | | + | |
| − | However, if you wish to add your own style to the widget you can do it by using the GWT native addStyleName method. Do not forget to Remove the default GWT style sheet (Third Step in this guide)
| + | |
| − | | + | |
| − | For PopupPanels - DialogBoxes you should use the org.gcube.portlets.user.gcubewidgets.client.popup.GCubeDialog class provided with this Library.
| + | |
