Victor’s Programming Aid

You may have noticed the fancing code snippets that accompany many of the tutorials on this website! I would love to say I developed this myself, but the truth is that this is a free resource free for anybody to download and use. It is called SyntaxHighlighter and can be found at http://code.google.com/p/syntaxhighlighter/.

What is Included?

So what does the Syntax Highlighter come with? Below is a list my favorite features of this software:

1. It’s completely free!
2. Associate keywords for supported languages are highlighted.
3. Each line of code is numbered and colored for easier reading!
4. Allows one click to code only view.
5. Allows one click copy to clipboard of code.
6. Allows one click copy to printer.

What Comes With the Download

The file can be downloaded from their official website at http://code.google.com/p/syntaxhighlighter/ as a rar compressed file. Inside the compressed file, you will find various folders and files. The core files that are required include:

1. clipboard.swf
2. shCore.js
3. SyntaxHighlighter.css

Still, there are many more JavaScript files that have been included in the download. Not all of these files are required. Instead, you choose additional optional JavaScript files for the programming or scripting languages you want the Syntax Highlighter to associate.

Installation After Uploading Files

After you have uploaded the required and accompanying optional files, you will need to include the javascript and css files to the header of the pages with which you plan on using the Syntax Highlighter. See the example below:

<link type="text/css" rel="stylesheet" href="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script language="javascript">
  window.onload = function () {
    dp.SyntaxHighlighter.ClipboardSwf = 'http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
  }
</script>

In the above, there Line 1 includes the CSS file. Next, Line 2 includes the one core JavaScript file. Lines 4 through 8 include optional JavaScript files. Lines 9 through 14 include setup for using Syntax Highlighter. The portion requires including the clipboard.swf file.

Usage

I assume you already have formatted code contained within the pre tags, as found in a previous tutorial called 3 Steps to Posting Sample Code on your Website. As of now, all you have is a formatted tag, without the fancy upgrades. All you need to add for fancy code formatting is to add name=”code” class=”html”. Exchange html with the type of file you have included. Click to see sample supported files: http://code.google.com/p/syntaxhighlighter/wiki/Languages. An example:

<pre name="code" class="html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Victor's Programming Aid&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;This is a test&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

Conclusion

With that, you now have fancy code formatting on your website. Comment on some examples of where you have used the Syntax Highlighter in action!

We begin with a standard Panel control. With the Panel control, we can control the width, height, and scrollable option. For our code example, we set the height as 200px, the width as 100%, and set the Panel to scroll while showing only the vertical scrollbars. We will give the Panel the id pnlWrapper.

<asp:Panel ID="pnlWrapper" runat="server" Height="200px" Width="300px" ScrollBars="Vertical">
</asp:Panel>

Our next step is to add to pnlWrapper a GridView that we will assign the id gvScrollableExample. In the sample code below, the GridView will appear as only height 200px and width 300px as we have constrained in pnlWrapper. However, given enough bound data, the Header Row of gvScrollableExample will scroll out of view.

<asp:Panel ID="pnlWrapper" runat="server" Height="200px" Width="300px" ScrollBars="Vertical">
<asp:GridView ID="gvScrollableExample" runat="server">
</asp:GridView>
</asp:Panel>

To fix this, we add a bit of CSS to ensure the Header Row will stay in view. In this situation, the Header Row will act as if it were hoovering above the data. For this to work, we will add inline CSS between the html’s head page as shown below:

<head>
  <style type="text/css">
    .gvFixedHeader
    {
      font-weight:bold;
      position:relative;
      background-color:White;
    }
  </style>
</head>

Next, we have to assign the CSS class to the GridView’s HeaderStyle. This can be done via Visual Studio’s GUI, or we can do it in code. Continuing from our example above, the new extended code will look like:

<asp:Panel ID="pnlWrapper" runat="server" Height="200px" Width="300px" ScrollBars="Vertical">
  <asp:GridView ID="gvScrollableExample" runat="server">
    <HeaderStyle CssClass="gvFixedHeader" />
  </asp:GridView>
</asp:Panel>

The GridView is now ready for you to Bind data. This concludes the tutorial on creating a scrollable GridView with a Fixed Header in Visual Studio. Let me know if there are any questions!

I recently learned how to call a stored procedure using Java.

CallableStatement is used when a Java application needs to call a stored procedure. The stored procedure contains the SQL query to be executed on the database and is stored on the database.

To use CallableStatement, the Java code will need to first import the CallableStatement class.

import java.sql.CallableStatement;

In your method, create a CallableStatement object:

CallableStatement cs = null;

Create a connection with the database:

cs = connection.prepareCall("{ call procedure_name}");

connection is the connection to the database, and prepareCall is the method used to call the stored procedure. The syntax used in the prepareCall parameters is shown above, but replace procedure_name with the actual stored procedure name.

Next, use cs.execute(); to execute. So to put it together, you will need to add it to try/catch block as shown below:

CallableStatement cs = null;
try{
  // The syntax for a stored procedure with no
  // parameters would look like this:
  cs = connection.prepareCall("{ call procedure_name}");
  cs.execute();
} catch (SQLException e) {
}

This is the simplest use of CallableStatement. The stored procedure above does not have any parameters. If the stored procedure has parameters, you will need to modify your code to add the parameters in the Java code. CallableStatements can have IN parameters, OUT parameters, IN/OUT parameters, or no parameters. The Java API for CallableStatement is a good reference as well. Here are some examples I found that are helpful and have the proper syntax:

try {
  // Call a function that takes NO parameters
  cs = connection.prepareCall("{call procedure_name}");
  cs.execute(); //execute the stored procedure

  // Call a function that takes a String IN parameter
  // An IN parameters is when you input a value
  // for the stored procedure

  cs = connection.prepareCall("{call procedure_name_in(?)}");
  cs.setString(1, "ABC"); // Set the value for the IN parameter
  cs.execute();

  // Call a function that returns a String OUT parameter
  // An OUT parameter is when the stored procedure
  // has an output value

  cs = connection.prepareCall("{call procedure_name_out(?)}");
  cs.registerOutParameter(1, Types.VARCHAR);
  // Register the types of the return value and OUT parameter
  cs.execute();
  String outParam = cs.getString(1); // OUT parameter

  // Call a function with one IN/OUT parameter
  // An IN/OUT parameter has been an input and an output

  cs = connection.prepareCall("{call procedure_name_inout(?)}");
  cs.registerOutParameter(1, Types.VARCHAR);
  cs.setString(1, "ABC");
  cs.execute();
  String outParam = cs.getString(1);
} catch (SQLException e) {
}