Configuration Web Resource For Plugin in JIRA

     在JIRA开发Plugin过程中，曾遇到过页面如何引入外部资源（CSS、JS、IMG）问题，此前在开发Plugin时，我是直接将CSS、JS写在页面里（时间限制）。不过前几天，这些问题已经解决，原来也是那么简单。好了，废话少说，接下来我只将我实现的方式告诉大家，如果各位有其他方法或建议或批评，请直接点评，在这里先谢谢各位了。

 

前提:

1、JIRA 环境；

2、成品 project-management-plugin.jar 插件包，其中该插件中有showProjectManagement.vm、proj_mgt.css、proj_mgt.js 三个文件。

 

目的：

1、页面（showProjectManagement.vm）如何能引用到CSS、JS文件。

 

实现方式1：直接引用Plugin包中存在的CSS、JS资源文件。

     

首先，配置atlassian-plugin.xml文件，如下：

<web-resource key="proj.mgt.web.resource" name="PROJ-MANAGEMENT Resources" state="enabled">

     < resource type =" download " name =" proj_mgt.css " location =" template/project/management/style/palms_proj_mgt.css " />

     < resource type =" download " name =" proj_mgt.js " location =" template/project/management/style/_mgt.js " /> 

  </ web-resource >

         其次，在showProjectManagement.vm页面顶部增加如下代码：

   $webResourceManager.requireResource("project.management.palms-project-management-plugin:proj.mgt.web.resource")

         这些代码是什么？怎么来的呢？别着急，我一会解释清楚。

         $webResourceManager.requireResource（）: 这个大家不用去担心，这是JIRA内部类方法。我们只关心里面参数，请注意参数中不同颜色区域。

          project.management.project-management-plugin: 这一长串就是atlassian-plugin.xml文件的根节点的Key值，请大家到最后看atlassian-plugin.xml、pom.xml配置文件内容便可以得到答案。

         proj.mgt.web.resource：这个大家应该可以从上面贴出的代码中找到，对，就是<web-resource>节点的Key值。

         相信这样解释大家都可以明白了吧。

        这两部配置完成，那么你就算是成功了。

  实现方式2：直接引用server端的CSS、JS等资源。

         1、假设我们在%JIRA_HOME%/style/css/proj_mgt.css，%JIRA_HOME%/style/js/proj_mgt.js有这么2个文件。

         2、找到%JIRA_HOME%/WEB-INF/classes/system-webresources-plugin.xml文件，打开作如下配置，

      <web-resource key="pal.proj.mgt.plugin.web.resource" i18n-name-key="admin.web.resources.plugin.calendar.zh.name" name="Calendar" state="enabled">

- <resource type="download" name="proj_mgt.css" location="/style/css/proj_mgt.css">

  <param name="source" value="webContextStatic" />

  </resource>

- <resource type="download" name="proj_mgt.js" location="/style/js/proj_mgt.js">

  <param name="source" value="webContextStatic" />

  </resource>

  </web-resource>

        3、回到Plugin中找到atlassian-plugin.xml文件，做以下配置，

      <web-resource key="proj.mgt.web.resource" name="PROJ-MANAGEMENT Resources" state="enabled">

         <dependency>jira.webresources:proj.mgt.plugin.web.resource</dependency> 

  </web-resource>

        说明：

         jira.webresources:文件 system-webresources-plugin.xml根节点的Key值；

                proj.mgt.plugin.web.resource： <web-resource >的Key值

        4、在页面顶部添加以下代码：

        $webResourceManager.requireResource("project.management.project-management-plugin:proj.mgt.web.resource")

        解释与第一种方式相同，此处略。

         OK，第二种方式也完成了。呵呵

查看atlassian-plugin.xml 部分内容：

<atlassian-plugin key="project.management.project-management-plugin" name="project-management-plugin" plugins-version="2">

   

    <project-tabpanel key="proj-mgt-plugin-panel" name="Porject Managment Plugin Panel" class="project.management.panel.ProjectManagementTabPanel">

<web-resource key="proj.mgt.web.resource" name="PROJ-MANAGEMENT Resources" state="enabled">

- <!--

 configuration web resource on the web server 
        <dependency>jira.webresources:proj.mgt.plugin.web.resource</dependency>
         

  --> 

 <!--   --> 

 configuration web resource in plugin 

< resource type =" download " name =" proj_mgt.css " location =" template/project/management/style/proj_mgt.css " />

  < resource type =" download " name =" proj_mgt.js " location =" template/project/management/style/proj_mgt.js " />

  </ web-resource >

</atlassian-plugin>

查看system-webresources-plugin.xml 文件内容：

<atlassian-plugin key="jira.webresources" i18n-name-key="admin.web.resources.plugin.name" name="Web Resources Plugin">

  < web-resource key =" proj.mgt.plugin.web.resource " i18n-name-key =" admin.web.resources.plugin.calendar.zh.name " name =" Calendar " state =" enabled ">

    < resource type =" download " name =" proj_mgt.css " location =" /style/css/proj_mgt.css ">

  < param name =" source " value =" webContextStatic " />

  </ resource >

  < resource type =" download " name =" proj_mgt.js " location =" /style/js/proj_mgt.js ">

  < param name =" source " value =" webContextStatic " />

  </ resource >

  </ web-resource >

</atlassian-plugin>

到这里就算完了，希望自己写的有机会能帮得到你们。