Créer facilement une application de type Trello avec Kendo UI (Partie 1)

Ce guide pas à pas explique comment créer rapidement et facilement une application de gestion de projets de type Trello à l'aide de Kendo UI.

Il s'agit du premier article d'une série en deux parties dans laquelle vous apprendrez comment construire l'interface pour une application similaire à Trello. Notre application aura un tableau avec des listes et les listes contiendront des cartes. Les cartes peuvent être glissées et déposées dans leur liste ou entre des listes. Et les utilisateurs peuvent créer de nouvelles cartes ainsi que modifier le contenu des cartes existantes. Ce type d'application peut être personnalisé pour différents cas d'utilisation, comme un outil de gestion de projet pour les développeurs de logiciels ou un outil de suivi des problèmes. Notre application sera une liste de tâches construite à l'aide des composants Kendo UI ListView et Sortable . Votre première tâche sera de créer un tableau initialisé avec trois listes et quelques cartes.

Création des listes

Notre tableau est essentiellement une vue de liste dans une autre vue de liste. La première vue de liste que nous allons créer sont les conteneurs pour les cartes. Nous allons créer un élément avec le tableau id dans le corps de notre code HTML pour injecter nos listes. Dans les paramètres du composant, nous allons spécifier la source de données et le modèle pour initialiser le widget. Notre dataSource sera un tableau d'objets dotés des attributs listID et name . Cet exemple crée trois listes:

< html > < head > [19659000] < meta charset = " utf-8 " > < titre > Kanban Board < / titre > < link rel = " feuille de style " href = ] " https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.bootstrap-v4.min.css " > < script src = " https://code.jquery.com/jquery-1.12.3.min.js " > </ script > < script src = " https://kendo.cdn.telerik.com/ 2018.3.911 / js / kendo.all.min.js " > [19659018] </ script > </ head > < body > < div class = " tableau " > </ div > < script >       $ ( '. Board' ) . kendoListView ( {     modèle : kendo . modèle ( $ ( '# listTemplate' ) . html ] () )     dataSource : [ { listID : 0 nom : 'To Do' } [19659007] { listID : 1 name : 'Doing' } { ] listID : 2 name : 'Done' } } ) ; ]    </ script > </ body > </ html >

Le modèle de liste aura un en-tête qui affiche la valeur de l'attribut name . Sous l'en-tête se trouve un conteneur contenant la liste des cartes. Ce conteneur aura un id qui utilise la valeur de l'attribut listID . Dans notre exemple, si listID est 1 l’élément id deviendra de liste-1 . Nous devons attribuer à cet élément un id afin que nous puissions le référencer lors de la création ultérieure de la vue liste pour les cartes. Voici un exemple de modèle de liste créé par le conseil à l’aide d’un bloc de script . Il devrait être placé avant le script où votre composant est initialisé.

   < script   id  =  " listTemplate "    type  = .  texte / x-kendo-template  " >  
   < div  class  =  "list-wrapper" > 
     < div  class  =  "list- header "> 
       < span  class  = " list-title ">  # :  nom #  < /  span > 
     < /  div > 
     < div id  =  "list- #: listID # "  class  = " list ">  < /  div > 
   < /  div > 
  </  script > 
 

Et voici le CSS associé pour styliser les listes:

   < style >  
   body  {
     famille de polices :  helvetica ;  
     couleur :   # 444 ; 
  ; 
  ]. .board   {
     débordement-x :  faites défiler ; 
     espace-blanc :  maintenantrap ; 
     position [19659007]:  absolute ; 
     top :   0 ; 
     right :   0 ; 
     du fond  :   0 ; 
     left :   0 ; 
     - Contexte :   # cd5a91 ; 
  ; 
  ]. list-wrapper   { 
     width :   16  de ;  
     de couleur de fond :   #eee ; 19659144] marge :   .5  em ; 
     border-radius :   3  px ; 
     de châssis  ]:  boîte à frontière ; 
     di 
:  inline-block ; 
     vertical-align :  en haut ; 
  } 
 
   .list   [[19659144] background-color :   #eee ; 
     frontière :  aucune ; 
     de rembourrage :   .5 . em ; 
     margin-bottom :   2  em ; 
     format de boîte :  box-border ; 
   } 

   .list-header   {
     height :   3  de ; 
     hauteur de ligne :   3  em ; 
     padding :   0   1  em ; 
  } 
 
   .list-title   19659144] poids de police :  en gras ; 
  } 
  </  style > 
 

Création des cartes

Nous allons ensuite créer un ListView pour les cartes. Une carte aura un cardID et un nom . Le nom est le contenu qui sera affiché à l'intérieur de la carte. La première étape consiste à définir le modèle. De nouveau, nous utiliserons un bloc de script placé dans le corps du code HTML.

   < script   id  =  " cardTemplate "    type  = .  texte / x-kendo-template  " >  
   < div  class  =  "carte" >  # :  nom #  < /  div > 
  </  script > 
 

Et voici les styles supplémentaires:

 .card   {
   format de boîte :  cadre de bordure ; 
   position :  relative ; 
   largeur :   100% ; 
   min-hauteur :   4  em ; 
   padding :   1  em ; 
   border-radius :   3  [; 
   de la marge inférieure : [[19659077] .5  em ; 
   background :   #fff ; 
} 

Nous allons créer un affichage liste pour les cartes. Nous pourrions créer une fonction pour parcourir les données et créer les composants. Ce serait idéal si nous avions un nombre variable de listes. Par exemple, si nous permettions aux utilisateurs de créer également des listes, nous ne pourrions pas coder en dur chaque composant. Nous aurions besoin de créer dynamiquement les listes et de trouver quelles cartes appartiennent à chaque liste pour les insérer dans la vue liste. Cependant, comme nous travaillons avec un nombre fixe de listes, je définirai chaque composant manuellement.

 $  ( '# list-0' 19659007]) .  kendoListView [19659007] ( {
  modèle :  kendo .  modèle  ( $  ( '# cardTemplate' ) .  html  ] () ) 
  source de données :   [
       { cardID :   0  nom :   'Create UI' ] [19659094]] 
} ) ; 

 $  ( '# list-1' ) .  kendoListView  ( {
  modèle :  kendo .  modèle  ( $  ( '# cardTemplate' ) .  html  ] () ) 
  dataSource :   [
     { cardID :   1  nom :   'Implémenter le comportement des boutons'   } [19659007]
     { cardID :   2  nom :   'Code du refactor'  } 
  ] 
} ) ; 

 $  ( '# list-2' ) .  kendoListView  ( {
  modèle :  kendo .  modèle  ( $  ( '# cardTemplate' ) .  html  ] () ) 
} ) ; 

Voici à quoi ressemble maintenant notre planche:

Réalisation the Cards Sortable

Pour rendre nos cartes déplaçables et superposables entre des listes, nous allons utiliser le composant Sortable . Chacune de ces vues de liste se comportera de la même manière, afin que nous puissions leur donner toutes les mêmes options. créera une variable nommée sortableOptions que nous passerons aux arguments du composant.

 var  sortableOptions  =   {
  filtre :   '. carte' 
  conteneur :   '. board' 
  connectWith :   '. list' 
  curseur :   'agrippant' 
  placeholder :   function  ( élément )  {
     return   $  ( '
' ) [19659007].  css  ( {
      background :   '# ddd' 
    } ) ; 
  } 
  indice :   function  ( élément )   {
     retour  élément .  clone  (). 19659007].  css  ( {
      largeur :   '15em' 
      transformation :   'rotation (-5deg)' 
      border :   '1px solid #eee' 
    } ) ; 
  } 
} ; 

L'option du filtre est nécessaire pour définir quels éléments sont triables. L'option connectWith nous permet de déplacer les cartes entre les listes. Notre espace réservé est un élément de carte vide légèrement plus sombre que l'arrière-plan, qui donne l'apparence d'une ombre sur laquelle la carte a été déplacée. Et l'indice est une copie de l'élément de carte légèrement incliné. La dernière partie consiste à initialiser chaque vue de liste de cartes en tant que composant Sortable .

 $  ( '# list-0' ) .  kendoSortable  ( options triables ) ; 
 $  ( '# list-1' ) .  kendoSortable .  options de tri ) ; 
 $  ( '# list-2' ) .  kendoSortable  ( triableOptions [1945904] ]) ; 

Voici à quoi ressemble le tableau en glissant une carte:

Résumé

Jusqu'à présent, nous avons créé une liste pour le Listes sur le tableau et les cartes dans les listes.Nous avons également rendu les cartes triables afin que nous puissions les déplacer sur les listes.Nous aurions également pu les classer en utilisant une grande partie du même code à partir des options de tri des cartes. il faudrait changer le filtre op pour qu’il utilise le conteneur pour les listes et que l’indice peut être un clone de l’élément.

Restez à l'écoute pour le prochain article, dans lequel nous allons implémenter le comportement permettant d'ajouter, d'éditer et de supprimer des cartes.

Essayez vous-même l'interface utilisateur de Kendo

Voulez-vous commencer à tirer parti des plus de 70 fait des composants de Kendo UI, comme ceux ici? Vous pouvez commencer un essai gratuit de Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.

Commencer mon essai de l'interface utilisateur de Kendo

Versions angulaire, réactionnelle et vue

Vous recherchez un composant d'interface utilisateur prenant en charge des cadres spécifiques? Vérifiez Kendo UI pour Angular KendoReact ou Kendo UI pour Vue .

Ressources

---