Digging into the Windows 8 Metro Weather source

After installing Windows 8 (64bit + VS2011) and reading the new Metro interface, the first thing I wanted to do was switch the temperature from degrees Fahrenheit to degrees Celsius. This led to digging in the source, and then to Russification of the application.

What is the article about:
  • Where the installed application lies and what it consists of
  • How to switch Fahrenheit to Celsius
  • How to transfer the installed application to VS2011 and run in the debugger
  • Adding a button to the application
  • Partial and full Russification





Where lies


For those who did not look at the build or did not pay attention, the full path to the application folder is: C: \ Program Files \ Applications \ microsoft.weather_1.0.0.26_neutral_neutral_8wekyb3d8bbwe

To see the Applications folder, open the Program Files folder in the View tab and check the Hidden checkbox items. It’s just not possible to get into the Applications folder like that, for this you need to add permissions, for this, go to the Security tab in the properties of this folder.
The application is written in javascript and consists of a set of .css, .html, .js file formats, a .pri resource file, a .p7x signature certificate, and a set of pictures and video files for the background

Switch Fahrenheit to Celsius


To switch Fahrenheit to Celsius I had to get into the source. For those who have not yet managed to get in there, just click Win + C to select Settings and in the panel that appears on the right click Weather preferences and select the usual Celsius.

Launching the application in Visual Studio 2011


To do this, I needed to create an empty javascript project in VS. Then, looking at the project structure, changed the name 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 to package.appxmanifest. To prevent the “tile” of the installed application from Metro, just change the Package Name from Microsoft.Weather in this file to another.
In VS2010, you could add text resources through the menu in the project properties, but here it’s enough to add a new Resources 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 the application in Debug or Release, set breakpoints and learn how it works.

Add a button and subscribe to clicks


Having looked 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. Here's what happened: Now we need to add a click handler, for this in defaultNew.js I find adding a click handler to Remove City and insert a line of code: The id function is a wrapper for document.getElementById, it can be found in currentCityControl.js. switchCulture is my function that will switch the localization language, more about this later in the article.


                 

                ru-RU



id("ruCulture").addEventListener("click", switchCulture);



Partial and full Russification


What does partial mean? This means simply changing the locale to ru-RU in a request to the weather server, and accordingly receiving a 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 full 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 takes weather data in 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 current locale from the resource file is entered into the culture variable. I write the getCulture () function, and I change this line to:
var culture = getCulture();


Then I go to defaultHost.js and add culture:

    WinJS.Namespace.define("Weather.Settings", {

        hourly: ApplicationData.current.localSettings.values["hourlydaily"] == "h",

        celsius: ApplicationData.current.localSettings.values["temp"] == "c",

        setForecastHourly: setForecastHourly,

        setForecastDaily: setForecastDaily,

        setUnitCelsius: setUnitCelsius,

        setUnitFahrenheit: setUnitFahrenheit,

        // Вот здесь добавляю

        culture: ApplicationData.current.localSettings.values["culture"]

    });

 

// После тут же сразу поставим локаль

Weather.Settings.culture = getCulture();


At the end, I insert my defaultHost.js functions. For convenience of debugging, in defaultHost.html I added a div to display debugging information, and in the defaultHost.js function deb (). This function can be called from anywhere in the script and output any information. It remains to do the switching of the locale with saving the settings The button has already been added, I will draw an icon for it. The Weather_Commands_PNG_STRIP_40x.png file contains all the button icons. I open the file and increase the image size down, draw the buttons for the different states of my button. To display the button icon, add the style setting to defaultHost.css There is a button, there is an icon on it, I clicked on a button to subscribe, it remains to add a function:

function getCulture() {

if (!Weather.Settings.culture)

{

       // если уже есть сохраненная настройка загрузим иначе ru-RU 

var idc = Windows.Storage.ApplicationData.current.localSettings.values["culture"];

if (idc) {

setCulture(idc);

} else {

setCulture("ru-RU");

}

}

return Weather.Settings.culture;

}

function setCulture(culture1) {

    if (Weather!==undefined) {

        Weather.Settings.culture = culture1;

        Windows.Storage.ApplicationData.current.localSettings.values["culture"] = culture1;

    }else {

            var idc = Windows.Storage.ApplicationData.current.localSettings.values["culture"];

            if (idc) {

                Weather.Settings.culture = idc;

            } else {

                Weather.Settings.culture = "ru-RU";

            }

    }

}




function deb(stok) {

var deb = document.getElementById("debugText");

if (deb) {

    deb.innerText = stok;

}

}






 

button .ruicon

{

    background-position: 0px -280px;

}

 

button:active .ruicon

{

    background-position: -80px -280px;

}

 

button:disabled .ruicon

{

    background-position: -120px -280px;

}



    function switchCulture(e) {

if (getCulture()=="ru-RU") {

     setCulture("fr-FR");

     } else {

     setCulture("ru-RU");

     }

        var culture = id("cultureText");

        if (Weather.Settings.culture) {

            culture.innerText = Weather.Settings.culture;

        }

        // TO-DO: 

        // сразу перегрузим метеосводку на новом языке

        // попытка в лоб - не работает - не разобрался

        mainData.refresh(true).then(function () { });

        updateAllTiles();

    }


I launch the application in Release, press the button, the Russian locale is set. I stop the application, run it again and the application loads the weather in the native language. Loads 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 depending on this loads text resources. I add the strings folder to the project with the resources.resjson file and the ru-RU folder with the same file. File content: I launch the application and Weather turns into Weather!

{

"Add" : "Добавить",

"Pin" : "Закрепить",

"CurrentCitySearch" : "Поиск моего города",

"Tomorrow":"Завтра",

"Unpin":"Открепить",

"CurrentCityFound":"Мой город найден",

"Weather":"Погода",

"Description":"Погода",

"GatheringInfo":"Загружаю свежую метеосводку",

"PinCity":"PinCity",

"RemoveCity":"Удалить",

"CurrentCity":"Мой город",

"AddCity":"Добавить город",

"SummaryView":"По дням",

"Hourly":"По часам",

"EnterCity":"Введите город",

"AddCityError":"Ошибка добавления города",

"MaxCities":"Максимум городов",

"Preferences":"Настройки","Temperature":"Температура",

"Celsius":"Цельсий",

"Fahrenheit":"Фаренгейт",

"ruCulture":"Язык",

"debugText":"Отладка",

"LastUpdated" : "Обновлено .",

"Wind" : "Ветер",

"UVIndex" : "УФ индекс",

"Today" : "Сегодня",

"SplashScreenImage" : "Заставка",

"Search" : "Поиск",

"ResultsFor" : "Данные для",

"PercChanceOfRain" : " возможность дождя",

"Low" : "Минимум",

"Humidity" : "Влажность",

"High" : "Максимум",

"FeelsLike" : "По ощущениям",

"CurrentCondition" : "Сейчас",

"ChanceOfRain" : "Возможен дождь",

"NetworkConnection" : "Не могу получить прогноз. Проверьте наличие интернета.",

"CannotRetrieveData" : "Не могу извлечь данные"

}



Also popular now: