Change logo dynamically

Support
,
#1

Hi,
I want to dynamically change the logo of the Main Screen. The image will change dynamically based on the application settings.
Images are saved as Filedescriptor in the BD.
I saw this post, but i can not to resolve my problem. Please, is there an easy step-by-step description about how to set the logo dynamically?.
in the MainScreen controller i have this code, but i don’t get show the image in the descriptor

    FileDescriptor ficheroImagen = empresa.getLogo();
    Image image = uiComponents.create(Image.class);
    image.setAlignment(Component.Alignment.TOP_CENTER);
    image.setScaleMode(Image.ScaleMode.SCALE_DOWN);
    image.setHeight("100px");
    image.setWidth("100px");
    image.setSource(FileDescriptorResource.class).setFileDescriptor(ficheroImagen);

Thanks

#2

Hi.
Please check these topics

Regards,
Natalia

#3

Hi Natalia,
I saw the post, but I continue with the problem. I configured the logo, it is not affected by my code. Please, Can you tell me how can I do it correctly so that the logo changes dynamically?.

>  @UiController("extMainScreen")
> @UiDescriptor("ext-main-screen.xml")
> public class ExtMainScreen extends MainScreen {
>          ....
>          @Inject
>          protected Image logoImage;
> 
>         public void onInit(InitEvent event) {
>                  ....
>              FileDescriptor ficheroImagen = empresa.getLogo();
>              logoImage.setAlignment(Component.Alignment.TOP_CENTER);
>              logoImage.setScaleMode(Image.ScaleMode.SCALE_DOWN);
>              logoImage.setHeight("100px");
>              logoImage.setWidth("100px");
>              logoImage.setSource(FileDepleasescriptorResource.class)
>                             .setFileDescriptor(ficheroImagen);
>        }
> }

> <window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
>         caption="mainMsg://application.caption">
>     <layout>
>         <cssLayout id="horizontalWrap"
>                    stylename="c-sidemenu-layout"
>                    height="100%"
>                    width="100%">
>             <cssLayout id="sideMenuContainer"
>                        height="100%"
>                        stylename="c-sidemenu-container">
>                 <cssLayout id="sideMenuPanel"
>                            stylename="c-sidemenu-panel">
>                     <cssLayout id="appTitleBox"
>                                stylename="c-sidemenu-title"
>                                width="100%">
>                        <image id="logoImage"
>                                stylename="c-app-icon"
>                                scaleMode="SCALE_DOWN"/>
>                         <label id="dynamicLabel" stylename="c-app-title"/>
>                     </cssLayout>
>                     <sideMenu id="sideMenu"
>                               width="100%"/>
>                     <ftsField id="ftsField"
>                               width="100%"/>
>                     <timeZoneIndicator id="timeZoneIndicator"
>                                        align="MIDDLE_CENTER"/>
>                     <cssLayout id="controlBox"
>                                stylename="c-sidemenu-controls"
>                                width="100%">
>                         <button id="collapseMenuButton"
>                                 caption="mainMsg://menuCollapseGlyph"
>                                 description="mainMsg://sideMenuCollapse"
>                                 stylename="c-sidemenu-collapse-button"
>                                 responsive="true"/>
>                         <userIndicator id="userIndicator"
>                                        align="MIDDLE_CENTER"/>
>                         <button id="settingsButton"
>                                 icon="GEAR"
>                                 description="mainMsg://settings"
>                                 stylename="c-settings-button"/>
>                         <logoutButton id="logoutButton"
>                                       icon="SIGN_OUT"
>                                       description="mainMsg://logoutBtnDescription"/>
>                         <button id="loginButton"
>                                 icon="SIGN_IN"
>                                 description="mainMsg://loginBtnDescription"
>                                 stylename="c-login-button"/>
>                     </cssLayout>
>                 </cssLayout>
>             </cssLayout>
>             <workArea> 
>                 ....
>             </workArea>
>         </cssLayout>
>     </layout>
> </window>

Regards,

1 Like
#4

You have a typo in your code. This code should work:

FileDescriptorResource resource = logoImage.createResource(FileDescriptorResource.class)
                    .setFileDescriptor(ficheroImagen);
            logoImage.setSource(resource);

Also, check Working with Images in CUBA applications guide to learn how to upload and display images in the application.

#5

Hi Natalia,
Unfortunately it does not work. I got this error.
imagen

However these images are used in the company’s controller and it works. I can see them in the table of company data.
The code to display the logo in the company data table

@Subscribe
public void onInit(InitEvent event) {
empresasTable.addGeneratedColumn(“logo”,
this::LogoComponentImagen);
}

private Image LogoComponentImagen(Empresa empresa) {
    FileDescriptor imageFile = empresa.getLogo();
    Image image = uiComponents.create(Image.class);
    image.setScaleMode(Image.ScaleMode.CONTAIN);
    image.setHeight("80");
    image.setWidth("80");
    image.setStyleName("avatar-icon-small");
    image.setSource(FileDescriptorResource.class)
            .setFileDescriptor(imageFile);
    return image;
}

Thanks

#6

Check the view that you use on the loader - it should contain the logo attribute.

#7

Hi Natalia,
I don’t mean what you mean by the view. In the controller, MainScreen.java I have a fileDescriptor that corresponds to the image. I configure logoImage which is an image component of the MainScreen.xml. The code MainScreen.java and main-screen.xml is above, in my previous post.
Thank you.

#8

Hi,

I think the problem is a image component. I think the possible solution is apply the component in a different way as this component is now. But the is how apply the component in the right way?.
Thanks

#9

@albudarov
Hi Alexandre,
Please,Can you tell me if it is possible to dynamically change the logo of the MainMenu using a fileDescriptor, wich is the attribute of a table.
I use this code, but it doesn’t work

    FileDescriptor fd = empresa.getLogo();
    logoImage.setAlignment(Component.Alignment.TOP_CENTER);
    logoImage.setScaleMode(Image.ScaleMode.SCALE_DOWN);
    logoImage.setHeight("100px");
    logoImage.setWidth("100px");
    logoImage.setSource(FileDescriptorResource.class)
             .setFileDescriptor(fd);

Is very important for me resolve this questions. Thank you son much.

#10

Could you please share a small demo project and we will try to investigate the problem?

#11

Hi Natalia,
I use this project about images, GitHub - cuba-guides/cuba-petclinic-working-with-images: CUBA Petclinic example: Working with Images
I need to get the image from the FileDescriptor in the MainScreen.java so that I can use this in the main-screen.xml
The question is how do I get the image from the FileDescriptor using the library
“com.haulmont.cuba.core.entity.FileDescriptor” ?. Please, note it doesn’t work

FileDescriptorResource resource = logoImage.createResource(FileDescriptorResource.class)
                    .setFileDescriptor(ficheroImagen);
            logoImage.setSource(resource);

Thank you

#12

Where did you get the empresa object?
If you use a data container, check the view that you use on the loader - it should contain the logo attribute. If you load this object using DataManager / EntityManager extend the view, that you using for loading entity.

1 Like
#13

Thank you