GWT Popup Example

 The following code is a example for GWT custom Popup.


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.RootPanel;
public class MainPanel extends EntryPoint
{
    public MainPanel()
    {
       
    }

    @Override
    public void onModuleLoad()
    {
            Button b1 = new Button("Click Me!!!");
            b1.addClickHandler(new ClickHandler() {
              public void onClick(ClickEvent event) {
                // Instantiate the popup and show it.
                  SamplePopup popup = new SamplePopup();
                    popup.setGlassEnabled(true);
                    popup.center();
                    popup.show();
              }
            });

            RootPanel.get().add(b1);
    }

}

The above MailPanel which extends GWT EntryPoint, basically to provide a view to load GWT components. A buttob "b1" with label "Click me to show popup"
will be added to the view. A onclick handler is added to the button "b1", where this will show the popup with a view of SamplePopup.

The samplePopup will be as shown below.

<ui:UiBinder
  xmlns:ui='urn:ui:com.google.gwt.uibinder'
  xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <g:HTMLPanel>
    <div>A popup with this data will be shown.</div>

   </g:HTMLPanel>

</ui:UiBinder>

 
   

A popup with this data will be shown.

  



SamplePopui.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.IFrameElement;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Frame;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.Widget;

public class SamplePopup extends PopupPanel {
   
    @UiTemplate("SamplePopup.ui.xml")
    interface Binder extends UiBinder { }
   
   
    @UiField
    Frame flexPopupContainer;
   
    private static final Binder binder = GWT.create(Binder.class);
   
    public SamplePopup() {
        super(true);
        add(binder.createAndBindUi(this));
       
    }
}

How to apply filterFunction to Array Collection in Adobe Flex or Action Script ?

The following is an example that will show you how to apply a fiterFunction to array collection in action script.

var idsList:ArrayCollection=new ArrayCollection(["1","2","3"]);
var nodeId:Number = 2;

var filterByIdFilter:Function = function(item:Number):Boolean
{
    if(item == nodeId) return true;
    return false;
}
idsList.filterFunction = filterByIdFilter;
idsList.refresh();

If the provided nodeId matches with idsList array collection, after applying filterFunction the idsList will be truncated to size "1", otherwise size "0".

Scaling an image to match the content width

To scale an image, so that it should fit 100% of content width. The following is the sample code.



In the above scaleContent, width and maintainAspectRatio are important, we need to define them in order scale the image to 100% width of cotent width.