Composant de planning

1 pièce(s) jointe(s)

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 :

Pièce jointe 159452

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.

Citation:

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.

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.

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

1 pièce(s) jointe(s)

merci pour la réponse je n'avais pas regardé du côté des extensions, celle-ci semble pas mal :
Pièce jointe 160509

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.

Citation:

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:

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

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...

Citation:

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:

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);
Citation:

...
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 */
}
...

Citation:

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 :ptdr: C'est saint Nicolas avant l'heure là

Citation:

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 :ptdr: C'est saint Nicolas avant l'heure là

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

Citation:

Envoyé par OButterlin

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

:whistle:

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à ;)

Citation:

Envoyé par tchize_

:whistle:

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...)

1 pièce(s) jointe(s)

Ce genre de truc? :p
Pièce jointe 160584

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

1 pièce(s) jointe(s)

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...

Pièce jointe 160585

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

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:

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

Citation:

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"
Citation:
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:

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)

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;

Citation:

Envoyé par OButterlin

Oui, dans le genre... mais sans nouvelle fenêtre

Hooo, on a presque envie de cliquer dedans et de la bouger :mouarf:

Citation:

Envoyé par tchize_

Hooo, on a presque envie de cliquer dedans et de la bouger :mouarf:

Et en plus, elle peut le faire ! :ptdr:

C'est une barre de faire en haut? :ptdr:

Citation:

Envoyé par tchize_

C'est une barre de faire en haut? :ptdr:

Ben woui... et pour l'achat de 2 barres de fer, vous avez... 2 barres de fer (mortelle la vidéo :mouarf:)