My Library Examples

Many additional examples can be found on the Build Test page.

This document uses a minified version of a custom build that weighs approximately 76K. The minified versions of the demonstrated add-ons weigh between 2 and 7K. As always, reported sizes are pre-GZIP-compression as GZIP is not a constant on the Web and compressed sizes are less than ideal for comparative purposes (unless you manually GZIP every asset you compare).

Audio

Where permitted, the Audio module, in conjunction with the Playlist add-on can enhance the following examples. When enabled, the API.playEventSound function is called to play specified sound clips on alert and toast operations. Applications can use the API.addEventSound and API.removeEventSound functions to create audio schemes.

Note in browsers that use plug-ins for audio (e.g. most but IE), performance is limited to the ability of the plug-in.

Event Sounds
(Code will appear when event sounds are enabled)
Background Music
Track
(Code will appear when background music is enabled)

Add-ons

This section demonstrates a few of the add-ons available for My Library.

Alert

The Alert add-on is a basic alert replacement, which was originally written to demonstrate progressive enhancement on the builder test page. At one point efforts were undertaken to add additional functionality to allow it to serve as a confirm replacement, as well as a customizable dialog. A prompt feature will be added shortly, as well as property sheets (tabbed dialogs) and wizards with validation callbacks.

Styling

Example styles for the alert element are available for download or study here. It will be enhanced by the use of a skin. The curtain fade-in effect in this example is accomplished with only skin CSS and only works in some browsers (e.g. Chrome, Safari, iPhone/Pod/Pad).

div.alert div.content {
	text-align:center;
	padding:1em
}
div.alert fieldset {
	text-align:center;
	border:none;
	white-space:nowrap
}
div.alert input.commandbutton {
	width:5em;
	margin-left:.25em	
}
div.alert input.close {
	margin-left:0
}
div.alert div.icon {
	position:absolute;
	left:2px;
	top:.2em
}
div.alert div.movehandle {
	padding-right:20px
}
div.maxminbuttons div.movehandle {
	padding-right:60px
}
div.fixable div.movehandle {
	padding-right:42px
}
div.fixable.maxminbuttons div.movehandle {
	padding-right:82px
}
div.nocaptionbuttons div.movehandle {
	padding-right:2px
}
div.iconic div.movehandle {
	padding-left:20px
}
div.alert div.maximize {
	right:20px
}
div.alert div.fix {
	right:62px
}
div.nomaxminbuttons div.fix {
	right:22px
}
div.alert div.minimize {
	right:40px
}
div.alert div.close {
	right:0px
}

Modality

Care has been taken to enforce real modality for this application. This is accomplished by attaching focus listeners to links and form controls.

var focusListener = function(e) {
  if (API.isAlertModal()) {
    window.setTimeout(function() {
      API.focusAlert();
    }, 1);
    return API.cancelDefault(e);
  }
};

To draw further attention to the plight of the user trying to break out of the modal alert, the flashAlert function can be called in addition to focusAlert.

Note that the dialog type does not display an actual dialog in this example, but plain text. The Set Dirty buttons allow simulation of data changes by its controls and/or the controls of a successor dialog. The Apply button enables and, in the latter case, the OK button changes to Close and the Cancel button is disabled). A dialog application would pass controls as HTML (html option) or DOM nodes (nodes option). In the former case, it would attach change listeners in the onopen callback. In either case, it would call the setAlertDirty API function to signal user changes. When dirty, the onsave callback is called on a positive outcome (OK button) or when the Apply button is pressed. Also note that, for dialogs, the escape key does not trigger a negative outcome (cancel button) but simply closes the dialog, calling the onclose callback. This is important as applications should always abandon changes on cancel, but should prompt the user to save any pending changes on close.

Alert
Note that changes are only applied on show.
Configuration seconds
Position
pxpx
Buttons
Class
Skin
The skin can be changed with a View command in some browsers. Applications can use the setActiveStyleSheet API function, as seen in the Toolbar example.
CSS Transitions
Note that CSS transitions do not work in all browsers. In this example, only the curtain has CSS transitions declared in the skins. Switching between CSS and scripted transitions is an experimental feature.
seconds
seconds
Test Messages
(Code will appear hear when popup is shown)

Scrolling Anchors

The Scrolling Anchors add-on enables scrolling effects for navigation within the document. For this example, it is started automatically. See the table of contents for links that navigate to anchors.

Note that the updateHash option to change the hash at the end of the scroll (enabled by default as it is typically the desired behavior) will disallow some browsers (e.g. IE6/7), degrading back to standard navigation. This is a better strategy for such an enhancement than using hacks involving extraneous iframe elements. The functions return false in these cases. Like any script that modifies the hash (e.g. Ajax "history managers" and "back button fixers"), this add-on is not normally recommended, except as an example (or perhaps for a game application).

API.attachLinkScrollEvents({
  duration: 1000,
  ease: API.ease.circle
});

This example allows interruption of the animation by the mousewheel.

API.attachLinkScrollEvents({
  duration: 1000,
  ease: API.ease.circle,
  wheelInterrupts: true
});

This example will not update the hash on navigation.

API.attachLinkScrollEvents({
  duration: 1000,
  ease: API.ease.circle,
  updateHash: false
});

This example will animate on back and forward actions when possible.

API.attachLinkScrollEvents({
  duration: 1000,
  ease: API.ease.circle,
  animateBackForward: true
});

The Sidebar widgets are panels arranged around the edges of the viewport. The inner rectangle created can be retrieved with the getWorkspaceRectangle API function and is used for centering and maximizing other widgets (e.g. alert).

Create
(Code will appear on creation)

Toast

The Toast widget corners elements.

Create
Options
seconds
(Code will appear on creation)

Toolbar

Blues
Doom
Froggy
Hades

This lovely toolbar was created from static markup with the Toolbar add-on. By default it is disabled. When skin changing features are available, it is enabled. When scripting is disabled, it still functions as an indicator of the current skin. Double-click to display an alert.

var el = enhanceToolbar(el, {
  oncustomize: function() {
    API.alert('No customization available', {
      className: 'alert caution rounded shadowed',
      title: 'Toolbar',
      effects: API.effects && API.effects.drop,
      ease: API.ease && API.ease.bounce
    });
  },
  onclick: function(el, elButton) {
   API.setActiveStyleSheet(elButton.id.substring(4));
   if (API.setWaiProperty) {
     API.forEach(getToolbarButtons(el), function(el) {
       if (el != elButton) {
         API.setWaiProperty(el, 'checked', 'false');
       }
     });
     API.setWaiProperty(elButton, 'checked', 'true');
   }
 }
});
API.attachDragToToolbar(el);

Application

What a cool application toolbar!

API.enhanceToolbar(API.getEBI('apptoolbar'), {
 onclick:function(el, elButton) {
  myAlert(elButton.id.slice(10), {
   title:'Application',
   className:'alert wrap rounded shadowed'
  });
 } 
});

As Tabstrip

This
is
a
Test
This is a test

And this stunning entry was created from static markup with the Toolbar add-on. It is two toolbars stacked.

enhanceToolbar(el, {
  radio: true,
  onclick: function(el, elButton, elPreviousButton) {
    API.forEach(API.getToolbarButtons(el), function(el) {
      var elContent = API.getEBI(el.id + 'content');

      if (el.id == elButton.id) {
        API.addClass(elContent, 'highlighted');
        API.removeClass(elContent, 'lowlighted');
      } else {
        API.removeClass(elContent, 'highlighted');
        API.removeClass(elContent, 'lowlighted');
      }
    });
    if (elPreviousButton) {
       el = API.getEBI(elPreviousButton.id + 'content');
       API.addClass(el, 'lowlighted');
    }
  }
});
Advanced
This
is
a
Test
This is a test

This example demonstrates canceling the default click action.

if (API.alert) {
  myConfirm = function(text, options, cb) {
    options.onpositive = cb;
    options.decision = 'confirm';
    API.alert(text, options);
  };
} else if (API.isHostMethod(window, 'confirm')) {
  myConfirm = function(text, options, cb) {
    if (window.confirm(text)) {
      cb();
    }
  };
}

enhanceToolbar(el, {
  radio: true,
  onclick: function(el, elButton, elPreviousButton) {
    if (elButton == elPreviousButton) {
      return;
    }

    var fn = function() {
      API.forEach(API.getToolbarButtons(el), function(el) {
        var elContent = API.getEBI(el.id + 'content');

        API.removeClass(elContent, 'lowlighted');
        if (el.id == elButton.id) {
          API.addClass(elContent, 'highlighted');
        } else {
          API.removeClass(elContent, 'highlighted');
        }
      });
      API.checkControl(elPreviousButton, false);
      API.checkControl(elButton);

      if (elPreviousButton) {
        el = API.getEBI(elPreviousButton.id + 'content');
        API.addClass(el, 'lowlighted');
      }               
    };
    if (API.getEBI('tabstripconfirm').checked) {
      myConfirm('Changing to tab ' + elButton.id.slice(7), {
        title:'Tabstrip',
        effects:API.effects && API.effects.drop,
        ease:API.ease && API.ease.sigmoid2,
        className:'alert shadowed rounded'
      }, fn);
      return false;
    }
    fn();
  }
});

Creation

Creating toolbars is fun and easy!

Create
Creating buttons is pretty cool too.
Class
(Code will appear here on creation)

Transform

The Transform add-on adds CSS3 2D transform functions to the API, as well as adding several new effects and augmenting the object wrappers when available.

These examples have been tested in Internet Explorer 5.5-8, Firefox 3.6, Safari 4, Chrome 3 and Opera 10.5. They were found to degrade properly in older or otherwise incompatible browsers.

Note that the results are not identical in IE when compared to the others, but should be perfectly acceptable for these special effects as end-users don't often run multiple browsers side by side to compare minute rendering differences (that is the realm of Web developers). Also, the elements transformed all have static position styles, which highlights an additional difference between IE8 and the olders versions (transforms can push down the contents below). For the most consistent results (if older versions of IE are a concern), positioned elements are recommended.

Note that off-brand multiple IE simulations will throw exceptions for some of the demos. This is the usual "library not registered" DirectX problem that exists with these setups. Tested with IETester and MultipleIEs.

Basic

This example demonstrates basic transforms.

Birds of a Feather
Transform ° ° %
Flip
Origin
Note that the origin changes can be animated, but are not in this example.
Matrix
seconds
(Code will appear here when the transform is applied)

By Matrix

This example demonstrates transforming by matrix.

Run Rabbit, Run
Transform
Matrix
Origin
Note that the origin changes can be animated, but are not in this example.
seconds
(Code will appear here when the matrix is applied)

Reveal

This example demonstrates the basic effects added by the Transform add-on, toggling the visibility of the image. There is a more complex transform effect that will be the subject of a future example.

Reveal
seconds
(Code will appear here when the element is toggled)

User Examples

My Library has a vibrant and growing community of authors. Here are some examples of their work. Thanks to all who contribute!

Slide Show

This slide show application was created by Gabriel Gilini.

Tabbed Pane

This tabbed pane widget was created by Ethan B.

Last Modified: 6 May 2010 22:29:00 GMT

By David Mark