Open Source Resources for Web Application Developers

SyntaxHighlighter helps a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Javascript based and it doesn’t care what you have on your server. It supports multiple languages and is very lightweight, compressed core library is 11kb plus whatever brushes you need. However, SyntaxHighlighter isn’t for those looking for ability to edit highlighted code. SyntaxHighlighter doesn’t allow users to edit the source.

Requirements: Modern Browsers with Javascript Enabled
Demo: http://code.google.com/p/syntaxhighlighter/
License: LGPL License

• 2 Comments

This is a really good example that shows us how to create a password strength meter with a beautiful Ext User Interface. It uses the algorithm based on the code of Javascript Password Strength Meter from Geek(Wisdom).com and then use the Ext Forms to build and layout forms on the fly. It looks stunning and really professional, however this Ext form do not do anything and have very little validation on the other fields except the password field.

Requirements: No Requirements
Demo: http://testcases.pagebakers.com/PasswordMeter/
License: LGPL and MIT License

• 7 Comments

MooMonth is a full calendar application written in javascript with the MooTools framework. Heavily configurable and customizable. It features smooth sexy transitions between different views. MooMonth is available under the CC-GNU LGPL license. So your are free to download an use it whenever you like. It looks very nice generally and I am always a big fan of the fade in and out effect.

However, MooMonth is still in alpha stages though, it will be several weeks before ready to be tested in production. Feel free to try it out and then give Dnalor your opinions and suggestions about the calendar.

Requirements: MooTools Framework Required
Demo: http://code.google.com/p/moomonth/
License: LGPL License

• 7 Comments

JSLoader is a dead-simple, non-intrusive “Javascript-on-demand” packaging convention which helps developers and the internet community rapidly develop and prototype applications without the headache of figuring out the witches’ brew of files that need to be copied, included, etc. You do not need to download anything to use all the Javascript frameworks. it is because multiple sites will share this code the browser and proxy caches will help make things more efficient.

All Javascript Libraries are already installed on their server, so all you need to do is create a <script></script> tag with inside <noautolink> of your page and you should be able to load any of the available modules. Once you’ve loaded them, close the script tag out, and use a separate script block for using the API.

JSLoader supports many Javascript Framewroks. The following the an example of how to load a particular Javascript Library on your website / web application.

// Ext.js
JSLoader.load(”ria”,”ext”,”1.1.1″);
JSLoader.load(”ria”,”ext”,”2.0-beta1″);

// JQuery (no plugins yet…)
JSLoader.load(”ria”,”jquery”,”1.2.1″);

// Lightbox (for prototype/scriptaculous)
JSLoader.load(”ria”,”lightbox”,”2.03″);

// Prototype.js
JSLoader.load(”ria”,”prototype”,”1.5.1″);
JSLoader.load(”ria”,”prototype”,”1.6.0-rc0″);// Scriptaculous
JSLoader.load(”ria”,”scriptaculous”,”1.7.1-beta3″);
JSLoader.load(”ria”,”scriptaculous”,”1.8.0-pre1″);

Requirements: No Requirements
Demo: http://www.jsloader.com/
License: LGPL License

• 6 Comments

JFreeChart is a free 100% Java chart library that makes it easy for developers to display professional quality charts in their applications.The JFreeChart project was founded seven years ago, in February 2000, by David Gilbert. Today, JFreeChart is used by approximately 40,000 to 50,000 developers. JFreeChart’s extensive feature set includes:

• a consistent and well-documented API, supporting a wide range of chart types.
• a flexible design that is easy to extend, and targets both server-side and client-side applications.
• support for many output types, including Swing components, image files (including PNG and JPEG), and vector graphics file formats (including PDF, EPS and SVG).
• JFreeChart is “open source” or, more specifically, free software. It is distributed under the terms of the GNU Lesser General Public Licence (LGPL), which permits use in proprietary applications.

Requirements: Java 2 platform (JDK version 1.3 or later)
Demo: http://www.jfree.org/jfreechart/samples.html
License: LGPL License

• 1 Comment

CodePress is a web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it’s being typed in the browser. It supports PHP, Java, Javascript, Perl, SQL, HTML and CSS. CodePress is distributed under the LGPL. It provides the following features.

1. Real-time syntax highlighting » just write some code
2. Code snippets » on PHP example type “if” and press [tab]
3. Auto completion » simple type ” or ( or ‘ or [ or { on any example below (except Plain Text)
4. Shortcuts » on PHP example press [ctrl][shift][space]. It’s shortcut to
5. Multiple windows » you can add multiple CodePress windows to the same page

Requirements: Modern Browsers with Javascript Enabled
Demo: http://www.codepress.org/
License: LGPL License

• 3 Comments

Another great Addon for Ext Framework again. Ext File Upload Form Widget is to provide an user interface for easy uploading of files to a server.

Files are first added to an “upload queue” and then they are uploaded to the server. Any file can be individually removed from the queue before upload or the whole queue can be cleared.

The result of upload is shown for each file by icons of success or failure and, in the case of failure, the server error message is shown as the tooltip of the failure icon.

Requirements: Ext Framework
Demo: http://aariadne.com/uploadform/
License: LGPL License

• 6 Comments

RichFaces is a rich component library for JavaServer Faces built on an advanced open source framework (Ajax4jsf). It allows easy integration of AJAX capabilities into enterprise-level business application development. RichFaces enriches the Ajax4jsf framework in two important ways. First, it expands the number of visual ready-to-use components. Secondly, it fully implements the skinability feature of the Ajax4jsf framework including a large number of predefined skins. Using skinability, it is much easier to manage the look-and-feel of an application.

This demo Web application showcases the most important functionality available in RichFaces components. For each component or component set selected in the left-hand sidebar, you can see it in action. Also, you can instantly see the effect of predefined skins on the application whole look-and-feel. I really like the “Drag Indicator” one.

Requirements: No Requirements
Demo: http://livedemo.exadel.com/richfaces-demo/
License: LGPL License

• 2 Comments

We have mentioned earlier Ext is a JavaScript framework for building web applications. It has got some stunning UI components to aid your development. We can use Ext Framework to create Beautiful Ext Grid Tables easily. The tables provide the following features.

1. Expander Rows, Collapse and Forse Fit
2. Framed with Checkbox Selection and Horizontal Scrolling
3. Grid with Numbered Rows
4. Support for Panel Features such as Framing, Buttons and Toolbars

Requirements: Ext Framework
Demo: http://extjs.com/playpen/ext-2.0/examples/grid/grid3.html
License: LGPL License

• 0 Comments

Multi-color sIFR (Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on screen with Flash equivalents with colors. sIFR is a DOM replacement method originally conceived by Shaun Inman and turned into a high quality cross-browser, cross-platform typography solution for the masses.

sIFR allows website headings, pull-quotes and other elements to be styled in whatever font the designer chooses without the user having it installed on their machine.

Multi-color sFIR implementation is easy – just add sEmColor:”#FF4400″, sStrongColor:”#FF0000″ and sSpanColor:”#EE6600″ into your named argument call function at the bottom of the .html file and if the script finds a <strong>, <em> or <span> elements, each one will be colored3. And they can be nested, too.

Requirements: Browsers required Flash
Demo: http://webdesign.maratz.com/lab/multi_color_sifr/
License: LGPL License

• 3 Comments