right mouse button - Page 553

how to add multiple filters to pagination?

- by ClarkSKent

Hey, I am trying to allow multiple filters to be selected for my pagination script. So in my pagination, when a user clicks the 'marketing' button(link) it queries the database just for the category that = marketing. The same goes for the other 2 filter buttons as seen in the script below. (automotive, sports). The problem is, I want to be able to select multiple filters like only marketing and auomotive or automotive and sports, for example if I click the marketing filter and then the automotive, it would display the categories that equal marketing, and automotive. I have no idea how to accomplish this, so I have come to the experts to help me out. This is the script I am working on (I am very new to PHP and programming in general): <h3>Filter results by:</h3> <a href='pagi_test.php?category=marketing'>marketing</a> <a href='pagi_test.php?category=automotive'>automotive</a> <a href='pagi_test.php?category=sports'>sports</a> <br /> <h3>Results:</h3> <?php //connecting to the database $error = "Could not connect to the database"; mysql_connect('localhost','root','root') or die($error); mysql_select_db('ajax_demo') or die($error); //max displayed per page $per_page = 3; //get start variable $start = $_GET['start']; $category = mysql_real_escape_string($_GET['category']); //count records $record_count = mysql_num_rows(mysql_query("SELECT * FROM explore WHERE category='$category'")); //count max pages $max_pages = $record_count / $per_page; //may come out as decimal if (!$start) $start = 0; //display data $get = mysql_query("SELECT * FROM explore WHERE category='$category' LIMIT $start, $per_page"); ?> <table width="800px"> <?php while ($row = mysql_fetch_assoc($get)) { // get data $id = $row['id']; $site_name = $row['site_name']; $site_description = $row['site_description']; ?> <tr> <td><?php echo $id; ?></td> <td><?php echo $site_name; ?></td> <td><?php echo $site_description; ?></td> </tr> <?php } //setup prev and next variables $prev = $start - $per_page; $next = $start + $per_page; //show prev button if (!($start<=0)) echo "<a href='pagi_test.php?category=$category&start=$prev'>Prev</a> "; //show page numbers //set variable for first page $i=1; for ($x=0;$x<$record_count;$x=$x+$per_page) { if ($start!=$x) echo " <a href='pagi_test.php?category=$category&start=$x'>$i</a> "; else echo " <a href='pagi_test.php?category=$category&start=$x'><b>$i</b></a> "; $i++; } //show next button if (!($start>=$record_count-$per_page)) echo " <a href='pagi_test.php?category=$category&start=$next'>Next</a>"; ?>

Read the article

How can I hit my database with an AJAX call using javascript?

- by tmedge

I am pretty new at this stuff, so bear with me. I am using ASP.NET MVC. I have created an overlay to cover the page when someone clicks a button corresponding to a certain database entry. Because of this, ALL of my code for this functionality is in a .js file contained within my project. What I need to do is pull the info corresponding to my entry from the database itself using an AJAX call, and place that into my textboxes. Then, after the end-user has made the desired changes, I need to update that entry's values to match the input. I've been surfing the web for a while, and have failed to find an example that fits my needs effectively. Here is my code in my javascript file thus far: function editOverlay(picId) { //pull up an overlay $('body').append('<div class="overlay" />'); var $overlayClass = $('.overlay'); $overlayClass.append('<div class="dataModal" />'); var $data = $('.dataModal'); overlaySetup($overlayClass, $data); //set up form $data.append('<h1>Edit Picture</h1><br /><br />'); $data.append('Picture name:  '); $data.append('<input class="picName" /> <br /><br /><br />'); $data.append('Relative url:  '); $data.append('<input class="picRelURL" /> <br /><br /><br />'); $data.append('Description:  '); $data.append('<textarea class="picDescription" /> <br /><br /><br />'); var $nameBox = $('.picName'); var $urlBox = $('.picRelURL'); var $descBox = $('.picDescription'); var pic = null; //this is where I need to pull the actual object from the db //var imgList = for (var temp in imgList) { if (temp.Id == picId) { pic= temp; } } /* $nameBox.attr('value', pic.Name); $urlBox.attr('value', pic.RelativeURL); $descBox.attr('value', pic.Description); */ //close buttons $data.append('<input type="button" value="Save Changes" class="saveButton" />'); $data.append('<input type="button" value="Cancel" class="cancelButton" />'); $('.saveButton').click(function() { /* pic.Name = $nameBox.attr('value'); pic.RelativeURL = $urlBox.attr('value'); pic.Description = $descBox.attr('value'); */ //make a call to my Save() method in my repository CloseOverlay(); }); $('.cancelButton').click(function() { CloseOverlay(); }); } The stuff I have commented out is what I need to accomplish and/or is not available until prior issues are resolved. Any and all advice is appreciated! Remember, I am VERY new to this stuff (two weeks, to be exact) and will probably need highly explicit instructions. BTW: overlaySetup() and CloseOverlay() are functions I have living someplace else. Thanks!

Read the article

android ftp upload has stopped error

- by Goxel Arp

class Asenkron extends AsyncTask<String,Integer,Long> { @Override protected Long doInBackground(String... aurl) { FTPClient con=null; try ` { con = new FTPClient(); con.connect(aurl[0]); if (con.login(aurl[1], aurl[2])) { con.enterLocalPassiveMode(); // important! con.setFileType(http://FTP.BINARY_FILE_TYPE); FileInputStream in = new FileInputStream(new File(aurl[3])); boolean result = con.storeFile(aurl[3], in); in.close(); con.logout(); con.disconnect(); } } catch (Exception e) { Toast.makeText(getApplicationContext(), e.toString(), Toast.LENGTH_LONG).show(); } return null; } protected void onPostExecute(String result) {} } I AM USING THIS CLASS LIKE BELOW.THERE IS BUTTON AND WHENEVER I CLICK THE BUTTON IT SHOULD START FTP UPLOAD PROCESS IN BACKGROUND BUT I GET "PROGRAM HAS STOPPED UNFORTUNATELY" ERROR. Assume that The ftp address and username password pathfile sections are true and I get the internet and network permissions already by the way ... button1.setOnClickListener(new OnClickListener() { public void onClick(View arg0) { new Asenkron().execute("ftpaddress","username","pass","pathfileon telephone"); } }); And here is the logcat for you to analyse the potential error and help me ... 10-13 13:01:25.591: I/dalvikvm(633): threadid=3: reacting to signal 3 10-13 13:01:25.711: I/dalvikvm(633): Wrote stack traces to '/data/anr/traces.txt' 10-13 13:01:25.921: D/gralloc_goldfish(633): Emulator without GPU emulation detected. 10-13 13:01:31.441: W/dalvikvm(633): threadid=11: thread exiting with uncaught exception (group=0x409c01f8) 10-13 13:01:31.461: E/AndroidRuntime(633): FATAL EXCEPTION: AsyncTask #1 10-13 13:01:31.461: E/AndroidRuntime(633): java.lang.RuntimeException: An error occured while executing doInBackground() 10-13 13:01:31.461: E/AndroidRuntime(633): at android.os.AsyncTask$3.done(AsyncTask.java:278) 10-13 13:01:31.461: E/AndroidRuntime(633): at java.util.concurrent.FutureTask$Sync.innerSetException(FutureTask.java:273) 10-13 13:01:31.461: E/AndroidRuntime(633): at java.util.concurrent.FutureTask.setException(FutureTask.java:124) 10-13 13:01:31.461: E/AndroidRuntime(633): at java.util.concurrent.FutureTask$Sync.innerRun(FutureTask.java:307) 10-13 13:01:31.461: E/AndroidRuntime(633): at java.util.concurrent.FutureTask.run(FutureTask.java:137) 10-13 13:01:31.461: E/AndroidRuntime(633): at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:208) 10-13 13:01:31.461: E/AndroidRuntime(633): at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1076) 10-13 13:01:31.461: E/AndroidRuntime(633): at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:569) 10-13 13:01:31.461: E/AndroidRuntime(633): at java.lang.Thread.run(Thread.java:856) 10-13 13:01:31.461: E/AndroidRuntime(633): Caused by: java.lang.RuntimeException: Can't create handler inside thread that has not called Looper.prepare() 10-13 13:01:31.461: E/AndroidRuntime(633): at android.os.Handler.<init>(Handler.java:121) 10-13 13:01:31.461: E/AndroidRuntime(633): at android.widget.Toast$TN.<init>(Toast.java:317) 10-13 13:01:31.461: E/AndroidRuntime(633): at android.widget.Toast.<init>(Toast.java:91) 10-13 13:01:31.461: E/AndroidRuntime(633): at android.widget.Toast.makeText(Toast.java:233) 10-13 13:01:31.461: E/AndroidRuntime(633): at com.example.ftpodak.ODAK$Asenkron.doInBackground(ODAK.java:74) 10-13 13:01:31.461: E/AndroidRuntime(633): at com.example.ftpodak.ODAK$Asenkron.doInBackground(ODAK.java:1) 10-13 13:01:31.461: E/AndroidRuntime(633): at android.os.AsyncTask$2.call(AsyncTask.java:264) 10-13 13:01:31.461: E/AndroidRuntime(633): at java.util.concurrent.FutureTask$Sync.innerRun(FutureTask.java:305) 10-13 13:01:31.461: E/AndroidRuntime(633): ... 5 more By the way I changed the relevant code like that ; instead of catch (Exception e) { Toast.makeText(getApplicationContext(), e.toString(), Toast.LENGTH_LONG).show(); } I replaced with this code catch (Exception e) { HATA=e.toString(); } And I added the code to button textview1.setText(HATA); So I can see the error on the textview and it is writing that "Android java.net.UnknownHostException: Host is unresolved" But i know that the ftp server is correct and I check the ftp server from the AndFTP application. With the same address login and pass information ftp server is working.So the problem is in my code I think.Any help will be too much appreciated.Anyone who can help me I can give teamviewer to analyse what is the problem ...

Read the article

Socket php server not showing messages sent from android client

- by Mj1992

Hi I am a newbie in these kind of stuff but here's what i want to do. I am trying to implement a chat application in which users will send their queries from the website and as soon as the messages are sent by the website users.It will appear in the android mobile application of the site owner who will answer their queries .In short I wanna implement a live chat. Now right now I am just simply trying to send messages from android app to php server. But when I run my php script from dreamweaver in chrome the browser keeps on loading and doesn't shows any output when I send message from the client. Sometimes it happened that the php script showed some outputs which I have sent from the android(client).But i don't know when it works and when it does not. So I want to show those messages in the php script as soon as I send those messages from client and vice versa(did not implemented the vice versa for client but help will be appreciated). Here's what I've done till now. php script: <?php set_time_limit (0); $address = '127.0.0.1'; $port = 1234; $sock = socket_create(AF_INET, SOCK_STREAM, 0); socket_bind($sock, $address, $port) or die('Could not bind to address'); socket_listen($sock); $client = socket_accept($sock); $welcome = "Roll up, roll up, to the greatest show on earth!\n? "; socket_write($client, $welcome,strlen($welcome)) or die("Could not send connect string\n"); do{ $input=socket_read($client,1024,1) or die("Could not read input\n"); echo "User Says: \n\t\t\t".$input; if (trim($input) != "") { echo "Received input: $input\n"; if(trim($input)=="END") { socket_close($spawn); break; } } else{ $output = strrev($input) . "\n"; socket_write($spawn, $output . "? ", strlen (($output)+2)) or die("Could not write output\n"); echo "Sent output: " . trim($output) . "\n"; } } while(true); socket_close($sock); echo "Socket Terminated"; ?> Android Code: public class ServerClientActivity extends Activity { private Button bt; private TextView tv; private Socket socket; private String serverIpAddress = "127.0.0.1"; private static final int REDIRECTED_SERVERPORT = 1234; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); bt = (Button) findViewById(R.id.myButton); tv = (TextView) findViewById(R.id.myTextView); try { InetAddress serverAddr = InetAddress.getByName(serverIpAddress); socket = new Socket(serverAddr, REDIRECTED_SERVERPORT); } catch (UnknownHostException e1) { e1.printStackTrace(); } catch (IOException e1) { e1.printStackTrace(); } bt.setOnClickListener(new OnClickListener() { public void onClick(View v) { try { EditText et = (EditText) findViewById(R.id.EditText01); String str = et.getText().toString(); PrintWriter out = new PrintWriter(new BufferedWriter(new OutputStreamWriter(socket.getOutputStream())),true); out.println(str); Log.d("Client", "Client sent message"); } catch (UnknownHostException e) { tv.setText(e.getMessage()); e.printStackTrace(); } catch (IOException e) { tv.setText(e.getMessage()); e.printStackTrace(); } catch (Exception e) { tv.setText(e.getMessage()); e.printStackTrace(); } } }); } } I've just pasted the onclick button event code for Android.Edit text is the textbox where I am going to enter my text. The ip address and port are same as in php script.

Read the article

Get item from spinner into url

- by ShadowCrowe

I searched for an answer but couldn't find it. The problem: Depending on the selected spinner-item the application should show a different image. At this moment I can't get it to work. The Url works like this: "my.site.com/images/" imc_met ".png" were imc_met is the filename. I can't get it to work. Btw the app isn't finished yet package example.myapplication; import java.io.IOException; import java.net.MalformedURLException; import java.net.URI; import java.net.URISyntaxException; import java.net.URL; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.ImageView; import android.widget.Spinner; public class itemsActivity extends Activity { private Spinner spinner1, spinner2; private Button btnSubmit; private Bitmap image; private ImageView imageView; private String imc_met, imc; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.items); addItemsOnSpinner2(); addListenerOnButton(); addListenerOnSpinnerItemSelection(); } // add items into spinner dynamically public void addItemsOnSpinner2() { spinner2 = (Spinner) findViewById(R.id.spinner2); List<String> list = new ArrayList<String>(); list.add("list 1"); list.add("list 2"); list.add("list 3"); ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, list); dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); spinner2.setAdapter(dataAdapter); } public void addListenerOnSpinnerItemSelection() { spinner1 = (Spinner) findViewById(R.id.spinner1); spinner1.setOnItemSelectedListener(new CustomOnItemSelectedListener()); } // get the selected dropdown list value public void addListenerOnButton() { spinner1 = (Spinner) findViewById(R.id.spinner1); spinner2 = (Spinner) findViewById(R.id.spinner2); btnSubmit = (Button) findViewById(R.id.btnSubmit); spinner1.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) { if(spinner1.getSelectedItem()!=null){ imc_met = spinner1.getSelectedItem().toString(); } } @Override public void onNothingSelected(AdapterView<?> arg0) { // TODO Auto-generated method stub } }); imageView = (ImageView)findViewById(R.id.ImageView01); btnSubmit.setOnClickListener(new OnClickListener() { public void onClick(View v) { URL url = null; try { url = new URL("my.site.com"); //here should the right link appear. } catch (MalformedURLException e) { e.printStackTrace(); } try { if (url != null) { image = BitmapFactory.decodeStream(url.openStream()); } } catch (IOException e) { e.printStackTrace(); } imageView.setImageBitmap(image); } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } }

Read the article

PHP - Accessing a value selected in Combobox

- by Pavitar

I want to write a code that should let me select from a drop down list and onClick of a button load the data from a mysql database.However I cannot access the value selected in the drop down menu.I have tried to access them by $_POST['var_name'] but still can't do it. I'm new to PHP. Following is my code: <?php function load(){ $department = $_POST['dept']; $employee = $_POST['emp']; //echo "$department"; //echo "$employee"; $con = mysqli_connect("localhost", "root", "pwd", "payroll"); $rs = $con->query("select * from dept where deptno='$department'"); $row = $rs->fetch_row(); $n = $row[0]; $rs->free(); $con->close(); } ?> <html> <head> <title>Payroll</title> </head> <body> <h1 align="center">IIT Department</h1> <form method="post"> <table align="center"> <tr> <td> Dept Number: <select name="dept"> <option value="10" selected="selected">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> </td> <td> <input type="button" value="ShowDeptEmp" name="btn1"> </td> <td> Job: <select name="job"> <option value="President" selected="selected">President</option> <option value="Manager">Manager</option> <option value="Clerk">Clerk</option> <option value="Salesman">Salesman</option> <option value="Analyst">Analyst</option> </select> </td> <td> <input type="button" value="ShowJobEmp" name="btn1"> </td> </tr> </table> </form> <?php if(isset($_POST['dept']) && $_POST['dept'] != "") load(); ?> </body> </html>

Read the article

Jquery validation in asp.net mvc

- by Suja

I have a view to create a DocumentTemplate <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" % <%@ Import Namespace="HexsolveMVC.Helpers" % Create <script type="text/javascript"> $(document).ready(function() { $("#reset").click(function(event) { $("#Part").get(0).selectedIndex = 0; $("#txtDocTitle").val(""); $("#txtarDocDesc").val(""); }); }); }); </script> <div class="container"> <div class="outer"> <div class="main_content"> <div> <%=Html.BreadCrumb(Model.BreadCrumbs)%> </div> <div class="form_container"> <h1> Document Template</h1> <ul> <li> <label> <span class="mandatory">*</span>Engine model:</label> <%=Html.DropDownList("Part", (SelectList)ViewData["Part"])%> <span class="tagline">Please select the engine model <%--<a href="#">Need Help</a>--%></span> </li> <li> <label> <span class="mandatory">*</span>Document Title:</label> <input id="txtDocTitle" name="docTitle" type="text" class="formstyle" /> </li> <li> <label> Discription:</label> <textarea name="docDesc" id="txtarDocDesc" cols="45" rows="5"></textarea> </li> <li> <div class="button_panel"> <input name="button" type="submit" class="btn_create_doc_big" id="button" value="Create" /> <span class="reset_field"><a href="#" id="reset">Reset the form</a></span><span class="mandatory_tag">[ <span class="mandatory">*</span> Mandatory fields ]</span> <div class="clear"> </div> </div> <span class="tagline">By clicking on '<span class="tagline_highlight">Create</span>' button your document will be created.<br /> And after you can add new instructions and subsections easily.</span></li> </ul> <div> <h2> Example of how to work a document </h2> <img alt="" src="../../html/images/diagram.jpg" width="738" height="172" /></div> </div> </div> <div class="clear"> </div> </div> </div> I need to validate the txtDocTitle since its a required field. How can i do this using jQuery. I cannot use Model validation coz this same model is used for other views also and it have properties from other tables. I need something to do with jQuery.

Read the article

Invalid Cast Exception with Update Panel

- by user1593175

On Button Click Protected Sub btnSubmit_Click(sender As Object, e As System.EventArgs) Handles btnSubmit.Click MsgBox("INSIDE") If SocialAuthUser.IsLoggedIn Then Dim accountId As Integer = BLL.getAccIDFromSocialAuthSession Dim AlbumID As Integer = BLL.createAndReturnNewAlbumId(txtStoryTitle.Text.Trim, "") Dim URL As String = BLL.getAlbumPicUrl(txtStoryTitle.Text.Trim) Dim dt As New DataTable dt.Columns.Add("PictureID") dt.Columns.Add("AccountID") dt.Columns.Add("AlbumID") dt.Columns.Add("URL") dt.Columns.Add("Thumbnail") dt.Columns.Add("Description") dt.Columns.Add("AlbumCover") dt.Columns.Add("Tags") dt.Columns.Add("Votes") dt.Columns.Add("Abused") dt.Columns.Add("isActive") Dim Row As DataRow Dim uniqueFileName As String = "" If Session("ID") Is Nothing Then lblMessage.Text = "You don't seem to have uploaded any pictures." Exit Sub Else **Dim FileCount As Integer = Request.Form(Request.Form.Count - 2)** Dim FileName, TargetName As String Try Dim Path As String = Server.MapPath(BLL.getAlbumPicUrl(txtStoryTitle.Text.Trim)) If Not IO.Directory.Exists(Path) Then IO.Directory.CreateDirectory(Path) End If Dim StartIndex As Integer Dim PicCount As Integer For i As Integer = 0 To Request.Form.Count - 1 If Request.Form(i).ToLower.Contains("jpg") Or Request.Form(i).ToLower.Contains("gif") Or Request.Form(i).ToLower.Contains("png") Then StartIndex = i + 1 Exit For End If Next For i As Integer = StartIndex To Request.Form.Count - 4 Step 3 FileName = Request.Form(i) '## If part here is not kaam ka..but still using it for worst case scenario If IO.File.Exists(Path & FileName) Then TargetName = Path & FileName 'MsgBox(TargetName & "--- 1") Dim j As Integer = 1 While IO.File.Exists(TargetName) TargetName = Path & IO.Path.GetFileNameWithoutExtension(FileName) & "(" & j & ")" & IO.Path.GetExtension(FileName) j += 1 End While Else uniqueFileName = Guid.NewGuid.ToString & "__" & FileName TargetName = Path & uniqueFileName End If IO.File.Move(Server.MapPath("~/TempUploads/" & Session("ID") & "/" & FileName), TargetName) PicCount += 1 Row = dt.NewRow() Row(1) = accountId Row(2) = AlbumID Row(3) = URL & uniqueFileName Row(4) = "" Row(5) = "No Desc" Row(6) = "False" Row(7) = "" Row(8) = "0" Row(9) = "0" Row(10) = "True" dt.Rows.Add(Row) Next If BLL.insertImagesIntoAlbum(dt) Then lblMessage.Text = PicCount & IIf(PicCount = 1, " Picture", " Pictures") & " Saved!" lblMessage.ForeColor = Drawing.Color.Black Dim db As SqlDatabase = Connection.connection Using cmd As DbCommand = db.GetSqlStringCommand("SELECT PictureID,URL FROM AlbumPictures WHERE AlbumID=@AlbumID AND AccountID=@AccountID") db.AddInParameter(cmd, "AlbumID", Data.DbType.Int32, AlbumID) db.AddInParameter(cmd, "AccountID", Data.DbType.Int32, accountId) Using ds As DataSet = db.ExecuteDataSet(cmd) If ds.Tables(0).Rows.Count > 0 Then ListView1.DataSource = ds.Tables(0) ListView1.DataBind() Else lblMessage.Text = "No Such Album Exists." End If End Using End Using 'WebNavigator.GoToResponseRedirect(WebNavigator.URLFor.ReturnUrl("~/Memories/SortImages.aspx?id=" & AlbumID)) Else 'TODO:we'll show some error msg End If Catch ex As Exception MsgBox(ex.Message) lblMessage.Text = "Oo Poop!!" End Try End If Else WebNavigator.GoToResponseRedirect(WebNavigator.URLFor.LoginWithReturnUrl("~/Memories/CreateAlbum.aspx")) Exit Sub End If End Sub The above code works fine.I have added an Update Panel in the page to avoid post back, But when i add the button click as a trigger <Triggers> <asp:AsyncPostBackTrigger ControlID="btnSubmit" /> </Triggers> in the update panel to avoid post back, i get the following error.This happens when i add the button click as a Trigger to the update panel.

Read the article

How to force a page refresh or reload in jQuery?

- by TimMac

The code below displays a google map and search results when you enter an address and hit the submit button. I've been playing with it to try and force the page to completely refresh or reload once you hit the submit button. But I can't get it to work right. It loads the results "in page," but I'd like the page to completely refresh when the results load, like when you hit the back button on your browser. Hope that makes sense. I think the answer lies in this line of code but I don't know jquery very well. It's near the bottom of the full code below. <script type="text/javascript"> (function($) { $(document).ready(function() { load();'; Here's the full code below. Any help would be greatly appreciated! <?php /* SimpleMap Plugin display-map.php: Displays the Google Map and search results */ $to_display = ''; if ($options['display_search'] == 'show') { $to_display .= ' <div id="map_search" style="width: '.$options['map_width'].';"> <a name="map_top"></a> <form onsubmit="searchLocations(\''.$categories.'\'); return false;" name="searchForm" id="searchForm" action="http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'].'"> <input type="text" id="addressInput" name="addressInput" class="address" />  <select name="radiusSelect" id="radiusSelect">'; $default_radius = $options['default_radius']; unset($selected_radius); $selected_radius[$default_radius] = ' selected="selected"'; foreach ($search_radii as $value) { $r = (int)$value; $to_display .= '<option valu e="'.$value.'"'.$selected_radius[$r].'>'.$value.' '.$options['units']."</option>\n"; } $to_display .= ' </select>  <input type="submit" value="'.__('Search', 'SimpleMap').'" id="addressSubmit" class="submit" /> <p>'.__('Please enter an address or search term in the box above.', 'SimpleMap').'</p> </form> </div>'; } if ($options['powered_by'] == 'show') { $to_display .= '<div id="powered_by_simplemap">'.sprintf(__('Powered by %s SimpleMap', 'SimpleMap'),'<a href="http://simplemap-plugin.com/" target="_blank">').'</a></div>'; } $to_display .= ' <div id="map" style="width: '.$options['map_width'].'; height: '.$options['map_height'].';"></div> <div id="results" style="width: '.$options['map_width'].';"></div> <script type="text/javascript"> (function($) { $(document).ready(function() { load();'; if ($options['autoload'] == 'some') { $to_display .= 'var autoLatLng = new GLatLng(default_lat, default_lng); searchLocationsNear(autoLatLng, autoLatLng.lat() + ", " + autoLatLng.lng(), "auto", "'.$options['lock_default_location'].'", "'.$categories.'");'; } else if ($options['autoload'] == 'all') { $to_display .= 'var autoLatLng = new GLatLng(default_lat, default_lng); searchLocationsNear(autoLatLng, autoLatLng.lat() + ", " + autoLatLng.lng(), "auto_all", "'.$options['lock_default_location'].'", "'.$categories.'");'; } $to_display .= ' }); })(jQuery); </script>'; ?>

Read the article

How can I write javaScript cookies to keep the data persistent after page reloads on my form?

- by Johhny Thero

Hello, I am trying to learn how to write cookies to keep the data in my CookieButton1 button persistent and to survive refreshes and page reloads. How can I do this in JavaScript? I have supplied my source code. Any advise, links or tutorials will be very helpful. If you navigate to http://iqlusion.net/test.html and click on Empty1, it will start to ask you questions. When finished it stores everything into CookieButton1. But when I refresh my browser the data resets and goes away. Thanks! <html> <head> <title>no_cookies> </head> <script type="text/javascript" > var Can1Set = "false"; function Can1() { if (Can1Set == "false") { Can1Title = prompt("What do you want to name this new canned response?",""); Can1State = prompt("Enter a ticket state (open or closed)","closed"); Can1Response = prompt("Enter the canned response:",""); Can1Points = prompt("What point percentage do you want to assign? (0-10)","2.5"); // Set the "Empty 1" button text to the new name the user specified document.CookieTest.CookieButton1.value = Can1Title; // Set the cookie here, and then set the Can1Set variable to true document.CookieTest.CookieButton1 = "CookieButton1"; Can1Set = true; }else{ document.TestForm.TestStateDropDownBox.value = Can1State; document.TestForm.TestPointsDropDownBox.value = Can1Points; document.TestForm.TestTextArea.value = Can1Response; // document.TestForm.submit(); } } </script> <form name=TestForm> State: <select name=TestStateDropDownBox> <option value=new selected>New</option> <option value=open selected>Open</option> <option value=closed>Closed</option> </select> Points: <select name=TestPointsDropDownBox> <option value=1>1</option> <option value=1.5>1.5</option> <option value=2>2</option> <option value=2.5>2.5</option> <option value=3>3</option> <option value=3.5>3.5</option> <option value=4>4</option> <option value=4.5>4.5</option> <option value=5>5</option> <option value=5.5>5.5</option> <option value=6>6</option> <option value=6.5>6.5</option> <option value=7>7</option> <option value=7.5>7.5</option> <option value=8>8</option> <option value=8.5>8.5</option> <option value=9>9</option> <option value=9.5>9.5</option> <option value=10>10</option> </select> <p> Ticket information:<br> <textarea name=TestTextArea cols=50 rows=7></textarea> </form> <form name=CookieTest> <input type=button name=CookieButton1 value="Empty 1" onClick="javascript:Can1()"> </form>

Read the article

Android: Retrieving Password via registered Email on My Server

- by Raghavan'G'

i am working on retrieving password to the user when he submits his mail id that he registered on my server. I need to check whether he entered correct registered id and give him response by sending password to his corresponding mail and set dialog as password sent to your mail or if he entered wrong mail id i have to show mail id not registered... Any Idea? This is my code... package com.soap; import java.util.regex.Matcher; import java.util.regex.Pattern; import org.ksoap2.SoapEnvelope; import org.ksoap2.serialization.PropertyInfo; import org.ksoap2.serialization.SoapObject; import org.ksoap2.serialization.SoapSerializationEnvelope; import org.ksoap2.transport.HttpTransportSE; import android.app.Activity; import android.app.Dialog; import android.app.ProgressDialog; import android.os.Bundle; import android.util.Log; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText public class Register extends Activity { /** Called when the activity is first created. */ // static Spinner operator = null; private static final String SOAP_ACTION = "......"; private static final String METHOD_NAME = "......"; private static final String NAMESPACE = "......"; private static final String URL = "My site"; private static final String TAG = "HELLO"; Thread t; ProgressDialog dialog; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.forgotpasswordpage); Button signin = (Button) findViewById(R.id.fpwdsubmit); signin.setOnClickListener(new OnClickListener() { public void onClick(View v) { showDialog(0); t = new Thread() { public void run() { register(); } }; t.start(); } }); } @Override protected Dialog onCreateDialog(int id) { switch (id) { case 0: { dialog = new ProgressDialog(this); dialog.setMessage("Please wait while connecting..."); dialog.setIndeterminate(true); dialog.setCancelable(true); return dialog; } } return null; } public void register() { Log.v(TAG, "Trying to Login"); EditText etxt_user = (EditText)findViewById(R.id.fpedtext); String email_id = etxt_user.getText().toString(); SoapObject request = new SoapObject(NAMESPACE, METHOD_NAME); request.addProperty("Email", email_id); Pattern EMAIL_ADDRESS_PATTERN =Pattern.compile( "[a-zA-Z0-9\\+\\.\\_\\%\\-\\+]{1,256}" + "\\@" + "[a-zA-Z0-9][a-zA-Z0-9\\-]{0,64}" + "(" + "\\." + "[a-zA-Z0-9][a-zA-Z0-9\\-]{0,25}" + ")+"); Matcher matcher = EMAIL_ADDRESS_PATTERN.matcher(email_id); if(matcher.matches()){ Log.v(TAG, "Your email id is valid ="+email_id); // System.out.println("Your email id is valid ="+email); } else{ // System.out.println("enter valid email id"); Log.v(TAG, "enter valid email id" ); } SoapSerializationEnvelope soapEnvelope = new SoapSerializationEnvelope(SoapEnvelope.VER11); soapEnvelope.dotNet = true; soapEnvelope.setOutputSoapObject(request); HttpTransportSE aht = new HttpTransportSE(URL); try { aht.setXmlVersionTag("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); aht.call(SOAP_ACTION, soapEnvelope); SoapObject resultsRequestSOAP = (SoapObject) soapEnvelope.bodyIn; Log.v("TAG", String.valueOf(resultsRequestSOAP)); } catch (Exception e) { e.printStackTrace(); } } }

Read the article

Encoding GBK2312 Condundrum

- by user792271

I am an amateur coder and I have a small problem. My goal is to have one text input with two buttons. The first button uses a bit of Javascript called SundayMorning to translate the text (to Chinese) The second button submits the text to a URL. The URl requires that Chinese text be encoded it in GBK2312 character set. I have duct taped together various found code to the result I have now. Due to the finicky behavior of the SundayMorning Javascript, my solution is to have two input boxes, the second of which I will hide. Right now, this doesn't work: I am unable to encode the Chinese in GBK2312, no matter what I try. BONUS CONUNDRUM: The second box copies my input letter by letter as I type, but does not copy the Chinese translation that the Javascript returns. Sorry for my janky amateur code. I defer to those more clever, if you have any kind suggestions. <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <script type='text/javascript' Src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'> </script> ///THIS JS TRANSLATES THE TEXT INLINE <script type="text/javascript" src="jquery.sundaymorning.js"> </script> <script type="text/javascript"> $(function() { $('#example3').sundayMorningReset(); $('#example3 input[type=image]').click(function(evt) { $.sundayMorning( $('#example3 input[type=text]').val(),{source:'en', destination:'ZH', menuLeft:evt.pageX, menuTop:evt.pageY},function(response) {$('#example3 input[type=text]').val(response.translation);});});}); </script> /// ///THIS PUTS THE CONTENT OF THE TRANSLATION BOX INTO THE SUBMISSION BOX <script type="text/javascript"> $(document).ready(function(){ var $url = $("#url"); $("#track").keyup(function() { $url.val(this.value);}); $("#track").blur(function() { $url.val(this.value);});}); </script> ///THIS PUTS THE CONTENT OF THE SUBMISSION INSIDE A URL <SCRIPT type="text/javascript"> function goToPage(url) { var initial = "http://example.com/"; var extension = ".html"; document.something.action=initial+url+extension; } </SCRIPT> </head> <body> <div id="featured"> <div id="example3"> <input type="text" name="track" id="track" value="" class="box"onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('mama').click();}};"/> <input type="image" src="http://taobaofieldguide.com/images/orange-translate-button.png" id="searchsubmit" value="Translate" class="btn" /> </div> <FORM name="something" method="post" onsubmit="goToPage(this.url.value);"> <input type="text" id="url";> <INPUT type="submit" id="mama" value="GO" > </FORM> </div> </body>

Read the article

displaying search results of more than one word

- by fusion

in my search form, if the user types 'good', it displays all the results which contain the keyword 'good'. however if the user types in 'good sweetest', it displays no results because there is no record with the two words appearing together; BUT appearing in an entry at different places. for example, the record says: A good action is an ever-remaining store and a pure yield the user types in 'good', it will show up this record, but if the user types in 'good' + 'pure', it will not show anything. or if the record contains the keyword 'good-deeds' and if the user types in 'good deeds' without the hyphen, it will not show anything. what i would like is that if the user types in 'good' + 'pure' or 'good deeds' it should records containing these keywords highlighting them. search.php code: $search_result = ""; $search_result = $_POST["q"]; $search_result = trim($search_result); //Check if the string is empty if ($search_result == "") { echo "<p class='error'>Search Error. Please Enter Your Search Query.</p>" ; exit(); } if ($search_result == "%" || $search_result == "_" || $search_result == "+" ) { echo "<p class='error1'>Search Error. Please Enter a Valid Search Query.</p>" ; exit(); } $result = mysql_query('SELECT cQuotes, vAuthor, cArabic, vReference FROM thquotes WHERE cQuotes LIKE "%' . mysql_real_escape_string($search_result) .'%" ORDER BY idQuotes DESC', $conn) or die ('Error: '.mysql_error()); function h($s) { echo htmlspecialchars($s, ENT_QUOTES); } function highlightWords($string, $word) { $string = preg_replace("/".preg_quote($word, "/")."/i", "<span class='highlight'>$0</span>", $string); /*** return the highlighted string ***/ return $string; } ?> <div class="caption">Search Results</div> <div class="center_div"> <table> <?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) { $cQuote = highlightWords(htmlspecialchars($row['cQuotes']), $search_result); ?> <tr> <td style="text-align:right; font-size:18px;"><?php h($row['cArabic']); ?></td> <td style="font-size:16px;"><?php echo $cQuote; ?></td> <td style="font-size:12px;"><?php h($row['vAuthor']); ?></td> <td style="font-size:12px; font-style:italic; text-align:right;"><?php h($row['vReference']); ?></td> </tr> <?php } ?> </table> </div> search.html: <form name="myform" class="wrapper"> <input type="text" name="q" onkeyup="showUser()" class="txt_search"/> <input type="button" name="button" onclick="showUser()" class="button"/> <p> <div id="txtHint"></div> </form>

Read the article

displaying search results with two or more queries

- by fusion

in my search form, if the user types 'good', it displays all the results which contain the keyword 'good'. however if the user types in 'good sweetest', it displays no results because there is no record with the two words appearing together; BUT appearing in an entry at different places. for example, the record says: A good action is an ever-remaining store and a pure yield the user types in 'good', it will show up this record, but if the user types in 'good' + 'pure', it will not show anything. what i would like is that if the user types in 'good' + 'pure' it should records containing these keywords highlighting them. search.php code: $search_result = ""; $search_result = $_POST["q"]; $search_result = trim($search_result); //Check if the string is empty if ($search_result == "") { echo "<p class='error'>Search Error. Please Enter Your Search Query.</p>" ; exit(); } if ($search_result == "%" || $search_result == "_" || $search_result == "+" ) { echo "<p class='error1'>Search Error. Please Enter a Valid Search Query.</p>" ; exit(); } $result = mysql_query('SELECT cQuotes, vAuthor, cArabic, vReference FROM thquotes WHERE cQuotes LIKE "%' . mysql_real_escape_string($search_result) .'%" ORDER BY idQuotes DESC', $conn) or die ('Error: '.mysql_error()); function h($s) { echo htmlspecialchars($s, ENT_QUOTES); } function highlightWords($string, $word) { $string = preg_replace("/".preg_quote($word, "/")."/i", "<span class='highlight'>$0</span>", $string); /*** return the highlighted string ***/ return $string; } ?> <div class="caption">Search Results</div> <div class="center_div"> <table> <?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) { $cQuote = highlightWords(htmlspecialchars($row['cQuotes']), $search_result); ?> <tr> <td style="text-align:right; font-size:18px;"><?php h($row['cArabic']); ?></td> <td style="font-size:16px;"><?php echo $cQuote; ?></td> <td style="font-size:12px;"><?php h($row['vAuthor']); ?></td> <td style="font-size:12px; font-style:italic; text-align:right;"><?php h($row['vReference']); ?></td> </tr> <?php } ?> </table> </div> search.html: <form name="myform" class="wrapper"> <input type="text" name="q" onkeyup="showUser()" class="txt_search"/> <input type="button" name="button" onclick="showUser()" class="button"/> <p> <div id="txtHint"></div> </form>

Read the article

Select list shrinks in size horizontally when empty

- by joe

Hello, I have two select list boxes and i can move items back and forth between them using the forward (--) and backward (<--) button. However, if there are no items in a select list, it shrinks in size horizontally. Any way to keep the select list a fixed size, irrespective of whether it contains any options or not ? Below is the code: <html> <head> <script language="JavaScript" type="text/javascript">  </script> </head> <body> <form action="yourpage.asp" method="post"> <table border="0"> <tr> <td width="70"> <select name="sel1" size="10" multiple="multiple"> <option value="1">Left1</option> <option value="2">Left2</option> <option value="3">Left3</option> <option value="4">Left4</option> <option value="5">Left5</option> </select> </td> <td align="center" valign="middle"> <input type="button" value="-->" onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br /> <input type="button" value="<--" onclick="moveOptions(this.form.sel2, this.form.sel1);" /> </td> <td> <select name="sel2" size="10" multiple="multiple"> <option value="1">Right1</option> <option value="2">Right2</option> <option value="3">Right3</option> <option value="4">Right4</option> <option value="5">Right5</option> </select> </td> </tr> </table> </form> </body> </html> Please help. Thank You.

Read the article

IPsec tunnel to Android device not created even though there is an IKE SA

- by Quentin Swain

I'm trying to configure a VPN tunnel between an Android device running 4.1 and a Fedora 17 Linux box running strongSwan 5.0. The device reports that it is connected and strongSwan statusall returns that there is an IKE SA, but doesn't display a tunnel. I used the instructions for iOS in the wiki to generate certificates and configure strongSwan. Since Android uses a modified version of racoon this should work and since the connection is partly established I think I am on the right track. I don't see any errors about not being able to create the tunnel. This is the configuration for the strongSwan connection conn android2 keyexchange=ikev1 authby=xauthrsasig xauth=server left=96.244.142.28 leftsubnet=0.0.0.0/0 leftfirewall=yes leftcert=serverCert.pem right=%any rightsubnet=10.0.0.0/24 rightsourceip=10.0.0.2 rightcert=clientCert.pem ike=aes256-sha1-modp1024 auto=add This is the output of strongswan statusall Status of IKE charon daemon (strongSwan 5.0.0, Linux 3.3.4-5.fc17.x86_64, x86_64): uptime: 20 minutes, since Oct 31 10:27:31 2012 malloc: sbrk 270336, mmap 0, used 198144, free 72192 worker threads: 8 of 16 idle, 7/1/0/0 working, job queue: 0/0/0/0, scheduled: 7 loaded plugins: charon aes des sha1 sha2 md5 random nonce x509 revocation constraints pubkey pkcs1 pkcs8 pgp dnskey pem openssl fips-prf gmp xcbc cmac hmac attr kernel-netlink resolve socket-default stroke updown xauth-generic Virtual IP pools (size/online/offline): android-hybrid: 1/0/0 android2: 1/1/0 Listening IP addresses: 96.244.142.28 Connections: android-hybrid: %any...%any IKEv1 android-hybrid: local: [C=CH, O=strongSwan, CN=vpn.strongswan.org] uses public key authentication android-hybrid: cert: "C=CH, O=strongSwan, CN=vpn.strongswan.org" android-hybrid: remote: [%any] uses XAuth authentication: any android-hybrid: child: dynamic === dynamic TUNNEL android2: 96.244.142.28...%any IKEv1 android2: local: [C=CH, O=strongSwan, CN=vpn.strongswan.org] uses public key authentication android2: cert: "C=CH, O=strongSwan, CN=vpn.strongswan.org" android2: remote: [C=CH, O=strongSwan, CN=client] uses public key authentication android2: cert: "C=CH, O=strongSwan, CN=client" android2: remote: [%any] uses XAuth authentication: any android2: child: 0.0.0.0/0 === 10.0.0.0/24 TUNNEL Security Associations (1 up, 0 connecting): android2[3]: ESTABLISHED 10 seconds ago, 96.244.142.28[C=CH, O=strongSwan, CN=vpn.strongswan.org]...208.54.35.241[C=CH, O=strongSwan, CN=client] android2[3]: Remote XAuth identity: android android2[3]: IKEv1 SPIs: 4151e371ad46b20d_i 59a56390d74792d2_r*, public key reauthentication in 56 minutes android2[3]: IKE proposal: AES_CBC_256/HMAC_SHA1_96/PRF_HMAC_SHA1/MODP_1024 The output of ip -s xfrm policy src ::/0 dst ::/0 uid 0 socket in action allow index 3851 priority 0 ptype main share any flag (0x00000000) lifetime config: limit: soft 0(bytes), hard 0(bytes) limit: soft 0(packets), hard 0(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:29:08 use - src ::/0 dst ::/0 uid 0 socket out action allow index 3844 priority 0 ptype main share any flag (0x00000000) lifetime config: limit: soft 0(bytes), hard 0(bytes) limit: soft 0(packets), hard 0(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:29:08 use - src ::/0 dst ::/0 uid 0 socket in action allow index 3835 priority 0 ptype main share any flag (0x00000000) lifetime config: limit: soft 0(bytes), hard 0(bytes) limit: soft 0(packets), hard 0(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:29:08 use - src ::/0 dst ::/0 uid 0 socket out action allow index 3828 priority 0 ptype main share any flag (0x00000000) lifetime config: limit: soft 0(bytes), hard 0(bytes) limit: soft 0(packets), hard 0(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:29:08 use - src 0.0.0.0/0 dst 0.0.0.0/0 uid 0 socket in action allow index 3819 priority 0 ptype main share any flag (0x00000000) lifetime config: limit: soft 0(bytes), hard 0(bytes) limit: soft 0(packets), hard 0(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:29:08 use 2012-10-31 13:29:39 src 0.0.0.0/0 dst 0.0.0.0/0 uid 0 socket out action allow index 3812 priority 0 ptype main share any flag (0x00000000) lifetime config: limit: soft 0(bytes), hard 0(bytes) limit: soft 0(packets), hard 0(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:29:08 use 2012-10-31 13:29:22 src 0.0.0.0/0 dst 0.0.0.0/0 uid 0 socket in action allow index 3803 priority 0 ptype main share any flag (0x00000000) lifetime config: limit: soft 0(bytes), hard 0(bytes) limit: soft 0(packets), hard 0(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:29:08 use 2012-10-31 13:29:20 src 0.0.0.0/0 dst 0.0.0.0/0 uid 0 socket out action allow index 3796 priority 0 ptype main share any flag (0x00000000) lifetime config: limit: soft 0(bytes), hard 0(bytes) limit: soft 0(packets), hard 0(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:29:08 use 2012-10-31 13:29:20 So a xfrm policy isn't being created for the connection, even though there is an SA between device and strongswan. Executing ip -s xfrm policy on the android device results in the following output: src 0.0.0.0/0 dst 10.0.0.2/32 uid 0 dir in action allow index 40 priority 2147483648 share any flag (0x00000000) lifetime config: limit: soft (INF)(bytes), hard (INF)(bytes) limit: soft (INF)(packets), hard (INF)(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:42:08 use - tmpl src 96.244.142.28 dst 25.239.33.30 proto esp spi 0x00000000(0) reqid 0(0x00000000) mode tunnel level required share any enc-mask 00000000 auth-mask 00000000 comp-mask 00000000 src 10.0.0.2/32 dst 0.0.0.0/0 uid 0 dir out action allow index 33 priority 2147483648 share any flag (0x00000000) lifetime config: limit: soft (INF)(bytes), hard (INF)(bytes) limit: soft (INF)(packets), hard (INF)(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:42:08 use - tmpl src 25.239.33.30 dst 96.244.142.28 proto esp spi 0x00000000(0) reqid 0(0x00000000) mode tunnel level required share any enc-mask 00000000 auth-mask 00000000 comp-mask 00000000 src 0.0.0.0/0 dst 0.0.0.0/0 uid 0 dir 4 action allow index 28 priority 0 share any flag (0x00000000) lifetime config: limit: soft (INF)(bytes), hard (INF)(bytes) limit: soft (INF)(packets), hard (INF)(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:42:04 use 2012-10-31 13:42:08 src 0.0.0.0/0 dst 0.0.0.0/0 uid 0 dir 3 action allow index 19 priority 0 share any flag (0x00000000) lifetime config: limit: soft (INF)(bytes), hard (INF)(bytes) limit: soft (INF)(packets), hard (INF)(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:42:04 use 2012-10-31 13:42:08 src 0.0.0.0/0 dst 0.0.0.0/0 uid 0 dir 4 action allow index 12 priority 0 share any flag (0x00000000) lifetime config: limit: soft (INF)(bytes), hard (INF)(bytes) limit: soft (INF)(packets), hard (INF)(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:42:04 use 2012-10-31 13:42:06 src 0.0.0.0/0 dst 0.0.0.0/0 uid 0 dir 3 action allow index 3 priority 0 share any flag (0x00000000) lifetime config: limit: soft (INF)(bytes), hard (INF)(bytes) limit: soft (INF)(packets), hard (INF)(packets) expire add: soft 0(sec), hard 0(sec) expire use: soft 0(sec), hard 0(sec) lifetime current: 0(bytes), 0(packets) add 2012-10-31 13:42:04 use 2012-10-31 13:42:07 Logs from charon: 00[DMN] Starting IKE charon daemon (strongSwan 5.0.0, Linux 3.3.4-5.fc17.x86_64, x86_64) 00[KNL] listening on interfaces: 00[KNL] em1 00[KNL] 96.244.142.28 00[KNL] fe80::224:e8ff:fed2:18b2 00[CFG] loading ca certificates from '/etc/strongswan/ipsec.d/cacerts' 00[CFG] loaded ca certificate "C=CH, O=strongSwan, CN=strongSwan CA" from '/etc/strongswan/ipsec.d/cacerts/caCert.pem' 00[CFG] loading aa certificates from '/etc/strongswan/ipsec.d/aacerts' 00[CFG] loading ocsp signer certificates from '/etc/strongswan/ipsec.d/ocspcerts' 00[CFG] loading attribute certificates from '/etc/strongswan/ipsec.d/acerts' 00[CFG] loading crls from '/etc/strongswan/ipsec.d/crls' 00[CFG] loading secrets from '/etc/strongswan/ipsec.secrets' 00[CFG] loaded RSA private key from '/etc/strongswan/ipsec.d/private/clientKey.pem' 00[CFG] loaded IKE secret for %any 00[CFG] loaded EAP secret for android 00[CFG] loaded EAP secret for android 00[DMN] loaded plugins: charon aes des sha1 sha2 md5 random nonce x509 revocation constraints pubkey pkcs1 pkcs8 pgp dnskey pem openssl fips-prf gmp xcbc cmac hmac attr kernel-netlink resolve socket-default stroke updown xauth-generic 08[NET] waiting for data on sockets 16[LIB] created thread 16 [15338] 16[JOB] started worker thread 16 11[CFG] received stroke: add connection 'android-hybrid' 11[CFG] conn android-hybrid 11[CFG] left=%any 11[CFG] leftsubnet=(null) 11[CFG] leftsourceip=(null) 11[CFG] leftauth=pubkey 11[CFG] leftauth2=(null) 11[CFG] leftid=(null) 11[CFG] leftid2=(null) 11[CFG] leftrsakey=(null) 11[CFG] leftcert=serverCert.pem 11[CFG] leftcert2=(null) 11[CFG] leftca=(null) 11[CFG] leftca2=(null) 11[CFG] leftgroups=(null) 11[CFG] leftupdown=ipsec _updown iptables 11[CFG] right=%any 11[CFG] rightsubnet=(null) 11[CFG] rightsourceip=96.244.142.3 11[CFG] rightauth=xauth 11[CFG] rightauth2=(null) 11[CFG] rightid=%any 11[CFG] rightid2=(null) 11[CFG] rightrsakey=(null) 11[CFG] rightcert=(null) 11[CFG] rightcert2=(null) 11[CFG] rightca=(null) 11[CFG] rightca2=(null) 11[CFG] rightgroups=(null) 11[CFG] rightupdown=(null) 11[CFG] eap_identity=(null) 11[CFG] aaa_identity=(null) 11[CFG] xauth_identity=(null) 11[CFG] ike=aes256-sha1-modp1024 11[CFG] esp=aes128-sha1-modp2048,3des-sha1-modp1536 11[CFG] dpddelay=30 11[CFG] dpdtimeout=150 11[CFG] dpdaction=0 11[CFG] closeaction=0 11[CFG] mediation=no 11[CFG] mediated_by=(null) 11[CFG] me_peerid=(null) 11[CFG] keyexchange=ikev1 11[KNL] getting interface name for %any 11[KNL] %any is not a local address 11[KNL] getting interface name for %any 11[KNL] %any is not a local address 11[CFG] left nor right host is our side, assuming left=local 11[CFG] loaded certificate "C=CH, O=strongSwan, CN=vpn.strongswan.org" from 'serverCert.pem' 11[CFG] id '%any' not confirmed by certificate, defaulting to 'C=CH, O=strongSwan, CN=vpn.strongswan.org' 11[CFG] added configuration 'android-hybrid' 11[CFG] adding virtual IP address pool 'android-hybrid': 96.244.142.3/32 13[CFG] received stroke: add connection 'android2' 13[CFG] conn android2 13[CFG] left=96.244.142.28 13[CFG] leftsubnet=0.0.0.0/0 13[CFG] leftsourceip=(null) 13[CFG] leftauth=pubkey 13[CFG] leftauth2=(null) 13[CFG] leftid=(null) 13[CFG] leftid2=(null) 13[CFG] leftrsakey=(null) 13[CFG] leftcert=serverCert.pem 13[CFG] leftcert2=(null) 13[CFG] leftca=(null) 13[CFG] leftca2=(null) 13[CFG] leftgroups=(null) 13[CFG] leftupdown=ipsec _updown iptables 13[CFG] right=%any 13[CFG] rightsubnet=10.0.0.0/24 13[CFG] rightsourceip=10.0.0.2 13[CFG] rightauth=pubkey 13[CFG] rightauth2=xauth 13[CFG] rightid=(null) 13[CFG] rightid2=(null) 13[CFG] rightrsakey=(null) 13[CFG] rightcert=clientCert.pem 13[CFG] rightcert2=(null) 13[CFG] rightca=(null) 13[CFG] rightca2=(null) 13[CFG] rightgroups=(null) 13[CFG] rightupdown=(null) 13[CFG] eap_identity=(null) 13[CFG] aaa_identity=(null) 13[CFG] xauth_identity=(null) 13[CFG] ike=aes256-sha1-modp1024 13[CFG] esp=aes128-sha1-modp2048,3des-sha1-modp1536 13[CFG] dpddelay=30 13[CFG] dpdtimeout=150 13[CFG] dpdaction=0 13[CFG] closeaction=0 13[CFG] mediation=no 13[CFG] mediated_by=(null) 13[CFG] me_peerid=(null) 13[CFG] keyexchange=ikev0 13[KNL] getting interface name for %any 13[KNL] %any is not a local address 13[KNL] getting interface name for 96.244.142.28 13[KNL] 96.244.142.28 is on interface em1 13[CFG] loaded certificate "C=CH, O=strongSwan, CN=vpn.strongswan.org" from 'serverCert.pem' 13[CFG] id '96.244.142.28' not confirmed by certificate, defaulting to 'C=CH, O=strongSwan, CN=vpn.strongswan.org' 13[CFG] loaded certificate "C=CH, O=strongSwan, CN=client" from 'clientCert.pem' 13[CFG] id '%any' not confirmed by certificate, defaulting to 'C=CH, O=strongSwan, CN=client' 13[CFG] added configuration 'android2' 13[CFG] adding virtual IP address pool 'android2': 10.0.0.2/32 08[NET] received packet: from 208.54.35.241[32235] to 96.244.142.28[500] 15[CFG] looking for an ike config for 96.244.142.28...208.54.35.241 15[CFG] candidate: %any...%any, prio 2 15[CFG] candidate: 96.244.142.28...%any, prio 5 15[CFG] found matching ike config: 96.244.142.28...%any with prio 5 01[JOB] next event in 29s 999ms, waiting 15[IKE] received NAT-T (RFC 3947) vendor ID 15[IKE] received draft-ietf-ipsec-nat-t-ike-02 vendor ID 15[IKE] received draft-ietf-ipsec-nat-t-ike-02\n vendor ID 15[IKE] received draft-ietf-ipsec-nat-t-ike-00 vendor ID 15[IKE] received XAuth vendor ID 15[IKE] received Cisco Unity vendor ID 15[IKE] received DPD vendor ID 15[IKE] 208.54.35.241 is initiating a Main Mode IKE_SA 15[IKE] IKE_SA (unnamed)[1] state change: CREATED => CONNECTING 15[CFG] selecting proposal: 15[CFG] proposal matches 15[CFG] received proposals: IKE:AES_CBC_256/HMAC_SHA1_96/PRF_HMAC_SHA1/MODP_1024, IKE:AES_CBC_256/HMAC_MD5_96/PRF_HMAC_MD5/MODP_1024, IKE:AES_CBC_128/HMAC_SHA1_96/PRF_HMAC_SHA1/MODP_1024, IKE:AES_CBC_128/HMAC_MD5_96/PRF_HMAC_MD5/MODP_1024, IKE:3DES_CBC/HMAC_SHA1_96/PRF_HMAC_SHA1/MODP_1024, IKE:3DES_CBC/HMAC_MD5_96/PRF_HMAC_MD5/MODP_1024, IKE:DES_CBC/HMAC_SHA1_96/PRF_HMAC_SHA1/MODP_1024, IKE:DES_CBC/HMAC_MD5_96/PRF_HMAC_MD5/MODP_1024 15[CFG] configured proposals: IKE:AES_CBC_256/HMAC_SHA1_96/PRF_HMAC_SHA1/MODP_1024, IKE:AES_CBC_128/AES_CBC_192/AES_CBC_256/3DES_CBC/CAMELLIA_CBC_128/CAMELLIA_CBC_192/CAMELLIA_CBC_256/HMAC_MD5_96/HMAC_SHA1_96/HMAC_SHA2_256_128/HMAC_SHA2_384_192/HMAC_SHA2_512_256/AES_XCBC_96/AES_CMAC_96/PRF_HMAC_MD5/PRF_HMAC_SHA1/PRF_HMAC_SHA2_256/PRF_HMAC_SHA2_384/PRF_HMAC_SHA2_512/PRF_AES128_XCBC/PRF_AES128_CMAC/MODP_2048/MODP_2048_224/MODP_2048_256/MODP_1536/MODP_4096/MODP_8192/MODP_1024/MODP_1024_160 15[CFG] selected proposal: IKE:AES_CBC_256/HMAC_SHA1_96/PRF_HMAC_SHA1/MODP_1024 15[NET] sending packet: from 96.244.142.28[500] to 208.54.35.241[32235] 04[NET] sending packet: from 96.244.142.28[500] to 208.54.35.241[32235] 15[MGR] checkin IKE_SA (unnamed)[1] 15[MGR] check-in of IKE_SA successful. 08[NET] received packet: from 208.54.35.241[32235] to 96.244.142.28[500] 08[NET] waiting for data on sockets 07[MGR] checkout IKE_SA by message 07[MGR] IKE_SA (unnamed)[1] successfully checked out 07[NET] received packet: from 208.54.35.241[32235] to 96.244.142.28[500] 07[LIB] size of DH secret exponent: 1023 bits 07[IKE] remote host is behind NAT 07[IKE] sending cert request for "C=CH, O=strongSwan, CN=strongSwan CA" 07[ENC] generating NAT_D_V1 payload finished 07[NET] sending packet: from 96.244.142.28[500] to 208.54.35.241[32235] 07[MGR] checkin IKE_SA (unnamed)[1] 07[MGR] check-in of IKE_SA successful. 04[NET] sending packet: from 96.244.142.28[500] to 208.54.35.241[32235] 08[NET] received packet: from 208.54.35.241[35595] to 96.244.142.28[4500] 10[IKE] ignoring certificate request without data 10[IKE] received end entity cert "C=CH, O=strongSwan, CN=client" 10[CFG] looking for XAuthInitRSA peer configs matching 96.244.142.28...208.54.35.241[C=CH, O=strongSwan, CN=client] 10[CFG] candidate "android-hybrid", match: 1/1/2/2 (me/other/ike/version) 10[CFG] candidate "android2", match: 1/20/5/1 (me/other/ike/version) 10[CFG] selected peer config "android2" 10[CFG] certificate "C=CH, O=strongSwan, CN=client" key: 2048 bit RSA 10[CFG] using trusted ca certificate "C=CH, O=strongSwan, CN=strongSwan CA" 10[CFG] checking certificate status of "C=CH, O=strongSwan, CN=client" 10[CFG] ocsp check skipped, no ocsp found 10[CFG] certificate status is not available 10[CFG] certificate "C=CH, O=strongSwan, CN=strongSwan CA" key: 2048 bit RSA 10[CFG] reached self-signed root ca with a path length of 0 10[CFG] using trusted certificate "C=CH, O=strongSwan, CN=client" 10[IKE] authentication of 'C=CH, O=strongSwan, CN=client' with RSA successful 10[ENC] added payload of type ID_V1 to message 10[ENC] added payload of type SIGNATURE_V1 to message 10[IKE] authentication of 'C=CH, O=strongSwan, CN=vpn.strongswan.org' (myself) successful 10[IKE] queueing XAUTH task 10[IKE] sending end entity cert "C=CH, O=strongSwan, CN=vpn.strongswan.org" 10[NET] sending packet: from 96.244.142.28[4500] to 208.54.35.241[35595] 04[NET] sending packet: from 96.244.142.28[4500] to 208.54.35.241[35595] 10[IKE] activating new tasks 10[IKE] activating XAUTH task 10[NET] sending packet: from 96.244.142.28[4500] to 208.54.35.241[35595] 04[NET] sending packet: from 96.244.142.28[4500] to 208.54.35.241[35595] 01[JOB] next event in 3s 999ms, waiting 10[MGR] checkin IKE_SA android2[1] 10[MGR] check-in of IKE_SA successful. 08[NET] received packet: from 208.54.35.241[35595] to 96.244.142.28[4500] 08[NET] waiting for data on sockets 12[MGR] checkout IKE_SA by message 12[MGR] IKE_SA android2[1] successfully checked out 12[NET] received packet: from 208.54.35.241[35595] to 96.244.142.28[4500] 12[MGR] checkin IKE_SA android2[1] 12[MGR] check-in of IKE_SA successful. 08[NET] received packet: from 208.54.35.241[35595] to 96.244.142.28[4500] 16[MGR] checkout IKE_SA by message 16[MGR] IKE_SA android2[1] successfully checked out 16[NET] received packet: from 208.54.35.241[35595] to 96.244.142.28[4500] 08[NET] waiting for data on sockets 16[IKE] XAuth authentication of 'android' successful 16[IKE] reinitiating already active tasks 16[IKE] XAUTH task 16[NET] sending packet: from 96.244.142.28[4500] to 208.54.35.241[35595] 04[NET] sending packet: from 96.244.142.28[4500] to 208.54.35.241[35595] 16[MGR] checkin IKE_SA android2[1] 01[JOB] next event in 3s 907ms, waiting 16[MGR] check-in of IKE_SA successful. 08[NET] received packet: from 208.54.35.241[35595] to 96.244.142.28[4500] 09[MGR] checkout IKE_SA by message 09[MGR] IKE_SA android2[1] successfully checked out 09[NET] received packet: from 208.54.35.241[35595] to 96.244.142.28[4500] .8rS 09[IKE] IKE_SA android2[1] established between 96.244.142.28[C=CH, O=strongSwan, CN=vpn.strongswan.org]...208.54.35.241[C=CH, O=strongSwan, CN=client] 09[IKE] IKE_SA android2[1] state change: CONNECTING => ESTABLISHED 09[IKE] scheduling reauthentication in 3409s 09[IKE] maximum IKE_SA lifetime 3589s 09[IKE] activating new tasks 09[IKE] nothing to initiate 09[MGR] checkin IKE_SA android2[1] 09[MGR] check-in of IKE_SA successful. 09[MGR] checkout IKE_SA 09[MGR] IKE_SA android2[1] successfully checked out 09[MGR] checkin IKE_SA android2[1] 09[MGR] check-in of IKE_SA successful. 01[JOB] next event in 3s 854ms, waiting 08[NET] waiting for data on sockets 08[NET] received packet: from 208.54.35.241[35595] to 96.244.142.28[4500] 14[MGR] checkout IKE_SA by message 14[MGR] IKE_SA android2[1] successfully checked out 14[NET] received packet: from 208.54.35.241[35595] to 96.244.142.28[4500] 14[IKE] processing INTERNAL_IP4_ADDRESS attribute 14[IKE] processing INTERNAL_IP4_NETMASK attribute 14[IKE] processing INTERNAL_IP4_DNS attribute 14[IKE] processing INTERNAL_IP4_NBNS attribute 14[IKE] processing UNITY_BANNER attribute 14[IKE] processing UNITY_DEF_DOMAIN attribute 14[IKE] processing UNITY_SPLITDNS_NAME attribute 14[IKE] processing UNITY_SPLIT_INCLUDE attribute 14[IKE] processing UNITY_LOCAL_LAN attribute 14[IKE] processing APPLICATION_VERSION attribute 14[IKE] peer requested virtual IP %any 14[CFG] assigning new lease to 'android' 14[IKE] assigning virtual IP 10.0.0.2 to peer 'android' 14[NET] sending packet: from 96.244.142.28[4500] to 208.54.35.241[35595] 14[MGR] checkin IKE_SA android2[1] 14[MGR] check-in of IKE_SA successful. 04[NET] sending packet: from 96.244.142.28[4500] to 208.54.35.241[35595] 08[NET] waiting for data on sockets 01[JOB] got event, queuing job for execution 01[JOB] next event in 91ms, waiting 13[MGR] checkout IKE_SA 13[MGR] IKE_SA android2[1] successfully checked out 13[MGR] checkin IKE_SA android2[1] 13[MGR] check-in of IKE_SA successful. 01[JOB] got event, queuing job for execution 01[JOB] next event in 24s 136ms, waiting 15[MGR] checkout IKE_SA 15[MGR] IKE_SA android2[1] successfully checked out 15[MGR] checkin IKE_SA android2[1] 15[MGR] check-in of IKE_SA successful.

Read the article

WPF Infinite loop in references found while processing the Template

- by Ryan

I am pretty new to WPF and am getting this error after my mouse is over my custom listbox item. Error: Infinite loop in references found while processing the Template for an element named '' of type 'System.Windows.Controls.TextBox'. <Window.Resources> <ControlTemplate x:Key="MouseOverFocusTemplate" > <Grid> <Grid.RowDefinitions> <RowDefinition Height="55*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TextBox Width="290" TextAlignment="Left" VerticalContentAlignment="Center" BorderThickness="0" BorderBrush="Transparent" Foreground="#FF6FB8FD" FontSize="24" TextWrapping="Wrap" Text="{Binding .}" Grid.Column="1" Grid.Row="1" MinHeight="55" Cursor="Hand" IsReadOnly="True" FontFamily="Arial" > <TextBox.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF013B73" Offset="0.501"/> <GradientStop Color="#FF091F34"/> <GradientStop Color="#FF014A8F" Offset="0.5"/> <GradientStop Color="#FF003363" Offset="1"/> </LinearGradientBrush> </TextBox.Background> </TextBox> </Grid> </ControlTemplate> <Style x:Key="MouseOverFocusStyle" TargetType="{x:Type TextBox}"> <Setter Property="Template" Value="{StaticResource MouseOverFocusTemplate}"/> </Style> <ControlTemplate x:Key="LostFocusTemplate" > <Grid> <Grid.RowDefinitions> <RowDefinition Height="55*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TextBox Width="290" TextAlignment="Left" VerticalContentAlignment="Center" BorderThickness="0" BorderBrush="Transparent" Foreground="#FF6FB8FD" FontSize="24" TextWrapping="Wrap" Text="{Binding .}" Grid.Column="1" Grid.Row="1" MinHeight="55" Cursor="Hand" IsReadOnly="True" FontFamily="Arial" > <TextBox.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <LinearGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterX="0.5" CenterY="0.5"/> <SkewTransform CenterX="0.5" CenterY="0.5"/> <RotateTransform CenterX="0.5" CenterY="0.5"/> <TranslateTransform/> </TransformGroup> </LinearGradientBrush.RelativeTransform> <GradientStop Color="#FF091F34" Offset="1"/> <GradientStop Color="#FF002F5C" Offset="0.4"/> </LinearGradientBrush> </TextBox.Background> </TextBox> </Grid> </ControlTemplate> <Style x:Key="LostFocusStyle" TargetType="{x:Type TextBox}"> <Setter Property="Template" Value="{StaticResource LostFocusTemplate}"/> </Style> <ControlTemplate x:Key="GotFocusTemplate" > <Grid> <Grid.RowDefinitions> <RowDefinition Height="55*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TextBox Width="290" TextAlignment="Left" VerticalContentAlignment="Center" BorderThickness="0" BorderBrush="Transparent" Foreground="#FFE38E27" FontSize="24" TextWrapping="Wrap" Text="{Binding .}" Grid.Column="1" Grid.Row="1" MinHeight="55" Cursor="Hand" IsReadOnly="True" FontFamily="Arial" > <TextBox.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Black" Offset="0.501"/> <GradientStop Color="#FF091F34"/> <GradientStop Color="#FF002F5C" Offset="0.5"/> </LinearGradientBrush> </TextBox.Background> </TextBox> </Grid> </ControlTemplate> <Style x:Key="GotFocusStyle" TargetType="{x:Type TextBox}"> <Setter Property="Template" Value="{StaticResource GotFocusTemplate}"/> </Style> <Style TargetType="ListBoxItem"> <EventSetter Event="GotFocus" Handler="ListItem_GotFocus"></EventSetter> <EventSetter Event="LostFocus" Handler="ListItem_LostFocus"></EventSetter> <EventSetter Event="Mouse.MouseMove" Handler="ListItem_MouseOver"></EventSetter> </Style> <DataTemplate DataType="{x:Type TextBlock}"> </DataTemplate> <DataTemplate x:Key="CustomListData" DataType="{x:Type ListBoxItem}"> <Border BorderBrush="Black" BorderThickness="1" Margin="-2,0,0,-1"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="55*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Grid.RenderTransform>  <TextBox Width="290" TextAlignment="Left" VerticalContentAlignment="Center" BorderThickness="0" BorderBrush="Transparent" Foreground="#FF6FB8FD" FontSize="24" FocusVisualStyle="{StaticResource GotFocusStyle}" TextWrapping="Wrap" Text="{Binding .}" Grid.Column="1" Grid.Row="1" MinHeight="55" Cursor="Hand" IsReadOnly="True" FontFamily="Arial" > <TextBox.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <LinearGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterX="0.5" CenterY="0.5"/> <SkewTransform CenterX="0.5" CenterY="0.5"/> <RotateTransform CenterX="0.5" CenterY="0.5"/> <TranslateTransform/> </TransformGroup> </LinearGradientBrush.RelativeTransform> <GradientStop Color="#FF091F34" Offset="1"/> <GradientStop Color="#FF002F5C" Offset="0.4"/> </LinearGradientBrush> </TextBox.Background> </TextBox> </Grid> </Border> </DataTemplate> <Style TargetType="{x:Type ListBox}"> <Setter Property="ItemTemplate" Value="{StaticResource CustomListData }" /> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" /> </Style> </Window.Resources> <Window.DataContext> <ObjectDataProvider ObjectType="{x:Type local:ImageLoader}" MethodName="LoadImages" /> </Window.DataContext> <ListBox ItemsSource="{Binding}" Width="320" Background="#FF021422" BorderBrush="#FF1C4B79"> <ListBox.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}">Transparent</SolidColorBrush> </ListBox.Resources> </ListBox> The code behind for the mouse over event is as follows private void ListItem_MouseOver(object sender, RoutedEventArgs e) { e.Handled = true; FrameworkElement element = e.OriginalSource as FrameworkElement; if (element != null) { while (VisualTreeHelper.GetParent(element) != null) { element = VisualTreeHelper.GetParent(element) as FrameworkElement; TextBox item = element as TextBox; if (item != null) { item.Style = (Style)item.FindResource("MouseOverFocusStyle"); return; } } } } What am I missing? Is there an easier way to do this ? Thanks in advance Ryan

Read the article

Closing a hook that captures global input events

- by Margus

Intro Here is an example to illustrate the problem. Consider I am tracking and displaying mouse global current position and last click button and position to the user. Here is an image: To archive capturing click events on windows box, that would and will be sent to the other programs event messaging queue, I create a hook using winapi namely user32.dll library. This is outside JDK sandbox, so I use JNA to call the native library. This all works perfectly, but it does not close as I expect it to. My question is - How do I properly close following example program? Example source Code below is not fully written by Me, but taken from this question in Oracle forum and partly fixed. import java.awt.AWTException; import java.awt.Dimension; import java.awt.EventQueue; import java.awt.GridLayout; import java.awt.MouseInfo; import java.awt.Point; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; import javax.swing.JFrame; import javax.swing.JLabel; import com.sun.jna.Native; import com.sun.jna.NativeLong; import com.sun.jna.Platform; import com.sun.jna.Structure; import com.sun.jna.platform.win32.BaseTSD.ULONG_PTR; import com.sun.jna.platform.win32.Kernel32; import com.sun.jna.platform.win32.User32; import com.sun.jna.platform.win32.WinDef.HWND; import com.sun.jna.platform.win32.WinDef.LRESULT; import com.sun.jna.platform.win32.WinDef.WPARAM; import com.sun.jna.platform.win32.WinUser.HHOOK; import com.sun.jna.platform.win32.WinUser.HOOKPROC; import com.sun.jna.platform.win32.WinUser.MSG; import com.sun.jna.platform.win32.WinUser.POINT; public class MouseExample { final JFrame jf; final JLabel jl1, jl2; final CWMouseHook mh; final Ticker jt; public class Ticker extends Thread { public boolean update = true; public void done() { update = false; } public void run() { try { Point p, l = MouseInfo.getPointerInfo().getLocation(); int i = 0; while (update == true) { try { p = MouseInfo.getPointerInfo().getLocation(); if (!p.equals(l)) { l = p; jl1.setText(new GlobalMouseClick(p.x, p.y) .toString()); } Thread.sleep(35); } catch (InterruptedException e) { e.printStackTrace(); return; } } } catch (Exception e) { update = false; } } } public MouseExample() throws AWTException, UnsupportedOperationException { this.jl1 = new JLabel("{}"); this.jl2 = new JLabel("{}"); this.jf = new JFrame(); this.jt = new Ticker(); this.jt.start(); this.mh = new CWMouseHook() { @Override public void globalClickEvent(GlobalMouseClick m) { jl2.setText(m.toString()); } }; mh.setMouseHook(); jf.setLayout(new GridLayout(2, 2)); jf.add(new JLabel("Position")); jf.add(jl1); jf.add(new JLabel("Last click")); jf.add(jl2); jf.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent we) { mh.dispose(); jt.done(); jf.dispose(); } }); jf.setLocation(new Point(0, 0)); jf.setPreferredSize(new Dimension(200, 90)); jf.pack(); jf.setVisible(true); } public static class GlobalMouseClick { private char c; private int x, y; public GlobalMouseClick(char c, int x, int y) { super(); this.c = c; this.x = x; this.y = y; } public GlobalMouseClick(int x, int y) { super(); this.x = x; this.y = y; } public char getC() { return c; } public void setC(char c) { this.c = c; } public int getX() { return x; } public void setX(int x) { this.x = x; } public int getY() { return y; } public void setY(int y) { this.y = y; } @Override public String toString() { return (c != 0 ? c : "") + " [" + x + "," + y + "]"; } } public static class CWMouseHook { public User32 USER32INST; public CWMouseHook() throws UnsupportedOperationException { if (!Platform.isWindows()) { throw new UnsupportedOperationException( "Not supported on this platform."); } USER32INST = User32.INSTANCE; mouseHook = hookTheMouse(); Native.setProtected(true); } private static LowLevelMouseProc mouseHook; private HHOOK hhk; private boolean isHooked = false; public static final int WM_LBUTTONDOWN = 513; public static final int WM_LBUTTONUP = 514; public static final int WM_RBUTTONDOWN = 516; public static final int WM_RBUTTONUP = 517; public static final int WM_MBUTTONDOWN = 519; public static final int WM_MBUTTONUP = 520; public void dispose() { unsetMouseHook(); mousehook_thread = null; mouseHook = null; hhk = null; USER32INST = null; } public void unsetMouseHook() { isHooked = false; USER32INST.UnhookWindowsHookEx(hhk); System.out.println("Mouse hook is unset."); } public boolean isIsHooked() { return isHooked; } public void globalClickEvent(GlobalMouseClick m) { System.out.println(m); } private Thread mousehook_thread; public void setMouseHook() { mousehook_thread = new Thread(new Runnable() { @Override public void run() { try { if (!isHooked) { hhk = USER32INST.SetWindowsHookEx(14, mouseHook, Kernel32.INSTANCE.GetModuleHandle(null), 0); isHooked = true; System.out .println("Mouse hook is set. Click anywhere."); // message dispatch loop (message pump) MSG msg = new MSG(); while ((USER32INST.GetMessage(msg, null, 0, 0)) != 0) { USER32INST.TranslateMessage(msg); USER32INST.DispatchMessage(msg); if (!isHooked) break; } } else System.out .println("The Hook is already installed."); } catch (Exception e) { System.err.println("Caught exception in MouseHook!"); } } }); mousehook_thread.start(); } private interface LowLevelMouseProc extends HOOKPROC { LRESULT callback(int nCode, WPARAM wParam, MOUSEHOOKSTRUCT lParam); } private LowLevelMouseProc hookTheMouse() { return new LowLevelMouseProc() { @Override public LRESULT callback(int nCode, WPARAM wParam, MOUSEHOOKSTRUCT info) { if (nCode >= 0) { switch (wParam.intValue()) { case CWMouseHook.WM_LBUTTONDOWN: globalClickEvent(new GlobalMouseClick('L', info.pt.x, info.pt.y)); break; case CWMouseHook.WM_RBUTTONDOWN: globalClickEvent(new GlobalMouseClick('R', info.pt.x, info.pt.y)); break; case CWMouseHook.WM_MBUTTONDOWN: globalClickEvent(new GlobalMouseClick('M', info.pt.x, info.pt.y)); break; default: break; } } return USER32INST.CallNextHookEx(hhk, nCode, wParam, info.getPointer()); } }; } public class Point extends Structure { public class ByReference extends Point implements Structure.ByReference { }; public NativeLong x; public NativeLong y; } public static class MOUSEHOOKSTRUCT extends Structure { public static class ByReference extends MOUSEHOOKSTRUCT implements Structure.ByReference { }; public POINT pt; public HWND hwnd; public int wHitTestCode; public ULONG_PTR dwExtraInfo; } } public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { @Override public void run() { try { new MouseExample(); } catch (AWTException e) { e.printStackTrace(); } } }); } }

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

Working with PivotTables in Excel

- by Mark Virtue

PivotTables are one of the most powerful features of Microsoft Excel. They allow large amounts of data to be analyzed and summarized in just a few mouse clicks. In this article, we explore PivotTables, understand what they are, and learn how to create and customize them. Note: This article is written using Excel 2010 (Beta). The concept of a PivotTable has changed little over the years, but the method of creating one has changed in nearly every iteration of Excel. If you are using a version of Excel that is not 2010, expect different screens from the ones you see in this article. A Little History In the early days of spreadsheet programs, Lotus 1-2-3 ruled the roost. Its dominance was so complete that people thought it was a waste of time for Microsoft to bother developing their own spreadsheet software (Excel) to compete with Lotus. Flash-forward to 2010, and Excel’s dominance of the spreadsheet market is greater than Lotus’s ever was, while the number of users still running Lotus 1-2-3 is approaching zero. How did this happen? What caused such a dramatic reversal of fortunes? Industry analysts put it down to two factors: Firstly, Lotus decided that this fancy new GUI platform called “Windows” was a passing fad that would never take off. They declined to create a Windows version of Lotus 1-2-3 (for a few years, anyway), predicting that their DOS version of the software was all anyone would ever need. Microsoft, naturally, developed Excel exclusively for Windows. Secondly, Microsoft developed a feature for Excel that Lotus didn’t provide in 1-2-3, namely PivotTables. The PivotTables feature, exclusive to Excel, was deemed so staggeringly useful that people were willing to learn an entire new software package (Excel) rather than stick with a program (1-2-3) that didn’t have it. This one feature, along with the misjudgment of the success of Windows, was the death-knell for Lotus 1-2-3, and the beginning of the success of Microsoft Excel. Understanding PivotTables So what is a PivotTable, exactly? Put simply, a PivotTable is a summary of some data, created to allow easy analysis of said data. But unlike a manually created summary, Excel PivotTables are interactive. Once you have created one, you can easily change it if it doesn’t offer the exact insights into your data that you were hoping for. In a couple of clicks the summary can be “pivoted” – rotated in such a way that the column headings become row headings, and vice versa. There’s a lot more that can be done, too. Rather than try to describe all the features of PivotTables, we’ll simply demonstrate them… The data that you analyze using a PivotTable can’t be just any data – it has to be raw data, previously unprocessed (unsummarized) – typically a list of some sort. An example of this might be the list of sales transactions in a company for the past six months. Examine the data shown below: Notice that this is not raw data. In fact, it is already a summary of some sort. In cell B3 we can see $30,000, which apparently is the total of James Cook’s sales for the month of January. So where is the raw data? How did we arrive at the figure of $30,000? Where is the original list of sales transactions that this figure was generated from? It’s clear that somewhere, someone must have gone to the trouble of collating all of the sales transactions for the past six months into the summary we see above. How long do you suppose this took? An hour? Ten? Probably. If we were to track down the original list of sales transactions, it might look something like this: You may be surprised to learn that, using the PivotTable feature of Excel, we can create a monthly sales summary similar to the one above in a few seconds, with only a few mouse clicks. We can do this – and a lot more too! How to Create a PivotTable First, ensure that you have some raw data in a worksheet in Excel. A list of financial transactions is typical, but it can be a list of just about anything: Employee contact details, your CD collection, or fuel consumption figures for your company’s fleet of cars. So we start Excel… …and we load such a list… Once we have the list open in Excel, we’re ready to start creating the PivotTable. Click on any one single cell within the list: Then, from the Insert tab, click the PivotTable icon: The Create PivotTable box appears, asking you two questions: What data should your new PivotTable be based on, and where should it be created? Because we already clicked on a cell within the list (in the step above), the entire list surrounding that cell is already selected for us ($A$1:$G$88 on the Payments sheet, in this example). Note that we could select a list in any other region of any other worksheet, or even some external data source, such as an Access database table, or even a MS-SQL Server database table. We also need to select whether we want our new PivotTable to be created on a new worksheet, or on an existing one. In this example we will select a new one: The new worksheet is created for us, and a blank PivotTable is created on that worksheet: Another box also appears: The PivotTable Field List. This field list will be shown whenever we click on any cell within the PivotTable (above): The list of fields in the top part of the box is actually the collection of column headings from the original raw data worksheet. The four blank boxes in the lower part of the screen allow us to choose the way we would like our PivotTable to summarize the raw data. So far, there is nothing in those boxes, so the PivotTable is blank. All we need to do is drag fields down from the list above and drop them in the lower boxes. A PivotTable is then automatically created to match our instructions. If we get it wrong, we only need to drag the fields back to where they came from and/or drag new fields down to replace them. The Values box is arguably the most important of the four. The field that is dragged into this box represents the data that needs to be summarized in some way (by summing, averaging, finding the maximum, minimum, etc). It is almost always numerical data. A perfect candidate for this box in our sample data is the “Amount” field/column. Let’s drag that field into the Values box: Notice that (a) the “Amount” field in the list of fields is now ticked, and “Sum of Amount” has been added to the Values box, indicating that the amount column has been summed. If we examine the PivotTable itself, we indeed find the sum of all the “Amount” values from the raw data worksheet: We’ve created our first PivotTable! Handy, but not particularly impressive. It’s likely that we need a little more insight into our data than that. Referring to our sample data, we need to identify one or more column headings that we could conceivably use to split this total. For example, we may decide that we would like to see a summary of our data where we have a row heading for each of the different salespersons in our company, and a total for each. To achieve this, all we need to do is to drag the “Salesperson” field into the Row Labels box: Now, finally, things start to get interesting! Our PivotTable starts to take shape…. With a couple of clicks we have created a table that would have taken a long time to do manually. So what else can we do? Well, in one sense our PivotTable is complete. We’ve created a useful summary of our source data. The important stuff is already learned! For the rest of the article, we will examine some ways that more complex PivotTables can be created, and ways that those PivotTables can be customized. First, we can create a two-dimensional table. Let’s do that by using “Payment Method” as a column heading. Simply drag the “Payment Method” heading to the Column Labels box: Which looks like this: Starting to get very cool! Let’s make it a three-dimensional table. What could such a table possibly look like? Well, let’s see… Drag the “Package” column/heading to the Report Filter box: Notice where it ends up…. This allows us to filter our report based on which “holiday package” was being purchased. For example, we can see the breakdown of salesperson vs payment method for all packages, or, with a couple of clicks, change it to show the same breakdown for the “Sunseekers” package: And so, if you think about it the right way, our PivotTable is now three-dimensional. Let’s keep customizing… If it turns out, say, that we only want to see cheque and credit card transactions (i.e. no cash transactions), then we can deselect the “Cash” item from the column headings. Click the drop-down arrow next to Column Labels, and untick “Cash”: Let’s see what that looks like…As you can see, “Cash” is gone. Formatting This is obviously a very powerful system, but so far the results look very plain and boring. For a start, the numbers that we’re summing do not look like dollar amounts – just plain old numbers. Let’s rectify that. A temptation might be to do what we’re used to doing in such circumstances and simply select the whole table (or the whole worksheet) and use the standard number formatting buttons on the toolbar to complete the formatting. The problem with that approach is that if you ever change the structure of the PivotTable in the future (which is 99% likely), then those number formats will be lost. We need a way that will make them (semi-)permanent. First, we locate the “Sum of Amount” entry in the Values box, and click on it. A menu appears. We select Value Field Settings… from the menu: The Value Field Settings box appears. Click the Number Format button, and the standard Format Cells box appears: From the Category list, select (say) Accounting, and drop the number of decimal places to 0. Click OK a few times to get back to the PivotTable… As you can see, the numbers have been correctly formatted as dollar amounts. While we’re on the subject of formatting, let’s format the entire PivotTable. There are a few ways to do this. Let’s use a simple one… Click the PivotTable Tools/Design tab: Then drop down the arrow in the bottom-right of the PivotTable Styles list to see a vast collection of built-in styles: Choose any one that appeals, and look at the result in your PivotTable: Other Options We can work with dates as well. Now usually, there are many, many dates in a transaction list such as the one we started with. But Excel provides the option to group data items together by day, week, month, year, etc. Let’s see how this is done. First, let’s remove the “Payment Method” column from the Column Labels box (simply drag it back up to the field list), and replace it with the “Date Booked” column: As you can see, this makes our PivotTable instantly useless, giving us one column for each date that a transaction occurred on – a very wide table! To fix this, right-click on any date and select Group… from the context-menu: The grouping box appears. We select Months and click OK: Voila! A much more useful table: (Incidentally, this table is virtually identical to the one shown at the beginning of this article – the original sales summary that was created manually.) Another cool thing to be aware of is that you can have more than one set of row headings (or column headings): …which looks like this…. You can do a similar thing with column headings (or even report filters). Keeping things simple again, let’s see how to plot averaged values, rather than summed values. First, click on “Sum of Amount”, and select Value Field Settings… from the context-menu that appears: In the Summarize value field by list in the Value Field Settings box, select Average: While we’re here, let’s change the Custom Name, from “Average of Amount” to something a little more concise. Type in something like “Avg”: Click OK, and see what it looks like. Notice that all the values change from summed totals to averages, and the table title (top-left cell) has changed to “Avg”: If we like, we can even have sums, averages and counts (counts = how many sales there were) all on the same PivotTable! Here are the steps to get something like that in place (starting from a blank PivotTable): Drag “Salesperson” into the Column Labels Drag “Amount” field down into the Values box three times For the first “Amount” field, change its custom name to “Total” and it’s number format to Accounting (0 decimal places) For the second “Amount” field, change its custom name to “Average”, its function to Average and it’s number format to Accounting (0 decimal places) For the third “Amount” field, change its name to “Count” and its function to Count Drag the automatically created field from Column Labels to Row Labels Here’s what we end up with: Total, average and count on the same PivotTable! Conclusion There are many, many more features and options for PivotTables created by Microsoft Excel – far too many to list in an article like this. To fully cover the potential of PivotTables, a small book (or a large website) would be required. Brave and/or geeky readers can explore PivotTables further quite easily: Simply right-click on just about everything, and see what options become available to you. There are also the two ribbon-tabs: PivotTable Tools/Options and Design. It doesn’t matter if you make a mistake – it’s easy to delete the PivotTable and start again – a possibility old DOS users of Lotus 1-2-3 never had. We’ve included an Excel that should work with most versions of Excel, so you can download to practice your PivotTable skills. Download Our Practice Excel File Similar Articles Productive Geek Tips Magnify Selected Cells In Excel 2007Share Access Data with Excel in Office 2010Make Excel 2007 Print Gridlines In Workbook FileMake Excel 2007 Always Save in Excel 2003 FormatConvert Older Excel Documents to Excel 2007 Format TouchFreeze Alternative in AutoHotkey The Icy Undertow Desktop Windows Home Server – Backup to LAN The Clear & Clean Desktop Use This Bookmarklet to Easily Get Albums Use AutoHotkey to Assign a Hotkey to a Specific Window Latest Software Reviews Tinyhacker Random Tips Revo Uninstaller Pro Registry Mechanic 9 for Windows PC Tools Internet Security Suite 2010 PCmover Professional Ben & Jerry’s Free Cone Day, 3/23/10 New Stinger from McAfee Helps Remove ‘FakeAlert’ Threats Google Apps Marketplace: Tools & Services For Google Apps Users Get News Quick and Precise With Newser Scan for Viruses in Ubuntu using ClamAV Replace Your Windows Task Manager With System Explorer

Read the article

ASP.NET MVC 3: Layouts and Sections with Razor

- by ScottGu

This is another in a series of posts I’m doing that cover some of the new ASP.NET MVC 3 features: Introducing Razor (July 2nd) New @model keyword in Razor (Oct 19th) Layouts with Razor (Oct 22nd) Server-Side Comments with Razor (Nov 12th) Razor’s @: and <text> syntax (Dec 15th) Implicit and Explicit code nuggets with Razor (Dec 16th) Layouts and Sections with Razor (Today) In today’s post I’m going to go into more details about how Layout pages work with Razor. In particular, I’m going to cover how you can have multiple, non-contiguous, replaceable “sections” within a layout file – and enable views based on layouts to optionally “fill in” these different sections at runtime. The Razor syntax for doing this is clean and concise. I’ll also show how you can dynamically check at runtime whether a particular layout section has been defined, and how you can provide alternate content (or even an alternate layout) in the event that a section isn’t specified within a view template. This provides a powerful and easy way to customize the UI of your site and make it clean and DRY from an implementation perspective. What are Layouts? You typically want to maintain a consistent look and feel across all of the pages within your web-site/application. ASP.NET 2.0 introduced the concept of “master pages” which helps enable this when using .aspx based pages or templates. Razor also supports this concept with a feature called “layouts” – which allow you to define a common site template, and then inherit its look and feel across all the views/pages on your site. I previously discussed the basics of how layout files work with Razor in my ASP.NET MVC 3: Layouts with Razor blog post. Today’s post will go deeper and discuss how you can define multiple, non-contiguous, replaceable regions within a layout file that you can then optionally “fill in” at runtime. Site Layout Scenario Let’s look at how we can implement a common site layout scenario with ASP.NET MVC 3 and Razor. Specifically, we’ll implement some site UI where we have a common header and footer on all of our pages. We’ll also add a “sidebar” section to the right of our common site layout. On some pages we’ll customize the SideBar to contain content specific to the page it is included on: And on other pages (that do not have custom sidebar content) we will fall back and provide some “default content” to the sidebar: We’ll use ASP.NET MVC 3 and Razor to enable this customization in a nice, clean way. Below are some step-by-step tutorial instructions on how to build the above site with ASP.NET MVC 3 and Razor. Part 1: Create a New Project with a Layout for the “Body” section We’ll begin by using the “File->New Project” menu command within Visual Studio to create a new ASP.NET MVC 3 Project. We’ll create the new project using the “Empty” template option: This will create a new project that has no default controllers in it: Creating a HomeController We will then right-click on the “Controllers” folder of our newly created project and choose the “Add->Controller” context menu command. This will bring up the “Add Controller” dialog: We’ll name the new controller we create “HomeController”. When we click the “Add” button Visual Studio will add a HomeController class to our project with a default “Index” action method that returns a view: We won’t need to write any Controller logic to implement this sample – so we’ll leave the default code as-is. Creating a View Template Our next step will be to implement the view template associated with the HomeController’s Index action method. To implement the view template, we will right-click within the “HomeController.Index()” method and select the “Add View” command to create a view template for our home page: This will bring up the “Add View” dialog within Visual Studio. We do not need to change any of the default settings within the above dialog (the name of the template was auto-populated to Index because we invoked the “Add View” context menu command within the Index method). When we click the “Add” Button within the dialog, a Razor-based “Index.cshtml” view template will be added to the \Views\Home\ folder within our project. Let’s add some simple default static content to it: Notice above how we don’t have an <html> or <body> section defined within our view template. This is because we are going to rely on a layout template to supply these elements and use it to define the common site layout and structure for our site (ensuring that it is consistent across all pages and URLs within the site). Customizing our Layout File Let’s open and customize the default “_Layout.cshtml” file that was automatically added to the \Views\Shared folder when we created our new project: The default layout file (shown above) is pretty basic and simply outputs a title (if specified in either the Controller or the View template) and adds links to a stylesheet and jQuery. The call to “RenderBody()” indicates where the main body content of our Index.cshtml file will merged into the output sent back to the browser. Let’s modify the Layout template to add a common header, footer and sidebar to the site: We’ll then edit the “Site.css” file within the \Content folder of our project and add 4 CSS rules to it: And now when we run the project and browse to the home “/” URL of our project we’ll see a page like below: Notice how the content of the HomeController’s Index view template and the site’s Shared Layout template have been merged together into a single HTML response. Below is what the HTML sent back from the server looks like: Part 2: Adding a “SideBar” Section Our site so far has a layout template that has only one “section” in it – what we call the main “body” section of the response. Razor also supports the ability to add additional "named sections” to layout templates as well. These sections can be defined anywhere in the layout file (including within the <head> section of the HTML), and allow you to output dynamic content to multiple, non-contiguous, regions of the final response. Defining the “SideBar” section in our Layout Let’s update our Layout template to define an additional “SideBar” section of content that will be rendered within the <div id=”sidebar”> region of our HTML. We can do this by calling the RenderSection(string sectionName, bool required) helper method within our Layout.cshtml file like below: The first parameter to the “RenderSection()” helper method specifies the name of the section we want to render at that location in the layout template. The second parameter is optional, and allows us to define whether the section we are rendering is required or not. If a section is “required”, then Razor will throw an error at runtime if that section is not implemented within a view template that is based on the layout file (which can make it easier to track down content errors). If a section is not required, then its presence within a view template is optional, and the above RenderSection() code will render nothing at runtime if it isn’t defined. Now that we’ve made the above change to our layout file, let’s hit refresh in our browser and see what our Home page now looks like: Notice how we currently have no content within our SideBar <div> – that is because the Index.cshtml view template doesn’t implement our new “SideBar” section yet. Implementing the “SideBar” Section in our View Template Let’s change our home-page so that it has a SideBar section that outputs some custom content. We can do that by opening up the Index.cshtml view template, and by adding a new “SiderBar” section to it. We’ll do this using Razor’s @section SectionName { } syntax: We could have put our SideBar @section declaration anywhere within the view template. I think it looks cleaner when defined at the top or bottom of the file – but that is simply personal preference. You can include any content or code you want within @section declarations. Notice above how I have a C# code nugget that outputs the current time at the bottom of the SideBar section. I could have also written code that used ASP.NET MVC’s HTML/AJAX helper methods and/or accessed any strongly-typed model objects passed to the Index.cshtml view template. Now that we’ve made the above template changes, when we hit refresh in our browser again we’ll see that our SideBar content – that is specific to the Home Page of our site – is now included in the page response sent back from the server: The SideBar section content has been merged into the proper location of the HTML response : Part 3: Conditionally Detecting if a Layout Section Has Been Implemented Razor provides the ability for you to conditionally check (from within a layout file) whether a section has been defined within a view template, and enables you to output an alternative response in the event that the section has not been defined. This provides a convenient way to specify default UI for optional layout sections. Let’s modify our Layout file to take advantage of this capability. Below we are conditionally checking whether the “SideBar” section has been defined without the view template being rendered (using the IsSectionDefined() method), and if so we render the section. If the section has not been defined, then we now instead render some default content for the SideBar: Note: You want to make sure you prefix calls to the RenderSection() helper method with a @ character – which will tell Razor to execute the HelperResult it returns and merge in the section content in the appropriate place of the output. Notice how we wrote @RenderSection(“SideBar”) above instead of just RenderSection(“SideBar”). Otherwise you’ll get an error. Above we are simply rendering an inline static string (<p>Default SideBar Content</p>) if the section is not defined. A real-world site would more likely refactor this default content to be stored within a separate partial template (which we’d render using the Html.RenderPartial() helper method within the else block) or alternatively use the Html.Action() helper method within the else block to encapsulate both the logic and rendering of the default sidebar. When we hit refresh on our home-page, we will still see the same custom SideBar content we had before. This is because we implemented the SideBar section within our Index.cshtml view template (and so our Layout rendered it): Let’s now implement a “/Home/About” URL for our site by adding a new “About” action method to our HomeController: The About() action method above simply renders a view back to the client when invoked. We can implement the corresponding view template for this action by right-clicking within the “About()” method and using the “Add View” menu command (like before) to create a new About.cshtml view template. We’ll implement the About.cshtml view template like below. Notice that we are not defining a “SideBar” section within it: When we browse the /Home/About URL we’ll see the content we supplied above in the main body section of our response, and the default SideBar content will rendered: The layout file determined at runtime that a custom SideBar section wasn’t present in the About.cshtml view template, and instead rendered the default sidebar content. One Last Tweak… Let’s suppose that at a later point we decide that instead of rendering default side-bar content, we just want to hide the side-bar entirely from pages that don’t have any custom sidebar content defined. We could implement this change simply by making a small modification to our layout so that the sidebar content (and its surrounding HTML chrome) is only rendered if the SideBar section is defined. The code to do this is below: Razor is flexible enough so that we can make changes like this and not have to modify any of our view templates (nor make change any Controller logic changes) to accommodate this. We can instead make just this one modification to our Layout file and the rest happens cleanly. This type of flexibility makes Razor incredibly powerful and productive. Summary Razor’s layout capability enables you to define a common site template, and then inherit its look and feel across all the views/pages on your site. Razor enables you to define multiple, non-contiguous, “sections” within layout templates that can be “filled-in” by view templates. The @section {} syntax for doing this is clean and concise. Razor also supports the ability to dynamically check at runtime whether a particular section has been defined, and to provide alternate content (or even an alternate layout) in the event that it isn’t specified. This provides a powerful and easy way to customize the UI of your site - and make it clean and DRY from an implementation perspective. Hope this helps, Scott P.S. In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow me at: twitter.com/scottgu

Read the article

Building a jQuery Plug-in to make an HTML Table scrollable

- by Rick Strahl

Today I got a call from a customer and we were looking over an older application that uses a lot of tables to display financial and other assorted data. The application is mostly meta-data driven with lots of layout formatting automatically driven through meta data rather than through explicit hand coded HTML layouts. One of the problems in this apps are tables that display a non-fixed amount of data. The users of this app don't want to use paging to see more data, but instead want to display overflow data using a scrollbar. Many of the forms are very densely populated, often with multiple data tables that display a few rows of data in the UI at the most. This sort of layout does not lend itself well to paging, but works much better with scrollable data. Unfortunately scrollable tables are not easily created. HTML Tables are mangy beasts as anybody who's done any sort of Web development knows. Tables are finicky when it comes to styling and layout, and they have many funky quirks, especially when it comes to scrolling both of the table rows themselves or even the child columns. There's no built-in way to make tables scroll and to lock headers while you do, and while you can embed a table (or anything really) into a scrolling div with something like this: <div style="position:relative; overflow: hidden; overflow-y: scroll; height: 200px; width: 400px;"> <table id="table" style="width: 100%" class="blackborder" > <thead> <tr class="gridheader"> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th >Column 4</th> </tr> </thead> <tbody> <tr> <td>Column 1 Content</td> <td>Column 2 Content</td> <td>Column 3 Content</td> <td>Column 4 Content</td> </tr> <tr> <td>Column 1 Content</td> <td>Column 2 Content</td> <td>Column 3 Content</td> <td>Column 4 Content</td> </tr> … </tbody> </table> </div> </div> that won't give a very satisfying visual experience: Both the header and body scroll which looks odd. You lose context as soon as the header scrolls off the top and when you reach the bottom of the list the bottom outline of the table shows which also looks off. The the side bar shows all the way down the length of the table yet another visual miscue. In a pinch this will work, but it's ugly. What's out there? Before we go further here you should know that there are a few capable grid plug-ins out there already. Among them: Flexigrid (can work of any table as well as with AJAX data) jQuery Scrollable Table Plug-in (feature similar to what I need but not quite) jqGrid (mostly an Ajax Grid which is very powerful and works very well) But in the end none of them fit the bill of what I needed in this situation. All of these require custom CSS and some of them are fairly complex to restyle. Others are AJAX only or work better with AJAX loaded data. However, I need to actually try (as much as possible) to maintain the original styling of the tables without requiring extensive re-styling. Building the makeTableScrollable() Plug-in To make a table scrollable requires rearranging the table a bit. In the plug-in I built I create two <div> tags and split the table into two: one for the table header and one for the table body. The bottom <div> tag then contains only the table's row data and can be scrolled while the header stays fixed. Using jQuery the basic idea is pretty simple: You create the divs, copy the original table into the bottom, then clone the table, clear all content append the <thead> section, into new table and then copy that table into the second header <div>. Easy as pie, right? Unfortunately it's a bit more complicated than that as it's tricky to get the width of the table right to account for the scrollbar (by adding a small column) and making sure the borders properly line up for the two tables. A lot of style settings have to be made to ensure the table is a fixed size, to remove and reattach borders, to add extra space to allow for the scrollbar and so forth. The end result of my plug-in is a table with a scrollbar. Using the same table I used earlier the result looks like this: To create it, I use the following jQuery plug-in logic to select my table and run the makeTableScrollable() plug-in against the selector: $("#table").makeTableScrollable( { cssClass:"blackborder"} ); Without much further ado, here's the short code for the plug-in: (function ($) { $.fn.makeTableScrollable = function (options) { return this.each(function () { var $table = $(this); var opt = { // height of the table height: "250px", // right padding added to support the scrollbar rightPadding: "10px", // cssclass used for the wrapper div cssClass: "" } $.extend(opt, options); var $thead = $table.find("thead"); var $ths = $thead.find("th"); var id = $table.attr("id"); var cssClass = $table.attr("class"); if (!id) id = "_table_" + new Date().getMilliseconds().ToString(); $table.width("+=" + opt.rightPadding); $table.css("border-width", 0); // add a column to all rows of the table var first = true; $table.find("tr").each(function () { var row = $(this); if (first) { row.append($("<th>").width(opt.rightPadding)); first = false; } else row.append($("<td>").width(opt.rightPadding)); }); // force full sizing on each of the th elemnts $ths.each(function () { var $th = $(this); $th.css("width", $th.width()); }); // Create the table wrapper div var $tblDiv = $("<div>").css({ position: "relative", overflow: "hidden", overflowY: "scroll" }) .addClass(opt.cssClass); var width = $table.width(); $tblDiv.width(width).height(opt.height) .attr("id", id + "_wrapper") .css("border-top", "none"); // Insert before $tblDiv $tblDiv.insertBefore($table); // then move the table into it $table.appendTo($tblDiv); // Clone the div for header var $hdDiv = $tblDiv.clone(); $hdDiv.empty(); var width = $table.width(); $hdDiv.attr("style", "") .css("border-bottom", "none") .width(width) .attr("id", id + "_wrapper_header"); // create a copy of the table and remove all children var $newTable = $($table).clone(); $newTable.empty() .attr("id", $table.attr("id") + "_header"); $thead.appendTo($newTable); $hdDiv.insertBefore($tblDiv); $newTable.appendTo($hdDiv); $table.css("border-width", 0); }); } })(jQuery); Oh sweet spaghetti code :-) The code starts out by dealing the parameters that can be passed in the options object map: height The height of the full table/structure. The height of the outside wrapper container. Defaults to 200px. rightPadding The padding that is added to the right of the table to account for the scrollbar. Creates a column of this width and injects it into the table. If too small the rightmost column might get truncated. if too large the empty column might show. cssClass The CSS class of the wrapping container that appears to wrap the table. If you want a border around your table this class should probably provide it since the plug-in removes the table border. The rest of the code is obtuse, but pretty straight forward. It starts by creating a new column in the table to accommodate the width of the scrollbar and avoid clipping of text in the rightmost column. The width of the columns is explicitly set in the header elements to force the size of the table to be fixed and to provide the same sizing when the THEAD section is moved to a new copied table later. The table wrapper div is created, formatted and the table is moved into it. The new wrapper div is cloned for the header wrapper and configured. Finally the actual table is cloned and cleared of all elements. The original table's THEAD section is then moved into the new table. At last the new table is added to the header <div>, and the header <div> is inserted before the table wrapper <div>. I'm always amazed how easy jQuery makes it to do this sort of re-arranging, and given of what's happening the amount of code is rather small. Disclaimer: Your mileage may vary A word of warning: I make no guarantees about the code above. It's a first cut and I provided this here mainly to demonstrate the concepts of decomposing and reassembling an HTML layout :-) which jQuery makes so nice and easy. I tested this component against the typical scenarios we plan on using it for which are tables that use a few well known styles (or no styling at all). I suspect if you have complex styling on your <table> tag that things might not go so well. If you plan on using this plug-in you might want to minimize your styling of the table tag and defer any border formatting using the class passed in via the cssClass parameter, which ends up on the two wrapper div's that wrap the header and body rows. There's also no explicit support for footers. I rarely if ever use footers (when not using paging that is), so I didn't feel the need to add footer support. However, if you need that it's not difficult to add - the logic is the same as adding the header. The plug-in relies on a well-formatted table that has THEAD and TBODY sections along with TH tags in the header. Note that ASP.NET WebForm DataGrids and GridViews by default do not generate well-formatted table HTML. You can look at my Adding proper THEAD sections to a GridView post for more info on how to get a GridView to render properly. The plug-in has no dependencies other than jQuery. Even with the limitations in mind I hope this might be useful to some of you. I know I've already identified a number of places in my own existing applications where I will be plugging this in almost immediately. Resources Download Sample and Plug-in code Latest version in the West Wind Web & AJAX Toolkit Repository © Rick Strahl, West Wind Technologies, 2005-2011Posted in jQuery HTML ASP.NET

Read the article

eBooks on iPad vs. Kindle: More Debate than Smackdown

- by andrewbrust

When the iPad was presented at its San Francisco launch event on January 28th, Steve Jobs spent a significant amount of time explaining how well the device would serve as an eBook reader. He showed the iBooks reader application and iBookstore and laid down the gauntlet before Amazon and its beloved Kindle device. Almost immediately afterwards, criticism came rushing forth that the iPad could never beat the Kindle for book reading. The curious part of that criticism is that virtually no one offering it had actually used the iPad yet. A few weeks later, on April 3rd, the iPad was released for sale in the United States. I bought one on that day and in the few additional weeks that have elapsed, I’ve given quite a workout to most of its capabilities, including its eBook features. I’ve also spent some time with the Kindle, albeit a first-generation model, to see how it actually compares to the iPad. I had some expectations going in, but I came away with conclusions about each device that were more scenario-based than absolute. I present my findings to you here. Vital Statistics Let’s start with an inventory of each device’s underlying technology. The iPad has a color, backlit LCD screen and an on-screen keyboard. It has a battery which, on a full charge, lasts anywhere from 6-10 hours. The Kindle offers a monochrome, reflective E Ink display, a physical keyboard and a battery that on my first gen loaner unit can go up to a week between charges (Amazon claims the battery on the Kindle 2 can last up to 2 weeks on a single charge). The Kindle connects to Amazon’s Kindle Store using a 3G modem (the technology and network vary depending on the model) that incurs no airtime service charges whatsoever. The iPad units that are on-sale today work over WiFi only. 3G-equipped models will be on sale shortly and will command a $130 premium over their WiFi-only counterparts. 3G service on the iPad, in the U.S. from AT&T, will be fee-based, with a 250MB plan at $14.99 per month and an unlimited plan at $29.99. No contract is required for 3G service. All these tech specs aside, I think a more useful observation is that the iPad is a multi-purpose Internet-connected entertainment device, while the Kindle is a dedicated reading device. The question is whether those differences in design and intended use create a clear-cut winner for reading electronic publications. Let’s take a look at each device, in isolation, now. Kindle To me, what’s most innovative about the Kindle is its E Ink display. E Ink really looks like ink on a sheet of paper. It requires no backlight, it’s fully visible in direct sunlight and it causes almost none of the eyestrain that LCD-based computer display technology (like that used on the iPad) does. It’s really versatile in an all-around way. Forgive me if this sounds precious, but reading on it is really a joy. In fact, it’s a genuinely relaxing experience. Through the Kindle Store, Amazon allows users to download books (including audio books), magazines, newspapers and blog feeds. Books and magazines can be purchased either on a single-issue basis or as an annual subscription. Books, of course, are purchased singly. Oddly, blogs are not free, but instead carry a monthly subscription fee, typically $1.99. To me this is ludicrous, but I suppose the free 3G service is partially to blame. Books and magazine issues download quickly. Magazine and blog subscriptions cause new issues or posts to be pushed to your device on an automated basis. Available blogs include 9000-odd feeds that Amazon offers on the Kindle Store; unless I missed something, arbitrary RSS feeds are not supported (though there are third party workarounds to this limitation). The shopping experience is integrated well, has an huge selection, and offers certain graphical perks. For example, magazine and newspaper logos are displayed in menus, and book cover thumbnails appear as well. A simple search mechanism is provided and text entry through the physical keyboard is relatively painless. It’s very easy and straightforward to enter the store, find something you like and start reading it quickly. If you know what you’re looking for, it’s even faster. Given Kindle’s high portability, very reliable battery, instant-on capability and highly integrated content acquisition, it makes reading on whim, and in random spurts of downtime, very attractive. The Kindle’s home screen lists all of your publications, and easily lets you select one, then start reading it. Once opened, publications display in crisp, attractive text that is adjustable in size. “Turning” pages is achieved through buttons dedicated to the task. Notes can be recorded, bookmarks can be saved and pages can be saved as clippings. I am not an avid book reader, and yet I found the Kindle made it really fun, convenient and soothing to read. There’s something about the easy access to the material and the simplicity of the display that makes the Kindle seduce you into chilling out and reading page after page. On the other hand, the Kindle has an awkward navigation interface. While menus are displayed clearly on the screen, the method of selecting menu items is tricky: alongside the right-hand edge of the main display is a thin column that acts as a second display. It has a white background, and a scrollable silver cursor that is moved up or down through the use of the device’s scrollwheel. Picking a menu item on the main display involves scrolling the silver cursor to a position parallel to that menu item and pushing the scrollwheel in. This navigation technique creates a disconnect, literally. You don’t really click on a selection so much as you gesture toward it. I got used to this technique quickly, but I didn’t love it. It definitely created a kind of anxiety in me, making me feel the need to speed through menus and get to my destination document quickly. Once there, I could calm down and relax. Books are great on the Kindle. Magazines and newspapers much less so. I found the rendering of photographs, and even illustrations, to be unacceptably crude. For this reason, I expect that reading textbooks on the Kindle may leave students wanting. I found that the original flow and layout of any publication was sacrificed on the Kindle. In effect, browsing a magazine or newspaper was almost impossible. Reading the text of individual articles was enjoyable, but having to read this way made the whole experience much more “a la carte” than cohesive and thematic between articles. I imagine that for academic journals this is ideal, but for consumer publications it imposes a stripped-down, low-fidelity experience that evokes a sense of deprivation. In general, the Kindle is great for reading text. For just about anything else, especially activity that involves exploratory browsing, meandering and short-attention-span reading, it presents a real barrier to entry and adoption. Avid book readers will enjoy the Kindle (if they’re not already). It’s a great device for losing oneself in a book over long sittings. Multitaskers who are more interested in periodicals, be they online or off, will like it much less, as they will find compromise, and even sacrifice, to be palpable. iPad The iPad is a very different device from the Kindle. While the Kindle is oriented to pages of text, the iPad orbits around applications and their interfaces. Be it the pinch and zoom experience in the browser, the rich media features that augment content on news and weather sites, or the ability to interact with social networking services like Twitter, the iPad is versatile. While it shares a slate-like form factor with the Kindle, it’s effectively an elegant personal computer. One of its many features is the iBook application and integration of the iBookstore. But it’s a multi-purpose device. That turns out to be good and bad, depending on what you’re reading. The iBookstore is great for browsing. It’s color, rich animation-laden user interface make it possible to shop for books, rather than merely search and acquire them. Unfortunately, its selection is rather sparse at the moment. If you’re looking for a New York Times bestseller, or other popular titles, you should be OK. If you want to read something more specialized, it’s much harder. Unlike the awkward navigation interface of the Kindle, the iPad offers a nearly flawless touch-screen interface that seduces the user into tinkering and kibitzing every bit as much as the Kindle lulls you into a deep, concentrated read. It’s a dynamic and interactive device, whereas the Kindle is static and passive. The iBook reader is slick and fun. Use the iPad in landscape mode and you can read the book in 2-up (left/right 2-page) display; use it in portrait mode and you can read one page at a time. Rather than clicking a hardware button to turn pages, you simply drag and wipe from right-to-left to flip the single or right-hand page. The page actually travels through an animated path as it would in a physical book. The intuitiveness of the interface is uncanny. The reader also accommodates saving of bookmarks, searching of the text, and the ability to highlight a word and look it up in a dictionary. Pages display brightly and clearly. They’re easy to read. But the backlight and the glare made me less comfortable than I was with the Kindle. The knowledge that completely different applications (including the Web and email and Twitter) were just a few taps away made me antsy and very tempted to task-switch. The knowledge that battery life is an issue created subtle discomfort. If the Kindle makes you feel like you’re in a library reading room, then the iPad makes you feel, at best, like you’re under fluorescent lights at a Barnes and Noble or Borders store. If you’re lucky, you’d be on a couch or at a reading table in the store, but you might also be standing up, in the aisles. Clearly, I didn’t find this conducive to focused and sustained reading. But that may have more to do with my own tendency to read periodicals far more than books, and my neurotic . And, truth be known, the book reading experience, when not explicitly compared to Kindle’s, was still pleasant. It is also important to point out that Kindle Store-sourced books can be read on the iPad through a Kindle reader application, from Amazon, specific to the device. This offered a less rich experience than the iBooks reader, but it was completely adequate. Despite the Kindle brand of the reader, however, it offered little in terms of simulating the reading experience on its namesake device. When it comes to periodicals, the iPad wins hands down. Magazines, even if merely scanned images of their print editions, read on the iPad in a way that felt similar to reading hard copy. The full color display, touch navigation and even the ability to render advertisements in their full glory makes the iPad a great way to read through any piece of work that is measured in pages, rather than chapters. There are many ways to get magazines and newspapers onto the iPad, including the Zinio reader, and publication-specific applications like the Wall Street Journal’s and Popular Science’s. The New York Times’ free Editors’ Choice application offers a Times Reader-like interface to a subset of the Gray Lady’s daily content. The completely Web-based but iPad-optimized Times Skimmer site (at www.nytimes.com/timesskimmer) works well too. Even conventional Web sites themselves can be read much like magazines, given the iPad’s ability to zoom in on the text and crop out advertisements on the margins. While the Kindle does have an experimental Web browser, it reminded me a lot of early mobile phone browsers, only in a larger size. For text-heavy sites with simple layout, it works fine. For just about anything else, it becomes more trouble than it’s worth. And given the way magazine articles make me think of things I want to look up online, I think that’s a real liability for the Kindle. Summing Up What I came to realize is that the Kindle isn’t so much a computer or even an Internet device as it is a printer. While it doesn’t use physical paper, it still renders its content a page at a time, just like a laser printer does, and its output appears strikingly similar. You can read the rendered text, but you can’t interact with it in any way. That’s why the navigation requires a separate cursor display area. And because of the page-oriented rendering behavior, turning pages causes a flash on the display and requires a sometimes long pause before the next page is rendered. The good side of this is that once the page is generated, no battery power is required to display it. That makes for great battery life, optimal viewing under most lighting conditions (as long as there is some light) and low-eyestrain text-centric display of content. The Kindle is highly portable, has an excellent selection in its store and is refreshingly distraction-free. All of this is ideal for reading books. And iPad doesn’t offer any of it. What iPad does offer is versatility, variety, richness and luxury. It’s flush with accoutrements even if it’s low on focused, sustained text display. That makes it inferior to the Kindle for book reading. But that also makes it better than the Kindle for almost everything else. As such, and given that its book reading experience is still decent (even if not superior), I think the iPad will give Kindle a run for its money. True book lovers, and people on a budget, will want the Kindle. People with a robust amount of discretionary income may want both devices. Everyone else who is interested in a slate form factor e-reading device, especially if they also wish to have leisure-friendly Internet access, will likely choose the iPad exclusively. One thing is for sure: iPad has reduced Kindle’s market, and may have shifted its mass market potential to a mere niche play. If Amazon is smart, it will improve its iPad-based Kindle reader app significantly. It can then leverage the iPad channel as a significant market for the Kindle Store. After all, selling the eBooks themselves is what Amazon should care most about.

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

Dynamic XAP loading in Task-It - Part 1

Download Source Code NOTE 1: The source code provided is running against the RC versions of Silverlight 4 and VisualStudio 2010, so you will need to update to those bits to run it. NOTE 2: After downloading the source, be sure to set the .Web project as the StartUp Project, and Default.aspx as the Start Page In my MEF into post, MEF to the rescue in Task-It, I outlined a couple of issues I was facing and explained why I chose MEF (the Managed Extensibility Framework) to solve these issues. Other posts to check out There are a few other resources out there around dynamic XAP loading that you may want to review (by the way, Glenn Block is the main dude when it comes to MEF): Glenn Blocks 3-part series on a dynamically loaded dashboard Glenn and John Papas Silverlight TV video on dynamic xap loading These provide some great info, but didnt exactly cover the scenario I wanted to achieve in Task-Itand that is dynamically loading each of the apps pages the first time the user enters a page. The code In the code I provided for download above, I created a simple solution that shows the technique I used for dynamic XAP loading in Task-It, but without all of the other code that surrounds it. Taking all that other stuff away should make it easier to grasp. Having said that, there is still a fair amount of code involved. I am always looking for ways to make things simpler, and to achieve the desired result with as little code as possible, so if I find a better/simpler way I will blog about it, but for now this technique works for me. When I created this solution I started by creating a new Silverlight Navigation Application called DynamicXAP Loading. I then added the following line to my UriMappings in MainPage.xaml: <uriMapper:UriMapping Uri="/{assemblyName};component/{path}" MappedUri="/{assemblyName};component/{path}"/> In the section of MainPage.xaml that produces the page links in the upper right, I kept the Home link, but added a couple of new ones (page1 and page 2). These are the pages that will be dynamically (lazy) loaded: <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}"> <HyperlinkButton Style="{StaticResource LinkStyle}" NavigateUri="/Home" TargetName="ContentFrame" Content="home"/> <Rectangle Style="{StaticResource DividerStyle}"/> <HyperlinkButton Style="{StaticResource LinkStyle}" Content="page 1" Command="{Binding NavigateCommand}" CommandParameter="{Binding ModulePage1}"/> <Rectangle Style="{StaticResource DividerStyle}"/> <HyperlinkButton Style="{StaticResource LinkStyle}" Content="page 2" Command="{Binding NavigateCommand}" CommandParameter="{Binding ModulePage2}"/> </StackPanel> In App.xaml.cs I added a bit of MEF code. In Application_Startup I call a method called InitializeContainer, which creates a PackageCatalog (a MEF thing), then I create a CompositionContainer and pass it to the CompositionHost.Initialize method. This is boiler-plate MEF stuff that allows you to do 'composition' and import 'packages'. You're welcome to do a bit more MEF research on what is happening here if you'd like, but for the purpose of this example you can just trust that it works. :-) private void Application_Startup(object sender, StartupEventArgs e) { InitializeContainer(); this.RootVisual = new MainPage(); } private static void InitializeContainer() { var catalog = new PackageCatalog(); catalog.AddPackage(Package.Current); var container = new CompositionContainer(catalog); container.ComposeExportedValue(catalog); CompositionHost.Initialize(container); } Infrastructure In the sample code you'll notice that there is a project in the solution called DynamicXAPLoading.Infrastructure. This is simply a Silverlight Class Library project that I created just to move stuff I considered application 'infrastructure' code into a separate place, rather than cluttering the main Silverlight project (DynamicXapLoading). I did this same thing in Task-It, as the amount of this type of code was starting to clutter up the Silverlight project, and it just seemed to make sense to move things like Enums, Constants and the like off to a separate place. In the DynamicXapLoading.Infrastructure project you'll see 3 classes: Enums - There is only one enum in here called ModuleEnum. We'll use these later. PageMetadata - We will use this class later to add metadata to a new dynamically loaded project. ViewModelBase - This is simply a base class for view models that we will use in this, as well as future samples. As mentioned in my MVVM post, I will be using the MVVM pattern throughout my code for reasons detailed in the post. By the way, the ViewModelExtension class in there allows me to do strongly-typed property changed notification, so rather than OnPropertyChanged("MyProperty"), I can do this.OnPropertyChanged(p => p.MyProperty). It's just a less error-prown approach, because if you don't spell "MyProperty" correctly using the first method, nothing will break, it just won't work. Adding a new page We currently have a couple of pages that are being dynamically (lazy) loaded, but now let's add a third page. 1. First, create a new Silverlight Application project: In this example I call it Page3. In the future you may prefer to use a different name, like DynamicXAPLoading.Page3, or even DynamicXAPLoading.Modules.Page3. It can be whatever you want. In my Task-It application I used the latter approach (with 'Modules' in the name). I do think of these application as 'modules', but Prism uses the same term, so some folks may not like that. Use whichever naming convention you feel is appropriate, but for now Page3 will do. When you change the name to Page3 and click OK, you will be presented with the Add New Project dialog: It is important that you leave the 'Host the Silverlight application in a new or existing Web site in the solution' checked, and the .Web project will be selected in the dropdown below. This will create the .xap file for this project under ClientBin in the .Web project, which is where we want it. 2. Uncheck the 'Add a test page that references the application' checkbox, and leave everything else as is. 3. Once the project is created, you can delete App.xaml and MainPage.xaml. 4. You will need to add references your new project to the following: DynamicXAPLoading.Infrastructure.dll (this is a Project reference) DynamicNavigation.dll (this is in the Libs directory under the DynamicXAPLoading project) System.ComponentModel.Composition.dll System.ComponentModel.Composition.Initialization.dll System.Windows.Controls.Navigation.dll If you have installed the latest RC bits you will find the last 3 dll's under the .NET tab in the Add Referenced dialog. They live in the following location, or if you are on a 64-bit machine like me, it will be Program Files (x86). C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client Now let's create some UI for our new project. 5. First, create a new Silverlight User Control called Page3.dyn.xaml 6. Paste the following code into the xaml: <dyn:DynamicPageShim xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:dyn="clr-namespace:DynamicNavigation;assembly=DynamicNavigation" xmlns:my="clr-namespace:Page3;assembly=Page3"> <my:Page3Host /> </dyn:DynamicPageShim> This is just a 'shim', part of David Poll's technique for dynamic loading. 7. Expand the icon next to Page3.dyn.xaml and delete the code-behind file (Page3.dyn.xaml.cs). 8. Next we will create a control that will 'host' our page. Create another Silverlight User Control called Page3Host.xaml and paste in the following XAML: <dyn:DynamicPage x:Class="Page3.Page3Host" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:dyn="clr-namespace:DynamicNavigation;assembly=DynamicNavigation" xmlns:Views="clr-namespace:Page3.Views" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" Title="Page 3"> <Views:Page3/> </dyn:DynamicPage> 9. Now paste the following code into the code-behind for this control: using DynamicXAPLoading.Infrastructure; namespace Page3 { [PageMetadata(NavigateUri = "/Page3;component/Page3.dyn.xaml", Module = Enums.Page3)] public partial class Page3Host { public Page3Host() { InitializeComponent(); } } } Notice that we are now using that PageMetadata custom attribute class that we created in the Infrastructure project, and setting its two properties. NavigateUri - This tells it that the assembly is called Page3 (with a slash beforehand), and the page we want to load is Page3.dyn.xaml...our 'shim'. That line we added to the UriMapper in MainPage.xaml will use this information to load the page. Module - This goes back to that ModuleEnum class in our Infrastructure project. However, setting the Module to ModuleEnum.Page3 will cause a compilation error, so... 10. Go back to that Enums.cs under the Infrastructure project and add a 3rd entry for Page3: public enum ModuleEnum { Page1, Page2, Page3 } 11. Now right-click on the Page3 project and add a folder called Views. 12. Right-click on the Views folder and create a new Silverlight User Control called Page3.xaml. We won't bother creating a view model for this User Control as I did in the Page 1 and Page 2 projects, just for the sake of simplicity. Feel free to add one if you'd like though, and copy the code from one of those other projects. Right now those view models aren't really doing anything anyway...though they will in my next post. :-) 13. Now let's replace the xaml for Page3.xaml with the following: <dyn:DynamicPage x:Class="Page3.Views.Page3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:dyn="clr-namespace:DynamicNavigation;assembly=DynamicNavigation" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" Style="{StaticResource PageStyle}"> <Grid x:Name="LayoutRoot"> <ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}"> <StackPanel x:Name="ContentStackPanel"> <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}" Text="Page 3"/> <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}" Text="Page 3 content"/> </StackPanel> </ScrollViewer> </Grid> </dyn:DynamicPage> 14. And in the code-behind remove the inheritance from UserControl, so it should look like this: namespace Page3.Views { public partial class Page3 { public Page3() { InitializeComponent(); } } } One thing you may have noticed is that the base class for the last two User Controls we created is DynamicPage. Once again, we are using the infrastructure that David Poll created. 15. OK, a few last things. We need a link on our main page so that we can access our new page. In MainPage.xaml let's update our links to look like this: <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}"> <HyperlinkButton Style="{StaticResource LinkStyle}" NavigateUri="/Home" TargetName="ContentFrame" Content="home"/> <Rectangle Style="{StaticResource DividerStyle}"/> <HyperlinkButton Style="{StaticResource LinkStyle}" Content="page 1" Command="{Binding NavigateCommand}" CommandParameter="{Binding ModulePage1}"/> <Rectangle Style="{StaticResource DividerStyle}"/> <HyperlinkButton Style="{StaticResource LinkStyle}" Content="page 2" Command="{Binding NavigateCommand}" CommandParameter="{Binding ModulePage2}"/> <Rectangle Style="{StaticResource DividerStyle}"/> <HyperlinkButton Style="{StaticResource LinkStyle}" Content="page 3" Command="{Binding NavigateCommand}" CommandParameter="{Binding ModulePage3}"/> </StackPanel> 16. Next, we need to add the following at the bottom of MainPageViewModel in the ViewModels directory of our DynamicXAPLoading project: public ModuleEnum ModulePage3 { get { return ModuleEnum.Page3; } } 17. And at last, we need to add a case for our new page to the switch statement in MainPageViewModel: switch (module) { case ModuleEnum.Page1: DownloadPackage("Page1.xap"); break; case ModuleEnum.Page2: DownloadPackage("Page2.xap"); break; case ModuleEnum.Page3: DownloadPackage("Page3.xap"); break; default: break; } Now fire up the application and click the page 1, page 2 and page 3 links. What you'll notice is that there is a 2-second delay the first time you hit each page. That is because I added the following line to the Navigate method in MainPageViewModel: Thread.Sleep(2000); // Simulate a 2 second initial loading delay The reason I put this in there is that I wanted to simulate a delay the first time the page loads (as the .xap is being downloaded from the server). You'll notice that after the first hit to the page though that there is no delay...that's because the .xap has already been downloaded. Feel free to comment out this 2-second delay, or remove it if you'd like. I just wanted to show how subsequent hits to the page would be quicker than the initial one. By the way, you may want to display some sort of BusyIndicator while the .xap is loading. I have that in my Task-It appplication, but for the sake of simplicity I did not include it here. In the future I'll blog about how I show and hide the BusyIndicator using events (I'm currently using the eventing framework in Prism for that, but may move to the one in the MVVM Light Toolkit some time soon). Whew, that felt like a lot of steps, but it does work quite nicely. As I mentioned earlier, I'll try to find ways to simplify the code (I'd like to get away from having things like hard-coded .xap file names) and will blog about it in the future if I find a better way. In my next post, I'll talk more about what is actually happening with the code that makes this all work.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.

Search Results

Search found 51390 results on 2056 pages for 'right mouse button'.

Page 553/2056 | < Previous Page | 549 550 551 552 553 554 555 556 557 558 559 560 | Next Page >

- by ClarkSKent

- by tmedge

- by Goxel Arp

- by Mj1992

- by ShadowCrowe

- by Pavitar

- by Suja

- by user1593175

- by TimMac

- by Johhny Thero

- by Raghavan'G'

- by user792271

- by fusion

- by fusion

- by joe

- by Quentin Swain

- by Ryan

- by Margus

- by Mark Virtue

- by ScottGu

- by Rick Strahl

- by andrewbrust

< Previous Page | 549 550 551 552 553 554 555 556 557 558 559 560 | Next Page >