文章分類／Infragistics
Ignite UI for Javascript 也可以在使用 Java 建置的網站上使用。
在本文中，我們將介紹使用Eclipse（Java開發中常用的IDE）的建置過程。
建立一個網路項目
創建一個類別（HelloIgnite）
您可以透過複製並貼上下面的原始程式碼來按原樣使用它。
package ignite.sample; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class HelloIgnite extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); // HTML out.println("<html>"); out.println("<head>"); out.println("<title>Hello Ignite</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Hello Ignite!!</h1>"); out.println("</body>"); out.println("</html>"); } }
使用建立的 Java 類別執行 URL 映射
造訪先前建立的 HelloIgnite 類別時應該顯示哪個 URL？執行 URL 映射。
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>IgniteUISample</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>helloIgnite</servlet-name> <servlet-class>ignite.sample.HelloIgnite</servlet-class> </servlet> <servlet-mapping> <servlet-name> helloIgnite </servlet-name> <url-pattern> / </url-pattern> </servlet-mapping> </web-app>
完成到目前為止的步驟後，您就可以發佈網頁了。讓我們運行伺服器並檢查一下。
訪問下面的URL並確認可以顯示“Hello Ignite!!”。
http://localhost:8080/IgniteUISample/
igGrid 簡介
您可以透過將下面的原始程式碼複製並貼上到 HelloIgnite 類別中來嘗試一下。
*CDN可用於快速實施。
package ignite.sample; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class HelloIgnite extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); // HTML out.println("<!DOCTYPE html>"); out.println("<html lang="ja">"); out.println("<head>"); out.println(" <meta charset="UTF-8" />"); out.println(" <title>HelloIgnite</title>"); out.println(" <script src='http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js'></script>"); out.println(" <script src='http://code.jquery.com/jquery-1.11.3.min.js'></script>"); out.println(" <script src='http://code.jquery.com/ui/1.11.1/jquery-ui.min.js'></script>"); out.println(" <!-- Ignite UI Required Combined CSS Files -->"); out.println(" <link href='http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/themes/infragistics/infragistics.theme.css' rel='stylesheet' />"); out.println(" <link href='http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/structure/infragistics.css' rel='stylesheet' />"); out.println(" <!-- Ignite UI Required Combined JavaScript Files -->"); out.println(" <script src='http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.core.js'></script>"); out.println(" <script src='http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.lob.js'></script>"); out.println("</head>"); out.println("<body>"); out.println(" <table id='grid'></table>"); out.println(" <script>"); out.println(" $(function () {"); out.println(" var data = ["); out.println(" { 'Name': 'John Smith', 'Age': 45 },"); out.println(" { 'Name': 'Mary Johnson', 'Age': 32 },"); out.println(" { 'Name': 'Bob Ferguson', 'Age': 27 }"); out.println(" ];"); out.println(" $('#grid').igGrid({"); out.println(" dataSource: data,"); out.println(" });"); out.println(" });"); out.println(" </script>"); out.println("</body>"); out.println("</html>"); } }
載入 Ignite UI for JavaScript 的樣式表文件
out.println(" <!-- Ignite UI Required Combined CSS Files -->"); out.println(" <link href='http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/themes/infragistics/infragistics.theme.css' rel='stylesheet' />"); out.println(" <link href='http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/structure/infragistics.css' rel='stylesheet' />");
載入 Ignite UI for JavaScript 的腳本文件
out.println(" <!-- Ignite UI Required Combined JavaScript Files -->"); out.println(" <script src='http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.core.js'></script>"); out.println(" <script src='http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.lob.js'></script>");
igGrid排列
out.println(" <table id='grid'></table>");
igGrid 設定
out.println(" $('#grid').igGrid({"); out.println(" dataSource: data,"); out.println(" });");
檢查結果
修改HelloIgnite類別後，重新啟動伺服器，檢查igGrid是否可以顯示。