true soft - Page 352 - Developer IT

Facebook Connect login button not rendering

- by tloflin

I'm trying to implement a Facebook Connect Single Sign-on site. I originally just had a Connect button (<fb:login-button>), which the user had to click every time they wanted to sign in. I now have the auto login and logout features working. That is, my site will detect a logged-in Facebook account and automatically authenticate them if it can find a match to one of my site's user accounts, and automatically deauthenticate if the Facebook session is lost. I also have a manual logout button that will log the user out of both my site and Facebook. All of those are working correctly, but now my original Connect button is intermittently not being rendered correctly. It just shows up as the plain XHTML (ie., it looks like plain text--not a button--and is unclickable), and no XFBML is applied. Here is the basic code: On every page: <body> {...} <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript> FB.init('APIKey', '/xd_receiver.htm'); var isAuth; // isAuth determines if the user is authenticated on my site // it should be true on the logout page, false on the login page FB.ensureInit(function(){ var session = FB.Facebook.apiClient.get_session(); if (session && !isAuth) { PageMethods.FacebookLogin(session.uid, session.session_key, FBLogin, FBLoginFail); // This is an AJAX call that authenticates the user on my site. } else if(!session && isFBAuth) { PageMethods.FacebookLogout(FBLogout, FBLogoutFail); // This is an AJAX call that deauthenticates the user on my site. } // the callback functions do nothing at the moment }); </script> {...} </body> On the login page: (this page is not visible to logged in users) <body> {...} <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript> FB.init('APIKey', '/xd_receiver.htm'); {...} // auto-auth code as on every page </script>  <fb:login-button v="2" onlogin="UserSignedIntoFB();" size="large" autologoutlink="true"><fb:intl>Login With Your Facebook Account</fb:intl></fb:login-button> <script type="text/javascript"> function UserSignedIntoFB() { {...} // posts back to the server which authenticates the user on my site & redirects } </script> {...} </body> On the logout page: (this page is not visible to logged out users) <body> {...} <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript> FB.init('APIKey', '/xd_receiver.htm'); {...} // auto-auth code as on every page </script> <script type="text/javascript"> function FBLoggedOut() { {...} // posts back to the server which deauthenticates the user on my site & redirects to login } function Logout() { if (FB.Facebook.apiClient.get_session()) { FB.Connect.logout(FBLoggedOut); // logs out of Facebook if it's a Facebook account return false; } else { return true; // posts back if it's a non-Facebook account & redirects to login } } </script> <a onclick="return Logout();" href="postback_url">Sign Out</a> {...} </body> Some things I've already looked at: The automatic login and logout are working great. I can log in and out of Facebook on another tab and my site will notice the session changes and update accordingly. The logout seems to be working fine: when clicked, it deauthenticates the user and logs them out of Facebook, as intended. The issue seems to usually happen after a Facebook user is logged out, but it happens somewhat intermittently; it might happen before they ever login, and it goes away after a few minutes/refreshes. Some cookies are left over after the login/logout process, but deleting them does not fix the issue. Restarting the browser does not fix the issue. The user is definitely logged out of Facebook and my site when the problem occurs. I've checked for Facebook sessions and site authentication. All external script calls are being served up correctly. I have a suspicion that there's something else I need to be doing upon logout (like clearing session or cookies), but according to everything I've read about Facebook Connect, all I need to do is call the logout function (and deauthenticate on my server-side). I'm really at a loss; does anybody have any ideas what could be wrong?

Read the article

Silverlight Recruiting Application Part 6 - Adding an Interview Scheduling Module/View

Between the last post and this one I went ahead and carried the ideas for the Jobs module and view into the Applicants module and view- they're both doing more or less the same thing, except with different objects being at their core. Made for an easy cut-and-paste operation with a few items being switched from one to another. Now that we have the ability to add postings and applicants, wouldn't it be nice if we could schedule an interview? Of course it would! Scheduling Module I think you get the drift from previous posts that these project structures start looking somewhat similar. The interview scheduling module is no different than the rest- it gets a SchedulingModule.cs file at the root that inherits from IModule, and there is a single SchedulerView.xsml and SchedulerViewModel.cs setup for our V+VM. We have one unique concern as we enter into this- RadScheduler deals with AppointmentsSource, not ItemsSource, so there are some special considerations to take into account when planning this module. First, I need something which inherits from AppointmentBase. This is the core of the RadScheduler appointment, and if you are planning to do any form of custom appointment, you'll want it to inherit from this. Then you can add-on functionality as needed. Here is my addition to the mix, the InterviewAppointment: 01.public class InterviewAppointment : AppointmentBase 02.{ 03. private int _applicantID; 04. public int ApplicantID 05. { 06. get { return this._applicantID; } 07. set 08. { 09. if (_applicantID != value) 10. { 11. _applicantID = value; 12. OnPropertyChanged("ApplicantID"); 13. } 14. } 15. } 16. 17. private int _postingID; 18. public int PostingID 19. { 20. get { return _postingID; } 21. set 22. { 23. if (_postingID != value) 24. { 25. _postingID = value; 26. OnPropertyChanged("PostingID"); 27. } 28. } 29. } 30. 31. private string _body; 32. public string Body 33. { 34. get { return _body; } 35. set 36. { 37. if (_body != value) 38. { 39. _body = value; 40. OnPropertyChanged("Body"); 41. } 42. } 43. } 44. 45. private int _interviewID; 46. public int InterviewID 47. { 48. get { return _interviewID; } 49. set 50. { 51. if (_interviewID != value) 52. { 53. _interviewID = value; 54. OnPropertyChanged("InterviewID"); 55. } 56. } 57. } 58. 59. public override IAppointment Copy() 60. { 61. IAppointment appointment = new InterviewAppointment(); 62. appointment.CopyFrom(this); 63. return appointment; 64. } 65. 66. public override void CopyFrom(IAppointment other) 67. { 68. base.CopyFrom(other); 69. var appointment = other as InterviewAppointment; 70. if (appointment != null) 71. { 72. ApplicantID = appointment.ApplicantID; 73. PostingID = appointment.PostingID; 74. Body = appointment.Body; 75. InterviewID = appointment.InterviewID; 76. } 77. } 78.} Nothing too exciting going on here, we just make sure that our custom fields are persisted (specifically set in CopyFrom at the bottom) and notifications are fired- otherwise this ends up exactly like the standard appointment as far as interactions, etc. But if we've got custom appointment items... that also means we need to customize what our appointment dialog window will look like. Customizing the Edit Appointment Dialog This initially sounds a lot more intimidating than it really is. The first step here depends on what you're dealing with for theming, but for ease of everything I went ahead and extracted my templates in Blend for RadScheduler so I could modify it as I pleased. For the faint of heart, the RadScheduler template is a few thousand lines of goodness since there are some very complex things going on in that control. I've gone ahead and trimmed down the template parts I don't need as much as possible, so what is left is all that is relevant to the Edit Appointment Dialog. Here's the resulting Xaml, with line numbers, so I can explain further: 001.<UserControl.Resources> 002.  003. <helpers:DataContextProxy x:Key="DataContextProxy" /> 004. 005. <telerik:Windows7Theme x:Key="Theme" /> 006. <SolidColorBrush x:Key="DialogWindowBackground" 007. Color="White" /> 008. <SolidColorBrush x:Key="CategorySelectorBorderBrush" 009. Color="#FFB1B1B1" /> 010. <LinearGradientBrush x:Key="RadToolBar_InnerBackground" 011. EndPoint="0.5,1" 012. StartPoint="0.5,0"> 013. <GradientStop Color="#FFFDFEFF" 014. Offset="0" /> 015. <GradientStop Color="#FFDDE9F7" 016. Offset="1" /> 017. <GradientStop Color="#FFE6F0FA" 018. Offset="0.5" /> 019. <GradientStop Color="#FFDCE6F4" 020. Offset="0.5" /> 021. </LinearGradientBrush> 022. <Style x:Key="FormElementTextBlockStyle" 023. TargetType="TextBlock"> 024. <Setter Property="HorizontalAlignment" 025. Value="Right" /> 026. <Setter Property="VerticalAlignment" 027. Value="Top" /> 028. <Setter Property="Margin" 029. Value="15, 15, 0, 2" /> 030. </Style> 031. <Style x:Key="FormElementStyle" 032. TargetType="FrameworkElement"> 033. <Setter Property="Margin" 034. Value="10, 10, 0, 2" /> 035. </Style> 036. <SolidColorBrush x:Key="GenericShallowBorderBrush" 037. Color="#FF979994" /> 038. <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /> 039. <telerikScheduler:ImportanceToBooleanConverter x:Key="ImportanceToBooleanConverter" /> 040. <telerikScheduler:NullToVisibilityConverter x:Key="NullToVisibilityConverter" /> 041. <telerikScheduler:InvertedNullToVisibilityConverter x:Key="InvertedNullToVisibilityConverter" /> 042. <scheduler:ResourcesSeparatorConverter x:Key="ResourcesSeparatorConverter" /> 043. <DataTemplate x:Key="IconDataEditTemplate"> 044. <Image Source="/Telerik.Windows.Controls.Scheduler;component/Themes/Office/Images/cal.png" 045. Margin="3,3,0,0" 046. Width="16" 047. Height="16" /> 048. </DataTemplate> 049. <DataTemplate x:Key="SingleSelectionTemplate"> 050. <Grid VerticalAlignment="Stretch" 051. HorizontalAlignment="Stretch"> 052. <Grid.RowDefinitions> 053. <RowDefinition Height="Auto" /> 054. </Grid.RowDefinitions> 055. <Grid.ColumnDefinitions> 056. <ColumnDefinition Width="Auto" 057. MinWidth="84" /> 058. <ColumnDefinition Width="Auto" 059. MinWidth="200" /> 060. </Grid.ColumnDefinitions> 061. <TextBlock x:Name="SelectionNameLabel" 062. Margin="0,13,4,2" 063. Text="{Binding ResourceType.DisplayName}" 064. Style="{StaticResource FormElementTextBlockStyle}" 065. Grid.Column="0" /> 066. <telerikInput:RadComboBox ItemsSource="{Binding ResourceItems}" 067. Width="185" 068. Margin="5,10,20,2" 069. HorizontalAlignment="Left" 070. Grid.Column="1" 071. ClearSelectionButtonVisibility="Visible" 072. ClearSelectionButtonContent="Clear All" 073. DisplayMemberPath="Resource.DisplayName" 074. telerik:StyleManager.Theme="{StaticResource Theme}" 075. SelectedItem="{Binding SelectedItem, Mode=TwoWay}" /> 076. </Grid> 077. </DataTemplate> 078. <DataTemplate x:Key="MultipleSelectionTemplate"> 079. <Grid VerticalAlignment="Stretch" 080. HorizontalAlignment="Stretch"> 081. <Grid.RowDefinitions> 082. <RowDefinition Height="Auto" /> 083. </Grid.RowDefinitions> 084. <Grid.ColumnDefinitions> 085. <ColumnDefinition Width="Auto" 086. MinWidth="84" /> 087. <ColumnDefinition Width="Auto" 088. MinWidth="200" /> 089. </Grid.ColumnDefinitions> 090. <TextBlock x:Name="SelectionNameLabel" 091. Grid.Column="0" 092. Text="{Binding ResourceType.DisplayName}" 093. Margin="0,13,4,2" 094. Style="{StaticResource FormElementTextBlockStyle}" /> 095. <telerikInput:RadComboBox Grid.Column="1" 096. Width="185" 097. HorizontalAlignment="Left" 098. Margin="5,10,20,2" 099. ItemsSource="{Binding ResourceItems}" 100. SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" 101. ClearSelectionButtonVisibility="Visible" 102. ClearSelectionButtonContent="Clear All" 103. telerik:StyleManager.Theme="{StaticResource Theme}"> 104. <telerikInput:RadComboBox.ItemTemplate> 105. <DataTemplate> 106. <Grid HorizontalAlignment="Stretch" 107. VerticalAlignment="Stretch"> 108. <CheckBox VerticalAlignment="Center" 109. HorizontalContentAlignment="Stretch" 110. VerticalContentAlignment="Center" 111. IsChecked="{Binding IsChecked, Mode=TwoWay}" 112. Content="{Binding Resource.DisplayName}"> 113. <CheckBox.ContentTemplate> 114. <DataTemplate> 115. <TextBlock HorizontalAlignment="Stretch" 116. VerticalAlignment="Stretch" 117. Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" /> 118. </DataTemplate> 119. </CheckBox.ContentTemplate> 120. </CheckBox> 121. </Grid> 122. </DataTemplate> 123. </telerikInput:RadComboBox.ItemTemplate> 124. </telerikInput:RadComboBox> 125. </Grid> 126. </DataTemplate> 127. <scheduler:ResourceTypeTemplateSelector x:Key="ItemTemplateSelector" 128. MultipleSelectionTemplate="{StaticResource MultipleSelectionTemplate}" 129. SingleSelectionTemplate="{StaticResource SingleSelectionTemplate}" /> 130.  131. 132. <ControlTemplate x:Key="EditAppointmentTemplate" 133. TargetType="telerikScheduler:AppointmentDialogWindow"> 134. <StackPanel Background="{TemplateBinding Background}" 135. UseLayoutRounding="True"> 136. <StackPanel Grid.Row="0" 137. Orientation="Horizontal" 138. Background="{StaticResource RadToolBar_InnerBackground}" 139. Grid.ColumnSpan="2" 140. Height="0"> 141.  142. <Border Margin="1,1,0,0" 143. Background="#50000000" 144. HorizontalAlignment="Left" 145. VerticalAlignment="Center" 146. Width="2" 147. Height="16"> 148. <Border Margin="0,0,1,1" 149. Background="#80FFFFFF" 150. HorizontalAlignment="Left" 151. Width="1" /> 152. </Border> 153. <Border Margin="1,1,0,0" 154. Background="#50000000" 155. HorizontalAlignment="Left" 156. VerticalAlignment="Center" 157. Width="2" 158. Height="16"> 159. <Border Margin="0,0,1,1" 160. Background="#80FFFFFF" 161. HorizontalAlignment="Left" 162. Width="1" /> 163. </Border> 164. <TextBlock telerik:LocalizationManager.ResourceKey="ShowAs" 165. VerticalAlignment="Center" 166. Margin="5,0,0,0" /> 167. <telerikInput:RadComboBox ItemsSource="{TemplateBinding TimeMarkers}" 168. Width="100" 169. Height="20" 170. VerticalAlignment="Center" 171. Margin="5,0,0,0" 172. ClearSelectionButtonVisibility="Visible" 173. ClearSelectionButtonContent="Clear" 174. SelectedItem="{Binding TimeMarker,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" 175. telerik:StyleManager.Theme="{StaticResource Theme}"> 176. <telerikInput:RadComboBox.ItemTemplate> 177. <DataTemplate> 178. <StackPanel Orientation="Horizontal"> 179. <Rectangle Fill="{Binding TimeMarkerBrush}" 180. Margin="2" 181. Width="12" 182. Height="12" /> 183. <TextBlock Text="{Binding TimeMarkerName}" 184. Margin="2" /> 185. </StackPanel> 186. </DataTemplate> 187. </telerikInput:RadComboBox.ItemTemplate> 188. </telerikInput:RadComboBox> 189. <telerik:RadToggleButton x:Name="High" 190. BorderThickness="0" 191. Background="{StaticResource RadToolBar_InnerBackground}" 192. DataContext="{TemplateBinding EditedAppointment}" 193. telerik:StyleManager.Theme="{StaticResource Theme}" 194. IsChecked="{Binding Importance,Mode=TwoWay, Converter={StaticResource ImportanceToBooleanConverter},ConverterParameter=High}" 195. Margin="2,2,0,2" 196. Width="23" 197. Height="23" 198. HorizontalContentAlignment="Center" 199. ToolTipService.ToolTip="High importance" 200. CommandParameter="High" 201. Command="telerikScheduler:RadSchedulerCommands.SetAppointmentImportance"> 202. <StackPanel HorizontalAlignment="Center"> 203. <Path Stretch="Fill" 204. Height="10" 205. HorizontalAlignment="Center" 206. VerticalAlignment="Top" 207. Width="5.451" 208. Data="M200.39647,58.840393 C200.39337,58.336426 201.14566,57.683922 202.56244,57.684292 C204.06589,57.684685 204.73764,58.357765 204.72783,58.992363 C205.04649,61.795574 203.04713,64.181099 202.47388,66.133446 C201.93753,64.154961 199.9471,61.560352 200.39647,58.840393 z"> 209. <Path.Fill> 210. <LinearGradientBrush EndPoint="1.059,0.375" 211. StartPoint="-0.457,0.519"> 212. <GradientStop Color="#FFFF0606" 213. Offset="0.609" /> 214. <GradientStop Color="#FFBF0303" 215. Offset="0.927" /> 216. </LinearGradientBrush> 217. </Path.Fill> 218. </Path> 219. <Ellipse Height="3" 220. HorizontalAlignment="Center" 221. Margin="0,-1,0,0" 222. VerticalAlignment="Top" 223. Width="3"> 224. <Ellipse.Fill> 225. <RadialGradientBrush> 226. <GradientStop Color="#FFFF0606" 227. Offset="0" /> 228. <GradientStop Color="#FFBF0303" 229. Offset="1" /> 230. </RadialGradientBrush> 231. </Ellipse.Fill> 232. </Ellipse> 233. </StackPanel> 234. </telerik:RadToggleButton> 235. <telerik:RadToggleButton x:Name="Low" 236. HorizontalContentAlignment="Center" 237. BorderThickness="0" 238. Background="{StaticResource RadToolBar_InnerBackground}" 239. DataContext="{TemplateBinding EditedAppointment}" 240. IsChecked="{Binding Importance,Mode=TwoWay, Converter={StaticResource ImportanceToBooleanConverter},ConverterParameter=Low}" 241. Margin="0,2,0,2" 242. Width="23" 243. Height="23" 244. ToolTipService.ToolTip="Low importance" 245. CommandParameter="Low" 246. telerik:StyleManager.Theme="{StaticResource Theme}" 247. Command="telerikScheduler:RadSchedulerCommands.SetAppointmentImportance"> 248. <Path Stretch="Fill" 249. Height="12" 250. HorizontalAlignment="Center" 251. VerticalAlignment="Top" 252. Width="9" 253. Data="M222.40353,60.139881 L226.65768,60.139843 L226.63687,67.240196 L229.15347,67.240196 L224.37816,71.394943 L219.65274,67.240196 L222.37572,67.219345 z" 254. Stroke="#FF0365A7"> 255. <Path.Fill> 256. <LinearGradientBrush EndPoint="1.059,0.375" 257. StartPoint="-0.457,0.519"> 258. <GradientStop Color="#FFBBE4FF" /> 259. <GradientStop Color="#FF024572" 260. Offset="0.836" /> 261. <GradientStop Color="#FF43ADF4" 262. Offset="0.466" /> 263. </LinearGradientBrush> 264. </Path.Fill> 265. </Path> 266. </telerik:RadToggleButton> 267. </StackPanel > 268. <Border DataContext="{TemplateBinding EditedAppointment}" 269. Background="{Binding Category.CategoryBrush}" 270. Visibility="{Binding Category,Converter={StaticResource NullToVisibilityConverter}}" 271. CornerRadius="3" 272. Height="20" 273. Margin="5,10,5,0"> 274. <TextBlock Text="{Binding Category.DisplayName}" 275. VerticalAlignment="Center" 276. Margin="5,0,0,0" /> 277. </Border> 278. <Grid VerticalAlignment="Stretch" 279. HorizontalAlignment="Stretch" 280. DataContext="{TemplateBinding EditedAppointment}" 281. Background="{TemplateBinding Background}"> 282. <Grid.RowDefinitions> 283. <RowDefinition Height="Auto" /> 284. <RowDefinition Height="Auto" /> 285. <RowDefinition Height="Auto" /> 286. <RowDefinition Height="Auto" /> 287. <RowDefinition Height="Auto" /> 288. <RowDefinition Height="Auto" /> 289. <RowDefinition Height="Auto" /> 290. <RowDefinition Height="Auto" /> 291. <RowDefinition Height="Auto" /> 292. <RowDefinition Height="Auto" /> 293. </Grid.RowDefinitions> 294. <Grid.ColumnDefinitions> 295. <ColumnDefinition Width="Auto" 296. MinWidth="100" /> 297. <ColumnDefinition Width="Auto" 298. MinWidth="200" /> 299. </Grid.ColumnDefinitions> 300.  301. <TextBlock x:Name="SubjectLabel" 302. Grid.Row="0" 303. Grid.Column="0" 304. Margin="0,15,0,2" 305. telerik:LocalizationManager.ResourceKey="Subject" 306. Style="{StaticResource FormElementTextBlockStyle}" /> 307. <TextBox x:Name="Subject" 308. Grid.Row="0" 309. Grid.Column="1" 310. MinHeight="22" 311. Padding="4 2" 312. Width="340" 313. HorizontalAlignment="Left" 314. Text="{Binding Subject, Mode=TwoWay}" 315. MaxLength="255" 316. telerik:StyleManager.Theme="{StaticResource Theme}" 317. Margin="10,12,20,2" /> 318.  319. <TextBlock x:Name="DescriptionLabel" 320. Grid.Row="1" 321. Grid.Column="0" 322. Margin="0,13,0,2" 323. telerik:LocalizationManager.ResourceKey="Body" 324. Style="{StaticResource FormElementTextBlockStyle}" /> 325. <TextBox x:Name="Body" 326. VerticalAlignment="top" 327. Grid.Row="1" 328. Grid.Column="1" 329. Height="Auto" 330. MaxHeight="82" 331. Width="340" 332. HorizontalAlignment="Left" 333. MinHeight="22" 334. Padding="4 2" 335. TextWrapping="Wrap" 336. telerik:StyleManager.Theme="{StaticResource Theme}" 337. Text="{Binding Body, Mode=TwoWay}" 338. AcceptsReturn="true" 339. Margin="10,10,20,2" 340. HorizontalScrollBarVisibility="Auto" 341. VerticalScrollBarVisibility="Auto" /> 342.  343. <TextBlock x:Name="StartDateLabel" 344. Grid.Row="2" 345. Grid.Column="0" 346. Margin="0,13,0,2" 347. telerik:LocalizationManager.ResourceKey="StartTime" 348. Style="{StaticResource FormElementTextBlockStyle}" /> 349. <telerikScheduler:DateTimePicker x:Name="StartDateTime" 350. Height="22" 351. Grid.Row="2" 352. Grid.Column="1" 353. HorizontalAlignment="Left" 354. Margin="10,10,20,2" 355. Style="{StaticResource FormElementStyle}" 356. SelectedDateTime="{Binding Start, Mode=TwoWay}" 357. telerikScheduler:StartEndDatePicker.EndPicker="{Binding ElementName=EndDateTime}" 358. IsTabStop="False" 359. IsEnabled="False" /> 360. <TextBlock x:Name="EndDateLabel" 361. Grid.Row="3" 362. Grid.Column="0" 363. Margin="0,13,0,2" 364. telerik:LocalizationManager.ResourceKey="EndTime" 365. Style="{StaticResource FormElementTextBlockStyle}" /> 366. <telerikScheduler:DateTimePicker x:Name="EndDateTime" 367. Height="22" 368. Grid.Row="3" 369. Grid.Column="1" 370. HorizontalAlignment="Left" 371. Margin="10,10,20,2" 372. Style="{StaticResource FormElementStyle}" 373. IsTabStop="False" 374. IsEnabled="False" 375. SelectedDateTime="{Binding End, Mode=TwoWay}" /> 376.  377. <CheckBox x:Name="AllDayEventCheckbox" 378. IsChecked="{Binding IsAllDayEvent, Mode=TwoWay}" 379. Grid.Row="4" 380. Grid.Column="1" 381. Margin="10,10,20,2" 382. HorizontalAlignment="Left" 383. telerik:StyleManager.Theme="{StaticResource Theme}" 384. telerik:LocalizationManager.ResourceKey="AllDayEvent"> 385. <telerik:CommandManager.InputBindings> 386. <telerik:InputBindingCollection> 387. <telerik:MouseBinding Command="telerikScheduler:RadSchedulerCommands.ChangeTimePickersVisibility" 388. Gesture="LeftClick" /> 389. </telerik:InputBindingCollection> 390. </telerik:CommandManager.InputBindings> 391. </CheckBox> 392. <Grid Grid.Row="5" 393. Grid.ColumnSpan="2"> 394. <Grid.ColumnDefinitions> 395. <ColumnDefinition Width="Auto" 396. MinWidth="100" /> 397. <ColumnDefinition Width="Auto" 398. MinWidth="200" /> 399. </Grid.ColumnDefinitions> 400. <Grid.RowDefinitions> 401. <RowDefinition Height="Auto" /> 402. <RowDefinition Height="Auto" /> 403. </Grid.RowDefinitions> 404. <TextBlock Text="Applicant" 405. Margin="0,13,0,2" 406. Style="{StaticResource FormElementTextBlockStyle}" /> 407. <telerikInput:RadComboBox IsEditable="False" 408. Grid.Column="1" 409. Height="24" 410. VerticalAlignment="Center" 411. ItemsSource="{Binding Source={StaticResource DataContextProxy}, Path=DataSource.ApplicantList}" 412. SelectedValue="{Binding ApplicantID, Mode=TwoWay}" 413. SelectedValuePath="ApplicantID" 414. DisplayMemberPath="FirstName" /> 415. 416. <TextBlock Text="Job" 417. Margin="0,13,0,2" 418. Grid.Row="1" 419. Style="{StaticResource FormElementTextBlockStyle}" /> 420. <telerikInput:RadComboBox IsEditable="False" 421. Grid.Column="1" 422. Grid.Row="1" 423. Height="24" 424. VerticalAlignment="Center" 425. ItemsSource="{Binding Source={StaticResource DataContextProxy}, Path=DataSource.JobsList}" 426. SelectedValue="{Binding PostingID, Mode=TwoWay}" 427. SelectedValuePath="PostingID" 428. DisplayMemberPath="JobTitle"/> 429. </Grid> 430.  431. <Grid x:Name="ResourcesLayout" 432. Grid.Row="7" 433. Grid.Column="0" 434. Grid.ColumnSpan="2" 435. MaxHeight="130" 436. Margin="20,5,20,0"> 437. <Border Margin="0" 438. BorderThickness="1" 439. BorderBrush="{StaticResource GenericShallowBorderBrush}" 440. Visibility="{Binding ElementName=ResourcesScrollViewer, Path=ComputedVerticalScrollBarVisibility}"></Border> 441. <ScrollViewer x:Name="ResourcesScrollViewer" 442. IsTabStop="false" 443. Grid.Row="6" 444. Grid.Column="0" 445. Grid.ColumnSpan="2" 446. Margin="1" 447. telerik:StyleManager.Theme="{StaticResource Theme}" 448. VerticalScrollBarVisibility="Auto"> 449. <scheduler:ResourcesItemsControl x:Name="PART_Resources" 450. HorizontalAlignment="Left" 451. Padding="0,2,0,5" 452. IsTabStop="false" 453. ItemsSource="{TemplateBinding ResourceTypeModels}" 454. ItemTemplateSelector="{StaticResource ItemTemplateSelector}" /> 455. </ScrollViewer> 456. </Grid> 457. <StackPanel x:Name="FooterControls" 458. Margin="5 10 10 10" 459. Grid.Row="8" 460. Grid.Column="1" 461. HorizontalAlignment="Left" 462. Orientation="Horizontal"> 463. <telerik:RadButton x:Name="OKButton" 464. Margin="5" 465. Padding="10 0" 466. MinWidth="80" 467. Command="telerikScheduler:RadSchedulerCommands.SaveAppointment" 468. telerik:StyleManager.Theme="{StaticResource Theme}" 469. telerikNavigation:RadWindow.ResponseButton="Accept" 470. telerik:LocalizationManager.ResourceKey="SaveAndCloseCommandText"> 471. </telerik:RadButton> 472. <telerik:RadButton x:Name="CancelButton" 473. Margin="5" 474. Padding="10 0" 475. MinWidth="80" 476. telerik:LocalizationManager.ResourceKey="Cancel" 477. telerik:StyleManager.Theme="{StaticResource Theme}" 478. telerikNavigation:RadWindow.ResponseButton="Cancel" 479. Command="telerik:WindowCommands.Close"> 480. </telerik:RadButton> 481. </StackPanel> 482. </Grid> 483. <vsm:VisualStateManager.VisualStateGroups> 484. <vsm:VisualStateGroup x:Name="RecurrenceRuleState"> 485. <vsm:VisualState x:Name="RecurrenceRuleIsNull"> 486. <Storyboard> 487. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StartDateTime" 488. Storyboard.TargetProperty="IsEnabled" 489. Duration="0"> 490. <DiscreteObjectKeyFrame KeyTime="0" 491. Value="True" /> 492. </ObjectAnimationUsingKeyFrames> 493. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EndDateTime" 494. Storyboard.TargetProperty="IsEnabled" 495. Duration="0"> 496. <DiscreteObjectKeyFrame KeyTime="0" 497. Value="True" /> 498. </ObjectAnimationUsingKeyFrames> 499. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AllDayEventCheckbox" 500. Storyboard.TargetProperty="IsEnabled" 501. Duration="0"> 502. <DiscreteObjectKeyFrame KeyTime="0" 503. Value="True" /> 504. </ObjectAnimationUsingKeyFrames> 505. </Storyboard> 506. </vsm:VisualState> 507. <vsm:VisualState x:Name="RecurrenceRuleIsNotNull"> 508. <Storyboard> 509. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StartDateTime" 510. Storyboard.TargetProperty="IsEnabled" 511. Duration="0"> 512. <DiscreteObjectKeyFrame KeyTime="0" 513. Value="False" /> 514. </ObjectAnimationUsingKeyFrames> 515. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EndDateTime" 516. Storyboard.TargetProperty="IsEnabled" 517. Duration="0"> 518. <DiscreteObjectKeyFrame KeyTime="0" 519. Value="False" /> 520. </ObjectAnimationUsingKeyFrames> 521. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AllDayEventCheckbox" 522. Storyboard.TargetProperty="IsEnabled" 523. Duration="0"> 524. <DiscreteObjectKeyFrame KeyTime="0" 525. Value="False" /> 526. </ObjectAnimationUsingKeyFrames> 527. </Storyboard> 528. </vsm:VisualState> 529. </vsm:VisualStateGroup> 530. </vsm:VisualStateManager.VisualStateGroups> 531. </StackPanel> 532. </ControlTemplate> 533. <DataTemplate x:Key="AppointmentDialogWindowHeaderDataTemplate"> 534. <StackPanel Orientation="Horizontal" 535. MaxWidth="400"> 536. <TextBlock telerik:LocalizationManager.ResourceKey="Event" 537. Visibility="{Binding Appointment.IsAllDayEvent, Converter={StaticResource BooleanToVisibilityConverter}}" /> 538. <TextBlock telerik:LocalizationManager.ResourceKey="Appointment" 539. Visibility="{Binding Appointment.IsAllDayEvent, Converter={StaticResource InvertedBooleanToVisibilityConverter}}" /> 540. <TextBlock Text=" - " /> 541. <TextBlock x:Name="SubjectTextBlock" 542. Visibility="{Binding Appointment.Subject, Converter={StaticResource NullToVisibilityConverter}}" 543. Text="{Binding Appointment.Subject}" /> 544. <TextBlock telerik:LocalizationManager.ResourceKey="Untitled" 545. Visibility="{Binding Appointment.Subject, Converter={StaticResource InvertedNullToVisibilityConverter}}" /> 546. </StackPanel> 547. </DataTemplate> 548. <Style x:Key="EditAppointmentStyle" 549. TargetType="telerikScheduler:AppointmentDialogWindow"> 550. <Setter Property="IconTemplate" 551. Value="{StaticResource IconDataEditTemplate}" /> 552. <Setter Property="HeaderTemplate" 553. Value="{StaticResource AppointmentDialogWindowHeaderDataTemplate}" /> 554. <Setter Property="Background" 555. Value="{StaticResource DialogWindowBackground}" /> 556. <Setter Property="Template" 557. Value="{StaticResource EditAppointmentTemplate}" /> 558. </Style> 559.</UserControl.Resources> The first line there is the DataContextProxy I mentioned previously- we use that again to work a bit of magic in this template. Where we start getting into the dialog in question is line 132, but line 407 is where things start getting interesting. The ItemsSource is pointing at a list that exists in my ViewModel (or code-behind, if it is used as a DataContext), the SelectedValue is the item I am actually binding from the applicant (note the TwoWay binding), and SelectedValuePath and DisplayMemberPath ensure the proper applicant is being displayed from the collection. You will also see similar starting on line 420 where I do the same for the Jobs we'll be displaying. Just to wrap-up the Xaml, here's the RadScheduler declaraction that ties this all together and will be the main focus of our view: 01.<telerikScheduler:RadScheduler x:Name="xJobsScheduler" 02. Grid.Row="1" 03. Grid.Column="1" 04. Width="800" 05. MinWidth="600" 06. Height="500" 07. MinHeight="300" 08. AppointmentsSource="{Binding Interviews}" 09. EditAppointmentStyle="{StaticResource EditAppointmentStyle}" 10. command:AppointmentAddedEventClass.Command="{Binding AddAppointmentCommand}" 11. command:ApptCreatedEventClass.Command="{Binding ApptCreatingCommand}" 12. command:ApptEditedEventClass.Command="{Binding ApptEditedCommand}" 13. command:ApptDeletedEventClass.Command="{Binding ApptDeletedCommand}"> 14.</telerikScheduler:RadScheduler> Now, we get to the ViewModel and what it takes to get that rigged up. And for those of you who remember the jobs post, those command:s in the Xaml are pointing to attached behavior commands that reproduce the respective events. This becomes very handy when we're setting up the code-behind version. ;) ViewModel I've been liking this approach so far, so I'm going to put the entire ViewModel here and then go into the lines of interest. Of course, feel free to ask me questions about anything that isn't clear (by line number, ideally) so I can help out if I have missed anything important: 001.public class SchedulerViewModel : ViewModelBase 002.{ 003. private readonly IEventAggregator eventAggregator; 004. private readonly IRegionManager regionManager; 005. 006. public RecruitingContext context; 007. 008. private ObservableItemCollection<InterviewAppointment> _interviews = new ObservableItemCollection<InterviewAppointment>(); 009. public ObservableItemCollection<InterviewAppointment> Interviews 010. { 011. get { return _interviews; } 012. set 013. { 014. if (_interviews != value) 015. { 016. _interviews = value; 017. NotifyChanged("Interviews"); 018. } 019. } 020. } 021. 022. private QueryableCollectionView _jobsList; 023. public QueryableCollectionView JobsList 024. { 025. get { return this._jobsList; } 026. set 027. { 028. if (this._jobsList != value) 029. { 030. this._jobsList = value; 031. this.NotifyChanged("JobsList"); 032. } 033. } 034. } 035. 036. private QueryableCollectionView _applicantList; 037. public QueryableCollectionView ApplicantList 038. { 039. get { return _applicantList; } 040. set 041. { 042. if (_applicantList != value) 043. { 044. _applicantList = value; 045. NotifyChanged("ApplicantList"); 046. } 047. } 048. } 049. 050. public DelegateCommand<object> AddAppointmentCommand { get; set; } 051. public DelegateCommand<object> ApptCreatingCommand { get; set; } 052. public DelegateCommand<object> ApptEditedCommand { get; set; } 053. public DelegateCommand<object> ApptDeletedCommand { get; set; } 054. 055. public SchedulerViewModel(IEventAggregator eventAgg, IRegionManager regionmanager) 056. { 057. // set Unity items 058. this.eventAggregator = eventAgg; 059. this.regionManager = regionmanager; 060. 061. // load our context 062. context = new RecruitingContext(); 063. LoadOperation<Interview> loadOp = context.Load(context.GetInterviewsQuery()); 064. loadOp.Completed += new EventHandler(loadOp_Completed); 065. 066. this._jobsList = new QueryableCollectionView(context.JobPostings); 067. context.Load(context.GetJobPostingsQuery()); 068. 069. this._applicantList = new QueryableCollectionView(context.Applicants); 070. context.Load(context.GetApplicantsQuery()); 071. 072. AddAppointmentCommand = new DelegateCommand<object>(this.AddAppt); 073. ApptCreatingCommand = new DelegateCommand<object>(this.ApptCreating); 074. ApptEditedCommand = new DelegateCommand<object>(this.ApptEdited); 075. ApptDeletedCommand = new DelegateCommand<object>(this.ApptDeleted); 076. 077. } 078. 079. void loadOp_Completed(object sender, EventArgs e) 080. { 081. LoadOperation loadop = sender as LoadOperation; 082. 083. foreach (var ent in loadop.Entities) 084. { 085. _interviews.Add(EntityToAppointment(ent as Interview)); 086. } 087. } 088. 089. #region Appointment Adding 090. 091. public void AddAppt(object obj) 092. { 093. // now we have a new InterviewAppointment to add to our QCV :) 094. InterviewAppointment newInterview = obj as InterviewAppointment; 095. 096. this.context.Interviews.Add(AppointmentToEntity(newInterview)); 097. this.context.SubmitChanges((s) => 098. { 099. ActionHistory myAction = new ActionHistory(); 100. myAction.InterviewID = newInterview.InterviewID; 101. myAction.PostingID = newInterview.PostingID; 102. myAction.ApplicantID = newInterview.ApplicantID; 103. myAction.Description = String.Format("Interview with {0} has been created by {1}", newInterview.ApplicantID.ToString(), "default user"); 104. myAction.TimeStamp = DateTime.Now; 105. eventAggregator.GetEvent<AddActionEvent>().Publish(myAction); 106. } 107. , null); 108. } 109. 110. public void ApptCreating(object obj) 111. { 112. // handled in the behavior, just a placeholder to ensure it runs :) 113. } 114. 115. #endregion 116. 117. #region Appointment Editing 118. 119. public void ApptEdited(object obj) 120. { 121. Interview editedInterview = (from x in context.Interviews 122. where x.InterviewID == (obj as InterviewAppointment).InterviewID 123. select x).SingleOrDefault(); 124. 125. CopyAppointmentEdit(editedInterview, obj as InterviewAppointment); 126. 127. context.SubmitChanges((s) => { 128. ActionHistory myAction = new ActionHistory(); 129. myAction.InterviewID = editedInterview.InterviewID; 130. myAction.PostingID = editedInterview.PostingID; 131. myAction.ApplicantID = editedInterview.ApplicantID; 132. myAction.Description = String.Format("Interview with {0} has been modified by {1}", editedInterview.ApplicantID.ToString(), "default user"); 133. myAction.TimeStamp = DateTime.Now; 134. eventAggregator.GetEvent<AddActionEvent>().Publish(myAction); } 135. , null); 136. } 137. 138. #endregion 139. 140. #region Appointment Deleting 141. 142. public void ApptDeleted(object obj) 143. { 144. Interview deletedInterview = (from x in context.Interviews 145. where x.InterviewID == (obj as InterviewAppointment).InterviewID 146. select x).SingleOrDefault(); 147. 148. context.Interviews.Remove(deletedInterview); 149. context.SubmitChanges((s) => 150. { 151. ActionHistory myAction = new ActionHistory(); 152. myAction.InterviewID = deletedInterview.InterviewID; 153. myAction.PostingID = deletedInterview.PostingID; 154. myAction.ApplicantID = deletedInterview.ApplicantID; 155. myAction.Description = String.Format("Interview with {0} has been deleted by {1}", deletedInterview.ApplicantID.ToString(), "default user"); 156. myAction.TimeStamp = DateTime.Now; 157. eventAggregator.GetEvent<AddActionEvent>().Publish(myAction); 158. } 159. , null); 160. } 161. 162. #endregion 163. 164. #region Appointment Helpers :) 165. 166. public Interview AppointmentToEntity(InterviewAppointment ia) 167. { 168. Interview newInterview = new Interview(); 169. newInterview.Subject = ia.Subject; 170. newInterview.Body = ia.Body; 171. newInterview.Start = ia.Start; 172. newInterview.End = ia.End; 173. newInterview.ApplicantID = ia.ApplicantID; 174. newInterview.PostingID = ia.PostingID; 175. newInterview.InterviewID = ia.InterviewID; 176. 177. return newInterview; 178. } 179. 180. public InterviewAppointment EntityToAppointment(Interview ia) 181. { 182. InterviewAppointment newInterview = new InterviewAppointment(); 183. newInterview.Subject = ia.Subject; 184. newInterview.Body = ia.Body; 185. newInterview.Start = ia.Start; 186. newInterview.End = ia.End; 187. newInterview.ApplicantID = ia.ApplicantID; 188. newInterview.PostingID = ia.PostingID; 189. newInterview.InterviewID = ia.InterviewID; 190. 191. return newInterview; 192. } 193. 194. public void CopyAppointmentEdit(Interview entityInterview, InterviewAppointment appointmentInterview) 195. { 196. entityInterview.Subject = appointmentInterview.Subject; 197. entityInterview.Body = appointmentInterview.Body; 198. entityInterview.Start = appointmentInterview.Start; 199. entityInterview.End = appointmentInterview.End; 200. entityInterview.ApplicantID = appointmentInterview.ApplicantID; 201. entityInterview.PostingID = appointmentInterview.PostingID; 202. } 203. 204. #endregion 205.} One thing we're doing here which you won't see in any of the other ViewModels is creating a duplicate collection. I know this is something which will be fixed down the line for using RadScheduler, simplifying this process, but with WCF RIA changing as it does I wanted to ensure functionality would remain consistent as I continued development on this application. So, I do a little bit of duplication, but for the greater good. This all takes place starting on line 79, so for every entity that comes back we add it to the collection that is bound to RadScheduler. Otherwise, the DelegateCommands that you see correspond directly to the events they are named after. In each case, rather than sending over the full event arguments, I just send in the appointment in question (coming through as the object obj in all cases) so I can add (line 91), edit (line 119), and delete appointments (line 142) like normal. This just ensures they get updated back to my database. Also, the one bit of code you won't see is for the Appointment Creating (line 110) event- that is because in the command I've created I simply make the replacement I need to: 1.void element_AppointmentCreating(object sender, AppointmentCreatingEventArgs e) 2.{ 3. e.NewAppointment = new InterviewAppointment(); 4. base.ExecuteCommand(); 5.} And the ViewModel is none the wiser, the appointments just work as far as it is concerned since as they are created they become InterviewAppointments. End result? I've customized my EditAppointmentDialog as follows: And adding, editing, and deleting appointments works like a charm. I can even 'edit' by moving appointments around RadScheduler, so as they are dropped into a timeslot they perform their full edit routine and things get updated. And then, the Code-Behind Version Perhaps the thing I like the most about doing one then the other is I get to steal 90% or more of the code from the MVVM version. For example, the only real changes to the Code-Behind Xaml file exist in the control declaration, in which I use events instead of attached-behavior-event-commands: 01.<telerikScheduler:RadScheduler x:Name="xJobsScheduler" 02. Grid.Row="1" 03. Grid.Column="1" 04. Width="800" 05. MinWidth="600" 06. Height="500" 07. MinHeight="300" 08. EditAppointmentStyle="{StaticResource EditAppointmentStyle}" 09. AppointmentAdded="xJobsScheduler_AppointmentAdded" 10. AppointmentCreating="xJobsScheduler_AppointmentCreating" 11. AppointmentEdited="xJobsScheduler_AppointmentEdited" 12. AppointmentDeleted="xJobsScheduler_AppointmentDeleted"> 13.</telerikScheduler:RadScheduler> Easy, right? Otherwise, all the same styling in UserControl.Resources was re-used, right down to the DataContextProxy that lets us bind to a collection from our viewmodel (in this case, our code-behind) to use within the DataTemplate. The code conversion gets even easier, as I could literally copy and paste almost everything from the ViewModel to my Code-Behind, just a matter of pasting the right section into the right event. Here's the code-behind as proof: 001.public partial class SchedulingView : UserControl, INotifyPropertyChanged 002.{ 003. public RecruitingContext context; 004. 005. private QueryableCollectionView _jobsList; 006. public QueryableCollectionView JobsList 007. { 008. get { return this._jobsList; } 009. set 010. { 011. if (this._jobsList != value) 012. { 013. this._jobsList = value; 014. this.NotifyChanged("JobsList"); 015. } 016. } 017. } 018. 019. private QueryableCollectionView _applicantList; 020. public QueryableCollectionView ApplicantList 021. { 022. get { return _applicantList; } 023. set 024. { 025. if (_applicantList != value) 026. { 027. _applicantList = value; 028. NotifyChanged("ApplicantList"); 029. } 030. } 031. } 032. 033. private ObservableItemCollection<InterviewAppointment> _interviews = new ObservableItemCollection<InterviewAppointment>(); 034. public ObservableItemCollection<InterviewAppointment> Interviews 035. { 036. get { return _interviews; } 037. set 038. { 039. if (_interviews != value) 040. { 041. _interviews = value; 042. NotifyChanged("Interviews"); 043. } 044. } 045. } 046. 047. public SchedulingView() 048. { 049. InitializeComponent(); 050. 051. this.DataContext = this; 052. 053. this.Loaded += new RoutedEventHandler(SchedulingView_Loaded); 054. } 055. 056. void SchedulingView_Loaded(object sender, RoutedEventArgs e) 057. { 058. this.xJobsScheduler.AppointmentsSource = Interviews; 059. 060. context = new RecruitingContext(); 061. 062. LoadOperation loadop = context.Load(context.GetInterviewsQuery()); 063. loadop.Completed += new EventHandler(loadop_Completed); 064. 065. this._applicantList = new QueryableCollectionView(context.Applicants); 066. context.Load(context.GetApplicantsQuery()); 067. 068. this._jobsList = new QueryableCollectionView(context.JobPostings); 069. context.Load(context.GetJobPostingsQuery()); 070. } 071. 072. void loadop_Completed(object sender, EventArgs e) 073. { 074. LoadOperation loadop = sender as LoadOperation; 075. 076. _interviews.Clear(); 077. 078. foreach (var ent in loadop.Entities) 079. { 080. _interviews.Add(EntityToAppointment(ent as Interview)); 081. } 082. } 083. 084. private void xJobsScheduler_AppointmentAdded(object sender, Telerik.Windows.Controls.AppointmentAddedEventArgs e) 085. { 086. // now we have a new InterviewAppointment to add to our QCV :) 087. InterviewAppointment newInterview = e.Appointment as InterviewAppointment; 088. 089. this.context.Interviews.Add(AppointmentToEntity(newInterview)); 090. this.context.SubmitChanges((s) => 091. { 092. ActionHistory myAction = new ActionHistory(); 093. myAction.InterviewID = newInterview.InterviewID; 094. myAction.PostingID = newInterview.PostingID; 095. myAction.ApplicantID = newInterview.ApplicantID; 096. myAction.Description = String.Format("Interview with {0} has been created by {1}", newInterview.ApplicantID.ToString(), "default user"); 097. myAction.TimeStamp = DateTime.Now; 098. context.ActionHistories.Add(myAction); 099. context.SubmitChanges(); 100. } 101. , null); 102. } 103. 104. private void xJobsScheduler_AppointmentCreating(object sender, Telerik.Windows.Controls.AppointmentCreatingEventArgs e) 105. { 106. e.NewAppointment = new InterviewAppointment(); 107. } 108. 109. private void xJobsScheduler_AppointmentEdited(object sender, Telerik.Windows.Controls.AppointmentEditedEventArgs e) 110. { 111. Interview editedInterview = (from x in context.Interviews 112. where x.InterviewID == (e.Appointment as InterviewAppointment).InterviewID 113. select x).SingleOrDefault(); 114. 115. CopyAppointmentEdit(editedInterview, e.Appointment as InterviewAppointment); 116. 117. context.SubmitChanges((s) => 118. { 119. ActionHistory myAction = new ActionHistory(); 120. myAction.InterviewID = editedInterview.InterviewID; 121. myAction.PostingID = editedInterview.PostingID; 122. myAction.ApplicantID = editedInterview.ApplicantID; 123. myAction.Description = String.Format("Interview with {0} has been modified by {1}", editedInterview.ApplicantID.ToString(), "default user"); 124. myAction.TimeStamp = DateTime.Now; 125. context.ActionHistories.Add(myAction); 126. context.SubmitChanges(); 127. } 128. , null); 129. } 130. 131. private void xJobsScheduler_AppointmentDeleted(object sender, Telerik.Windows.Controls.AppointmentDeletedEventArgs e) 132. { 133. Interview deletedInterview = (from x in context.Interviews 134. where x.InterviewID == (e.Appointment as InterviewAppointment).InterviewID 135. select x).SingleOrDefault(); 136. 137. context.Interviews.Remove(deletedInterview); 138. context.SubmitChanges((s) => 139. { 140. ActionHistory myAction = new ActionHistory(); 141. myAction.InterviewID = deletedInterview.InterviewID; 142. myAction.PostingID = deletedInterview.PostingID; 143. myAction.ApplicantID = deletedInterview.ApplicantID; 144. myAction.Description = String.Format("Interview with {0} has been deleted by {1}", deletedInterview.ApplicantID.ToString(), "default user"); 145. myAction.TimeStamp = DateTime.Now; 146. context.ActionHistories.Add(myAction); 147. context.SubmitChanges(); 148. } 149. , null); 150. } 151. 152. #region Appointment Helpers :) 153. 154. public Interview AppointmentToEntity(InterviewAppointment ia) 155. { 156. Interview newInterview = new Interview(); 157. newInterview.Subject = ia.Subject; 158. newInterview.Body = ia.Body; 159. newInterview.Start = ia.Start; 160. newInterview.End = ia.End; 161. newInterview.ApplicantID = ia.ApplicantID; 162. newInterview.PostingID = ia.PostingID; 163. newInterview.InterviewID = ia.InterviewID; 164. 165. return newInterview; 166. } 167. 168. public InterviewAppointment EntityToAppointment(Interview ia) 169. { 170. InterviewAppointment newInterview = new InterviewAppointment(); 171. newInterview.Subject = ia.Subject; 172. newInterview.Body = ia.Body; 173. newInterview.Start = ia.Start; 174. newInterview.End = ia.End; 175. newInterview.ApplicantID = ia.ApplicantID; 176. newInterview.PostingID = ia.PostingID; 177. newInterview.InterviewID = ia.InterviewID; 178. 179. return newInterview; 180. } 181. 182. public void CopyAppointmentEdit(Interview entityInterview, InterviewAppointment appointmentInterview) 183. { 184. entityInterview.Subject = appointmentInterview.Subject; 185. entityInterview.Body = appointmentInterview.Body; 186. entityInterview.Start = appointmentInterview.Start; 187. entityInterview.End = appointmentInterview.End; 188. entityInterview.ApplicantID = appointmentInterview.ApplicantID; 189. entityInterview.PostingID = appointmentInterview.PostingID; 190. } 191. 192. #endregion 193. 194. #region INotifyPropertyChanged Members 195. 196. public event PropertyChangedEventHandler PropertyChanged; 197. 198. public void NotifyChanged(string propertyName) 199. { 200. if (string.IsNullOrEmpty(propertyName)) 201. throw new ArgumentException("propertyName"); 202. 203. PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 204. } 205. 206. #endregion 207.} Nice... right? :) One really important thing to note as well. See on line 51 where I set the DataContext before the Loaded event? This is super important, as if you don't have this set before the usercontrol is loaded, the DataContextProxy has no context to use and your EditAppointmentDialog Job/Applicant dropdowns will be blank and empty. Trust me on this, took a little bit of debugging to figure out that by setting the DataContext post-loaded would only lead to disaster and frustration. Otherwise, the only other real difference is that instead of sending an ActionHistory item through an event to get added to the database and saved, I do those right in the callback from submitting. The Result Again, I only have to post one picture because these bad boys used nearly identical code for both the MVVM and the code-behind views, so our end result is... So what have we learned here today? One, for the most part this MVVM thing is somewhat easy. Yeah, you sometimes have to write a bunch of extra code, but with the help of a few useful snippits you can turn the process into a pretty streamlined little workflow. Heck, this story gets even easier as you can see in this blog post by Michael Washington- specifically run a find on 'InvokeCommandAction' and you'll see the section regarding the command on TreeView in Blend 4. Brilliant! MVVM never looked so sweet! Otherwise, it is business as usual with RadScheduler for Silverlight whichever path you're choosing for your development. Between now and the next post, I'll be cleaning up styles a bit (those RadComboBoxes are a little too close to my labels!) and adding some to the RowDetailsViews for Applicants and Jobs, so you can see all the info for an appointment in the dropdown tab view. Otherwise, we're about ready to call a wrap on this oneDid you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

Read the article

Flex actionscript extending DateChooser, events in calendar

- by Nemi

ExtendedDateChooser class is great solution for simple event calendar used in my flex project. You can find it if google for "Adding-Calendar-Event-Entries-to-the-Flex-DateChooser-Component" with a link of updated solution in comments of the post. I posted files below. Problem in that calendar is text events are missing when month is changed. Is there updateCompleted event in Actionscript just like in dateChooser flex component? Like in: <mx:DateChooser id="dc" updateCompleted="goThroughDateChooserCalendarLayoutAndSetEventsInCalendarAgain()"</mx> When scroll event is added, which is available in Actionscript, it gets dispatched but after updateDisplayList() is fired, so didn't manage to answer, why are calendar events erased? Any suggestions, what to add in code, maybe override some function? ExtendedDateChooserClass.mxml <?xml version='1.0' encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mycomp="cyberslingers.controls.*" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ import cyberslingers.controls.ExtendedDateChooser; import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; import mx.controls.Alert; public var mycal:ExtendedDateChooser = new ExtendedDateChooser(); // collection to hold date, data and label [Bindable] public var dateCollection:XMLList = new XMLList(); private function init():void { eventList.send(); } private function readCollection(event:ResultEvent):void { dateCollection = event.result.calendarevent; //Position and size the calendar mycal.width = 400; mycal.height = 400; //Add the data from the XML file to the calendar mycal.dateCollection = dateCollection; //Add the calendar to the canvas this.addChild(mycal); } private function readFaultHandler(event:FaultEvent):void { Alert.show(event.fault.message, "Could not load data"); } ]]> </mx:Script> <mx:HTTPService id="eventList" url="data.xml" resultFormat="e4x" result="readCollection(event);" fault="readFaultHandler(event);"/> </mx:Application> ExtendedDateChooser.as package cyberslingers.controls { import flash.events.Event; import flash.events.TextEvent; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.controls.CalendarLayout; import mx.controls.DateChooser; import mx.core.UITextField; import mx.events.FlexEvent; public class ExtendedDateChooser extends DateChooser { public function ExtendedDateChooser() { super(); this.addEventListener(TextEvent.LINK, linkHandler); this.addEventListener(FlexEvent.CREATION_COMPLETE, addEvents); } //datasource public var dateCollection:XMLList = new XMLList(); //-------------------------------------- // Add events //-------------------------------------- /** * Loop through calendar control and add event links * @param e */ private function addEvents(e:Event):void { // loop through all the calendar children for(var i:uint = 0; i < this.numChildren; i++) { var calendarObj:Object = this.getChildAt(i); // find the CalendarLayout object if(calendarObj.hasOwnProperty("className")) { if(calendarObj.className == "CalendarLayout") { var cal:CalendarLayout = CalendarLayout(calendarObj); // loop through all the CalendarLayout children for(var j:uint = 0; j < cal.numChildren; j++) { var dateLabel:Object = cal.getChildAt(j); // find all UITextFields if(dateLabel.hasOwnProperty("text")) { var day:UITextField = UITextField(dateLabel); var dayHTML:String = day.text; day.selectable = true; day.wordWrap = true; day.multiline = true; day.styleName = "EventLabel"; //TODO: passing date as string is not ideal, tough to validate //Make sure to add one to month since it is zero based var eventArray:Array = dateHelper((this.displayedMonth+1) + "/" + dateLabel.text + "/" + this.displayedYear); if(eventArray.length > 0) { for(var k:uint = 0; k < eventArray.length; k++) { dayHTML += "<br><A HREF='event:" + eventArray[k].data + "' TARGET=''>" + eventArray[k].label + "</A>"; } day.htmlText = dayHTML; } } } } } } } //-------------------------------------- // Events //-------------------------------------- /** * Handle clicking text link * @param e */ private function linkHandler(event:TextEvent):void { // What do we want to do when user clicks an entry? Alert.show("selected: " + event.text); } //-------------------------------------- // Helpers //-------------------------------------- /** * Build array of events for current date * @param string - current date * */ private function dateHelper(renderedDate:String):Array { var result:Array = new Array(); for(var i:uint = 0; i < dateCollection.length(); i++) { if(dateCollection[i].date == renderedDate) { result.push(dateCollection[i]); } } return result; } } } data.xml <?xml version="1.0" encoding="utf-8"?> <rss> <calendarevent> <date>8/22/2009</date> <data>This is a test 1</data> <label>Stephens Test 1</label> </calendarevent> <calendarevent> <date>8/23/2009</date> <data>This is a test 2</data> <label>Stephens Test 2</label> </calendarevent> </rss>

Read the article

Event Handlers Not Getting Called? - wxWidgets

- by Alex

Hello all, I'm working on a program for my C++ programming class, using wxWidgets. I'm having a huge problem in that my event handlers (I assume) are not getting called, because when I click on the button to trigger the event, nothing happens. My question is: Can you help me find the problem and explain why they would not be getting called? The event handlers OnAbout and OnQuit are working, just not OnCompute or OnClear. I'm really frustrated as I can't figure this out. Thanks a bunch in advance! #include "wx/wx.h" #include "time.h" #include <string> using std::string; // create object of Time class Time first; class App: public wxApp { virtual bool OnInit(); }; class MainPanel : public wxPanel { public: // Constructor for panel class // Constructs my panel class // Params - wxWindow pointer // no return type // pre-conditions: none // post-conditions: none MainPanel(wxWindow* parent); // OnCompute is the event handler for the Compute button // params - none // preconditions - none // postconditions - tasks will have been carried otu successfully // returns void void OnCompute(wxCommandEvent& WXUNUSED(event)); // OnClear is the event handler for the Clear button // params - none // preconditions - none // postconditions - all text areas will be cleared of data // returns void void OnClear(wxCommandEvent& WXUNUSED(event)); // Destructor for panel class // params none // preconditions - none // postconditions - none // no return type ~MainPanel( ); private: wxStaticText *startLabel; wxStaticText *endLabel; wxStaticText *pCLabel; wxStaticText *newEndLabel; wxTextCtrl *start; wxTextCtrl *end; wxTextCtrl *pC; wxTextCtrl *newEnd; wxButton *compute; wxButton *clear; DECLARE_EVENT_TABLE() }; class MainFrame: public wxFrame { private: wxPanel *mainPanel; public: MainFrame(const wxString& title, const wxPoint& pos, const wxSize& size); void OnQuit(wxCommandEvent& event); void OnAbout(wxCommandEvent& event); ~MainFrame(); DECLARE_EVENT_TABLE() }; enum { ID_Quit = 1, ID_About, BUTTON_COMPUTE = 100, BUTTON_CLEAR = 200 }; IMPLEMENT_APP(App) BEGIN_EVENT_TABLE(MainFrame, wxFrame) EVT_MENU(ID_Quit, MainFrame::OnQuit) EVT_MENU(ID_About, MainFrame::OnAbout) END_EVENT_TABLE() BEGIN_EVENT_TABLE(MainPanel, wxPanel) EVT_MENU(BUTTON_COMPUTE, MainPanel::OnCompute) EVT_MENU(BUTTON_CLEAR, MainPanel::OnClear) END_EVENT_TABLE() bool App::OnInit() { MainFrame *frame = new MainFrame( _("Good Guys Delivery Time Calculator"), wxPoint(50, 50), wxSize(450,340) ); frame->Show(true); SetTopWindow(frame); return true; } MainPanel::MainPanel(wxWindow* parent) : wxPanel(parent) { startLabel = new wxStaticText(this, -1, "Start Time:", wxPoint(75, 35)); start = new wxTextCtrl(this, -1, "", wxPoint(135, 35), wxSize(40, 21)); endLabel = new wxStaticText(this, -1, "End Time:", wxPoint(200, 35)); end = new wxTextCtrl(this, -1, "", wxPoint(260, 35), wxSize(40, 21)); pCLabel = new wxStaticText(this, -1, "Percent Change:", wxPoint(170, 85)); pC = new wxTextCtrl(this, -1, "", wxPoint(260, 85), wxSize(40, 21)); newEndLabel = new wxStaticText(this, -1, "New End Time:", wxPoint(180, 130)); newEnd = new wxTextCtrl(this, -1, "", wxPoint(260, 130), wxSize(40, 21)); compute = new wxButton(this, BUTTON_COMPUTE, "Compute", wxPoint(135, 185), wxSize(75, 35)); clear = new wxButton(this, BUTTON_CLEAR, "Clear", wxPoint(230, 185), wxSize(75, 35)); } MainPanel::~MainPanel() {} MainFrame::MainFrame(const wxString& title, const wxPoint& pos, const wxSize& size) : wxFrame( NULL, -1, title, pos, size ) { mainPanel = new MainPanel(this); wxMenu *menuFile = new wxMenu; menuFile->Append( ID_About, _("&About...") ); menuFile->AppendSeparator(); menuFile->Append( ID_Quit, _("E&xit") ); wxMenuBar *menuBar = new wxMenuBar; menuBar->Append( menuFile, _("&File") ); SetMenuBar( menuBar ); CreateStatusBar(); SetStatusText( _("Hi") ); } MainFrame::~MainFrame() {} void MainFrame::OnQuit(wxCommandEvent& WXUNUSED(event)) { Close(TRUE); } void MainFrame::OnAbout(wxCommandEvent& WXUNUSED(event)) { wxMessageBox( _("Alex Olson\nProject 11"), _("About"), wxOK | wxICON_INFORMATION, this); } void MainPanel::OnCompute(wxCommandEvent& WXUNUSED(event)) { int startT; int endT; int newEndT; double tD; wxString startTString = start->GetValue(); wxString endTString = end->GetValue(); startT = wxAtoi(startTString); endT = wxAtoi(endTString); pC->GetValue().ToDouble(&tD); first.SetStartTime(startT); first.SetEndTime(endT); first.SetTimeDiff(tD); try { first.ValidateData(); newEndT = first.ComputeEndTime(); *newEnd << newEndT; } catch (BaseException& e) { wxMessageBox(_(e.GetMessage()), _("Something Went Wrong!"), wxOK | wxICON_INFORMATION, this); } } void MainPanel::OnClear(wxCommandEvent& WXUNUSED(event)) { start->Clear(); end->Clear(); pC->Clear(); newEnd->Clear(); }

Read the article

C#/.NET Little Wonders: The Joy of Anonymous Types

- by James Michael Hare

Once again, in this series of posts I look at the parts of the .NET Framework that may seem trivial, but can help improve your code by making it easier to write and maintain. The index of all my past little wonders posts can be found here. In the .NET 3 Framework, Microsoft introduced the concept of anonymous types, which provide a way to create a quick, compiler-generated types at the point of instantiation. These may seem trivial, but are very handy for concisely creating lightweight, strongly-typed objects containing only read-only properties that can be used within a given scope. Creating an Anonymous Type In short, an anonymous type is a reference type that derives directly from object and is defined by its set of properties base on their names, number, types, and order given at initialization. In addition to just holding these properties, it is also given appropriate overridden implementations for Equals() and GetHashCode() that take into account all of the properties to correctly perform property comparisons and hashing. Also overridden is an implementation of ToString() which makes it easy to display the contents of an anonymous type instance in a fairly concise manner. To construct an anonymous type instance, you use basically the same initialization syntax as with a regular type. So, for example, if we wanted to create an anonymous type to represent a particular point, we could do this: 1: var point = new { X = 13, Y = 7 }; Note the similarity between anonymous type initialization and regular initialization. The main difference is that the compiler generates the type name and the properties (as readonly) based on the names and order provided, and inferring their types from the expressions they are assigned to. It is key to remember that all of those factors (number, names, types, order of properties) determine the anonymous type. This is important, because while these two instances share the same anonymous type: 1: // same names, types, and order 2: var point1 = new { X = 13, Y = 7 }; 3: var point2 = new { X = 5, Y = 0 }; These similar ones do not: 1: var point3 = new { Y = 3, X = 5 }; // different order 2: var point4 = new { X = 3, Y = 5.0 }; // different type for Y 3: var point5 = new {MyX = 3, MyY = 5 }; // different names 4: var point6 = new { X = 1, Y = 2, Z = 3 }; // different count Limitations on Property Initialization Expressions The expression for a property in an anonymous type initialization cannot be null (though it can evaluate to null) or an anonymous function. For example, the following are illegal: 1: // Null can't be used directly. Null reference of what type? 2: var cantUseNull = new { Value = null }; 3: 4: // Anonymous methods cannot be used. 5: var cantUseAnonymousFxn = new { Value = () => Console.WriteLine(“Can’t.”) }; Note that the restriction on null is just that you can’t use it directly as the expression, because otherwise how would it be able to determine the type? You can, however, use it indirectly assigning a null expression such as a typed variable with the value null, or by casting null to a specific type: 1: string str = null; 2: var fineIndirectly = new { Value = str }; 3: var fineCast = new { Value = (string)null }; All of the examples above name the properties explicitly, but you can also implicitly name properties if they are being set from a property, field, or variable. In these cases, when a field, property, or variable is used alone, and you don’t specify a property name assigned to it, the new property will have the same name. For example: 1: int variable = 42; 2: 3: // creates two properties named varriable and Now 4: var implicitProperties = new { variable, DateTime.Now }; Is the same type as: 1: var explicitProperties = new { variable = variable, Now = DateTime.Now }; But this only works if you are using an existing field, variable, or property directly as the expression. If you use a more complex expression then the name cannot be inferred: 1: // can't infer the name variable from variable * 2, must name explicitly 2: var wontWork = new { variable * 2, DateTime.Now }; In the example above, since we typed variable * 2, it is no longer just a variable and thus we would have to assign the property a name explicitly. ToString() on Anonymous Types One of the more trivial overrides that an anonymous type provides you is a ToString() method that prints the value of the anonymous type instance in much the same format as it was initialized (except actual values instead of expressions as appropriate of course). For example, if you had: 1: var point = new { X = 13, Y = 42 }; And then print it out: 1: Console.WriteLine(point.ToString()); You will get: 1: { X = 13, Y = 42 } While this isn’t necessarily the most stunning feature of anonymous types, it can be handy for debugging or logging values in a fairly easy to read format. Comparing Anonymous Type Instances Because anonymous types automatically create appropriate overrides of Equals() and GetHashCode() based on the underlying properties, we can reliably compare two instances or get hash codes. For example, if we had the following 3 points: 1: var point1 = new { X = 1, Y = 2 }; 2: var point2 = new { X = 1, Y = 2 }; 3: var point3 = new { Y = 2, X = 1 }; If we compare point1 and point2 we’ll see that Equals() returns true because they overridden version of Equals() sees that the types are the same (same number, names, types, and order of properties) and that the values are the same. In addition, because all equal objects should have the same hash code, we’ll see that the hash codes evaluate to the same as well: 1: // true, same type, same values 2: Console.WriteLine(point1.Equals(point2)); 3: 4: // true, equal anonymous type instances always have same hash code 5: Console.WriteLine(point1.GetHashCode() == point2.GetHashCode()); However, if we compare point2 and point3 we get false. Even though the names, types, and values of the properties are the same, the order is not, thus they are two different types and cannot be compared (and thus return false). And, since they are not equal objects (even though they have the same value) there is a good chance their hash codes are different as well (though not guaranteed): 1: // false, different types 2: Console.WriteLine(point2.Equals(point3)); 3: 4: // quite possibly false (was false on my machine) 5: Console.WriteLine(point2.GetHashCode() == point3.GetHashCode()); Using Anonymous Types Now that we’ve created instances of anonymous types, let’s actually use them. The property names (whether implicit or explicit) are used to access the individual properties of the anonymous type. The main thing, once again, to keep in mind is that the properties are readonly, so you cannot assign the properties a new value (note: this does not mean that instances referred to by a property are immutable – for more information check out C#/.NET Fundamentals: Returning Data Immutably in a Mutable World). Thus, if we have the following anonymous type instance: 1: var point = new { X = 13, Y = 42 }; We can get the properties as you’d expect: 1: Console.WriteLine(“The point is: ({0},{1})”, point.X, point.Y); But we cannot alter the property values: 1: // compiler error, properties are readonly 2: point.X = 99; Further, since the anonymous type name is only known by the compiler, there is no easy way to pass anonymous type instances outside of a given scope. The only real choices are to pass them as object or dynamic. But really that is not the intention of using anonymous types. If you find yourself needing to pass an anonymous type outside of a given scope, you should really consider making a POCO (Plain Old CLR Type – i.e. a class that contains just properties to hold data with little/no business logic) instead. Given that, why use them at all? Couldn’t you always just create a POCO to represent every anonymous type you needed? Sure you could, but then you might litter your solution with many small POCO classes that have very localized uses. It turns out this is the key to when to use anonymous types to your advantage: when you just need a lightweight type in a local context to store intermediate results, consider an anonymous type – but when that result is more long-lived and used outside of the current scope, consider a POCO instead. So what do we mean by intermediate results in a local context? Well, a classic example would be filtering down results from a LINQ expression. For example, let’s say we had a List<Transaction>, where Transaction is defined something like: 1: public class Transaction 2: { 3: public string UserId { get; set; } 4: public DateTime At { get; set; } 5: public decimal Amount { get; set; } 6: // … 7: } And let’s say we had this data in our List<Transaction>: 1: var transactions = new List<Transaction> 2: { 3: new Transaction { UserId = "Jim", At = DateTime.Now, Amount = 2200.00m }, 4: new Transaction { UserId = "Jim", At = DateTime.Now, Amount = -1100.00m }, 5: new Transaction { UserId = "Jim", At = DateTime.Now.AddDays(-1), Amount = 900.00m }, 6: new Transaction { UserId = "John", At = DateTime.Now.AddDays(-2), Amount = 300.00m }, 7: new Transaction { UserId = "John", At = DateTime.Now, Amount = -10.00m }, 8: new Transaction { UserId = "Jane", At = DateTime.Now, Amount = 200.00m }, 9: new Transaction { UserId = "Jane", At = DateTime.Now, Amount = -50.00m }, 10: new Transaction { UserId = "Jaime", At = DateTime.Now.AddDays(-3), Amount = -100.00m }, 11: new Transaction { UserId = "Jaime", At = DateTime.Now.AddDays(-3), Amount = 300.00m }, 12: }; So let’s say we wanted to get the transactions for each day for each user. That is, for each day we’d want to see the transactions each user performed. We could do this very simply with a nice LINQ expression, without the need of creating any POCOs: 1: // group the transactions based on an anonymous type with properties UserId and Date: 2: byUserAndDay = transactions 3: .GroupBy(tx => new { tx.UserId, tx.At.Date }) 4: .OrderBy(grp => grp.Key.Date) 5: .ThenBy(grp => grp.Key.UserId); Now, those of you who have attempted to use custom classes as a grouping type before (such as GroupBy(), Distinct(), etc.) may have discovered the hard way that LINQ gets a lot of its speed by utilizing not on Equals(), but also GetHashCode() on the type you are grouping by. Thus, when you use custom types for these purposes, you generally end up having to write custom Equals() and GetHashCode() implementations or you won’t get the results you were expecting (the default implementations of Equals() and GetHashCode() are reference equality and reference identity based respectively). As we said before, it turns out that anonymous types already do these critical overrides for you. This makes them even more convenient to use! Instead of creating a small POCO to handle this grouping, and then having to implement a custom Equals() and GetHashCode() every time, we can just take advantage of the fact that anonymous types automatically override these methods with appropriate implementations that take into account the values of all of the properties. Now, we can look at our results: 1: foreach (var group in byUserAndDay) 2: { 3: // the group’s Key is an instance of our anonymous type 4: Console.WriteLine("{0} on {1:MM/dd/yyyy} did:", group.Key.UserId, group.Key.Date); 5: 6: // each grouping contains a sequence of the items. 7: foreach (var tx in group) 8: { 9: Console.WriteLine("\t{0}", tx.Amount); 10: } 11: } And see: 1: Jaime on 06/18/2012 did: 2: -100.00 3: 300.00 4: 5: John on 06/19/2012 did: 6: 300.00 7: 8: Jim on 06/20/2012 did: 9: 900.00 10: 11: Jane on 06/21/2012 did: 12: 200.00 13: -50.00 14: 15: Jim on 06/21/2012 did: 16: 2200.00 17: -1100.00 18: 19: John on 06/21/2012 did: 20: -10.00 Again, sure we could have just built a POCO to do this, given it an appropriate Equals() and GetHashCode() method, but that would have bloated our code with so many extra lines and been more difficult to maintain if the properties change. Summary Anonymous types are one of those Little Wonders of the .NET language that are perfect at exactly that time when you need a temporary type to hold a set of properties together for an intermediate result. While they are not very useful beyond the scope in which they are defined, they are excellent in LINQ expressions as a way to create and us intermediary values for further expressions and analysis. Anonymous types are defined by the compiler based on the number, type, names, and order of properties created, and they automatically implement appropriate Equals() and GetHashCode() overrides (as well as ToString()) which makes them ideal for LINQ expressions where you need to create a set of properties to group, evaluate, etc. Technorati Tags: C#,CSharp,.NET,Little Wonders,Anonymous Types,LINQ

Read the article

The Windows Store... why did I sign up with this mess again?

- by FransBouma

Yesterday, Microsoft revealed that the Windows Store is now open to all developers in a wide range of countries and locations. For the people who think "wtf is the 'Windows Store'?", it's the central place where Windows 8 users will be able to find, download and purchase applications (or as we now have to say to not look like a computer illiterate: <accent style="Kentucky">aaaaappss</accent>) for Windows 8. As this is the store which is integrated into Windows 8, it's an interesting place for ISVs, as potential customers might very well look there first. This of course isn't true for all kinds of software, and developer tools in general aren't the kind of applications most users will download from the Windows store, but a presence there can't hurt. Now, this Windows Store hosts two kinds of applications: 'Metro-style' applications and 'Desktop' applications. The 'Metro-style' applications are applications created for the new 'Metro' UI which is present on Windows 8 desktop and Windows RT (the single color/big font fingerpaint-oriented UI). 'Desktop' applications are the applications we all run and use on Windows today. Our software are desktop applications. The Windows Store hosts all Metro-style applications locally in the store and handles the payment for these applications. This means you upload your application (sorry, 'app') to the store, jump through a lot of hoops, Microsoft verifies that your application is not violating a tremendous long list of rules and after everything is OK, it's published and hopefully you get customers and thus earn money. Money which Microsoft will pay you on a regular basis after customers buy your application. Desktop applications are not following this path however. Desktop applications aren't hosted by the Windows Store. Instead, the Windows Store more or less hosts a page with the application's information and where to get the goods. I.o.w.: it's nothing more than a product's Facebook page. Microsoft will simply redirect a visitor of the Windows Store to your website and the visitor will then use your site's system to purchase and download the application. This last bit of information is very important. So, this morning I started with fresh energy to register our company 'Solutions Design bv' at the Windows Store and our two applications, LLBLGen Pro and ORM Profiler. First I went to the Windows Store dashboard page. If you don't have an account, you have to log in or sign up if you don't have a live account. I signed in with my live account. After that, it greeted me with a page where I had to fill in a code which was mailed to me. My local mail server polls every several minutes for email so I had to kick it to get it immediately. I grabbed the code from the email and I was presented with a multi-step process to register myself as a company or as an individual. In red I was warned that this choice was permanent and not changeable. I chuckled: Microsoft apparently stores its data on paper, not in digital form. I chose 'company' and was presented with a lengthy form to fill out. On the form there were two strange remarks: Per company there can just be 1 (one, uno, not zero, not two or more) registered developer, and only that developer is able to upload stuff to the store. I have no idea how this works with large companies, oh the overhead nightmares... "Sorry, but John, our registered developer with the Windows Store is on holiday for 3 months, backpacking through Australia, no, he's not reachable at this point. M'yeah, sorry bud. Hey, did you fill in those TPS reports yesterday?" A separate Approver has to be specified, which has to be a different person than the registered developer. Apparently to Microsoft a company with just 1 person is not a company. Luckily we're with two people! *pfew*, dodged that one, otherwise I would be stuck forever: the choice I already made was not reversible! After I had filled out the form and it was all well and good and accepted by the Microsoft lackey who had to write it all down in some paper notebook ("Hey, be warned! It's a permanent choice! Written down in ink, can't be changed!"), I was presented with the question how I wanted to pay for all this. "Pay for what?" I wondered. Must be the paper they were scribbling the information on, I concluded. After all, there's a financial crisis going on! How could I forget! Silly me. "Ok fair enough". The price was 75 Euros, not the end of the world. I could only pay by credit card, so it was accepted quickly. Or so I thought. You see, Microsoft has a different idea about CC payments. In the normal world, you type in your CC number, some date, a name and a security code and that's it. But Microsoft wants to verify this even more. They want to make a verification purchase of a very small amount and are doing that with a special code in the description. You then have to type in that code in a special form in the Windows Store dashboard and after that you're verified. Of course they'll refund the small amount they pull from your card. Sounds simple, right? Well... no. The problem starts with the fact that I can't see the CC activity on some website: I have a bank issued CC card. I get the CC activity once a month on a piece of paper sent to me. The bank's online website doesn't show them. So it's possible I have to wait for this code till October 12th. One month. "So what, I'm not going to use it anyway, Desktop applications don't use the payment system", I thought. "Haha, you're so naive, dear developer!" Microsoft won't allow you to publish any applications till this verification is done. So no application publishing for a month. Wouldn't it be nice if things were, you know, digital, so things got done instantly? But of course, that lackey who scribbled everything in the Big Windows Store Registration Book isn't that quick. Can't blame him though. He's just doing his job. Now, after the payment was done, I was presented with a page which tells me Microsoft is going to use a third party company called 'Symantec', which will verify my identity again. The page explains to me that this could be done through email or phone and that they'll contact the Approver to verify my identity. "Phone?", I thought... that's a little drastic for a developer account to publish a single page of information about an external hosted software product, isn't it? On Facebook I just added a page, done. And paying you, Microsoft, took less information: you were happy to take my money before my identity was even 'verified' by this 3rd party's minions! "Double standards!", I roared. No-one cared. But it's the thought of getting it off your chest, you know. Luckily for me, everyone at Symantec was asleep when I was registering so they went for the fallback option in case phone calls were not possible: my Approver received an email. Imagine you have to explain the idiot web of security theater I was caught in to someone else who then has to reply a random person over the internet that I indeed was who I said I was. As she's a true sweetheart, she gave me the benefit of the doubt and assured that for now, I was who I said I was. Remember, this is for a desktop application, which is only a link to a website, some pictures and a piece of text. No file hosting, no payment processing, nothing, just a single page. Yeah, I also thought I was crazy. But we're not at the end of this quest yet. I clicked around in the confusing menus of the Windows Store dashboard and found the 'Desktop' section. I get a helpful screen with a warning in red that it can't find any certified 'apps'. True, I'm just getting started, buddy. I see a link: "Check the Windows apps you submitted for certification". Well, I haven't submitted anything, but let's see where it brings me. Oh the thrill of adventure! I click the link and I end up on this site: the hardware/desktop dashboard account registration. "Erm... but I just registered...", I mumbled to no-one in particular. Apparently for desktop registration / verification I have to register again, it tells me. But not only that, the desktop application has to be signed with a certificate. And not just some random el-cheapo certificate you can get at any mall's discount store. No, this certificate is special. It's precious. This certificate, the 'Microsoft Authenticode' Digital Certificate, is the only certificate that's acceptable, and jolly, it can be purchased from VeriSign for the price of only ... $99.-, but be quick, because this is a limited time offer! After that it's, I kid you not, $499.-. 500 dollars for a certificate to sign an executable. But, I do feel special, I got a special price. Only for me! I'm glowing. Not for long though. Here I started to wonder, what the benefit of it all was. I now again had to pay money for a shiny certificate which will add 'Solutions Design bv' to our installer as the publisher instead of 'unknown', while our customers download the file from our website. Not only that, but this was all about a Desktop application, which wasn't hosted by Microsoft. They only link to it. And make no mistake. These prices aren't single payments. Every year these have to be renewed. Like a membership of an exclusive club: you're special and privileged, but only if you cough up the dough. To give you an example how silly this all is: I added LLBLGen Pro and ORM Profiler to the Visual Studio Gallery some time ago. It's the same thing: it's a central place where one can find software which adds to / extends / works with Visual Studio. I could simply create the pages, add the information and they show up inside Visual Studio. No files are hosted at Microsoft, they're downloaded from our website. Exactly the same system. As I have to wait for the CC transcripts to arrive anyway, I can't proceed with publishing in this new shiny store. After the verification is complete I have to wait for verification of my software by Microsoft. Even Desktop applications need to be verified using a long list of rules which are mainly focused on Metro-style applications. Even while they're not hosted by Microsoft. I wonder what they'll find. "Your application wasn't approved. It violates rule 14 X sub D: it provides more value than our own competing framework". While I was writing this post, I tried to check something in the Windows Store Dashboard, to see whether I remembered it correctly. I was presented again with the question, after logging in with my live account, to enter the code that was just mailed to me. Not the previous code, a brand new one. Again I had to kick my mail server to pull the email to proceed. This was it. This 'experience' is so beyond miserable, I'm afraid I have to say goodbye for now to the 'Windows Store'. It's simply not worth my time. Now, about live accounts. You might know this: live accounts are tied to everything you do with Microsoft. So if you have an MSDN subscription, e.g. the one which costs over $5000.-, it's tied to this same live account. But the fun thing is, you can login with your live account to the MSDN subscriptions with just the account id and password. No additional code is mailed to you. While it gives you access to all Microsoft software available, including your licenses. Why the draconian security theater with this Windows Store, while all I want is to publish some desktop applications while on other Microsoft sites it's OK to simply sign in with your live account: no codes needed, no verification and no certificates? Microsoft, one thing you need with this store and that's: apps. Apps, apps, apps, apps, aaaaaaaaapps. Sorry, my bad, got carried away. I just can't stand the word 'app'. This store's shelves have to be filled to the brim with goods. But instead of being welcomed into the store with open arms, I have to fight an uphill battle with an endless list of rules and bullshit to earn the privilege to publish in this shiny store. As if I have to be thrilled to be one of the exclusive club called 'Windows Store Publishers'. As if Microsoft doesn't want it to succeed. Craig Stuntz sent me a link to an old blog post of his regarding code signing and uploading to Microsoft's old mobile store from back in the WinMo5 days: http://blogs.teamb.com/craigstuntz/2006/10/11/28357/. Good read and good background info about how little things changed over the years. I hope this helps Microsoft make things more clearer and smoother and also helps ISVs with their decision whether to go with the Windows Store scheme or ignore it. For now, I don't see the advantage of publishing there, especially not with the nonsense rules Microsoft cooked up. Perhaps it changes in the future, who knows.

Read the article

WCF- Large Data

- by Pinu

I have a WCF Web Service with basicHTTPBinding , the server side the transfer mode is streamedRequest as the client will be sending us large file in the form of memory stream. But on client side when i use transfer mode as streamedRequest its giving me a this errro "The remote server returned an error: (400) Bad Request" And when i look in to trace information , i see this as the error message Exception: There is a problem with the XML that was received from the network. See inner exception for more details. InnerException: The body of the message cannot be read because it is empty. I am able to send up to 5MB of data using trasfermode as buffered , but it will effect the performance of my web service in the long run , if there are many clients who are trying to access the service in buffered transfer mode. SmartConnect.Service1Client Serv = new SmartConnectClient.SmartConnect.Service1Client(); SmartConnect.OrderCertMailResponse OrderCert = new SmartConnectClient.SmartConnect.OrderCertMailResponse(); OrderCert.UserID = "abcd"; OrderCert.Password = "7a80f6623"; OrderCert.SoftwareKey = "90af1"; string applicationDirectory = @"\\inid\utty\Bran"; byte[] CertMail = File.ReadAllBytes(applicationDirectory + @"\5mb_test.zip"); MemoryStream str = new MemoryStream(CertMail); //OrderCert.Color = true; //OrderCert.Duplex = false; //OrderCert.FirstClass = true; //OrderCert.File = str; //OrderCert.ReturnAddress1 = "Test123"; //OrderCert.ReturnAddress2 = "Test123"; //OrderCert.ReturnAddress3 = "Test123"; //OrderCert.ReturnAddress4 = "Test123"; OrderCert.File = str; //string OrderNumber = ""; //string Password = OrderCert.Password; //int ReturnCode = 0; //string ReturnMessage = ""; //string SoftwareKey = OrderCert.SoftwareKey; //string UserID = OrderCert.UserID; //OrderCert.File = str; MemoryStream FileStr = str; Serv.OrderCertMail(OrderCert); // Serv.OrderCertMail(ref OrderNumber, ref Password, ref ReturnCode, ref ReturnMessage, ref SoftwareKey, ref UserID, ref FileStr ); lblON.Text = OrderCert.OrderNumber; Serv.Close(); // My Web Service - Service Contract [OperationContract] OrderCertMailResponse OrderCertMail(OrderCertMailResponse OrderCertMail); [MessageContract] public class OrderCertMailResponse { string userID = ""; string password = ""; string softwareID = ""; MemoryStream file = null; //MemoryStream str = null; [MessageHeader] //[DataMember] public string UserID { get { return userID; } set { userID = value; } } [MessageHeader] //[DataMember] public string Password { get { return password; } set { password = value; } } [MessageHeader] //[DataMember] public string SoftwareKey { get { return softwareID; } set { softwareID = value; } } [MessageBodyMember] // [DataMember] public MemoryStream File { get { return file; } set { file = value; } } [MessageHeader] //[DataMember] public string ReturnMessage; [MessageHeader] //[DataMember] public int ReturnCode; [MessageHeader] public string OrderNumber; //// Control file fields //[MessageHeader] ////[DataMember] //public string ReturnAddress1; //[MessageHeader] ////[DataMember] //public string ReturnAddress2; //[MessageHeader] ////[DataMember] //public string ReturnAddress3; //[MessageHeader] ////[DataMember] //public string ReturnAddress4; //[MessageHeader] ////[DataMember] //public bool FirstClass; //[MessageHeader] ////[DataMember] //public bool Color; //[MessageHeader] ////[DataMember] //public bool Duplex; } [ServiceBehavior(IncludeExceptionDetailInFaults = true)] public class Service1 : IService1 { public OrderCertMailResponse OrderCertMail(OrderCertMailResponse OrderCertMail) { OrderService CertOrder = new OrderService(); ClientUserInfo Info = new ClientUserInfo(); ControlFileInfo Control = new ControlFileInfo(); //Info.Password = "f2496623"; // hard coded password for development testing purposes //Info.SoftwareKey = "6dbb71"; // hard coded software key this is a developement software key //Info.UserName = "sdfs"; // hard coded UserID - for testing Info.UserName = OrderCertMail.UserID.ToString(); Info.Password = OrderCertMail.Password.ToString(); Info.SoftwareKey = OrderCertMail.SoftwareKey.ToString(); //Control.ReturnAddress1 = OrderCertMail.ReturnAddress1; //Control.ReturnAddress2 = OrderCertMail.ReturnAddress2; //Control.ReturnAddress3 = OrderCertMail.ReturnAddress3; //Control.ReturnAddress4 = OrderCertMail.ReturnAddress4; //Control.CertMailFirstClass = OrderCertMail.FirstClass; //Control.CertMailColor = OrderCertMail.Color; //Control.CertMailDuplex = OrderCertMail.Duplex; //byte[] CertFile = new byte[0]; //byte[] CertFile = null; //string applicationDirectory = @"\\intrepid\utility\Bryan"; // byte[] CertMailFile = File.ReadAllBytes(applicationDirectory + @"\3mb_test.zip"); //MemoryStream str = new MemoryStream(CertMailFile); OrderCertMailResponseClass OrderCertResponse = CertOrder.OrderCertmail(Info,Control,OrderCertMail.File); OrderCertMail.ReturnMessage = OrderCertResponse.ReturnMessage.ToString(); OrderCertMail.ReturnCode = Convert.ToInt32(OrderCertResponse.ReturnCode.ToString()); OrderCertMail.OrderNumber = OrderCertResponse.OrderNumber; return OrderCertMail; }

Read the article

Problem with room/screen/menu controller in python game: old rooms are not removed from memory

- by Jordan Magnuson

I'm literally banging my head against a wall here (as in, yes, physically, at my current location, I am damaging my cranium). Basically, I've got a Python/Pygame game with some typical game "rooms", or "screens." EG title screen, high scores screen, and the actual game room. Something bad is happening when I switch between rooms: the old room (and its various items) are not removed from memory, or from my event listener. Not only that, but every time I go back to a certain room, my number of event listeners increases, as well as the RAM being consumed! (So if I go back and forth between the title screen and the "game room", for instance, the number of event listeners and the memory usage just keep going up and up. The main issue is that all the event listeners start to add up and really drain the CPU. I'm new to Python, and don't know if I'm doing something obviously wrong here, or what. I will love you so much if you can help me with this! Below is the relevant source code. Complete source code at http://www.necessarygames.com/my_games/betraveled/betraveled_src0328.zip MAIN.PY class RoomController(object): """Controls which room is currently active (eg Title Screen)""" def __init__(self, screen, ev_manager): self.room = None self.screen = screen self.ev_manager = ev_manager self.ev_manager.register_listener(self) self.room = self.set_room(config.room) def set_room(self, room_const): #Unregister old room from ev_manager if self.room: self.room.ev_manager.unregister_listener(self.room) self.room = None #Set new room based on const if room_const == config.TITLE_SCREEN: return rooms.TitleScreen(self.screen, self.ev_manager) elif room_const == config.GAME_MODE_ROOM: return rooms.GameModeRoom(self.screen, self.ev_manager) elif room_const == config.GAME_ROOM: return rooms.GameRoom(self.screen, self.ev_manager) elif room_const == config.HIGH_SCORES_ROOM: return rooms.HighScoresRoom(self.screen, self.ev_manager) def notify(self, event): if isinstance(event, ChangeRoomRequest): if event.game_mode: config.game_mode = event.game_mode self.room = self.set_room(event.new_room) #Run game def main(): pygame.init() screen = pygame.display.set_mode(config.screen_size) ev_manager = EventManager() spinner = CPUSpinnerController(ev_manager) room_controller = RoomController(screen, ev_manager) pygame_event_controller = PyGameEventController(ev_manager) spinner.run() EVENT_MANAGER.PY class EventManager: #This object is responsible for coordinating most communication #between the Model, View, and Controller. def __init__(self): from weakref import WeakKeyDictionary self.last_listeners = {} self.listeners = WeakKeyDictionary() self.eventQueue= [] self.gui_app = None #---------------------------------------------------------------------- def register_listener(self, listener): self.listeners[listener] = 1 #---------------------------------------------------------------------- def unregister_listener(self, listener): if listener in self.listeners: del self.listeners[listener] #---------------------------------------------------------------------- def clear(self): del self.listeners[:] #---------------------------------------------------------------------- def post(self, event): # if isinstance(event, MouseButtonLeftEvent): # debug(event.name) #NOTE: copying the list like this before iterating over it, EVERY tick, is highly inefficient, #but currently has to be done because of how new listeners are added to the queue while it is running #(eg when popping cards from a deck). Should be changed. See: http://dr0id.homepage.bluewin.ch/pygame_tutorial08.html #and search for "Watch the iteration" print 'Number of listeners: ' + str(len(self.listeners)) for listener in list(self.listeners): #NOTE: If the weakref has died, it will be #automatically removed, so we don't have #to worry about it. listener.notify(event) def notify(self, event): pass #------------------------------------------------------------------------------ class PyGameEventController: """...""" def __init__(self, ev_manager): self.ev_manager = ev_manager self.ev_manager.register_listener(self) self.input_freeze = False #---------------------------------------------------------------------- def notify(self, incoming_event): if isinstance(incoming_event, UserInputFreeze): self.input_freeze = True elif isinstance(incoming_event, UserInputUnFreeze): self.input_freeze = False elif isinstance(incoming_event, TickEvent) or isinstance(incoming_event, BoardCreationTick): #Share some time with other processes, so we don't hog the cpu pygame.time.wait(5) #Handle Pygame Events for event in pygame.event.get(): #If this event manager has an associated PGU GUI app, notify it of the event if self.ev_manager.gui_app: self.ev_manager.gui_app.event(event) #Standard event handling for everything else ev = None if event.type == QUIT: ev = QuitEvent() elif event.type == pygame.MOUSEBUTTONDOWN and not self.input_freeze: if event.button == 1: #Button 1 pos = pygame.mouse.get_pos() ev = MouseButtonLeftEvent(pos) elif event.type == pygame.MOUSEBUTTONDOWN and not self.input_freeze: if event.button == 2: #Button 2 pos = pygame.mouse.get_pos() ev = MouseButtonRightEvent(pos) elif event.type == pygame.MOUSEBUTTONUP and not self.input_freeze: if event.button == 2: #Button 2 Release pos = pygame.mouse.get_pos() ev = MouseButtonRightReleaseEvent(pos) elif event.type == pygame.MOUSEMOTION: pos = pygame.mouse.get_pos() ev = MouseMoveEvent(pos) #Post event to event manager if ev: self.ev_manager.post(ev) # elif isinstance(event, BoardCreationTick): # #Share some time with other processes, so we don't hog the cpu # pygame.time.wait(5) # # #If this event manager has an associated PGU GUI app, notify it of the event # if self.ev_manager.gui_app: # self.ev_manager.gui_app.event(event) #------------------------------------------------------------------------------ class CPUSpinnerController: def __init__(self, ev_manager): self.ev_manager = ev_manager self.ev_manager.register_listener(self) self.clock = pygame.time.Clock() self.cumu_time = 0 self.keep_going = True #---------------------------------------------------------------------- def run(self): if not self.keep_going: raise Exception('dead spinner') while self.keep_going: time_passed = self.clock.tick() fps = self.clock.get_fps() self.cumu_time += time_passed self.ev_manager.post(TickEvent(time_passed, fps)) if self.cumu_time >= 1000: self.cumu_time = 0 self.ev_manager.post(SecondEvent(fps=fps)) pygame.quit() #---------------------------------------------------------------------- def notify(self, event): if isinstance(event, QuitEvent): #this will stop the while loop from running self.keep_going = False EXAMPLE CLASS USING EVENT MANAGER class Timer(object): def __init__(self, ev_manager, time_left): self.ev_manager = ev_manager self.ev_manager.register_listener(self) self.time_left = time_left self.paused = False def __repr__(self): return str(self.time_left) def pause(self): self.paused = True def unpause(self): self.paused = False def notify(self, event): #Pause Event if isinstance(event, Pause): self.pause() #Unpause Event elif isinstance(event, Unpause): self.unpause() #Second Event elif isinstance(event, SecondEvent): if not self.paused: self.time_left -= 1

Read the article

Should this immutable struct be a mutable class?

- by ChaosPandion

I showed this struct to a fellow programmer and they felt that it should be a mutable class. They felt it is inconvenient not to have null references and the ability to alter the object as required. I would really like to know if there are any other reasons to make this a mutable class. [Serializable] public struct PhoneNumber : ICloneable, IEquatable<PhoneNumber> { private const int AreaCodeShift = 54; private const int CentralOfficeCodeShift = 44; private const int SubscriberNumberShift = 30; private const int CentralOfficeCodeMask = 0x000003FF; private const int SubscriberNumberMask = 0x00003FFF; private const int ExtensionMask = 0x3FFFFFFF; private readonly ulong value; public int AreaCode { get { return UnmaskAreaCode(value); } } public int CentralOfficeCode { get { return UnmaskCentralOfficeCode(value); } } public int SubscriberNumber { get { return UnmaskSubscriberNumber(value); } } public int Extension { get { return UnmaskExtension(value); } } public PhoneNumber(ulong value) : this(UnmaskAreaCode(value), UnmaskCentralOfficeCode(value), UnmaskSubscriberNumber(value), UnmaskExtension(value), true) { } public PhoneNumber(int areaCode, int centralOfficeCode, int subscriberNumber) : this(areaCode, centralOfficeCode, subscriberNumber, 0, true) { } public PhoneNumber(int areaCode, int centralOfficeCode, int subscriberNumber, int extension) : this(areaCode, centralOfficeCode, subscriberNumber, extension, true) { } private PhoneNumber(int areaCode, int centralOfficeCode, int subscriberNumber, int extension, bool throwException) { value = 0; if (areaCode < 200 || areaCode > 989) { if (!throwException) return; throw new ArgumentOutOfRangeException("areaCode", areaCode, @"The area code portion must fall between 200 and 989."); } else if (centralOfficeCode < 200 || centralOfficeCode > 999) { if (!throwException) return; throw new ArgumentOutOfRangeException("centralOfficeCode", centralOfficeCode, @"The central office code portion must fall between 200 and 999."); } else if (subscriberNumber < 0 || subscriberNumber > 9999) { if (!throwException) return; throw new ArgumentOutOfRangeException("subscriberNumber", subscriberNumber, @"The subscriber number portion must fall between 0 and 9999."); } else if (extension < 0 || extension > 1073741824) { if (!throwException) return; throw new ArgumentOutOfRangeException("extension", extension, @"The extension portion must fall between 0 and 1073741824."); } else if (areaCode.ToString()[1] - 48 > 8) { if (!throwException) return; throw new ArgumentOutOfRangeException("areaCode", areaCode, @"The second digit of the area code cannot be greater than 8."); } else { value |= ((ulong)(uint)areaCode << AreaCodeShift); value |= ((ulong)(uint)centralOfficeCode << CentralOfficeCodeShift); value |= ((ulong)(uint)subscriberNumber << SubscriberNumberShift); value |= ((ulong)(uint)extension); } } public object Clone() { return this; } public override bool Equals(object obj) { return obj != null && obj.GetType() == typeof(PhoneNumber) && Equals((PhoneNumber)obj); } public bool Equals(PhoneNumber other) { return this.value == other.value; } public override int GetHashCode() { return value.GetHashCode(); } public override string ToString() { return ToString(PhoneNumberFormat.Separated); } public string ToString(PhoneNumberFormat format) { switch (format) { case PhoneNumberFormat.Plain: return string.Format(@"{0:D3}{1:D3}{2:D4} {3:#}", AreaCode, CentralOfficeCode, SubscriberNumber, Extension).Trim(); case PhoneNumberFormat.Separated: return string.Format(@"{0:D3}-{1:D3}-{2:D4} {3:#}", AreaCode, CentralOfficeCode, SubscriberNumber, Extension).Trim(); default: throw new ArgumentOutOfRangeException("format"); } } public ulong ToUInt64() { return value; } public static PhoneNumber Parse(string value) { var result = default(PhoneNumber); if (!TryParse(value, out result)) { throw new FormatException(string.Format(@"The string ""{0}"" could not be parsed as a phone number.", value)); } return result; } public static bool TryParse(string value, out PhoneNumber result) { result = default(PhoneNumber); if (string.IsNullOrEmpty(value)) { return false; } var index = 0; var numericPieces = new char[value.Length]; foreach (var c in value) { if (char.IsNumber(c)) { numericPieces[index++] = c; } } if (index < 9) { return false; } var numericString = new string(numericPieces); var areaCode = int.Parse(numericString.Substring(0, 3)); var centralOfficeCode = int.Parse(numericString.Substring(3, 3)); var subscriberNumber = int.Parse(numericString.Substring(6, 4)); var extension = 0; if (numericString.Length > 10) { extension = int.Parse(numericString.Substring(10)); } result = new PhoneNumber( areaCode, centralOfficeCode, subscriberNumber, extension, false ); return result.value == 0; } public static bool operator ==(PhoneNumber left, PhoneNumber right) { return left.Equals(right); } public static bool operator !=(PhoneNumber left, PhoneNumber right) { return !left.Equals(right); } private static int UnmaskAreaCode(ulong value) { return (int)(value >> AreaCodeShift); } private static int UnmaskCentralOfficeCode(ulong value) { return (int)((value >> CentralOfficeCodeShift) & CentralOfficeCodeMask); } private static int UnmaskSubscriberNumber(ulong value) { return (int)((value >> SubscriberNumberShift) & SubscriberNumberMask); } private static int UnmaskExtension(ulong value) { return (int)(value & ExtensionMask); } } public enum PhoneNumberFormat { Plain, Separated }

Read the article

MVVM in Task-It

As I'm gearing up to write a post about dynamic XAP loading with MEF, I'd like to first talk a bit about MVVM, the Model-View-ViewModel pattern, as I will be leveraging this pattern in my future posts. Download Source Code Why MVVM? Your first question may be, "why do I need this pattern? I've been using a code-behind approach for years and it works fine." Well, you really don't have to make the switch to MVVM, but let me first explain some of the benefits I see for doing so. MVVM Benefits Testability - This is the one you'll probably hear the most about when it comes to MVVM. Moving most of the code from your code-behind to a separate view model class means you can now write unit tests against the view model without any knowledge of a view (UserControl). Multiple UIs - Let's just say that you've created a killer app, it's running in the browser, and maybe you've even made it run out-of-browser. Now what if your boss comes to you and says, "I heard about this new Windows Phone 7 device that is coming out later this year. Can you start porting the app to that device?". Well, now you have to create a new UI (UserControls, etc.) because you have a lot less screen real estate to work with. So what do you do, copy all of your existing UserControls, paste them, rename them, and then start changing the code? Hmm, that doesn't sound so good. But wait, if most of the code that makes your browser-based app tick lives in view model classes, now you can create new view (UserControls) for Windows Phone 7 that reference the same view model classes as your browser-based app. Page state - In Silverlight you're at some point going to be faced with the same issue you dealt with for years in ASP.NET, maintaining page state. Let's say a user hits your Products page, does some stuff (filters record, etc.), then leaves the page and comes back later. It would be best if the Products page was in the same state as when they left it right? Well, if you've thrown away your view (UserControl or Page) and moved off to another part of the UI, when you come back to Products you're probably going to re-instantiate your view...which will put it right back in the state it was when it started. Hmm, not good. Well, with a little help from MEF you can store the state in your view model class, MEF will keep that view model instance hanging around in memory, and then you simply rebind your view to the view model class. I made that sound easy, but it's actually a bit of work to properly store and restore the state. At least it can be done though, which will make your users a lot happier! I'll talk more about this in an upcoming blog post. No event handlers? Another nice thing about MVVM is that you can bind your UserControls to the view model, which may eliminate the need for event handlers in your code-behind. So instead of having a Click handler on a Button (or RadMenuItem), for example, you can now bind your control's Command property to a DelegateCommand in your view model (I'll talk more about Commands in an upcoming post). Instead of having a SelectionChanged event handler on your RadGridView you can now bind its SelectedItem property to a property in your view model, and each time the user clicks a row, the view model property's setter will be called. Now through the magic of binding we can eliminate the need for traditional code-behind based event handlers on our user interface controls, and the best thing is that the view model knows about everything that's going on...which means we can test things without a user interface. The brains of the operation So what we're seeing here is that the view is now just a dumb layer that binds to the view model, and that the view model is in control of just about everything, like what happens when a RadGridView row is selected, or when a RadComboBoxItem is selected, or when a RadMenuItem is clicked. It is also responsible for loading data when the page is hit, as well as kicking off data inserts, updates and deletions. Once again, all of this stuff can be tested without the need for a user interface. If the test works, then it'll work regardless of whether the user is hitting the browser-based version of your app, or the Windows Phone 7 version. Nice! The database Before running the code for this app you will need to create the database. First, create a database called MVVMProject in SQL Server, then run MVVMProject.sql in the MVVMProject/Database directory of your downloaded .zip file. This should give you a Task table with 3 records in it. When you fire up the solution you will also need to update the connection string in web.config to point to your database instead of IBM12\SQLSERVER2008. The code One note about this code is that it runs against the latest Silverlight 4 RC and WCF RIA Services code. Please see my first blog post about updating to the RC bits. Beta to RC - Part 1 At the top of this post is a link to a sample project that demonstrates a sample application with a Tasks page that uses the MVVM pattern. This is a simplified version of how I have implemented the Tasks page in the Task-It application. Youll notice that Tasks.xaml has very little code to it. Just a TextBlock that displays the page title and a ContentControl. <StackPanel> <TextBlock Text="Tasks" Style="{StaticResource PageTitleStyle}"/> <Rectangle Style="{StaticResource StandardSpacerStyle}"/> <ContentControl x:Name="ContentControl1"/> </StackPanel> In List.xaml we have a RadGridView. Notice that the ItemsSource is bound to a property in the view model class call Tasks, SelectedItem is bound to a property in the view model called SelectedItem, and IsBusy is bound to a property in the view model called IsLoading. <Grid> <telerikGridView:RadGridView ItemsSource="{Binding Tasks}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" IsBusy="{Binding IsLoading}" AutoGenerateColumns="False" IsReadOnly="True" RowIndicatorVisibility="Collapsed" IsFilteringAllowed="False" ShowGroupPanel="False"> <telerikGridView:RadGridView.Columns> <telerikGridView:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}" Width="3*"/> <telerikGridView:GridViewDataColumn Header="Due" DataMemberBinding="{Binding DueDate}" DataFormatString="{}{0:d}" Width="*"/> </telerikGridView:RadGridView.Columns> </telerikGridView:RadGridView> </Grid> In Details.xaml we have a Save button that is bound to a property called SaveCommand in our view model. We also have a simple form (Im using a couple of controls here from Silverlight.FX for the form layout, FormPanel and Label simply because they make for a clean XAML layout). Notice that the FormPanel is also bound to the SelectedItem in the view model (the same one that the RadGridView is). The two form controls, the TextBox and RadDatePicker) are bound to the SelectedItem's Name and DueDate properties. These are properties of the Task object that WCF RIA Services creates. <StackPanel> <Button Content="Save" Command="{Binding SaveCommand}" HorizontalAlignment="Left"/> <Rectangle Style="{StaticResource StandardSpacerStyle}"/> <fxui:FormPanel DataContext="{Binding SelectedItem}" Style="{StaticResource FormContainerStyle}"> <fxui:Label Text="Name:"/> <TextBox Text="{Binding Name, Mode=TwoWay}"/> <fxui:Label Text="Due:"/> <telerikInput:RadDatePicker SelectedDate="{Binding DueDate, Mode=TwoWay}"/> </fxui:FormPanel> </StackPanel> In the code-behind of the Tasks control, Tasks.xaml.cs, I created an instance of the view model class (TasksViewModel) in the constructor and set it as the DataContext for the control. The Tasks page will load one of two child UserControls depending on whether you are viewing the list of tasks (List.xaml) or the form for editing a task (Details.xaml). // Set the DataContext to an instance of the view model class var viewModel = new TasksViewModel(); DataContext = viewModel; // Child user controls (inherit DataContext from this user control) List = new List(); // RadGridView Details = new Details(); // Form When the page first loads, the List is loaded into the ContentControl. // Show the RadGridView first ContentControl1.Content = List; In the code-behind we also listen for a couple of the view models events. The ItemSelected event will be fired when the user clicks on a record in the RadGridView in the List control. The SaveCompleted event will be fired when the user clicks Save in the Details control (the form). Here the view model is in control, and is letting the view know when something needs to change. // Listeners for the view model's events viewModel.ItemSelected += OnItemSelected; viewModel.SaveCompleted += OnSaveCompleted; The event handlers toggle the view between the RadGridView (List) and the form (Details). void OnItemSelected(object sender, RoutedEventArgs e) { // Show the form ContentControl1.Content = Details; } void OnSaveCompleted(object sender, RoutedEventArgs e) { // Show the RadGridView ContentControl1.Content = List; } In TasksViewModel, we instantiate a DataContext object and a SaveCommand in the constructor. DataContext is a WCF RIA Services object that well use to retrieve the list of Tasks and to save any changes to a task. Ill talk more about this and Commands in future post, but for now think of the SaveCommand as an event handler that is called when the Save button in the form is clicked. DataContext = new DataContext(); SaveCommand = new DelegateCommand(OnSave); When the TasksViewModel constructor is called we also make a call to LoadTasks. This sets IsLoading to true (which causes the RadGridViews busy indicator to appear) and retrieves the records via WCF RIA Services. public LoadOperation<Task> LoadTasks() { // Show the loading message IsLoading = true; // Get the data via WCF RIA Services. When the call has returned, called OnTasksLoaded. return DataContext.Load(DataContext.GetTasksQuery(), OnTasksLoaded, false); } When the data is returned, OnTasksLoaded is called. This sets IsLoading to false (which hides the RadGridViews busy indicator), and fires property changed notifications to the UI to let it know that the IsLoading and Tasks properties have changed. This property changed notification basically tells the UI to rebind. void OnTasksLoaded(LoadOperation<Task> lo) { // Hide the loading message IsLoading = false; // Notify the UI that Tasks and IsLoading properties have changed this.OnPropertyChanged(p => p.Tasks); this.OnPropertyChanged(p => p.IsLoading); } Next lets look at the view models SelectedItem property. This is the one thats bound to both the RadGridView and the form. When the user clicks a record in the RadGridView its setter gets called (set a breakpoint and see what I mean). The other code in the setter lets the UI know that the SelectedItem has changed (so the form displays the correct data), and fires the event that notifies the UI that a selection has occurred (which tells the UI to switch from List to Details). public Task SelectedItem { get { return _selectedItem; } set { _selectedItem = value; // Let the UI know that the SelectedItem has changed (forces it to re-bind) this.OnPropertyChanged(p => p.SelectedItem); // Notify the UI, so it can switch to the Details (form) page NotifyItemSelected(); } } One last thing, saving the data. When the Save button in the form is clicked it fires the SaveCommand, which calls the OnSave method in the view model (once again, set a breakpoint to see it in action). public void OnSave() { // Save the changes via WCF RIA Services. When the save is complete, call OnSaveCompleted. DataContext.SubmitChanges(OnSaveCompleted, null); } In OnSave, we tell WCF RIA Services to submit any changes, which there will be if you changed either the Name or the Due Date in the form. When the save is completed, it calls OnSaveCompleted. This method fires a notification back to the UI that the save is completed, which causes the RadGridView (List) to show again. public virtual void OnSaveCompleted(SubmitOperation so) { // Clear the item that is selected in the grid (in case we want to select it again) SelectedItem = null; // Notify the UI, so it can switch back to the List (RadGridView) page NotifySaveCompleted(); } Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

Read the article

Metro Walkthrough: Creating a Task List with a ListView and IndexedDB

- by Stephen.Walther

The goal of this blog entry is to describe how you can work with data in a Metro style application written with JavaScript. In particular, we create a super simple Task List application which enables you to create and delete tasks. Here’s a video which demonstrates how the Task List application works: In order to build this application, I had to take advantage of several features of the WinJS library and technologies including: IndexedDB – The Task List application stores data in an IndexedDB database. HTML5 Form Validation – The Task List application uses HTML5 validation to ensure that a required field has a value. ListView Control – The Task List application displays the tasks retrieved from the IndexedDB database in a WinJS ListView control. Creating the IndexedDB Database The Task List application stores all of its data in an IndexedDB database named TasksDB. This database is opened/created with the following code: var db; var req = window.msIndexedDB.open("TasksDB", 1); req.onerror = function () { console.log("Could not open database"); }; req.onupgradeneeded = function (evt) { var newDB = evt.target.result; newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement:true }); }; The msIndexedDB.open() method accepts two parameters: the name of the database to open and the version of the database to open. If a database with a matching version already exists, then calling the msIndexedDB.open() method opens a connection to the existing database. If the database does not exist then the upgradeneeded event is raised. You handle the upgradeneeded event to create a new database. In the code above, the upgradeneeded event handler creates an object store named “tasks” (An object store roughly corresponds to a database table). When you add items to the tasks object store then each item gets an id property with an auto-incremented value automatically. The code above also includes an error event handler. If the IndexedDB database cannot be opened or created, for whatever reason, then an error message is written to the Visual Studio JavaScript Console window. Displaying a List of Tasks The TaskList application retrieves its list of tasks from the tasks object store, which we created above, and displays the list of tasks in a ListView control. Here is how the ListView control is declared: <div id="tasksListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: TaskList.tasks.dataSource, itemTemplate: select('#taskTemplate'), tapBehavior: 'toggleSelect', selectionMode: 'multi', layout: { type: WinJS.UI.ListLayout } }"> </div> The ListView control is bound to the TaskList.tasks.dataSource data source. The TaskList.tasks.dataSource is created with the following code: // Create the data source var tasks = new WinJS.Binding.List(); // Open the database var db; var req = window.msIndexedDB.open("TasksDB", 1); req.onerror = function () { console.log("Could not open database"); }; req.onupgradeneeded = function (evt) { var newDB = evt.target.result; newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement:true }); }; // Load the data source with data from the database req.onsuccess = function () { db = req.result; var tran = db.transaction("tasks"); tran.objectStore("tasks").openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { tasks.dataSource.insertAtEnd(null, cursor.value); cursor.continue(); }; }; }; // Expose the data source and functions WinJS.Namespace.define("TaskList", { tasks: tasks }); Notice the success event handler. This handler is called when a database is successfully opened/created. In the code above, all of the items from the tasks object store are retrieved into a cursor and added to a WinJS.Binding.List object named tasks. Because the ListView control is bound to the WinJS.Binding.List object, copying the tasks from the object store into the WinJS.Binding.List object causes the tasks to appear in the ListView: Adding a New Task You add a new task in the Task List application by entering the title of a new task into an HTML form and clicking the Add button. Here’s the markup for creating the form: <form id="addTaskForm"> <input id="newTaskTitle" title="New Task" required /> <button>Add</button> </form> Notice that the INPUT element includes a required attribute. In a Metro application, you can take advantage of HTML5 Validation to validate form fields. If you don’t enter a value for the newTaskTitle field then the following validation error message is displayed: For a brief introduction to HTML5 validation, see my previous blog entry: http://stephenwalther.com/blog/archive/2012/03/13/html5-form-validation.aspx When you click the Add button, the form is submitted and the form submit event is raised. The following code is executed in the default.js file: // Handle Add Task document.getElementById("addTaskForm").addEventListener("submit", function (evt) { evt.preventDefault(); var newTaskTitle = document.getElementById("newTaskTitle"); TaskList.addTask({ title: newTaskTitle.value }); newTaskTitle.value = ""; }); The code above retrieves the title of the new task and calls the addTask() method in the tasks.js file. Here’s the code for the addTask() method which is responsible for actually adding the new task to the IndexedDB database: // Add a new task function addTask(taskToAdd) { var transaction = db.transaction("tasks", "readwrite"); var addRequest = transaction.objectStore("tasks").add(taskToAdd); addRequest.onsuccess = function (evt) { taskToAdd.id = evt.target.result; tasks.dataSource.insertAtEnd(null, taskToAdd); } } The code above does two things. First, it adds the new task to the tasks object store in the IndexedDB database. Second, it adds the new task to the data source bound to the ListView. The dataSource.insertAtEnd() method is called to add the new task to the data source so the new task will appear in the ListView (with a nice little animation). Deleting Existing Tasks The Task List application enables you to select one or more tasks by clicking or tapping on one or more tasks in the ListView. When you click the Delete button, the selected tasks are removed from both the IndexedDB database and the ListView. For example, in the following screenshot, two tasks are selected. The selected tasks appear with a teal background and a checkmark: When you click the Delete button, the following code in the default.js file is executed: // Handle Delete Tasks document.getElementById("btnDeleteTasks").addEventListener("click", function (evt) { tasksListView.winControl.selection.getItems().then(function(items) { items.forEach(function (item) { TaskList.deleteTask(item); }); }); }); The selected tasks are retrieved with the TaskList selection.getItem() method. In the code above, the deleteTask() method is called for each of the selected tasks. Here’s the code for the deleteTask() method: // Delete an existing task function deleteTask(listViewItem) { // Database key != ListView key var dbKey = listViewItem.data.id; var listViewKey = listViewItem.key; // Remove item from db and, if success, remove item from ListView var transaction = db.transaction("tasks", “readwrite”); var deleteRequest = transaction.objectStore("tasks").delete(dbKey); deleteRequest.onsuccess = function () { tasks.dataSource.remove(listViewKey); } } This code does two things: it deletes the existing task from the database and removes the existing task from the ListView. In both cases, the right task is removed by using the key associated with the task. However, the task key is different in the case of the database and in the case of the ListView. In the case of the database, the task key is the value of the task id property. In the case of the ListView, on the other hand, the task key is auto-generated by the ListView. When the task is removed from the ListView, an animation is used to collapse the tasks which appear above and below the task which was removed. The Complete Code Above, I did a lot of jumping around between different files in the application and I left out sections of code. For the sake of completeness, I want to include the entire code here: the default.html, default.js, and tasks.js files. Here are the contents of the default.html file. This file contains the UI for the Task List application: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Task List</title>  <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.0.6/js/base.js"></script> <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>  <link href="/css/default.css" rel="stylesheet"> <script src="/js/default.js"></script> <script type="text/javascript" src="js/tasks.js"></script> <style type="text/css"> body { font-size: x-large; } form { display: inline; } #appContainer { margin: 20px; width: 600px; } .win-container { padding: 10px; } </style> </head> <body> <div>  <div id="taskTemplate" data-win-control="WinJS.Binding.Template"> <div> <span data-win-bind="innerText:title"></span> </div> </div> <h1>Super Task List</h1> <div id="appContainer"> <form id="addTaskForm"> <input id="newTaskTitle" title="New Task" required /> <button>Add</button> </form> <button id="btnDeleteTasks">Delete</button> <div id="tasksListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: TaskList.tasks.dataSource, itemTemplate: select('#taskTemplate'), tapBehavior: 'toggleSelect', selectionMode: 'multi', layout: { type: WinJS.UI.ListLayout } }"> </div> </div> </div> </body> </html> Here is the code for the default.js file. This code wires up the Add Task form and Delete button: (function () { "use strict"; var app = WinJS.Application; app.onactivated = function (eventObject) { if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { WinJS.UI.processAll().then(function () { // Get reference to Tasks ListView var tasksListView = document.getElementById("tasksListView"); // Handle Add Task document.getElementById("addTaskForm").addEventListener("submit", function (evt) { evt.preventDefault(); var newTaskTitle = document.getElementById("newTaskTitle"); TaskList.addTask({ title: newTaskTitle.value }); newTaskTitle.value = ""; }); // Handle Delete Tasks document.getElementById("btnDeleteTasks").addEventListener("click", function (evt) { tasksListView.winControl.selection.getItems().then(function(items) { items.forEach(function (item) { TaskList.deleteTask(item); }); }); }); }); } }; app.start(); })(); Finally, here is the tasks.js file. This file contains all of the code for opening, creating, and interacting with IndexedDB: (function () { "use strict"; // Create the data source var tasks = new WinJS.Binding.List(); // Open the database var db; var req = window.msIndexedDB.open("TasksDB", 1); req.onerror = function () { console.log("Could not open database"); }; req.onupgradeneeded = function (evt) { var newDB = evt.target.result; newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement:true }); }; // Load the data source with data from the database req.onsuccess = function () { db = req.result; var tran = db.transaction("tasks"); tran.objectStore("tasks").openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { tasks.dataSource.insertAtEnd(null, cursor.value); cursor.continue(); }; }; }; // Add a new task function addTask(taskToAdd) { var transaction = db.transaction("tasks", "readwrite"); var addRequest = transaction.objectStore("tasks").add(taskToAdd); addRequest.onsuccess = function (evt) { taskToAdd.id = evt.target.result; tasks.dataSource.insertAtEnd(null, taskToAdd); } } // Delete an existing task function deleteTask(listViewItem) { // Database key != ListView key var dbKey = listViewItem.data.id; var listViewKey = listViewItem.key; // Remove item from db and, if success, remove item from ListView var transaction = db.transaction("tasks", "readwrite"); var deleteRequest = transaction.objectStore("tasks").delete(dbKey); deleteRequest.onsuccess = function () { tasks.dataSource.remove(listViewKey); } } // Expose the data source and functions WinJS.Namespace.define("TaskList", { tasks: tasks, addTask: addTask, deleteTask: deleteTask }); })(); Summary I wrote this blog entry because I wanted to create a walkthrough of building a simple database-driven application. In particular, I wanted to demonstrate how you can use a ListView control with an IndexedDB database to store and retrieve database data.

Read the article

display data from json file in datagrid

- by kayn

I want to display data from a json files in a data grid using dojo ver 1.0.0. I am able to diplay the data when i declare it on my code but when i store the same data in a json format so i can reference it in my script,i get an empty grid. This is my json file; { data: [ ['10''myfile','Css', 'CS Degree','Dr. Bottoman','This is mine'], ['10'myfile2','CS716', 'CS Degree','Prof Frank', 'This is course'], ['10'myfile3 ','CS714', 'CS Degree', 'Dr. Ree', 'Welcome'], ['14', 'myfile4','CS772', 'CS Degree', 'Mr. Boss', 'This will display content' ], ['18', 'myfile5','CS774', 'CS Degree','Ms. Kirk', 'This is networks.' ] ] } and below is my code; @import "../../../dojo/resources/dojo.css"; @import "../_grid/Grid.css"; body { font-size: 1.0em; } #grid { height: 400px; border: 1px solid silver; } .text-oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-scrolling { height: 4em; overflow: auto; } .text-scrolling { width: 21.5em; } dojo.require("dojox.grid.Grid"); dojo.require("dojox.grid._data.model"); dojo.require("dojo.parser"); <script type="text/javascript"> /*<span dojoType="dojo.data.ItemFileWriteStore" jsId="myStore" url="course.json"> </span>*/ data = [ ['10''myfile','Css', 'CS Degree','Dr. Bottoman','This is mine'], ['10'myfile2','CS716', 'CS Degree','Prof Frank', 'This is course'], ['10'myfile3 ','CS714', 'CS Degree', 'Dr. Ree', 'Welcome'], ['14', 'myfile4','CS772', 'CS Degree', 'Mr. Boss', 'This will display content' ], ['18', 'myfile5','CS774', 'CS Degree','Ms. Kirk', 'This is networks.' ] ]; getDetailData = function(inRowIndex) { var row = data[this.grid.dataRow % data.length ]; switch (this.index) { case 0: return row[5]; case 1: return row[2]; case 2: return row[0]; case 3: return row[1]; case 4: return row[3]; case 5: return row[4]; default: return row[this.index]; } } getName = function(inRowIndex) { var row = data[inRowIndex % data.length]; return row[1]; } // Main grid structure var gridCells = [ { type: 'dojox.GridRowView', width: '20px' }, { onBeforeRow: function(inDataIndex, inSubRows) { inSubRows[1].hidden = !detailRows[inDataIndex]; }, cells: [[ { name: 'Master', width: 3, get: getCheck, styles: 'text-align: center;' }, { name: 'Detail', get: getName, width: 60 }, ], [ { name: '', get: getDetail, colSpan: 2, styles: 'padding: 0; margin: 0;'} ]] } ]; // html for the +/- cell function getCheck(inRowIndex) { var image = (detailRows[inRowIndex] ? 'open.gif' : 'closed.gif'); var show = (detailRows[inRowIndex] ? 'false' : 'true') return ''; } // provide html for the Detail cell in the master grid function getDetail(inRowIndex) { var cell = this; // we can affect styles and content here, but we have to wait to access actual nodes setTimeout(function() { buildDetailgrid(inRowIndex, cell); }, 1); // look for a Detailgrid var Detailgrid = dijit.byId(makeDetailgridId(inRowIndex)); var h = (Detailgrid ? Detailgrid.cacheHeight : "120") + "px"; // insert a placeholder return ''; } // the Detail cell contains a Detailgrid which we set up below var DetailgridCells = [{ noscroll: true, cells: [ [ {name: "Brief Course Description",width: "auto"}, {name: "Course Code" }, {name: "Credits" }, {name: "Subject" }, {name: "Prerequisite" }, {name: "Lecturer"}], [] ]}]; var DetailgridProps = { structure: DetailgridCells, rowCount: 1, autoHeight: true, autoRender: false, "get": getDetailData }; // identify Detailgrids by their row indices function makeDetailgridId(inRowIndex) { return grid.widgetId + "Detailgrid"/+ inRowIndex/; } // if a Detailgrid exists at inRowIndex, detach it from the DOM function detachDetailgrid(inRowIndex) { var Detailgrid = dijit.byId(makeDetailgridId(inRowIndex)); if (Detailgrid) dojox.grid.removeNode(Detailgrid.domNode); } // render a Detailgrid into inCell at inRowIndex function buildDetailgrid(inRowIndex, inCell) { var n = inCell.getNode(inRowIndex).firstChild; var id = makeDetailgridId(inRowIndex); var Detailgrid = dijit.byId(id); if (Detailgrid) { n.appendChild(Detailgrid.domNode); } else { DetailgridProps.dataRow = inRowIndex; DetailgridProps.widgetId = id; Detailgrid = new dojox.VirtualGrid(DetailgridProps, n); } if (Detailgrid) { Detailgrid.render(); Detailgrid.cacheHeight = Detailgrid.domNode.offsetHeight; inCell.grid.rowHeightChanged(inRowIndex); } } // destroy Detailgrid at inRowIndex function destroyDetailgrid(inRowIndex) { var Detailgrid = dijit.byId(makeDetailgridId(inRowIndex)); if (Detailgrid) Detailgrid.destroy(); } // when user clicks the +/- detailRows = []; function toggleDetail(inIndex, inShow) { if (!inShow) detachDetailgrid(inIndex); detailRows[inIndex] = inShow; grid.updateRow(inIndex); } dojo.addOnLoad(function() { window["grid"] = dijit.byId("grid"); dojo.connect(grid, 'rowRemoved', destroyDetailgrid); }); Test grid

Read the article

OData to the rescue. Exposing the eventlog as a data feed

- by cibrax

In one of the project where I was working one, we used the Microsoft Enterprise Library Exception Application Block integration with WCF for logging all the technical issues on the services/backend in Windows Event Log. This application block worked like a charm, all the errors were correctly logged on the Event Log without even needing to modify the service code. However, we also needed to provide a quick way to expose all those events to the different system users so they could get access to all the them remotely. In just a couple of minutes I came up with a simple solution based on ADO.NET Data Services. ADO.NET data services is very powerful in this sense, you only need to provide a IQueryable implementation, and that’s all. You get a RESTful service with rich query support for free. In this sample, I used Linq to Objects to get the latest entries from the Event Log, and I also filter the entries by the category used by the Application Block to avoid loading unnecessary entries in memory. public class LogDataSource { string source; public LogDataSource(string source) { this.source = source; } public LogDataSource() { } public IQueryable<LogEntry> LogEntries { get { return GetEntries().AsQueryable().OrderBy(e => e.TimeGenerated); } } private IEnumerable<LogEntry> GetEntries() { var applicationLog = System.Diagnostics.EventLog.GetEventLogs().Where(e => e.Log == "Application") .FirstOrDefault(); var entries = new List<LogEntry>(); if (applicationLog != null) { foreach (EventLogEntry entry in applicationLog.Entries) { if (source == null || entry.Source.Equals(source, StringComparison.InvariantCultureIgnoreCase)) { entries.Add(new LogEntry { Category = entry.Category, EventID = entry.InstanceId, Message = entry.Message, TimeGenerated = entry.TimeGenerated, Source = entry.Source, }); } } } return entries.OrderByDescending(e => e.TimeGenerated) .Take(200); } } LogEntry is class I created for this service to expose an Event Log Entry. [EntityPropertyMappingAttribute("Source", SyndicationItemProperty.Title, SyndicationTextContentKind.Plaintext, true)] [EntityPropertyMapping("Message", SyndicationItemProperty.Summary, SyndicationTextContentKind.Plaintext, true)] [EntityPropertyMapping("TimeGenerated", SyndicationItemProperty.Updated, SyndicationTextContentKind.Plaintext, true)] [DataServiceKey("EventID")] public class LogEntry { public long EventID { get; set; } public string Category { get; set; } public string Message { get; set; } public DateTime TimeGenerated { get; set; } public string Source { get; set; } } As you can see, I used the new feature “Friendly feeds” to map several properties in the entries with standard ATOM elements. The “DataServiceKey” is only necessary because I am using the Reflection Provider (the exposed IQueryable implementation is just Linq to Objects) rather than the default Entity Framework Provider. The data service implementation is also quite simple, just a couple of lines were needed to expose the data source created previously. public class LogDataService : DataService<LogDataSource> { public static void InitializeService(IDataServiceConfiguration config) { config.SetEntitySetAccessRule("*", EntitySetRights.AllRead); } protected override LogDataSource CreateDataSource() { string source = ConfigurationManager.AppSettings["EventLogSource"]; if (source == null) { throw new ApplicationException("The EventLogSource appsetting is missing in the configuration file"); } return new LogDataSource(source); } } With this implementation in place, the final users not only get a feed with all the latest errors in the event log, but also support for performing queries against that data. This is one of the great things about ADO.NET Data services.

Read the article

Using the Data Form Web Part (SharePoint 2010) Site Agnostically!

- by David Jacobus

Originally posted on: http://geekswithblogs.net/djacobus/archive/2013/10/24/154465.aspxAs a Developer whom has worked closely with web designers (Power users) in a SharePoint environment, I have come across the issue of making the Data Form Web Part reusable across the site collection! In SharePoint 2007 it was very easy and this blog pointed the way to make it happen: Josh Gaffey's Blog. In SharePoint 2010 something changed! This method failed except for using a Data Form Web Part that pointed to a list in the Site Collection Root! I am making this discussion relative to a developer whom creates a solution (WSP) with all the artifacts embedded and the user shouldn’t have any involvement in the process except to activate features. The Scenario: 1. A Power User creates a Data Form Web Part using SharePoint Designer 2010! It is a great web part the uses all the power of SharePoint Designer and XSLT (Conditional formatting, etc.). 2. Other Users in the site collection want to use that specific web part in sub sites in the site collection. Pointing to a list with the same name, not at the site collection root! The Issues: 1. The Data Form Web Part Data Source uses a List ID (GUID) to point to the specific list. Which means a list in a sub site will have a list with a new GUID different than the one which was created with SharePoint Designer! Obviously, the List needs to be the same List (Fields, Content Types, etc.) with different data. 2. How can we make this web part site agnostic, and dependent only on the lists Name? I had this problem come up over and over and decided to put my solution forward! The Solution: 1. Use the XSL of the Data Form Web Part Created By the Power User in SharePoint Designer! 2. Extend the OOTB Data Form Web Part to use this XSL and Point to a List by name. The solution points to a hybrid solution that requires some coding (Developer) and the XSL (Power User) artifacts put together in a Visual Studio SharePoint Solution. Here are the solution steps in summary: 1. Create an empty SharePoint project in Visual Studio 2. Create a Module and Feature and put the XSL file created by the Power User into it a. Scope the feature to web 3. Create a Feature Receiver to Create the List. The same list from which the Data Form Web Part was created with by the Power User. a. Scope the feature to web 4. Create a Web Part extending the Data Form Web a. Point the Data Form Web Part to point to the List by Name b. Point the Data Form Web Part XSL link to the XSL added using the Module feature c. Scope The feature to Site i. This is because all web parts are in the site collection web part gallery. So in a Narrative Summary: We are creating a list in code which has the same name and (site Columns) as the list from which the Power User created the Data Form Web Part Using SharePoint Designer. We are creating a Web Part in code which extends the OOTB Data Form Web Part to point to a list by name and use the XSL created by the Power User. Okay! Here are the steps with images and code! At the end of this post I will provide a link to the code for a solution which works in any site! I want to TOOT the HORN for the power of this solution! It is the mantra a use with all my clients! What is a basic skill a SharePoint Developer: Create an application that uses the data from a SharePoint list and make that data visible to the user in a manner which meets requirements! Create an Empty SharePoint 2010 Project Here I am naming my Project DJ.DataFormWebPart Create a Code Folder Copy and paste the Extension and Utilities classes (Found in the solution provided at the end of this post) Change the Namespace to match this project The List to which the Data Form Web Part which was used to make the XSL by the Power User in SharePoint Designer is now going to be created in code! If already in code, then all the better! Here I am going to create a list in the site collection root and add some data to it! For the purpose of this discussion I will actually create this list in code before using SharePoint Designer for simplicity! So here I create the List and deploy it within this solution before I do anything else. I will use a List I created before for demo purposes. Footer List is used within the footer of my master page. Add a new Feature: Here I name the Feature FooterList and add a Feature Event Receiver: Here is the code for the Event Receiver: I have a previous blog post about adding lists in code so I will not take time to narrate this code: using System; using System.Runtime.InteropServices; using System.Security.Permissions; using Microsoft.SharePoint; using DJ.DataFormWebPart.Code; namespace DJ.DataFormWebPart.Features.FooterList { /// <summary> /// This class handles events raised during feature activation, deactivation, installation, uninstallation, and upgrade. /// </summary> /// <remarks> /// The GUID attached to this class may be used during packaging and should not be modified. /// </remarks> [Guid("a58644fd-9209-41f4-aa16-67a53af7a9bf")] public class FooterListEventReceiver : SPFeatureReceiver { SPWeb currentWeb = null; SPSite currentSite = null; const string columnGroup = "DJ"; const string ctName = "FooterContentType"; // Uncomment the method below to handle the event raised after a feature has been activated. public override void FeatureActivated(SPFeatureReceiverProperties properties) { using (SPWeb spWeb = properties.GetWeb() as SPWeb) { using (SPSite site = new SPSite(spWeb.Site.ID)) { using (SPWeb rootWeb = site.OpenWeb(site.RootWeb.ID)) { //add the fields addFields(rootWeb); //add content type SPContentType testCT = rootWeb.ContentTypes[ctName]; // we will not create the content type if it exists if (testCT == null) { //the content type does not exist add it addContentType(rootWeb, ctName); } if ((spWeb.Lists.TryGetList("FooterList") == null)) { //create the list if it dosen't to exist CreateFooterList(spWeb, site); } } } } } #region ContentType public void addFields(SPWeb spWeb) { Utilities.addField(spWeb, "Link", SPFieldType.URL, false, columnGroup); Utilities.addField(spWeb, "Information", SPFieldType.Text, false, columnGroup); } private static void addContentType(SPWeb spWeb, string name) { SPContentType myContentType = new SPContentType(spWeb.ContentTypes["Item"], spWeb.ContentTypes, name) { Group = columnGroup }; spWeb.ContentTypes.Add(myContentType); addContentTypeLinkages(spWeb, myContentType); myContentType.Update(); } public static void addContentTypeLinkages(SPWeb spWeb, SPContentType ct) { Utilities.addContentTypeLink(spWeb, "Link", ct); Utilities.addContentTypeLink(spWeb, "Information", ct); } private void CreateFooterList(SPWeb web, SPSite site) { Guid newListGuid = web.Lists.Add("FooterList", "Footer List", SPListTemplateType.GenericList); SPList newList = web.Lists[newListGuid]; newList.ContentTypesEnabled = true; var footer = site.RootWeb.ContentTypes[ctName]; newList.ContentTypes.Add(footer); newList.ContentTypes.Delete(newList.ContentTypes["Item"].Id); newList.Update(); var view = newList.DefaultView; //add all view fields here //view.ViewFields.Add("NewsTitle"); view.ViewFields.Add("Link"); view.ViewFields.Add("Information"); view.Update(); } } } Basically created a content type with two site columns Link and Information. I had to change some code as we are working at the SPWeb level and need Content Types at the SPSite level! I’ll use a new Site Collection for this demo (Best Practice) keep old artifacts from impinging on development: Next we will add this list to the root of the site collection by deploying this solution, add some data and then use SharePoint Designer to create a Data Form Web Part. The list has been added, now let’s add some data: Okay let’s add a Data Form Web Part in SharePoint Designer. Create a new web part page in the site pages library: I will name it TestWP.aspx and edit it in advanced mode: Let’s add an empty Data Form Web Part to the web part zone: Click on the web part to add a data source: Choose FooterList in the Data Source menu: Choose appropriate fields and select insert as multiple item view: Here is what it look like after insertion: Let’s add some conditional formatting if the information filed is not blank: Choose Create (right side) apply formatting: Choose the Information Field and set the condition not null: Click Set Style: Here is the result: Okay! Not flashy but simple enough for this demo. Remember this is the job of the Power user! All we want from this web part is the XLS-Style Sheet out of SharePoint Designer. We are going to use it as the XSL for our web part which we will be creating next. Let’s add a web part to our project extending the OOTB Data Form Web Part. Add new item from the Visual Studio add menu: Choose Web Part: Change WebPart to DataFormWebPart (Oh well my namespace needs some improvement, but it will sure make it readily identifiable as an extended web part!) Below is the code for this web part: using System; using System.ComponentModel; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Microsoft.SharePoint; using Microsoft.SharePoint.WebControls; using System.Text; namespace DJ.DataFormWebPart.DataFormWebPart { [ToolboxItemAttribute(false)] public class DataFormWebPart : Microsoft.SharePoint.WebPartPages.DataFormWebPart { protected override void OnInit(EventArgs e) { base.OnInit(e); this.ChromeType = PartChromeType.None; this.Title = "FooterListDF"; try { //SPSite site = SPContext.Current.Site; SPWeb web = SPContext.Current.Web; SPList list = web.Lists.TryGetList("FooterList"); if (list != null) { string queryList1 = "<Query><Where><IsNotNull><FieldRef Name='Title' /></IsNotNull></Where><OrderBy><FieldRef Name='Title' Ascending='True' /></OrderBy></Query>"; uint maximumRowList1 = 10; SPDataSource dataSourceList1 = GetDataSource(list.Title, web.Url, list, queryList1, maximumRowList1); this.DataSources.Add(dataSourceList1); this.XslLink = web.Url + "/Assests/Footer.xsl"; this.ParameterBindings = BuildDataFormParameters(); this.DataBind(); } } catch (Exception ex) { this.Controls.Add(new LiteralControl("ERROR: " + ex.Message)); } } private SPDataSource GetDataSource(string dataSourceId, string webUrl, SPList list, string query, uint maximumRow) { SPDataSource dataSource = new SPDataSource(); dataSource.UseInternalName = true; dataSource.ID = dataSourceId; dataSource.DataSourceMode = SPDataSourceMode.List; dataSource.List = list; dataSource.SelectCommand = "" + query + ""; Parameter listIdParam = new Parameter("ListID"); listIdParam.DefaultValue = list.ID.ToString( "B").ToUpper(); Parameter maximumRowsParam = new Parameter("MaximumRows"); maximumRowsParam.DefaultValue = maximumRow.ToString(); QueryStringParameter rootFolderParam = new QueryStringParameter("RootFolder", "RootFolder"); dataSource.SelectParameters.Add(listIdParam); dataSource.SelectParameters.Add(maximumRowsParam); dataSource.SelectParameters.Add(rootFolderParam); dataSource.UpdateParameters.Add(listIdParam); dataSource.DeleteParameters.Add(listIdParam); dataSource.InsertParameters.Add(listIdParam); return dataSource; } private string BuildDataFormParameters() { StringBuilder parameters = new StringBuilder("<ParameterBindings><ParameterBinding Name=\"dvt_apos\" Location=\"Postback;Connection\"/><ParameterBinding Name=\"UserID\" Location=\"CAMLVariable\" DefaultValue=\"CurrentUserName\"/><ParameterBinding Name=\"Today\" Location=\"CAMLVariable\" DefaultValue=\"CurrentDate\"/>"); parameters.Append("<ParameterBinding Name=\"dvt_firstrow\" Location=\"Postback;Connection\"/>"); parameters.Append("<ParameterBinding Name=\"dvt_nextpagedata\" Location=\"Postback;Connection\"/>"); parameters.Append("<ParameterBinding Name=\"dvt_adhocmode\" Location=\"Postback;Connection\"/>"); parameters.Append("<ParameterBinding Name=\"dvt_adhocfiltermode\" Location=\"Postback;Connection\"/>"); parameters.Append("</ParameterBindings>"); return parameters.ToString(); } } } The OnInit method we use to set the list name and the XSL Link property of the Data Form Web Part. We do not have the link to XSL in our Solution so we will add the XSL now: Add a Module in the Visual Studio add menu: Rename Sample.txt in the module to footer.xsl and then copy the XSL from SharePoint Designer Look at elements.xml to where the footer.xsl is being provisioned to which is Assets/footer.xsl, make sure the Web parts xsl link is pointing to this url: Okay we are good to go! Let’s check our features and package: DataFormWebPart should be scoped to site and have the web part: The Footer List feature should be scoped to web and have the Assets module (Okay, I see, a spelling issue but it won’t affect this demo) If everything is correct we should be able to click a couple of sub site feature activations and have our list and web part in a sub site. (In fact this solution can be activated anywhere) Here is the list created at SubSite1 with new data It. Next let’s add the web part on a test page and see if it works as expected: It does! So we now have a repeatable way to use a WSP to move a Data Form Web Part around our sites! Here is a link to the code: DataFormWebPart Solution

Read the article

Getting Rails Application Running Under IronRuby Rack

- by NotMyself

Anyone else playing with ironruby? I have successfully got the IronRuby.Rails.Example project running on my local machine under IIS 5.1. I am now attempting to get my own demo rails site running in the same way. My web.config is slightly different from the example project. I am attempting to only use what was distributed with IronRuby 1.0 and what I have installed using gems. I am getting the following error which doesn't give me a lot to go on: D:/demo/config/boot.rb:66:in `exit': exit (SystemExit) After trying many different things, I think it is having a problem finding gems. I have attached my web config and ironrack.log. Does anyone have pointers on what I am doing wrong? Thanks! <?xml version="1.0"?> <configuration> <configSections>  <section name="microsoft.scripting" type="Microsoft.Scripting.Hosting.Configuration.Section, Microsoft.Scripting" requirePermission="false"/> </configSections> <system.webServer> <handlers>  <clear/>  <add name="IronRuby" path="*" verb="*" type="IronRuby.Rack.HttpHandlerFactory, IronRuby.Rack" resourceType="Unspecified" requireAccess="Read" preCondition="integratedMode"/> </handlers> </system.webServer> <system.web>  <compilation debug="true"/> <httpHandlers>  <clear/>  <add path="*" verb="*" type="IronRuby.Rack.HttpHandlerFactory, IronRuby.Rack" /> </httpHandlers> </system.web>  <microsoft.scripting debugMode="false"> <options>   <set option="LibraryPaths" value="C:\IronRuby\lib\IronRuby;C:\IronRuby\lib\ruby\1.8;C:\IronRuby\lib\ruby\site_ruby;C:\IronRuby\lib\ruby\site_ruby\1.8"/> </options> </microsoft.scripting> <appSettings> <add key="AppRoot" value="."/> <add key="Log" value="ironrack.log"/>  <add key="GemPath" value="C:\IronRuby\Lib\ironruby\gems\1.8\gems"/> <add key="RackEnv" value="production"/> </appSettings> </configuration> === Booting ironruby-rack at 4/15/2010 1:27:12 PM [DEBUG] >>> TOPLEVEL_BINDING = binding => Setting GEM_PATH: 'C:\\IronRuby\\Lib\\ironruby\\gems\\1.8\\gems' => Setting RACK_ENV: 'production' => Loading RubyGems [DEBUG] >>> require 'rubygems' => Loading Rack >=1.0.0 [DEBUG] >>> gem 'rack', '>=1.0.0';require 'rack' => Loaded rack-1.1 => Application root: 'D:\\demo' => Loading Rack application [DEBUG] >>> Rack::Builder.new { ( require "config/environment" ENV['RAILS_ENV'] = 'development' use Rails::Rack::LogTailer use Rails::Rack::Static run ActionController::Dispatcher.new ) }.to_app exit D:/demo/config/boot.rb:66:in `exit': exit (SystemExit) from D:/demo/config/boot.rb:66:in `load_rails_gem' from D:/demo/config/boot.rb:54:in `load_initializer' from D:/demo/config/boot.rb:38:in `run' from D:/demo/config/boot.rb:11:in `boot!' from D:/demo/config/boot.rb:110 from C:/IronRuby/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require' from C:/IronRuby/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require' from D:/demo/config/environment.rb:7 from C:/IronRuby/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require' from C:/IronRuby/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require' from (eval):1 from C:/IronRuby/lib/ironruby/gems/1.8/gems/rack-1.1.0/lib/rack/builder.rb:46:in `instance_eval' from C:/IronRuby/lib/ironruby/gems/1.8/gems/rack-1.1.0/lib/rack/builder.rb:46:in `initialize' from (eval):0 from D:\Dev\ironruby\ironruby-ironruby-20bc41b\Merlin\Main\Hosts\IronRuby.Rack\RubyEngine.cs:52:in `Execute' from D:\Dev\ironruby\ironruby-ironruby-20bc41b\Merlin\Main\Hosts\IronRuby.Rack\RubyEngine.cs:45:in `Execute' from D:\Dev\ironruby\ironruby-ironruby-20bc41b\Merlin\Main\Hosts\IronRuby.Rack\Application.cs:68:in `Rackup' from D:\Dev\ironruby\ironruby-ironruby-20bc41b\Merlin\Main\Hosts\IronRuby.Rack\Application.cs:32:in `.ctor' from D:\Dev\ironruby\ironruby-ironruby-20bc41b\Merlin\Main\Hosts\IronRuby.Rack\HttpHandlerFactory.cs:37:in `GetHandler' from System.Web:0:in `MapHttpHandler' from System.Web:0:in `System.Web.HttpApplication.IExecutionStep.Execute' from System.Web:0:in `ExecuteStep' from System.Web:0:in `ResumeSteps' from System.Web:0:in `System.Web.IHttpAsyncHandler.BeginProcessRequest' from System.Web:0:in `ProcessRequestInternal' from System.Web:0:in `ProcessRequestNoDemand' from System.Web:0:in `ProcessRequest'

Read the article

Metro: Understanding CSS Media Queries

- by Stephen.Walther

If you are building a Metro style application then your application needs to look great when used on a wide variety of devices. Your application needs to work on tiny little phones, slates, desktop monitors, and the super high resolution displays of the future. Your application also must support portable devices used with different orientations. If someone tilts their phone from portrait to landscape mode then your application must still be usable. Finally, your Metro style application must look great in different states. For example, your Metro application can be in a “snapped state” when it is shrunk so it can share screen real estate with another application. In this blog post, you learn how to use Cascading Style Sheet media queries to support different devices, different device orientations, and different application states. First, you are provided with an overview of the W3C Media Query recommendation and you learn how to detect standard media features. Next, you learn about the Microsoft extensions to media queries which are supported in Metro style applications. For example, you learn how to use the –ms-view-state feature to detect whether an application is in a “snapped state” or “fill state”. Finally, you learn how to programmatically detect the features of a device and the state of an application. You learn how to use the msMatchMedia() method to execute a media query with JavaScript. Using CSS Media Queries Media queries enable you to apply different styles depending on the features of a device. Media queries are not only supported by Metro style applications, most modern web browsers now support media queries including Google Chrome 4+, Mozilla Firefox 3.5+, Apple Safari 4+, and Microsoft Internet Explorer 9+. Loading Different Style Sheets with Media Queries Imagine, for example, that you want to display different content depending on the horizontal resolution of a device. In that case, you can load different style sheets optimized for different sized devices. Consider the following HTML page: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>U.S. Robotics and Mechanical Men</title> <link href="main.css" rel="stylesheet" type="text/css" />  <link href="medium.css" rel="stylesheet" type="text/css" media="(max-width:1100px)" />  <link href="small.css" rel="stylesheet" type="text/css" media="(max-width:800px)" /> </head> <body> <div id="header"> <h1>U.S. Robotics and Mechanical Men</h1> </div>  <div id="leftColumn"> <img src="advertisement1.gif" alt="advertisement" /> <img src="advertisement2.jpg" alt="advertisement" /> </div>  <div id="mainContentColumn"> <label>Search Products</label> <input id="search" /><button>Search</button> </div>  <div id="rightColumn"> <h1>Deal of the Day!</h1> <p> Buy two cameras and get a third camera for free! Offer is good for today only. </p> </div> </body> </html> The HTML page above contains three columns: a leftColumn, mainContentColumn, and rightColumn. When the page is displayed on a low resolution device, such as a phone, only the mainContentColumn appears: When the page is displayed in a medium resolution device, such as a slate, both the leftColumn and the mainContentColumns are displayed: Finally, when the page is displayed in a high-resolution device, such as a computer monitor, all three columns are displayed: Different content is displayed with the help of media queries. The page above contains three style sheet links. Two of the style links include a media attribute: <link href="main.css" rel="stylesheet" type="text/css" />  <link href="medium.css" rel="stylesheet" type="text/css" media="(max-width:1100px)" />  <link href="small.css" rel="stylesheet" type="text/css" media="(max-width:800px)" /> The main.css style sheet contains default styles for the elements in the page. The medium.css style sheet is applied when the page width is less than 1100px. This style sheet hides the rightColumn and changes the page background color to lime: html { background-color: lime; } #rightColumn { display:none; } Finally, the small.css style sheet is loaded when the page width is less than 800px. This style sheet hides the leftColumn and changes the page background color to red: html { background-color: red; } #leftColumn { display:none; } The different style sheets are applied as you stretch and contract your browser window. You don’t need to refresh the page after changing the size of the page for a media query to be applied: Using the @media Rule You don’t need to divide your styles into separate files to take advantage of media queries. You can group styles by using the @media rule. For example, the following HTML page contains one set of styles which are applied when a device’s orientation is portrait and another set of styles when a device’s orientation is landscape: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Application1</title> <style type="text/css"> html { font-family:'Segoe UI Semilight'; font-size: xx-large; } @media screen and (orientation:landscape) { html { background-color: lime; } p.content { width: 50%; margin: auto; } } @media screen and (orientation:portrait) { html { background-color: red; } p.content { width: 90%; margin: auto; } } </style> </head> <body> <p class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> </body> </html> When a device has a landscape orientation then the background color is set to the color lime and the text only takes up 50% of the available horizontal space: When the device has a portrait orientation then the background color is red and the text takes up 90% of the available horizontal space: Using Standard CSS Media Features The official list of standard media features is contained in the W3C CSS Media Query recommendation located here: http://www.w3.org/TR/css3-mediaqueries/ Here is the official list of the 13 media features described in the standard: · width – The current width of the viewport · height – The current height of the viewport · device-width – The width of the device · device-height – The height of the device · orientation – The value portrait or landscape · aspect-ratio – The ratio of width to height · device-aspect-ratio – The ratio of device width to device height · color – The number of bits per color supported by the device · color-index – The number of colors in the color lookup table of the device · monochrome – The number of bits in the monochrome frame buffer · resolution – The density of the pixels supported by the device · scan – The values progressive or interlace (used for TVs) · grid – The values 0 or 1 which indicate whether the device supports a grid or a bitmap Many of the media features in the list above support the min- and max- prefix. For example, you can test for the min-width using a query like this: (min-width:800px) You can use the logical and operator with media queries when you need to check whether a device supports more than one feature. For example, the following query returns true only when the width of the device is between 800 and 1,200 pixels: (min-width:800px) and (max-width:1200px) Finally, you can use the different media types – all, braille, embossed, handheld, print, projection, screen, speech, tty, tv — with a media query. For example, the following media query only applies to a page when a page is being printed in color: print and (color) If you don’t specify a media type then media type all is assumed. Using Metro Style Media Features Microsoft has extended the standard list of media features which you can include in a media query with two custom media features: · -ms-high-contrast – The values any, black-white, white-black · -ms-view-state – The values full-screen, fill, snapped, device-portrait You can take advantage of the –ms-high-contrast media feature to make your web application more accessible to individuals with disabilities. In high contrast mode, you should make your application easier to use for individuals with vision disabilities. The –ms-view-state media feature enables you to detect the state of an application. For example, when an application is snapped, the application only occupies part of the available screen real estate. The snapped application appears on the left or right side of the screen and the rest of the screen real estate is dominated by the fill application (Metro style applications can only be snapped on devices with a horizontal resolution of greater than 1,366 pixels). Here is a page which contains style rules for an application in both a snap and fill application state: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>MyWinWebApp</title> <style type="text/css"> html { font-family:'Segoe UI Semilight'; font-size: xx-large; } @media screen and (-ms-view-state:snapped) { html { background-color: lime; } } @media screen and (-ms-view-state:fill) { html { background-color: red; } } </style> </head> <body> <p class="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> </body> </html> When the application is snapped, the application appears with a lime background color: When the application state is fill then the background color changes to red: When the application takes up the entire screen real estate – it is not in snapped or fill state – then no special style rules apply and the application appears with a white background color. Querying Media Features with JavaScript You can perform media queries using JavaScript by taking advantage of the window.msMatchMedia() method. This method returns a MSMediaQueryList which has a matches method that represents success or failure. For example, the following code checks whether the current device is in portrait mode: if (window.msMatchMedia("(orientation:portrait)").matches) { console.log("portrait"); } else { console.log("landscape"); } If the matches property returns true, then the device is in portrait mode and the message “portrait” is written to the Visual Studio JavaScript Console window. Otherwise, the message “landscape” is written to the JavaScript Console window. You can create an event listener which triggers code whenever the results of a media query changes. For example, the following code writes a message to the JavaScript Console whenever the current device is switched into or out of Portrait mode: window.msMatchMedia("(orientation:portrait)").addListener(function (mql) { if (mql.matches) { console.log("Switched to portrait"); } }); Be aware that the event listener is triggered whenever the result of the media query changes. So the event listener is triggered both when you switch from landscape to portrait and when you switch from portrait to landscape. For this reason, you need to verify that the matches property has the value true before writing the message. Summary The goal of this blog entry was to explain how CSS media queries work in the context of a Metro style application written with JavaScript. First, you were provided with an overview of the W3C CSS Media Query recommendation. You learned about the standard media features which you can query such as width and orientation. Next, we focused on the Microsoft extensions to media queries. You learned how to use –ms-view-state to detect whether a Metro style application is in “snapped” or “fill” state. You also learned how to use the msMatchMedia() method to perform a media query from JavaScript.

Read the article

NuSOAP PHP Request From XML

- by Tegan Snyder

I'm trying to take the following XML request and convert it to a NuSOAP request and I'm having a bit of difficulty. Could anybody chime in? XML Request: <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:dto="http://dto.eai.dnbi.com" xmlns:com="http://com.dnbi.eai.service.AccountSEI"> <soapenv:Header> <dto:AuthenticationDTO> <dto:LOGIN_ID>[email protected]</dto:LOGIN_ID> <dto:LOGIN_PASSWORD>mypassword</dto:LOGIN_PASSWORD> </dto:AuthenticationDTO> </soapenv:Header> <soapenv:Body> <com:matchCompany> <com:in0>  <dto:bureauName></dto:bureauName>  <dto:businessInformation> <dto:address>  <dto:city>Bloomington</dto:city> <dto:country>US</dto:country> <dto:state>MN</dto:state> <dto:street>555 Plain ST</dto:street>  <dto:zipCode></dto:zipCode> </dto:address>  <dto:businessName>Some Company</dto:businessName> </dto:businessInformation>  <dto:entityNumber></dto:entityNumber>  <dto:entityType></dto:entityType>  <dto:listOfSimilars>true</dto:listOfSimilars> </com:in0> </com:matchCompany> </soapenv:Body> </soapenv:Envelope> And my PHP code: <?php require_once('nusoap.php'); $params = array( 'LOGIN_ID' => '[email protected]', 'LOGIN_PASSWORD' => 'mypassword', 'bureauName' => '', 'businessInformation' => array('address' => array('city' => 'Some City'), array('country' => 'US'), array('state' => 'MN'), array('street' => '555 Plain St.'), array('zipCode' => '32423')), array('businessName' => 'Some Company'), 'entityType' => '', 'listOfSimilars' => 'true', ); $wsdl="http://www.domain.com/ws/AccountManagement.wsdl"; $client = new nusoap_client($wsdl, true); $err = $client->getError(); if ($err) { echo '<h2>Constructor error</h2><pre>' . $err . '</pre>'; echo '<h2>Debug</h2><pre>' . htmlspecialchars($client->getDebug(), ENT_QUOTES) . '</pre>'; exit(); } $result = $client->call('matchCompany', $params); if ($client->fault) { echo '<h2>Fault (Expect - The request contains an invalid SOAP body)</h2><pre>'; print_r($result); echo '</pre>'; } else { $err = $client->getError(); if ($err) { echo '<h2>Error</h2><pre>' . $err . '</pre>'; } else { echo '<h2>Result</h2><pre>'; print_r($result); echo '</pre>'; } } echo '<h2>Request</h2><pre>' . htmlspecialchars($client->request, ENT_QUOTES) . '</pre>'; echo '<h2>Response</h2><pre>' . htmlspecialchars($client->response, ENT_QUOTES) . '</pre>'; echo '<h2>Debug</h2><pre>' . htmlspecialchars($client->getDebug(), ENT_QUOTES) . '</pre>'; ?> Am I generating the Header information correctly? I think that may be where I'm off. Thanks,

Read the article

PHP - XML Feed get print values

- by danit

Here is my feed: <entry> <id>http://api.visitmix.com/OData.svc/Sessions(guid'816995df-b09a-447a-9391-019512f643a0')</id> <title type="text">Building Web Applications with Microsoft SQL Azure</title> <summary type="text">SQL Azure provides a highly available and scalable relational database engine in the cloud. In this demo-intensive and interactive session, learn how to quickly build web applications with SQL Azure Databases and familiar web technologies. We demonstrate how you can quickly provision, build and populate a new SQL Azure database directly from your web browser. Also, see firsthand several new enhancements we are adding to SQL Azure based on the feedback we’ve received from the community since launching the service earlier this year.</summary> <published>2010-01-25T00:00:00-05:00</published> <updated>2010-03-05T01:07:05-05:00</updated> <author> <name /> </author> <link rel="edit" title="Session" href="Sessions(guid'816995df-b09a-447a-9391-019512f643a0')" /> <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Speakers" type="application/atom+xml;type=feed" title="Speakers" href="Sessions(guid'816995df-b09a-447a-9391-019512f643a0')/Speakers"> <m:inline> <feed> <title type="text">Speakers</title> <id>http://api.visitmix.com/OData.svc/Sessions(guid'816995df-b09a-447a-9391-019512f643a0')/Speakers</id> <updated>2010-03-25T11:56:06Z</updated> <link rel="self" title="Speakers" href="Sessions(guid'816995df-b09a-447a-9391-019512f643a0')/Speakers" /> <entry> <id>http://api.visitmix.com/OData.svc/Speakers(guid'3395ee85-d994-423c-a726-76b60a896d2a')</id> <title type="text">David-Robinson</title> <summary type="text"></summary> <updated>2010-03-25T11:56:06Z</updated> <author> <name>David Robinson</name> </author> <link rel="edit-media" title="Speaker" href="Speakers(guid'3395ee85-d994-423c-a726-76b60a896d2a')/$value" /> <link rel="edit" title="Speaker" href="Speakers(guid'3395ee85-d994-423c-a726-76b60a896d2a')" /> <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Sessions" type="application/atom+xml;type=feed" title="Sessions" href="Speakers(guid'3395ee85-d994-423c-a726-76b60a896d2a')/Sessions" /> <category term="EventModel.Speaker" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" /> <content type="image/jpeg" src="http://live.visitmix.com/Content/images/speakers/lrg/default.jpg" /> <m:properties xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices"> <d:SpeakerID m:type="Edm.Guid">3395ee85-d994-423c-a726-76b60a896d2a</d:SpeakerID> <d:SpeakerFirstName>David</d:SpeakerFirstName> <d:SpeakerLastName>Robinson</d:SpeakerLastName> <d:LargeImage m:null="true"></d:LargeImage> <d:SmallImage m:null="true"></d:SmallImage> <d:Twitter m:null="true"></d:Twitter> </m:properties> </entry> </feed> </m:inline> </link> <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Tags" type="application/atom+xml;type=feed" title="Tags" href="Sessions(guid'816995df-b09a-447a-9391-019512f643a0')/Tags" /> <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Files" type="application/atom+xml;type=feed" title="Files" href="Sessions(guid'816995df-b09a-447a-9391-019512f643a0')/Files" /> <category term="EventModel.Session" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" /> <content type="application/xml"> <m:properties> <d:SessionID m:type="Edm.Guid">816995df-b09a-447a-9391-019512f643a0</d:SessionID> <d:Location>Breakers L</d:Location> <d:Type>Seminar</d:Type> <d:Code>SVC07</d:Code> <d:StartTime m:type="Edm.DateTime">2010-03-17T12:00:00</d:StartTime> <d:EndTime m:type="Edm.DateTime">2010-03-17T13:00:00</d:EndTime> <d:Slug>SVC07</d:Slug> <d:CreatedDate m:type="Edm.DateTime">2010-01-26T18:14:24.687</d:CreatedDate> <d:SourceID m:type="Edm.Guid">cddca9b7-6830-4d06-af93-5fd87afb67b0</d:SourceID> </m:properties> </content> </entry> I want to print the: Session Title (Building Web Applications with Microsoft SQL Azure) The Author (David Robinson) The Location (Breakers L) And display the speakers image (http://live.visitmix.com/Content/images/speakers/lrg/default.jpg) I presume I can use filegetcontents and then transform to simplexmlstring, but I dont know how to get the deeper items in I want, like Author, and image. Any chance of a bit of coding genius here?

Read the article

C# WPF application is using too much memory while GC.GetTotalMemory() is low

- by Dmitry

I wrote little WPF application with 2 threads - main thread is GUI thread and another thread is worker. App has one WPF form with some controls. There is a button, allowing to select directory. After selecting directory, application scans for .jpg files in that directory and checks if their thumbnails are in hashtable. if they are, it does nothing. else it's adding their full filenames to queue for worker. Worker is taking filenames from this queue, loading JPEG images (using WPF's JpegBitmapDecoder and BitmapFrame), making thumbnails of them (using WPF's TransformedBitmap) and adding them to hashtable. Everything works fine, except memory consumption by this application when making thumbnails for big images (like 5000x5000 pixels). I've added textboxes on my form to show memory consumption (GC.GetTotalMemory() and Process.GetCurrentProcess().PrivateMemorySize64) and was very surprised, cuz GC.GetTotalMemory() stays close to 1-2 Mbytes, while private memory size constantly grows, especially when loading new image (~ +100Mb per image). Even after loading all images, making thumbnails of them and freeing original images, private memory size stays at ~700-800Mbytes. My VirtualBox is limited to 512Mb of physical memory and Windows in VirtualBox starts to swap alot to handle this huge memory consumption. I guess I'm doing something wrong, but I don't know how to investigate this problem, cuz according to GC, allocated memory size is very low. Attaching code of thumbnail loader class: class ThumbnailLoader { Hashtable thumbnails; Queue<string> taskqueue; EventWaitHandle wh; Thread[] workers; bool stop; object locker; int width, height, processed, added; public ThumbnailLoader() { int workercount,i; wh = new AutoResetEvent(false); thumbnails = new Hashtable(); taskqueue = new Queue<string>(); stop = false; locker = new object(); width = height = 64; processed = added = 0; workercount = Environment.ProcessorCount; workers=new Thread[workercount]; for (i = 0; i < workercount; i++) { workers[i] = new Thread(Worker); workers[i].IsBackground = true; workers[i].Priority = ThreadPriority.Highest; workers[i].Start(); } } public void SetThumbnailSize(int twidth, int theight) { width = twidth; height = theight; if (thumbnails.Count!=0) AddTask("#resethash"); } public void GetProgress(out int Added, out int Processed) { Added = added; Processed = processed; } private void AddTask(string filename) { lock(locker) { taskqueue.Enqueue(filename); wh.Set(); added++; } } private string NextTask() { lock(locker) { if (taskqueue.Count == 0) return null; else { processed++; return taskqueue.Dequeue(); } } } public static string FileNameToHash(string s) { return FormsAuthentication.HashPasswordForStoringInConfigFile(s, "MD5"); } public bool GetThumbnail(string filename,out BitmapFrame thumbnail) { string hash; hash = FileNameToHash(filename); if (thumbnails.ContainsKey(hash)) { thumbnail=(BitmapFrame)thumbnails[hash]; return true; } AddTask(filename); thumbnail = null; return false; } private BitmapFrame LoadThumbnail(string filename) { FileStream fs; JpegBitmapDecoder bd; BitmapFrame oldbf, bf; TransformedBitmap tb; double scale, dx, dy; fs = new FileStream(filename, FileMode.Open); bd = new JpegBitmapDecoder(fs, BitmapCreateOptions.None, BitmapCacheOption.OnLoad); oldbf = bd.Frames[0]; dx = (double)oldbf.Width / width; dy = (double)oldbf.Height / height; if (dx > dy) scale = 1 / dx; else scale = 1 / dy; tb = new TransformedBitmap(oldbf, new ScaleTransform(scale, scale)); bf = BitmapFrame.Create(tb); fs.Close(); oldbf = null; bd = null; GC.Collect(); return bf; } public void Dispose() { lock(locker) { stop = true; } AddTask(null); foreach (Thread worker in workers) { worker.Join(); } wh.Close(); } private void Worker() { string curtask,hash; while (!stop) { curtask = NextTask(); if (curtask == null) wh.WaitOne(); else { if (curtask == "#resethash") thumbnails.Clear(); else { hash = FileNameToHash(curtask); try { thumbnails[hash] = LoadThumbnail(curtask); } catch { thumbnails[hash] = null; } } } } } }

Read the article

Success function not being called when form is submitted. jQuery / validationEngine / PHP form proce

- by Tom Hartman

Hi, I've been trying to figure out why the following script's success function isn't running. Everything in my form works perfectly, and the form contents are being emailed correctly, but the success function isn't being called. If anyone could review my code and let me know why my success function isn't being called I would very much appreciate it! Here is the HTML form with notification divs, which are hidden via css: <div id="success" class="notification"> <p>Thank you! Your message has been sent.</p> </div> <div id="failure" class="notification"> <p>Sorry, your message could not be sent.</p> </div> <form id="contact-form" method="post" action="" class="jqtransform"> <label for="name">Name:</label> <input name="name" id="name" type="text" class="validate[required] input" /> <label for="company">Company:</label> <input name="company" id="company" type="text" class="input" /> <label for="phone">Phone:</label> <input name="phone" id="phone" type="text" class="input" /> <label for="email">Email:</label> <input name="email" id="email" type="text" class="validate[required,email] input" /> <div class="sep"></div> <label for="subject">Subject:</label> <input name="subject" id="subject" type="text" class="validate[required] input" /> <div class="clear"></div> <label for="message">Message:</label> <textarea name="message" id="message" class="validate[required]"></textarea> <div id="check-services"> <input type="checkbox" name="services[]" value="Contractor Recommendation" /> <div>Contractor Recommendation</div> <input type="checkbox" name="services[]" value="Proposal Review" /> <div>Proposal Review</div> <input type="checkbox" name="services[]" value="Existing Website Review" /> <div>Existing Website Review</div> <input type="checkbox" name="services[]" value="Work Evaluation" /> <div>Work Evaluation</div> <input type="checkbox" name="services[]" value="Layman Translation" /> <div>Layman Translation</div> <input type="checkbox" name="services[]" value="Project Management" /> <div>Project Management</div> </div> <div class="sep"></div> <input name="submit" id="submit" type="submit" class="button" value="Send" /> <input name="reset" id="reset" type="reset" class="button" value="Clear" onclick="$.validationEngine.closePrompt('.formError',true)" /> </form> Here is the javascript: // CONTACT FORM VALIDATION AND SUBMISSION $(document).ready(function(){ $('#contact-form').validationEngine({ ajaxSubmit: true, ajaxSubmitFile: 'lib/mail.php', scroll: false, success: function(){ $('#success').slideDown(); }, failure: function(){ $('#failure').slideDown(); $('.formError').animate({ marginTop: '+30px' }); } }); }); And here is my PHP mailer script: <?php $name = $_POST['name']; $company = $_POST['company']; $phone = $_POST['phone']; $email = $_POST['email']; $subject = $_POST['subject']; $message = $_POST['message']; $services = $_POST['services']; $to = '[email protected]'; $subject = 'THC - Contact'; $content .= "You received a message from ".$name.".\r\n\n"; if ($company): $content .= "They work for ".$company.".\r\n\n"; endif; $content .= "Here's the message:\r\n\n".$message."\r\n\n"; $content .= "And they are interested in the services below:\r\n\n"; $content .= implode("\r\n",$services); if ($phone): $content .= "\r\n\nYou can reach them at ".$phone."."; else: $content .= "\r\n\nNo phone number was provided."; endif; $headers = "From: ".$name."\r\n"; $headers .= "Reply-To: ".$email."\r\n"; if (mail($to,$subject,$content,$headers)): return true; else: return false; endif; ?>

Read the article

jQuery Templates - {Supported Tags}

- by hajan

I have started with Introduction to jQuery Templates, then jQuery Templates - tmpl(), template() and tmplItem() functions. In this blog we will see what supported tags are available in the jQuery Templates plugin.Template tags can be used inside template together in combination with HTML tags and plain text, which helps to iterate over JSON data. Up to now, there are several supported tags in jQuery Templates plugin: ${expr} or {{= expr}} {{each itemArray}} … {{/each}} {{if condition}} … {{else}} … {{/if}} {{html …}} {{tmpl …}} {{wrap …}} … {{/wrap}} - ${expr} or {{= expr}} Is used for insertion of data values in the rendered template. It can evaluate fields, functions or expression. Example: <script id="attendeesTemplate" type="text/html"> <li> ${Name} {{= Surname}} </li> </script> Either ${Name} or {{= Surname}} (with blank space between =<blankspace>Field) will work. - {{each itemArray}} … {{/each}} each is everywhere the same "(for)each", used to loop over array or collection Example: <script id="attendeesTemplate" type="text/html"> <li> ${Name} ${Surname} {{if speaker}} (<font color="red">speaks</font>) {{else}} (attendee) {{/if}} {{each phones}} <br /> ${$index}: <em>${$value}</em> {{/each}} </li> </script> So, you see we can use ${$index} and ${$value} to get the current index and value while iterating over the item collection. Alternatively, you can add index,value on the following way: {{each(i,v) phones}} <br /> ${i}: <em>${v}</em> {{/each}} Result would be: Here is complete working example that you can run and see the result: <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Nesting and Looping Example :: jQuery Templates</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function () { var attendees = [ { Name: "Hajan", Surname: "Selmani", speaker: true, phones:[070555555, 071888999, 071222333] }, { Name: "Someone", Surname: "Surname", phones: [070555555, 071222333] }, { Name: "Third", Surname: "Thirdsurname", phones: [070555555, 071888999, 071222333] }, ]; $("#attendeesTemplate").tmpl(attendees).appendTo("#attendeesList"); }); </script> <script id="attendeesTemplate" type="text/html"> <li> ${Name} ${Surname} {{if speaker}} (<font color="red">speaks</font>) {{else}} (attendee) {{/if}} {{each(i,v) phones}} <br /> ${i}: <em>${v}</em> {{/each}} </li> </script> </head> <body> <ol id="attendeesList"></ol> </body> </html> - {{if condition}} … {{else}} … {{/if}} Standard if/else statement. Of course, you can use it without the {{else}} if you have such condition to check, however closing the {{/if}} tag is required. Example: {{if speaker}} (<font color="red">speaks</font>) {{else}} (attendee) {{/if}} You have this same code block in the above complete example showing the 'each' cycle ;). - {{html …}} Is used for insertion of HTML markup strings in the rendered template. Evaluates the specified field on the current data item, or the specified JavaScript function or expression. Example: - without {{html …}} <script language="javascript" type="text/javascript"> $(function () { var attendees = [ { Name: "Hajan", Surname: "Selmani", Info: "He <font color='red'>is the speaker of today's</font> session", speaker: true }, ]; $("#myTemplate").tmpl(attendees).appendTo("#speakers"); }); </script> <script id="myTemplate" type="text/html"> ${Name} ${Surname} <br /> ${Info} </script> Result: - with {{html …}} <script language="javascript" type="text/javascript"> $(function () { var attendees = [ { Name: "Hajan", Surname: "Selmani", Info: "He <font color='red'>is the speaker of today's</font> session", speaker: true }, ]; $("#myTemplate").tmpl(attendees).appendTo("#speakers"); }); </script> <script id="myTemplate" type="text/html"> ${Name} ${Surname} <br /> {{html Info}} </script> Result: - {{wrap …}} It’s used for composition and incorporation of wrapped HTML. It’s similar to {{tmpl}} Example: <script id="myTmpl" type="text/html"> <div id="personInfo"> <br /> ${Name} ${Surname} {{wrap "#myWrapper"}} <h2>${Info}</h2> <div> {{if speaker}} (speaker) {{else}} (attendee) {{/if}} </div> {{/wrap}} </div> </script> <script id="myWrapper" type="text/html"> <table><tbody> <tr> {{each $item.html("div")}} <td> {{html $value}} </td> {{/each}} </tr> </tbody></table> </script> All the HTMl content inside the {{wrap}} … {{/wrap}} is available to the $item.html(filter, textOnly) method. In our example, we have defined some standard template and created wrapper which calls the other template with id myWrapper. Then using $item.html(“div”) we find the div tag and render the html value (together with the div tag) inside the <td> … </td>. So, here inside td the <div> <speaker or attendee depending of the condition> </div> will be rendered. The HTML output from this is: - {{tmpl …}} Used for composition as template items Example: <script id="myTemplate" type="text/html"> <div id="bookItem"> <div id="bookCover"> {{tmpl "#bookCoverTemplate"}} </div> <div id="bookDetails"> <div id="book"> ${title} - ${author} </div> <div id="price">$${price}</div> <div id="Details">${pages} pgs. - ${year} year</div> </div> </div> </script> <script id="bookCoverTemplate" type="text/html"> <img src="${image}" alt="${title} Image" /> </script> In this example, using {{tmpl “#bookCoverTemplate”}} I’m calling another template inside the first template. In the other template I’ve created template for a book cover. The rendered HTML of this is: and So we have seen example for each of the tags that are right now available in the jQuery Templates (beta) plugin which is created by Microsoft as a contribution to the open source jQuery Project. I hope this was useful blog post for you. Regards, HajanNEXT - jQuery Templates with ASP.NET MVC

Read the article

Event Handlers Not Getting Called? - wxWidgets & C++

- by Alex

Hello all, I'm working on a program for my C++ programming class, using wxWidgets. I'm having a huge problem in that my event handlers (I assume) are not getting called, because when I click on the button to trigger the event, nothing happens. My question is: Can you help me find the problem and explain why they would not be getting called? The event handlers OnAbout and OnQuit are working, just not OnCompute or OnClear. I'm really frustrated as I can't figure this out. Thanks a bunch in advance! #include "wx/wx.h" #include "time.h" #include <string> using std::string; // create object of Time class Time first; class App: public wxApp { virtual bool OnInit(); }; class MainPanel : public wxPanel { public: // Constructor for panel class // Constructs my panel class // Params - wxWindow pointer // no return type // pre-conditions: none // post-conditions: none MainPanel(wxWindow* parent); // OnCompute is the event handler for the Compute button // params - none // preconditions - none // postconditions - tasks will have been carried otu successfully // returns void void OnCompute(wxCommandEvent& WXUNUSED(event)); // OnClear is the event handler for the Clear button // params - none // preconditions - none // postconditions - all text areas will be cleared of data // returns void void OnClear(wxCommandEvent& WXUNUSED(event)); // Destructor for panel class // params none // preconditions - none // postconditions - none // no return type ~MainPanel( ); private: wxStaticText *startLabel; wxStaticText *endLabel; wxStaticText *pCLabel; wxStaticText *newEndLabel; wxTextCtrl *start; wxTextCtrl *end; wxTextCtrl *pC; wxTextCtrl *newEnd; wxButton *compute; wxButton *clear; DECLARE_EVENT_TABLE() }; class MainFrame: public wxFrame { private: wxPanel *mainPanel; public: MainFrame(const wxString& title, const wxPoint& pos, const wxSize& size); void OnQuit(wxCommandEvent& event); void OnAbout(wxCommandEvent& event); ~MainFrame(); DECLARE_EVENT_TABLE() }; enum { ID_Quit = 1, ID_About, BUTTON_COMPUTE = 100, BUTTON_CLEAR = 200 }; IMPLEMENT_APP(App) BEGIN_EVENT_TABLE(MainFrame, wxFrame) EVT_MENU(ID_Quit, MainFrame::OnQuit) EVT_MENU(ID_About, MainFrame::OnAbout) END_EVENT_TABLE() BEGIN_EVENT_TABLE(MainPanel, wxPanel) EVT_MENU(BUTTON_COMPUTE, MainPanel::OnCompute) EVT_MENU(BUTTON_CLEAR, MainPanel::OnClear) END_EVENT_TABLE() bool App::OnInit() { MainFrame *frame = new MainFrame( _("Good Guys Delivery Time Calculator"), wxPoint(50, 50), wxSize(450,340) ); frame->Show(true); SetTopWindow(frame); return true; } MainPanel::MainPanel(wxWindow* parent) : wxPanel(parent) { startLabel = new wxStaticText(this, -1, "Start Time:", wxPoint(75, 35)); start = new wxTextCtrl(this, -1, "", wxPoint(135, 35), wxSize(40, 21)); endLabel = new wxStaticText(this, -1, "End Time:", wxPoint(200, 35)); end = new wxTextCtrl(this, -1, "", wxPoint(260, 35), wxSize(40, 21)); pCLabel = new wxStaticText(this, -1, "Percent Change:", wxPoint(170, 85)); pC = new wxTextCtrl(this, -1, "", wxPoint(260, 85), wxSize(40, 21)); newEndLabel = new wxStaticText(this, -1, "New End Time:", wxPoint(180, 130)); newEnd = new wxTextCtrl(this, -1, "", wxPoint(260, 130), wxSize(40, 21)); compute = new wxButton(this, BUTTON_COMPUTE, "Compute", wxPoint(135, 185), wxSize(75, 35)); clear = new wxButton(this, BUTTON_CLEAR, "Clear", wxPoint(230, 185), wxSize(75, 35)); } MainPanel::~MainPanel() {} MainFrame::MainFrame(const wxString& title, const wxPoint& pos, const wxSize& size) : wxFrame( NULL, -1, title, pos, size ) { mainPanel = new MainPanel(this); wxMenu *menuFile = new wxMenu; menuFile->Append( ID_About, _("&About...") ); menuFile->AppendSeparator(); menuFile->Append( ID_Quit, _("E&xit") ); wxMenuBar *menuBar = new wxMenuBar; menuBar->Append( menuFile, _("&File") ); SetMenuBar( menuBar ); CreateStatusBar(); SetStatusText( _("Hi") ); } MainFrame::~MainFrame() {} void MainFrame::OnQuit(wxCommandEvent& WXUNUSED(event)) { Close(TRUE); } void MainFrame::OnAbout(wxCommandEvent& WXUNUSED(event)) { wxMessageBox( _("Alex Olson\nProject 11"), _("About"), wxOK | wxICON_INFORMATION, this); } void MainPanel::OnCompute(wxCommandEvent& WXUNUSED(event)) { int startT; int endT; int newEndT; double tD; wxString startTString = start->GetValue(); wxString endTString = end->GetValue(); startT = wxAtoi(startTString); endT = wxAtoi(endTString); pC->GetValue().ToDouble(&tD); first.SetStartTime(startT); first.SetEndTime(endT); first.SetTimeDiff(tD); try { first.ValidateData(); newEndT = first.ComputeEndTime(); *newEnd << newEndT; } catch (BaseException& e) { wxMessageBox(_(e.GetMessage()), _("Something Went Wrong!"), wxOK | wxICON_INFORMATION, this); } } void MainPanel::OnClear(wxCommandEvent& WXUNUSED(event)) { start->Clear(); end->Clear(); pC->Clear(); newEnd->Clear(); }

Read the article

Metro Walkthrough: Creating a Task List with a ListView and IndexedDB

- by Stephen.Walther

The goal of this blog entry is to describe how you can work with data in a Metro style application written with JavaScript. In particular, we create a super simple Task List application which enables you to create and delete tasks. Here’s a video which demonstrates how the Task List application works: In order to build this application, I had to take advantage of several features of the WinJS library and technologies including: IndexedDB – The Task List application stores data in an IndexedDB database. HTML5 Form Validation – The Task List application uses HTML5 validation to ensure that a required field has a value. ListView Control – The Task List application displays the tasks retrieved from the IndexedDB database in a WinJS ListView control. Creating the IndexedDB Database The Task List application stores all of its data in an IndexedDB database named TasksDB. This database is opened/created with the following code: var db; var req = window.msIndexedDB.open("TasksDB", 1); req.onerror = function () { console.log("Could not open database"); }; req.onupgradeneeded = function (evt) { var newDB = evt.target.result; newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement:true }); }; The msIndexedDB.open() method accepts two parameters: the name of the database to open and the version of the database to open. If a database with a matching version already exists, then calling the msIndexedDB.open() method opens a connection to the existing database. If the database does not exist then the upgradeneeded event is raised. You handle the upgradeneeded event to create a new database. In the code above, the upgradeneeded event handler creates an object store named “tasks” (An object store roughly corresponds to a database table). When you add items to the tasks object store then each item gets an id property with an auto-incremented value automatically. The code above also includes an error event handler. If the IndexedDB database cannot be opened or created, for whatever reason, then an error message is written to the Visual Studio JavaScript Console window. Displaying a List of Tasks The TaskList application retrieves its list of tasks from the tasks object store, which we created above, and displays the list of tasks in a ListView control. Here is how the ListView control is declared: <div id="tasksListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: TaskList.tasks.dataSource, itemTemplate: select('#taskTemplate'), tapBehavior: 'toggleSelect', selectionMode: 'multi', layout: { type: WinJS.UI.ListLayout } }"> </div> The ListView control is bound to the TaskList.tasks.dataSource data source. The TaskList.tasks.dataSource is created with the following code: // Create the data source var tasks = new WinJS.Binding.List(); // Open the database var db; var req = window.msIndexedDB.open("TasksDB", 1); req.onerror = function () { console.log("Could not open database"); }; req.onupgradeneeded = function (evt) { var newDB = evt.target.result; newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement:true }); }; // Load the data source with data from the database req.onsuccess = function () { db = req.result; var tran = db.transaction("tasks"); tran.objectStore("tasks").openCursor().onsuccess = function(event) { var cursor = event.target.result; tasks.dataSource.beginEdits(); if (cursor) { tasks.dataSource.insertAtEnd(null, cursor.value); cursor.continue(); } else { tasks.dataSource.endEdits(); }; }; }; // Expose the data source and functions WinJS.Namespace.define("TaskList", { tasks: tasks }); Notice the success event handler. This handler is called when a database is successfully opened/created. In the code above, all of the items from the tasks object store are retrieved into a cursor and added to a WinJS.Binding.List object named tasks. Because the ListView control is bound to the WinJS.Binding.List object, copying the tasks from the object store into the WinJS.Binding.List object causes the tasks to appear in the ListView: Adding a New Task You add a new task in the Task List application by entering the title of a new task into an HTML form and clicking the Add button. Here’s the markup for creating the form: <form id="addTaskForm"> <input id="newTaskTitle" title="New Task" required /> <button>Add</button> </form> Notice that the INPUT element includes a required attribute. In a Metro application, you can take advantage of HTML5 Validation to validate form fields. If you don’t enter a value for the newTaskTitle field then the following validation error message is displayed: For a brief introduction to HTML5 validation, see my previous blog entry: http://stephenwalther.com/blog/archive/2012/03/13/html5-form-validation.aspx When you click the Add button, the form is submitted and the form submit event is raised. The following code is executed in the default.js file: // Handle Add Task document.getElementById("addTaskForm").addEventListener("submit", function (evt) { evt.preventDefault(); var newTaskTitle = document.getElementById("newTaskTitle"); TaskList.addTask({ title: newTaskTitle.value }); newTaskTitle.value = ""; }); The code above retrieves the title of the new task and calls the addTask() method in the tasks.js file. Here’s the code for the addTask() method which is responsible for actually adding the new task to the IndexedDB database: // Add a new task function addTask(taskToAdd) { var transaction = db.transaction("tasks", IDBTransaction.READ_WRITE); var addRequest = transaction.objectStore("tasks").add(taskToAdd); addRequest.onsuccess = function (evt) { taskToAdd.id = evt.target.result; tasks.dataSource.insertAtEnd(null, taskToAdd); } } The code above does two things. First, it adds the new task to the tasks object store in the IndexedDB database. Second, it adds the new task to the data source bound to the ListView. The dataSource.insertAtEnd() method is called to add the new task to the data source so the new task will appear in the ListView (with a nice little animation). Deleting Existing Tasks The Task List application enables you to select one or more tasks by clicking or tapping on one or more tasks in the ListView. When you click the Delete button, the selected tasks are removed from both the IndexedDB database and the ListView. For example, in the following screenshot, two tasks are selected. The selected tasks appear with a teal background and a checkmark: When you click the Delete button, the following code in the default.js file is executed: // Handle Delete Tasks document.getElementById("btnDeleteTasks").addEventListener("click", function (evt) { tasksListView.winControl.selection.getItems().then(function(items) { items.forEach(function (item) { TaskList.deleteTask(item); }); }); }); The selected tasks are retrieved with the TaskList selection.getItem() method. In the code above, the deleteTask() method is called for each of the selected tasks. Here’s the code for the deleteTask() method: // Delete an existing task function deleteTask(listViewItem) { // Database key != ListView key var dbKey = listViewItem.data.id; var listViewKey = listViewItem.key; // Remove item from db and, if success, remove item from ListView var transaction = db.transaction("tasks", IDBTransaction.READ_WRITE); var deleteRequest = transaction.objectStore("tasks").delete(dbKey); deleteRequest.onsuccess = function () { tasks.dataSource.remove(listViewKey); } } This code does two things: it deletes the existing task from the database and removes the existing task from the ListView. In both cases, the right task is removed by using the key associated with the task. However, the task key is different in the case of the database and in the case of the ListView. In the case of the database, the task key is the value of the task id property. In the case of the ListView, on the other hand, the task key is auto-generated by the ListView. When the task is removed from the ListView, an animation is used to collapse the tasks which appear above and below the task which was removed. The Complete Code Above, I did a lot of jumping around between different files in the application and I left out sections of code. For the sake of completeness, I want to include the entire code here: the default.html, default.js, and tasks.js files. Here are the contents of the default.html file. This file contains the UI for the Task List application: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Task List</title>  <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.0.6/js/base.js"></script> <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>  <link href="/css/default.css" rel="stylesheet"> <script src="/js/default.js"></script> <script type="text/javascript" src="js/tasks.js"></script> <style type="text/css"> body { font-size: x-large; } form { display: inline; } #appContainer { margin: 20px; width: 600px; } .win-container { padding: 10px; } </style> </head> <body> <div>  <div id="taskTemplate" data-win-control="WinJS.Binding.Template"> <div> <span data-win-bind="innerText:title"></span> </div> </div> <h1>Super Task List</h1> <div id="appContainer"> <form id="addTaskForm"> <input id="newTaskTitle" title="New Task" required /> <button>Add</button> </form> <button id="btnDeleteTasks">Delete</button> <div id="tasksListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: TaskList.tasks.dataSource, itemTemplate: select('#taskTemplate'), tapBehavior: 'toggleSelect', selectionMode: 'multi', layout: { type: WinJS.UI.ListLayout } }"> </div> </div> </div> </body> </html> Here is the code for the default.js file. This code wires up the Add Task form and Delete button: (function () { "use strict"; var app = WinJS.Application; app.onactivated = function (eventObject) { if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { WinJS.UI.processAll().then(function () { // Get reference to Tasks ListView var tasksListView = document.getElementById("tasksListView"); // Handle Add Task document.getElementById("addTaskForm").addEventListener("submit", function (evt) { evt.preventDefault(); var newTaskTitle = document.getElementById("newTaskTitle"); TaskList.addTask({ title: newTaskTitle.value }); newTaskTitle.value = ""; }); // Handle Delete Tasks document.getElementById("btnDeleteTasks").addEventListener("click", function (evt) { tasksListView.winControl.selection.getItems().then(function(items) { items.forEach(function (item) { TaskList.deleteTask(item); }); }); }); }); } }; app.start(); })(); Finally, here is the tasks.js file. This file contains all of the code for opening, creating, and interacting with IndexedDB: (function () { "use strict"; // Create the data source var tasks = new WinJS.Binding.List(); // Open the database var db; var req = window.msIndexedDB.open("TasksDB", 1); req.onerror = function () { console.log("Could not open database"); }; req.onupgradeneeded = function (evt) { var newDB = evt.target.result; newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement:true }); }; // Load the data source with data from the database req.onsuccess = function () { db = req.result; var tran = db.transaction("tasks"); tran.objectStore("tasks").openCursor().onsuccess = function(event) { var cursor = event.target.result; tasks.dataSource.beginEdits(); if (cursor) { tasks.dataSource.insertAtEnd(null, cursor.value); cursor.continue(); } else { tasks.dataSource.endEdits(); }; }; }; // Add a new task function addTask(taskToAdd) { var transaction = db.transaction("tasks", IDBTransaction.READ_WRITE); var addRequest = transaction.objectStore("tasks").add(taskToAdd); addRequest.onsuccess = function (evt) { taskToAdd.id = evt.target.result; tasks.dataSource.insertAtEnd(null, taskToAdd); } } // Delete an existing task function deleteTask(listViewItem) { // Database key != ListView key var dbKey = listViewItem.data.id; var listViewKey = listViewItem.key; // Remove item from db and, if success, remove item from ListView var transaction = db.transaction("tasks", IDBTransaction.READ_WRITE); var deleteRequest = transaction.objectStore("tasks").delete(dbKey); deleteRequest.onsuccess = function () { tasks.dataSource.remove(listViewKey); } } // Expose the data source and functions WinJS.Namespace.define("TaskList", { tasks: tasks, addTask: addTask, deleteTask: deleteTask }); })(); Summary I wrote this blog entry because I wanted to create a walkthrough of building a simple database-driven application. In particular, I wanted to demonstrate how you can use a ListView control with an IndexedDB database to store and retrieve database data.

Read the article

More Animation - Self Dismissing Dialogs

- by Duncan Mills

In my earlier articles on animation, I discussed various slide, grow and flip transitions for items and containers. In this article I want to discuss a fade animation and specifically the use of fades and auto-dismissal for informational dialogs. If you use a Mac, you may be familiar with Growl as a notification system, and the nice way that messages that are informational just fade out after a few seconds. So in this blog entry I wanted to discuss how we could make an ADF popup behave in the same way. This can be an effective way of communicating information to the user without "getting in the way" with modal alerts. This of course, has been done before, but everything I've seen previously requires something like JQuery to be in the mix when we don't really need it to be. The solution I've put together is nice and generic and will work with either <af:panelWindow> or <af:dialog> as a the child of the popup. In terms of usage it's pretty simple to use we just need to ensure that the popup itself has clientComponent is set to true and includes the animation JavaScript (animateFadingPopup) on a popupOpened event: <af:popup id="pop1" clientComponent="true"> <af:panelWindow title="A Fading Message..."> ... </af:panelWindow> <af:clientListener method="animateFadingPopup" type="popupOpened"/> </af:popup> The popup can be invoked in the normal way using showPopupBehavior or JavaScript, no special code is required there. As a further twist you can include an additional clientAttribute called preFadeDelay to define a delay before the fade itself starts (the default is 5 seconds) . To set the delay to just 2 seconds for example: <af:popup ...> ... <af:clientAttribute name="preFadeDelay" value="2"/> <af:clientListener method="animateFadingPopup" type="popupOpened"/> </af:popup> The Animation Styles As before, we have a couple of CSS Styles which define the animation, I've put these into the skin in my case, and, as in the other articles, I've only defined the transitions for WebKit browsers (Chrome, Safari) at the moment. In this case, the fade is timed at 5 seconds in duration. .popupFadeReset { opacity: 1; } .popupFadeAnimate { opacity: 0; -webkit-transition: opacity 5s ease-in-out; } As you can see here, we are achieving the fade by simply setting the CSS opacity property. The JavaScript The final part of the puzzle is, of course, the JavaScript, there are four functions, these are generic (apart from the Style names which, if you've changed above, you'll need to reflect here): The initial function invoked from the popupOpened event, animateFadingPopup which starts a timer and provides the initial delay before we start to fade the popup. The function that applies the fade animation to the popup - initiatePopupFade. The callback function - closeFadedPopup used to reset the style class and correctly hide the popup so that it can be invoked again and again. A utility function - findFadeContainer, which is responsible for locating the correct child component of the popup to actually apply the style to. Function - animateFadingPopup This function, as stated is the one hooked up to the popupOpened event via a clientListener. Because of when the code is called it does not actually matter how you launch the popup, or if the popup is re-used from multiple places. All usages will get the fade behavior. /** * Client listener which will kick off the animation to fade the dialog and register * a callback to correctly reset the popup once the animation is complete * @param event */ function animateFadingPopup(event) { var fadePopup = event.getSource(); var fadeCandidate = false; //Ensure that the popup is initially Opaque //This handles the situation where the user has dismissed //the popup whilst it was in the process of fading var fadeContainer = findFadeContainer(fadePopup); if (fadeContainer != null) { fadeCandidate = true; fadeContainer.setStyleClass("popupFadeReset"); } //Only continue if we can actually fade this popup if (fadeCandidate) { //See if a delay has been specified var waitTimeSeconds = event.getSource().getProperty('preFadeDelay'); //Default to 5 seconds if not supplied if (waitTimeSeconds == undefined) { waitTimeSeconds = 5; } // Now call the fade after the specified time var fadeFunction = function () { initiatePopupFade(fadePopup); }; var fadeDelayTimer = setTimeout(fadeFunction, (waitTimeSeconds * 1000)); } } The things to note about this function is the initial check that we have to do to ensure that the container is currently visible and reset it's style to ensure that it is. This is to handle the situation where the popup has begun the fade, and yet the user has still explicitly dismissed the popup before it's complete and in doing so has prevented the callback function (described later) from executing. In this particular situation the initial display of the dialog will be (apparently) missing it's normal animation but at least it becomes visible to the user (and most users will probably not notice this difference in any case). You'll notice that the style that we apply to reset the opacity - popupFadeReset, is not applied to the popup component itself but rather the dialog or panelWindow within it. More about that in the description of the next function findFadeContainer(). Finally, assuming that we have a suitable candidate for fading, a JavaScript timer is started using the specified preFadeDelay wait time (or 5 seconds if that was not supplied). When this timer expires then the main animation styleclass will be applied using the initiatePopupFade() function Function - findFadeContainer As a component, the <af:popup> does not support styleClass attribute, so we can't apply the animation style directly. Instead we have to look for the container within the popup which defines the window object that can have a style attached. This is achieved by the following code: /** * The thing we actually fade will be the only child * of the popup assuming that this is a dialog or window * @param popup * @return the component, or null if this is not valid for fading */ function findFadeContainer(popup) { var children = popup.getDescendantComponents(); var fadeContainer = children[0]; if (fadeContainer != undefined) { var compType = fadeContainer.getComponentType(); if (compType == "oracle.adf.RichPanelWindow" || compType == "oracle.adf.RichDialog") { return fadeContainer; } } return null; } So what we do here is to grab the first child component of the popup and check its type. Here I decided to limit the fade behaviour to only <af:dialog> and <af:panelWindow>. This was deliberate. If we apply the fade to say an <af:noteWindow> you would see the text inside the balloon fade, but the balloon itself would hang around until the fade animation was over and then hide. It would of course be possible to make the code smarter to walk up the DOM tree to find the correct <div> to apply the style to in order to hide the whole balloon, however, that means that this JavaScript would then need to have knowledge of the generated DOM structure, something which may change from release to release, and certainly something to avoid. So, all in all, I think that this is an OK restriction and frankly it's windows and dialogs that I wanted to fade anyway, not balloons and menus. You could of course extend this technique and handle the other types should you really want to. One thing to note here is the selection of the first (children[0]) child of the popup. It does not matter if there are non-visible children such as clientListener before the <af:dialog> or <af:panelWindow> within the popup, they are not included in this array, so picking the first element in this way seems to be fine, no matter what the underlying ordering is within the JSF source. If you wanted a super-robust version of the code you might want to iterate through the children array of the popup to check for the right type, again it's up to you. Function - initiatePopupFade On to the actual fading. This is actually very simple and at it's heart, just the application of the popupFadeAnimate style to the correct component and then registering a callback to execute once the fade is done. /** * Function which will kick off the animation to fade the dialog and register * a callback to correctly reset the popup once the animation is complete * @param popup the popup we are animating */ function initiatePopupFade(popup) { //Only continue if the popup has not already been dismissed if (popup.isPopupVisible()) { //The skin styles that define the animation var fadeoutAnimationStyle = "popupFadeAnimate"; var fadeAnimationResetStyle = "popupFadeReset"; var fadeContainer = findFadeContainer(popup); if (fadeContainer != null) { var fadeContainerReal = AdfAgent.AGENT.getElementById(fadeContainer.getClientId()); //Define the callback this will correctly reset the popup once it's disappeared var fadeCallbackFunction = function (event) { closeFadedPopup(popup, fadeContainer, fadeAnimationResetStyle); event.target.removeEventListener("webkitTransitionEnd", fadeCallbackFunction); }; //Initiate the fade fadeContainer.setStyleClass(fadeoutAnimationStyle); //Register the callback to execute once fade is done fadeContainerReal.addEventListener("webkitTransitionEnd", fadeCallbackFunction, false); } } } I've added some extra checks here though. First of all we only start the whole process if the popup is still visible. It may be that the user has closed the popup before the delay timer has finished so there is no need to start animating in that case. Again we use the findFadeContainer() function to locate the correct component to apply the style to, and additionally we grab the DOM id that represents that container. This physical ID is required for the registration of the callback function. The closeFadedPopup() call is then registered on the callback so as to correctly close the now transparent (but still there) popup. Function - closeFadedPopup The final function just cleans things up: /** * Callback function to correctly cancel and reset the style in the popup * @param popup id of the popup so we can close it properly * @param contatiner the window / dialog within the popup to actually style * @param resetStyle the syle that sets the opacity back to solid */ function closeFadedPopup(popup, container, resetStyle) { container.setStyleClass(resetStyle); popup.cancel(); } First of all we reset the style to make the popup contents opaque again and then we cancel the popup. This will ensure that any of your user code that is waiting for a popup cancelled event will actually get the event, additionally if you have done this as a modal window / dialog it will ensure that the glasspane is dismissed and you can interact with the UI again. What's Next? There are several ways in which this technique could be used, I've been working on a popup here, but you could apply the same approach to in-line messages. As this code (in the popup case) is generic it will make s pretty nice declarative component and maybe, if I get time, I'll look at constructing a formal Growl component using a combination of this technique, and active data push. Also, I'm sure the above code can be improved a little too. Specifically things like registering a popup cancelled listener to handle the style reset so that we don't loose the subtle animation that takes place when the popup is opened in that situation where the user has closed the in-fade dialog.

Read the article

mfc tab control switch tabs

- by MRM

I created a simple tab control that has 2 tabs (each tab is a different dialog). The thing is that i don't have any idea how to switch between tabs (when the user presses Titlu Tab1 to show the dialog i made for the first tab, and when it presses Titlu Tab2 to show my other dialog). I added a handler for changing items, but i don't know how should i acces some kind of index or child for tabs. Tab1.h and Tab2.h are headers for dialogs that show only static texts with the name of the each tab. There may be an obvious answer to my question, but i am a real newbie in c++ and MFC. This is my header: // CTabControlDlg.h : header file // #pragma once #include "afxcmn.h" #include "Tab1.h" #include "Tab2.h" // CCTabControlDlg dialog class CCTabControlDlg : public CDialog { // Construction public: CCTabControlDlg(CWnd* pParent = NULL); // standard constructor // Dialog Data enum { IDD = IDD_CTABCONTROL_DIALOG }; protected: virtual void DoDataExchange(CDataExchange* pDX); // DDX/DDV support // Implementation protected: HICON m_hIcon; // Generated message map functions virtual BOOL OnInitDialog(); afx_msg void OnSysCommand(UINT nID, LPARAM lParam); afx_msg void OnPaint(); afx_msg HCURSOR OnQueryDragIcon(); DECLARE_MESSAGE_MAP() public: CTabCtrl m_tabcontrol1; CTab1 m_tab1; CTab2 m_tab2; afx_msg void OnTcnSelchangeTabcontrol(NMHDR *pNMHDR, LRESULT *pResult); }; And this is the .cpp: // CTabControlDlg.cpp : implementation file // #include "stdafx.h" #include "CTabControl.h" #include "CTabControlDlg.h" #ifdef _DEBUG #define new DEBUG_NEW #endif // CAboutDlg dialog used for App About class CAboutDlg : public CDialog { public: CAboutDlg(); // Dialog Data enum { IDD = IDD_ABOUTBOX }; protected: virtual void DoDataExchange(CDataExchange* pDX); // DDX/DDV support // Implementation protected: DECLARE_MESSAGE_MAP() }; CAboutDlg::CAboutDlg() : CDialog(CAboutDlg::IDD) { } void CAboutDlg::DoDataExchange(CDataExchange* pDX) { CDialog::DoDataExchange(pDX); } BEGIN_MESSAGE_MAP(CAboutDlg, CDialog) END_MESSAGE_MAP() // CCTabControlDlg dialog CCTabControlDlg::CCTabControlDlg(CWnd* pParent /*=NULL*/) : CDialog(CCTabControlDlg::IDD, pParent) { m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME); } void CCTabControlDlg::DoDataExchange(CDataExchange* pDX) { CDialog::DoDataExchange(pDX); DDX_Control(pDX, IDC_TABCONTROL, m_tabcontrol1); } BEGIN_MESSAGE_MAP(CCTabControlDlg, CDialog) ON_WM_SYSCOMMAND() ON_WM_PAINT() ON_WM_QUERYDRAGICON() //}}AFX_MSG_MAP ON_NOTIFY(TCN_SELCHANGE, IDC_TABCONTROL, &CCTabControlDlg::OnTcnSelchangeTabcontrol) END_MESSAGE_MAP() // CCTabControlDlg message handlers BOOL CCTabControlDlg::OnInitDialog() { CDialog::OnInitDialog(); // Add "About..." menu item to system menu. // IDM_ABOUTBOX must be in the system command range. ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX); ASSERT(IDM_ABOUTBOX < 0xF000); CMenu* pSysMenu = GetSystemMenu(FALSE); if (pSysMenu != NULL) { CString strAboutMenu; strAboutMenu.LoadString(IDS_ABOUTBOX); if (!strAboutMenu.IsEmpty()) { pSysMenu->AppendMenu(MF_SEPARATOR); pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu); } } // Set the icon for this dialog. The framework does this automatically // when the application's main window is not a dialog SetIcon(m_hIcon, TRUE); // Set big icon SetIcon(m_hIcon, FALSE); // Set small icon // TODO: Add extra initialization here CTabCtrl* pTabCtrl = (CTabCtrl*)GetDlgItem(IDC_TABCONTROL); m_tab1.Create(IDD_TAB1, pTabCtrl); TCITEM item1; item1.mask = TCIF_TEXT | TCIF_PARAM; item1.lParam = (LPARAM)& m_tab1; item1.pszText = _T("Titlu Tab1"); pTabCtrl->InsertItem(0, &item1); //Pozitionarea dialogului CRect rcItem; pTabCtrl->GetItemRect(0, &rcItem); m_tab1.SetWindowPos(NULL, rcItem.left, rcItem.bottom + 1, 0, 0, SWP_NOSIZE | SWP_NOZORDER ); m_tab1.ShowWindow(SW_SHOW); // al doilea tab m_tab2.Create(IDD_TAB2, pTabCtrl); TCITEM item2; item2.mask = TCIF_TEXT | TCIF_PARAM; item2.lParam = (LPARAM)& m_tab1; item2.pszText = _T("Titlu Tab2"); pTabCtrl->InsertItem(0, &item2); //Pozitionarea dialogului //CRect rcItem; pTabCtrl->GetItemRect(0, &rcItem); m_tab2.SetWindowPos(NULL, rcItem.left, rcItem.bottom + 1, 0, 0, SWP_NOSIZE | SWP_NOZORDER ); m_tab2.ShowWindow(SW_SHOW); return TRUE; // return TRUE unless you set the focus to a control } void CCTabControlDlg::OnSysCommand(UINT nID, LPARAM lParam) { if ((nID & 0xFFF0) == IDM_ABOUTBOX) { CAboutDlg dlgAbout; dlgAbout.DoModal(); } else { CDialog::OnSysCommand(nID, lParam); } } // If you add a minimize button to your dialog, you will need the code below // to draw the icon. For MFC applications using the document/view model, // this is automatically done for you by the framework. void CCTabControlDlg::OnPaint() { if (IsIconic()) { CPaintDC dc(this); // device context for painting SendMessage(WM_ICONERASEBKGND, reinterpret_cast<WPARAM>(dc.GetSafeHdc()), 0); // Center icon in client rectangle int cxIcon = GetSystemMetrics(SM_CXICON); int cyIcon = GetSystemMetrics(SM_CYICON); CRect rect; GetClientRect(&rect); int x = (rect.Width() - cxIcon + 1) / 2; int y = (rect.Height() - cyIcon + 1) / 2; // Draw the icon dc.DrawIcon(x, y, m_hIcon); } else { CDialog::OnPaint(); } } // The system calls this function to obtain the cursor to display while the user drags // the minimized window. HCURSOR CCTabControlDlg::OnQueryDragIcon() { return static_cast<HCURSOR>(m_hIcon); } void CCTabControlDlg::OnTcnSelchangeTabcontrol(NMHDR *pNMHDR, LRESULT *pResult) { // TODO: Add your control notification handler code here *pResult = 0; }

Search Results

Search found 24848 results on 994 pages for 'true soft'.

Page 352/994 | < Previous Page | 348 349 350 351 352 353 354 355 356 357 358 359 | Next Page >

- by tloflin

- by Nemi

- by Alex

- by James Michael Hare

- by FransBouma

- by Pinu

- by Jordan Magnuson

- by ChaosPandion

- by Stephen.Walther

- by kayn

- by cibrax

- by David Jacobus

- by NotMyself

- by Stephen.Walther

- by Tegan Snyder

- by danit

- by Dmitry

- by Tom Hartman

- by hajan

- by Alex

- by Stephen.Walther

- by Duncan Mills

- by MRM

< Previous Page | 348 349 350 351 352 353 354 355 356 357 358 359 | Next Page >