[Projektvorstellung] Rajax - Rapid Ajax Development

**Hendy** · 10.07.2011 15:39

Hallo,

ich wollte mein Projekt vorstellen,
da ich Anregungen/Kritiken gut gebrauchen könnte.

Name: Rajax - Rapid Ajax
Lizens: http://www.gnu.org/licenses/gpl-3.0.html
Zielgruppe: frontend webentwickler
Version: 0.05
Github: repo
Dokumentation: http://doc.rajax.rpg-stars.de/

Kenntnis voraussetzungen:

-javascript,ajax
-mvc
-jquery
-php, oop php
-html,css

Webserver voraussetzungen:

-php 5.2 bis 5.3.x

Rajax verwendet:

-Zend Frameworks Db Class/Autoloader - framework.zend.com
-jQuery - jquery.com
-Zen-PHP - code.google.com/p/zen-php/

Kurzbeschreibung:

Rajax soll den Ablauf der Entwicklung einer Ajax basierten Seite verkürzen.
Durch die Frontend und Backend Bibliotheken ist es möglich in windeseile Daten aus der Datenbank
formatiert im Backend in einen html Bereich schreiben zu lassen.

Wie in einem CMS üblich wird aus der Datenbank den Inhalt einer Seite dargestellt.
Genau das Prinzip geht Rajax nach. Eine Tabelle aus der Datenbank könnte für einen Punkt auf einer Seite stehen.
Dieser Punkt könnte mehrere Seiten beinhalten.

Es soll das Designen der Seite in den Vordergrund bringen, da nurnoch wenig im Backend getan werden muss.

Wie Rajax funktioniert:

1. User input von der Maus oder jeder anderen möglichen Form empfangen
2. Ausführung von funktionen in der main.js(oder anderer *.js Dateien)
3. Datenanfrage an den backend bereich der Applikation schicken
4. Daten von SQL-Datenbank empfangen
5. Einpflegen in HTML Datei

Zum Beispiel eine simple html Datei:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    RLoad = {};
    RLoad.PreloaderSrc = 'img/preloader.gif'; // ein preloader bild der beim laden angezeigt wird
    RLoad.Scripts = [
    'js/main.js' // steht für die hauptdatei die die vom entwickler erstellten anfragen an den server enthält
    ];
</script>
<script src="js/rajax/Rajax.Autoloader.js"></script> <!-- ladet alle rajax Dateien für das Frontend -->
</head>
<body>
<section id="container">
<!-- daten von rajax -->
</section>
</body>
</html>

PHP-Code:


<article>
    <h3><?php print $id; ?>
    <p><?php print $text; ?>
</article>

Nun wird ein Anfrage an den Server gerichtet:

Wie funktioniert eine Anfrage in Rajax?

Ein bestimmter Controller wird angesprochen mit einer bestimmten Methode z.B. "wordpress_getPages"
Controller: wordpress, Methode: getPages()

Es ist möglich die Daten in 3 verschiedenen Ausgabeformaten zu bekommen: html, json, xml

Optionen bieten die Möglichkeit, die Daten in selbst manipulierter Form wieder zu bekommen.
Das html format bietet standardmäßig 2 verschiedene optionen an:
Alle einträge werden mit dem template genutzt.
- template:file=src

Abwechselnd wird template A und B genutzt.
-template: odd=src;even=src

Man kann auch den eigenen Controllerfunktionen "Ereignisse" bei bestimmten optionen zuweisen.

Zum beispiel wie die template:file=path_to_file option gebaut wurde:

PHP-Code:


if($this->options['_type'] == 'template' && isset($this->options['_type']))

{

   // do something cool

}

Man kann zusätzliche Werte mitgeben an den Controller. Sie werden in der Regel benutzt um die richtigen
Daten aus der Datenbank zurückzugeben.

z.B. page/MeinePage

wird an die getPageByName Funktion im wordpress Modul gesendet. Die Funktion nimmt sich "MeinePage"
und such in der Datenbank danach und gibt das Ergebnis zurück.

Nun wird die $.rGet Methode aufgerufen in der main.js, die durch den Autoloader mit geladen wurde:

Code:

$(function() {$('#content').rGet('test_holeDaten/html/template');
});

nun wird ein Request an das Backend geschickt, es wird durch eine Routing klasse
an einen Controller geschickt(test) und ruft die Methode holeDaten auf.

Die test klasse:

PHP-Code:


class test extends Rajax_Controller 
{
    public function holeDaten()
    {
        // ein query schreiben
        $sql = "select * from artikel";

        // eine liste der ergebnisse empfangen
        $ergebnis = $this->db->fetchAll($sql);

        // ausgeben des ergebnisses
        if(!$this->output($ergebnis)) // die output Funktion gibt die daten in jedem von rajax zur verfügung gestellten Format aus
        {
            // gibt eine fehlermeldung in dem gewählten format aus, falls die output Funktion false zurückgibt
            Rajax_Application::error404();
        }

 }
}

Nachdem wir die vom Server zurück bekommen haben werden die Daten von jQuery in #container geschoben.
Das Resultat würde so aussehen:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    RLoad = {};
    RLoad.PreloaderSrc = 'img/preloader.gif'; // ein preloader bild der beim laden angezeigt wird
    RLoad.Scripts = [
    'js/main.js' // steht für die hauptdatei die die vom entwickler erstellten anfragen an den server enthält
    ];
</script>
<script src="js/rajax/Rajax.Autoloader.js"></script> <!-- ladet alle rajax Dateien für das Frontend -->
</head>
<body>
<section id="container">
<article>
    <h3>test1<h3>
    <p>testtext</p>
</article>
<article>
    <h3>test2</h3>
    <p>testtext</p>
</article>
</section>
</body>
</html>

Rajax bietet von sich aus 2 Funktionen, um eine linkbasierte Seite zu erstellen:

$(selector).rajaxNavi() konvertiert links in Rajax kompatible Wörter.

HTML-Code:

<!-- before -->
<a href="page/Link1">Link1</a>
<a href="page/Link2">Link2</a>
<a href="page/Link3">Link3</a>

<script>$('a').rajaxNavi();</script>

<!-- after -->
<a href="#!/page/Link1">Link1</a>
<a href="#!/page/Link2">Link2</a>
<a href="#!/page/Link3">Link3</a>

$.rajaxWatch überwacht den Browser und die URL.
Es übeprüft ob im Objekt, das der Funktion übergeben wird,
ein Schlüssel passend eines Parameters in der URL mit übereinstimmt.
Bei erfolg wird die Funktion im Schlüssel ausgeführt.

HTML-Code:

$.rajaxWatch({
  startpage : function(e) {
     // do something first
  },
  onerror : function(e) {
    // if url parameter does not math any entry in this object
  },
  onload : function(e) {
    // startup of rajaxwatch
  },
  onchange : function(e) {
    // if url changes
    // making dynamic loading possible
  },
  custom1 : function() {},
  custom2 : function() {},
  custom3 : function() {}
},'startpage');

CMS - Teilunterstützung bis jetzt:
- wordpress db

Durch das wordpress Modul ist es möglich ,ohne die html Datei aufzuspliten in endlich viele teile,
grundlegende Funktionen wie blog und pages sowie blog/pages extern verlinkungen und navigation zu verwenden.

Das wordpress Adminpanel kann weiterhin benutzt werden.

Beispiele:
Animationsbeispiel
Beispiel mit Datenaustausch

Download

Thema: [Projektvorstellung] Rajax - Rapid Ajax Development

Themen-Optionen

Anzeige

Baum-Darstellung

[Projektvorstellung] Rajax - Rapid Ajax Development

Stichworte

Berechtigungen