Skip to content

November 14, 2009

2

Ajax/Prototype/Prototype-UI: Creating a modal busy screen

by Joe Kuan

Prototype-UIWhile I was developing a web based application, one of the operations took rather long to accomplish. So I was looking for ways to create a modal busy screen with spinning image at the center. Most of them involves quite a bit of code. Then I decided to see whether I can make use of Prototype-UI to create a modal busy page and it works!! Amazingly, it doesn’t involve a lot of CSS and Javascript code either. Here are the steps:


1. Get your favourite animated spinning image

busy imageFor me, I used Ajaxload – Ajax loading gif generator to create my animated busy image. It is a great site with huge selection of spinning images in different shapes and your choice of colors.

2. Build a new CSS theme style for Prototype-UI Window

We need to create a custom made CSS theme for this new style of window which it doesn’t have any frames and buttons (maximise, minimise and close). The CSS code is very straightforward, just copy few bits from another theme. The only bits we need are the ‘overlay’ and ‘content’. Here is the CSS definition of busy.css.

.busy .content {
    background:transparent;
    color:white;
    font:normal 11px/1em Verdana, Arial, sans-serif;
    overflow:auto;
}

.busy_overlay {
    background-color: #FFF;
    filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}

3. Create an UI Window with the spinning image

Finally, all we need to do is to create a modal UI.Window with the spinning image as the content. Here is the short code to switch on/off the busy page:

var busy_page = null;
function set_busy_screen() {
  busy_page = new UI.Window({
    resizable: false,
    theme: 'busy',
    draggabe: false,
    width: 32,
    height: 32
  })
  .setContent("<div style='margin-left:40%' ><img src='../images/ajax-loader.gif' border=0></div>")
  .show(true)
  .center();
}

function unset_busy_screen() {
  if (busy_page) {
    busy_page.close();
    busy_page = null;
  }
}

That’s all!!! Remember to include the busy.css in the page.

<script language="JavaScript" type="text/javascript" src="./js/prototype.js"></script>
<script language="javascript" type="text/javascript" src="./js/prototype-ui/prototype-ui.packed.js"></script>
<script language="javascript" type="text/javascript" src="./js/prototype-ui/window.packed.js"></script>
<link type="text/css" rel="stylesheet" href="./css/themes/window/busy.css"/>

Screenshot
Here is what it looks like on Safari. It also works on Firefox and IE 8.

Screenshot of busy modal page

I work for iTrinegy. Here are my other Prototype-UI and Prototype blogs

Advertisements
2 Comments Post a comment
  1. Denis
    Nov 18 2011

    Hi Joe,

    thanks for sharing this with us as this looks very cool. Nevertheless I could not find the prototype-ui.packed.js lib on the prototype web site…
    Could you help?
    Thanks! :)

    Reply
    • Joe Kuan
      Nov 30 2011

      Sorry, I have been insanely busy. Well, let me know if u r still looking for it.

      However, I strongly recommend you to try ExtJS. If you know Prototype-UI, it shouldn’t be too much uphill struggle to learn ExtJS. ExtJS has a complete set of UI that you don’t need to worry about any CSS. ExtJS is highly OO and modular. Their Store, Grid, Form classes and event binding makes programming web app so much easier. With ExtJS, you don’t even need to program PHP + XHTML + CSS on the GUI, which I found tedious. Your thinking will be purely based on the application logic with Javascript programming and PHP on the server side operation.

      Also ExtJS support is world class, a different league comparing to Prototype-UI (pretty outdated).

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: