使用Telerik的登陆模板实现DoubanFm的登陆(WP7)

Telerik的控件很强大。我们直接使用其登陆模板。

在装过Telerik WP版后，就可以在VS里非常方便的添加页面了。

我们选择 Sign In Form

其XAML不是很长，直接贴出来

 1 <telerikInput:RadDataForm Grid.Row="1" Margin="12,48,12,0" x:Name="DataForm">

 2                     <telerikInput:RadDataForm.CurrentItem>

 3                         <models:SignInDataModel/>

 4                     </telerikInput:RadDataForm.CurrentItem>

 5                     <Grid>

 6                         <telerikInput:DataField Header="" TargetProperty="UserName">

 7                             <telerikInput:DataField.EditorStyles>

 8                                 <Style TargetType="telerikPrimitives:RadTextBox">

 9                                     <Setter Property="Watermark" Value="username or email"/>

10                                 </Style>

11                             </telerikInput:DataField.EditorStyles>

12                             <telerikInput:DataField.Validators>

13                                 <telerikInput:NonEmptyStringValidator/>

14                             </telerikInput:DataField.Validators>

15                         </telerikInput:DataField>

16                         <telerikInput:DataField Header="" TargetProperty="Password" telerikDataForm:PasswordField.IsPasswordField="True">

17                             <telerikInput:DataField.EditorStyles>

18                                 <Style TargetType="telerikPrimitives:RadPasswordBox">

19                                     <Setter Property="Watermark" Value="password"/>

20                                 </Style>

21                             </telerikInput:DataField.EditorStyles>

22                             <telerikInput:DataField.Validators>

23                                 <telerikInput:NonEmptyStringValidator/>

24                             </telerikInput:DataField.Validators>

25                         </telerikInput:DataField>

26                     </Grid>

27 </telerikInput:RadDataForm>

XAML非常简单简洁，一看就懂，要想加验证也非常容易。

下面的登陆按钮直接将DataForm传至后台

1   <Button Grid.Row="2" Content="sign in" Margin="12" CommandParameter="{Binding ElementName=DataForm}"

2                         Command="{StaticResource DataFormCommitCommand}" />

下面用这个控件来做我们的DoubanFm的登陆。

还是使用MVVMlight，为登陆页面建立一个VM，别忘了在Locator中注册VM。

在VM中暴露一个UserModel属性给View

 1       public const string UserModelPropertyName = "UserModel";

 2         private User usermodel = new User();

 3         public User UserModel

 4         {

 5             get

 6             {

 7                 return usermodel;

 8             }

 9 

10             set

11             {

12                 if (usermodel == value)

13                 {

14                     return;

15                 }

16 

17                 RaisePropertyChanging(UserModelPropertyName);

18                 usermodel = value;

19                 RaisePropertyChanged(UserModelPropertyName);

20             }

21         }

再为登陆按钮设置一个Command，如下：

 1     private RelayCommand<RadDataForm> logincommand;

 2         /// <summary>

 3         /// Gets the LoginCommand.

 4         /// </summary>

 5         public RelayCommand<RadDataForm> LoginCommand

 6         {

 7             get

 8             {

 9                 return logincommand

10                     ?? (logincommand = new RelayCommand<RadDataForm>(

11                                           (dataform) =>

12                                           {

13                                               dataform.Commit();//这样值就到UserModel了

14                                               User user=dataform.CurrentItem as User;

15                                               Debug.WriteLine(user.Username);

16                                               Debug.WriteLine(user.PassWord);

17 

18                                           }));

19             }

20         }

再结合上一篇Rx，我们可以实现DoubanFm的登陆了。

 

实现起来为了不破坏原先代码的结构，我们把负责Post的Rx利用SimpleIoc注入到早就写好的HttpRequestService类中。

1    MyRxPostMethodService RxService;

2         public HttpRequestService(MyRxPostMethodService rx)

3         {

4             RxService = rx;

5          

6         }

MyRxPostMethodService 就是上篇的HTTPREQUEST类

 

再对Post包装一下

1    public IObservable<string> Post(string URL, string PostData)

2         {

3          return   RxService.PostMethod(URL, PostData);

4         

5         }

最后再把HttpRequestService注入到LoginVm中

1    private IHttpRequest _httprequest;

2         public LoginViewModel(IHttpRequest http)

3         {

4             _httprequest = http;

5         }

再将Command改为

 1  public RelayCommand<RadDataForm> LoginCommand

 2         {

 3             get

 4             {

 5                 return logincommand

 6                     ?? (logincommand = new RelayCommand<RadDataForm>(

 7                                           (dataform) =>

 8                                           {

 9                                               dataform.Commit();//这样值就到UserModel了

10                                               User user=dataform.CurrentItem as User;

11                                               string username = user.Username;

12                                               string password = user.PassWord;

13                                               _httprequest.Post("http://www.douban.com/j/app/login", "app_name=radio_desktop_win&version=100&email=" + username + "&password=" + password).Subscribe(this.OnLoginStatusChanged);

14                                            

15 

16                                           }));

17             }

18         }

到这里基本大功告成。