Как я могу добавить свой ExtWebComponent в JSP? - PullRequest
Новая
       21

Как я могу добавить свой ExtWebComponent в JSP?

0 голосов
/ 01 ноября 2019

Я хотел бы добавить свои веб-компоненты в мою JSP. Как мне подключить мои ExtWebComponents, чтобы сделать это?

Моя серверная часть работает в контейнере сервлетов.

1 Ответ

0 голосов
/ 01 ноября 2019

У меня есть пример проекта, показывающий, как это сделать. Клиентская сторона - это ExtWebComponents, а серверная - это Java.

Примечания к проекту

  • Мультимодульный проект Maven
  • Контейнер сервлета Java на серверной части
  • Клиент являетсяПроект ExtWebComponents, использующий файл pom.xml только для простого импорта в качестве модуля в IDE. И отстреливать npm builds.

Пример проекта

Пример JSP 

<!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">

    <title>Sandbox Project</title>
    <link rel="icon" type="image/x-icon" href="resources/favicon.ico">

    <script src="webcomponents-bundle.js"></script>
    <link href="ext/ext.css" rel="stylesheet">
</head>

<body>

Testing
<my-sandbox-view></my-sandbox-view>

<%
    out.write("<h2>Test jsp<h2>");
%>

<!-- The webpacked resource bundle is imported here -->
<script type="text/javascript" src="ext/ext.js"></script><script type="text/javascript" src="app.js"></script></body>
</html>

Пример источника

Ресурсы с клиента на сервер

Вы должны указать веб-пакету скопировать ресурсы в каталог веб-приложения, чтобы они могли использоваться в вашем проекте Java. Например, вот как это можно сделать с помощью пользовательского плагина, а затем с помощью веб-пакета --watch. 

// This causes infinite loop, so I can't use this plugin.
//  new CopyWebpackPlugin([{
//    from: __dirname + '/build/',
//    to: __dirname + '/../sandbox-server/target/test1'
//  }]),

// Inline custom plugin - will copy to the target web app folder
// 1. Run npm install fs-extra
// 2. Fix the path, so that it copies to the server's build webapp folder
{
  apply: (compiler) => {
    compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
      // Debugging
      console.log("########-------------->>>>> Finished Ext JS Compile <<<<<------------#######");

      let source = __dirname + '/build/';
      // TODO Set the path to your webapp build
      let destination = __dirname + '/../sandbox-server/target/sandbox';

      let options = {
        overwrite: true
      };
      fs.copy(source, destination, options, err => {
        if (err) return console.error(err)
        console.log('Copy build success!');
      })
    });
  }
}

Пример источника

...