Silverlight-based Xinyu Wall System

From http://www.cnblogs.com/fendouzl/archive/2012/04/30/2476812.html

 

It is estimated that you may not be able to understand what this system is used for when you see this title. First, let's talk about a scenario. It is like a wall of some coffee shops. Customers can ask a waiter for a paper, write down your own Xinyu and paste it in a proper position on the Xinyu wall. For this paper, I will patronize this cafe one day in the future, and I will see my previous words. Of course, other customers can also browse and talk so much. If you are interested, you can slam the following:Http://fendouzl.s2.jutuo.net. If you do not log on, you will not be able to see many other functions.No, I have to write a thesis because of the limited time and the need to work again. Therefore, the current system is still rough and I will improve it if I have time, because this system is really needed in my own life, I just learned silverlight before and want to use silverlight to simulate this life model. Although the simulation is not good, don't laugh, you can leave me a message to correct it. I will correct it.

Next, let's take a look at

As a technical article, I will talk about the technical convenience of the system. Otherwise, other people will say that I have advertised here.

 

1. System Architecture Design

First of all, I want to talk about the system architecture. I personally think it is best to have a structural diagram when we build a system, you can use this figure to export a reasonable solution and project in the solution. The subsequent work is to fill the code in each project, which is relatively easy.

1.1 Server Architecture Design

The starting point of the server architecture design is how to access the database efficiently and quickly. As shown in, the system server is divided into four layers and three auxiliary class libraries, business logic layer, factory layer, Data Link interface layer, data link layer, data access tool layer, public layer, and database template layer. The client accesses the business logic layer through WCF. Because the business logic layer inherits the factory layer, this factory layer dynamically loads the data link layer through reflection technology, in addition, the secondary layer completes database read and write, and finally returns the result to the client after JSON serialization.

 

 

1.2 client Architecture Design

The client is mainly implemented by silverlight. To improve the refactoring and portability of client code, it is decided to use the MVVM mode on the client, as shown in Figure 28. The View layer is the implementation of the UI interface, the Model layer is the data source, and the ViewModel layer is the intermediary for data to be displayed on the View layer. The client requests data through WCF, and the service end serializes the data through JSON and returns it to the client.

2. system solution Diagram

Through the system architecture diagram, you can easily map out the system solution, as shown in the system solution list. Currently, my own technology is not very good, but for large projects, in order to avoid logical confusion, it is necessary to implement it hierarchically and use the necessary mode. For example, my client uses the MVVM mode, the server is divided into four layers.

3. How to connect the silverlight client to the server

For this problem, we generally only use WCF. Of course, I also chose this method because it is relatively easy and convenient.

Public void Get ** FromDB ()
{
String query = "condition"
Proxy. GetListAsync (JsonConvert. SerializeObject (query ));
Proxy. GetListCompleted + = new EventHandler <UserOwnWallServiceReference. GetListCompletedEventArgs> (Proxy_GetListCompleted );
}
}

Void Proxy_GetListCompleted (object sender, UserOwnWallServiceReference. GetListCompletedEventArgs e)
{
Deployment. Current. Dispatcher. BeginInvoke (delegate
{
If (e. Error = null)
{
_ UserOwnWallCollection = JsonConvert. DeserializeObject <ObservableCollection <UserOwnWall> (e. Result. ToString ());
InitUserUI ();
}
});
}}

This code roughly shows how you can use the WCF Service proxy contract to access remote data. I will not elaborate on the issues that need to be paid attention to when writing this service contract, this is because you may encounter various strange problems when using the configuration file.

4. Mobile Code of User Controls

How do you view the http://fendouzl.s2.jutuo.net, then you should know that the system in many places to use the portable paper on the Canvas mobile experience, for this reason, I wrote a class to manage the portable paper mobile, the Code is as follows:

1 public class MouseMoveHelper
2 {
3 # region move
4 static Point _ curPoint; // current Point
5 static bool _ mouseMoving = false; // you can specify whether to move a Boolean variable.
6 public static void MouseButtonUpHandler (object sender, MouseButtonEventArgs e)
7 {
8 FrameworkElement element = sender as FrameworkElement;
9 element. SetValue (CustomCanvasControl. ZIndexProperty, 0 );
10 // modify the variable value after you open the mouse
11 _ mouseMoving = false;
12 // stop capturing the mouse position
13 element. ReleaseMouseCapture ();
14 // set the current x y coordinate to 0
15 _ curPoint. X = 0;
16 _ curPoint. Y = 0;
17 // restore the mouse pointer Style
18 element. Cursor = null;
19}
20
21 public static void MouseButtonDownHandler (object sender, MouseButtonEventArgs e)
22 {
23 FrameworkElement element = sender as FrameworkElement;
24 element. SetValue (CustomCanvasControl. ZIndexProperty, 1 );
25 // get the current mouse position
26 _ curPoint = e. GetPosition (element. Parent as CustomCanvasControl );
27 // set the start drag value
28 _ mouseMoving = true;
29 if (null! = Element ){
30 // capture the mouse position
31 element. CaptureMouse ();
32 element. Cursor = Cursors. Hand;
33}
34}
35
36 public static void MouseMoveHandler (object sender, MouseEventArgs e)
37 {
38 FrameworkElement element = sender as FrameworkElement;
39 if (_ mouseMoving ){
40 try {
41 double currX = e. GetPosition (element. Parent as CustomCanvasControl). X-_ curPoint. X;
42 double currY = e. GetPosition (element. Parent as CustomCanvasControl). Y-_ curPoint. Y;
43
44 // get the width and height of the current canvas
45 double currCanvasWidth = (element. Parent as Canvas). ActualWidth;
46 double currCanvasHeight = (element. Parent as Canvas). ActualHeight;
47
48 // obtain the width and height of the current Moving Target
49 double currElementWidth = element. ActualWidth;
50 double currElementHeight = element. ActualHeight;
51
52 if (currY + (double) element. GetValue (CustomCanvasControl. TopProperty) <0) |
53 (currX + (double) element. GetValue (CustomCanvasControl. LeftProperty) <0)
54 | (currY + (double) element. GetValue (CustomCanvasControl. TopProperty)> currCanvasHeight-currElementHeight) |
55 (currX + (double) element. GetValue (CustomCanvasControl. LeftProperty)> currCanvasWidth-currElementWidth )){
56 // no task operation, no movement
57} else {
58
59 // set object coordinates
60 element. SetValue (CustomCanvasControl. TopProperty, currY + (double) element. GetValue (CustomCanvasControl. TopProperty ));
61 element. SetValue (CustomCanvasControl. LeftProperty, currX + (double) element. GetValue (CustomCanvasControl. LeftProperty ));
62}
63} catch {
64}
65}
66 // Save the current coordinate value
67 _ curPoint = e. GetPosition (element. Parent as CustomCanvasControl );
68}
69
70 # endregion
71}

5 Json serialization

Currently, Json and XML are used to save and transmit data. it is relatively easy to use these two technologies. Many important platforms use these two methods. Therefore, Json is basically used for serialization and deserialization, the following two methods are used:

JsonConvert. SerializeObject ()

JsonConvert. DeserializeObject <> ()

6 HTML 5 GelLocation API

Because the system needs to locate the location, because the positioning API of HTML 5 is used, this is relatively easy. It is an API, just call it by yourself, or give the code:

1 function getUserLocation (){
2 if (navigator. geolocation ){
3 navigator. geolocation. getCurrentPosition (show_map );
4} else {
5 alert ("your browser does not support HTML 5 to obtain geographic location information. ");
6}
7}
8 function show_map (position ){
9 var latitude = position. coords. latitude;
10 var longpolling = position. coords. longpolling;
11 callSL (latitude, longpolling );
12}
13
14 function callSL (latitude, longpolling ){
15 var slHost = document. getElementById ("SilverlightControl ");
16 var page = slHost. Content. FootprintContainer;
17 slHost. Content. FootprintContainer. Process (longpolling, latitude );
18}

It should be noted that how Silverlight communicates with javascript is also reflected in the Code. If you are interested, check the relevant information,

7. Summary

This conclusion is indeed relatively early, because there are still some technologies that have not been used before, so it is difficult for me to spend a vacation, but I need to write the work plan and I have to go to work now, therefore, there is indeed no more time, and I still have a lot to say that I don't understand. I have to say that a person wants to have a better life in the future and needs to work hard when he is young. As I mentioned earlier, I believe you have noticed that I have not explained more about the code details, because there are still a wealth of online resources, as long as you know that this is the case, you can easily find the answer by knowing the keywords. Therefore, the focus of this article is not to explain how the specific code is implemented, but to mention the knowledge points and train of thought. Speaking of this, I believe that prawns started to laugh, but I still want to say that becoming a prawns is a process, not a result.