|
HTML Formatting
One of the advantages of the HTML templating technique that webMathematica provides is that there is often little need to try and generate HTML formats with Mathematica programs. In fact many of the HTML formatting issues can be left to web designers who can use their standard tools. However, sometimes it is useful to apply some HTML formatting functions to Mathematica expressions. This is particularly the case for HTML tables. In order to allow this, an HTML utility package is provided with webMathematica that supports Table formatting functions. This section will explore the use of this HTML formatting.
The HTML Package
The HTML functions are contained in a package, MSP`HTML`, which is installed in the webMathematica layout. If you wish to use it in Mathematica outside of webMathematica, you will need to copy the package into your AddOns/Applications directory, this is described in a previous section.
HTMLTableForm
As explained above, the MSP`HTML` package is available for webMathematica and can be installed into regular Mathematica. It can then be loaded as shown below.
In[1]:=
The function HTMLTableForm takes an input and formats it into an HTML table.
In[2]:=
Out[2]="<table border='1'>\n <tr>\n <td>a</td>\n <td>b</td>\n <td>c</td>\n </tr>\n <tr>\n <td>d</td>\n <td>e</td>\n td>f</td>\n </tr>\n</table>"<table border='1'>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
It takes a TableHeadings option which works similar to that of TableForm.
In[3]:=
Out[3]="<table border='1'>\n <th/>\n <th>c1</th>\n <th>c2</th>\n <th>c3</th>\n <tr>\n <th>r1</th>\n <td>a</td>\n td>b</td>\n <td>c</td>\n </tr>\n <tr>\n <th>r2</th>\n <td>d</td>\n <td>e</td>\n <td>f</td>\n /tr>\n</table>"<table border='1'>
<th/>
<th>c1</th>
<th>c2</th>
<th>c3</th>
<tr>
<th>r1</th>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<th>r2</th>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
If you wish to apply special formatting to each element, you can provide a formatting function as a second element. The formatting function must return a string. Here every element is formatted into MathML.
In[4]:=
Out[4]="<table border='1'>\n <tr>\n <td><math xmlns='http://www.w3.org/1998/Math/MathML'>\n <semantics>\n <msup>\n mi>x</mi>\n <mn>2</mn>\n </msup>\n <annotation-xml encoding='MathML-Content'>\n <apply>\n <power/>\n ci>x</ci>\n <cn type='integer'>2</cn>\n </apply>\n </annotation-xml>\n </semantics>\n</math></td>\n td><math xmlns='http://www.w3.org/1998/Math/MathML'>\n <semantics>\n <mrow>\n <mi>sin</mi>\n mo>⁡</mo>\n <mo>(</mo>\n <mi>x</mi>\n <mo>)</mo>\n </mrow>\n <annotation-xml
encoding='MathML-Content'>\n <apply>\n <sin/>\n <ci>x</ci>\n </apply>\n </annotation-xml>\n /semantics>\n</math></td>\n </tr>\n</table>"<table border='1'>
<tr>
<td><math xmlns='http://www.w3.org/1998/Math/MathML'>
<semantics>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<annotation-xml encoding='MathML-Content'>
<apply>
<power/>
<ci>x</ci>
<cn type='integer'>2</cn>
</apply>
</annotation-xml>
</semantics>
</math></td>
<td><math xmlns='http://www.w3.org/1998/Math/MathML'>
<semantics>
<mrow>
<mi>sin</mi>
<mo>⁡</mo>
<mo>(</mo>
<mi>x</mi>
<mo>)</mo>
</mrow>
<annotation-xml encoding='MathML-Content'>
<apply>
<sin/>
<ci>x</ci>
</apply>
</annotation-xml>
</semantics>
</math></td>
</tr>
</table>
The default formatting function for HTMLTableForm is HTMLFormat, which is described below.
Any string arguments to HTMLTableForm are assumed to be already formatted and no more formatting is applied. This allows it to take the output of other MSP functions such as MSPShow or MSPFormat.
HTMLFormat
As explained above, the MSP`HTML` package is available for webMathematica and can be installed into regular Mathematica. It can then be loaded as shown below.
In[1]:=
The function HTMLFormat provides some useful formatting functions into HTML. It is suitable for formatting small expressions such as numbers as shown below.
In[2]:=
Out[2]="x<sup>2</sup>"x<sup>2</sup>
In[3]:=
Out[3]="3.6288 10<sup>6</sup>"3.6288 10<sup>6</sup>
It is less suitable for formatting large expressions, since everything will come out in InputForm.
In[4]:=
Out[4]=(1 - (1 - (1 - (1 - (1 - x)^(-1))^(-1))^(-1))^(-1))^(-1) 1
---------------------
1
1 - -----------------
1
1 - -------------
1
1 - ---------
1
1 - -----
1 - x
In[5]:=
Out[5]="1 - 1 - 1 - 1 - 1 - x<sup>-1</sup><sup>-1</sup><sup>-1</sup><
sup>-1</sup><sup>-1</sup>"1 - 1 - 1 - 1 - 1 - x<sup>-1</sup><sup>-1</sup><sup>-1</sup><s
up>-1</sup><sup>-1</sup>
For larger expressions it is recommended to use one of the versions of the formatting function MSPFormat to gain a result in an image format or MathML.
HTMLSelect
As explained above, the MSP`HTML` package is available for webMathematica and can be installed into regular Mathematica. It can then be loaded as shown below.
In[1]:=
The function HTMLSelect provides a useful way to generate select tags with webMathematica. It takes a list of the different options, and the name to be used when the selection is submitted. Its operation is shown below.
In[2]:=
Out[2]=
It is also possible to give a default value, by setting the third argument.
In[3]:=
Out[3]=
webMathematica Examples
A number of webMathematica examples are provided that make use of the HTML formatting package. These are shown in this section.
Table Formatting
A first simple example is Table.jsp, the source for which is available in webMathematica/Examples/HTML. If you installed the webMathematica webapp as described above, you should be able to connect to it via http://localhost:8080/webMathematica/Examples/HTML/Table.jsp. (You may have some other URL for accessing servlets.)
A second example is RegressTable.jsp, the source for which is available in webMathematica/Examples/HTML. If you installed webMathematica as described above, you should be able to connect to it via http://localhost:8080/webMathematica/Examples/HTML/RegressTable.jsp. (You may have some other URL for accessing servlets.) A section of the contents are shown below.
<msp:evaluate>
Needs["MSP`HTML`"];
Needs["Statistics`LinearRegression`"];
Needs["Statistics`Common`RegressionCommon`"];
</msp:evaluate>
<msp:evaluate>
data = {{0.055, 90}, {0.091, 97}, {0.138, 107},
{0.167, 124}, {0.182, 142}, {0.211, 150},
{0.232, 172}, {0.248, 189}, {0.284, 209},
{0.351, 253}};
regress = Chop[ Regress[data, {1, x^2}, x], 10^-6];
pTable = ParameterTable /. regress ;
aTable = ANOVATable /. regress ;
rSq = RSquared /. regress ;
aSq = AdjustedRSquared /. regress ;
eVar = EstimatedVariance /. regress ;
</msp:evaluate>
<br/>
<msp:evaluate>
HTMLTableForm[ MSPShow[ ListPlot[ data, Frame -> True]], TableHeadings -> {"Data to be fitted"}]
</msp:evaluate>
<br/>
<msp:evaluate>
HTMLTableForm[ HTMLTableForm[ pTable], TableAttributes -> {}, TableHeadings->{"ParameterTable"}]
</msp:evaluate>
This shows how the packages are loaded. Note how the sub-package must be loaded as well. The data is assigned (typically this would be loaded in some dynamic fashion), and the regression analysis is carried out. Two uses of HTMLTableForm then follow. In the first, the result of MSPShow is put into a table with a heading. This is a convenient way to attach a border and heading to something. In the second, the parameter table, pTable, is put into a table. This table is itself put into another table to get a heading.
Select Formatting
An example of the use of HTMLSelect is in Select.jsp, the source for which is available in webMathematica/Examples/HTML. If you installed the webMathematica webapp as described above, you should be able to connect to it via http://localhost:8080/webMathematica/Examples/HTML/Select.jsp. (You may have some other URL for accessing servlets.) The source is shown below.
<form action="Select.jsp" method="post">
<msp:allocateKernel>
<msp:evaluate>
Needs["MSP`HTML`"];
days = {"Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"};
day = Null;
If[ MSPValueQ[ $$daySelected],
dayPT = MSPToExpression[ $$daySelected];
day = Part[ days, dayPT]];
</msp:evaluate>
<msp:evaluate>
HTMLSelect[ days, daySelected, day]
</msp:evaluate>
<msp:evaluate>
If[ day =!= Null,
dayPT = Mod[ dayPT+1,7,1] ;
"The day after the day selected is " <> Part[ days, dayPT]]
</msp:evaluate>
</msp:allocateKernel>
<br>
<br>
<input type="submit" name="btnSubmit" value="Evaluate">
</form>
In this example the input parameter $$daySelected is inspected and used to determine which day was selected. The second evaluation actually puts down the select tag, showing how easy this is. The last evaluation computes the day after the day selected by incrementing the dayPT variable and then take its modulus with respect to 7 with an offset of 1.
     
| 
