This is the 2nd blog post in our series on AngularJS. The first part entitled Get Started with AngularJS shows you how to add AngularJS to a project. You should read that blog first if you are not familiar with adding AngularJS to a project, don't know what a module or a controller is, or want to understand basic data binding. In this blog post you will build a couple of different types of lists of data using the ng-repeat directive. Building unordered lists and HTML tables is very straight-forward in AngularJS. As with anything in AngularJS, you need to have a variable defined on the $scope variable that contains the data you wish to display. Use the ng-repeat directive and data binding to iterate over the data and create bulleted list items or
and elements.
#angularjs #html #pauldsheriff #development #programming
Sometimes the best way to learn a new technology is to start using it -- a little at a time. In this series of articles, I will show you how to use AngularJS in a step-by-step manner. You start with a simple example of adding AngularJS to a project and creating an AngularJS module and controller. Once you have the controller, you will see how to expose data so it can be bound to UI elements on your HTML page.
#angularjs #html #pauldsheriff #development #programming
The Bootstrap panel classes allow you to create a bordered area on your web page. The panel classes give you a title area, a body area and a footer area. Most designers add buttons within the footer area to perform different actions on the information within the panel. Sometimes they add additional drop-downs or buttons within the body of the panel to reload the data or take action. While these work, sometimes you don't want to take up that real estate with those actions. Instead you can use the title area of the panel for these additions. This blog post will show you how to accomplish this.
#bootstrap #bootstrappanel #pauldsheriff #development #programming
When a user clicks on a button on a web page, there can be a delay between posting back to the server and the next action that happens on the screen. The problem with this delay is the user may not know they actually clicked on the button and tries to hit the button again. It is important to give immediate feedback to the user so they know that the application is doing something. This post will show you how to disable the button, display a pop-up message and gray out the background before the post back happens thereby providing feedback to our user.
#mvc #progressmessage #pauldsheriff #development #programming
In a previous post I talked about creating a push-button style of radio button for MVC. This blog post will show how to create the same push-button radio button using Web Forms. There are only a few minor differences in the CSS and, of course, in the use of a Web Forms server control.
#webforms #bootstrap #radiobutton #pauldsheriff #development #programming
In a previous blog post I talked about a simple push button style of radio buttons. This sample push button style can be applied to radio buttons too. This style of button is very easy to do with just some built-in Bootstrap styles and a little extra CSS.
#mvc #bootstrap #radiobutton #pauldsheriff #development #programming
In a previous post I talked about creating a push-button style of check box for MVC. This blog post will show how to create the same push-button check box using Web Forms. There are only a few minor differences in the CSS and, of course, in the use of a Web Forms server control.
#webforms #bootstrap #checkbox #pauldsheriff #development #programming
I really enjoy working with Bootstrap and extending the styles to match what my customers want. Recently my customer wanted a simple push button style of check box and radio buttons. This turned out to be very easy to accomplish using the built-in Bootstrap styles and just a little extra CSS.
#mvc #bootstrap #checkbox #pauldsheriff #development #programming
In the last blog post I showed you how to bind radio buttons to a boolean value. In this blog post we will look at how to bind to integer values. In certain business applications you might have the user select a single value from a list of items coming from a database. You want to display these options as radio buttons and then retrieve the value the user selects.
#mvc #mvcbinding #bootstrap #css #html #radiobutton #pauldsheriff #development #programming
In the last blog post I showed you how to create a different look and feel for radio buttons. We used the button groups and glyph icons from bootstrap to build this different look. Now let's bind these radio buttons to a single boolean property in a class. Let's say you have a Product class that has an IsDiscontinued property that you would like a user to select between an 'Active' and a 'Discontinued' product.
#mvc #mvcbinding #bootstrap #css #html #radiobutton #pauldsheriff #development #programming
As I previously published, the normal HTML check boxes and radio buttons just do not look good in bootstrap. Yes, bootstrap has a CSS class that will attempt to at least let render a radio button consistently across browsers, but it still is just the default HTML look. In addition, trying to hit a radio button on a mobile phone can sometimes be a little challenging. In an MVC project we are doing for a client, they wanted the radio buttons to look more like buttons. Since we were already using bootstrap for this project we were able to create our own radio buttons using the 'btn-group' class from bootstrap. Let's walk through how we created these.
#mvc #bootstrap #css #html #radiobutton #pauldsheriff #development #programming
In my last two blog posts I showed you how to use the bootstrap 'btn-group' class to create check boxes that are a little nicer looking and easier to use on a mobile device. In addition I showed you how to bind check boxes to individual properties on an entity class. In this blog post you will learn how to create a set of check boxes from a collection of entity classes. You will also learn how to retrieve which check boxes were checked by the user and update the appropriate entity class in the collection with these values.
#bootstrap #mvc #mvcbinding #checkbox #pauldsheriff #development #programming
After the last post on how to create check boxes that use the bootstrap 'btn-group' to modify the look and feel of check boxes, I thought it would be good to show how to bind these check boxes using MVC. After all, you will most likely need to display check boxes based on data from a table.
#bootstrap #mvc #mvcbinding #checkbox #pauldsheriff #development #programming
The normal HTML check box just does not look good. Yes, bootstrap has a CSS class that will attempt to at least let it render consistently across browsers, but it still is just the default HTML look. In addition, trying to hit a check box on a mobile phone can sometimes be a little challenging. In an MVC project we are doing for a client, they wanted the check boxes to look more like buttons. Since we were already using bootstrap for this project we were able to create our own check boxes using the 'btn-group' class from bootstrap. Let's walk through how we created these.
#bootstrap #css #html #checkbox #pauldsheriff #development #programming
Friendly URls help you eliminate query string parameters and file extensions from the URL line. Friendly URLs are available in Web Forms and MVC. I see a lot of examples of using friendly URLs using MVC, but very few using Web Forms. So, I thought I would discuss how to use them in Web Forms. Actually, the process is almost identical.
#mvc #webforms #friendlyurls #pauldsheriff #development #programming
One of my most widely-read blog posts had to do with creating a Login Windows in WPF that I wrote several years ago. I thought I would revisit this login screen with an updated version in Visual Studio 2012 and with an updated look and feel.
#wpf #login #xaml #pauldsheriff #development #programming
In my last blog posts I have been showing you how to create collection of entity objects using code that is custom for each table and object you create. Well, if you use a little reflection code you can shrink this code quite a bit. Yes, we all know that reflection is slow and probably should be avoided in most cases. What I have found out is that loading over 6200 product records into an entity collection still takes less than a second when using Reflection.
#entitycollections #linq #reflection #pauldsheriff #development #programming
Let's now look at another advantage of using a DataTable. A lot of developers today are used to using LINQ. After loading data into a DataTable you can iterate using a foreach statement, or you can use LINQ to create a collection of entity objects. The DataRow class has an extension method called Field that allows you to check the data and return either a null or the real data value. Of course this means you have to use Nullable types for your properties in your class.
#entitycollections #linq #pauldsheriff #development #programming
As discussed in my last two blog posts you have a variety of ways to create collections of Entity classes. Using a DataSet or DataTable is a little slower than using a DataReader, but in most cases the difference is in milliseconds so in a real world app this difference would not be a killer. For instance, in my sample data I was loading 6,261 records from the Product table discussed in the last blog post and it took 45 milliseconds on average to load those records into an entity collection using a DataTable. It took only 30 milliseconds on average to load the same entity collection using a DataReader. The rendering of that data would probably take longer than that, so you can choose which one you wish to use. Let's now look at one advantage of using a DataTable. A lot of developers today are used to using LINQ. After loading data into a DataTable you can iterate using a foreach statement, or you can use LINQ to create a collection of entity objects.
#entitycollections #linq #pauldsheriff #development #programming
As discussed in the last blog post, it is a best practice to build entity classes. In the last post we filled a DataTable with Category data and then iterated over that DataTable to create a collection of Entity classes. In this blog post we will use a SqlDataReader to fill the Entity classes.
#entitycollections #datareader #pauldsheriff #development #programming
An Entity class has properties and typically no methods. An entity class is generally used to hold a single row of data from a table. So, if you have a Category table with the fields CategoryId, CategoryName and Description, you will create a Category class with properties of the same name.
#entitycollections #dataset #pauldsheriff #development #programming
One of the navigation mechanisms used in Windows 8 and Windows Phone is a Tile. A tile is a large rectangle that can have words and pictures that a user can click on. You can build your own version of a Tile in your WPF or Silverlight applications using a User Control. With just a little bit of XAML and a little bit of code-behind you can create a navigation system.
#xaml #usercontrol #ui #pauldsheriff #development #programming
Some of our customers are asking us to give them a Windows 8 look and feel for their applications. This includes things like buttons, tiles, application bars, and other features. In this blog post I will describe how to create a button that looks similar to those you will find in a Windows 8 application bar.
#wpf #button #image #ui #pauldsheriff #development #programming
Instead of a normal button with words, sometimes you want a button that is just graphical. Yes, you can put an Image control in the Content of a normal Button control, but you still have the button outline, and trying to change the style can be rather difficult. Instead I like creating a user control that simulates a button, but just accepts an image. Figure 1 shows an example of three of these custom user controls to represent minimize, maximize and close buttons for a borderless window. Notice the highlighted image button has a gray rectangle around it. You will learn how to highlight using the VisualStateManager in this blog post.
#wpf #button #image #ui #pauldsheriff #development #programming
In any application, you want to keep the coupling between any two or more objects as loose as possible. Coupling happens when one class contains a property that is used in another class, or uses another class in one of its methods. If you have this situation, then this is called strong or tight coupling. One popular design pattern to help with keeping objects loosely coupled is called the Mediator design pattern. The basics of this pattern are very simple; avoid one object directly talking to another object, and instead use another class to mediate between the two. As with most of my blog posts, the purpose is to introduce you to a simple approach to using a message broker, not all of the fine details.
#xaml #messagebroker #pauldsheriff #development #programming
You go to great pains to add styles, colors, gradients, and a really cool look and feel to your WPF application only to have that ruined by the standard Windows message box as shown in Figure 1. What would be nice is if Microsoft offered a styled message box. But, they don't. So it is up to us to create a window that we can style and do whatever we want with it.
#wpf #styles #messagebox #ui #pauldsheriff #development #programming
In Figure 1 you can see examples of the standard WPF Button controls. You can add a drop shadow and you can change the color, but you can't change much else without creating a whole new control template. For example, you are unable to modify the BorderBrush or the BorderThickness properties of the Button control. Additionally you might want to use some other animation than the default, which again requires you to change the control template. Sometimes all you want to do is to just have some simple buttons where you can modify the border brush and the thickness and have different color options via styles. I have found that instead of working with the whole control template thing, just creating a User Control is sometimes much easier.
#wpf #usercontrol #button #ui #pauldsheriff #development #programming
All too often I see people using switch/Select Case statements when using a Factory pattern. The problem with this is if you wish to add the ability to instantiate a new class in your Factory, you need to add a new 'case' statement, re-compile the code and redeploy that DLL back out to your client machines, or your server(s). Another way to implement a Factory pattern is to use Reflection and Interfaces to dynamically create an instance of a class. This blog post will show you how to use an XML file, an Interface and the Assembly class to dynamically load a list of assemblies and classes to load into an application at runtime.
#xml #reflection #pauldsheriff #development #programming
Earlier this year I blogged on how to use the WPF Tree View to view multiple levels. Since then I have had many requests to do the same in WPF. Luckily, the code is almost identical. Here is a blog post on using the WPF Tree View that has multiple levels.
#wpf #treeview #pauldsheriff #development #programming
In previous blog posts I have discussed how to use XML files to store data in your applications. I showed you how to read those XML files from your project and get XML from a WCF service. One of the problems with reading XML files is when elements or attributes are missing. If you try to read that missing data, then a null value is returned. This can cause a problem if you are trying to load that data into an object and a null is read. This blog post will show you how to create extension methods to detect null values and return valid values to load into your object.
#xml #linq #pauldsheriff #development #programming
Many of us have implemented logging in our ASP.NET, Windows Forms and WPF applications, so why shouldn't you do the same in your Silverlight applications? Well, you should. In this blog post I will show you one approach on how you might perform this logging. The class I will use is called PDSALoggingManager. This class has a method named Log() you use to publish data into a log file in your Silverlight application. A method named LogException() is also available for logging information about any exceptions that happen on the client-side of your Silverlight application. Let's take a look at the usage of the PDSALoggingManager class.
#silverlight #logging #pauldsheriff #development #programming
In a Silverlight application we are building for a client, they wanted an About screen that would display system information such as the current URL, the operating system name and version, the product name and various other information. In the same application, we built a logging system to gather this same information and write that information to a file to help developers troubleshoot issues. We decided to create a Silverlight class that would gather the information.
#silverlight #pauldsheriff #development #programming
After my previous blog post, I realized that using SQL strings is not a great way to do things. Sometimes we start blogging too quick and then realize our mistakes after. But, no big deal, live and learn... I am going to now rewrite this application and use some lambda expressions to solve the problems inherit with concatenating strings to SQL statements; namely escaping a single quote and SQL Injection attacks.
#silverlight #linq #entityframework #pauldsheriff #development #programming
I have been helping a client with a Silverlight application and one of his requirements was to allow his users to be able to query 1 to 5 fields and use different operators for each field. For example, they can choose to search for a Company Name that 'Starts With' a certain value and also search for an Email field that 'Contains' another value.
#silverlight #linq #entityframework #pauldsheriff #development #programming
There are many examples of the Silverlight Tree View that you will find on the web, however, most of them only show you how to go to two levels. What if you have more than two levels? This is where understanding exactly how the Hierarchical Data Templates works is vital. In this blog post, I am going to break down how these templates work so you can really understand what is going on underneath the hood.
#silverlight #treeview #pauldsheriff #development #programming
One of the reasons I love teaching is because of the questions that I get from attendees. I was giving a presentation at DevConnections and was showing a collection of Product objects. When I hovered over the variable that contained the collection, it looked like Figure 2. As you can see in the collection, I have actual product names of my videos from www.pdsa.com/videos being displayed. To get your data to appear in the data tips you must override the ToString() method in your class.
#dotnet #debugging #pauldsheriff #development #programming
Like many people today, we are exploring HTML 5 for use in web applications. While not really ready for prime-time on its own at this point, it can definitely be used in combination with tools like Modernizr (www.Modernizr.com). One of the first things you might do is create a home page with a simple navigation system on it. This blog post will show you one way to accomplish this.
#html #html5 #pauldsheriff #development #programming
Many developers use the ConfigurationManager class to retrieve settings from the .Config file of your application. This blog posts shows you how to put your own wrapper class around this class to allow you flexibility in the future.
#dotnet #configuration #pauldsheriff #development #programming
|