WME MathEdit (Status Report)

1. WME MathEdit(Status Report) by K. Cem Karadeniz Kent State University Computer Science March 15th, 2006

2. Overview • New implementation platform: JAVA • Why Applet? • Advantages & Disadvantages • Security, Applet Signature, Policy • The Box Model and Animation • Current Package and Class Hierarchy • Serializer, Parser and SAX

3. Overview (cont.) • Interface Design • Old Interface vs. New Interface • Application Programming Interface (API) • Interaction with Other WME Components • Enabling Web Pages for MathML (brief) • Use XHML template package (cancelled) • Demo of the Current Tool

4. Refreshing the Requirements The WME MathEdit tool, • requiresanimation and very intensive input control (keyboard, mouse) êêêêê • has to work online on client side êêêêê • has to be able to communicate two ways within the web page êêêêê • should have access to clients’ local hard drives to read/write files (for also debugging)êêêóó • may store formulas as image files êóóóó

5. Communication Scenario • Considering those requirements, we have the following communication scenario diagram:

6. Why JAVA? • All the requirements can be implemented by using JAVA and its Applet technology. • Applets are full JAVA programs and they, • allow to create the highly needed symbol animation, • are capable to work online, • can interact with web page, • may access the client hard drive (!)

7. JAVA Applet: Pros[Cons • Applets provide ways to fulfill all five requirements that I just mentioned; they are full featured programs! <x5 • Object-oriented code has tremendous advantages (i.e. plug n play parsers, code reuse and easy maintenance) < • Platform independent coding & execution on platform dependent JVM

8. JAVA Applet: Pros[Cons • Applet comes with following constraints as far as the WME is concerned: • Extra action needed for security (next) • Requires a heavy weight plug-in (JRE) ~16MB! • Like every other tool to implement MathEdit! • Relatively slow initialization due to Java nature (interpreted language) and large bytecode size • Researching open-source optimizers and tools to convert to native code (!) – if larger than 300k I will try • 1.5.0 (or 5.0) is beyond other older versions

9. Applet Security • Applets used to have a bad fame about security • First choice of malicious hackers to hack MS Windows remotely • JDK’s goal is to enable browsers to run untrusted applets in a trusted environment • Local policy files (suitable for development) • Signed applets (WME will possibly use this)

10. Plain text files on client machines Default: .java.policy in the user home directory Not very practical for WME (why?) You can use policytool program in SDK For now WME MathEdit needs the following permissions: grant codeBase "file:/e:/javaworld/-" { permission java.io.FilePermission "<<ALL FILES>>", "read, write"; permission java.util.PropertyPermission "user.dir", "read"; permission java.lang.RuntimePermission "modifyThread"; }; Applet Security: Local Policy It is also possible to grant all permissions: grant codeBase "file:/e:/javaworld/-" { permission java.security.AllPermission; };

11. Applet Security: Signed Classes • This does not require any file on client < • Program has to be in a JAR package • Only the main class must still be present together with the signed JAR file • Tools to use in J2SE SDK: • jar • keytool • jarsigner

12. # jar cvf mathedit_unsigned.jar mathedit # keytool –genkey \ -alias mymathedit \ -keypass keymathedit \ -keystore matheditkey.bin \(can have multiple keys -alias) -storepass pubmathedit 3. Answer questions (next slide) 4. # jarsigner -keystore matheditkey.bin -signedjar mathedit_signed.jarmathedit_unsigned.jarmymathedit 5. Answer questions (next-next slide) Signing an applet is almost like writing a small program! It needs some effort K. My five-step minimal process below: Applet Security: Signed Classes (cont.)

13. You have to answer seven questions when you issue the keytool command on previous slide. User will grant access depending on them. Answers should be explanatory otherwise people will deny access What is your first and last name? [Unknown]: The WME Research Team What is the name of your organizational unit? [Unknown]: Web-based Mathematics Education What is the name of your organization? [Unknown]: Kent State University Computer Science What is the name of your City or Locality? [Unknown]: Kent What is the name of your State or Province? [Unknown]: OH What is the two-letter country code for this unit? [Unknown]: US Is CN=The WME Research Team, OU=Web-based Mathematics Education, O=Kent State University Computer Science, L=Kent, ST=OH, C=US correct? [no]: yes Applet Security: Signed Classes (cont.)

14. You have to answer two more questions when you issue the jarsigner command (step 4) Answers are from the keytool command (from step 2) Applet Security: Signed Classes (cont.) # jarsigner -keystore matheditkey.bin -signedjar mathedit_signed.jar mathedit_unsigned.jar mymathedit Enter Passphrase for keystore:pubmathedit Enter key password for mymathedit:keymathedit

15. Applet Security: Signed Classes (cont.) • If you successfully complete the process you will get the following message: Warning: The signer certificate will expire within six months. • You can always buy a permanent certificate that will allow your applet to run automatically without any warning message (next) • From VeriSign or some similar company…

16. Running the Applet • If you are a developer you will use a policy file like I showed together with the appletviewer tool • You don’t need to sign your applet until you publish it • To run the applet on your local machine: # appletviewer -J-Djava.security.policy=myappletpolicydeploy.html

19. Applet Security: Signed Classes (cont.)

20. JAVA and the Box Model • Currently I implemented square root and fraction using what I refer as “box model” • Box is from javax.swing.Box • private Component ra = Box.createRigidArea(new Dimension(myD+5,0)); • Creates an invisible Component

21. Fraction Model Box • Same idea but now starts with two rigid areas at the same time • private Component ra = Box.createRigidArea(new Dimension(myDim1+5,0)); • private Component dxra = Box.createRigidArea(new Dimension(0,myDim2));

22. Package & Class Hierarchy • I have currently 10 (img and mmlex are different) packages and 28 classes & interfaces • Main package is mathedit.cem.appmain • MyEditorApp.html • MyEditorApp.java • MyEditorPanel.java • MyEditorRenderer.java

23. Parser and SAX • I have a 750 lines MathML parser class, I wrote it converting from a C++ parser, not easy even to convert! • As I mentioned before plug & play, can allow to change the parser since each parser is a class obeying some rules (OOP interface concept) • public interface Parser { // . . . } • public class MMLParser implements Parser { // . . . }

24. Parser and SAX • Simple API for XML • Comes as part of JAVA core: import org.xml.sax.InputSource; public MyBox parse(InputSource source) throws Exception { DocumentBuilderFactory f = DocumentBuilderFactory.newInstance(); f.setValidating(true); f.setNamespaceAware(true); f.setIgnoringElementContentWhitespace(true); DocumentBuilder builder = f.newDocumentBuilder(); return parseDom(builder.parse(source)); // XML + MathML Parse } • Visit http://www.saxproject.org/ for more information

25. MathML Serializers (MMLSerializer.java) • In Java a Serializer converts a Java object to an XML representation using a specific XML processing mechanism • In WME MathEdit: convert what is visually on the swing panel (on the tool’s typing area) to XML • XML is MathML in this case • I have two serializers for now (one for square root and one for fraction) • Each added feature will require a new serializer

26. private StringserializeFraction(FracMyBox box) { String result = ""; if (attrs.length()>0) { result += ind()+"<"+tag("mstyle")+attrs+">"; indcnt++; } result += ind()+"<"+tag("mfrac"); if (box.getLineThickness()!=1) result += " linethickness=\""+box.getLineThickness()+"\""; result += ">"; indcnt++; result += serializeBox(box.getNumerator()) + serializeBox(box.getDenominator()); indcnt--; result += ind()+"</"+tag("mfrac")+">"; if (attrs.length()>0) { indcnt--; result += ind()+"</"+tag("mstyle")+">"; } return result; }

27. private StringserializeSqrt(SqrtMyBox box) { String result = ""; String attrs = checkForStyle(box); if (attrs.length()>0) { result += ind()+"<"+tag("mstyle")+attrs+">"; indcnt++; } result += ind()+"<"+tag("msqrt")+">"; indcnt++; if ( box.getChilds().size()==1 && (box.getBase().getType()==MyBox.rowBBox) ) result += serializeBox(box.getBase()); else { result += ind()+"<"+tag("mrow")+">"; indcnt++; for (int i=0; i<box.getChilds().size(); i++) result += serializeBox((MyBox)box.getChilds().elementAt(i)); indcnt--; result += ind()+"</"+tag("mrow")+">"; } indcnt--; result += ind()+"</"+tag("msqrt")+">"; if (attrs.length()>0) { indcnt--; result += ind()+"</"+tag("mstyle")+">"; } return result; }

28. API for WME Components • Other WME components like DMAD, Glossary Service, Bulletin Board need output of my program, which brings a need for API • API is also needed for ordinary WME pages • I don’t have any JavaScript API yet because the program is not even half way implemented • Two APIs are available through <param … /> • Output is simply a string containing full of MathML tags, attributes, and user input (see the demo)

29. <applet code="mathedit/cem/appmain/MyEditorApp.class“ archive="mathedit/mathedit_signed.jar" type="application/x-java-applet;version=1.5.0" width="430" height="300"> <param name="type" value="application/x-java-applet" /> (next slide covers HERE, the param API) </applet> Two files under mathedit directory which is in the root directory of the web page/site File 1: mathedit_signed.jar File 2: MyEditorApp.class How to Embed the Tool

30. Two Applet Parameters <param name="openMMLfile" value="ex02.mml" /> <param name="openMMLstr" value="<math><mrow><mfrac><mrow><mn>1</mn></mrow>…” /> • But there is a problem in the second param (why?) <param name="openMMLstr" value="&lt;math&gt;&lt;mrow&gt;&lt;mfrac&gt;&lt;mrow&gt;&lt;mn&gt;…” /> • JavaScript API should handle the problem

31. Interface Design

32. Interface Design (cont.)

33. Demo

34. Thank you • Questions? • Comments? • Suggestions?