Background image

Started by Nuno T., February 22, 2018, 10:35:56 PM

Previous topic - Next topic

Nuno T.

Hi all,

Is there a way to define an image in background window, layout grid ...

And in a button its possible to put an image in top and text in bottom  ?


Thanks very mutch in adance.
Nuno

Reuben B.

I'll pre-empt by saying we can only do what the native front-end allows.  So if the native front-end doesn't allow it, then we can't do it either using native widgets.

QuoteIs there a way to define an image in background window, layout grid ...
With regards backgroundImages, this was deprecated in version 2.50 http://4js.com/online_documentation/fjs-fgl-manual-html/#fgl-topics/c_fgl_Migrate_to_250_presentation_styles.html, prior to that the documentation had an entry in common style attributes for backgroundImage http://4js.com/online_documentation/fjs-fgl-manual-html/#fgl-topics/r_fgl_presentation_styles_common_style_attributes.html after backgroundColor, and if you look up 2.40 documentation or earlier it will be there.

You may find that the deprecated behaviour is still there and functional, a quick test with
Code (xml) Select
<Style name="*">
      <StyleAttribute name="backgroundImage" value="http://4js.com/wp-content/uploads/2015/05/logo_4Js_2014_CMYK_seul-300x92.png" />
  </Style>

will show you where it applies (replace * with Window, Grid, Edit, or style selector etc to narrow down), but like any deprecated behaviour it is a case of use at your own risk.  You may find that what works with Windows does not work with Mac, or a Windows update might stop it working etc.

For GBC, you can always use customisation with CSS and background-image property.


QuoteAnd in a button its possible to put an image in top and text in bottom  ?

Does the native UI allow this?  if it allows this consistently across the front-ends we support, expect to see a value here http://4js.com/online_documentation/fjs-fgl-manual-html/#fgl-topics/r_fgl_presentation_styles_button_style_attributes.html

If you want non-native buttons, then what you can do is use Clickable Images, an IMAGE with an ACTION attribute (some examples https://github.com/FourjsGenero/ex_clickable_image)

Hope that helps,

Reuben














Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero