sorted by: recent | see : popular

Content Tagged with component + front

Kent Johnson has released YPulse a simple open source wrapper for the YUI Animation library that makes creating highlight fades and pulsing button glows a bit easier.

You pulse away with something like:

Ivan Bozhanov walked us through his jQuery-based tree component recently. The state of trees out there is interesting. YUI! has a nice, stable tree control but Dojo's once feature-rich tree has been replaced with a fairly basic tree (i.e., doesn't appear to have in-line editing and drag-and-drop still seems flakey; Dojo guys, correct me if I'm wrong) at the moment and jQuery UI lacks an official tree component (though a few tree plug-ins are out there); as you might expect, Ext JS has a nice tree component.

Let me highlight a few areas where jsTree stands out. First, it has some basic features that many trees out there lack:

jsTree allows the user to create, rename, reorder, move, and delete note (which is realised in a file-browser manner - eg. inplace)

It also has a rich event API which is fairly standard across most editable tree components, though the event types are finer-grained than in most trees I've seen (not sure whether that's a good thing):

You can attach callbacks to almost every action:
- onbeforechange
- onchange
- onrename
- onmove
- oncreate
- ondelete
- onopen
- onclose

It also allows you to provide rules that govern what the user may or may not do based on the "type" of a node:

jsTree lets developers define rules for moving, selecting, deleting, and focusing nodes. The rules are based on developer-definable types of each node passed in the data (different sources define it differently). This limits the user in his actions. The developer can also attach inline rules which override global rules. One scenario in which these rules are useful is when you build a CMS and need a fixed number of top level nodes because of a design restriction.

While you could accomplish the same functionality with event handlers, it's nice to have a simple built-in scheme that can be easily data-driven.

These rules are applied real-time as the user attempts to interact with the tree:

When you drag a node around a pointer tells you where you are about to insert it, and prevents the user from dropping anywhere against the rules. The warning is real time - as you drag and drop the pointer is replaced by a red cross if the action is against the defined rules. I'm still working on displaying definable text messages.

jsTree can be configured to reference a custom property in each node object to determine its type.

It also has built-in localization support; you specify string identifiers corresponding to the different languages that the tree should support on construction:

and then in this case each node in the XML tree fed to the component specifies its language:

In addition to XML data types, it also supports JSON and in-line HTML. But it also has built-in support for doing XSL transforms on XML data sources, including a scheme that lets you include flat data that it then makes into a hierarchy:

jsTree supports XSL transformations when using the XML data source option. This is a bit faster than javascript parsing. It includes an XSL stylesheet for transforming a flat list of entries into a tree. This can be useful if you use adjacency for maintaing a tree in a database. In such situations it is quite heavy on the server to dump the whole tree as you need N-1 queries where N is the number of nodes in the tree. With this XSL solution you can just dump the table flat out with id and parent_id attributes and the XSL will transform it into a nested structure.

Unfortunately, what jsTree is lacking is the visual refinement of many of the trees out there, but as jsTree is built on top of jQuery, we suppose Ivan can add that kind of polish easily.

For many data-driven applications, high-quality grid and tree components are really important; kudos to Ivan for some interesting ideas in jsTree. The docs are certainly better than some I've seen, but not as complete as I'd like.

Stephen Celis got tired of wiring together two date pickers for the common use case of grabbing a date range, so he created timeframe, which is "Click-draggable. Range-makeable. A better calendar."

Based on Prototype, you can whip up some code such as:

And then you get:

Check out the live example to really see it at work.

Kristian Thornley had a unique requirement for displaying data change overtime and thought that he would build a Mac Leopard JS Time Machine.

Kristian told us that "currently the effect suffers if the data in the panels are too detailed and I will probably set up some event handlers e.g. onScale preScale postScale which could trigger Ajax calls and preload data a bit like Livegrid."

Gaiaware, developers of Gaia .Net Ajax suite of components, have released a new version of their suite called Tranquility. The release focuses heavily on improving the overall quality and performance of the framework with much client-side refactoring done. They've also upgraded to the latest release of Prototype and Scipt.aculo.us.

We have refactored the client side JavaScript a lot which makes a much more clean API for our users who wants to extend Gaia Controls

In addition, they've updated the installers to integrate nicely with prior installations of Visual Studio making it easier for .Net developers to immediately take advantage of Gaia components.

A complete list of updates can be reviewed via their changelog. To see the new features of Gaia Tranquility in action, be sure to visit the demos:

• Dynamic Ajax Image
• Ajax DataGrid
• Ajax Menu
• Ajax Effects

The champion of unobtrusive canvas, Christian Effenberger, has come out with a new microformat script that enables you to add bevels to your images (and also shading, shining and glowing).

Why would you want to do this via canvas?

• Fast and easy to implement. Just add class="bevel" to the image and your good to go
• Don't need to spend time in an image editor creating images with corners
• Works really well with forum avatars. Doesn't require additional server work
• It's dead easy to change the attributes of the corners
• Free of charge use on non-commercial and private web sites.

The microformat

• Initialisation class "bevel"
• vary the radius by adding iradius followed by the desired radius in percent:
  Image radius class "iradius20" - min=20 max=40 default=20
• vary the masking by adding usemask:
  Image masking class "usemask"
• vary the masking by adding ibackcol followed by the color:
  Mask color class "ibackcol" - min=000000 max=ffffff default=0080ff
• vary the masking by adding ifillcol followed by the color:
  Mask color class "ifillcol" - min=000000 max=ffffff default=ibackcol
• vary the glowing by adding noglow:
  Image glowing class "noglow"
• vary the glowing by adding iglowopac followed by the desired opacity in percent:
  Glow opacity class "iglowopac" - min=1 max=100 default=33
• vary the glowcolor by adding iglowcol followed by the color:
  Glow color class "iglowcol" - min=000000 max=ffffff default=000000
• vary the shining by adding noshine:
  Image shining class "noshine"
• vary the shining by adding ishineopac followed by the desired opacity in percent:
  Shine opacity class "ishineopac" - min=1 max=100 default=40
• vary the shinecolor by adding ishinecol followed by the color:
  Shine color class "ishinecol" - min=000000 max=ffffff default=ffffff
• vary the shading by adding noshade:
  Image shading class "noshade"
• vary the shading by adding ishadeopac followed by the desired opacity in percent:
  Shade opacity class "ishadeopac" - min=1 max=100 default=50
• vary the shading by adding islinear:
  Shade gradient class "islinear"
• vary the shadecolor by adding ishadecol followed by the color:
  Shade color class "ishadecol" - min=000000 max=ffffff default=000000

We just featured SCal, and now we have a MooTools Calendar component created by Aeron Glemann.

I have tried to make Calendar as semantic as possible–with proper usage of CAPTION, THEAD, TBODY, TH and TD elements–and lots of CSS styling hooks. View the Calendar stylesheet for examples of the CSS; see the Styling Your Calendar section in the Manual for references to the XHTML.

You create the beast via:

And you end up with some pretty stuff:

One of the best parts of Dojo 1.0 has been how often the team has been blogging of all things. It has been great!

Mike Wilcox has posted about Dijit, the widget platform for Dojo 1.0.

His piece covers dojo.parser, dojo.declare, the widget markup, the lifecycle of widgets, and more. Great stuff.

The lifecycle is very thorough:

preamble()

Originating in dojo.declare, preamble is a new Dojo Core feature. It’s a pre-constructor accessory. By analogy, preamble is to constructor as postMixInProperties is to postCreate. Since preamble gets the same arguments as the constructor, you may extend another object, and jump in front of the constructor and change the arguments.

constructor()

Originating in dojo.declare, constructor has a new usage pattern. Previously, it fired last, which I didn’t find particularly useful nor accurate. It now fires early in the widget lifecycle, allowing early initialization with the arguments passed into the object. While more common in use, it’s not exactly necessary, as Dijit handles the job of converting your arguments into object properties.

postMixInProperties()

Originating in dijit._Widget, postMixInProperties is used more commonly by widget developers. That said, some of its duties are superseded by the addition of constructor and preamble. Its main purpose is firing after the properties have been set, but before the widget has been parsed and created. Pre-creation work on widget properties is typically done in this method.

postCreate()

Originating in dijit._Widget, postCreate is the “heavy lifter” of Dijit. This fires after creation, but before the widget is rendered to the page. At this time in the widget lifecycle, you have access to the widget’s nodes, so additional parsing, connections, styling, or even attaching more widgets is possible.

startup()

Originating in dijit._Widget, startup is somewhat misunderstood. startup doesn’t fire unless the widget is a child of another widget. And then it only fires after it, and all of its siblings have been created. Then they all fire together.

Sigurd Magnusson of the SilverStripe opensource CMS application pinged us about the SilverStripe 2.1 release which features:

• Blog module with drag & drop widgets: View screencast, Demo (login: admin/password)
• Support for the updated gallery module: Tour, Demo.
• Security system developed by Markus from Google Summer of Code

NOTE: SilverStripe is one of the finalists of the PacktPub open source CMS.

Until we get <input type="date" /> into the browsers, we will need to create data pickers.

DatePicker is a simple one that users Prototype and Script.aculo.us, and does the basics well (although the fade can be a touch annoying to me).

It is very simple to use too:

Of course, you could easily wrap this in a microformat so you can just do class="date".