sorted by: recent | see : popular

Content Tagged with Prototype + Rails

Heroku is a new YCombinator startup that joins the growing number of "use your browser to build your apps" type of applications.

You can create new Rails applications, and they are magically hosted up in the cloud. You can import your own Rails application, or you can use the inline editor and tools to built the application directly in the browser.

Heroku itself is a Rails application. I wonder if they now self hosting :)

Being able to quickly build an application and have it running live is great (using Amazon EC2), and this is just the beginning. They already tie into the usual tools like Rake, but there is room to go further and have nice DB utilities, cloning of functionality, and much more.

The editor itself could use a bunch of work too. I can never see where the cursor is, let alone have all of the Textmate / Aptana / IntelliJ goodness.

CalendarDateSelect is a prototype.js based datepicker capable of picking a Date and a Date/Time. It’s fully integrated with Rails, and is pleasantly easy to start using (install the plugin, restart the server, add <%= calendar_date_select_includes%> , and you’re ready to go! It’s light weight so you’re applications will load faster.

Project Home Page

Also, integration with ActiveScaffold has been released.

.

It must be Friday. Web-O-Random is a new website I created to spend hours exploring random websites the Ajax way ;). A list of URLs is fetched from the server, placed into an animated carousel/slider component, and you can then navigate through the carousel to preview the websites.

Technologies:

• Server is Rails-based, accessing URLs from the Open Directory Project (as Active Records). Uses the Prototype Carousel component by Sebastien Gruhier, in turn based on Yahoo!'s carousel Scriptaculous is used for some effects.
• URLs are fetched via JSON calls.
• As with WebWait, site is loaded into an IFrame with event handler to determine when it's been loaded (in Firefox).

More info in this blog post and the FAQ.

Apparently Santa was listening to my request for more docs in this last post: Sergio Pereira has updated his outstanding developer notes for Prototype to cover 1.5rc2.

Scott Raymond and Sergio also worked together to create the Prototype Quick Reference, a PDF that expands on Sergio's web site. The PDF will also be updated to cover 1.5 final, whenever that happens. There is also Ajax on Rails, written by Scott with Prototype-specific info contributed by Sergio. It also covers Scriptactulous and of RJS and other Rails specific methods for developing ajax.

Does anyone have any reviews of either they could link up or contribute?

With so much discussion happening recently about the state of Prototype, it’s great to see some updates finally rolling in. Hopefully this is only the beginning of what’s to come.

Here is the changelog as of around 7:00 CST:

• Make destructive Element, Form, and Form.Element methods return their first argument, so that multiple calls can be chained together. [sam]

  ex. $(“sidebar”).addClassName(“selected”).show();

  The following methods now return their first argument: Element.toggle, Element.hide, Element.show, Element.remove, Element.update, Element.replace, Element.addClassName, Element.removeClassName, Element.observe, Element.stopObserving, Element.cleanWhitespace, Element.scrollTo, Element.setStyle, Element.makePositioned, Element.undoPositioned, Element.makeClipping, Element.undoClipping, Form.reset, Form.disable, Form.enable, Form.focusFirstElement, Form.Element.focus, Form.Element.select, Form.Element.clear, Form.Element.activate, Form.Element.disable, Form.Element.enable.

• For consistency, Element.toggle, Element.show, and Element.hide no longer take an arbitrary number of arguments. [sam]

  !! BACKWARDS COMPATIBILITY CHANGE !!

  If you have code that looks like this: Element.show(‘page’, ‘sidebar’, ‘content’); You need to replace it with code like this: [‘page’, ‘sidebar’, ‘content’].each(Element.show);

• Mix in Form and Form.Element methods to forms and form field elements with $() and $$(). Closes #4448. [Dan Webb, sam]
• Add Object.clone [sam]
• Add Form.Element.disable and Form.Element.enable. Closes #4943. [jan@prima.de]
• Field is now simply an alias for Form.Element. [sam]
• Add Element.Methods.getElementsByClassName and Element.Methods.getElementsBySelector. Closes #4669. [Andrew Dupont, DHH, sam]
• Avoid race condition when stopping an Ajax.PeriodicalUpdater. Closes #4809. [e98cuenc@gmail.com]
• Improve support for synchronous requests. Closes #5916. [sam, jthrom@gmail.com]
• Add serialization and observation support for input type=search. Closes #4096. [rpnielsen@gmail.com]
• Properly decode query components in String.prototype.toQueryParams. Closes #3487. [sam]

• Add Array.prototype.reduce [sam]:

  • [1, 2].reduce() // [1, 2]
  • [1].reduce() // 1
  • [].reduce() // undefined

• Add Object.keys and Object.values [sam]

• Simulate non-GET/POST requests by POSTing with a _method parameter set to the actual verb [DHH]
• Make Element.update() handle TABLE-related elements with the DOM API because of IE’s missing .innerHTML property on them [Thomas Fuchs, thx to Rick Olson]
• Sync to script.aculo.us unittest.js library as of 2006/08/29 [Thomas Fuchs]
• Add additional unit tests to test/unit/dom.html for testing Element.update and $().update in various enviroments [Thomas Fuchs]
• Prevent possible exceptions on unloading the page in IE [Thomas Fuchs]

Object.keys and Object.values

New to Prototype is Object.keys and Object.values. There are a couple things to be aware of however. These methods won’t work on Prototype classes the way you might expect. So for instance, this will not work:

   var Foo = Class.create();
  Foo.prototype = {
    intialize: function(str) {
      console.log(str);
    },

    bar: function(str) {
      console.log(str);
    }
  }

  console.log(Object.keys(Foo));
  // ["prototype","bind","bindAsEventListener"]

The reason for this is that Foo is a Function and you’ll get the keys for the Function object. A relatively easy work around for this is ask for the keys on Foos prototype object:

console.log(Object.keys(Foo.prototype)); //["intialize","bar"]

Of course, you don’t get the class methods with this so you can use something like this. Not a particularly useful class, but you get the idea:

  var Inspector = Class.create();
  Inspector.prototype = {
    initialize: function(obj) {
      var instanceMethods = Object.keys(obj.prototype);
      var classMethods = Object.keys(obj).reject(function(method) {
        return ['bind', 'bindAsEventListener', 'prototype'].include(method);
      });
      console.log(instanceMethods, classMethods);
    }
  }

Form and Form.Element methods mixed in to $ and $$

This is great and well help put an end to some of those very verbose Form operations. Now you can do stuff like:

  <form action="/search" id="searchform">
    <input type="text" value="this is text" name="q" id="search" />
    <input type="submit" value="submit">
  </form>

  //Javascript
  console.log($('searchform').getElements());
  //  [<input type="text" id="search" name="q" value="this is text">,<input type="submit" value="submit">]

Shorter syntax for Event Observing

Dan Webb’s very old patch for event observing went in. This means we can now do:

$('element').observe('click', function(e) {  alert(e); });

Full support for chainability

All the methods listed in the CHANGELOG overview above now return their first argument.

  $('sweet').observe('click', function(e) {
    console.log("%s was clicked", Event.element(e));
  }).setStyle({color: 'red'});

This is just a quick overview of what is going into Prototype as we speak. It seems Sam is on the move today and there is a flurry of activity so we’ll likely see more before the day is over with. I’ll try to update this post as soon as I learn more.

I started writing a blog article on how to integrate the cool prototype windows and ajax_scaffold, half way through I got bored of writing it and just decided to upload my mutated version of it.

You need to manually install the prototype window javascript. Any one with basic rails knowledge should be able to do this.

Its just a quick hack by the way..

ajax_scaffold_generator-3.1.5+prototype_windows.zip