Icon and CloseIcon on a Tab

[chuchin_gutierrez]

Hi! This is my first time writting in this awesome forum.
As i say in the title.. how can i do that?
If i put on my code:

tab.setIcon("24findEmployee.png");
tab.setCloseIcon("8delete.png");

the only icon that shows is the "closeIcon".
I want to show both. Is there a way to do it?

Please, excuse me for my bad english.

Cheers! And thankyou!

Ah, by the way. im using version 2.4 and running on firefox whith JBoss.

[albu77]

Could you post code sample
Regards
Alain

[chuchin_gutierrez]

Could you post code sample
Regards
Alain

Thanks for answering alain. This is my code:

public class Prueba implements EntryPoint {  
   
     @Override
     public void onModuleLoad() {
         Page.setAppImgDir("[APP]/prueba/icons/");
         
         HTMLPane htmlFlow = new HTMLPane();  
         
         htmlFlow.setOverflow(Overflow.AUTO);  
         htmlFlow.setPadding(10);
         
         String contents = "<b>Severity 1</b> - Critical problem<br>System "
                 + "is unavailable in production or " +  
                 "is corrupting data, and the error severely "
                 + "impacts the user's operations." +  
                 "<br><br><b>Severity 2</b> - Major problem<br>An important "
                 + "function of the system " +  
                 "is not available in production, and the user's operations "
                 + "are restricted." +  
                 "<br><br><b>Severity 3</b> - Minor problem<br>Inability to "
                 + "use a function of the " +  
                 "system occurs, but it does not seriously affect the user's "
                 + "operations.<BR><BR><BR><BR><BR><BR><BR><BR><BR>"
                 + "ouitqweiooashdlkhoahsod oaishd asidh pqiw hepq hwpeo hapshd "
                 + "pàosuhdpaohsd poasd pòas +doahs+dihas+digqw h¡a+sodh+qwo "
                 + "ye¡+qpwueaso hdà sd aosyd ¡+qawue+oyw¡eiyqw";  
   
         htmlFlow.setContents(contents);  
   
         final SectionStack sectionStack = new SectionStack();  
         sectionStack.setVisibilityMode(VisibilityMode.MULTIPLE);  
         sectionStack.setWidth(300);
         
         sectionStack.setHeight(Page.getHeight() - 200);
         sectionStack.setScrollSectionIntoView(true);
         sectionStack.setScrollbarSize(20);        
         sectionStack.setOverflow(Overflow.AUTO);
         
         SectionStackSection section1 = new SectionStackSection("Blue Pawn");  
         section1.setExpanded(true);  
         section1.addItem(new Img("24newEmployee.png", 128, 128));  
         sectionStack.addSection(section1);  
   
         SectionStackSection section2 = new SectionStackSection("HTML Flow");
         section2.setResizeable(true);
         section2.setExpanded(true);   
         section2.addItem(htmlFlow);  
         sectionStack.addSection(section2);  
   
         SectionStackSection section3 = new SectionStackSection("Green Pawn");  
         section3.setExpanded(true);  
         section3.setResizeable(true);
         section3.addItem(new Img("24newDepartment.png", 128, 128));  
         sectionStack.addSection(section3);  
   
         SectionStackSection section4 = new SectionStackSection("Yellow Piece");  
         section4.setExpanded(true);  
         section4.addItem(new Img("24fireEmployee.png", 128, 128));  
         sectionStack.addSection(section4);  
   
         
         final TabSet ts = new TabSet();
         ts.setHeight(Page.getHeight() - 200);
         ts.setWidth(Page.getWidth() - 350);
         
         Tab tab1 = new Tab("Tab1", "24findEmployee.png");
         Tab tab2 = new Tab("tab2", "mail.png");
         
         Button button = new Button("add");
         button.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                Tab tab =new Tab("tabNo: " + (ts.getNumTabs() + 1));
                tab.setIcon("folder_full.png");
                tab.setCloseIcon("8delete.png");
                tab.setCanClose(true);
                ts.addTab(tab);
            }
        });
         Canvas c = new Canvas();
         c.addChild(button);
         tab1.setIcon("24findEmployee.png");
         tab1.setCloseIcon("8delete.png");
         tab1.setCanClose(true);
         tab1.setPane(c);
         ts.setTabs(tab1, tab2);
         
         
         HLayout layout = new HLayout();
         layout.setAlign(Alignment.LEFT);
         layout.setMembersMargin(20);  
         layout.addMember(sectionStack);  
         
         layout.addMember(ts);  
         //layout.draw();
         RootPanel.get("tableContainer").add(layout);
     }  
  }

I've left attached the images. One ("Pantallazo-Sistema de Prestaciones.jpg") is how i want to be the second. With the Icon representing the section and the "close icon". The second is how it looks my test so far.

Thanks again and have a great day!

[chuchin_gutierrez]

Hi again! I've already solved my problem. I put the code so anyone with same requirement can do it.

tab.setTitle("<span>" + Canvas.imgHTML("folder_full.png") + "tabNo: " + (ts.getNumTabs() + 1) + "</span>");
                tab.setCloseIcon("8delete.png");
                tab.setCanClose(true);

Thanks for answering anyway.

Is there a way to put [SOLVED] in title?

[stonebranch2]

Hi Isomorphic,

By having an image HTML embedded in the title, this results in an scLocator for the tab that contains a fully qualified URL (http(s)://hostname/...) and a theme specific image path.

//autoID[Class=VLayout||index=2||length=4||classIndex=0||classLength=1]/member[Class=HLayout||index=1||length=2||classIndex=1||classLength=2]/member[Class=VLayout||index=1||length=2||classIndex=1||classLength=2]/member[Class=HLayout||index=1||length=2||classIndex=0||classLength=1]/member[Class=TabSet||index=0||length=1||classIndex=0||classLength=1]/tab[title=%3Cspan%3EMyTabTitle%20%3Cimg%20src%3D%27http%3A%24fs%24%24fs%24localhost%3A8080%24fs%24uc%24fs%24skins%24fs%24MySkinFolder%24fs%24images%24fs%24uc%24fs%24tab_pinned.png%27%20align%3D%27TEXTTOP%27%20%20border%3D%270%27%20suppress%3D%27TRUE%27%20draggable%3D%27true%27%24fs%24%3E%3C%24fs%24span%3E||index=0]/

Of course, this scLocator applies to a specific hostname and specific theme.

As an alterative, we could use a relative image path, to remove the hostname dependency, and use a variable for the skin directory, however, wanted to see if you had any other options we could explore.

Thought about computing the scLocator using Canvas.getImgURL(...) or Canvas.imgHTML(...), however, the output isn't in the same escaped format.

Thanks

[Isomorphic]

The easiest fix here is just to give a name or ID to the Tab. The locator will then use that instead. Tab.name does not have to be globally unique (just locally), so you could use the title as a name, so long as you turn it into a valid identifier.

[stonebranch2]

Hi Isomorphic,
By locally unique for name, you mean unique within the tab set?
We cannot guarantee the title is unique within the tab set.
Thanks

[Isomorphic]

Yes, tab.name must be unique within the TabSet. So if you want to use tab.name for better locators, it sounds like you can't directly use title. However, note this is a pre-existing problem, since if titles are not unique, your existing locators (with the title and full img HTML) were ambiguous.

[stonebranch2]

Yes, we understand the locators can be ambiguous if multiple tabs are opened with the same title, however, this does not impact us from a testing perspective, as we do not open multiple tabs with the same title, nor do we need too, but from an end user perspective, we need to support that.

We are considering building our own relative path img tag, rather than use the fully qualified one generated by Canvas.imgHTML(...).

We should be able to determine the skin directory for the img src in the scLocator using "currentSkin.name".

Thank you

[Isomorphic]

Certainly doable, but if you don’t care about locator uniqueness from a testing perspective because multiple tabs don’t come up in testing, it would also be very simple to assign tab.name based on tab.title but add a monotonically increasing number when collisions occur (just use getTab to check for an existing tab with same title).

Just a few lines of code, shorter than replacing imgHTML correctly, especially if you want to retain the possibility to use inlined SVG and other features supported by that method.

[stonebranch2]

We did consider the tab.name approach using an monotonically increasing number to avoid collisions, however, we also have to deal with the fact the title is not a valid identifier and the title can be edited.
That being said, both options are still on that table, just wanted to validate the relative path option was feasible too.
Thank you