Opentaps 2 User Interface Principles

With opentaps 2 Notes, our first application using the opentaps 2 framework, you can already see some of the important changes to the user interface to make it easier to use, faster and more responsive, and easier for developers to work with.

Client Sided User Interface

The user interface is now written entirely with HTML5/Javascript/CSS. There is no server side page generation, like you may have done with PHP, Perl, JSP, ASP, etc. The user interface is a "client" of opentaps 2. It gets data from opentaps 2 with the REST protocol and then lays out and updates the page with it.

Everything Happens on the Page

When you click on the button to create a new note, you get a message right away telling you the note was created (or there was a problem.) You don't have to submit your form and wait for a response from the server. When you create a new note, it automatically pops up on the left to the right hand side. When you start to scroll down the list of notes, the HTML page anticipates that you'll soon need to see more notes and fetches them from the server before you get to the end of the page, so you don't have to wait when you get there.

CSS and Div Layouts

All the layout is now done with CSS and divs. There are no more tables any more. This makes much easier to move things around on the page. For example, if I want to change the layout by moving the list of notes below the create note box, I just remove the float:left tag from the css section, and it changes from:

to:

No tables, no tr, td, and no need to change any server side script or code!

More Friendly Messages

Isn't it better when your computer is a little human? That's why we made message friendlier:

• I have created your note successfully.
• I couldn't find a user with key
• Is your input correct? I got this error when I tried to validate it:
• Oh no! I got an unexpected error: