HTML+JavaScript GUI Advice

Question

I'm working on a music editor/sequencer app that will be written in JavaScript+HTML5 and will make use of the canvas element and Chrome's Web Audio API (I already have a simple prototype working).

One of the things I'm not so sure about is how to implement the GUI for this. It will need to have many different views, and I'd like to perhaps have each view in a different clickable "tab", with one tab in the foreground at a given time and all the others hidden. I'm just not sure how to go about implementing all these tabs.

Would it be better to implement each tab as a different HTML layer and have buttons control which layer shows up on top? Would it be better instead to (re)generate HTML on the fly when the tab buttons are pressed?

Your advice is appreciated.

Answer 1

Would it be better to implement each tab as a different HTML layer and have buttons control which layer shows up on top? Would it be better instead to (re)generate HTML on the fly when the tab buttons are pressed?

I would lean towards generating the content once and showing/hiding it on demand especially if the majority of work is done in the browser and there are no synchronous requests being made to a server when interacting with elements on the page.^{See footnote 1}

When showing a tab's contents...
Assuming the content of each tab generates quickly, you can make your application more efficient by only creating the content for the tab when it is requested the first time. This way, if the tab is never accessed no resources are used.

When hiding a tab's contents...
When working with multimedia you may need to perform additional actions when you hide content. For example, a video won't stop playing just because you hide it. For your audio application you may need to stop playback of the current sequence.

There are many tab controls available such as jQuery UI tabs (free) and Sliding Tabs (licensed but inexpensive).

Other Scenarios
Tabs should be used for switching between major blocks of content like documents (e.g. browser tabs) and/or regularly used functionality (e.g. a personnel form which has a tab for contact information and another for employment history). Other scenarios may be better suited to a dialog (modal or non-modal).

Using the audio example, if you had a button labeled "tempo", I would expect it to open a small dialog window on top of my current view rather than taking me to a new tab. Roland's workstation keyboards use this paradigm. Major content replaces the current view, but settings/configuration windows usually popup atop the existing view.

jQuery UI also has a dialog plugin for this purpose. If you are JavaScript savvy and targeting newer browsers, it's not that hard to write your own simple dialog.

---

_{1 Generating content on the fly may still be perfectly acceptable with an interactive client-server relationship, but it introduces additional considerations, such as the synchronization of what is in the browser with the data model on the server (if any), the submission of unneeded form fields (increasing the size of the request), overall page size, etc.}

Answer 2

I would suggest checking out the JQuery UI library. More specifically, the tabs functionality that it provides, http://jqueryui.com/demos/tabs/.

Simple rule of thumb for loading data into your tabs. Small and Simple, load it up front. Large and Complex, load it on demand. When in doubt, load it on demand.