Getting Started

JSP

System Requirements

To work with JSP, you need to meet the below configuration.

  • Java Development Kit (JDK), Java Runtime Environment (JRE) version (1.7 or 1.8) needs to be installed and configured.
  • Any web servers (Apache Tomcat 7) that’s supports the Java Servlet, JSP specification. Also, ensure that the web servers need to be tested and configured with the IDE.
  • Eclipse IDE for Enterprise developers with J2EE support – (Lune, Kepler, Mars, or later) or NetBeans IDE with Java2E support.

Steps to deploy the DashboardViewer JSP demo in Apache Tomcat

  1. Download the Apache Tomcat from the official download page.
  2. You can find a DashboardViewer JSP sample JSP from [Dashboard Platform SDK] (https://help.syncfusion.com/dashboard-platform/dashboard-sdk/installation-and-deployment) build installed location mentioned below.

%localappdata%\Syncfusion\Dashboard Platform SDK\Getting Started Samples\JSP\DashboardViewer

  1. Copy the DashboardViewer folder to your Webapps folder of Apache Tomcat.
  2. Browse to http://localhost:8080/DashboardViewer to see the Dashboard.

Create a DashboardViewer JSP Dynamic web application with Eclipse environment

To use DashboardViewer JSP in eclipse environment, follow the steps below:

  • To create the Dynamic web project from File -> New -> Dynamic web project.

  • In this Dynamic Web project window specify the project name and click the Next button to create the project.

    Create project

  • Once the project has been created successfully, the project file showcased in the left side project Explorer pane in the IDE.

    Project Explorer pane

  • Then add the new JSP file to the project by right click the WebContent folder in your project and choose New -> JSP.

    WebContent folder

  • Specify the file name for your new JSP file.

    New JSP file

  • Now the JSP file created with default template content.

    Default template

  • Copy the scripts, themes and fonts folders from Dashboard Platform SDK build installed location

    %localappdata%\Syncfusion\Dashboard Platform SDK\Getting Started Samples\JSP\DashboardViewer

    and paste into your project WebContent folder. Then, add the scripts and CSS references in the order mentioned below.

    Example

  • HTML
    • <html>
      <head>
      <title> Getting Started DashboardViewer JSP </style>
	  <link href="Content/themes/default-theme/ej.dashboardViewer.all.min.css" rel="stylesheet" />
      <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
      <script type="text/javascript" src="scripts/jquery.easing.1.3.min.js"></script>
      <script type="text/javascript" src="scripts/ej.dashboardViewer.all.min.js"></script>
      <style>
           #dashboard, html, body{
               height:100%;
               width:100%;
               overflow:hidden !important;
           }
      </style>
      </head>
      <body>
           < !-- DashboardViewer JSP Custom Tag -->
      </body>
      </html>

    1. Now add the DashboardViewer JSP source package from \JSP\DashboardViewer\WEB-INF\lib\syncfusion.dashboardviewer.jar to your project’s /WebContent/WEB-INF/lib folder.

    2. Add the Custom taglib from \JSP\DashboardViewer\WEB-INF\EJ.tld to your project’s /WebContent/WEB-INF.

    3. Import the DashboardViewer component package into your JSP page.

      Example

  • HTML
    • <%@ page import="com.syncfusion.*"%>

    1. Add the mapping Tag Library descriptor (tld) file to support Dashboard Platform SDK DashboardViewer JSP custom tag.

      Example

  • HTML
    • <%@ taglib prefix="ej" uri="/WEB-INF/EJ.tld"%>

    1. Use the Dashboard Platform SDK DashboardViewer JSP custom tag within your JSP file.

      Example

  • HTML
    • <div class="content-container-fluid" style="height:100%; width:100%;">
            <ej:dashboardViewer id="dashboard" serviceUrl="https://dashboardsdk.syncfusion.com/DashboardService/DashboardService.svc" dashboardPath="https://dashboardsdk.syncfusion.com//Dashboards//WorldWideCarSalesDashboard.sydx"></ej:dashboardViewer>
    </div>

    NOTE

    Make sure the given dashboard path should be accessible with the given Dashboard Service URL.
    Provided online Dashboard Service URL above, only for demo purpose.

    1. Finally, the index.jsp file looks like below:

    Index jsp file

    Binding Dashboard Service

    To initiate the dashboard service instance you can follow anyone of the below methods

    1. Hosting Dashboard Service in IIS

    2. Hosting Dashboard Service in IIS Express

    3. Hosting Dashboard Service as Windows Service Background Process

    IMPORTANT

    Hosting dashboard service at IIS is recommended for the production environment for object management and other memory management features.

    Start the server to deploy our project

    • For initial time server configuration open the Windows -> Preferences options.

    • In Preferences window, choose the Server -> Runtime Environment.

      Runtime Environment

    • Now click the Add button to configure the new server for your project deployment.

    • In this New Server Runtime Environment window, choose the latest Apache Tomcat version and click the Next button.

      Apache Tomcat version

    • Now specify your Apache Tomcat installation location by using browse button. Then Click the Finish button to complete server configurations.

      Finish

    • Now your application is ready for deployment. Right click your project in your Project Explorer window, then choose the Run As - > Run on Server option.

      Run

    • In the Run on Server Window select our Apache Tomcat version and click the Next button.

      Next

    • Select your application project in the right side pane and click the Finish button.

      Finish

    • Now your JSP sample will be deployed in Apache sever and the output will be displayed.

      JSP sample output