Stay Updated !
OK, just discovered an interesting implementation detail of JQuery Validator (one that I should have known about already as well).
OK, if you have a form where the inputs of the for have both id and name attributes, the name attributes trump id.
So if you have this:
1: <input type='type' id='RegisterUserName' name='userName' />
Then you write the validation against ‘user’Name’, not ‘RegisterUserName’.
1: $("RegisterForm").validate({
2: rules: { userName: {required: true} }
3: });
If you do not you will get all sorts of strange null exception errors (which in JavaScript means something returned as ‘undefined’.
People have been talking about the great flexibility of Asp.Net MVC for a while now, but there are a few things to be aware of. One of them is multiple forms.
Say you have a web page that has two forms on it, one to register users, the other to log users in. Both forms have ‘username’ and ‘password’ fields. Asp.Net MVC still cannot get you around the need to keep ids unique – but names can be reused. These names are also read by Asp.Net Action Controllers. So if you have multiple forms all submitting to the same Controller Action, as long as the name attributes are set it will hook up.
Anyway, this is a short post, mostly for myself, so I don’t spend two hours figuring this out again.
Silverlight 4 beta just came out and is better than I expected. This is the first post of many about my experience with this beta and the road blocks I’ll find during my expedition. This version of Silverlight is without any doubt brilliant as well as all the features that are coming out in the release are beyond my expectations.
After installing Visual Studio 2010 I received this “successful” error message.
I installed Silverlight 4 beta without any issue, fast and straight forward.
After installation you can see the projects you can build, .NET RIA Services WCF RIA Services are out of the box.
When creating a new project now you have the choice to target different Silverlight versions.
Error 1 One or more types required to compile a dynamic expression cannot be found. Are you missing references to Microsoft.CSharp.dll and System.Core.dll?
When adding a reference to the project I get an empty box.
If I look at the directory where the dlls are installed
“C:\Program Files\Reference Assemblies\Microsoft\Framework\Silverlight\v4.0”
I cannot find the Microsoft.CSharp.dll I can only find Microsoft.VisualBasic.dll to use. Where is the C# dll located for Silverlight 4? I wasn’t able to find it on my computer.
When using the printing api, I don’t get access to the raw image that is going to send to the printer, you can pass the objects to print and the API will take care of sending it to the printer, I was expecting to get access to the preview to be able to modify the output if need it.
I can only host HTML using the WebBrowser tag when running the Silverlight app in fully trusted mode. Otherwise if not I get a HTML disabled control.
<WebBrowser x:Name="MyBrowserControl" Visibility="Collapsed" Width="700" Height="500" />
Hope this helps to other people “playing” with Silverlight 4.
Cheers
Al
Follow me in twitter | bookmark me | Subscribe to my feed | Add stats to your blog
Have you ever wanted to give the user the ability to drag a file from you desktop or file explorer onto your Silverlight application? Well, up until now you couldn’t. What’s that sound? It’s a bird… it’s a plane… no, it’s Silverlight 4 Beta. Yes, Silverlight 4 Beta is coming to the rescue and giving you the ability to have your Silverlight application act as a drop target. And it is so easy to do. Observe.
First just identify the UI element you want to use as the drop target, then set the AllowDrop property to true. Then just handle the Drop events.
Here is a quick example. This examples allows a user to drag a bitmap from their file system into my application and displays the images in a ScrollViewer. Here is the XAML
<StackPanel x:Name="LayoutRoot" Background="White">
<TextBlock Text="Drop image below." FontSize="16" FontWeight="BOld" HorizontalAlignment="Center" />
<ScrollViewer x:Name="ImagesTarget" Background="White" Width="800" MinHeight="300"
VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto" AllowDrop="True">
<ItemsControl x:Name="ImageList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" Margin="5" Stretch="UniformToFill" Height="240" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</StackPanel>
I create a ObservableCollection of bitmap images and use this as the ItemsSource for the ScrollViewer.
ObservableCollection<BitmapImage> _images = new ObservableCollection<BitmapImage>();
I hook into the Drop event in the load event of the form.
ImagesTarget.Drop += new DragEventHandler(ImagesTarget_Drop);
Now lets implement the Drop event to loop through all the files and add them to the list.
void ImagesTarget_Drop(object sender, DragEventArgs e)
{
if (e.Data == null)
return;
IDataObject dataObject = e.Data as IDataObject;
FileInfo[] files =
dataObject.GetData(DataFormats.FileDrop) as FileInfo[];
foreach (FileInfo file in files)
{
try
{
using (var stream = file.OpenRead())
{
var imageSource = new BitmapImage();
imageSource.SetSource(stream);
_images.Add(imageSource);
}
}
catch (Exception)
{
MessageBox.Show("Not a suppoted image.");
}
}
}
Bingo… Bango… Boom, that is all there is to it. And of course, you can handle the other drag events to have more control over what is being dropped and where.
Specifically IronPython and IronRuby.
Consider this …
A first class language is deployed when the full .NET framework is installed. It’s as easy to find as csc.exe. It’s not a language you have to ask the IT department to install separately. It’s not a language that requires you to jump out of Visual Studio to edit or run.
Most of all, a first class language doesn’t require justification to higher powers. A first class language is pre-certified and stamped with a seal of approval. It’s as easy to use in the locked-down big corporate setting as the company paper shredder.
I was depressed when I read the session list from Microsoft’s recent Professional Developers Conference. If you browse the session list you’ll find hundreds of sessions covering cloud computing, Sharepoint, Silverlight, SQL Server, and modeling. There are a handful of sessions covering concurrency, and a few dedicated to C++.
There is exactly one session featuring the Dynamic Language Runtime in a significant fashion. The title is Using Dynamic Languages to Build Scriptable Applications. You can learn how to augment an existing application after you’ve done all the real work in a first class language.
Perhaps Microsoft is just hedging their bets, but it’s clear that that dynamic languages aren’t high on the priority list. Maybe they’ll be first class citizens one day, but many developers are tired of waiting.
P.S. Is Managed JScript dead?
Before Silverlight 4 if you wanted to dynamically add ellipses (the commonly used … to show that the sentence continues), you have to invent your own implementation which usually involves creating your own control that wraps a text based control and then manipulate the text inside based on the size. Similar to what Robby Ingebretsen had to do here.
Well, that is no longer the case. Introducing Text Trimming.
<TextBlock FontSize="16"
TextTrimming="WordEllipsis"
Text="A man is known by the company he keeps."
Width="120"/>
Displays as: “A man is…”
This is a nice addition to the Silverlight framework.
Our second Silverlight podcast features an interview with James Clarke of the Expression Encoder team. Learn about how Encoder works, screen capture and its object model.
By Callum Chapman
Everybody loves a nice bit of typography. This year we have seen some absolutely stunning typographic layouts used in print, web and game design. Using typography in web design can really help to spice things up, so take a look through these beautiful examples of typography used in modern web design to help inspire you when it comes to producing your own typography based designs for the web.
There are many different styles that are used nowadays when it comes to typography in web design – a lot of them are put into place in minimalistic and simple designs such as ALGA New Yorks, Buddy Carrs Skateboards and Corking Designs website, all of which use large, bold lettering on a simplistic design which typically uses no more than 3 or 4 colors.
Huge lettering doesn’t stop there though: Gummisig’s portfolio uses a great combination of large type and highlighted links with colorful textured backgrounds, and Hull Digital use a large sketched effect heading which goes great with the other hand-drawn elements of the website and its overall ‘noisy’ background image. The effect now referred to as ‘the letterpress effect’ can also be seen in several designs, such as Alonso Creative Blog and Epic Event. Chris Spooner has a great showcase of the letterpress text effect used in web design, followed by a short tutorial on how to create this trendy effect yourself.
Jam Hot is just one of the many in this showcase that uses incredible Flash effects to produce awesome animated typography combined with great illustration – a real eye opener! Another great Flash-enabled website is JLern, who use beautiful effects that cause the entire page to rotate depending on where your mouse cursor is located.
So, by now you should have heard that Silverlight 4 Beta was released at PDC 2009. One of the most interesting and fun features included in the release is the ability for you to access a users webcam and microphone. So I am going to show you have to access a list of webcams and microphones, capture video, and then take pictures and show them to the user. But, before I can show you how to use them, you have to have the Silverlight 4 Beta framework installed.
Start here:
You can either download the source and start playing around immediately, or you can read through the post and then download the source.
First off lets start out with our view box (this spot is where our video will be shown). First create a rectangle and give it a meaningful name. I called mine ViewBox. Make it the size of the video you want to show, as you can see mine is 640×480.
<Rectangle x:Name="ViewBox" Width="640" Height="480" Fill="White"/>
Now lets create some combo boxes to show the available webcams and microphones on the users machine. I created a item template and used the FriendlyName as the binding text. The FriendlyName is the name/description of the device.
<TextBlock Margin="5" HorizontalAlignment="Center" Text="WebCam" Grid.Column="0" Grid.Row="0" />
<ComboBox x:Name="WebCamList" Grid.Row="1" Grid.Column="0">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding FriendlyName}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<TextBlock Margin="5" HorizontalAlignment="Center" Text="Microphone" Grid.Column="1" Grid.Row="0" />
<ComboBox x:Name="MicrophoneList" Grid.Row="1" Grid.Column="1">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding FriendlyName}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Now lets create some buttons to start capturing our video, stop capturing the video, and one to take some pictures.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Margin="5" x:Name="btnStartCapture" Content="Start Capture" Click="btnStartCapture_Click" />
<Button Margin="5" x:Name="btnStopCapture" Content="Stop Capture" Click="btnStopCapture_Click" />
<Button Margin="5" x:Name="btnTakePicture" Content="Take Picture" Click="btnTakePicture_Click" />
</StackPanel>
Next, lets create a scroll viewer to hold a collection of pictures we take.
<ScrollViewer Width="800" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
<ItemsControl x:Name="Pictures">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" Margin="5" Stretch="UniformToFill" Height="240" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
Now that we have our UI finished up we need to start adding some code. The first thing we need to do is create some private members. Once will be our capture source and the other will be a collection to hold our pictures. I am using an ObservableCollection so I don’t have to worry about manually update the UI when items are added to it.
CaptureSource _captureSource;
ObservableCollection<WriteableBitmap> _pictures = new ObservableCollection<WriteableBitmap>();
Now that we have our private members, lets hook into the form’s loaded event and add some code. The first thing we need to do is create a new instance of our capture source. Next, we get a list of all our available webcams and microphones and add them to our combo boxes accordingly. Last we set the Pictures ScrollViewer items source to our private member _pictures. You should have something like the following.
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
// creating a new capture source
_captureSource = new CaptureSource();
// get list of the web cams
WebCamList.ItemsSource = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();
WebCamList.SelectedIndex = 0;
// get list of microphones
MicrophoneList.ItemsSource = CaptureDeviceConfiguration.GetAvailableAudioCaptureDevices();
MicrophoneList.SelectedIndex = 0;
Pictures.ItemsSource = _pictures;
}
Now, lets handle the click event for our start capturing button. First thing we hav to do is stop and device that may be capturing. Now, we need to set our capture source’s video and audio capture instances from the available options in our combo boxes. We need to create a VisualBrush, this is what will be the video. We create a new instance of the VisualBrush and set the source to our captureSource. Next, we set the Fill of our rectangle to the VisualBrush. now, the magic does happen until the next part. You need to request permission from the user to use their webcam. Once you have it you just start capturing.
private void btnStartCapture_Click(object sender, RoutedEventArgs e)
{
if (_captureSource != null)
{
// stop whatever device may be capturing
_captureSource.Stop();
_captureSource.VideoCaptureDevice = (VideoCaptureDevice)WebCamList.SelectedItem;
_captureSource.AudioCaptureDevice = (AudioCaptureDevice)MicrophoneList.SelectedItem;
VideoBrush vidBrush = new VideoBrush();
vidBrush.SetSource(_captureSource);
ViewBox.Fill = vidBrush;
// request access to webcam and audio devices
if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
{
_captureSource.Start();
}
}
}
Now, lets handle the stop capture buttons click event. This basically halts all video capturing and is very easy to implement.
private void btnStopCapture_Click(object sender, RoutedEventArgs e)
{
if (_captureSource != null)
{
_captureSource.Stop();
}
}
The last thing we need to do is enable taking pictures. So, handle the click event for the take picture button. Luckily for us, the capture source has built in support for capturing images asynchronously.
private void btnTakePicture_Click(object sender, RoutedEventArgs e)
{
if (_captureSource != null)
{
_captureSource.AsyncCaptureImage((image) =>
{
_pictures.Add(image);
});
}
}
That’s it. You have now created your first Silverlight application that can communicate with a users webcam and microphone. Think of all the possibilities. Download the code, play with it and have fun.
Copyright © 2010 Answer My Query All rights reserved. Maintained by Orange Brains .