athen--writing-your-own-view-in-html/css/jscript.md

@@ -174,5 +174,46 @@ This methods reads a ```.html``` which contains the initial layout for our view
 </html>
 ```
 This renders to something like:
+
 ![ATHEN_corefHTML](/uploads/78c0cb31edc4a36ed51829e61ab9c345/ATHEN_corefHTML.PNG)
 
+Which looks kinda like what we had in the first place, using SWT.
+
+### Styling using CSS and adding dynamic using Javascript
+
+Because you are reading your view from a file which is located within a jar, once the application is built you cant just place your ```.css``` or your ```.js``` aside your page and hope it gets found, because it wont! What you need to do is illustrated in the following snippet:
+
+```java
+	private String createHTMLContent() {
+		String page = "";
+		String css = "";
+		String jscript ="";
+		URL resourceHTML = CorefViewHTMLComposite.class.getResource("corefView.html");
+		URL resourceCSS = CorefViewHTMLComposite.class.getResource("corefView.css");
+		URL resourceJSCRIPT = CorefViewHTMLComposite.class.getResource("corefView.js");
+		try {
+			page =IOUtils.toString(resourceHTML);
+			css =IOUtils.toString(resourceCSS);
+			jscript = IOUtils.toString(resourceJSCRIPT);
+		} catch (IOException e) {
+			// TODO Auto-generated catch block
+			e.printStackTrace();
+		}
+		
+		//use JSoup to add a style element
+		Document doc = Jsoup.parse(page);
+		Element head = doc.head();
+		Element styleElement = head.appendElement("style");
+		styleElement.text(css);
+		
+		
+		//also add a script element the same way
+		Element scriptElement = head.appendElement("script");
+		scriptElement.text(jscript);
+		
+		
+		return doc.toString();
+	}
+```
+
+This function reads the content of ```corefView.html```, ```corefView.css``` and ```corefView.js``` using an inputstream and IOUtils of apache.commons.io. Next, by using JSoup, a ```<script>``` and a ```<style>``` element is added to the header in order to integrate the styling and functions to your page.
\ No newline at end of file