ImageView or webview
I want to get an image in a listview. the image is from a url. should I use component imageview or webview.
who can tell me the difference
THX
Just to add to the response of @pyth, since it's on the web, you must use asynchronous loading with...
A few resources to help you...
http://developer.BlackBerry.com/native/documentation/Cascades/UI/lists/asynch_data.html
http://BlackBerry.github.IO/Cascades-samples/ImageLoader.html
Tags: BlackBerry Developers
Similar Questions
-
Hello
Is it possible to use the remote source to use ImageView component?
Currently, if I do the following:ImageView { imageSource: "http://www.some-url.com/pic.jpg }I get the following error:
"Unsupported scheme (http) used in url (http://www.some-url.com/pic.jpg). Image loading aborted."
Thank you!
No, it is currently in the well road map.
A workaround is to use a WebView...
http://supportforums.BlackBerry.com/T5/native-development/image-view-from-the-Web/m-p/2570051#M46287
[Edit] Seeing this that I realize why @PhilipK has a ListView of WebView elements, it's my fault for suggesting this work around in the first place.
-
Im trying to call my xml file _contentView.url
WebView { id: myWebView url:_contentView.url }I'm sure that the wrong way because its not working how I would do that.
IV by looking at the sample stampcollector and found something simliar
ImageView { imageSource: _contentView.URL }that makes sense but im trying to have _contentView.URL pull my google.com and others in.
I got help and figured it out
WebView { id: myWebView url: _contentView.html }and the xml string is
html="http://google.com"/>
-
Recent Utilitybill only gave imageview.spx as the ability to view my Bill. How can I handle this. ?
In fact, when I search imageview.aspx it seems to be used for images (the meaning of the name), then you can try to rename it with an extension .jpg on the assumption that this is probably a JPEG image.
-
How to report bugs of rendering CSS browser WebView/BB?
I have an app that bypasses the normally difficult radio button style html5 by cutting the real radio inside a rectangle 0,0,0,0, then using the CSS: before Pseudo selector to create a substitute radio button image using nothing more than CSS attributes. It works perfectly on every single desktop browser, I tested against (Chrome, Firefox, IE, Opera), each Android browser, I've tried (Chrome, Firefox, Opera) and the same Android browsers running on my Z10 via Cobalt (Chrome, Firefox, Opera), but on the browser BB10 and WebView (so-called WebKit based as Chrome and Opera) does not support the CSS style the : Pseudo-selector update to show that when the Group of option buttons has focus.
This is an example of what a couple of radio buttons by using this technique looks like when they have not developed in the...
When option buttons have the focus, it should look like this...
But as I said, on the browser BB10 or WebView even with the development of radio buttons always look like the first example. On all other browsers (except iOS/Safari, which proves defective as browsers BB10) favouring option buttons look like the second example.
Anyone where I can tell you something like that?
In the immortal words of Emily Littela... never mind. Since the BB10 and WebView browser seem to ignore the: pseudo-selector developed, I thought that it was a CSS rendering problem, but it is not. The idea that led me to a solution, is that the same problem occurs on iOS Safari too. A little Google search on the oddities of Safari has revealed the real cause.
It turns out that even if Safari, as the browser BB10 and WebView, are Webkit based, he manipulates not the focus of the element like all the other funds or Android mobile WebKit browsers. Based on certain types of HTML elements is not automatically set focus to this element. One of the element types that it affects is the radio input element that I use. Some devs online are speculating that avoids unnecessary popups of the keyboard to the iOS screen by typing some controls on a form, but does not say Apple.
The solution is quite simple, just set the focus in the OnClick of the radio input element explicitly. In this way, by tapping the control will force the browser to focus control and if necessary: focus CSS will be applied...
myRadioButton.focus();
I use jQuery so my generic code to manage all the radio buttons to a page looks like this...
$('input[type="radio"').click( function() { $(this).focus(); });It is clear that BlackBerry browser and WebView work in the same way as iOS Safari because this code sets things there also. I don't know if someone else is bickering with this problem when you target the WebView or BB10 browser, but I thought I would post the solution, just in case.
-
Embed the video player in WebView - Fullscreen problems
I'm at the point where I have to integrate a 3rd party html5 web player.
I created a view of web pages containing the video player embedded in an iFrame. I have also the app resize the display orientation of the device-based Web.
The problem is with the button full screen set up in the video player. Pressed, she calls a video player fullscreen BB10. This works well until the orientation of the device is changed. The full screen video not to back the new dimensions of the screen, and after leaving full-screen, the webview dimensions are incorrect.
What is called when the button fullscreen is pushed? Where can I get and edit the metadata for the fullscreen player? Be able to address this issue is absolutely crucial to be able to finish my application, so any help will be greatly appreciated.
I've done an investigation more, and it appears as if it is actually a bug in the operating system. I have loaded a developer version of 10.3.1 on my Z10, and media player automatically adapts to the direction correctly.
-
Trouble sometimes with WebView short Web page rendering
I noticed sometimes in my application poorly rendered Web pages in a WebView because the webview appears dynamically size itself so that it is only as high as it should be... so if something to Center vertically, it appears at the top of the screen, not the vertical middle of the screen. There was even a Yahoo/Facebook login page that started small and has started to grow a few pixels per second!
I tried to add:
verticalAlignment: VerticalAlignment.Fill
... for the WebView to the ScrollView as if it is contained in and to the container that contains the ScrollView, but that doesn't seem to help.
I found another post on the forum that answers this question:
WebView { ... preferredWidth: Infinity preferredHeight: Infinity } -
Hi guys I can't upload images and I can't download the file in my application with a webview. Why?
I click on the image that I select to save the images, but I can't find in the folder the same when I decide to download photos
I selected the photos upload, I push and the images aren't downloading.Second question I have a tab with a webview I can add a button that would take me in a first link on the tab?
Example: tab (at home), I click and tab I can see the home page (http://home.com) when I browse to this page for a long time, I won't go back in (http://home.com) before I inseret the back button but if I see 60 pages, I'll go back 60 timesTy guys
go to the bar - descriptor.xml and activate your authorization of shared files.
-
Hello
Is there any way other than using image to create the border around a container or an imageview?
something like this, add a background color in the outside for a border effect.
{Of container
topMargin: 20
bottomMargin: 20
leftMargin: 20
rightMargin: 20
{Of container
{Label
{text: 'text'}
}
} -
OS 10.3 / WebView: no interaction with the Google Maps Javascript API
Hello
Google Maps Javascript API no longer works correctly using the Web on OS 10.3. On all the operating system previous releases everything worked perfectly fine in WebView but on OS 10.3 even if the plan (or view, or anything else provided by Google APIs) is displayed correctly, there is no interaction whatsoever with it - no response to taps, none is panoramic, no zoom, etc.
I don't speak of the 10.3.0.698 Simulator - I do not have access to the true OS 10.3 device.
Even simple examples of Google Maps doesn't work, try for example:
import bb.cascades 1.2 Page { Container { preferredHeight: 720 preferredWidth: 720 WebView { preferredHeight: 720 preferredWidth: 720 url: "https://google-developers.appspot.com/maps/documentation/javascript/examples/full/marker-simple" } } }The map appears, but there is absolutely no interaction with it - just a STATIC content. On OS 10.2.xxxx, it works perfectly fine...
P.S. If you open the same example URL directly in the web browser on OS 10.3 everything works well - responds to taps, she can be zoomed, panned, etc.. So, it's apparently a problem with user agent (which is probably the same web browser both webview). Change the user agent in WebView to e.g. Z10 user agent doesn't help, either.
Can anyone help?
Your sample application does not seem to suffer the original bug, I thought. That bug could cause a WebView with no ancestor ScrollView would get too small window Visual and tactile input would be anchored to the Visual display window very small. If you want to learn more on this topic, see a tale of two windows - part for the discussion of Visual and updated display on the page. Perhaps your sample application it is OK because it specifies a preferredHeight for Web display, which can affect the used Visual display window.
To be more precise, on a real device of passport BlackBerry running OS versions 10.3.0.1052 and 10.3.0.1154, the sample you provided responds perfectly to press ENTER.
However, on the Simulator on OS 10.3.0.698, I can confirm input touchscreen does not work. Therefore a separate bug, which seems to be specific to the Simulator.
I think you can be assured that end users will still be able to use your app (s) on a real passport of BlackBerry device, but it is unfortunate that it does not work on the Simulator.
-
I have a ListView that ItemData containing Web sites. When you select an item, it pushes a page from the data. I can view the data. Then I have an action button that pushes another page with a WebView. The problem I have is that the WebView never is completed and said that the web page is unavilable. I have a label that does not display the correct Web page and I can also get the Web page to display if I put the url directly to the page.
Here is the code:
actions: [ ActionItem { title: qsTr("View") imageSource: "asset:///icons/actions/view.png" onTriggered: { var page = htmlPage.createObject(); page.url = "http://www.google.com"; console.log(page.url); navPane.push(page); } } ]import bb.cascades 1.2 Page { property string url id: htmlPage Container { preferredWidth: Infinity preferredHeight: Infinity verticalAlignment: VerticalAlignment.Center horizontalAlignment: HorizontalAlignment.Center WebView { id: webView settings.background: Color.Black url: url } Label { text: url textStyle.fontSize: FontSize.XXSmall } } }I tried a lot of different things without success. Anyone have this type of process work?
All of a sudden, it came to me.
property alias url : webView.url -
How to detect when ListView recycles an ImageView?
I have a ListView with items ~ 600 in a 4-wide grid. Each element is a WebImageView (inherits from ImageView, slightly modified from code kindly provided here) over a label.
Everything works spot - we (and performance is awesome) except for one glaring problem: when I sometimes momentarily the ImageView ListView displays scrolling scrolls the erroneous image of an item that was previously on. Sometimes it moves even between two prior images before displaying the right pair. These problems are happening because applications for network WebImageView queues upward because the visible element has been recycled once or even twice.
What I need to solve this problem is to know when the WebImageView has been recycled by ListView in order to disconnect the network signals and erase the old image. I can't find how to do this.
So I have a "fix" that is more than a workaround. In the WebImageView, I added a member variable:
int m_iCurrentRequestIndex;
Whenever WebImageView has applied for a network, I add m_iCurrentRequestIndex as an attribute of the QNetworkRequest and then increment.
When I receive the response from the network, I check if the value of attraibute for example a_reply-> request (.attribute (...)) and throw the answer if it is not the last.
Not a very good solution because it is always that which allows network support needless to proceed and just throw the results, but at least it works. But if anyone can answer the question in the original post, I who brand as the solution because it will allow for better efficiency. I want to know a signal or something available at WebImageView that is called when ListView is recycled as:
WebImageView::onRecycled() { // close() and disconnect() current QNetworkRequest(). } -
ImageView expected to auto-sense orientation
A few comments to the people of the API:
Shouldn't the ImageView read the EXIF of a JPEG image and automatic image rotation? And so by default, shouldn't there not a property such as 'autoOrient' or 'function' that this happens?
Seen developers manually read the EXIF data, manually turn the images, etc., seems to be a waste of developer time.
Follow-up question: if I do it manually and you end up with a QImage, how to recognize an ImageView to use a QImage? Is this possible?
And one last question followed: what type is the property of 'image' of the ImageView? He says it's a QVariant, but is not very useful. Can we set this property, or is read-only? Overall, I think that the "image" property documentation could use some improvements.
Thank you
Daniel
Understood that through:
... my container was not big enough. I have change the container that has the ImageView to fill the page, and which prevented the cropping. I'm glad it was something simple.
Here is a very rough code incase it is useful to someone else:
#include
#include #include #include ... // Gets called when the root container is resized, so that we can track // how large it is. void PhotosModel::updateContainerSize(qreal width, qreal height) { // Is this the initial call to updateContainerSize, or did // the size of the container change because of an orientation // change? bool initOrReInit = (containerWidth != (int)width); containerWidth = width; containerHeight = height; if (initOrReInit && imageLoadedFlag) { // When we tried to load this, we didn't yet know the width of the // screen. Now that we do, display the image. qDebug() << "Delayed image load"; loadImage(photos.at(curPhoto).absoluteFilePath()); } } void PhotosModel::loadImage(QString file) { imageLoadedFlag = true; // If the screen hasn't loaded yet and we don't know how wide // the container is, then hold off until we do. if (containerWidth == 0) { qDebug() << "Can't display image yet"; return; } int width = -1; int height = -1; bool xyFlip = false; ExifLoader* loader = exif_loader_new(); exif_loader_write_file(loader, file.toStdString().c_str()); ExifData* data = exif_loader_get_data(loader); imageView->setRotationZ(0); int desiredRotation = 0; if (data != NULL) { //exif_data_dump(data); // Treating this as int* seems to result in corruption / bad behavior. // I think orientation is supposed to be a 'short int', which I would have // thought would be 2 bytes, but short int * doesn't seem to be consistent // either. So far char* seems to work. char* orientationPtr = (char *) GetExifValue(data, EXIF_TAG_ORIENTATION); if (orientationPtr != NULL) { //int orientation = *orientationPtr; int orientation = orientationPtr[0]; // 1 -> OK // 3 -> Rotate 180 // 6 -> CC 90 // 8 -> C 90 qDebug() << "Orientation: " << orientation; if (orientation == 3) { desiredRotation = -180; } // NOTE: Also doing this for orientation == 0, because I have // a photo with orientation 0 that seems to need this. // Confused. Picasa seems to know that the image needs // this rotation. else if (orientation == 6 || orientation == 0) { desiredRotation = 90; xyFlip = true; } else if (orientation == 8) { desiredRotation = -90; xyFlip = true; } else { desiredRotation = 0; } //qDebug() << "Width: " << width << ", Height: " << height; } long* widthPtr = (long *) GetExifValue(data, EXIF_TAG_PIXEL_X_DIMENSION); if (widthPtr != NULL) { width = (int)*widthPtr; } long* heightPtr = (long *) GetExifValue(data, EXIF_TAG_PIXEL_Y_DIMENSION); if (heightPtr != NULL) { height = (int)*heightPtr; } } if (width == -1 || height == -1) { // Trouble. We don't know how large the photo is. // For now we'll just show nothing. Will this ever happen? How can we // fail more gracefully? imageView->setVisible(false); ErrorHelpers::showDialog("Missing EXIF Data", "The EXIF data for this image doesn't indicate its width/height, and so it cannot be displayed."); } else { imageView->setVisible(true); } int virtualContainerWidth; int virtualContainerHeight; if (xyFlip) { qDebug() << "xyFlip"; virtualContainerWidth = containerHeight; virtualContainerHeight = containerWidth; } else { virtualContainerWidth = containerWidth; virtualContainerHeight = containerHeight; } qDebug() << "virtualContainerWidth: " << virtualContainerWidth; qDebug() << "virtualContainerHeight: " << virtualContainerHeight; float imageAspect = (float)width / (float)height; qDebug() << "imageAspect: " << imageAspect; float screenAspect = (float)virtualContainerWidth / (float)virtualContainerHeight; qDebug() << "screenAspect: " << screenAspect; int imageScreenWidth; int imageScreenHeight; if (imageAspect > screenAspect) { // Image is wider than screen aspect wise, so X will be limiting dimension. if (width > virtualContainerWidth) { imageScreenWidth = virtualContainerWidth; } else { imageScreenWidth = width; } // Better to round here? imageScreenHeight = (int)((float)imageScreenWidth / imageAspect); qDebug() << "Limited by X"; qDebug() << "imageScreenWidth: " << imageScreenWidth; qDebug() << "imageScreenHeight: " << imageScreenHeight; } else { // Image is taller than screen aspect wise, to Y will be limiting dimension. if (height > virtualContainerHeight) { imageScreenHeight = virtualContainerHeight; } else { imageScreenHeight = height; } // Better to round here? imageScreenWidth = (int)((float)imageScreenHeight * imageAspect); qDebug() << "Limited by Y"; qDebug() << "imageScreenWidth: " << imageScreenWidth; qDebug() << "imageScreenHeight: " << imageScreenHeight; } int imageX; int imageY; imageX = (int)((float)containerWidth / 2.0f - (float)imageScreenWidth / 2.0f); imageY = (int)((float)containerHeight / 2.0f - (float)imageScreenHeight / 2.0f); qDebug() << "imageX: " << imageX; qDebug() << "imageY: " << imageY; imageView->setPreferredWidth(imageScreenWidth); imageView->setPreferredHeight(imageScreenHeight); AbsoluteLayoutProperties* layoutProperties = new AbsoluteLayoutProperties(); layoutProperties->setPositionX(imageX); layoutProperties->setPositionY(imageY); imageView->setLayoutProperties(layoutProperties); qDebug() << "desiredRotation: " << desiredRotation; imageView->setRotationZ(desiredRotation); imageView->setImage(QUrl("file://" + file)); } void* PhotosModel::GetExifValue(ExifData* data, ExifTag tag) { for (int i = 0; i < EXIF_IFD_COUNT; i++) { ExifContent* content = data->ifd[i]; ExifEntry* entry = exif_content_get_entry(content, tag); if (entry != NULL) { return entry->data; } } return NULL; } ... and some related QML...
Page { Container { id: rootContainer objectName: "rootContainer" background: Color.Black; layout: DockLayout { } horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Fill attachedObjects: [ // This handler is tracking the layout frame of the button. LayoutUpdateHandler { id: handler onLayoutFrameChanged: { photosModel.updateContainerSize(layoutFrame.width, layoutFrame.height); } } ] Container { layout: AbsoluteLayout {} horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Fill ImageView { id: imageView objectName: "imageView" scalingMethod: ScalingMethod.Fill //scalingMethod: ScalingMethod.AspectFit preferredWidth: 1 preferredHeight: 1 layoutProperties: AbsoluteLayoutProperties { positionX: 1 positionY: 1 } // Tried this, but the image is still animating into place. loadEffect: ImageViewLoadEffect.None attachedObjects: [ ImplicitAnimationController { enabled: false } ] } }It is an amount disappointing nonsense to be caused by the ImageView doesn't Autodetect not the EXIF orientation flag. Please improve this BlackBerry.
-
Progress indicator overlap Webview
Hello
I have tried to solve this one for a while now and came on the Support Forums for help because I have absolutely no idea what is causing this to happen.
I use a webview and then using a progress meter to display the web page loading inside the webview. The only problem I have is that a thin black line appears at the bottom of the page and then the progress indicator support above it.
BlackBerry 10 UI guidelines should not be black lines on the screen; then, before I release my update, I want to get rid of that black line.
Any help would be greatly appricated, thank you
No I meant the top-level one who holds your WebView, this is my code (bits removed for clarity)...
Container { layout: DockLayout { } ScrollView { id: scrollView scrollViewProperties { scrollMode: ScrollMode.Both pinchToZoomEnabled: true } Container { background: Color.LightGray WebView { id: webView url: "http://www.google.co.uk" settings.viewport: { "width": "device-width", "initial-scale": 1.0 } [ ... removed ... ] } } } Container { horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Bottom bottomPadding: 30 ProgressIndicator { id: loadProgress opacity: 0.0 } } -
Integration of ImageView and Qimage
A large part of this issue has been discussed here:
Basically, the suggested correct way of converting a QImage ImageView is this one:
PixelBufferData pbd (PixelBufferData::RGBA_PRE,yourQImage.width(),yourQImage.height(),yourQImage.width(),yourQImage.bits()); yourImageView->setImage(pbd);
Then there was someone by specifying the format must be probably BGR instead of RGB, which could be done with OpenGL or like this:
image.rgbSwapped();
Here is my code I have a problem with:
PixelBufferData pbd(PixelBufferData::RGBA_PRE, orgPattern.width(), orgPattern.height(), orgPattern.width(), orgPattern.rgbSwapped().bits()); m_patternFrame->setImage(pbd);
orgPattern is a QImage loaded from a file path that is sure to exist. m_patternFrame is a pointer to the ImageView.
I know that m_patternFrame is a pointer valid because if I call its method setImageSource by the way I created the QImage, it displays this image. But when I run this code, it is printed in the console:
Context: Cannot find the node target with id %d 906.
Sometimes the number is different. When I tried again, it was 563. The application is not cursh or gel, but nothing happens with the framework, it is still empty.
Can anyone provide any help with this problem?
Thanks for starting a new thread and referring to another thread. Allows us to provide you with a timely response.
Before dive us into this too far, what is the width and height? (We are within the limits, I guess?)
And can you try to make the setImage in 2 steps: first to create the Image of the PDB rather than implicitly and test! image.isNull)
Stuart
.){kind=link}
Maybe you are looking for
-
I lost the installation of the spell checker on my email, how can I get it back?
As stated above: how to recover the installation of the spell checker on my pages of e-mail?
-
I need the password guest at Laurel Oaks Apartments, the name is bedhlem-guest. Let me know as soon as possible please
-
I have 2 separate computers, desktop running Win 7 Professional Edition. My computer adding is a netbook (laptop) and it is running Vista Home Edition. When I connect network using the laptop, I see my desktop PC in the working group with my work
-
What the blackberry in different development and another middlet
Hi all Ask a lack on the development of an application using blackberry combined. but before that, after I install everything about blackberry like eclipse and Simulator, I always have a problem with blackberry program. I did read a tutorial on black
-
BlackBerry Smartphones help requested in Saudi Arabia
Anyone in Saudi Arabia, which can provide information on how to configure the BB with Al Jawal? or know the url of a help page for Al Jawal in English?