From RPM Wiki
| Table of contents |
|
|
Summary
The JavaScript functionality used in RPM
Libraries
Mootools
RPM uses the free mootools (http://mootools.net/) Javascript library. Most of the library is contained within the base Rpm JS file. Some additional components are in the base charting JS file. In other words, we don't include a mootools file, we copy & paste it into files with other content.
- Version 1.11 Download (http://mootools.net/download) with "YUI" compression option
- Components: Core, Class, Native, Element, Window, Drag, Remote.XHR, Remote.Cookie, Plugins.Tips. Copy all and paste into top of Rpm.n.js
- Components: Fx, Plugins.color. Copy from Fx to end and paste into middle of Chart.js (2nd from top, see comments in the file)
Excanvas
Canvas compatibility for IE. Free, by Google.
- Google Code page (http://code.google.com/p/explorercanvas/)
- Compress (JSMin only, Packer seems to break it) and paste into top of Chart.js
Plootr
For charting.
- See Charts (spec)
= SugarTest
We're using the open source SugarTest (http://sugartest.scriptia.net/) JavaScript unit testing framework (Shoulda (http://thoughtbot.com/projects/shoulda/) style).
Functionality
Charts
- Rpm.Chart
- See Charts (spec)
Check all
Makes all checkbox inputs with a "check" class conform to a controlling checkbox.
Use
Give the controlling checkbox onclick="Rpm.Fx.checkAll(event)" and all checkboxes to control class="check". Do not give the controlling checkbox that class.
- Also works if the checkbox is inside a span with "check" class
History
Duplicate
History
Combo Box
- See Combo box
Date Picker
The date picker allows a user to select a date from a pop-up calendar.
Use
- Head: calendar
- Text input with CSS class "datePicker"
<asp:textbox id="dateTxtBox" CssClass="datePicker" runat="server"></asp:textbox>
History
- Europa: Simplified UI and use including no more icon launcher.
Format
History
- Europa: Rewrite for cross-browser
Format (filename)
Truncate, icon
Use
- Class "fileName" on anchor tag
- Use like in edit attachments requires custom code
History
- Europa: Rewrite for cross-browser
Adding more icons
- Add to sprite
- Update JS to add correct class
- Update all places in CSS with background pos for class (2 right now, Page.css and FxPlus.css)
Format (table)
Use
- Class "gridMain", "gridSum", or "gridList"
- First content row (first non-header row) must have CSS class in each cell that may need formatting in following rows, even if the content in the first row is null. For most grids this isn't an issue since all cells in a column always get the same CSS class. Where this did show up as a problem was the comm summary page where the summary table had no class in the third column of the first row (because the net billed has no % of net billed).
History
- Europa: Rewrite for cross-browser
Full layout
History
Help Tip
A small help icon that reveals some text on mouse over.
- Rpm.Page
Use
<img class="helpTip" title="My Title::This is a help tip" src="../Style/icons/icon_help_16.gif" />
History
- Europa: Rewrite for cross-browser
Hide if empty
Use
- Automatically applied by class to toolbars, toolovers, setup mainlist cells
- Add the class "hr" to have it not completely hidden if empty, but changed to a small line instead (if the thing is important as a visual separator)
History
- Europa: Rewrite for cross-browser
Iframe load
History
Key handler
History
- Europa: Rewrite for cross-browser
Make safe
String object extended with makeSafe and makeUnsafe functions. These are intended to modify user input to make it comply with the .NET safe input check and the RPM special characters rules.
History
- Europa: Added in an update
- Ganymede: Delimiters added
Max length
Applies a max length to text area. This is required becuse there is no built-in MaxLength limit for text areas like there is for single-line text inputs. The MaxLength attribute for asp:TextBox controls does nothing when TextMode="MultiLine".
- Rpm.Fx
Use
- Attribute "RpmMaxLength" equal to int of char limit
- Example: <textarea RpmMaxLength="200"></textarea>
TODO
- Add protection from paste (http://www.siteexperts.com/ie5/htc/ts08/page2.asp)
History
- Europa: Rewrite for cross-browser. Also, was inline script.
Menu
Pop-up menus containing HTML
Use
- Head: menu
- The menu contents are rendered anywhere in the page as an UL or a table with each column containing an UL. This will be hidden by the CSS. Then, a corresponding link is rendered somewhere that will trigger the menu to appear below it.
History
More
History
- Europa: Rewrite for cross-browser
Move to grid bar
History
- Europa: Rewrite for cross-browser
Note add
See Notes control
Note tip
History
- Europa: Use JS hover tip instead of native alt-hover (which is incorrectly implemented in IE)
Ping
History
- Europa: Rewrite for cross-browser, moved to main frame
Popup
- Rpm.Popup
Use
- Put "Rpm.Popup(url)" function for "onclick" event for trigger element (link, button, etc.) where "url" is the relative or absolute URL of the page to load.
- The page loaded within:
- Head, one of two options:
- "inFrame"
- "pref" + body class="pref"
- Close link/button onclick="window.parent.Rpm.Popup.hide();"
- To close after OK put "window.parent.Rpm.Popup.hide();" in a script block in a hidden placeholder and show it.
- The preferences popup replaces the above with Rpm.Popup.hideAndRefreshTop() because it needs to reload the top frame to show any shortcut changes.
- Head, one of two options:
History
- Jupiter: Modal popup (IE only). Previously used regular pages.
- Europa: Inline iFrame, cross-browser.
Progress
An "In progress" bar indicator. Has 3 modes: Simple, List, and Upload.
- Rpm.Progress
Use
- Head: progress
- Using the progress control requires a specific set of HTML tags and classes. That means any use beyond the current pages requires custom coding.
History
- Europa: Rewrite for cross-browser
Redirect
Sometimes we need to redirect the user somewhere after a click or something. We do this by changing the response to just a script tag.
- Requires no libraries or files by design
Use
Scroll
Remembers scroll position on a page when a postback or other function reloads the same page.
- Rpm.Scroll
Use
- Applied automatically to all main pages
Section format
History
Tabs
History
- Europa: Rewrite for cross-browser
Uncheck all
A link that when clicked, clears all checkvoxes on the page
- Rpm.Fx
Use
Give the link href="javascript:Rpm.Fx.uncheckAll();"
History
Wait
History
- Europa: Rewrite for cross-browser
Web Boxes
- See Web Box (spec)
History
- Europa: Rewrite for cross-browser, DB save
Compression
The deployment build batch file executes a JSMin (http://javascript.crockford.com/jsmin.html) compression on every JS file.
Development
- HTML and DHTML Reference at MSDN (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp)
- 3 performance tips for JavaScript (http://javascriptkit.com/javatutors/efficientjs.shtml)
- Efficient JavaScript code (http://userjs.org/help/tutorials/efficient-code)
- JavaScript Performance Recommendations Part 1 (http://blogs.msdn.com/ie/archive/2006/08/28/728654.aspx) Part 2 (http://blogs.msdn.com/ie/archive/2006/11/16/ie-javascript-performance-recommendations-part-2-javascript-code-inefficiencies.aspx) (IE Blog)
- This page was last modified 19:54, 24 Apr 2009.
- This page has been accessed 7554 times.