Ruby Versions Management mit RVM

Wer kennt nicht das Problem bei mehrer Projekten nicht passende Ruby versionen zu haben?

Abhilfe schafft hier rvm. RVM ist ein Kommandozeileen orientiertes Tool welches es ermöglicht ganz einfach verschiedene Ruby Versionen zu installieren und zu verwalten. Es erlaubt mit mehrere Ruby-Environments zu arbeiten, vom Interpreter bis zu selbst definierten GEM-Sets.

Im folgenden zeige ich euch wie einfach es ist den Ruby Versions Manager zu installieren und zu benutzen. Viel Spass dabei!

Ich habe hier mal die Schritte zusammengefasst, die ich gegangen bin um rvm zu verwenden. Auf der Installations-Seite ist das nicht sofort auf den ersten Blick ersichtlich.

Einfach RVM installieren

mkdir -p ~/.rvm/src/
cd ~/.rvm/src
rm -rf ./rvm/
git clone --depth 1 git://github.com/wayneeseguin/rvm.git
cd rvm
./install

Falls Ihr eine Firewall verwendet die evtl. dabei stören könnte, verwendet für das git repository “http://” anstelle von “git://”

...
git clone --depth 1 http://github.com/wayneeseguin/rvm.git
...

Nach erfolgreicher Installation von RVM, müsst ihr noch einen eintrag in eure .profile-Datei, ganz am ende eintragen.

[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"
...

Jetzt könnt ihr bereits RVM verwenden. Ob bis hierhin alles funktioniert hat könnt ihr damit überprüfen. Wenn ihr die Version von rvm seht wisst ihr das ihr auf dem Richtigen Weg seid.

rvm -v
rvm 0.1.44 by Wayne E. Seguin (wayneeseguin@gmail.com)

Jetzt müssen wir noch eine Ruby Version auf RVM installieren.

rvm install 1.8.7
...
info: Extracting rubygems-1.3.7 ...
info: Installing rubygems for /Users/burza/.rvm/rubies/ruby-1.8.7-p299/bin/ruby
info: Installation of rubygems ruby-1.8.7-p299 completed successfully.
info: adjusting shebangs for ruby-1.8.7-p299 (gem irb erb ri rdoc testrb rake).
info: Importing initial gems...

Wir wechseln nun ins Projekt Verzeichnis und erstellen eine neu Datei namens “.rvmrc”

cd ~/yourproject
mate .rvmrc

Damit beim wechsel in das Projekt Verzeichnis die Ruby Version automatisch gewechselt wird, tragen wir nun noch folgende Zeilen in die Datei ein und speichern diese ab.

rvm 1.8.7@yourproject
...

Jetzt müssen wir noch ein gem-set für diese Ruby Version definieren.

rvm gemset create 'yourproject'
...
info: Gemset 'yourproject' created.

Wenn man jetzt wieder aus dem projekt Verzeichnis raus springt und “gem list” eingibt, sieht man den normalen System-Stand der installierten GEMS.

Ob das ganze richtig funktioniert könnt ihr nun überprüfen, indem ihr in das Project wechselt für das ihr euer gem-set definiert habt und dann mit “gem list” euch eure gems auflistet lasst.  Wenn ihr die unten stehenden Zeilen seht, wisst ihr das es geklappt hat. Nun müsst ihr nur noch die erforderlichen gems für diese Projekt installieren.

*** LOCAL GEMS ***

rake (0.8.7)

Mit folgendem Befehl kann man zur System Version zurück springen.

rvm use system
...

Image zoom mit customized jQuery Tools Tooltip

Ich bin bei der Suche nach einem guten tooltip effect auf die jQuery Tools gestoßen. Die jQuery Tools bieten eine sehr komfortable Möglichkeit, JavaScript Tooltips zu generieren. Hier findet ihr die Tooltip Doku dazu.

Was mich dabei überzeugt hat, dieses Plugin zu benutzen ist die Tatsache, dass man sich nicht um die positionierung des generierten Tooltips kümmern muss. Diese werden einfach durch Positionsangaben erzeugt und zu dem jeweiligen Element richtig positioniert. Zusätzlich liegen die Tooltip-Elemente im HTML-Code ausserhalb des Link-Elements welches das Tooltip erzeugt. Somit ist das ganze auch noch sicher vor unserem bekannten Freund Internet Explorer 7 und 8.

Die orginalen Tooltips reagieren auf ein onMouseOver Event und öffnen sich immer neben dem ausgewählten Element. Die Suche nach einem onClick Event war leider vergebens, das brachte mich dazu die Tooltips ein wenig auf meine Bedürfnisse anzupassen. Im folgenden zeige ich euch wie man die jQuery Tools API ein wenig hackt damit die Tooltips auch mit einem onClick arbeiten.

Ersteinmal binden wir die Tooltip JS-Datei ein. Hier könnt ihr euch ein eigenes Set zusammenstellen und downloaden

# Ruby HAML
= javascript_include_tag 'jquery.tools.min'
<!-- HTML -->
<script src="/javascripts/jquery.tools.min.js" type="text/javascript"></script>

Hier ein Beispiel Code für das Frontend. Es besteht aus einem link mit dem kleinen Thumb. Darunter befindet sich das zoom Element welches das große Bild beinhaltet. Optional ist das caption Element. jQuery Tools kümmert sich darum automatisch, wenn es vorhanden ist wird es entsprechende von jQuery Tools im großen zoom Element positioniert.
Im folgenden die Code Beispiele als HTML und Ruby HAML.

# Ruby HAML
- link_to "#", :class => "thumb " do
  = image_tag("/images/thumb_example.png")
.zoom
  = image_tag("/images/large_example.png", :class => "large")
  .caption
    %p
      Hier kann dein Text stehen....
<!-- HTML -->
<a href="#" class="thumb">
  <img src="/images/thumb_example.png">
</a>
<div class="zoom">
  <img src="/images/large_example.png" class="large">
  <div class="caption">
    <p>Hier kann dein Text stehen....</p>
  </div>
</div>

Nun kommen wir zum eigentlichen Hack für die Realisierung des onClick Events. Hier der JavaScript Code mit entsprechenden Kommentaren.

$(document).ready(function () {
  // init des tooltip effektes
  $('a.thumb').tooltip({
    // trotz angaben auf der seite
    //  funktioniert die mittlere positionierung problemlos
    position: 'center center',
    effect: 'fade',
    fadeInSpeed: 300,
    fadeOutSpeed: 200,
    // einschalten des normalen tooltip verhaltens
    // durch gesetzte title attribute im link
    cancelDefault: false,
    // hiermit wird verhindert das sich der tooltip
    // durch verlassen der maus schliesst
    events: {
      tooltip: 'mouseenter'
    },
    // before filter für das tooltip event
    onBeforeShow: function (event) {
      if (event.originalEvent &amp;amp; &amp;amp; event.originalEvent.type === 'mouseover') {
        // wenn event ein mouseover event ist
        // default action des events wird nicht ausgelöst
        event.preventDefault();
        // verhindert weiteres ausführen des mouseover events
        event.stopImmediatePropagation();
      }
    }
  });

  // eigene function schliesst offene tooltips
  // durch aufruf von hide() aus der api
  var hideAllTooltips = function () {
    $('a.thumb').each(function () {
      // holt sich die tooltip api und ruft hide() auf
      $(this).data('tooltip').hide();
    });
  };

  // ein kleiner hack damit sichergestellt wird
  // das alle tooltips geschloßen werden
  $('html').click(hideAllTooltips);

  // wenn auf ein bild geklickt wird, werden alle anderen
  // (bzw. das zu letzt geöffnete) geschloßen und das eltern element
  // (im Beispiel der link der das bild einschliesst) angezeigt
  $('a.thumb img').click(function () {
    hideAllTooltips();
    var api = $(this).parent('a.thumb').data('tooltip');
    api.show();
    return false;
  });
});