Styling Custom Module

osagie.ehigiato · June 2, 2015, 2:04pm

I am currently creating an OpenMRS module with jsp views. An issue I am currently facing is styling.

I want to apply minimal style to my views, but when I place the css file under the resources directory and call it from my jsp page, it does not seem to respond.

Below is my project structure:

So, I call from my jsp page: <link rel="stylesheet" type="text/css" href="resources/style.css"/> Even when I view my source file from browser, the location of the css seems not to even be recognized. Can anyone help please?

darius · June 2, 2015, 2:59pm

It’s important to know that the OpenMRS module framework copies module resources into the main WEB-INF directory, and they are also exposed via a specific ModuleResourceServlet:

github.com

openmrs/openmrs-core/blob/master/web/src/main/java/org/openmrs/module/web/ModuleResourcesServlet.java

/**
 * This Source Code Form is subject to the terms of the Mozilla Public License,
 * v. 2.0. If a copy of the MPL was not distributed with this file, You can
 * obtain one at http://mozilla.org/MPL/2.0/. OpenMRS is also distributed under
 * the terms of the Healthcare Disclaimer located at http://openmrs.org/license.
 *
 * Copyright (C) OpenMRS Inc. OpenMRS is a registered trademark and the OpenMRS
 * graphic logo is a trademark of OpenMRS Inc.
 */
package org.openmrs.module.web;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

This file has been truncated. show original

I think the url you want to use is “/moduleResources/{{moduleId}}/style.css”.

Also, we have a helper taglib for including js and css (and this has the benefit of taking care of caching, i.e. it will append a query parameter that changes every time you restart OpenMRS or reload a module). Example:

<openmrs:htmlIncludefile="/moduleResources/htmlformentry/htmlFormEntry.css" />

github.com

openmrs/openmrs-module-htmlformentry/blob/305846c2eee9a742938e3cda146fee5104c67e50/omod/src/main/webapp/htmlFormFromFile.jsp#L61


<c:if test="${ not empty previewHtml }">


	<script>
		var propertyAccessorInfo = new Array();
		var beforeValidation = new Array();     // a list of functions that will be executed before the validation of a form
		var beforeSubmit = new Array(); 		// a list of functions that will be executed before the submission of a form
	</script>
	
	<openmrs:htmlInclude file="/scripts/calendar/calendar.js" />
	<openmrs:htmlInclude file="/moduleResources/htmlformentry/htmlFormEntry.js" />
	<openmrs:htmlInclude file="/moduleResources/htmlformentry/htmlFormEntry.css" />


	${ previewHtml }
</c:if>


<%@ include file="/WEB-INF/template/footer.jsp"%>