Composant de planning

**GDS_Strou** · 22/10/2014, 16h32

Bonjour,

Je suis sur un projet Java sur lequel j'aimerais développer une sorte de calendrier dans lequel je pourrais ajouter des activités.

Voici la maquette :

Nom : planning.png
Affichages : 1758
Taille : 419,0 Ko

Nom : planning.png
Affichages : 1758
Taille : 419,0 Ko

1- Je clique sur le calendrier en haut à gauche pour choisir un jour.

2- Je choisis ensuite une plage horaire.

3- Le fameux calendrier doit alors s’afficher avec les différentes unités à gauche et les plages horaires en haut.

4- Je peux alors saisir des activités dans les plages horaires. Je peux en saisir jusqu’à 4 dans un intervalle d’une heure (exemple : à 16h, GRV à 4 activités orange).

Voilà donc mon problème, je ne sais pas du tout comment construire ce calendrier et je n’ai pas trouvé grand-chose d’intéressant sur le net.
On m'a parlé d'un custom component, quelqu'un a-t-il déjà utilisé cette technologie ?

Quelqu'un saurait-il m'indiquer une démarche à adopter pour réaliser ce genre de calendrier ?

Je vous remercie par avance pour votre éventuelle aide.

**kolodz** · 22/10/2014, 16h58

On m'a parlé d'un custom component, quelqu'un a t-il déjà utilisé cette technologie ?

Je pense qu'on t'a parler d'un composant personnalisé. Du fait maison en somme...

Mais ce n'est pas la bonne piste selon moi.
Il est préférable que tu recherche une librairie déjà réalisé qui propose une API robuste.
Il existe :
http://migcalendar.com/
(Payant d'après ce que j'ai vue.)

http://www.mindfusion.eu/jplanner.html
(Payant d'après ce que j'ai vue.)

Ou encore
http://www.jfree.org/jfreechart/
Utilisé pour des des diagrammes de Gantt (http://www.ganttproject.biz/)
Gratuit, mais probablement plus bas niveau.

Cordialement,
Patrick Kolodziejczyk.

**GDS_Strou** · 23/10/2014, 09h24

Le mig calendar j'ai vu mais très très cher :-/
JFreeChart à tester, je vais essayer mais pareil, pour avoir des sources de graphiques déjà fait, il faut débourser quelques euros aussi...
Vu que je n'ai pas énormément d'expérience, je sais pas si je vais m'en sortir sans exemples. A voir.

**OButterlin** · 23/10/2014, 10h57

Regarde peut-être du côté des extensions de Primefaces, il y a un composant qui ressemble à ce que tu cherches...

**GDS_Strou** · 03/11/2014, 13h53

merci pour la réponse je n'avais pas regardé du côté des extensions, celle-ci semble pas mal :
Nom : Screenshot from 2014-10-30 11:19:34.png
Affichages : 1438
Taille : 58,2 Ko

Nom : Screenshot from 2014-10-30 11:19:34.png
Affichages : 1438
Taille : 58,2 Ko

J'ai cependant quelques questions pour ce genre de composants primefaces que je ne connai guère :
- comment paramétrer l'ouverture d'un formulaire pour la saisie d'un nouvel event en cliquant sur le "+" ?
- est-il possible pour un event, d'afficher sont détail lorsque l'on passe la souris dessus ? avec un Dialog par exemple.
- j'ai copié l'exemple dans mon projet mais je ne parviens pas à faire le lien entre le CSS fourni dans l'exemple et mon timeline ? (pour les cellules rouge et verte)

Merci d'avance pour votre aide.

**OButterlin** · 03/11/2014, 16h43

Envoyé par GDS_Strou

- comment paramétrer l'ouverture d'un formulaire pour la saisie d'un nouvel event en cliquant sur le "+" ?

Si tu regardes l'exemple Editable events and server-side API ils l'explique

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<p:ajax event="add" update=":dialogForm:detailsBookingInner"
        listener="#{editServerTimelineController.onAdd}"
        oncomplete="PF('detailsBookingWdgt').show()"/>

Envoyé par GDS_Strou

- est-il possible pour un event, d'afficher sont détail lorsque l'on passe la souris dessus ? avec un Dialog par exemple.

Ça n'a pas été prévu, j'arrive à comprendre leur position, comment différencier d'un déplacement...

Envoyé par GDS_Strou

- j'ai copié l'exemple dans mon projet mais je ne parviens pas à faire le lien entre le CSS fourni dans l'exemple et mon timeline ? (pour les cellules rouge et verte)

Toujours dans l'exemple, lorsqu'il instancie un TimelineEvent, le dernier argument est un nom qui sera utilisé dans le CSS comme nom de classe de style précédé de "div."

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
String availability = (r == 0 ? "Unavailable" : (r == 1 ? "Available" : "Maybe"));  
  
// create an event with content, start / end dates, editable flag, group name and custom style class  
TimelineEvent event = new TimelineEvent(availability, start, end, true, name, availability.toLowerCase());  
model.add(event);

...
div.unavailable {
background: #F03030 none !important; /* red */
border-color: #bd2828 !important; /* red */
}

div.available {
background: #1AA11A none !important; /* green */
border-color: #136e13 !important; /* green */
}

div.maybe {
background: #FFA500 none !important; /* orange */
border-color: #cc8100 !important; /* orange */
}
...

**tchize_** · 03/11/2014, 22h29

Envoyé par OButterlin

Regarde peut-être du côté des extensions de Primefaces, il y a un composant qui ressemble à ce que tu cherches...

p*** de b**** de c***

2 mois que je me trimballe primefaces et pas une seule fois je n'ai remarqué qu'il y avait des extensions

C'est saint Nicolas avant l'heure là

**OButterlin** · 04/11/2014, 09h04

Envoyé par tchize_

p*** de b**** de c***

2 mois que je me trimballe primefaces et pas une seule fois je n'ai remarqué qu'il y avait des extensions

C'est saint Nicolas avant l'heure là

J'espère que tu n'avais pas commencé à développer des existants

**tchize_** · 04/11/2014, 10h01

Envoyé par OButterlin

J'espère que tu n'avais pas commencé à développer des existants

Blague à part, ça recoupe au niveau des Functions certains trucs, mais je ne développe quasiment jamais de composant JSF maison autre que des composites. Je préfère me reposer sur du robuste dans ces domaines là

**OButterlin** · 04/11/2014, 10h49

Envoyé par tchize_

Blague à part, ça recoupe au niveau des Functions certains trucs, mais je ne développe quasiment jamais de composant JSF maison autre que des composites. Je préfère me reposer sur du robuste dans ces domaines là

Jusqu'à présent, je n'ai jamais eu à utiliser les extensions de Primefaces, comme toi, je développe des "composite component", en particulier des composants de gestion des clés étrangères qui me servent partout.
Comme en plus on peut très facilement externaliser ces composants, on n'a plus qu'à ajouter le jar dans l'application qui en a besoin et hop ! on a accès à la décodification / recherche des clés étrangères... le top

(je prépare un tutoriel à ce sujet...)

**tchize_** · 04/11/2014, 12h21

Ce genre de truc? :p
Nom : popup.png
Affichages : 1193
Taille : 114,7 Ko

Les utilisateurs adorent quand toutes les selections se font de la même manière

**OButterlin** · 04/11/2014, 12h39

Oui, dans le genre... mais sans nouvelle fenêtre et avec un passage d'objet directement dans le modèle source, gestion de validation, d'évènement...

Nom : foreignKey.png
Affichages : 1261
Taille : 43,8 Ko

Nom : foreignKey.png
Affichages : 1261
Taille : 43,8 Ko

Il faut bien reconnaître que le composite component permet plein de choses

**GDS_Strou** · 04/11/2014, 13h56

Merci pour les réponses, j'ai à peu près réussi à mettre en page et je suis pas loin du résultat que j'attendais avec ma maquette.
J'ai cependans encore quelques questions.

- lorsque je n'ai aucun event sur une ligne, la ligne diminue en taille (voir GRV ci-dessous). Y a t-il possibilité de désactiver ce rétrécissement ?

- enfin, j'ai trouvé ce bout de code pour mettre ma timeline en français mais où dois-je le placer ? Dans le bean ? CSS ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
PrimeFacesExt.locales.Timeline['fr'] = {
    'MONTHS': ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
    'MONTHS_SHORT': ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
    'DAYS': ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
    'DAYS_SHORT': ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
    'ZOOM_IN': "Zoomer",
    'ZOOM_OUT': "Dézoomer",
    'MOVE_LEFT': "Déplacer à gauche",
    'MOVE_RIGHT': "Déplacer à droite",
    'NEW': "Nouveau",
    'CREATE_NEW_EVENT': "Créer un nouvel évènement"
};

Pièce jointe 160590

**OButterlin** · 04/11/2014, 14h40

Envoyé par GDS_Strou

- lorsque je n'ai aucun event sur une ligne, la ligne diminue en taille (voir GRV ci-dessous). Y a t-il possibilité de désactiver ce rétrécissement ?

Tu dois pouvoir lui donner une hauteur pas un css ou l'attribut "style"

Envoyé par GDS_Strou

- enfin, j'ai trouvé ce bout de code pour mettre ma timeline en français mais où dois-je le placer ? Dans le bean ? CSS ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
PrimeFacesExt.locales.Timeline['fr'] = {
    'MONTHS': ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
    'MONTHS_SHORT': ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
    'DAYS': ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
    'DAYS_SHORT': ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
    'ZOOM_IN': "Zoomer",
    'ZOOM_OUT': "Dézoomer",
    'MOVE_LEFT': "Déplacer à gauche",
    'MOVE_RIGHT': "Déplacer à droite",
    'NEW': "Nouveau",
    'CREATE_NEW_EVENT': "Créer un nouvel évènement"
};

Il faut le mettre dans un bloc <script> dans ta page (de préférence en début)

**GDS_Strou** · 04/11/2014, 16h40

Nickel pour la balise <script>.
Par contre pour la hauteur de ligne j'ai essayé en passant par le CSS et en passant par la page xhtml avec style="" mais pas moyen.
Je continue mes recherches;