Mail.Ru Mail for WP7: development, close-up

Not so long ago, the Mail application started under WP7. When we thought about whether we needed a standalone application for Windows Phone, or just adapting Mail.Ru for IE Mobile and its analogs, the question was quickly resolved. The owners of smartphones on WP7 should have their own full-fledged Mail application, fully adapted to the platform.

About what requirements we made to the application, what problems we faced and how we solved them, we will tell under the cut.

Concept

We immediately decided that, first of all, an application should quickly process large amounts of data and ensure high speed even when loading large lists (for example, a list of incoming emails). In some aspects, the application should resemble the built-in mail client so that there is no discomfort when working with it. At the same time, the application should have advanced features that distinguish it from the embedded client.
')


In particular, it focuses on the management of gestures using all the capabilities of the touch interface. Switching between folders and moving from letter to letter with one finger movement is both convenient and consistent with the spirit of the platform. Another feature is instantaneous synchronization with webmail. All user actions in the application are immediately displayed in the web interface; all new letters are immediately visible in the application.

Everyone who developed applications for WP7 knows that development within the framework of standard controls is done once or twice; moving them one step left or right increases the time required to complete the task.

So, in order of what difficulties we faced.

Switch between folders

To switch between folders, it was decided to use the Pivot control. Everything is simple - page switching, each page is loaded on demand.

For a “standard user” everything works fine - after registering in the mailbox there are only 5 folders, the application loads quickly. But some users of folders can have a lot (and a lot).

For testing, user folders were added to the live mailbox (there were 40 in total). In such a situation, the launch of the application from the moment of tap on the tile on the start screen to display the incoming list took almost 30 seconds. This result did not suit us.

A detailed study of performance problems revealed that the bottleneck was the ObservableCollection container, which kept the list of folders. After the container received data about the folders, the list was loaded one by one. Multiple addition of ObservableCollection does not support. And when you add each new element is rebuilt UI. For Pivot, this turned out to be unacceptable. Yes, Microsoft writes in the recommendations: “Minimize the number of control pages when it’s possible,” but overwhelmed the desire to make the switch gestures. As a solution, the inherited class SilentObservableCollection was derived, which added three methods AddSilently, InsertSilently and RemoveSilently, as well as the Notify method. As the name suggests, the first three methods allow you to rebuild the list without rebuilding the UI with each change. The latter method allows you to change the UI after the folder list is updated.

Switch between letters

Then it was necessary to make switching between letters on the svaypu. Initially, for this task, as in the case of the list of folders, the Pivot element was used. A number of problems arose with him.

First, it immediately creates all the pages under the letters (although the letters themselves are loaded as you move to them), which again takes a lot of time to open the reading page.
The list of letters for Pivot is a list of loaded headers. If you move down this list, then blocks of 20 letters are loaded to the existing list. If you move far enough, opening a letter can take several minutes while Pivot builds pages for each letter.

Secondly, the Pivot is looped. And, unlike Panorama, where by the background offset you can roughly understand which page you are on, in Pivot the transition from the last page to the first page is no different from the transition to the next page. This was very misleading in the case of the list of letters. It was unclear where the first letter was, in which direction to flip through to see the following, why, after some letter, you again get to the first.

To overcome all these problems, a control was written under the name LongListPivot. It resolves both the problems described. It is not looped, that is, the transition from the first letter to the last does not occur. And there is only one page. Data change on this page occurs at the moment when it is behind the screen. After moving the finger, the current letter leaves the screen, is replaced by the next one, which comes from the other side of the screen. Plus, when approaching the last letter in the list, as well as in the case of the list of letters in the folder, the next block of 20 letters is loaded.

View letters

The next task, the solution of which took the most time, was to view letters with html-markup.

It seems, everything is simple: there is an element of WebBrowser. Place it on the page, load the text into it - and you're done. But there are scenarios for using the application when the application of this element is impossible. For example, if there are many recipients, and the user opens the entire list. Or if the letter has several attachments. All this leads to the fact that the cap of the letter is stretched, and the content slides to the bottom of the screen. As a result of this, as well as the fact that WebBrowser has its own internal scrolling of content, we find that the letter scrolls inside a small area.

We considered this solution: to determine the height of the letter and rigidly specify the height for WebBrowser, to exclude its internal scrolling, and fit it into the general flow of elements inside the ScrollViewer. But, first, in WP7, one control cannot be more than 2048 pixels wide or high (which is only 2.5 of the screen height). Secondly, there is no way to determine the height of the contents of the letter.

WebBrowser does not provide information about the page loaded into it, nor does it offer program interfaces to control the display of content (scrolling, width and scale). The only thing left for the programmer is to send commands to JavaScript using InvokeScript and receive notifications via the ScriptNotify event.

Further development of the letter reading page moved to a new level - to CSS + JavaScript. Thanks to our colleagues from mobile webmail, we managed to solve all the problems that were in the way: how to set the letter width, scale, scrolling.

Links in letters

Another of the tasks was the processing of links. Links should not open inside the embedded element WebBrowser, displaying the text of the letter, and in the system browser. For this interception click on the element WebBrowser. Further, through JavaScript, the html layout element was determined, which is at the touch position, it was checked whether this element is a link, and, if so, the address was opened in an external browser.

The problem was with letters from one of the aggregators of discount services. The source code of notifications from it in html is about 300-500 Kb. When attempting to display such a letter, the program terminated with an out of memory error. In the end, it was decided to display all letters with html markup and more than 100 KB in the adapted text form.

Work with attachments

One of the features of the Windows Phone platform is an isolated data store. There are problems in working with attachments. The mail program fully works with images from the gallery attached to the letter, as well as with pictures taken using the camera of the smartphone. In the Mail application, you can view the images attached to your inbox and, if you wish, save them to the gallery. The program can also play the video and audio files sent.

With the MS Office and Adobe Reader documents the situation is as follows: the program generates a link to download these attachments and sends them to an external browser. The browser, saving the attachment, sends it to Office or to Adobe Reader. The attached file remains in these programs. However, if you try to open it again from the Mail application, the path will have to be repeated: a link will be formed, the attachment will be downloaded by an external browser and open in the appropriate program.

Testing

We should also talk about testing. Testing WP-applications is associated with several difficulties due to the characteristics of the devices themselves. For example, while it is impossible to maintain and display the logs of the testing process and take screenshots of the screen directly from the device.

Despite the fact that we published 5 beta builds of the application, none of them was given to users. From the moment of publication of the assembly to the moment when it becomes available for download, it takes three days. During this time, most build errors are detected by our tester, corrected, and the beta version becomes obsolete. To organize the testing, 4 development accounts were established, with the help of which 12 devices were unlocked. Periodically, at the end of the next development stage, the latest, up-to-date version was installed on most devices and feedback, comments and complaints were collected.

Otherwise, thanks to the clear requirements of Microsoft to manufacturers of devices running Windows Phone, the application, with rare exceptions, works the same on different models of smartphones (there is no such fragmentation as among devices running Android).

Conclusion

We hope that this information was useful to you. We would also be very interested to read about the experiences of other developers under WP: if you have already encountered similar tasks and decided on them differently, tell us about it in the comments.

We, in turn, continue to work on improving the application. Comments and suggestions you can send to us at mailapps@corp.mail.ru . Download Mail.Ru Mail for Windows Phone 7 can be in the Windows Phone Store .

Balashov Vadim, mobile application developer
Mail.Ru