Listview display wrong image at wrong place when loading thumbnail image from web - android-listview

I am using List view for displaying android files i.e. showing Folder and files from server.
When i start my activity, i can see the list on the screen, just as i want it.
and I am getting data from server.
I want to show structure like
when there is image file need to show image thumbnail (I have thumbnail URL which is getting from server by default imageloader displaying default image icon until thumbnail is not available).
when there is other file type like audio,video..... or file need to show that icon.
and when I am showing list it shows proper icon for related files.
But the moment i try to start scrolling the and in background my thumbnail is loading from server and when from server I am getting image from server and showing that bitmap thumbnail it will displaying thumbnail bitmap in other file type like folder or music file icon due to view reusing of listview.
this misplace is happen when getting image from server.
any one can please suggest me to how to overcome this problem.
below is my getview() method of my listview.
public View getView(int position, View convertView, ViewGroup parent){
ViewHolder viewHolder = new ViewHolder();
if(convertView == null){
convertView = _inflate.inflate(R.layout.layout_list, null);
viewHolder.text = (TextView) convertView.findViewById(R.id.title);
viewHolder.owner = (TextView) convertView.findViewById(R.id.owner);
viewHolder.image = (ImageView) convertView.findViewById(R.id.thumb);
convertView.setTag(viewHolder);
}else{
viewHolder = (ViewHolder) convertView.getTag();
}
HashMap<String, String> item = (HashMap<String, String>) getItem(position);
viewHolder.text.setText( item.get("poiName").toString() );
viewHolder.owner.setText( item.get("owner").toString() );
ImageView imageView = viewHolder.image;
imageView.setTag(item.get("thumbs"));
//Is type of file is picture then display thumbnail by using imagloader class
if (genericDAO.sub_content_type.equalsIgnoreCase(Constants.TYPE_PICTURE))
{
String url = getTumbnalURL();
viewHolder.image.setTag(genericDAO.id);
viewHolder.image.setScaleType(ScaleType.CENTER_CROP);
mImageLoader.DisplayImage(id, url, mActivity,viewHolder.image);
}
else
{
//Display related file icon
viewHolder.image.setImageResource(FileUtil.getImageRelatedToFileType(mcontext, sub_ext));
}
return convertView;
}

although this code is insufficient. What I understood from this code is, you are using lazy loading for images, and mImageLoader must be running thread, which is setting image to viewHolder.
you can set imageInfo as tag in else part also.
....
else
{
//Display related file icon
viewHolder.image.setImageResource(FileUtil.getImageRelatedToFileType(mcontext, sub_ext));
viewHolder.image.setTag(genericDAO.id);
}
Inside ImageLoader, when new image is downloaded, just before you set new image to viewHolder please check for correct tag.

Related

How to call method of another class from differnet class in Xamarin

I am new to xamarin.forms.
On main page I have button "Select Photos". When user click popup open with number of images. When user tap and image popup closes.
I want to do is when popup close; I want to display the selected image on main page so user know what image they selected.
So I have method on the popup page for image click. In the method I save the image name as variable. And I try to call another method which is on main page. The Method on the main page would get the variable and display the Image.
This is code when user tap image
public void Idpty1(object sender, EventArgs args)
{
Signtype = "1";
//save the image name as variable
SelectedTypeImage = "idpty1.png";
//On the Newphoto page; call close popup function.
new NewPhotoPage().ClosePopover();
}
This is function on main page and I am trying to call this function with above function.
public void ClosePopover()
{
//Close the popover
PopupNavigation.Instance.PopAsync();
//Get the variable which was set on the popover page (image name)
SelectedTypeImage = MyPopupPage.SelectedTypeImage;
// Source the image from variable.
SelectedType.Source = SelectedTypeImage ;
//DisplayAlert("Alert2", SelectedTypeImage, "ok");
System.Diagnostics.Debug.WriteLine("test");
}
This is image code in the main page
<Image x:Name="SelectedType" Resources=""></Image>
In the above code; image part does not work, image source does not work also display alert does not work. BUT SYSTEM.DEBUG WORKS.
What I don't understand is function does get call but even display alert does not work.
I use something like
public void Idpty1(object sender, EventArgs args)
{
Signtype = "1";
//save the image name as variable
SelectedTypeImage = "idpty1.png";
//On the Newphoto page; call close popup function.
// new NewPhotoPage().ClosePopover();
Xamarin.Forms.MessagingCenter.Send<App> ((App)Xamarin.Forms.Application.Current, "CallMethod");
}
in the constructor of Main Page.
MessagingCenter.Subscribe(this, "CallMethod", (sender) => {
// do something
ClosePopover(); // <-- run u' method.
});
On your Newphoto page, just call ClosePopover method as:
YOURCLASSNAME.ClosePopover();
assuming they are in the same namespace.
Else, use using to add the namespace of your class.
Let me know if you need more clarification.

Programmatically resize a view in Eclipse

I'm testing an non-e4 RCP application using SWTBot and I need to change the size of my view. (Move the sash-bar)
I unsuccessfully tried
Resize my view using SWTBot (no such api)
Resize my view using Eclipse 3 API (no supported)
Resize my view using underlying e4 model (resizing not working)
e4 model seams to be promising, but I'm missing something, so it doesn't work.
I can
Get MPart of my view: view = ePartService.findPart(ID)
Get MTrimmedWindow: window = (view as EObject).eContainer as MTrimmedWindow
I can't
locale correct MPartSashContainer
move sash-bar with setContainerData()
I would like to know
How can I move from MPart to its direct parent (e.g. MPartStack)
Why common EObject methods like eContainer() are not present on M... objects?
Ok, I found a solution myself.
The thing is, that the view is not a part of the e4 UI-Tree. view.eContainer is directly the MWindow. To be placed at the right spot the view is connected to the MPlaceholder, that is a part of the e4 UI-Tree and has getParent() != null.
In order to resize a view the steps are:
Show view
Find MPlaceholder of the view
Find MPartStack and `MPartSashContainer´ object
Set containerData
Redraw widget (yes, auto-update seam not to work in this case)
Example:
EModelService modelService = PlatformUI.getWorkbench().getService(EModelService.class);
EPartService partService = PlatformUI.getWorkbench().getService(EPartService.class);
// Show view
IWorkbenchPage page = PlatformUI.getWorkbench().getActiveWorkbenchWindow().getActivePage();
page.showView(MyView.ID, null, IWorkbenchPage.VIEW_ACTIVATE);
MPart view = partService.findPart(MyView.ID);
// view.getParent() => null, because 'view' is not a part of the e4 UI-model!
// It is connected to the Model using MPlaceholder
// Let's find the placeholder
MWindow window = (MWindow)(((EObject)eView).eContainer);
MPlaceholder placeholder = modelService.findPlaceholderFor(window, view);
MUIElement element = placeholder;
MPartStack partStack = null;
while (element != null) {
// This may not suite your configuration of views/stacks/sashes
if (element instanceof MPartStack && ((Object)element.parent) instanceof MPartSashContainer) {
partStack = (MPartStack)element;
break;
}
element = element.parent;
}
}
if (partStack == null) { /* handle error */ }
// Now let's change the width weights
for (MUIElement element : partStack.getParent().getChildren()) {
if (element == partStack) {
element.setContainerData("50"); // Width for my view
} else {
element.setContainerData("25"); // Widths for other views & editors
}
}
// Surprisingly I had to redraw tho UI manually
// There is for sure a better way to do it. Here is my (quick & very dirty):
partStack.toBeRendered = false
partStack.toBeRendered = true

Lazily Initialize/Load a GXT Widget When Its Parent Becomes Visible

I am very new to GXT (and GWT/GWTP for that matter). I want to know if I can lazily load a GXT (4.0) [custom] widget when a modal Dialog that contains its panel is displayed (dialog initially not shown and only appears when a button is clicked).
The reason I want this behavior is that this widget needs to load an applet HTML code which is not available when the page initially instantiates all the other field widgets/panels/dialogs. Therefore, I need to delay obtaining the applet code from another application until the dialog is explicitly appears.
Is this possible?
Lazy loading of images and urls loaded into a GWT Frame (IFrameElement). You can catch the event once say the image/url is loaded using the LoadHandler event.
private void loadLoginPage() {
final Frame frame = new Frame(url_base + url_login); // set the frames url
frame.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
// Get the document from the loaded frame (similar to RootPanel on main page)
Document doc = IFrameElement.as(frame.getElement()).getContentDocument();
// From here you can wrap widgets in the frame like this
final TextBox username = TextBox.wrap(doc.getElementById("username")); // from the html doc using id="username"
// grab a div element
DivElement div = DivElement.as(doc.getElementById("mydiv"));
// Create content to be added to the doc
ButtonElement button_elem = doc.createPushButtonElement();
Button button = Button.wrap(button_elem);
// attach to the document
div.appendChild(button.getElement());
}
});
// Attach to DOM
RootPanel.get("mything").add(frame);
}
And similar for image loading.
Image image = new Image(image_url);
image.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
// image is ready to be used.
}
});
// attach to DOM to initiate loading of the image
Hope this helps...

GWT: How to dynamically load a new image?

I want to fetch an image from a remote server (not my app's server, but I don't think that matters) and display it in an existing Image widget. The existing widget displays its original content, from a ClientBundle ImageResource , OK.
In UiBinder template:
<g:Image ui:field='myImage' resource='{res.anImage}'/>
In code:
#UiField Image myImage;
...
int width = Window.getClientWidth();
int height = Window.getClientHeight();
String url = ...;
myImage.addErrorHandler(new ErrorHandler() {
public void onError(ErrorEvent event) {
Window.alert("Error getting image data: " + event);
}
});
myImage.addLoadHandler(new LoadHandler() {
public void onLoad(LoadEvent event) {
Window.alert("LoadEvent: " + event);
}
});
myImage.setUrlAndVisibleRect(url, 0, 0, width, height);
As far as I can tell setUrlAndVisibleRect is a no-op. FireBug reports no network activity -- no request to the server specified by the URL. What am I overlooking? In my extended thrashing about trying to get this working I have inferred that it may have something to do with myImage not being "logically attached", but I'm not entirely sure what that means and I've no idea how to correct it if that is the problem.
EDIT with SUMMARY of SOLUTION:
My initial hunch was right. Because I had chosen to implement the image code within a second pseudo-widget (...extends Composite) that shared my UiBinder template with the main pseudo-widget that implements most of my app's UI, I got into trouble. I neglected to add this second pseudo-widget to the RootPanel as is normally done in the class that implements EntryPoint. This left my Image widget unattached to the widget chain, because its parent, the second pseudo-widget, was unattached. And an Image widget must be attached to work. What I ended up doing is moving the Image code back into my main app/GUI class, i.e., into the first and now only pseudo-widget and abandoning the special class for the Image code. I did that because it's simpler and the Image code turns out not to be as long as I had originally thought.
Adding image to the DOM is little tricky,the below code which supports all the browsers(setVisibility trick added to support IE also,as It has a different way to image rendering).
I did'nt use setUrlAndVisibleRect before and AFAIK,Image must render to the DOM inorder to resize it.Just try the below codes.
image.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
//Do your operations on image .//resize ..etc
image.getElement().getStyle().setVisibility
(Style.Visibility.Visible);
}
});
image.getElement().getStyle().setVisibility(Style.Visibility.HIDDEN);
RootPanel.get().add(image);
image.setUrl(url);
You are using ClientBundle ImageResource which is compile time. You cannot change it unless you replace the new image with exact name in the exact position of prev one. One of the possible hack which is possible is, place the image in a div with its ID set ( getElement().setId("your ID") ). Once you get you new image you use RootPanel.get("Your Id") and do your job.

Overlay images in gxt Tree Panel

I'm developing a gxt application that provides a view for svn-like versioning: A TreePanel that displays a file system structure with files and folders having different states (new, modified, deleted, etc.).
I want to display a small overlay icon on each of the items to reflect its state. What I could do, is to create an icon for each state, but I don't want to do that, because I would end up in creating a large bundle of redundant images.
What would be the best way to implement overlay icon capabilities in trees or grids?
After checking the dom of the tree structure, I figured out that a tree icon is displayed using the background-url css attribute. To ensure the image is being displayed with correct size, the src attribute of the element is filled with a placeholder image url.
The trick is, to replace the placeholder image with the overlay icon, since it is displayed above the actual image.
To accomplish this, I extended ClippedImagePrototype to inject the url of the overlay image:
public class OverlayImagePrototype extends ClippedImagePrototype {
protected String overlayImageUrl = null;
public static AbstractImagePrototype create(ImageResource resource, String overlayUrl) {
return new OverlayImagePrototype(resource.getSafeUri(),
resource.getLeft(), resource.getTop(), resource.getWidth(),
resource.getHeight(), overlayUrl);
}
private OverlayImagePrototype(SafeUri url, int left, int top, int width,
int height, String overlayUrl) {
super(url, left, top, width, height);
this.overlayImageUrl = overlayUrl;
}
public ImagePrototypeElement createElement() {
ImagePrototypeElement imgEl = super.createElement();
if (overlayImageUrl != null) {
imgEl.setAttribute("src", overlayImageUrl);
}
return imgEl;
}
}
This is how I use OverlayImagePrototype in the IconProvider implementation:
tree.setIconProvider(new ModelIconProvider<ModelData>() {
public AbstractImagePrototype getIcon(ModelData model) {
return OverlayImagePrototype.create(model.get("icon"), model.get("overlayIconUrl"));
}
});