EGL Development User Group

Expand all | Collapse all

How to add background graph in an EGL UI

  • 1.  How to add background graph in an EGL UI

    Posted Thu January 14, 2021 06:26 PM
    Dear Experts,
    I need a background image ,  For example, I need a background image for the following  UI:

    Handler VHYT105I type RUIHandler
    { onConstructionFunction = initializeHandler, cssFile = "css/MARIS_RUI.css", initialUI = [ Window ] }
      Window ShellView {             //ShellView is a third party customized object.  I cannot modify it.
      position = "absolute", y = 23, x = 32, height = 700, width = 1300,
    backgroundColor = "#B0E0E6", title = "VHY105I",
    children = [ YardMapDetailLink, DCYCARWASHImg, DTF01TXT01,  .... ,DTF05TXT20]
    }

    There will be other images, and weights (button, text fields, etc.)  overlap on it.  
    Could you please teach me how to do it?
    Thank you,

    Eric

    ------------------------------
    Eric Zuo
    ------------------------------


  • 2.  RE: How to add background graph in an EGL UI

    Posted Fri January 15, 2021 01:48 AM

    Hello Eric, 

    Because you can add classes (styling) to a widget in EGL most of the background images are styled using CSS normally.

    See: 
    https://www.ibm.com/support/knowledgecenter/en/SSMQ79_9.5.1/com.ibm.egl.lr.doc/topics/regl_ui_richui_widget_styles.html

    https://www.w3schools.com/css/css3_backgrounds.asp

    Greetings, Jeroen



    ------------------------------
    Jeroen Dielemans
    DMG
    Waalwijk
    ------------------------------



  • 3.  RE: How to add background graph in an EGL UI

    Posted Fri January 15, 2021 05:49 PM
    Hi Jeroen,
    Thank you for your reply.
    I did the change with CSS. it does not work.  
    Handler VHYT106I type RUIHandler
    { onConstructionFunction = initializeHandler, //cssFile = "css/MARIS_RUI.css",
    initialUI = [ Window ] }
    Window ShellView {
    position = "absolute",
    backgroundColor = "#B0E0E6",
    //backgroundGraphicsDescriptor = new GraphicsDescriptor { moduleName = "images//bitmaps//04198dcy.png", shading = 1 } ,
    title = "VHY106I - Daily City Yard Map (Update)",
    children = [ DCYSOUTHImg, DCYTitleIMG, ......, DTF03TXT02, DTF03TXT04],
    includeFile = "css/MARIS_RUI.css", //if use cssFile, got error: cssFile cannot be resolved
    class="DYBody"
    };

    ** backgroundGraphicsDescriptor is thrid party proded, it has defect,
    ** and for some reason, I cannot modify it. so need to find a workaround.

    MARIS_RUI.css:
    .......
    .DYBody {
    position: absolute;
    top: 23px;
    left: 32px;
    width: 1300px;
    height: 700px;
    background-image: url(images/bitmaps/04198dcy.png);
    }
    ......

    Please help again.  How to implement the css for the image.
    Thanks,
    Eric


    ------------------------------
    Eric Zuo
    ------------------------------



  • 4.  RE: How to add background graph in an EGL UI

    Posted Mon January 18, 2021 10:01 AM
    Hi,
    your code looks good.
    I can't test it because of the third party widgets.
    Tested it with a div and it works.
    Maybe you could try this too? To be sure it has nothing to do with the third party widget.

    Maybe you could inspect the widget with the firefox inspector and send a screenshot?
    https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector



    ------------------------------
    Marcel Dreyer
    ------------------------------



  • 5.  RE: How to add background graph in an EGL UI

    Posted Tue January 19, 2021 02:18 PM
    Hi Marcel,
    Thank you very much for your reply.
    Yes, most of the widgets are third party customized.   I need to replace the third party customized background image with IBM's approach. it is in   "Handler Vhyt07i type RUIHandler { ...}", I should work too.  Handler and RUIHandler should be of IBM.
    I would like to ask the third party widget conflicts with IBM's widget? 
    But in the program, I added some images as icons, such as 
        DCYRT3Img Image{ class="DCYRT3",
         src = "images/DailyCity/DCYRT3.png"
       };
    and located it aside of third party customized widgets, it works well.  I know setup background image requires more than doing for icons images.  I hope there is a solution.  
    Thanks.
    Eric


    ------------------------------
    Eric Zuo
    ------------------------------



  • 6.  RE: How to add background graph in an EGL UI

    Posted Fri January 22, 2021 02:49 AM

    I think i would start with testing with a widget with a (IBM) Div in it, and try to add the background

    image to this Div. If this is working: add this Div to you handler and place it as an extra Div on top of the ShellView,

    and see if the image is still visible. If the Shellview styling is blocking the background, you have to do some extra CSS coding.

    And indeed like Marcel also told you: you can learn a lot from the firefox inspector or the Chrome development tools. 

    That way you can see which CSS styling is used on a component and you can deactivate it to test things.

    Greetings, Jeroen



    ------------------------------
    Jeroen Dielemans
    DMG
    Waalwijk
    ------------------------------