Archives

Archives / 2012 / March
  • Override ToString() in your Classes

    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.

    To illustrate this, take the following simple Product class shown below:

    public class Product
    {
      public string ProductName { get; set; }
      public int ProductId { get; set; }
    }

    This class does not have an override of the ToString() method so if you create a collection of Product objects you will end up with data tips that look like Figure 1. Below is the code I used to create a collection of Product objects. I have shortened the code in this blog, but you can get the full source code for this sample by following the instructions at the bottom of this blog entry.

    List<Product> coll = new List<Product>();
    Product prod;

    prod = new Product()
      { ProductName = "From Zero to HTML 5 in 60 Minutes",
        ProductId = 1 };
    coll.Add(prod);
    prod = new Product()
      { ProductName = "Architecting Applications …",
        ProductId = 2 };
    coll.Add(prod);
    prod = new Product()
      { ProductName = "Introduction to Windows Phone Development",
        ProductId = 3 };
    coll.Add(prod);
    prod = new Product()
      { ProductName = "Architecting a Business  …",
        ProductId = 4 };
    coll.Add(prod);
    ...
    ...

    Figure 1: Class without Overriding ToString() 

    Figure 1: Class without overriding ToString()

    Now, go back to the Product class and add an override of the ToString() method as shown in the code listed below:

    public class Product
    {
      public string ProductName { get; set; }
      public int ProductId { get; set; }

      public override string ToString()
      {
        return ProductName;
      }
    }

    In this simple sample, I am just returning the ProductName property. However, you can create a whole string of information if you wish to display more data in your data tips. Just concatenate any properties you want from your class and return that string.

    When you now run the application and hover over the collection object you will now see something that looks like Figure 2.

    Figure 2: Overriding ToString() in your Class

    Figure 2: Overriding ToString() in your Class

    Another place the ToString() override comes in handy is if you forget to use a DisplayMemberPath in your ListBox or ComboBox. The ToString() method is called automatically when a class is bound to a list control.

    Summary

    You should always override the ToString() method in your classes as this will help you when debugging your application. Seeing relevant data immediately in the data tip without having to drill down one more layer and maybe scroll through a complete list of properties should help speed up your development process.

    NOTE: You can download the sample code for this article by visiting my website at http://www.pdsa.com/downloads. Select “Tips & Tricks”, then select “Override ToString” from the drop down list.

     

    Read more...

  • Call for Speakers - DevConnections Fall 2012

    Calling all Speakers!

    My name is Paul Sheriff and I am one of the conference chairs for DevConnections in the Fall of 2012 which will be held in Las Vegas from Oct. 29-Nov 1, 2012. This show will focus on Visual Studio 11 and Windows 8 development, but good generic topics on .NET development are still welcome. You need to have 3 topics accepted in order to be compensated for your travel and sessions. Thus, you will need to submit more than 3 topics.

    Fundamentals Track

    I need speakers that are adept at teaching business application programmers how to move to .NET, XAML, Windows 8 Metro, HTML5, JavaScript and JQuery. I am not looking for a re-hash of old seminar topics. I want new "step-by-step" oriented seminars that show people how to do one or two things well in Visual Studio 2010 or Visual Studio 11. I would really like step-by-step seminars as much as possible. I am especially interested in those seminars that show people how to move from old style programming to new style programming (Synchronous to Asynchronous, Web API, SOA, XAML, HTML5, etc.) I am looking for those seminars that teach the basics to business programmers across a wide variety of topics. Below are the technologies/areas that I think would be good for this track.

    • Developing an App in Windows 8 Metro
    • Creating a multi-tier app using the new Web API
    • Using HTML 5 for Mobile Applications
    • Getting Started with JavaScript and jQuery
    • Moving from Synchronous programming to Asynchronous
    • Suggest a topic…

    Professional Development Track

    This track will focus on the programmer who is moving up to architect, project manager or a development manager. The intent is to present a series of seminars that will help them build their skills in these areas.

    • Project Management
    • Requirements Gathering
    • Estimating
    • Architecture
    • Suggest a topic…

    *** NOTE: NEW SESSIONS NEEDED!!! ***

    IMPORTANT: We want fresh sessions! If you have presented a topic at DevConnections more than 2 times before, please do not submit those as we will not accept them. We will really be interested in topics around Windows 8, Metro, HTML5 and JavaScript and JQuery.

    If you are interested, please let me know by emailing me directly at PSheriff@pdsa.com. Here is what I need from you ASAP!

    1. A title and short description of your proposed topics
    2. Your willingness to present on a minimum of 3 topics
    3. You are able to come Oct. 29-Nov. 1, 2012 to Las Vegas to speak on your topics
    4. DEADLINE!  I need all of this by April 3, 2012

    Please enter your abstracts at http://www.deeptraining.com/devconnections/abstracts

    Abstract Format

    Please really think about your Title and Abstract. I would prefer you to have it in the following format.
     
    Title: The title should be very action oriented and explain exactly what you will get from this session. Think “Marketing and Sales”! You are selling your session to the attendees. Using numbers in your title are a great way to gather interest, for example; “Top 10 tips for ____”, “The 20 things you need to know to _____”, “You can learn _____ in just 75 minutes”, etc.

    Description: Use a lot of action sentences and explain each demo and each point that the attendee will get from attending this seminar. Really sell this seminar to the attendee in here. If possible we would like to have the user walk away with a class, a DLL, a reusable widget, flash cards, a document with step-by-step instructions, or a set of concrete techniques from this session. Give some value to the attendee. Make this “Take Away” the last sentence in your abstract.

    Please keep the abstracts under 200 words each and in one paragraph. No bulleted items and line breaks, and please use a spell-checker. You need to use the web-based tool to submit them officially, but send to me too please. Please submit at least 3 abstracts, but it would help your chances of being selected if you submitted 5 or more abstracts. Also, you are encouraged to suggest all-day pre or post conference workshops as well. We need to finalize the conference content and the tracks layout in just a few weeks, so we need your abstracts no later than April 3, 2012. NO EXECPTION will be granted on late submissions!

    What you will get if selected:

    • $500 per regular conference talk.
    • Compensation for full-day workshops ranges from $500 for 1-20 attendees to $2500 for 200+ attendees.
    • Airfare allowance of up to $500. If you are international, you will have to cover the rest.
    • Hotel stay paid by the conference.
    • Free admission to the conference.
    • Lots of fun!

    Read more...

  • An HTML 5 Navigation Screen

    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.

    Navigation

    Figure 1 shows an example of a home screen and a navigation system. One of the things you notice right away about this home screen in Figure 1 is the drop shadows around each navigation button. You also notice that each button has a rounded corner. All the buttons together sit atop a background that also has a drop shadow and also has a rounded corner. Further, each of these elements also has a gradient color of light gray to gray.

    While there were ways to accomplish drop shadows, rounded corners and gradients prior to CSS 3 and HTML 5, it was not always easy for developers to do so. You typically needed help from a graphical artist to create these. These graphical elements are a part of CSS 3 and can be created by a developer with a little help from some on-line tools such as ColorZilla which I will talk about in the next section.

    Figure 1: A navigation system in HTML 5 can be surrounded with <nav> tags.

    Listing 1 shows the complete HTML for the navigation screen shown in Figure 1. As you can see the HTML is fairly simple. The new items in this HTML are the box-shadow, and the border-radius rules in the .mainMenu style selector, and the <nav> and <footer> elements in the main body of the HTML.

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>Business UI Samples</title>
      <link rel="stylesheet"
            type="text/css"
            href="Styles/Styles.css" />
      <style type="text/css">
        .mainMenu
        {
          color: White;
          float: none;
          text-decoration: none;
          display: inline-block;
          text-align: center;
          height: 0.5em;
          width: 5em;
          margin: 0.5em 0.5em 0.5em 0.5em;
          padding: 0.3em 1em 1.1em 1em;
          border: 0.09em solid black;
          box-shadow: 0.5em 0.5em rgba(0,0,0,0.8);
          -webkit-box-shadow: 0.5em 0.5em rgba(0,0,0,0.8);
          -moz-box-shadow: 0.5em 0.5em rgba(0,0,0,0.8);
          border-radius: 0.5em;
          -webkit-border-radius: 0.5em;
          -moz-border-radius: 0.5em;
        }
        
        p
        {
          margin-left: 1em;
        }
      </style>
    </head>
    <body>
      <nav class="backColor">
        <a href="Login.htm" class="mainMenu backColor">Login</a>
        <a href="ContactUs.htm"
           class="mainMenu backColor">Contact</a>
        <a href="Name.htm" class="mainMenu backColor">Name</a>
        <a href="Address.htm"
           class="mainMenu backColor">Address</a>
        <a href="User.htm" class="mainMenu backColor">User</a>
      </nav>
      <br />
      <br />
      <br />
      <p>
        Content goes in here...</p>
      <footer class="backColor">
      Samples of Business UI
      </footer>
    </body>
    </html>

    Listing 1: The HTML for the default page of your web application.

    The <nav> element is nothing more than a semantic markup used to group links together to make up your main navigation area. Having a separate element allows us to use an element selector in CSS to provide styling for <nav>. In addition, <nav> allows search engines to determine that this is your main navigation area.

    The CSS rules “box-shadow” and “border-radius” used in the .mainMenu style are what provide the rounded corners of your main navigation area and footer area. The three different versions of box-shadow and border-radius help you account for the syntax differences between browsers. I have tested these styles with these browsers; Opera 11.61, Google Chrome 17.0, Safari 5.12, FireFox 9.01, and IE 9. While the screens in this article may look slightly different on each one, they all seem to work with HTML 5 and CSS 3. If the particular browser does not support a specific feature of HTML 5 or CSS 3 then they simply downgrade to something that is similar in HTML 4.

    The other thing you may notice from the navigation screen shown in Figure 1 is the navigation background and the hyperlinks have a slight gradient color to them. In other words, they are not just one color of gray, but they start with a light gray at the top and gradually become a darker gray at the bottom. To accomplish this you add a class attribute to the <nav> button called “backColor”. This class style is defined in the style sheet named “Styles.css”. Listing 2 shows the complete definition of this “backColor” style. Now don’t let the size of this listing scare you. This was code generated from a great website called ColorZilla (http://www.colorzilla.com/). This free, on-line utility will generate the correct CSS styles needed to create gradients on each browser.

    .backColor
    {
      /* Old browsers */
      background: rgb(181,189,200);
      /* IE9 SVG, needs conditional override of
         'filter' to 'none' */
      background: url(data:image/svg+xml;base64, PD94bWwgdm …);
      /* FF3.6+ */
      background: -moz-linear-gradient(top,
                  rgba(181,189,200,1) 0%,
                  rgba(130,140,149,1) 36%,
                  rgba(40,52,59,1) 100%);
      /* Chrome,Safari4+ */
      background: -webkit-gradient(linear, left top, left bottom,
                  color-stop(0%, rgba(181,189,200,1)),
                  color-stop(36%, rgba(130,140,149,1)),
                  color-stop(100%, rgba(40,52,59,1)));
      /* Chrome10+,Safari5.1+ */
      background: -webkit-linear-gradient(top,
                  rgba(181,189,200,1) 0%,
                  rgba(130,140,149,1) 36%,
                  rgba(40,52,59,1) 100%);
      /* Opera 11.10+ */
      background: -o-linear-gradient(top,
                  rgba(181,189,200,1) 0%,
                  rgba(130,140,149,1) 36%,
                  rgba(40,52,59,1) 100%);
      /* IE10+ */
      background: -ms-linear-gradient(top,
                  rgba(181,189,200,1) 0%,
                  rgba(130,140,149,1) 36%,
                  rgba(40,52,59,1) 100%);
      /* W3C */
      background: linear-gradient(top,
                  rgba(181,189,200,1) 0%,
                  rgba(130,140,149,1) 36%,
                  rgba(40,52,59,1) 100%);
      /* IE6-8 */
      filter: progid:DXImageTransform.Microsoft.gradient(
                  startColorstr='#b5bdc8',
                  endColorstr='#28343b',
                  GradientType=0 );
    }

    Listing 2: Gradients are a great way to make your screens look more natural to users.

    The last new item on the home page is the <footer> element. Again, this is just a semantic markup element. You style <footer> exactly as you style the <nav> element. You will use the same class attribute, backColor, on this <footer> element. This adds the background color to the footer. Also, in the Styles.css you will find the footer selector defined like the following:

    footer
    {
      padding: 0.5em 0.5em 0.5em 0.5em;
      margin: 0.5em 0.5em 0.5em 0.5em;
      position: absolute;
      bottom: 0.2em;
      left: 0em;
      width: 95%;
      text-align: left;
      border-radius: 0.75em;
      -webkit-border-radius: 0.75em;
      -moz-border-radius: 0.75em;
    }

    The above rules are applied to the <footer> element and the backColor class is also applied with the background color. Keeping your background color separate from your other style rules allows you to change the background color in just one place without affecting any other style rules. You also see this type of styling on the <a href> elements used for the main navigation.

    <a href="Login.htm" class="mainMenu backColor">Login</a>

    In the class attribute on each of the <a href> elements you are applying two styles. The mainMenu selector controls foreground color, margin, padding and other rules while the backColor selector applies the background color.

    Summary

    In this blog post you learned to create a simple home page using the <nav> and <footer> elements in HTML 5. You also learned to use rounded borders and drop shadows will make your screens look more modern. Employing linear gradients in your background colors will help your applications look more natural to new users. Of course, all of this assumes that HTML 5 can be rendered on all browsers that your users use. Right now, this is just not the case. So, you will need to still use some fallback mechanisms such as Modernizr (www.modernizr.com) to ensure that your HTML 5 applications will still work with older browsers.

    NOTE: You can download the sample code for this article by visiting my website at http://www.pdsa.com/downloads. Select “Tips & Tricks”, then select “HTML 5 Navigation” from the drop down list.

     

    Read more...