Difference between revisions of "GCube Widgets Store"
(→Workspace Sharing Widget) |
(→Workspace Sharing Widget) |
||
Line 327: | Line 327: | ||
'''Fully Version:''' The sharing dialog send the selected users to server to store sharing data. | '''Fully Version:''' The sharing dialog send the selected users to server to store sharing data. | ||
+ | |||
+ | '''Screenshot:''' | ||
+ | |||
'''Usage Example:''' | '''Usage Example:''' | ||
Line 353: | Line 356: | ||
'''Smart Version:''' The sharing dialog provides the selected users as InfoContactModel or CredentialModel | '''Smart Version:''' The sharing dialog provides the selected users as InfoContactModel or CredentialModel | ||
+ | |||
+ | '''Screenshot:''' | ||
+ | |||
'''Usage Example:''' | '''Usage Example:''' |
Revision as of 14:51, 4 March 2014
Contents
gCube Widgets Store
This page lists the available (reusable) GWT Widgets that developers can integrate in their GWT Projects/portlets if they need to.
Every Widget listed is provided with a screenshot and instructions on how to integrate it.
Available Widgets:
Select the Style
If you want to use the default style just skip this. If you want to use the GXT style instead you have to add the following directive to your WebApp main css stylesheet:
@import url('$MODULE_NAME/old-dialog.css');
Where $MODULE_NAME is the name of your gwt module: example:
if you open your gwt.xml file the module name is the value of the rename-to attribute
<module rename-to='myapplicationname'>
then you would add at the top of your application main css stylesheet the following:
@import url('myapplicationname/old-dialog.css');
FileUpload Progress Bar Dialog
Description:
Use this widget to display a dialog containing the possibility to upload a file on server with an actual progress of the current uploaded file in percentage; To get to know which file was uploaded listen for the {@link FileUploadCompleteEvent} on the {@link HandlerManager} instance you will have to pass to this widget.
Screenshots:
Maven coordinates:
<dependency> <groupId>org.gcube.portlets.widgets</groupId> <artifactId>fileupload-progress-bar</artifactId> <version>LATEST</version> </dependency>
Add the following to your project .gwt.xml file:'
<inherits name='org.gcube.portlets.widgets.fileupload.FileUpload' />
Usage Example:
private void showSample() { HandlerManager eventBus = new HandlerManager(null); final UploadProgressDialog dlg = new UploadProgressDialog("Share File", eventBus); dlg.center(); dlg.show(); /** * get the uploaded file result */ eventBus.addHandler(FileUploadCompleteEvent.TYPE, new FileUploadCompleteEventHandler() { @Override public void onUploadComplete(FileUploadCompleteEvent event) { //the filename and its path on server are returned to the client String fileName = event.getUploadedFileInfo().getFilename(); String absolutePathOnServer = event.getUploadedFileInfo().getAbsolutePath(); GWT.log(fileName + " uploaded on Server here: " + absolutePathOnServer); //just for this example the timer is just to pretend you are doing something with the uploaded file on the server, wait 3 seconds Timer t = new Timer() { @Override public void run() { /** * you MUST call this method once the upload is finished and you're done processing the file on the server */ dlg.showRegisteringResult(true); //or false if an error occurred } }; t.schedule(3000); } }); }
- Add the following to your project web.xml file (Replace $YOUR_SERVLET_URL_PATTERN with your actual servlet url pattern value)
<servlet> <servlet-name>uploadprogress</servlet-name> <servlet-class>org.gcube.portlets.widgets.fileupload.server.UploadProgressServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>uploadprogress</servlet-name> <url-pattern>/$YOUR_SERVLET_URL_PATTERN/uploadprogress</url-pattern> </servlet-mapping> <!-- DO NOT CHANGE - DO NOT Replace URL PATTERN HERE --> <servlet> <servlet-name>upload</servlet-name> <servlet-class>org.gcube.portlets.widgets.fileupload.server.UploadServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>upload</servlet-name> <url-pattern>/FileUpload/upload</url-pattern> </servlet-mapping> <!-- END DO NOT CHANGE -->
You are ready to use it.
Users Selection Dialog
Description:
Use this widget to display a dialog containing portal users from where one can choose. The widget allows you to provide the list of the users to display asynchronously and sends an event when a user is selected so that you can customize what to do in that case.
Screenshots:
Maven coordinates:
<dependency> <groupId>org.gcube.portlets.widgets</groupId> <artifactId>user-selection-dialog</artifactId> <version>LATEST</version> </dependency>
Add the following to your project .gwt.xml file:'
<inherits name='org.gcube.portlets.widgets.userselection.UserSelection' />
Please Note:
You will have to create your getUsers method in your servlet and pass it to the Widget. To get to know which user was selected listen for the {@link SelectedUserEvent} on the {@link HandlerManager} instance you pass to this widget.
You are ready to use it.
Pick User Widget
Description:
Use this widget to display a a dropdown user list you can attach to any textbox to make select portal users (typing @ sth or the char you like better to trigger it). The widget expects you to provide the list of the users to display and sends an event when a user is selected so that you can customize what to do in that case.
Screenshots:
Maven coordinates:
<dependency> <groupId>org.gcube.portlets.widgets</groupId> <artifactId>pickuser-widget</artifactId> <version>LATEST</version> </dependency>
Add the following to your project .gwt.xml file:'
<inherits name='org.gcube.portlets.widgets.pickuser.PickUser' />
Please Note:
You will have to create your getUsers method in your servlet and pass it to the Widget. To get to know which user was selected listen for the {@link PickedUserEvent} on the {@link HandlerManager} instance you pass to this widget.
You are ready to use it.
Workspace Light Tree
Description: This widget allows your application to open a popup containing the user workspace. It gives the possibility to users to either select a file/folder form the workspace or save a file in a desired workspace folder.
Screenshots:
Maven coordinates:
<dependency> <groupId>org.gcube.portlets.widgets</groupId> <artifactId>workspace-light-tree</artifactId> <version>LATEST</version> </dependency>
Add the following to your project .gwt.xml file:'
<!-- inherits WorkspacePortletLightTree widget --> <inherits name='org.gcube.portlets.widgets.lighttree.WorkspacePortletLightTree' />
- Add the following to your project web.xml file (Replace $YOUR_SERVLET_URL_PATTERN with your actual servlet url patter value)
<servlet> <servlet-name>WorkspaceLightService</servlet-name> <servlet-class>org.gcube.portlets.widgets.lighttree.server.WorkspaceServiceImpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>WorkspaceLightService</servlet-name> <url-pattern>/$YOUR_SERVLET_URL_PATTERN/WorkspaceLightService</url-pattern> </servlet-mapping>
You are ready to use it.
Switch Button Widget
Description: The Switch Button Widget is a GWT Widget that styles a Checkbox using a fancy sliding effect.
Screenshots:
Maven coordinates:
<dependency> <groupId>org.gcube.portlets.widgets</groupId> <artifactId>switch-button-widget</artifactId> <version>LATEST</version> </dependency>
Add the following to your project .gwt.xml file:'
<inherits name='org.gcube.portlets.widgets.switchbutton.SwitchButton' />
You are ready to use it.
Workspace Mail WIdget
Description: This widget allows your application to open a popup allowing users to send messages to other users via the gCube Messaging System.
Screenshots:
Maven coordinates:
<dependency> <groupId>org.gcube.portlets.widgets</groupId> <artifactId>wsmail-widget</artifactId> <version>LATEST</version> </dependency>
Add the following to your project .gwt.xml file:'
<inherits name='org.gcube.portlets.widgets.wsmail.WsMail_Widget' />
- Add the following to your project web.xml file (Replace $YOUR_SERVLET_URL_PATTERN with your actual servlet url patter value)
<servlet> <servlet-name>mailWisdgetServlet</servlet-name> <servlet-class>org.gcube.portlets.widgets.wsmail.server.WsMailServiceImpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>mailWisdgetServlet</servlet-name> <url-pattern>/$YOUR_SERVLET_URL_PATTERN/mailWisdgetServlet</url-pattern> </servlet-mapping>
You are ready to use it.
Workspace Sharing Widget
Description: This widget allows your application to open a dialog allowing users to share workspace item to other users via the gCube System.
Fully Version: The sharing dialog send the selected users to server to store sharing data.
Screenshot:
Usage Example:
String ITEMID = "1232223-45678-12345-124a-12345678909"; //A workspace item ID; /** * This controller instance the sharing dialog * @param itemId workace item id * @param shareOnlyOwner if true, only owner can share, otherwise an alert with an error message is displayed * @param defaultPermission ACL_TYPE default permission, if is null default ACL_TYPE is loaded from server */ WorkspaceSharingController controller = new WorkspaceSharingController(ITEMID, true, ACL_TYPE.READ_ONLY); final Dialog sharingWindow = controller.getSharingDialog(); Button openSharingWindow = new Button("Show Sharing Window", new ClickHandler() { public void onClick(ClickEvent event) { sharingWindow.show(); } });
Smart Version: The sharing dialog provides the selected users as InfoContactModel or CredentialModel
Screenshot:
Usage Example:
FileModel file = new FileModel("id", "filename", false); /** * This controller instance the smart sharing dialog * @param file - a fake file to display the field name ("filename") into dialog * @param listAlreadySharedContact */ WorkspaceSmartSharingController controller = new WorkspaceSmartSharingController(file, null); final Dialog sharingWindow = controller.getSharingDialog(); Button openSharingWindow = new Button("Show Sharing Window", new ClickHandler() { public void onClick(ClickEvent event) { sharingWindow.show(); } }); sharingWindow.getButtonById(Dialog.OK).addListener(Events.Select, new Listener<BaseEvent>() { @Override public void handleEvent(BaseEvent be) { if(smartShare.isValidForm(true)){ //THAT'S OK sharingWindow.getSharedListUsers(); //@return the selected contacts (as InfoContactModel) sharingWindow.getSharedListUsersCredential(); //@return the selected contacts (as CredentialModel) for (InfoContactModel contact : sharingWindow.getSharedListUsers()) { System.out.println(contact); } for (CredentialModel credential : sharingWindow.getSharedListUsersCredential()) { System.out.println(credential); } } } });
Maven coordinates:
<dependency> <groupId>org.gcube.portlets.widgets</groupId> <artifactId>workspace-sharing-widget</artifactId> <version>LATEST</version> </dependency>
Add the following to your project .gwt.xml file:'
<inherits name="org.gcube.portlets.widgets.workspacesharingwidget.WorkspaceSharingWidget" />
- Add the following to your project web.xml file (Replace $YOUR_SERVLET_URL_PATTERN with your actual servlet url patter value)
<servlet> <servlet-name>workspacesharing</servlet-name> <servlet-class>org.gcube.portlets.widgets.workspacesharingwidget.server.WorkspaceSharingServiceImpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>workspacesharing</servlet-name> <url-pattern>/$YOUR_SERVLET_URL_PATTERN/workspacesharing</url-pattern> </servlet-mapping>
Guided Tour Widget
Please refere to the dedicated Guided Tour Widget wiki page
Application News Widget
Please refere to the dedicated Application News Widget wiki page