JavaScript back and forward buttons, how does the system know what image to load?

Question

Hi,

The SplitPage template's SplitPage.html displays a button to go back one page with the following line:

<button disabled class="win-backbutton" aria-label="Back"></button>

and the application displays a while left arrow image for that button.

I looked at all the css files to see if the '.win-backbutton' selector rule specify the image of the arrow to load, but it doesn't. So my question is, how does the system know to show the left arrow image?

I am asking because in my application I want to use a "right arrow" button, but I need to understand how things work in this case to be able to know what to change in the code.

 

thanks

 

Answer 1

Hi Malena,

If you open Default.htm you will see the button.

 

            <button id="home" class="win-command">
                <span class="win-commandicon win-large">&#xE10F;</span><span class="win-label">Home</span>
            </button>

This along with the css defines a circle with the arrow character: &#xE10F

You can use the DOMExplorer to see what CSS affects that element.  Start the splitpage app in the debugger, then click on the 'DOM Explorer' tab.  Click on 'Select Element' and select the arrow.  You can then use the Styles, Trace Styles, Layout and Attributes tabs to inspect and play with changing the CSS!

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Hi Jeff, 

I can't find the tab for the DOM Explorer, I went through the tutorial at http://msdn.microsoft.com/en-us/library/windows/apps/6d156cff-36c6-425a-acf8-e1f02d4f7869(v=VS.110)#InteractiveDebugging  

and they assume the DOM Explorer tab is open. Could you tell me how to turn it on? It is not listed in any of the obvious places (View, Debug or Window menus)

 

thanks

 

-Malena

Answer 3

Found an answer here to turn on the DOM Explorer:

http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/402b9fbc-af6f-4802-8d38-7f85e9f65524

 

Answer 4

Unfortunately the DOM Explorer wasn't much help at all. What I wanted to find out was where (in which css file)  the CSS rule for the class .win-backbutton was set, so that I could see how the left arrow was created. 

By the way I was referring to the button in SplitPage.html, not in Default.html, which is what you were referring to. 

In any case, DOM Explorer just told me the values of the css rules, which is not very helpful, since I needed to know where those rules were set, so that I could change them. So I had to do an Edit->Find & Replace->Find in Files to search for the file where the  ".win-backbutton" class was being set. So it was ui-dark.css, and then your description was helpful because I realized that, they were using the "content" css rule to set the content of the button to be the left arrow symbol (&#E0D5) of the Segoe UI Symbol font. 

 

It is set like this:

.win-backbutton::before

{

    font-family: "Segoe UI Symbol";

    content: "\E0D5";

    vertical-align: 50%;

}

 

Anywho, I found somewhere that I could find what other symbols are available by opening the "Character map" application by doing search for "Character Map" in the "Search" box of the Start Icon in Windows 8. 

So now I know i can use the right arrow symbol \E111 to create a "right arrow" button.

 

Maybe someone else find this useful.

 

-Malena