Portal Preview

[sjivan]

A couple of users have asked about portal support. Writing portals in SmartGWT / SmartClient is fairly simple as the Layouts have animation, and dynamic add / remove built-in. Here's an example of a SmartClient Portal

http://www.smartclient.com/smartgwt/...animation.html

API's for this will be added in the next release, and likely a nightly build over the next few weeks.

Sanjiv

[zerozerosette]

Thanks Snajiv, that's a great example. But I have a further question: how can I keep this nice portal behavior while adding custom drag'n'drop features? For example, I need three columns with different size, and when a portlet is dropped on a bigger/smaller column, it must resize itself, adapting its width and height. Is adding a new DropHandler, and rewriting all the logic, the only way?
Something like this:

addDropHandler(new DropHandler() {
            public void onDrop(DropEvent event) {
                int newPosition = getDropPosition();
                Canvas draggable = EventHandler.getDragTarget();
                //Dropped on draggable's parent, reorder
                if (draggable.getParentElement() == PortalColumn.this) {
                    reorderMember(PortalColumn.this.getMemberNumber(draggable), newPosition);
                    return;
                }
                //Resize
                draggable.setHeight(size.getPixelSize());
                draggable.setWidth(size.getPixelSize());
                addMember(draggable, newPosition);
                reflowNow();
            }
        });

Thank you for your answer...

[Isomorphic]

So long as you have not called setWidth() on the portlet with a fixed pixel value (which establishes that pixel value as one that SmartClient Layouts must respect), moving the portlet between different Layouts should result in auto-sizing behavior.

[zerozerosette]

Thanks for your answer... that would work, but in addition to resizing the portlets I need to change their contents, because a small portlet's content is different from a medium or a large one (a ListGrid put in a large portlet should show many fields, but when it is dropped on a smaller column it could hide most of the fields, or even be replaced with another widget). Any suggestion?

Thank you again...

[Isomorphic]

Seem like you could add a method that notifies the portlet of the size of column it's being dropped into, allowing it to do whatever it wants, for example, hide fields if it contains a grid.

[zerozerosette]

It seems I finally got it. I added a resize/hiding fields/whatever method to my Portlet class' DragRepositionStopHandler. I hope this will prove to be the correct approach.

Another question:
When I move an empty portlet everything is fast, but when I add a listgrid to it (with addItem) there's a lag as i drop it on a column.
Is this related to http://forums.smartclient.com/showthread.php?t=833 ?

Thank you again!

[Isomorphic]

Yes, that would be the cause of any lag, however, if it's a non-trivial lag it may indicate extra work is going on (eg maybe there are two clear/draw cycles or similar). You should be able to see this in the Developer Console by enabling log categories like "draws", "clears", and "redraws".

[kccheng]

A couple of users have asked about portal support. Writing portals in SmartGWT / SmartClient is fairly simple as the Layouts have animation, and dynamic add / remove built-in. Here's an example of a SmartClient Portal

http://www.smartclient.com/smartgwt/...animation.html

API's for this will be added in the next release, and likely a nightly build over the next few weeks.

Sanjiv

Where can I find the SmartGWT version of this sample ?
Thanks

Regards
KC

[tomhj]

Has the GWT wrapper for the SmartClient portal component(s) been finished yet?

[sjivan]

Its on the TODO list but if you're in a hurry or would liek to lend a hand, you can try writing the SmartGWT equivalent of it yourself and post here if you run into any roadblocks. The code is fairy small.

View Source here :
http://www.smartclient.com/smartgwt/...animation.html

and the Portal code itself

portalComponents.js

Sanjiv

[mihai007]

Ok. I had a little time so I did it:

import com.smartgwt.client.types.DragAppearance;
import com.smartgwt.client.types.HeaderControls;
import com.smartgwt.client.types.LayoutPolicy;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VStack;


public class EntryPoint implements com.google.gwt.core.client.EntryPoint {

	public void onModuleLoad() {

		PortalLayout portalLayout = new PortalLayout();
		portalLayout.setWidth100();
		portalLayout.setHeight100();

		// create portlets...
		for (int i = 1; i <= 5; i++) {
			Portlet portlet = new Portlet();
			portlet.setTitle("Portlet " + i);
			portalLayout.addPortlet(portlet);
		}
		portalLayout.draw();
	}

	/**
	 * Portlet class definition
	 */
	private class Portlet extends Window {

		public Portlet() {

			setShowShadow(false);

			// enable predefined component animation
			setAnimateMinimize(true);

			// Window is draggable with "outline" appearance by default.
			// "target" is the solid appearance.
			setDragAppearance(DragAppearance.OUTLINE);
			setCanDrop(true);

			// customize the appearance and order of the controls in the window header
			setHeaderControls(HeaderControls.MINIMIZE_LABEL, HeaderControls.HEADER_LABLE,HeaderControls.CLOSE_BUTTON);

			// show either a shadow, or translucency, when dragging a portlet
			// (could do both at the same time, but these are not visually compatible effects)
			// setShowDragShadow(true);
			setDragOpacity(30);

			// these settings enable the portlet to autosize its height only to fit its contents
			// (since width is determined from the containing layout, not the portlet contents)
			setVPolicy(LayoutPolicy.NONE);
			setOverflow(Overflow.VISIBLE);

		}
	}

	/**
	 * PortalColumn class definition
	 */
	private class PortalColumn extends VStack {

		public PortalColumn() {

			// leave some space between portlets
			setMembersMargin(6);

			// enable predefined component animation
			setAnimateMembers(true);
			setAnimateMemberTime(100);

			// enable drop handling
			setCanAcceptDrop(true);

			// change appearance of drag placeholder and drop indicator
			setDropLineThickness(4);
			Canvas dropLineProperties = new Canvas();
			dropLineProperties.setBackgroundColor("aqua");
			setDropLineProperties(dropLineProperties);
			setShowDragPlaceHolder(true);
			Canvas placeHolderProperties = new Canvas();
			placeHolderProperties.setBorder("2px solid #8289A6");
			setPlaceHolderProperties(placeHolderProperties);
		}
	}

	/**
	 * PortalLayout class definition
	 */
	private class PortalLayout extends HLayout {

		public PortalLayout() {

			int numColumns = 3;
			setMembersMargin(6);

			for (int i = 0; i < numColumns; i++) {
				addMember(new PortalColumn());
			}

		}

		public void addPortlet(Portlet portlet) {
			// find the column with the fewest portlets
			int fewestPortlets = Integer.MAX_VALUE;
			PortalColumn fewestPortletsColumn = null; 
			for (int i = 0; i < getMembers().length; i++) {
				int numPortlets = ((PortalColumn)getMember(i)).getMembers().length;
				if (numPortlets < fewestPortlets) {
					fewestPortlets = numPortlets;
					fewestPortletsColumn = (PortalColumn) getMember(i);
				}
			}
			fewestPortletsColumn.addMember(portlet);
		}
	}

}

I followed portalComponent.js almost line by line but didn't had time to add a button list, it creates by default 5 portlets but I hope people would get the idea.

P.S: sjivan, you could add this to the Showcase, I tried to make it look as simple as possible so that would be as easy as possible to understand...

[kccheng]

Ok. I had a little time so I did it:
...
I followed portalComponent.js almost line by line but didn't had time to add a button list, it creates by default 5 portlets but I hope people would get the idea.

P.S: sjivan, you could add this to the Showcase, I tried to make it look as simple as possible so that would be as easy as possible to understand...

It's cool :-) thanks a lot.

KC

[Isomorphic]

Hey thanks a lot for doing that mihai, that'll be useful to many users :)

[mihai007]

remember, if using smartgwt svn above revision 252 you have to correct the errors in the sample with:

// customize the appearance and order of the controls in the window header
setHeaderControls(HeaderControls.MINIMIZE_BUTTON, HeaderControls.HEADER_LABEL,HeaderControls.CLOSE_BUTTON);

[donald.ruby]

links are broken to portlet sample

The links to the portlet demo and sample code are broken!