Edit this page

Progress® Telerik® UI for JSP

This article demonstrates how to download and install Progress Telerik UI for JSP and run a sample application.

Getting Started

Download and Install

The distribution files contain the following:

  • \js—These are the Kendo UI minified JavaScript files.
  • \styles—The Kendo UI minified CSS files and background images used by the themes.
  • \wrappers\jsp\kendo-taglib—The Progress Telerik UI for JSP jar files.
  • \wrappers\jsp\spring-demos—A sample JSP Spring MVC application.

Sample Application Setup

Meet the Requirements

Figure 1: Eclipse with Tomcat7 configured

Eclipse with Tomcat7 configured

Find a sample a JSP Spring MVC application in the \wrappers\jsp\spring-demos folder.

Run the Application

Step 1 Extract the Progress Telerik UI for JSP package.

Step 2 Start Eclipse.

Step 3 Choose File > Import.

Step 4 Choose Maven > Existing Maven Projects. Click Next. If you do not see that option, make sure your Eclipse has Maven support installed.

Figure 2: Eclipse with Tomcat7 configured

Import Maven projects

Step 5 Browse to the location where you extracted Progress Telerik UI for JSP. Then pick "wrappers\jsp\spring-demos" for "Root Directory". Click "Finish".

Figure 3: Import of the Kendo UI JSP demos

Import Kendo UI JSP demos

Step 6 Right-click spring-demos in the Eclipse Project Explorer. Pick Properties.

Step 7 In the properties window pick Project Facets.

Step 8 From the "Project Facets" menu select "Dynamic Web Module".

Figure 4: Project facets

Project facets

Step 9 Click the Runtimes tab. Pick a runtime—Tomcat7, for example.

Figure 5: Project facets—Tomcat 7

Project facets - Tomcat 7

Step 10 Click OK to close the Properties window.

Step 11 Right-click spring-demos in the Eclipse Project Explorer. Pick Run As > Run on server.

Add Kendo UI

Follow the steps below to add Kendo UI to your JSP application.

Step 1 Create a new Dynamic Web Project from Eclipse or open an existing one.

Step 2 Add \wrappers\jsp\kendo-taglib\kendo-taglib-[version].jar to project's /WebContent/WEB-INF/lib folder.

Step 3 Copy the Kendo UI JavaScript files from the \js folder of the installation to the WebContent/resources/js folder of your application.

If you intend to use CDN services, skip steps 3, 4, and 5, and check the section on CDN below.

Step 4 Copy the Kendo UI CSS files and folders from the \styles folder of the installation to the WebContent/resources/styles folder of your application. If you want to use only one theme, copy kendo.common.min.css, the theme file (e.g. kendo.default.min.css), the theme folder (e.g. Default) and the textures folder.

Step 5 Add a JSP page. 1. Right-click the WebContent folder. 2. Select New > JSP file. 3. Enter a file name and click Finish.

Step 6 Configure your page to include the Kendo UI web JavaScript and CSS files to the page, as shown in the example below.

Example
    <link href="resources/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="resources/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="resources/js/jquery.min.js"></script>
    <script src="resources/js/kendo.web.min.js"></script>

Step 6 Configure your page to include the Kendo UI DataViz JavaScript and CSS files.

Important

If you want to use Kendo UI web and data visualization widgets at the same time, include kendo.all.min.js instead of kendo.web.min.js and kendo.dataviz.min.js. You can also create a custom JavaScript file by using the Custom Download Builder.

Example
    <link href="resources/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="resources/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="resources/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

    <script src="resources/js/jquery.min.js"></script>
    <script src="resources/js/kendo.dataviz.min.js"></script>

Step 7 Add taglib mapping to the Kendo UI tags.

Example
    <%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>

Step 8 Use any Kendo UI HtmlHelper extension.

Example
    <kendo:datePicker name="datePicker"></kendo:datePicker>

Use CDN Services

You are also able to include the JavaScript and CSS files from CDN. Do not forget to specify the version, e.g. 2012.2.710.

Example
   <link href="http://kendo.cdn.telerik.com/<VERSION>/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
   <link href="http://kendo.cdn.telerik.com/<VERSION>/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   <script src="http://kendo.cdn.telerik.com/<VERSION>/js/kendo.all.min.js"></script>

Next Steps

To gain more practice on Progress Telerik UI for JSP, watch the video tutorials on the Kendo UI YouTube Channel:

  1. Get Started with Telerik UI for JSP: Episode 1
  2. Get Started with Telerik UI for JSP: Episode 2
  3. Get Started with Telerik UI for JSP: Episode 3
  4. Get Started with Telerik UI for JSP: Episode 4

For more examples on how to use Kendo UI with JSP wrappers, visit the GitHub repository with the collected Kendo UI examples on using JSP.

See Also

Other articles on Progress Telerik UI for JSP:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy