P.Y.G.

METRO STYLE WEB DASHBOARD


Droptiles imita  la schermata iniziale  di Windows 8  utilizzando HTML, Javascript e CSS. Esso offre un quadro per costruire una dashboard composta da box. i box sono mini-applicazioni create utilizzando Javascript. Tramite esse posssiamo lanciare una app a tutto schermo .

Introduzione

I box sono mini-applicazioni che possono recuperare i dati da fonti esterne. Cliccando su un box si  lancia l’applicazione completa. Le applicazioni possono essere di qualsiasi sito web esistente al sito personalizzato costruito appositamente per adattarsi all’esperienza Dashboard. Droptiles è costruito quasi interamente in HTML, Javascript e CSS e quindi altamente adattabile su qualsiasi piattaforma. Il progetto di esempio è costruito utilizzando ASP.NET per mostrare una certa integrazione lato server, come Signup, Login e ottenere dati dinamici provenienti da server. Ma con poche variazioni è possibile effettuare un porting per PHP, Ruby, JSP o di qualsiasi altra piattaforma. Droptiles è il sequel dei Dropthings , che è il primo Open Web Dashboard Fonte 2.0.
Prendi il codice su Github: 

Caratteristiche   

  • Interfaccia Metro utente. CSS framework per costruire siti web in stile metro, ispirata da  metroui.org.ua. 
  • Drag & Drop box per personalizzare l’interfaccia.
  • Lato client ad oggetti e associazione dati per l’attuazione MVVM facile.
  • Può essere portato su PHP, JSP facilmente.
  • Live Tiles. I box sono mini-applicazioni, caricamento dei dati provenienti da fonti diverse.
Droptiles ha anche il suo negozio di App! 

Come si può utilizzare Droptiles 

  • Enterprise Dashboard  aggregando i dati dai vari sistemi e offrendo un trampolino di lancio per le applicazioni intranet / internet. 
  • Web 2.0 Portal offre moduli in forma di box. L’aggregazione di dati provenienti da vari servizi e come trampolino di lancio per diversi servizi.
  • Touch Kiosk enabled front-end.  Per Alberghi, ristoranti, banche front-desk self-service. 
  • Aggregatore di contenuti di News e ricerche.

Parti principali

Ci sono tre parti principali Droptiles:

  • Dashboard
  • App Store
  • Login, Registrati, Impostazioni.
Dashboard è la home page, che mostra i box. App Store presenta una collezione di applicazioni disponibili per gli utenti che vogliono aggiungere alla Dashboard. Login, Signup, le aree Impostazioni sono costruite  utilizzando ASP.NET e usa i provider di appartenenze ASP.NET.The Dashboard
Dashboard si compone di sezioni. Ogni sezione contiene una raccolta di box . Ognuno di essi che vedete è una Tessera. I box sono mini applicazioni. Può essere del seguente tipo:
  • Semplici pagine html 
  • Una  Javascript mini-App dinamica  
  • Pagina dinamica 

Codifica una Tessera (o box)

Diamo un’occhiata alla Flickr box. Prima di tutto, tutte le aree dei box sono definite  nel file Tiles.js , che contiene i metadati per tutte le tessere. Ad esempio, i metadati del box Flickr è definito come segue:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
flickr: function (uniqueId) {
return {
uniqueId: uniqueId,
name: "flickr",
iconSrc: "img/Flickr alt 1.png",
label: "Flickr",
size: "tile-double tile-double-vertical",
color: "bg-color-darken",
appUrl: "http://www.flickr.com/",
cssSrc: ["tiles/flickr/flickr.css"],
scriptSrc: ["tiles/flickr/flickr.js"],
initFunc: "flickr_load"
};
}
    
L’ icona di default viene indicata nel box, mentre il javascript, css, html vengono caricati. La dimensione orizzontale e verticale della tessera sono definite nella dimensione attributo. Poi, quando vine cliccato, l’URL da ospitare nella visualizzazione a schermo intero è definito in appUrl . Il CSS aggiuntivo e gli script Java  sono definiti in cssSrc e scriptSrc . Infine, il initFunc dice quale funzione  richiamare una volta che i javascripts vengono caricati. I metadati definiscono come la tessera viene visualizzata nella dashboard. Il comportamento del caricamento dei  dati da Flickr proviene dal Flickr.js file, definito come segue:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Funzione flickr_load (piastrelle, div) {
var url
$ GetJSON (url,. funzione (data) {
var ctr = 0 ;
$ Ciascuna (data.items.reverse (),. funzione (i, voce) {
se (item.tags.length < 150 ) {
var = sourceSquare item.media.m;
var sourceOrig = (item.media.m). replace ( " _m.jpg " , " jpg ". );
var htmlString = '
<div class="flickr_item"><a class="titolo"" title="" href="' + + sourceOrig                          ' " target="_blank"> ' ;
htmlString + = ' <img title="' + item.title +                          ' " src=" ' + sourceSquare + ' " alt="' + + item.title                          ' " /> ' ;
htmlString + = '
</a>
<div class="flickr_title">' item.title + + ' ' +
' ' ;</div>
</div>
tile.slides.push (htmlString);
ctr = ctr + 1 ;
}
});
tile.counter (ctr);
});
}
    
Tutto qui.
Le piastrelle possono essere pagine dinamiche aspx caricate direttamente all’interno della casella dei box. Ad esempio:
Modo in cui funziona la Dashboard:
In primo luogo ottenere l’elenco delle Sezioni e le tessere in ogni sezione.
Creare i contenitori per le tesseree per  secondo la definizione inserita nel file di Tiles.js.
Per ogni Tile, vedere se il box ha qualche  Javascript esterno, CSS e HTML da caricare. Se sì, allora li carica.
Eseguire la funzione definita nel initFunc . Passare l’oggetto tessera , il riferimento div Tile e le initParams ad esso.
Box predefinita da visualizzare sul Dashboard
Le tessere predefinite indicate su Dashboard sono definite nello stesso Tiles.js file come segue:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
window.DefaultTiles = [
{
name: " Sezione 1 " ,
Piastrelle: [
{Id: " flickr1 " , name: " flickr " },
{Id: " amazon1 " , name: " amazon " },
{Id: " news1 " , name: " news " },
{Id: " Weather1 " , nome: " tempo " },
{Id: " Calendar1 " , name: " calendario " },
{Id: " feature1 " , name: " feature " },
{Id: " facebook1 " , name: " facebook " }
]
},
{
name: " Sezione 2 " ,
Piastrelle: [
{Id: " wikipedia1 " , name: " Wikipedia " },
{Id: " email1 " , name: " email " },
{Id: " maps1 " , name: " mappe " },
{Id: " angrybirds1 " , name: " angrybirds " },
{Id: " cuttherope1 " , name: " cutTheRope " },
{Id: " dynamicTile1 " , name: " dynamicTile " },
{Id: " buy1 " , name: " buy " }]
},
{
nome: " sezione3 " , piastrelle: [
{Id: " youtube1 " , name: " youtube " },
{Id: " IE1 " , name: " ie " },
]
}
];
    
Le tessere sono indicate nell’ordine esatto che vengono “pescate”. Il nome deve essere lo stesso nome utilizzato per definire i metadati Tile.
Markup HTML per le tessere:
Ci sono varie parti di una box: il seguente HTML definisce il disegno delle tessere:
Il seguente HTML definisce il design di una tessera:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
< div class = " metro-sezioni " data-bind = " foreach: sezioni " >
< div class = " metro-sezione " data-bind = " attr: {id: uniqueID}, foreach: sortedTiles " >
< div dati bind = " attr: {id: UniqueID, 'class': tileClasses} " >
< div class = " tile-image " >
< img data-bind = " attr: {src : tileImage} " src = " img /% 20Explorer.png Internet " / >
< / div >
< div data-bind = " attr: {'class': iconClasses} " >
< img data-bind = " attr: {src: iconSrc} " src = " img / Internet% 20Explorer . png " / >
< / div >
< div data-bind = " foreach: diapositive " >
< div class = " tile-content-main " >
< div data-bind = " html: $ data " >
< / div >
< / div >
< / div >
< arco class = " tile-label " data-bind = " html: label " > Label < / durata >
< arco class = " tile-counter " data-bind = " html: counter " > 10 < / durata >
< div data-bind = " attr: {'class': subContentClasses}, html: subContent " >
subContent
< / div >
< / div >
< / div >
< / div >
    
Il codice è pieno di markup KnockoutJS che viene utilizzato per fare il “bind” del modello tessera e il  markup html.
Dashboard di esecuzione
Ecco un diagramma di sequenza che mostra come viene  caricata la Dashboard: Il codice in Dashboard.js è molto semplice e fa tutto la magia!
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var viewModel = new DashboardModel("Start", [], window.currentUser, ui, TileBuilders);
$(document).ready(function () {
// Hide the body area until it is fully loaded in order to prevent flickrs
$('#content').css('visibility', 'visible');
// Initiate KnockoutJS binding which creates all the tiles and binds the whole
// UI to viewModel.
ko.applyBindings(viewModel);
// See if user has a previous session where page setup was stored
var cookie = readCookie("p");
if (cookie != null && cookie.length > 0) {
try {
viewModel.loadSectionsFromString(cookie);
} catch (e) {
// Failed to load saved tiles. Load the default tiles.
viewModel.loadSectionsFromString(DefaultTiles);
}
}
else {
// No cookie, load default tiles. Defined in Tiles.js
viewModel.loadSectionsFromString(DefaultTiles);
}
    
Come prima cosa prova a leggere la sezione e la configurazione tessere dal cookie per vedere  se è stato salvato.  Se non viene trovato in cookie, carica la definizione di default.  TheCore.js  si prende cura di creare le tessere e inserendo il comportamento dinamico all’interno del box. Il codice è molto documentato, in modo da poter leggere i dati da lì.
App Store
L’esperienza di App Store è costruito allo stesso modo della Dashboard. L’App Store mostra quanto l’interfaccia di Droptiles sia modificabile e riutilizzabile per vari scopi. Utilizza le stesse TheCore.js per fornire la stessa esperienza di navigabilita’ e progettazione. L’unica differenza è invece di Tiles.js che definisce i metadati dei contenitori e delle tessere di default ed  ha i suoi propri AppStoreTiles.js che definiscono i metadati Tile e dei box  di default per mostrarle su App Store.
Questo è tutto diverso.
Ecco il codice in AppStore.js :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var = ViewModel nuova DashboardModel ( " App Store " , [], window.currentUser, ui, TileBuilders);
$ (Document). Ready ( funzione () {
/ / Nascondere la zona del corpo finché non è completamente caricata per evitare flickrs
$ ( ' # content ' ) css (. ' visibilità ' , ' visibile ' );
/ / Inizia vincolante KnockoutJS che crea tutte le tessere e si lega l'intero
/ / UI al ViewModel.
ko.applyBindings (ViewModel);
viewModel.switchTheme ( ' theme-bianco ' );
viewModel.loadSectionsFromString (window.AppStoreTiles);
    
Tutto qui. La funzione loadSectionsFromString si occupa di creare le Tiles AppStore. Prende la sezione di configurazione e i box in un formato stringa serializzato, come questo:
?
1
2
3
Sezione1 ~ flickr1, flickr.news1, News | sezione2 ~~~HEAD=NNS angrybirds1 e angrybirds
    
Ecco come viene memorizzata nei cookie così che la prossima volta che si visita la Dashboard esso mostri che ci siete già stati.
Conclusione
Droptiles è un progetto open source per mostrare come l’esperienza Windows 8 dashboard può essere costruito utilizzando solo HTML, Javascript e CSS. Possono essere adottate per sviluppare varie applicazioni web, in particolare toccare le applicazioni abilitate. Il look & feel moderno Metro rende molto interessante da utilizzare come esperienza di self-service portal o come un aggregatore di contenuti.

Reply to this post

Posta un commento

Iscriviti a: Commenti sul post (Atom)