Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Portal Preview

    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

    #2
    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:
    Code:
    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...

    Comment


      #3
      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.

      Comment


        #4
        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...

        Comment


          #5
          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.

          Comment


            #6
            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!

            Comment


              #7
              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".

              Comment


                #8
                Originally posted by 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
                Where can I find the SmartGWT version of this sample ?
                Thanks

                Regards
                KC

                Comment


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

                  Comment


                    #10
                    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

                    Comment


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

                      Code:
                      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...

                      Comment


                        #12
                        Originally posted by mihai007
                        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

                        Comment


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

                          Comment


                            #14
                            remember, if using smartgwt svn above revision 252 you have to correct the errors in the sample with:
                            Code:
                            // customize the appearance and order of the controls in the window header
                            setHeaderControls(HeaderControls.MINIMIZE_BUTTON, HeaderControls.HEADER_LABEL,HeaderControls.CLOSE_BUTTON);

                            Comment


                              #15
                              links are broken to portlet sample

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

                              Comment

                              Working...
                              X