Changes
Updated writeup
In addition, navigational menus can often contain submenus for a structured hierarchy. This requires additional javascript coding to work properly and further detracts the web page designer from concentrating on accomplishing his task; namely, working on the actual ''design'' of the menu.
The problem that we seek to address is that designing navigational elements in HTML is needlessly complicated and requires too much plumbing. Therefore, we propose have implemented a language with a special syntax designed specifically to make this process easy and fun.
For comparison, here's an example of a very simple group of navigational links:
*Fun | /fun/</nowiki></pre>
The formatting definition immediately preceding the list of items contains CSS properties in <tt>property: value</tt> format separated by semicolons. <tt>hover</tt> is a special keyword whose value is another set of definitions applied to hovered navbar elements. <tt>layout</tt> is another special keyword whose value is either <tt>horizontal</tt> or <tt>vertical</tt> and controls whether the navbar elements are shown side-by-side or one above the other, respectively. The navbar elements are delimited by a newline and an asterisk and consist of a string of text (for the title of the navbar item) followed by a pipe and then the URL for the item. If the developer wants to include a pipe as part of the item title, the title simply needs to be enclosed in quotes. The URL is optional and leaving it out results in an item which does not link to anything. This can be useful for drop-down menus.
Creating hierarchical menus is simple. For example:
By default, all the submenus inherit the styles of their parents. If this is not desired, properties to override can be specified in the curly braces. The <tt>direction</tt> keyword shown above simply controls where the submenu appears relative to its parent item. In the example above, the "Submenu item one/two/three" elements appear below the navbar containing "Item one/two", and the "Subsubmenu item a" appears to the left of that menu.
This problem is worth solving because it allows web developers to save time and not have to deal with debugging browser issues. Our library will allow allows developers to make beautiful-looking text-based navigation bars in just a few seconds and the syntax is designed to be intuitive such that new features take very little time to learn (the content description element) while existing features will be familiar to those who have worked with this before (the formatting elements). It also improves the user experience, as the code we generate will be is accessible to users with disabilities and will be is designed in such a way that it degrades nicely across browser versions and vendors. Thus we are actually solving two problems at once: a development problem, in which creating well-functioning and nice-looking navigational elements is difficult, and a user interface problem, in which users are often presented with poorly-designed navigational tools.
==Study a language that solves a similar problem and describe it in this homework==
There are not currently any languages or libraries that solve this problem. The closest thing to it is an HTML form application that takes in a few parameters and a list of name-link pairs and spits out the HTML, CSS, and JavaScript code to draw the described navigation bar. Although this does allow users to create navigation bars quickly and easily, it has several limitations. The first is the fact that the navigation bar can only be customized using the very limited set of parameters the creators of that program allow you to specify. Our program will give gives users access to a much broader set of CSS attributes. Secondly, the navigation bar is inconvenient to change down the road; the customer would have to essentially create a new navigation bar from scratch, find the code of the original navigation bar, and replace it. Our program has a file for the navigation bar that can easily be modified, and since the navigation bar is generated dynamically, the changes can take effect immediately.
==What features specifically will your language support==
==Decide on the implementation==
Choose two alternative implementations, and compare them along these aspects. For each aspect, write a paragraph. Your two approaches may be identical in some aspects.
* frontend: How will you translate the input (source) program into the program's internal presentation (often, this is an AST)? You know that this can be done with a parser or with an embedded DSL, as in rake or protovis. Some languages may not need an internal representation.
:The decision to go with a parsed input rather than an embedded DSL was not one we made lightly. The primary advantage of the embedded DSL is simplicity; it doesn't require us to go through the trouble of writing a grammar for the input. However, that simplicity comes at the price of flexibility; the parsed input can be specified in any format we choose, whereas the input of an embedded DSL must fit into the syntax of the parent language. Considering that the main goal of this language is to provide a clean and simple syntax, restricting ourselves to the syntax of the parent language would clearly be counterproductive. We decided to use the JS/CC parser generator, since it provides a simple online interface, supports grammars similar to those used in CS164, and outputs a stand-alone JavaScript parser file that can be included in our distribution as a library. This parser process the input to the program and outputs JavaScript objects for the interpreter.
* the core language: Are some features built as sugar on top of a simpler-to-implement language? If yes, what is that core language, and how will you desugar those features?:The purpose of this language is to provide a convenient and concise way for users to create CSS navigation bars. As such, it must be implemented entirely as sugar on top of CSS , HTML, and HTMLJavaScript. As described above, the input to the language is a hierarchical list of menu items with associated attribute lists. The program translates the input into the CSS, HTML, and JavaScript code needed to create and arrange the bar properly.* internal representation. What are the alternative ways of representing the program for the interpreter or compiler?::We considered using both an AST and objects for the interpreter's internal representation of the input. In the end, we decided that objects are better suited to the data. Our input Although navigation bars are hierarchical, and hence seem to lend themselves to ASTs, the hierarchy is not going to come explicit in the form of a deeply-nested hierarchysyntax. While this makes the input files much easier to modify and extend, so it also makes it difficult for the parser to create an explicit tree structure is unnecessary; from the syntax. Hence, we process the input is a collection of data pointslines as individual objects, each of which has a set of associated attributes. This lends itself very well and allow the interpreter to object representationdeal with the implicit tree structure.* interpreter/compiler: how will you interpret or compile the language? Is there a prepossessing step, eg translation from AST to bytecode? If you want to generate code, what is the target language? Why did you choose that language?
:The interpretation is fairly straightforward; the interpreter goes through the object representation of the input, generating the appropriate CSS and HTML as it goes.
* debugging: How will you debug the implementation of the language?
:Our distribution is packaged with an HTML page with a text box. You can type an input program into the text box, and the output navigation bar is displayed below. If there is an error, the error message is displayed instead of the navigation bar.