Digging in the source code of Windows 8 Metro Weather
After installing Windows 8 (64bit + VS2011) and getting acquainted with the new interface, Metro first of all wanted to switch the temperature from degrees Fahrenheit to degrees Celsius. This prompted to dig in the source code, and then to the Russification of the application.
What is the article about:
')
For those who did not see build or did not notice, the full path to the folder with the application: C: \ Program Files \ Applications \ microsoft.weather_1.0.0.26_neutral_neutral_8wekyb3d8bbwe
To see the Applications folder, open the Program Files in Explorer and tick the Hidden items on the View tab. Just so getting into the Applications folder does not work, for this you need to add yourself permissions, for this in the properties of this folder, go to the Security tab.
The application is written in javascript and consists of a set of .css, .html, .js file formats, a .pri resource file, a .p7x signing certificate, and a set of pictures and video files for the background
To switch Fahrenheit in Celsius, I had to get into the source. For those who have not had time to climb there, it’s enough to click Win + C, select Settings and in the right-hand panel that appears, click on Weather preferences and select the usual Celsius.
To do this, I needed to create an empty javascript project in VS. Then, looking at the structure of the project, I changed the name of default.html to defaultHost.html, and transferred the contents of the file. Then I had to add pictures, videos, style sheets, js scripts to the project and copy the contents of AppxManifest.xml into package.appxmanifest. So that the “tile” of the installed application does not disappear from Metro, it is enough to change the Package Name from Microsoft.Weather to another in this file.
In VS2010, text resources could be added via the menu in the project properties, and here it is enough to add a new File File (.resjson) to the project. After adding, I open the file and see a commented description about the use of text resources. That seems to be all. You can run an application in Debug or Release, set breakpoints and learn how it works.
Looking at defaultHost.html I decided to play around with the code and add my own button with the event handler and my picture.
I put the button on the appbar, for this I copied the code of the Remove City button and pasted it next to it. Here's what happened:
Now you need to add a click handler, to do this in defaultNew.js I find the addition of a click handler on Remove City and insert a line of code:
The id function is a wrapper for document.getElementById, which can be found in currentCityControl.js. switchCulture is my function that will switch the localization language, more on this later in the article.
What does partial mean? This means simply changing the locale to ru-RU in the request to the weather server, and accordingly receiving the weather report from the server in Russian. The application remains in its own language. And with the addition of text resources in Russian, we get the complete Russification.
For myself, I set the task to make a button for switching the locale from ru-RU to fr-FR and saving this setting so that after restarting the application would take the weather data into the language of the saved locale.
There is a line in the data.js file
where R is from defaultHost.js R = new Windows.ApplicationModel.Resources.ResourceLoader ();
The culture is set to the current locale from the resource file. I am writing a function getCulture (), and this line is changed to:
Then I go to defaultHost.js and add culture:
At the end of defaultHost.js I insert my functions
For debugging convenience, a div added in defaultHost.html to display debug information, and a deb () function in defaultHost.js. This function can be called from anywhere in the script and display any information.
It remains to make the switching of the locale with saving settings
The button has already been added, I will draw an icon for it. The button icons are stored in the Weather_Commands_PNG_STRIP_40x.png file. I open the file and increase the size of the image down, I draw buttons for different states of my button.
So that the icon of the button is displayed, I add the style setting in defaultHost.css
There is a button, there is an icon on it, by clicking on the subscribed button it remains to add a function:
I launch the application in Release, press the button, put the Russian locale. I stop the application, I launch it again and the application loads the weather in my native language. Shipped by the way with weather.service.msn.com
The forecast is already in Russian, it remains to translate the program interface.
Metro application determines local language settings and loads text resources depending on it. I add the strings folder to the project in the resources.resjson file and the ru-RU folder with the same file. File Contents:
I launch the application and Weather turns into Weather!
What is the article about:
- Where the installed application is and what it consists of.
- How to switch fahrenheit in celsius
- How to install the installed application in VS2011 and run in the debugger
- Adding a button to the application
- Partial and complete Russification
')
Where lies
For those who did not see build or did not notice, the full path to the folder with the application: C: \ Program Files \ Applications \ microsoft.weather_1.0.0.26_neutral_neutral_8wekyb3d8bbwe
To see the Applications folder, open the Program Files in Explorer and tick the Hidden items on the View tab. Just so getting into the Applications folder does not work, for this you need to add yourself permissions, for this in the properties of this folder, go to the Security tab.
The application is written in javascript and consists of a set of .css, .html, .js file formats, a .pri resource file, a .p7x signing certificate, and a set of pictures and video files for the background
Switch Fahrenheit in Celsius
To switch Fahrenheit in Celsius, I had to get into the source. For those who have not had time to climb there, it’s enough to click Win + C, select Settings and in the right-hand panel that appears, click on Weather preferences and select the usual Celsius.
Run the application in Visual Studio 2011
To do this, I needed to create an empty javascript project in VS. Then, looking at the structure of the project, I changed the name of default.html to defaultHost.html, and transferred the contents of the file. Then I had to add pictures, videos, style sheets, js scripts to the project and copy the contents of AppxManifest.xml into package.appxmanifest. So that the “tile” of the installed application does not disappear from Metro, it is enough to change the Package Name from Microsoft.Weather to another in this file.
In VS2010, text resources could be added via the menu in the project properties, and here it is enough to add a new File File (.resjson) to the project. After adding, I open the file and see a commented description about the use of text resources. That seems to be all. You can run an application in Debug or Release, set breakpoints and learn how it works.
Add a button and subscribe to clicks
Looking at defaultHost.html I decided to play around with the code and add my own button with the event handler and my picture.
I put the button on the appbar, for this I copied the code of the Remove City button and pasted it next to it. Here's what happened:
< button id = "ruCulture" class = "win-command" > <br/>
< span class = "win-spritestates win-commandicon win-large ruicon" ></ span > <br/>
< span id = "cultureText" class = "win-label" data - win - res = "textContent: ruCulture" > ru - RU </ span > <br/>
</ button >Now you need to add a click handler, to do this in defaultNew.js I find the addition of a click handler on Remove City and insert a line of code:
id ( "ruCulture" ) . addEventListener ( "click" , switchCulture ) ;The id function is a wrapper for document.getElementById, which can be found in currentCityControl.js. switchCulture is my function that will switch the localization language, more on this later in the article.
Partial and complete Russification
What does partial mean? This means simply changing the locale to ru-RU in the request to the weather server, and accordingly receiving the weather report from the server in Russian. The application remains in its own language. And with the addition of text resources in Russian, we get the complete Russification.
For myself, I set the task to make a button for switching the locale from ru-RU to fr-FR and saving this setting so that after restarting the application would take the weather data into the language of the saved locale.
There is a line in the data.js file
var culture = R. getString ( "/webservice/culture" ) ;where R is from defaultHost.js R = new Windows.ApplicationModel.Resources.ResourceLoader ();
The culture is set to the current locale from the resource file. I am writing a function getCulture (), and this line is changed to:
var culture = getCulture ( ) ;Then I go to defaultHost.js and add culture:
WinJS. Namespace . define ( "Weather.Settings" , { <br/>
hourly : ApplicationData. current . localSettings . values [ "hourlydaily" ] == "h" , <br/>
celsius : ApplicationData. current . localSettings . values [ "temp" ] == "c" , <br/>
setForecastHourly : setForecastHourly , <br/>
setForecastDaily : setForecastDaily , <br/>
setUnitCelsius : setUnitCelsius , <br/>
setUnitFahrenheit : setUnitFahrenheit , <br/>
// <br/>
culture : ApplicationData. current . localSettings . values [ "culture" ] <br/>
} ) ; <br/>
<br/>
// <br/>
Weather. Settings . culture = getCulture ( ) ;At the end of defaultHost.js I insert my functions
function getCulture ( ) { <br/>
if ( ! Weather. Settings . culture ) <br/>
{ <br/>
// ru-RU <br/>
var idc = Windows. Storage . ApplicationData . current . localSettings . values [ "culture" ] ; <br/>
if ( idc ) { <br/>
setCulture ( idc ) ; <br/>
} else { <br/>
setCulture ( "ru-RU" ) ; <br/>
} <br/>
} <br/>
return Weather. Settings . culture ; <br/>
} <br/>
function setCulture ( culture1 ) { <br/>
if ( Weather !== undefined ) { <br/>
Weather. Settings . culture = culture1 ; <br/>
Windows. Storage . ApplicationData . current . localSettings . values [ "culture" ] = culture1 ; <br/>
} else { <br/>
var idc = Windows. Storage . ApplicationData . current . localSettings . values [ "culture" ] ; <br/>
if ( idc ) { <br/>
Weather. Settings . culture = idc ; <br/>
} else { <br/>
Weather. Settings . culture = "ru-RU" ; <br/>
} <br/>
} <br/>
}For debugging convenience, a div added in defaultHost.html to display debug information, and a deb () function in defaultHost.js. This function can be called from anywhere in the script and display any information.
function deb ( stok ) { <br/>
var deb = document. getElementById ( "debugText" ) ; <br/>
if ( deb ) { <br/>
deb. innerText = stok ; <br/>
} <br/>
}It remains to make the switching of the locale with saving settings
The button has already been added, I will draw an icon for it. The button icons are stored in the Weather_Commands_PNG_STRIP_40x.png file. I open the file and increase the size of the image down, I draw buttons for different states of my button.
So that the icon of the button is displayed, I add the style setting in defaultHost.css
<br/>
button .ruicon <br/>
{ <br/>
background-position : 0px -280px ; <br/>
} <br/>
<br/>
button :active .ruicon <br/>
{ <br/>
background-position : -80px -280px ; <br/>
} <br/>
<br/>
button :disabled .ruicon <br/>
{ <br/>
background-position : -120px -280px ; <br/>
}There is a button, there is an icon on it, by clicking on the subscribed button it remains to add a function:
function switchCulture ( e ) { <br/>
if ( getCulture ( ) == "ru-RU" ) { <br/>
setCulture ( "fr-FR" ) ; <br/>
} else { <br/>
setCulture ( "ru-RU" ) ; <br/>
} <br/>
var culture = id ( "cultureText" ) ; <br/>
if ( Weather. Settings . culture ) { <br/>
culture. innerText = Weather. Settings . culture ; <br/>
} <br/>
// TO-DO: <br/>
// <br/>
// - - <br/>
mainData. refresh ( true ) . then ( function ( ) { } ) ; <br/>
updateAllTiles ( ) ; <br/>
}I launch the application in Release, press the button, put the Russian locale. I stop the application, I launch it again and the application loads the weather in my native language. Shipped by the way with weather.service.msn.com
Full Russification of the application through resources
The forecast is already in Russian, it remains to translate the program interface.
Metro application determines local language settings and loads text resources depending on it. I add the strings folder to the project in the resources.resjson file and the ru-RU folder with the same file. File Contents:
{ <br/>
"Add" : "" , <br/>
"Pin" : "" , <br/>
"CurrentCitySearch" : " " , <br/>
"Tomorrow" : "" , <br/>
"Unpin" : "" , <br/>
"CurrentCityFound" : " " , <br/>
"Weather" : "" , <br/>
"Description" : "" , <br/>
"GatheringInfo" : " " , <br/>
"PinCity" : "PinCity" , <br/>
"RemoveCity" : "" , <br/>
"CurrentCity" : " " , <br/>
"AddCity" : " " , <br/>
"SummaryView" : " " , <br/>
"Hourly" : " " , <br/>
"EnterCity" : " " , <br/>
"AddCityError" : " " , <br/>
"MaxCities" : " " , <br/>
"Preferences" : "" , "Temperature" : "" , <br/>
"Celsius" : "" , <br/>
"Fahrenheit" : "" , <br/>
"ruCulture" : "" , <br/>
"debugText" : "" , <br/>
"LastUpdated" : " <span id='lastUpdated'></span>." , <br/>
"Wind" : "" , <br/>
"UVIndex" : " " , <br/>
"Today" : "" , <br/>
"SplashScreenImage" : "" , <br/>
"Search" : "" , <br/>
"ResultsFor" : " " , <br/>
"PercChanceOfRain" : "<span data-win-bind='innerText:precip'></span> " , <br/>
"Low" : "" , <br/>
"Humidity" : "" , <br/>
"High" : "" , <br/>
"FeelsLike" : " " , <br/>
"CurrentCondition" : "" , <br/>
"ChanceOfRain" : " " , <br/>
"NetworkConnection" : " . ." , <br/>
"CannotRetrieveData" : " " <br/>
}I launch the application and Weather turns into Weather!
Source: https://habr.com/ru/post/128869/
All Articles