Config Web Resource For Plugin

在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")
        解释与第一种方式相同,此处略。
         第二种方式也完成了. 
 
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>

本人QQ:787727097   Email:[email protected]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章