Cosa sono dBJs e dBJs-ui?

dBJs e dBJs-ui sono due librerie front-end con licenza open source che possono essere usate congiuntamente o separatamente, in quanto l'una non dipende dall'altra, pertanto è possibile integrare nel proprio sito web o applicazione web anche solo una delle due.

dBJs

dBJs è la libreria che contiene tre tipologie di metodi: una serie di metodi per l'accesso e la manipolazione degli elementi del DOM, alti per l'impostazione di eventi sugli elementi stessi ed altri ancora per l'impostazione di eventi dell'oggetto window o document di javascript.

Lo scopo della libreria è quello di velocizzare la scrittura del codice con una sintassi sì molto abbreviata, ma intiutiva per l'uso dei metodi.

La libreria dBJs si basa su due oggetti fondamentali $D e $B.

L'oggetto $D

$D, e l'oggetto da utilizzare per l'invocazione dei metodi che si propongono di aggire sugli elementi contenuti nel DOM.
L'accesso a tali elementi è permesso dal passaggio di un paramento di tipo stringa all'invocazione dell'oggetto $D; la stringa passata dovrà essere composta dall'id o il nome classe dell'elemento e degli elementi sui quali si vuole agire, preceduto dal selettore css "#" (hash) oppure "." (punto).

L'utilizzo del selettore "#" permetterà di agire, con i successivi metodi, sull'elemento con l'id indicato, viceversa l'utilizzo del selettore "." permetterà di agire sulla collezione di elementi con il nome classe indicato.

La proprietà el

La libreria dBJs continete una molteplicità di metodi ma una sola proprietà: la proprietà el.

La proprietà el conterrà il riferimento all'oggetto o la collezione di oggeti selezionati con il selettore passato come parametro all'atto dell'invocazione dell'oggetto $D.

L'oggetto restituito dal codice dell'esempio 1 sarà un riferimento all'oggetto del DOM con id myElement.

     $D('#myElement').el;
  

L'oggetto restituito dal codice dell'esempio 2 sarà un riferimento alla collezione di oggetti del DOM con la classe myElements.

     $D('.myElements').el;
  

La proprietà el può essere usata quando nei propri script è necessario ottenere il riferimento ad un oggetto, ma qualora si voglia invocare uno dei metodi dell'oggetto $D non sarà necessario specificarla in quanto sarà l'oggetto stesso a riferisri ad essa all'interno dei suoi metodi.

Ad esempio se si volesse invocare il metodo addCl() dell'oggetto $D sarà sufficinete chiamare il metodo sull'invocazione dell'oggetto stesso, come mostrato nell'esempio 3; il metodo addCl() permette di aggiungere una classe all'elemento o alla collezione di elementi selezionati

    //sintax for element by id
    $D('#myElement').addCl('myClass');
    
    //sintax for elements by class name
    $D('.myElements').addCl('myClass');
  

L'oggetto $B

$B è l'oggetto da utilizzare per chiamare quei metodi che agiscono sull'oggetto window di JavaScript.

L'oggetto $B contiene tre metodi da posizione nel tag head o prima della chiusura del body del nostro documento, in entrambi i casi in un tag script. Tali metodi possono essere utili ad includere tutte le istruzioni o funzione che si vule far eseguere allo scatenarsi dei relativi eventi: onload, onscroll e onresize.

La sintassi è la seguente:

    $B.load(function(){
      /*
              *my fuction code
              */
    });

    $B.scroll(function(){
      /*
              *my fuction code
              */
    });

    $B.resize(function(){
      /*
              *my fuction code
              */
    });
  

dBJs-ui

dBJs-ui è la libreria che contiene una serie di widget, strumenti per il layout e/o funzionalità per la User Interface volte all'utilizzo veloce in siti web ed applicazioni web.

Tale libreria si propone di permettere al front-end developer di utilizzarare il solo linguaggio html per l'ottenimento delle funzionalità contenute attraverso l'utilizzo di classi css e di attributi data che interfacciati con la libreria JavaScript permettono di ottenere una o più istanze dell'oggetto desiderato.

Per alcuni widget o funzionalità inclusi nella libreria sono necessarie implementazioni di codice server-side presenti nel pacchetto in linguaggio PHP e che possono essere integrate nei propri proggetti o riscritte nello stesso o in altri linguaggi in base alle esigenze, maggiori informazioni al riguardo saranno poi specificate nelle API della specifica funzionalità.

Ogni oggetto della libreria dBJs-ui può essere incluso più volte all'interno dello stesso documento (a patto che vengano rispettate le relative impostazione) senza andare in conflitto l'uno con l'altro.

Come integrare le librerie nel proprio progetto

Integrare dBJs

Integrare entrambe le librerie in un proprio progetto è facile e veloce se si vuole integrare solo la libreria dBJs si possono perccorere due vie.

La prima prevede che si includa il file JavaScript della libreria nel tag head del proprio sito web o applicazione web direttamente da url esterno sul sito getdbjs.com come nel seguente esempio:

    <script type="text/javascript" src="http://www.getdbjs.com/include/dBJs.js"></script>
  

La seconda possibilità prevede il download della libreria e l'inclusione del file in una delle cartelle del proprio sito o web application come nel seguente esempio:

    <script type="text/javascript" src="http://www.miosito.com/miacartella/dBJs.js"></script>
  

Integrare dBJs-ui

Per integrare la libreria dBJs-ui nel proprio progetto è necessario effettuare il download. Sarebbe opportuno che la cartella della libreria venga inserita nella root del progetto ed è necessario che venga lasciato tutto invariato all'interno di essa, dovranno poi essere inclusi i file nel vostro tag head come indicato nel seguente esempio:

    <script type="text/javascript" src="http://www.miosito.com/miacartella/dBJs-ui.js"></script>
    
    <link type="text/css" rel="stylesheet" media="all" href="http://www.miosito.com/dBJs/css/dBJs-ui.css">
  

Alcuni dei widget della libreria dBJs-ui hanno bisognio di un particolre parametro aggiunto sul tag html per avere un base url indicante il percorso in cui è posizionata la cartella della libreria (essa stessa esclusa) per far si che funzioninio alcune chiamate asincrone ajax che si interfacciano con le funzioni php nell'apposita cartella.
Per ogni widget in cui servirà questa impostazione sarà comunque esplicitamente indicato nella documentazione relativa indicando l'inclusione del codice di seguito:

  <html data-dBJs="http://www.miosito.com/">

Infine qualora si volesse sovrascrive il CSS di default della libreria dBJs-ui il consiglio è sempre quello di inserire il proprio foglio di stile custom come ultimo tra i fogli di stile inclusi nel documento, così da essere sicuri che le proprie regole si sovrappongano a quelle di default.

Integrare entrambe le librerie

Scaricando il pacchetto contenente entrambe le librerie dall'area download bisogna seguire semplicemnte quanto detto per la libreria dBJs-ui includedo solo una riga in più nel tag head del progetto che importerà anche la libreria dBJs-ui:

    <script type="text/javascript" src="http://www.miosito.com/miacartella/dBJs.js"></script>
    <script type="text/javascript" src="http://www.miosito.com/miacartella/dBJs-ui.js"></script>
    
    <link type="text/css" rel="stylesheet" media="all" href="http://www.miosito.com/dBJs/css/dBJs-ui.css">
  

Vista delle cartelle

• dBJs (cartella da includere nella root)
  • css (contiene gli elementi css)
    • dBJs-ui (imamgini incluse nel css)
    • dBJs-ui.css (css per libreria dBJs-ui)
  • js (contiene gli elementi js)
    • dBJs.js (libreria dBJs)
    • dBJs-ui.js (libreria dBJs-ui)
  • php (contiene gli elementi php)
    • dBJsClass.php (classe php)
  • uploads (cartella temporanea per l'upload di file)