|
|
| (25 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | = gCube GWT Widgets Library (gWL) = | + | <!-- CATEGORIES --> |
| | + | [[Category:Developer's Guide]][[Category:TO BE REMOVED]] |
| | + | <!-- END CATEGORIES --> |
| | + | = 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 (beta) from here: [http://portal.d4science.research-infrastructures.eu/gWL/gCube-Widgets-Library.jar gWL Download]
| + | |
| − | | + | |
| − | === Second Step - Add gWL to your Build Path ===
| + | |
| − | | + | |
| − | Place gCube-Widgets-Library.jar in a convenience folder, we suggest ./lib, and add it to your project build path.
| + | |
| − | | + | |
| − | Once the jar file is added in the build path edit your GWT Application configuration file (file.gwt.xml). Add the following:
| + | |
| − | | + | |
| − | <pre>
| + | |
| − | <module>
| + | |
| − | ...
| + | |
| − | <!-- inherits gCube Widgets Library -->
| + | |
| − | <inherits name='org.gcube.portlets.user.gcubewidgets.WidgetFactory'/>
| + | |
| − | ...
| + | |
| − | ...
| + | |
| − | ...
| + | |
| − | </module>
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | === Third Step - Remove the default GWT style sheet (if any) ===
| + | |
| − | | + | |
| − | edit your GWT Application configuration file (file.gwt.xml). remove or comment the following:
| + | |
| − | | + | |
| − | <pre>
| + | |
| − | <module>
| + | |
| − | ...
| + | |
| − | <!-- 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>
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | '''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.GCubeFrame class as main panel in your entry point class.
| + | |
| − | | + | |
| − | * the GCubeFrame class constructor can be instanciated in two ways:
| + | |
| − | | + | |
| − | ** GCubeFrame(String helpLink)
| + | |
| − | ** GCubeFrame(String headerCaption, String helpLink)
| + | |
| − | | + | |
| − | | + | |
| − | GCubeFrame usage examples:
| + | |
| − | | + | |
| − | <pre>
| + | |
| − | /**
| + | |
| − | * This is the entry point method.
| + | |
| − | */
| + | |
| − | public void onModuleLoad() {
| + | |
| − | // GCubeFrame mainLayout = new GCubeFrame( "My Header Caption", "");
| + | |
| − | </pre>
| + | |
