JSF & Richfaces - Display Math On Web

Last week, I attended an event, organized by 'Nuremberg/Nurnberg(Germany) Herbstcampus', in which, bigtime folks from the software industry (specially from the Java world) like James Gosling (Founder of Java), some core developers from the Hibernate and JSF were present.

Later, I worked on a sample JSF-Facelets-Richfaces application. Instead of creating a boring sample application, I thought of working on some interesting stuff. This application, I created deals with "How To Display Math On The Web?" and uses a 'jsmath' package, which is a open source javascript library. This library has 2 options for users to display math on web: Using 'TeX Fonts' (which can be installed on your system) or Images (which are in jsmath package). I used the first option, just to make it easier. If you want, you can download these fonts from the JSMath site.

Below is the sample facelets file of this application, which displays 'Math' expressions or equations dynamically, as you type the 'Tex Expression' as input:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">

<ui:composition>

<STYLE TYPE="text/css">
.math {visibility: hidden}
</STYLE>
<SCRIPT>jsMath = {Controls: {cookie: {scale: 133}}}</SCRIPT>
<SCRIPT src="jsMath/jsMath.js"></SCRIPT>

<SCRIPT>
function process() {        
jsMath.Process(document.getElementById('math'));    
}      
</SCRIPT>

<f:view>
<rich:panel>
<h:outputText value="Enter Some Math Expression: " />
<h:form>
<h:inputTextarea id="intext" value="#{mathBean.text}" style="width:400;height:100">
<a4j:support event="onkeyup" reRender="outPanel" oncomplete="process()"/>
</h:inputTextarea>          
</h:form>              
</rich:panel>

<a4j:outputPanel id="outPanel">
<DIV CLASS="math">        
<h:outputText id="outtext" value="#{mathBean.text}"/>                        
</DIV>
</a4j:outputPanel>
</f:view>
</ui:composition>
</html>


As you see (in the above code), I have a input text area, where you type your 'Tex Expression', which is rendered dynamically and displayed in the "Math" div, which should be surrounded by "a4j:outputPanel" tags, to be rendered on AJAX response. The input text area, has "a4j:support" tags, which creates a AJAX request, based on the "onkeyup" javascript event and rerenders the outputPanel, which contains the 'Math' div. There is also a "oncomplete" attribute for this tag, which calls a javascript function of jsMath package, on complete of the AJAX cycle and renders the TeX expression that you typed, into a Math expression/equation.

Below is a demo, which shows how it works:



And below is the code for 'MathBean':

package com.math;

public class MathBean {
private String text;

public void setText(String text) {
this.text = text;
}

public String getText() {
return text;
}
}

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.