Problem with an image on a grid.

[mwalter]

I have a grid that has an image on it on a mobile device. The grid is a Mobile Grid. When the user taps on a grid row, the image should become visible. I'm controlling this with Javascript. Here is the javascript.

Code: Select all

var myGrid = getObj("Grid1");
var selBin = myGrid.grid.getDataValue(row,"SCBIN");
changeElementValue("txtSelectedBin",selBin);

// uncheck all other boxes.
var rows = myGrid.grid.getRecordCount();
//alert(rows);

for (var x = 1; x <= rows; x++) {
    var text = "imgSelected.";
    var txtObj = text + x;
  
  if (x != row) {
    //alert(txtObj);
    applyProperty(txtObj,"visibility","hidden");
    applyProperty(txtObj,"field type","image");
  }
  else {
    applyProperty(txtObj,"visibility","visible");
    applyProperty(txtObj,"field type","image");
    applyProperty("btnSave","disabled","false");
    applyProperty("btnSave","field type","css button");
    
  }
}

The issue is that it works fine when running in a computer browser on a PC. However, when you run it on the Profound Mobile UI, the image will show for a split second, then the image not found image will display.

Thanks,

[Emily]

Hi Mark,

You may need to use the pui.normalizeURL() API in order for your image to show up properly in your mobile application. If you are using a relative path for your image source, it will not show properly on your local mobile device if your image is located on the server. You can fix this by using the pui.normalizeURL() API. You could do something like this in the 'image source' property:

Code: Select all

 js: pui.normalizeURL(/"images/myImage.png")

You would, of course, change the path in the code above to the appropriate location of the image that you are using. You can read more about using pui.normalizeURL() for this in our documentation here: http://www.profoundlogic.com/docs/displ ... neGap+apps.

Could you give this a try and see if that solves the problem that you're having?


--Emily

[Scott Klement]

Hmmm... Emily, that doesn't explain why the image would appear for an instant before changing. Unless what he's seeing for that instant isn't the proper image, but is a temporary placeholder?

Mark, to clarify... when you set the "image source", unless it starts with http:// (or https://) it is treated as a "relative URL". Which means it is based on the base document.

So if you're in a browser and connecting to http://mysystem/profoundui/start and the image source is set to "test/image.png" then it will use a URL of http://mysystem/profoundui/start/test/image.png". Or if you used "/test/image.png" it would use a URL of "http://mysystem/test/image.png". In that respect, it is no different from a URL that you code in HTML with the <img src="the-url"> tag.

But, when you are using the Profound UI mobile client (or a client you generate yourself with PhoneGap) the base URL is actually the location where the app is stored on your mobile device. The initial "page" you display is not on your IBM i, instead it is that page where you can select the system to connect to, and that page is running off of the local device's filesystem. So the URL would also be assumed to be coming from the local device's file system. Occasionally that might be what you want (you might load the images on the device to improve performance) but most of the time it's not.

You could fix it by hard-coding http://yoursystem/ into the URLs, but that is obviously not ideal either, since you may decide to move your application to a different server or instance in which case you'd have to change every URL in every program, so... yuck.

That is why we provile the pui.normalizeURL() javascript routine. It is a JavaScript API that prepends the current IBM i hostname into the URL so that it will retrieve the file from your IBM i rather than trying to get it from the device's filesystem. Since you're calling this API each time, it does not need to be hard-coded in every URL, so your application can be moved without errors.

Apologies if that is long-winded, but sometimes it's good to know how things work.

Anyway, if that is the problem, you wouldn't ever see the proper image (not even for an instant) because it'd never be able to retrieve it. On the other hand, if what you're seeing for an instant isn't your actual image, but just a generic placeholder that the browser shows while it is waiting for the image to download, then it would make perfect sense.

[mwalter]

Thanks for the replies. I tried to use pui.normalizeURL and kept getting an error in the designer and runtime about an invalid regular expression character. So, I just qualified the url to the image with the server.

Have a great Holiday Season.

[Scott Klement]

This has nothing to do with regular expressions...