ImgButton size problem

[YoniMSP]

Hi,

I'm trying to write a simple HLayout that contains an image (with click option) on the left, and a label on the right, with empty space between them.

The width of the image is unknown because the image source can be changed.

The problem is, that the imgButton takes all the space instead of being set to the exact image size. how can i change it?

isc.HLayout.create({
        height:"50",
        width:"100%",
        members:[
            isc.ImgButton.create({
                backgroundColor:"red",
                imageType:"normal",
                showRollOver:false,
                src:"other/star.gif"
            }),
            isc.LayoutSpacer.create(),
            isc.Label.create({
                contents:"Test"
            })
        ]
    })

SmartClient version : v8.3p_2013-01-21/PwerEdition Development Only
problem is the same for all browsers.

[Isomorphic]

To have autosizing automatically kick in, you need to set overflow:visible, set a width and height smaller than the image (generally just set both to 1), and you need to *ensure the image is loaded before you draw the widget* or else the browser will not know the size, and hence neither will SmartClient.

This last step can be done with FileLoader.cacheImages(), or with basic DOM techniques (load handler on <img>) if you're not using or can't use FileLoader.

[YoniMSP]

There is no "FileLoader.cacheImages()"

Did you mean "cacheFiles" ?
Can you provide an example for how to use it?
Should i provide the onload function to it?

[Isomorphic]

Right, you can choose between either cacheFiles or cacheImgStates.

You do want to use the callback because this is what would provide a notification that the image is loaded, and hence auto-sizing is now possible since the browser knows the image size.

[RotemMSP]

Right, you can choose between either cacheFiles or cacheImgStates.

You do want to use the callback because this is what would provide a notification that the image is loaded, and hence auto-sizing is now possible since the browser knows the image size.

Hey,

We try using FileLoader with the onload callback but we still doesn't getting the auto fit to work.

Here is a code sample to reproduce the problem (This reproduce in FF 18.0.1 and IE9).

      // Change the number 4 to new number in order to reproduce the problem

      isc.FileLoader.cacheFiles("http://www.msp-gs.com/images/msp-logo.gif?4", function () {

        isc.VLayout.create({
          ID:"mainPageLayout",
          autoDraw:true,
          width:"100%",
          height:"100%",
          members:[

            isc.ImgButton.create({
              src:"http://www.msp-gs.com/images/msp-logo.gif?4",
              imageType:"normal",
              showRollOver:false,
              showDown:false,
              autoFit:true,
              overflow:"visible",
              size:1
            })

          ]});

      });

[Isomorphic]

We're getting "works for us" on this.
If we tweak the attached source to load an image that exists in the sample tree, and apply a border to the img component, you get something you can easily run in the feature explorer:

isc.FileLoader.cacheFiles(
      "http://localhost:8080/isomorphic/system/reference/exampleImages/flags/16/US.png",
       function () {
       
       isc.logWarn("callback firing");

        isc.VLayout.create({
          ID:"mainPageLayout",
          autoDraw:true,
          width:"100%",
          height:"100%",
          members:[

            isc.ImgButton.create({
              src:"http://localhost:8080/isomorphic/system/reference/exampleImages/flags/16/US.png",
              imageType:"normal",
              showRollOver:false,
              showDown:false,
              border:"1px solid red",
              autoFit:true,
              overflow:"visible",
              size:1
            })

          ]});

      });

This appears to be rendering correctly. The image (flag) renders in the top left of the screen. The red border surrounds the image component but doesn't expand out beyond it.
The Layout itself covers the entire screen (though it isn't visible).

Are you seeing something different within your app, somehow?

[RotemMSP]

Yes, we are experiencing different behavior all together. I copied pasted your code sample and the first time I entered the page I only saw a red border without any image and the second time I refreshed I saw the US flag with border.

Please try the same test but add ?1 to the end of the image source in order to reproduce the problem.

[Isomorphic]

Aha - we're now seeing the problem.

There's a bug in the FileLoader cacheing logic that's causing it to fetch a URL which includes an additional version parameter which is unnecessary for this case.

We're fixing this internally - should show up in the next nightly build (9.0d and 8.3p branches).
Alternatively you can workaround this by setting the undocumented flag isc.FileLoader.addVersionToLoadTags to false. Note that this should be done as a temporary workaround to get things working only.

Regards
Isomorphic Software

[RotemMSP]

Great, thank you

[RotemMSP]

Works like a charm :)

With the "isc.FileLoader.addVersionToLoadTags" and with the latest nightly.

[RotemMSP]

If anyone is interested here is a nice tag that we created to get auto fit image.

<%@tag description="AutoFit Image" display-name="AutoFitImage" pageEncoding="utf-8" %>

<%@ attribute name="imageURL" type="java.lang.String" required="true" %>
<%@ attribute name="id" type="java.lang.String" required="true" %>
<%@ attribute name="onClickFunction" type="java.lang.String" required="false" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

  function () {

    isc.FileLoader.cacheFiles(
        "${imageURL}",
        function () {

          ${id}.markForRedraw();

        }
    );

    // LOGO
    return isc.Img.create({
      ID:"${id}",
      src:"${imageURL}",
      imageType:"normal",
      autoFit:true,
      size:1,
      cursor:"pointer"

      <c:if test="${!empty onClickFunction}">

      ,click: ${onClickFunction}

      </c:if>

    });

  }()

Example of use:

// Application Header
    isc.HLayout.create({
      height:50,
      styleName:"applicationHeader",
      layoutLeftMargin:16,
      layoutRightMargin:16,
      defaultLayoutAlign:"center",
      members:[

        // This solves the auto fit problem with the header logo
        <eui:AutoFitImage imageURL="<%=headerPresenter.getLogoLocation()%>"
                          onClickFunction="function() { window.location.href = '<%=headerPresenter.getHomePage()%>'; }"
                          id="headerLogo"/>,

        // Spacer
        isc.LayoutSpacer.create(),

        .... Other members