Homework SourseInstructions The first programming project involves writing
Instructions
The first programming project involves writing a program that parses, using recursive descent, a GUI definition language defined in an input file and generates the GUI that it defines. The grammar for this language is defined below:
In the above grammar, the red symbols are nonterminals, the blue symbols are tokens and the black punctuation symbols are BNF metasymbols. Among the tokens those in title case are keywords. The character literals are punctuation tokens.
Below is an explanation of the meaning of some of the symbols in the above productions that should help you understand the actions that are to be performed when each of the productions is parsed:
In the window production the string is name that is to appear in the top border of the window and the two numbers are the width and height of the window
In the production for layout_type that define the grid layout, the first two numbers represent the number of rows and columns, and the optional next two the horizontal and vertical gaps
In the production for widget that defines a button, the string is the name of the button
In the production for widget that defines a label, the string is text that is to be placed in the label
In the production for widget that defines a text field, the number is the width of the text field
In the production for radio_button, the string is the label of the button
You parser should properly handle the fact that panels can be nested in other panels. Recursive productions must be implemented using recursion. Lexical and syntactical errors should be detected and reported (the first error only; after reporting the first error the program must exit gracefully).
Below is an example of an input file:
Just to give you an idea where that input file came from, the above input file corresponds to the GUI shown below:
However, please keep in mind that you are NOT required to re-create the GUI that corresponds to the input file. Instead, you are only required to:
1. Implement a lexer capable of recognizing all the terminal symbols of the grammar (tokens/lexemes - those in blue)
2. Implement a recursive descent parser that (using the lexer from 1.) will be able to parse the input file and detect a syntax error (the first one is enough, then the parser should exit gracefully)
3. As a result of parsing the input file, an output file will be generated, reporting the parsing steps followed by the parser in a manner similar to the one described by Sebesta (10th edition) on pages 181-186.
Notes:
- You can implement the parser for this grammar in C, C++, Java or C#
9 6 3 8 0Solution
This is the codes:
calculator.js
calc_array = new Array();
var calcul=0;
var pas_ch=0;
function $id(id)
{
return document.getElementById(id);
}
function f_calc(id,n)
{
if(n==\'ce\')
{
init_calc(id);
}
else if(n==\'=\')
{
if(calc_array[id][0]!=\'=\' && calc_array[id][1]!=1)
{
eval(\'calcul=\'+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+\';\');
calc_array[id][0] = \'=\';
$id(id+\'_result\').value=calcul;
calc_array[id][2]=calcul;
calc_array[id][3]=0;
}
}
else if(n==\'+-\')
{
$id(id+\'_result\').value=$id(id+\'_result\').value*(-1);
if(calc_array[id][0]==\'=\')
{
calc_array[id][2] = $id(id+\'_result\').value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id+\'_result\').value;
}
pas_ch = 1;
}
else if(n==\'nbs\')
{
if($id(id+\'_result\').value<10 && $id(id+\'_result\').value>-10)
{
$id(id+\'_result\').value=0;
}
else
{
$id(id+\'_result\').value=$id(id+\'_result\').value.slice(0,$id(id+\'_result\').value.length-1);
}
if(calc_array[id][0]==\'=\')
{
calc_array[id][2] = $id(id+\'_result\').value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id+\'_result\').value;
}
}
else
{
if(calc_array[id][0]!=\'=\' && calc_array[id][1]!=1)
{
eval(\'calcul=\'+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+\';\');
$id(id+\'_result\').value=calcul;
calc_array[id][2]=calcul;
calc_array[id][3]=0;
}
calc_array[id][0] = n;
}
if(pas_ch==0)
{
calc_array[id][1] = 1;
}
else
{
pas_ch=0;
}
document.getElementById(id+\'_result\').focus();
return true;
}
function add_calc(id,n)
{
if(calc_array[id][1]==1)
{
$id(id+\'_result\').value=n;
}
else
{
$id(id+\'_result\').value+=n;
}
if(calc_array[id][0]==\'=\')
{
calc_array[id][2] = $id(id+\'_result\').value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id+\'_result\').value;
}
calc_array[id][1] = 0;
document.getElementById(id+\'_result\').focus();
return true;
}
function init_calc(id)
{
$id(id+\'_result\').value=0;
calc_array[id] = new Array(\'=\',1,\'0\',\'0\',0);
document.getElementById(id+\'_result\').focus();
return true;
}
function key_detect_calc(id,evt)
{
if((evt.keyCode>95) && (evt.keyCode<106))
{
var nbr = evt.keyCode-96;
add_calc(id,nbr);
}
else if((evt.keyCode>47) && (evt.keyCode<58))
{
var nbr = evt.keyCode-48;
add_calc(id,nbr);
}
else if(evt.keyCode==107)
{
f_calc(id,\'+\');
}
else if(evt.keyCode==109)
{
f_calc(id,\'-\');
}
else if(evt.keyCode==106)
{
f_calc(id,\'*\');
}
else if(evt.keyCode==111)
{
f_calc(id,\'\');
}
else if(evt.keyCode==110)
{
add_calc(id,\'.\');
}
else if(evt.keyCode==190)
{
add_calc(id,\'.\');
}
else if(evt.keyCode==188)
{
add_calc(id,\'.\');
}
else if(evt.keyCode==13)
{
f_calc(id,\'=\');
}
else if(evt.keyCode==46)
{
f_calc(id,\'ce\');
}
else if(evt.keyCode==8)
{
f_calc(id,\'nbs\');
}
else if(evt.keyCode==27)
{
f_calc(id,\'ce\');
}
return true;
}
calculator.css
.calculator
{
width:300px;
height:300px;
background-color:#eeeeee;
border:2px solid #CCCCCC;
margin:auto;
padding-left:5px;
padding-bottom:5px;
}
.calculator td
{
height:16.66%;
}
.calc_td_result
{
text-align:center;
}
.calc_result
{
width:90%;
text-align:right;
}
.calc_td_calculs
{
text-align:center;
}
.calc_calculs
{
width:90%;
text-align:left;
}
.calc_td_btn
{
width:25%;
height:100%;
}
.calc_btn
{
width:90%;
height:90%;
font-size:20px;
}
calculator.html
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Javascript Calculator</title>
<script type=\"text/javascript\" src=\"calculator.js\"></script>
<link rel=\"stylesheet\" media=\"screen, print, handheld\" type=\"text/css\" href=\"calculator.css\" />
</head>
<body>
<table class=\"calculator\" id=\"calc\">
<tr>
<td colspan=\"4\" class=\"calc_td_result\">
<input type=\"text\" readonly=\"readonly\" name=\"calc_result\" id=\"calc_result\" class=\"calc_result\" onkeydown=\"javascript:key_detect_calc(\'calc\',event);\" />
</td>
</tr>
<tr>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"CE\" onclick=\"javascript:f_calc(\'calc\',\'ce\');\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"←\" onclick=\"javascript:f_calc(\'calc\',\'nbs\');\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"%\" onclick=\"javascript:f_calc(\'calc\',\'%\');\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"+\" onclick=\"javascript:f_calc(\'calc\',\'+\');\" />
</td>
</tr>
<tr>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"7\" onclick=\"javascript:add_calc(\'calc\',7);\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"8\" onclick=\"javascript:add_calc(\'calc\',8);\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"9\" onclick=\"javascript:add_calc(\'calc\',9);\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"-\" onclick=\"javascript:f_calc(\'calc\',\'-\');\" />
</td>
</tr>
<tr>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"4\" onclick=\"javascript:add_calc(\'calc\',4);\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"5\" onclick=\"javascript:add_calc(\'calc\',5);\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"6\" onclick=\"javascript:add_calc(\'calc\',6);\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"x\" onclick=\"javascript:f_calc(\'calc\',\'*\');\" />
</td>
</tr>
<tr>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"1\" onclick=\"javascript:add_calc(\'calc\',1);\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"2\" onclick=\"javascript:add_calc(\'calc\',2);\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"3\" onclick=\"javascript:add_calc(\'calc\',3);\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"÷\" onclick=\"javascript:f_calc(\'calc\',\'\');\" />
</td>
</tr>
<tr>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"0\" onclick=\"javascript:add_calc(\'calc\',0);\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"±\" onclick=\"javascript:f_calc(\'calc\',\'+-\');\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\",\" onclick=\"javascript:add_calc(\'calc\',\'.\');\" />
</td>
<td class=\"calc_td_btn\">
<input type=\"button\" class=\"calc_btn\" value=\"=\" onclick=\"javascript:f_calc(\'calc\',\'=\');\" />
</td>
</tr>
</table>
<script type=\"text/javascript\">
document.getElementById(\'calc\').onload=init_calc(\'calc\');
</script>
</body>
</html>
