GWT view navigation basic example - gwt

I have a Navigation panel with Back/Forward buttons ( Function not important, just want to get my head around swapping Panels in and out of a GWT page )
NavigationButtonsPanel
public class NavigationButtonsPanel extends HTMLPanel
{
private Button btnA = new Button("Go back");
private Button btnB = new Button("Go forward");
public NavigationButtonsPanel( )
{
super("Navigation Panel");
add(btnA);
add(btnB);
}
public void setBackHandler( ClickHandler handler )
{
btnA.addClickHandler(handler);
}
public void setForwardHandler( ClickHandler handler )
{
btnB.addClickHandler(handler);
}
}
I then have 3 basic panels, A B and C which use this. My Navigation from A-B-C and back to B-A works fine.
I now simulate a user changing something before they go to Panel B. In this case a Label in PanelB.
My final app will obviously be more complex than this but would this be typical of how an app would work. You modify some fields in a Panel through a users interaction in the same panel or a different one, load the new panel, more interaction, load in different panel etc?
I will only want a user to use a very well defined navigation path so there is only one path to a certain panel.
PanelA
public class PanelA extends HTMLPanel
{
private static PanelA panel;
private PanelA()
{
super("Panel A");
final RootPanel rootPanel = RootPanel.get();
NavigationButtonsPanel btnPanel = new NavigationButtonsPanel();
btnPanel.setForwardHandler(new ClickHandler() {
public void onClick(ClickEvent event)
{
rootPanel.clear();
PanelB.setMessageFromPreviousPage("Message set in Panel AAAAA");
rootPanel.add( PanelB.getInstance() );
}
});
add( btnPanel );
}
public static PanelA getInstance()
{
if (panel == null)
{
panel = new PanelA();
}
return panel;
}
}
PanelB
public class PanelB extends HTMLPanel
{
private static PanelB panel;
private static String messageFromPreviousPage;
private PanelB()
{
super("Panel B");
final RootPanel rootPanel = RootPanel.get();
Label messageLabel = new Label(messageFromPreviousPage);
NavigationButtonsPanel btnPanel = new NavigationButtonsPanel();
btnPanel.setBackHandler(new ClickHandler() {
public void onClick(ClickEvent event)
{
rootPanel.clear();
rootPanel.add( PanelA.getInstance() );
}
});
btnPanel.setForwardHandler(new ClickHandler() {
public void onClick(ClickEvent event)
{
rootPanel.clear();
rootPanel.add( PanelC.getInstance() );
}
});
add( btnPanel );
add(messageLabel);
}
public static PanelB getInstance()
{
if (panel == null)
{
panel = new PanelB();
}
return panel;
}
public static void setMessageFromPreviousPage(
String message)
{
messageFromPreviousPage = message;
}
}
PanelC
public class PanelC extends HTMLPanel
{
private static PanelC panel;
private PanelC()
{
super("Panel C");
final RootPanel rootPanel = RootPanel.get();
NavigationButtonsPanel btnPanel = new NavigationButtonsPanel();
btnPanel.setBackHandler(new ClickHandler() {
public void onClick(ClickEvent event)
{
rootPanel.clear();
PanelB.setMessageFromPreviousPage("Message set in Panel CCCCCC");
rootPanel.add( PanelB.getInstance() );
}
});
add( btnPanel );
}
public static PanelC getInstance()
{
if (panel == null)
{
panel = new PanelC();
}
return panel;
}
}

Any idea why Panel B does not update its UI?
Because when first time PanelB instance created using PanelB.getInstance() , then messageLabel created and it also set value. while you are calling second time same method from PanelC after changing the message, At that time, it's using same instance of PanelB instead of new object. and as per your coding, you are changing the value of messageFromPreviousPage variable instead of label text. so you didn't find any changes on UI.
If you want to change the label text, then declare messageLabel as a globel variable static and change label. i.e.
private static Label messageLabel;
private PanelB()
{
//your code
}
public static PanelB getInstance()
{
if (panel == null)
{
panel = new PanelB();
}
else
{
messageLabel.setText(messageFromPreviousPage); //Require to set Text Again
}
return panel;
}

Related

CellTable click swallowed

I've an combo box which is composed of a text field and a popup with a CellTable showing the suggestion items. The text field has a change handler that updates the CellTable's selection.
When typing a character and clicking an already selected suggestion, the first click is swallowed. The second click works and triggers the selection via the CellTable.addDomHandler(...).
Any idea why first click is swallowed?
Example code:
private static class SuggestFieldTextAndPopupSandbox extends SimplePanel {
private final TextField mText;
private CellTable<Handle<String>> mTable;
private SingleSelectionModel<Handle<String>> mTableSelection;
private SingleSelectionModel<Handle<String>> mSelection;
private ProvidesKey<Handle<String>> mKeyProvider = new SimpleKeyProvider<Handle<String>>();
private PopupPanel mPopup;
private List<Handle<String>> mData;
public SuggestFieldTextAndPopupSandbox() {
mData = Lists.newArrayList(new Handle<String>("AAA"), new Handle<String>("AAB"), new Handle<String>("ABB"));
mSelection = new SingleSelectionModel<Handle<String>>();
mText = new TextField();
mText.addKeyPressHandler(new KeyPressHandler() {
#Override
public void onKeyPress(KeyPressEvent pEvent) {
mPopup.showRelativeTo(mText);
}
});
mText.addBlurHandler(new BlurHandler() {
#Override
public void onBlur(BlurEvent pEvent) {
mTableSelection.setSelected(startsWith(mText.getValue()), true);
}
});
mText.addChangeHandler(new ChangeHandler() {
#Override
public void onChange(ChangeEvent pEvent) {
mText.setText(mText.getText().toUpperCase());
}
});
mTable = new CellTable<Handle<String>>(0, GWT.<TableResources>create(TableResources.class));
mTable.setTableLayoutFixed(false);
mTableSelection = new SingleSelectionModel<Handle<String>>(mKeyProvider);
mTable.setSelectionModel(mTableSelection);
mTable.addDomHandler(new ClickHandler() {
#Override
public void onClick(final ClickEvent pEvent) {
Scheduler.get().scheduleFinally(new ScheduledCommand() {
#Override
public void execute() {
mSelection.setSelected(mTableSelection.getSelectedObject(), true);
mText.setFocus(true);
mPopup.hide();
}
});
}
}, ClickEvent.getType());
mTable.addColumn(new TextColumn<Handle<String>>() {
#Override
public String getValue(Handle<String> pObject) {
return pObject.get();
}
});
mTable.setRowData(mData);
mPopup = new PopupPanel();
mPopup.setAutoHideEnabled(true);
mPopup.setWidget(mTable);
mPopup.setWidth("200px");
mPopup.setHeight("200px");
VerticalPanel p = new VerticalPanel();
p.add(mText);
setWidget(p);
}
private Handle<String> startsWith(final String pValue) {
final String val = nullToEmpty(pValue).toLowerCase();
int i = 0;
for (Handle<String> item : mData) {
String value = item.get();
if (value != null && value.toLowerCase().startsWith(val)) {
return item;
}
i++;
}
return null;
}
}
I reproduced your issue and here is the problem:
when you click on the suggestions the following is happening:
The text field is loosing focus which causes the corresponding ChangeEvent to be dealt with followed by the BlurEvent.
The click causes the popup to get the focus now which is why it is swallowed.
If you remove the ChangeHandler and the BlurHandler of the text field the issue disappears. But I think I found another solution
Try replacing the DOM handler of the mTable with a selection handler relative to the mTableSelection as follows:
mTableSelection.addSelectionChangeHandler(new Handler(){
#Override
public void onSelectionChange(SelectionChangeEvent event) {
Scheduler.get().scheduleFinally(new ScheduledCommand() {
#Override
public void execute() {
mSelection.setSelected(mTableSelection.getSelectedObject(), true);
mText.setFocus(true);
mPopup.hide();
}
});
}
});
Found a way how to properly solve this.
Skipping the blur handler when user hovers the suggestion list area seemed to fix that issue, at least from the tests that were done didn't see any more issues.
This was necessary because just before the user clicks a suggestion item, the text is blurred and it fires a selection change. This in turn cancels the selection made when user clicks an item.

drop widget beyond the AbsolutePanel gwt dnd

I'm trying to drop my draggable widgets out of the boundary panel (AbsolutePanel). In my case draggable widgets is an image. And I want to drop it, so that there will be visible only a part of the image, but when I drop it, and some parts of image beyond absolute panel, it drop automatically within absolute panel.
I tried :
dragController.setBehaviorConstrainedToBoundaryPanel(false);
and thought it means that I can drop it where ever I want, but it doesn't work.
And the working solution :)
Here is my code:
public class myEntripointClass implement EntryPOint{
AbsolutePanel droper;
public void onModuleLoad() {
Panel main = new AbsolutePanel();
droper = new AbsolutePanel();
droper.setHeight("300px");
droper.setWidth("500px");
main.add(droper);
content=new AbsolutePanel();
bt = new Button("Drag and drop it");
content.add(bt);
lb = new Label("Label drag and drop");
content.add(lb);
main.add(content);
manageDnD();
RootPanel.get().add(main);
}
private void manageDnD() {
PickupDragController dragController = new PickupDragController(
(AbsolutePanel) content, true);
dragController.makeDraggable(bt);
dragController.makeDraggable(lb);
dragController.addDragHandler(new DragHandler() {
#Override
public void onPreviewDragStart(DragStartEvent event)
throws VetoDragException {}
#Override
public void onPreviewDragEnd(DragEndEvent event) throws VetoDragException {}
#Override
public void onDragStart(DragStartEvent event) {
}
#Override
public void onDragEnd(DragEndEvent event) {
// TODO Auto-generated method stub
DragContext context = event.getContext();
int x=context.mouseX;
int y= context.mouseY;
droper.add(context.selectedWidgets.get(0),x,y);
}
});
NameDropController dropController = new NameDropController(droper);
dragController.registerDropController(dropController);
dragController.setBehaviorDragProxy(true);
}
and my DropController class is:
public class NameDropController extends AbstractDropController{
public NameDropController(Widget dropTarget) {
super(dropTarget);
}
#Override
public void onDrop(DragContext context) {
int x=getDiff(getDropTarget().getAbsoluteLeft(), context.mouseX);
int y=getDiff(getDropTarget().getAbsoluteTop(), context.mouseY);
((AbsolutePanel)getDropTarget()).add(context.selectedWidgets.get(0),x,y);
System.out.print("("+context.mouseX+"::,::"+context.mouseY+")");
}
#Override
public void onMove(DragContext context){
}
private int getDiff(int val1,int val2){
return Math.abs(val1-val2);
}
}

Refresh Listview in android

I"m tring it refresh my listview when my sqllite database is change (when delete or update query).
the querys itself works just fine, but it doesn't update the listview layout, only when i"m exiting the acitvity and renter it the liseview is changing.
I tried the methodes:
notifyDataSetChanged()
requery()
the code of the activiy is:
public class ShowListActivity extends ListActivity {
private ItemsDataSource itemsDataSource;
private String source[] = new String[] {MySQLiteHelper.KEY_NAME, MySQLiteHelper.KEY_QUANTITY, MySQLiteHelper.KEY_CHECKED};
private int dest[] = new int[] {R.id.itemTitle, R.id.itemQuantity, R.id.itemCheck};
public void goBackMethod(View view) {
Intent intent = new Intent(this, MainScreen.class);
startActivity(intent);
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
try {
setContentView(R.layout.activity_show_list);
} catch (Exception e) {
e.getMessage();
}
ApplicationController applicationController = (ApplicationController)getApplicationContext();
itemsDataSource = applicationController.itemsDataSource;
final Cursor mCursor = itemsDataSource.getAllItems();
startManagingCursor(mCursor);
CustomCursorAdapter adapter = new CustomCursorAdapter(this, mCursor);
adapter.notifyDataSetChanged();
setListAdapter(adapter);
ListView listView = getListView();
listView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
selectAction(id);
}
});
}
private void selectAction(final long position) {
Builder builder = new AlertDialog.Builder(this);
builder.setTitle("בחר פעולה");
builder
.setMessage("בחר בפעולה שברצונך לבצע:");
builder.setPositiveButton("עדכן פריט קניה",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
//do update
}
});
builder.setNeutralButton("מחק פריט קניה",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
itemsDataSource.deleteItem(position);
Toast toast = Toast.makeText(getBaseContext(), "הפריט הנבחר נמחק בהצלחה", Toast.LENGTH_SHORT);
toast.show();
}
});
builder.setNegativeButton("חזור לרשימת הקניות",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
dialog.cancel();
}
});
AlertDialog alertDialog = builder.create();
alertDialog.show();
}
}
the code of the customadapter is:
public class CustomCursorAdapter extends CursorAdapter implements Adapter {
private Cursor mCursor;
private Context mContext;
private final LayoutInflater mInflater;
public CustomCursorAdapter(Context context, Cursor c) {
super(context, c);
mInflater=LayoutInflater.from(context);
mContext=context;
}
#Override
public void bindView(View view, Context context, Cursor cursor) {
TextView itemTitle= (TextView)view.findViewById(R.id.itemTitle);
itemTitle.setText(cursor.getString(cursor.getColumnIndex(MySQLiteHelper.KEY_NAME)));
TextView itemQuantity = (TextView)view.findViewById(R.id.itemQuantity);
itemQuantity.setText(cursor.getString(cursor.getColumnIndex(MySQLiteHelper.KEY_QUANTITY)));
CheckBox itemCheck = (CheckBox) view.findViewById(R.id.itemCheck);
itemCheck.setChecked(cursor.getInt(cursor.getColumnIndex(MySQLiteHelper.KEY_CHECKED))==1);
}
#Override
public View newView(Context context, Cursor cursor, ViewGroup parent) {
final View view=mInflater.inflate(R.layout.listview_item_row, parent, false);
TextView itemTitle= (TextView)view.findViewById(R.id.itemTitle);
itemTitle.setText(cursor.getString(cursor.getColumnIndex(MySQLiteHelper.KEY_NAME)));
TextView itemQuantity = (TextView)view.findViewById(R.id.itemQuantity);
itemQuantity.setText(cursor.getString(cursor.getColumnIndex(MySQLiteHelper.KEY_QUANTITY)));
CheckBox itemCheck = (CheckBox) view.findViewById(R.id.itemCheck);
itemCheck.setChecked(cursor.getInt(cursor.getColumnIndex(MySQLiteHelper.KEY_CHECKED))==1);
return view;
}
}
in your code you have not added your adapter class. I am sure that you will be adding the data in list view from an array list.
So in the time of updating the list view by adding or removing a data to the list view, first either add or remove the data from your array list and the call as follows
listView.invalidateViews();
then call your set Adapter method

Getting header column names in Cell table on click in GWT

I am using Cell Table of GWT 2.2 version. I want to get the name of the header column on which I have clicked. I didn't get any click event on the same.
Is there any work around by which I can accomplish my task.
Something like this? ;)
public class CellTableExample implements EntryPoint, ClickHandler {
private static class SomeEntity {
/* ... */
}
private static class ClickableTextHeader extends TextHeader {
private ClickHandler handler;
public ClickableTextHeader(String text, ClickHandler handler) {
super(text);
this.handler = handler;
}
#Override
public void onBrowserEvent(Context context, final Element elem,
final NativeEvent event) {
//maybe hijack click event
if(handler != null) {
if(Event.ONCLICK == Event.getTypeInt(event.getType())) {
handler.onClick(new ClickEvent() {
{
setNativeEvent(event);
setRelativeElement(elem);
setSource(ClickableTextHeader.this);
}
});
}
}
//default dom event handler
super.onBrowserEvent(context, elem, event);
}
}
CellTable<SomeEntity> cellTable;
TextColumn<SomeEntity> firstColumn;
TextColumn<SomeEntity> secondColumn;
TextColumn<SomeEntity> thirdColumn;
#Override
public void onModuleLoad() {
/* somehow init columns - it's not the point for this example */
cellTable.addColumn(firstColumn, new ClickableTextHeader("First column header", this));
cellTable.addColumn(secondColumn, new ClickableTextHeader("Second column header", this));
cellTable.addColumn(thirdColumn, new ClickableTextHeader("Third column header", this));
}
#Override
public void onClick(ClickEvent event) {
ClickableTextHeader source = (ClickableTextHeader) event.getSource();
Window.alert(source.getValue());
}
}
Hijacking event could look simpler if we used "simple listener interface" - i just wanted to be "semanticaly compliant with out-of-the-box Handlers" :)

CellList backed with ListDataProvider does not get redrawn on list change

I'm working on a project with GWT 2.1 and mvp4g. In a view, I'm using
a CellList backed with a ListDataProvider. If I pass a List with data to the constructor
when instantiating the ListDataProvider, the CellList shows this data.
The problem is that afterthat, the CellList never gets redrawn
whenever I change the list within the ListDataProvider. I don't know what I am
doing wrong or if I missing something.
Here is the code:
The UIBinder xml file:
<g:DockLayoutPanel unit="PX">
<g:west size="300">
<g:VerticalPanel styleName='{style.leftPanel}' spacing="8">
<g:Label>Expositores</g:Label>
<g:ScrollPanel addStyleNames='{style.exhibitorList}' width="250px" height="600px">
<c:CellList ui:field="exhibitorList" />
</g:ScrollPanel>
<g:Button ui:field="editExhibitorButton" addStyleNames='{style.button}'>Editar</g:Button>
</g:VerticalPanel>
</g:west>
...
The View class:
public class ExhibitorsAdminView extends Composite implements
ExhibitorsAdminPresenter.IExhibitorsAdminView {
interface Binder extends UiBinder<Widget, ExhibitorsAdminView> {}
private static final Binder binder = GWT.create( Binder.class );
private static class ExhibitorCell extends AbstractCell<Exhibitor> {
#Override
public void render(Cell.Context context, Exhibitor exhibitor,
SafeHtmlBuilder sb) {
if (exhibitor != null) {
sb.appendEscaped(exhibitor.getName());
}
}
}
private ListDataProvider<Exhibitor> exhibitorsDataProvider;
private SingleSelectionModel<Exhibitor> exhibitorsSelectionModel;
#UiField( provided = true )
CellList<Exhibitor> exhibitorList;
#UiField
Button editExhibitorButton;
// #UiField(provided = true)
// CellTable<Object> moduleList = new CellTable<Object>();
public ExhibitorsAdminView() {
exhibitorsSelectionModel = new
SingleSelectionModel<Exhibitor>(Exhibitor.KEY_PROVIDER);
exhibitorList = new CellList<Exhibitor>(new ExhibitorCell(),
Exhibitor.KEY_PROVIDER);
exhibitorList.setSelectionModel(exhibitorsSelectionModel);
exhibitorsDataProvider = new
ListDataProvider<Exhibitor>(getExhibitors());
exhibitorsDataProvider.addDataDisplay(exhibitorList);
exhibitorList.setPageSize(exhibitorsDataProvider.getList().size());
initWidget( binder.createAndBindUi( this ) );
}
public SingleSelectionModel<Exhibitor> getExhibitorsSelectionModel()
{
return exhibitorsSelectionModel;
}
public ListDataProvider<Exhibitor> getExhibitorsDataProvider() {
return exhibitorsDataProvider;
}
private List<Exhibitor> getExhibitors() {
List<Exhibitor> exhibitors = new ArrayList<Exhibitor>();
for (int i = 0; i < 10; i++) {
exhibitors.add(new Exhibitor(i, "aaaaaaaaaaaaaaa"));
}
return exhibitors;
}
public HasClickHandlers getEditExhibitorButton() {
return editExhibitorButton;
}
}
The presenter class:
#Presenter(view = ExhibitorsAdminView.class)
public class ExhibitorsAdminPresenter extends
BasePresenter<ExhibitorsAdminPresenter.IExhibitorsAdminView,
ExhibitorsEventBus> {
public interface IExhibitorsAdminView {
SingleSelectionModel<Exhibitor> getExhibitorsSelectionModel();
ListDataProvider<Exhibitor> getExhibitorsDataProvider();
HasClickHandlers getEditExhibitorButton();
}
private DispatchAsync dispatch = null;
#Inject
public ExhibitorsAdminPresenter(final DispatchAsync dispatch) {
this.dispatch = dispatch;
}
#Override
public void bind() {
getView().getExhibitorsSelectionModel().addSelectionChangeHandler(
new SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
Exhibitor selected =
getView().getExhibitorsSelectionModel().getSelectedObject();
if (selected != null) {
Window.alert("You selected: " + selected.getName());
}
}
});
getView().getEditExhibitorButton().addClickHandler(
new ClickHandler() {
public void onClick(ClickEvent event) {
}
});
}
public void onGoToExhibitorsAdmin() {
}
public void onLoadExhibitors() {
dispatch.execute(new GetExhibitors(), new
AsyncCallback<GetExhibitorsResult>() {
public void onSuccess(GetExhibitorsResult result) {
getView().getExhibitorsDataProvider().setList(
result.getExhibitors());
getView().getExhibitorsDataProvider().refresh();
}
public void onFailure(Throwable caught) {
GWT.log("error executing command ", caught);
}
});
}
}
Thanks.
I solved it. I'm sorry, it was an issue related with mvp4g. I was doing something wrong that was causing to have to different instances of the view where the CellList was placed. The update operations I was doing on the list of the ListDataProvider were being done on the view instance that wasn't being shown.
You have to manipulate the list by getting it first of your provider like provider.getList().add(...). See How to add or remove a single element from/to CellList? for a minimal example.
Just call exhibitorsDataProvider.refresh() after all operations with underlying list.