如何在 JIRA 小工具中使用 CSS 文件和 JavaScript 库 [关闭]答案

【问题标题】：How to use CSS files and JavaScript libraries in JIRA gadgets [closed]如何在 JIRA 小工具中使用 CSS 文件和 JavaScript 库 [关闭]
【发布时间】：2015-01-15 16:29:52
【问题描述】：

今天我有两个关于开发JIRA gadgets的问题：

1. CSS

如何为我的小工具添加 .css 文件。我有一些桌子，应该有一些风格。 .css 文件已包含在 atlassian-plugin.xml 中，如下所示：

<web-resource key="Web-resources" name="My Web Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
      <resource type="download" name="MyCSS.css" location="/css/MyCSS.css"/>
        <context>jira.general</context>

    <context>The_Context</context>
</web-resource>

但是如何在我的小工具中使用这个样式表呢？我需要什么？

2。 JavaScript 库

我还想包含 Chart.js 库，也包含在 atlassian-plugin.xml 中。但是如何在小工具中使用它？

【问题讨论】：

JIRA 开发者文档是怎么说的？
非常...但没有我能理解的...（developer.atlassian.com/display/JIRADEV/…等）
我也发现了这个answers.atlassian.com/questions/38299/…，但我不明白第一个答案和第二个剂量不起作用（？）。

标签： javascript css jira jira-plugin

【解决方案1】：

在您的 gadget.xml 文件中，您必须通过项目密钥和小工具密钥包含资源，并且您已定义。 - 在您的情况下，小工具键是“Web-resources”（我建议您将其重命名为 mygadget-resources） - 项目密钥在您的 atlassian-plugin.xml 文件中定义为元素 <atlassian-plugin key="your-project-key"> 的属性

在您的 gadget.xml 文件中元素 Content 内的 CDATA 部分中，首先需要资源，然后包含它们：

    <Content type="html" view="profile">
            <![CDATA[
                #requireResource("your-project-key:Web-resources")
                #includeResources()
             ]]>
    </Content>

之后你就可以使用你在 MyCss.css 中的任何 css 样式，如果你为你的 JS 文件添加另一个资源标签，它也会被包含进来。

这应该让你开始。

【讨论】：

【解决方案2】：

对于我的小工具，我将所有 XML、HTML、JavaScript 和 CSS 从 atlassian-plugin.xml 中分离出来。

最初的设置比较复杂，但是一旦你把它弄对了，关注点的分离就比把所有东西都改成atlassian-plugin.xml 文件要好得多。

另一方面，相对路径确实看起来很疯狂。

我的文件系统如下所示：

- resources/
    - gadgets/
        - css/
            - example.css
        - html/
            - example.html
        - js/
            - example.js
        - examaple-gadget.xml
    - atlassian-plugin.xml

在/resources/atlassian-plugin.xml:

<!-- add our web resources -->
<web-resource key="${project.artifactId}-resources" name="${project.artifactId} Web Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <resource type="download" name="example-gadgets/" location="/gadgets"/>
    <context>immersive-for-connections</context>
</web-resource>

<gadget name="Example JIRA Gadget" i18n-name-key="example-jira-gadget.name" key="example-jira-gadget" location="gadgets/example-gadget.xml">
    <!-- hosted at: /rest/gadgets/1.0/g/${project.groupId}.${project.artifactId}:example-gadgets/gadgets/example-gadget.xml -->
    <description key="jira-query-gadget.description">The JIRA Query Gadget Plugin</description>
</gadget>

在/resources/gadgets/example-gadget.xml 中（将${project.artifactId} 和${project.groupId} 替换为正确的值）：

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    ...
    <Content type="html" view="example.view" preferred_width="100%" href="../../../../../../download/resources/${project.groupId}.${project.artifactId}:${project.artifactId}-resources/gadgets/html/example.html"/>
</Module>

在/resources/gadgets/html/example.html 中（将${project.artifactId} 和${project.groupId} 替换为正确的值）：

<!DOCTYPE html>
<html>
    <head>
        ...
        <!--   added ../../../../../../download/resources/${project.groupId}.${project.artifactId}:${project.artifactId}-resources/gadgets/ to most relative links -->
        <link  href="../../../../../../download/resources/${project.groupId}.${project.artifactId}:${project.artifactId}-resources/gadgets/css/example.css" type="text/css" rel="stylesheet">
        <script src="../../../../../../download/resources/${project.groupId}.${project.artifactId}:${project.artifactId}-resources/gadgets/js/example.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        ...
    </body>
</html>

【讨论】：