How to use QuickTip on Grid cell Sencha GXT 3.1.1? - gwt

I need add a tooltip on grid cell, but this tooltip must allow the user select text inside the tooltip. I'm using the QuickTip like this.
ColumnConfig<ClientModel, String> clmName = new ColumnConfig<ClientModel, String>
(dpGridModel.name(), 150, "Name");
clmName.setCell(new TextCell() {
#Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
if (value != null) {
StringBuilder bAux = new StringBuilder();
ClientModel c = lstModel.get(context.getIndex());
bAux.append("<div style='width:100%;height:21px;' qtip='<table>");
bAux.append("<tr><td><b>ID:</b></td><td>" + c.getId() + "</td></tr>");
bAux.append("<tr><td><b>Name:</b></td><td>" + c.getName() + "</td></tr>");
bAux.append("<tr><td><b>Adress:</b></td><td>" + c.getAddress()+ "</td></tr>");
bAux.append("<tr><td><b>City:</b></td><td>" + c.getCity()+ "</td></tr>");
bAux.append("<tr><td><b>Email:</b></td><td>" + c.getEmail() + "</td></tr>");
bAux.append("<tr><td><b>Phone:</b></td><td>" + c.getPhone() + "</td></tr>");
bAux.append("<tr><td><b>Zip Code:</b></td><td>" + c.getZipcode() + "</td></tr>");
bAux.append("</table>'>" + value + "</div>");
sb.appendHtmlConstant(bAux.toString());
}
}
});
QuickTip t = new QuickTip(gridClient);
t.setAllowTextSelection(true);
t.setClosable(true);
The Tooltip ever hides when mouse move. I need what the Tooltip wait by close click to hide, like ToolTip with ToolTipConfig.
I tryed using QuickTip with ToolTipConfig like this.
QuickTip cqt = new QuickTip(gridClient);
cqt.setMaxWidth(650);
cqt.setClosable(true);
cqt.setQuickShowInterval(500);
cqt.setAllowTextSelection(true);
ToolTipConfig config = new ToolTipConfig();
config.setAutoHide(false);
cqt.setToolTipConfig(config);
It's works QuickTip doesn't hide, but appears a blank tooltip above the QuickTip
thanks for help :D

The second try does not work because when you call setToolTipConfig in the QuickTip object it is going to create a new ToolTip for the QuickTip and this is not what we want.
In the first case we just need to set autoHide to false, but there is no method to do this in the QuickTip class, so the option is to use the update method like this:
QuickTip t = new QuickTip(gridClient);
t.setAllowTextSelection(true);
ToolTipConfig config = new ToolTipConfig();
config.setAutoHide(false);
config.setCloseable(true); // need to set it here otherwise it will be overwritten
t.update(config);

Related

button color changed but not updated in screen in android

See I have used runOnUIThread(){} in AsyncTask to update button color. After updating those button attributes I can read its color, name, etc... In Log everything is showing correctly but those properties were not getting updated in UI. How to fix it?
Here is my code,
MainActivity.activity.runOnUiThread(new Runnable()
{
#Override
public void run() {
Log.d("status","Inside Main Thread");
Log.d("status","Chaning to your turn");
yourTurn.setText("your turn *");
oppTurn.setText("");
Log.d("status","Your turn : " + yourTurn.getText().toString());
Log.d("status","Your turn boolean : " + isYourTurn);
Log.d("status","Changing bg color");
button.getBackground().setColorFilter(0xFFFF0000,PorterDuff.Mode.MULTIPLY);
Log.d("status","Updating the scores");
yourScoreView.setText(gamer.getGamerName() + " Score : " + gamer.getYourScore());
oppScoreView.setText(gamer.getOppName() + " Score : " + gamer.getOppScore());
}
});

Cannot bind List<T> data to listview in android

I try to show custom list data to simple listview but listview does not show correctly list data value.
This is source ...
final Dialog dialog = new Dialog(context, R.style.cust_dialog);
dialog.setContentView(R.layout.orgcode);
dialog.setTitle("Product List...");
Button btnchkOk = (Button) dialog
.findViewById(R.id.btnOrgCodeOk);
Button btnchkCancel = (Button) dialog
.findViewById(R.id.btnOrgCodeCancel);
ListView lvlOrgCode = (ListView) dialog
.findViewById(R.id.lvlOrgCode);
// prevent touch outer side
dialog.setCanceledOnTouchOutside(false);
List<Object> orglist = new ArrayList();
List<OrgcodeInfo> orgcodeList = new ArrayList<OrgcodeInfo>();
orgcodeList = _CashSaleLoginLogic
.OrgCodeList("Select ORG_CODE as [Org Code] , ORG_NAME From VW_MainLogin Where USER_ID = '"
+ UserInfo.Role.toLowerCase() + "'");
ArrayAdapter adapter = new ArrayAdapter(this,
android.R.layout.simple_list_item_1, orgcodeList) {
};
This is incorrect data
How can I fix it?
you need to set arrayAdapter to listView . Hear your listView object is lvlOrgCode
and your created adapter is
ArrayAdapter adapter = new ArrayAdapter(this,android.R.layout.simple_list_item_1, orgcodeList)
now add this line in your program :
lvlOrgCode.setAdapter(adapter);
i think it would help you.

How to add MouseOver handler to a VectorFeature in GWT-Openlayers

I want to show a custom tooltip (popup) when user hovers over a Vector Feature on the GWT-openlayers map. I know that SelectFeature.setHover() will allow me to do this but that will also select the feature which i dont want to have.
it is like, when the user hovers, tooltip must be shown and when he clicks on the feature, then selection muse happen.
how can this be achieved?
Regards
Jatin
Check out this code.
This will also be added to our showcase but we have a little problem with the server at the moment. Will give a shout here when it is uploaded.
Note that the order in which you add the SelectFeature controls is important.
public void buildPanel() {
// create some MapOptions
MapOptions defaultMapOptions = new MapOptions();
defaultMapOptions.setNumZoomLevels(16);
// Create a MapWidget
final MapWidget mapWidget = new MapWidget("500px", "500px",
defaultMapOptions);
// Create an EmptyLayer as base layer
EmptyLayer.Options emptyLayerOptions = new EmptyLayer.Options();
emptyLayerOptions.setAttribution("EmptyLayer (c) GWT-Openlayers");
emptyLayerOptions.setIsBaseLayer(true); // make it a baselayer.
EmptyLayer emptyLayer = new EmptyLayer("Empty layer", emptyLayerOptions);
mapWidget.getMap().addLayer(emptyLayer);
// Add a clickable vectors to the map
// create a layer to add the vectors to
final Vector vectorLayer = new Vector("Vectorlayer");
mapWidget.getMap().addLayer(vectorLayer);
// SelectFeature control to capture clicks on the vectors
final SelectFeature selectFeature = new SelectFeature(vectorLayer);
selectFeature.setAutoActivate(true);
// SelectFeature control to capture hover on the vectors
SelectFeatureOptions selectFeatureHoverOptions = new SelectFeatureOptions();
// use the tempory style to be defined in the StyleMap
selectFeatureHoverOptions.setRenderIntent(RenderIntent.TEMPORARY);
selectFeatureHoverOptions.setHighlightOnly(true);
selectFeatureHoverOptions.setHover();
SelectFeature selectHoverFeature = new SelectFeature(vectorLayer,
selectFeatureHoverOptions);
selectHoverFeature.setClickOut(false);
selectHoverFeature.setAutoActivate(true);
mapWidget.getMap().addControl(selectHoverFeature);
mapWidget.getMap().addControl(selectFeature);
// Define a style for the vectors
Style style = new Style();
style.setFillColor("red");
style.setStrokeColor("green");
style.setStrokeWidth(2);
style.setFillOpacity(0.9);
style.setPointRadius(30);
Style selectedStyle = new Style();
selectedStyle.setFillColor("yellow");
selectedStyle.setStrokeColor("yellow");
selectedStyle.setStrokeWidth(2);
selectedStyle.setFillOpacity(0.9);
selectedStyle.setPointRadius(30);
Style hoverStyle = new Style();
hoverStyle.setFillColor("blue");
hoverStyle.setStrokeColor("pink");
hoverStyle.setStrokeWidth(2);
hoverStyle.setFillOpacity(0.9);
hoverStyle.setPointRadius(30);
StyleMap styleMap = new StyleMap(style, selectedStyle, hoverStyle);
vectorLayer.setStyleMap(styleMap);
// Add a point
Point point = new Point(146.7, -41.8);
final VectorFeature pointFeature = new VectorFeature(point);
vectorLayer.addFeature(pointFeature);
// capture clicks on the vectorlayer
vectorLayer
.addVectorFeatureSelectedListener(new VectorFeatureSelectedListener() {
public void onFeatureSelected(
FeatureSelectedEvent eventObject) {
Window.alert("The vector is now selected.\nIt will get de-selected when closing this popup.");
selectFeature.unSelect(eventObject.getVectorFeature());
}
});
// Attach a popup to the point, we use null as size cause we set
// autoSize to true
// Note that we use FramedCloud... This extends a normal popup and
// creates is styled as a baloon
// We want to display this popup on hover, and hide it when hovering
// ends
final Popup popup = new FramedCloud("id1",
pointFeature.getCenterLonLat(), null,
"<h1>Some popup text</H1><BR/>And more text", null, false);
popup.setPanMapIfOutOfView(true); // this set the popup in a strategic
// way, and pans the map if needed.
popup.setAutoSize(true);
pointFeature.setPopup(popup);
// capture hover by adding a listener to the control, and display the
// popup
selectHoverFeature
.addFeatureHighlightedListener(new FeatureHighlightedListener() {
public void onFeatureHighlighted(VectorFeature vectorFeature) {
mapWidget.getMap().addPopup(vectorFeature.getPopup());
}
});
// capture unhover, and remove popup
selectHoverFeature
.addFeatureUnhighlightedListener(new FeatureUnhighlightedListener() {
public void onFeatureUnhighlighted(
VectorFeature vectorFeature) {
mapWidget.getMap()
.removePopup(vectorFeature.getPopup());
}
});
// Center and zoom to a location
mapWidget.getMap().setCenter(new LonLat(146.7, -41.8), 6);
contentPanel
.add(new HTML(
"<p>This example shows how to add a Vector (point) to map, and do some action when hovering, and another when clicking.</p>"
+ "<p>"
+ "<LI>Hover over the point. This will cause a popup to show, and change the style of the point to the temporary style.</LI>"
+ "<LI>Then when you click the Vector gets selected, gets another style, and a Window.alert is displayed.</LI>"
+ "<LI>When closing the Window.alert, the Vector gets de-selected.</p>"));
contentPanel.add(mapWidget);
initWidget(contentPanel);
mapWidget.getElement().getFirstChildElement().getStyle().setZIndex(0);
}
You must indeed use a SelectFeature to achieve this.
The secret is that you must pass SelectFeatureOptions with highlight only enabled.
Something like
SelectFeatureOptions selectFeatureOptions = new SelectFeatureOptions();
selectFeatureOptions.setHighlightOnly(true);
SelectFeature selectFeature = new SelectFeature(vectorLayer,selectFeatureOptions);

GWT Bootstrap Popover and Tooltip placement left not working on flow right elements

I am trying to create a tooltip / popover over a button that has pull-right class set(pull-right basically sets the flow to right). The tooltip/popover crashes when trying to do a placement left. Any suggestions/ help?
/* The widget updateStatusDate is a button that floats right*/
Tooltip tooltip = new Tooltip("Date : " + timeOfOperation + " Comment : " + comment);
setUpdateStatusDate("Last Updated by : " + userName);
tooltip.setWidget(updateStatusDate); tooltip.setPlacement(Placement.LEFT);
tooltip.reconfigure();
Given your code, I have put its simplified version into my project and it works without problems. You can copy it to your project and check if it works:
#Override
public void onModuleLoad() {
// essentials from questioned code
Tooltip tooltip = new Tooltip("text");
Button updateStatusDate = new Button("test button");
tooltip.setWidget(updateStatusDate);
tooltip.setPlacement(Placement.LEFT);
tooltip.reconfigure();
// change style for the rootPanel, so the button flows to the center
// it is just for fast and short code example, do not do this in your regular project
com.google.gwt.dom.client.Style.TextAlign center = TextAlign.CENTER;
RootPanel.get().getElement().getStyle().setTextAlign(center);
//add button
RootPanel.get().add(updateStatusDate);
}
My Bootstrap version is: 2.3.2.0-SNAPSHOT, and my GWT version is 2.5.1.

GWT formating flextable & Panel create on the fly

I have a project showing comments database
I put the comments in FlexTable TabelKomen and I put the text in HTML format like this:
private static final int y=1;
public void UpdateTabelKomen(JsArray str){
for(int i=0; i str.length(); i++){
UpdateTabelKomen(str.get(i));
}
}
public void UpdateTabelKomen(ImageDetailData str){
TabelKomen.setWidget(y, 0, new HTML(str.getmember + "'s comment :" + str.getkomen()));
TabelKomen.getFlexCellFormatter().setWordWrap(y, 0, true);
y++;
}
The data was shown, but my text comment is not word wraped and make my flex table wider. Of course that will ruin my web appearance.
I change new HTML with new ScrolPanel(new HTML) seems not working.
so
How can I Format my FlexTable? is there any option beside flextable or scrollpanel?
well, looks like that a silly question. its not wrapped because my string is wkwkwkwk.... with no space. its already auto wordwrapped in the flextable.
hahah! thanks anyway.
Is it possible that y has the wrong value here? A better way to do this is to get rid of the variable y and use FlexTable#getRowCount, like so:
public void UpdateTabelKomen(ImageDetailData str){
int row = TableKomen.getRowCount();
TabelKomen.setWidget(row, 0, new HTML(str.getmember + "'s comment :" + str.getkomen()));
TabelKomen.getFlexCellFormatter().setWordWrap(row, 0, true);
}