gCubeSystem
/
geoportal-data-viewer-app
14
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added loading icon

This commit is contained in:
Francesco Mangiacrapa 2021-08-02 17:05:01 +02:00
parent a2131b7bf1
commit fea98c837d
2 changed files with 122 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dialogs/DialogShareableLink.java
View File

@ -1,9 +1,9 @@
package org.gcube.portlets.user.geoportaldataviewer.client.ui.dialogs; package org.gcube.portlets.user.geoportaldataviewer.client.ui.dialogs;
import org.gcube.application.geoportalcommon.shared.GeoNaItemRef; import org.gcube.application.geoportalcommon.shared.GeoNaItemRef;
import org.gcube.application.geoportalcommon.shared.PublicLink; import org.gcube.application.geoportalcommon.shared.PublicLink;
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerServiceAsync; import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerServiceAsync;
import org.gcube.portlets.user.geoportaldataviewer.client.util.LoaderIcon;
import com.github.gwtbootstrap.client.ui.Alert; import com.github.gwtbootstrap.client.ui.Alert;
import com.github.gwtbootstrap.client.ui.Button; import com.github.gwtbootstrap.client.ui.Button;
@ -16,6 +16,7 @@ import com.github.gwtbootstrap.client.ui.Tooltip;
import com.github.gwtbootstrap.client.ui.constants.VisibilityChange; import com.github.gwtbootstrap.client.ui.constants.VisibilityChange;
import com.google.gwt.core.client.GWT; import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Element; import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.MouseOverEvent; import com.google.gwt.event.dom.client.MouseOverEvent;
@ -26,6 +27,7 @@ import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.Timer; import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.rpc.AsyncCallback; import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Composite; import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel; import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget; import com.google.gwt.user.client.ui.Widget;
@ -35,7 +37,7 @@ import com.google.gwt.user.client.ui.Widget;
* *
* @author Francesco Mangiacrapa at ISTI-CNR (francesco.mangiacrapa@isti.cnr.it) * @author Francesco Mangiacrapa at ISTI-CNR (francesco.mangiacrapa@isti.cnr.it)
* *
* Sep 19, 2019 * Sep 19, 2019
*/ */
public class DialogShareableLink extends Composite { public class DialogShareableLink extends Composite {
@ -45,10 +47,10 @@ public class DialogShareableLink extends Composite {
@UiField @UiField
ControlGroup cgPublicLink; ControlGroup cgPublicLink;
@UiField @UiField
ControlGroup cgPrivateLongLink; ControlGroup cgPrivateLongLink;
@UiField @UiField
ControlGroup cgPublicLongLink; ControlGroup cgPublicLongLink;
@ -57,58 +59,61 @@ public class DialogShareableLink extends Composite {
@UiField @UiField
TextBox textPrivateLink; TextBox textPrivateLink;
@UiField @UiField
TextBox textPrivateLongLink; TextBox textPrivateLongLink;
@UiField @UiField
TextBox textPublicLongLink; TextBox textPublicLongLink;
@UiField @UiField
Alert errorAlert; Alert errorAlert;
@UiField @UiField
Alert actionAlert; Alert actionAlert;
// @UiField // @UiField
// Well alertFilePublicLink; // Well alertFilePublicLink;
@UiField @UiField
Fieldset fieldSetPrivate; Fieldset fieldSetPrivate;
@UiField @UiField
Fieldset fieldSetPublic; Fieldset fieldSetPublic;
@UiField @UiField
VerticalPanel fieldPrivateSharing; VerticalPanel fieldPrivateSharing;
// @UiField // @UiField
// VerticalPanel filedEnableDisableSharing; // VerticalPanel filedEnableDisableSharing;
@UiField @UiField
Label labelLinkSharing; Label labelLinkSharing;
@UiField @UiField
Button privateLinkCopyButton; Button privateLinkCopyButton;
@UiField @UiField
Button privateLongLinkCopyButton; Button privateLongLinkCopyButton;
@UiField @UiField
Button publicLinkCopyButton; Button publicLinkCopyButton;
@UiField @UiField
Button publicLongLinkCopyButton; Button publicLongLinkCopyButton;
// //
// @UiField // @UiField
// Well wellPrivateLinkDescription; // Well wellPrivateLinkDescription;
@UiField @UiField
Button showPrivateLongLinkButton; Button showPrivateLongLinkButton;
@UiField @UiField
Button showPublicLongLinkButton; Button showPublicLongLinkButton;
@UiField
HTMLPanel info_panel;
// @UiField // @UiField
// HTMLPanel panelFieldsContainer; // HTMLPanel panelFieldsContainer;
@ -117,22 +122,23 @@ public class DialogShareableLink extends Composite {
private String fileVersion; private String fileVersion;
private boolean itemIsPublicStatus; private boolean itemIsPublicStatus;
private PublicLink openPublicLink; private PublicLink openPublicLink;
private PublicLink restrictedPublicLink; private PublicLink restrictedPublicLink;
private final String privateShareToFileDescription = "By sharing the following Private Link " private final String privateShareToFileDescription = "By sharing the following Private Link "
+ "with your coworkers, you will enact the users of the group the folder is shared with, " + "with your coworkers, you will enact the users of the group the folder is shared with, "
+ "to access the file and the shared folder content. Login required"; + "to access the file and the shared folder content. Login required";
private LoaderIcon loadingIcon = new LoaderIcon("loading...");
/** /**
* The Interface DialogShareableLinkUiBinder. * The Interface DialogShareableLinkUiBinder.
* *
* @author Francesco Mangiacrapa at ISTI-CNR (francesco.mangiacrapa@isti.cnr.it) * @author Francesco Mangiacrapa at ISTI-CNR (francesco.mangiacrapa@isti.cnr.it)
* *
* Sep 19, 2019 * Sep 19, 2019
*/ */
interface DialogShareableLinkUiBinder extends UiBinder<Widget, DialogShareableLink> { interface DialogShareableLinkUiBinder extends UiBinder<Widget, DialogShareableLink> {
} }
@ -140,80 +146,81 @@ public class DialogShareableLink extends Composite {
/** /**
* Instantiates a new dialog shareable link. * Instantiates a new dialog shareable link.
* *
* @param item the item * @param item the item
* @param version the version * @param version the version
*/ */
public DialogShareableLink(GeoNaItemRef item, String version) { public DialogShareableLink(GeoNaItemRef item, String version) {
initWidget(uiBinder.createAndBindUi(this)); initWidget(uiBinder.createAndBindUi(this));
this.geonItemRef = item; this.geonItemRef = item;
this.fileVersion = version; this.fileVersion = version;
this.actionAlert.setAnimation(true); this.actionAlert.setAnimation(true);
//cgRemovePublicLink.setVisible(false); // cgRemovePublicLink.setVisible(false);
// fieldSetPrivate.setVisible(false); // fieldSetPrivate.setVisible(false);
// fieldPrivateSharing.setVisible(false); // fieldPrivateSharing.setVisible(false);
cgPublicLink.setVisible(true); cgPublicLink.setVisible(true);
fieldPrivateSharing.setVisible(false); fieldPrivateSharing.setVisible(false);
fieldSetPrivate.setVisible(false); fieldSetPrivate.setVisible(false);
GeoportalDataViewerServiceAsync.Util.getInstance().getMyLogin(new AsyncCallback<String>() { GeoportalDataViewerServiceAsync.Util.getInstance().getMyLogin(new AsyncCallback<String>() {
@Override @Override
public void onFailure(Throwable caught) { public void onFailure(Throwable caught) {
// TODO Auto-generated method stub // TODO Auto-generated method stub
} }
@Override @Override
public void onSuccess(String result) { public void onSuccess(String result) {
if(result!=null) { if (result != null) {
fieldPrivateSharing.setVisible(true); fieldPrivateSharing.setVisible(true);
fieldSetPrivate.setVisible(true); fieldSetPrivate.setVisible(true);
} }
} }
}); });
showMessage("", false); showMessage("", false);
loadingIcon.getElement().getStyle().setMarginBottom(20,Unit.PX);
showLoadingIcon(true);
//alertFilePublicLink.setVisible(true); // alertFilePublicLink.setVisible(true);
loadAndShowPublicLinksForItem(item); loadAndShowPublicLinksForItem(item);
//getElement().setClassName("gwt-DialogBoxNew"); // getElement().setClassName("gwt-DialogBoxNew");
modalBox.setTitle("Share Link..."); modalBox.setTitle("Share Link...");
ModalFooter modalFooter = new ModalFooter(); ModalFooter modalFooter = new ModalFooter();
final Button buttClose = new Button("Close"); final Button buttClose = new Button("Close");
modalFooter.add(buttClose); modalFooter.add(buttClose);
buttClose.addClickHandler(new ClickHandler() { buttClose.addClickHandler(new ClickHandler() {
@Override @Override
public void onClick(ClickEvent event) { public void onClick(ClickEvent event) {
modalBox.hide(); modalBox.hide();
} }
}); });
addEvents(); addEvents();
textPrivateLink.setId(Random.nextInt()+Random.nextInt()+""); textPrivateLink.setId(Random.nextInt() + Random.nextInt() + "");
textPrivateLongLink.setId(Random.nextInt()+Random.nextInt()+""); textPrivateLongLink.setId(Random.nextInt() + Random.nextInt() + "");
textPublicLink.setId(Random.nextInt()+Random.nextInt()+""); textPublicLink.setId(Random.nextInt() + Random.nextInt() + "");
textPublicLongLink.setId(Random.nextInt()+Random.nextInt()+""); textPublicLongLink.setId(Random.nextInt() + Random.nextInt() + "");
modalBox.add(this); modalBox.add(this);
modalBox.add(modalFooter); modalBox.add(modalFooter);
modalBox.show(); modalBox.show();
} }
/** /**
* Adds the events. * Adds the events.
*/ */
private void addEvents() { private void addEvents() {
showPrivateLongLinkButton.addClickHandler(new ClickHandler() { showPrivateLongLinkButton.addClickHandler(new ClickHandler() {
@Override @Override
public void onClick(ClickEvent event) { public void onClick(ClickEvent event) {
showPrivateLongLinkButton.setVisible(false); showPrivateLongLinkButton.setVisible(false);
@ -221,16 +228,16 @@ public class DialogShareableLink extends Composite {
textPrivateLongLink.setText(restrictedPublicLink.getCompleteURL()); textPrivateLongLink.setText(restrictedPublicLink.getCompleteURL());
} }
}); });
showPublicLongLinkButton.addClickHandler(new ClickHandler() { showPublicLongLinkButton.addClickHandler(new ClickHandler() {
@Override @Override
public void onClick(ClickEvent event) { public void onClick(ClickEvent event) {
if(openPublicLink!=null && openPublicLink.getCompleteURL()!=null) { if (openPublicLink != null && openPublicLink.getCompleteURL() != null) {
showPublicLongLinkButton.setVisible(false); showPublicLongLinkButton.setVisible(false);
cgPublicLongLink.setVisible(true); cgPublicLongLink.setVisible(true);
textPublicLongLink.setText(openPublicLink.getCompleteURL()); textPublicLongLink.setText(openPublicLink.getCompleteURL());
}else { } else {
textPublicLongLink.setText("Not available"); textPublicLongLink.setText("Not available");
showPublicLongLinkButton.setText("Not available"); showPublicLongLinkButton.setText("Not available");
showPublicLongLinkButton.addStyleName("href-disabled"); showPublicLongLinkButton.addStyleName("href-disabled");
@ -240,149 +247,147 @@ public class DialogShareableLink extends Composite {
} }
} }
}); });
privateLinkCopyButton.addClickHandler(new ClickHandler() { privateLinkCopyButton.addClickHandler(new ClickHandler() {
@Override @Override
public void onClick(ClickEvent event) { public void onClick(ClickEvent event) {
final Element elem = event.getRelativeElement(); final Element elem = event.getRelativeElement();
elem.setTitle("Copied to clipboard"); elem.setTitle("Copied to clipboard");
Tooltip.changeVisibility(elem, VisibilityChange.TOGGLE.get()); Tooltip.changeVisibility(elem, VisibilityChange.TOGGLE.get());
Timer timer = new Timer() { Timer timer = new Timer() {
@Override @Override
public void run() { public void run() {
Tooltip.changeVisibility(elem, VisibilityChange.HIDE.get()); Tooltip.changeVisibility(elem, VisibilityChange.HIDE.get());
} }
}; };
timer.schedule(1000); timer.schedule(1000);
copyToClipboard(textPrivateLink.getId()); copyToClipboard(textPrivateLink.getId());
} }
}); });
privateLinkCopyButton.addMouseOverHandler(new MouseOverHandler() { privateLinkCopyButton.addMouseOverHandler(new MouseOverHandler() {
@Override @Override
public void onMouseOver(MouseOverEvent event) { public void onMouseOver(MouseOverEvent event) {
final Element elem = event.getRelativeElement(); final Element elem = event.getRelativeElement();
elem.setTitle("Copy"); elem.setTitle("Copy");
} }
}); });
privateLongLinkCopyButton.addClickHandler(new ClickHandler() { privateLongLinkCopyButton.addClickHandler(new ClickHandler() {
@Override @Override
public void onClick(ClickEvent event) { public void onClick(ClickEvent event) {
final Element elem = event.getRelativeElement(); final Element elem = event.getRelativeElement();
Tooltip.changeVisibility(elem, VisibilityChange.TOGGLE.get()); Tooltip.changeVisibility(elem, VisibilityChange.TOGGLE.get());
Timer timer = new Timer() { Timer timer = new Timer() {
@Override @Override
public void run() { public void run() {
Tooltip.changeVisibility(elem, VisibilityChange.HIDE.get()); Tooltip.changeVisibility(elem, VisibilityChange.HIDE.get());
} }
}; };
timer.schedule(1000); timer.schedule(1000);
copyToClipboard(textPrivateLongLink.getId()); copyToClipboard(textPrivateLongLink.getId());
} }
}); });
privateLongLinkCopyButton.addMouseOverHandler(new MouseOverHandler() { privateLongLinkCopyButton.addMouseOverHandler(new MouseOverHandler() {
@Override @Override
public void onMouseOver(MouseOverEvent event) { public void onMouseOver(MouseOverEvent event) {
final Element elem = event.getRelativeElement(); final Element elem = event.getRelativeElement();
elem.setTitle("Copy"); elem.setTitle("Copy");
} }
}); });
publicLinkCopyButton.addClickHandler(new ClickHandler() { publicLinkCopyButton.addClickHandler(new ClickHandler() {
@Override @Override
public void onClick(ClickEvent event) { public void onClick(ClickEvent event) {
final Element elem = event.getRelativeElement(); final Element elem = event.getRelativeElement();
Tooltip.changeVisibility(elem, VisibilityChange.TOGGLE.get()); Tooltip.changeVisibility(elem, VisibilityChange.TOGGLE.get());
Timer timer = new Timer() { Timer timer = new Timer() {
@Override @Override
public void run() { public void run() {
Tooltip.changeVisibility(elem, VisibilityChange.HIDE.get()); Tooltip.changeVisibility(elem, VisibilityChange.HIDE.get());
} }
}; };
timer.schedule(1000); timer.schedule(1000);
copyToClipboard(textPublicLink.getId()); copyToClipboard(textPublicLink.getId());
} }
}); });
publicLinkCopyButton.addMouseOverHandler(new MouseOverHandler() { publicLinkCopyButton.addMouseOverHandler(new MouseOverHandler() {
@Override @Override
public void onMouseOver(MouseOverEvent event) { public void onMouseOver(MouseOverEvent event) {
final Element elem = event.getRelativeElement(); final Element elem = event.getRelativeElement();
elem.setTitle("Copy"); elem.setTitle("Copy");
} }
}); });
publicLongLinkCopyButton.addClickHandler(new ClickHandler() { publicLongLinkCopyButton.addClickHandler(new ClickHandler() {
@Override @Override
public void onClick(ClickEvent event) { public void onClick(ClickEvent event) {
final Element elem = event.getRelativeElement(); final Element elem = event.getRelativeElement();
Tooltip.changeVisibility(elem, VisibilityChange.TOGGLE.get()); Tooltip.changeVisibility(elem, VisibilityChange.TOGGLE.get());
Timer timer = new Timer() { Timer timer = new Timer() {
@Override @Override
public void run() { public void run() {
Tooltip.changeVisibility(elem, VisibilityChange.HIDE.get()); Tooltip.changeVisibility(elem, VisibilityChange.HIDE.get());
} }
}; };
timer.schedule(1000); timer.schedule(1000);
copyToClipboard(textPublicLongLink.getId()); copyToClipboard(textPublicLongLink.getId());
} }
}); });
publicLongLinkCopyButton.addMouseOverHandler(new MouseOverHandler() { publicLongLinkCopyButton.addMouseOverHandler(new MouseOverHandler() {
@Override @Override
public void onMouseOver(MouseOverEvent event) { public void onMouseOver(MouseOverEvent event) {
final Element elem = event.getRelativeElement(); final Element elem = event.getRelativeElement();
elem.setTitle("Copy"); elem.setTitle("Copy");
} }
}); });
textPrivateLink.addClickHandler(new ClickHandler() { textPrivateLink.addClickHandler(new ClickHandler() {
@Override @Override
public void onClick(ClickEvent event) { public void onClick(ClickEvent event) {
textPrivateLink.selectAll(); textPrivateLink.selectAll();
} }
}); });
textPrivateLongLink.addClickHandler(new ClickHandler() { textPrivateLongLink.addClickHandler(new ClickHandler() {
@Override @Override
public void onClick(ClickEvent event) { public void onClick(ClickEvent event) {
textPrivateLongLink.selectAll(); textPrivateLongLink.selectAll();
} }
}); });
textPublicLongLink.addClickHandler(new ClickHandler() { textPublicLongLink.addClickHandler(new ClickHandler() {
@Override @Override
public void onClick(ClickEvent event) { public void onClick(ClickEvent event) {
textPublicLongLink.selectAll(); textPublicLongLink.selectAll();
} }
}); });
} }
/** /**
* Copy to clipboard. * Copy to clipboard.
* *
@ -390,15 +395,14 @@ public class DialogShareableLink extends Composite {
*/ */
private native void copyToClipboard(String myDivId) /*-{ private native void copyToClipboard(String myDivId) /*-{
var copyText = $doc.getElementById(myDivId); var copyText = $doc.getElementById(myDivId);
console.log("text copied is :"+copyText.value); console.log("text copied is :" + copyText.value);
copyText.select(); copyText.select();
//For mobile devices //For mobile devices
copyText.setSelectionRange(0, 99999); copyText.setSelectionRange(0, 99999);
$doc.execCommand("copy"); $doc.execCommand("copy");
//alert("Copied the text: " + copyText.value); //alert("Copied the text: " + copyText.value);
}-*/; }-*/;
/** /**
* Load and show public links for item. * Load and show public links for item.
@ -407,30 +411,31 @@ public class DialogShareableLink extends Composite {
*/ */
private void loadAndShowPublicLinksForItem(GeoNaItemRef item) { private void loadAndShowPublicLinksForItem(GeoNaItemRef item) {
GeoportalDataViewerServiceAsync.Util.getInstance().getPublicLinksFor(item, GeoportalDataViewerServiceAsync.Util.getInstance().getPublicLinksFor(item, new AsyncCallback<GeoNaItemRef>() {
new AsyncCallback<GeoNaItemRef>() {
@Override @Override
public void onSuccess(GeoNaItemRef itemReferences) { public void onSuccess(GeoNaItemRef itemReferences) {
showLoadingIcon(false);
openPublicLink = itemReferences.getOpenLink(); openPublicLink = itemReferences.getOpenLink();
restrictedPublicLink = itemReferences.getRestrictedLink(); restrictedPublicLink = itemReferences.getRestrictedLink();
String toPublicURL = openPublicLink.getShortURL() != null && !openPublicLink.getShortURL().isEmpty() String toPublicURL = openPublicLink.getShortURL() != null && !openPublicLink.getShortURL().isEmpty()
? openPublicLink.getShortURL() ? openPublicLink.getShortURL()
: openPublicLink.getCompleteURL(); : openPublicLink.getCompleteURL();
textPublicLink.setValue(toPublicURL); textPublicLink.setValue(toPublicURL);
textPublicLongLink.setValue(openPublicLink.getCompleteURL()); textPublicLongLink.setValue(openPublicLink.getCompleteURL());
String toPrivateURL = restrictedPublicLink.getShortURL() != null && !restrictedPublicLink.getShortURL().isEmpty() String toPrivateURL = restrictedPublicLink.getShortURL() != null
? restrictedPublicLink.getShortURL() && !restrictedPublicLink.getShortURL().isEmpty() ? restrictedPublicLink.getShortURL()
: restrictedPublicLink.getCompleteURL(); : restrictedPublicLink.getCompleteURL();
textPrivateLink.setValue(toPrivateURL); textPrivateLink.setValue(toPrivateURL);
textPrivateLongLink.setValue(restrictedPublicLink.getCompleteURL()); textPrivateLongLink.setValue(restrictedPublicLink.getCompleteURL());
} }
@Override @Override
public void onFailure(Throwable caught) { public void onFailure(Throwable caught) {
showLoadingIcon(false);
openPublicLink = null; openPublicLink = null;
disableTextBox(textPublicLink); disableTextBox(textPublicLink);
disableTextBox(textPrivateLink); disableTextBox(textPrivateLink);
@ -439,6 +444,17 @@ public class DialogShareableLink extends Composite {
}); });
} }
public void showLoadingIcon(boolean show) {
try {
if(show)
info_panel.add(loadingIcon);
else
info_panel.remove(loadingIcon);
}catch (Exception e) {
}
}
/** /**
* Disable text box. * Disable text box.
* *
@ -448,7 +464,7 @@ public class DialogShareableLink extends Composite {
textBox.setEnabled(false); textBox.setEnabled(false);
textBox.getElement().getStyle().setOpacity(0.3); textBox.getElement().getStyle().setOpacity(0.3);
} }
/** /**
* Show error. * Show error.
* *
@ -458,16 +474,16 @@ public class DialogShareableLink extends Composite {
errorAlert.setVisible(true); errorAlert.setVisible(true);
errorAlert.setText(msg); errorAlert.setText(msg);
} }
/** /**
* Show message. * Show message.
* *
* @param msg the msg * @param msg the msg
* @param visible the visible * @param visible the visible
*/ */
private void showMessage(String msg, boolean visible) { private void showMessage(String msg, boolean visible) {
actionAlert.setVisible(visible); actionAlert.setVisible(visible);
actionAlert.setText(msg==null?"":msg); actionAlert.setText(msg == null ? "" : msg);
} }

3
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dialogs/DialogShareableLink.ui.xml
View File

@ -44,12 +44,11 @@
} }
</ui:style> </ui:style>
<g:HTMLPanel> <g:HTMLPanel>
<g:HTMLPanel ui:field="info_panel"></g:HTMLPanel>
<b:Form type="HORIZONTAL"> <b:Form type="HORIZONTAL">
<b:Alert ui:field="actionAlert" close="false" type="INFO" <b:Alert ui:field="actionAlert" close="false" type="INFO"
visible="false"> visible="false">
<b:Icon type="ROTATE_RIGHT" spin="true" />
</b:Alert> </b:Alert>
<g:VerticalPanel ui:field="fieldPrivateSharing" <g:VerticalPanel ui:field="fieldPrivateSharing"
addStyleNames="{style.margin-bottom-20}"> addStyleNames="{style.margin-bottom-20}">
<g:HorizontalPanel> <g:HorizontalPanel>