Funkycomponents
Description
Les FunkyComponents sont une suite de composants ergonomiques que je viens de créer et qui ont pour vocation d'être assez jolis.
Les FunkyComponents regroupent 3 composants pour l'instant :
Le FunkyContainer
le FunkySimpleContainer
et le FunkyLabel
Le FunkyLabel est une étiquette de texte permettant d'avoir un fond en dégradé, et un texte en dégradé de couleurs aussi.
Le FunkySimpleContainer est un composant conteneur dont il est possible de dévinir la couleur de bordure et de fond. Chacune de ces deux couleurs peuvent être un dégradé de couleurs?
Le FunkyContainer, quand à lui, est une version plus élaborée du FunkySimpleContainer. C'est aussi un contrôle conteneur, mais il est possible d'en modifier bien plus d'attributs. En voici la description précise :
Le FunkyContainer est composé d'un header (qui peut correspondre à la partie supérieure d'une fenêtre, par exemple), d'un Container, c'est-à-dire la partie centrale, et d'un footer (qui peut correspondre à une barre de status, pas exemple.
Pour chacun de ces trois éléments, il est possible de définit deux couleurs, qui vont aller en dégradé. L'orientation du dégradé peut-être choisie entre quatres possibilités (horizontal, vertical, et les deux diagonalles).
Le fond du header, du container, et du footer peuvent être assorties d'une texture. A ce propos, je vous conseille d'utiliser des images png transparentes, ou semi-transparentes. Ceci vous permettra d'avoir une texture de fond avec une couleur dégradée. Celà peut faire assez joli.
Le header et le footer peuvent être assorties d'une image, ou plutôt d'une icône.
Le texte du header et du footer peuvent être paramêtrés pour utiliser n'importe quelle police, et taille de police. Il est aussi possible d'utiliser un dégradé de couleurs pour les textes. Enfin, il est possible d'ajouter des décallages à gauche, et en haut/bas, pour mêttre le texte à peu près ou vous voulez.
Le header est aussi agrémenté de plusieurs boutons :
Le bouton Close,
le bouton collapse,
le bouton agrandir,
le bouton réduire,
le bouton tray.
Sur chacun de ces boutons existent des évènements, qui vous pourrez récupérer. Pour ceux qui ne connaissent pas l'utilité de ces boutons, en voici quelques explications :
close : fermer (facile, hein ?).
collapse : c'est un bouton d'enroulement de la fenêtre sur elle même. Le composant devient alors une barre que l'on peut dérouler en appuyant sur le même bouton. En d'autres termes, ce bouton permet de réduire la taille du composant à une barre simple, et ensuite à revenir à la taille initiale.
agrandir : correspond au bouton agrandir de n'importe quelle application windows.
réduire : permet de réduire dans la barre des tâches.
tray : ce bouton sert générallement à mettre une application en Systray (en icone près de l'heure, dans la barre de menu démarrer).
A propos de ces boutons, il peuvent avoir des comportements différents selon l'endroit sur lesquels ils sont posés. Par exemple, si le FunkyContainer est directement posé sur une formn alors le bouton agrandir agrandira la form en question (pour la rendre "maximized") et le composant lui même. Si le composant est dans un autre contrôle conteneur, alors le composant sera agrandi pour tenir dans le contrôle conteneur et en occuper la plus grande superficie possible (en fait, on fait un Dock.Fill).
Chacun de ces boutons ont diverses propriétés, comme par exemple la couleur de fond (en dégradé), la couleur de fond quand la souris est dessus (en dégradé), la couleur de fond quand ils sont enfoncés (en dégradé aussi), et la couleur de bordure (quand ils sont normaux, quand la souris est dessus, et quand ils sont enfoncés, ces 3 couleurs sont en dégradés). Ils ont aussi chacun une taille propre. Vous pouvez faire un bouton close 3 fois plus grand que le bouton collapse, si ca vous chante. Il est aussi possible de définir une couleur pour le dessin du bouton (par ex. la croix du bouton close, les chevrons du bouton collapse, ...).
Les autres possibilités de ce contrôles sont les suivantes :
Il est possible d'assigner une action lorsque l'utilisateur double clique sur la barre de header. Lorsque ceci se produit, soit le contrôle ne fait rien, soit il s'agrandit, soit il se collapse (il s'enroule).
Il est aussi possible de définir des options de mouvement :
- Aucun mouvement : le contrôle ne peut être bougé,
- self : le controle peut être bougé lorsque l'utilisateur l'attrape par le header,
- TotalSelf : le contrôle peut-être bougé par l'utilisateur, même si l'utilisateur l'attrape par un autre endroit que le header.
- Parent et TotalParent : le principe est le même, mais ici, c'est le contrôle parent qui est bougé.
- Form et TotalForm : même principe, mais ici, c'est la fenêtre conteneuse qui bouge (donc tout bouge).
Vous noterez que si le contrôle est posé à même la form, alors le contrôle parent EST la form elle-même. Ceci signifie que Parent et TotalParent auront respectivement les mêmes effets que Form et TotalForm.
Il est possible aussi de permettre ou non le redimensionnement du contrôle. D'ailleurs, pour celà, il faut bien entendu attraper un des bord du composant. Plus le bord est large (ceci est paramêtrable), plus le composant sera facile à "étirer".
Bien sûr, vous constatez qu'il y a un grand nombre de paramêtres possibles. Il est donc très long de paramêtrer tous ses FunkyContainers les uns à la suite des autres. Pour celà, un système très interessant a été mis en place. Il s'agit de la possibilité de charger des thèmes et de les sauvegarder. Il est possible de charger un thème depuis un fichier, mais aussi depuis un flux. A quoi celà sert-il ? et bien celà vous permet de charger simplement votre thème depuis vos ressources. Ainsi, un même thème peut être appliqué à plusieurs FunkyContainers.
Exemple :
Vous avez mis dans vos ressources le thème nommé "xptheme". Pour l'appliquer au FunkyContainer nommé funkyContainer1, il suffit de faire ceci :
Assembly a = Assembly.GetExecutingAssembly();
string [] resNames = Assembly.GetExecutingAssembly().GetManifestResourceNames();
foreach(string s in resNames){
if(s == "xptheme"){
Console.WriteLine(s);
Stream str = a.GetManifestResourceStream(s);
this.funkyContainer1.LoadConfigFromStream(str);
str.Close();
str = null;
}
}
Oui, mais comment créer des thèmes ? La librairie FunkyComponents est livrée avec une application (TestGraph). Celle-ci vous permet de choisir toutes les propriétés de votre FunkyContainer, et d'enregistrer la config dans un fichier. Ce fichier et en fait un zip, il n'est donc pas nécessaire de rezipper le thème créé par la suite. Le fichier que vous sauvegarderez contiendra aussi toutes les icones, images et diverses textures utilisées dans votre thème. Certains programmeurs rêvent parfois de faire des applications skinnables. Les funkyContainers permettent de mêttre en place ce genre de chose. Il est aussi à noter que vous pouvers indiquer votre nom, et celui de votre thème dans ses propriétés. La copie d'écran que vous pouvez voir est l'application testGraph.
Bien sûr, j'adorerai que mon projet soit utilisé par un grand nombre de personnes, et j'aimerai aussi disposer d'un site internet permettant aux divers utilisateurs d'échanger leurs skins. Ce serait sympa... J'espère aussi que vous pourrez compiler tout ca chez vous. A ce propos, n'oubliez pas que parfois, certaines ressources du projet peuvent être "oubliées" par SharpDevelop s'il ne retrouve pas ses billes (noms de répertoires qui changent, ect...). Il faudra donc que vous remédiez à ceci vous même si vous voulez recompiler les FunkyComponents, mais sachez par avance que tous ce dont vous avez besoin est contenu dans le zip.
Dernière note : Comme je l'ai dit précédemment, tout ceci a été conçu au moyen de SharpDevelop. Il vous faudra aussi le FrameWork version 2.
J'espère que vous trouverez ce composant assez sympa, et je m'excuse par avance si le code n'est pas extrèmement clair/commenté. Cette librairie est plus destinée à l'utilisation qu'à des fins pédagogiques, mais vous pouvez bien entendu gratouiller vous même le code.
Bon, j'ai fait un peu long, mais mon composant à pas mal de propriétés et possibilités. Si j'explique pas, on peut me le reprocher, et ca pourrait peut-être me nuire pour une bonne note (ou un trophé ?) ;-D
Bon codage !
Yoann
Le composant est dessiné au moyen de l'API windows GDI+. Cette source est compilée avec Le FrameWork 2 et SharpDevelop. La librairie utilise aussi la SharpZipLib, qui est une librairie de zippage, fournie avec SharpDevelop.
Les FunkyComponents regroupent 3 composants pour l'instant :
Le FunkyContainer
le FunkySimpleContainer
et le FunkyLabel
Le FunkyLabel est une étiquette de texte permettant d'avoir un fond en dégradé, et un texte en dégradé de couleurs aussi.
Le FunkySimpleContainer est un composant conteneur dont il est possible de dévinir la couleur de bordure et de fond. Chacune de ces deux couleurs peuvent être un dégradé de couleurs?
Le FunkyContainer, quand à lui, est une version plus élaborée du FunkySimpleContainer. C'est aussi un contrôle conteneur, mais il est possible d'en modifier bien plus d'attributs. En voici la description précise :
Le FunkyContainer est composé d'un header (qui peut correspondre à la partie supérieure d'une fenêtre, par exemple), d'un Container, c'est-à-dire la partie centrale, et d'un footer (qui peut correspondre à une barre de status, pas exemple.
Pour chacun de ces trois éléments, il est possible de définit deux couleurs, qui vont aller en dégradé. L'orientation du dégradé peut-être choisie entre quatres possibilités (horizontal, vertical, et les deux diagonalles).
Le fond du header, du container, et du footer peuvent être assorties d'une texture. A ce propos, je vous conseille d'utiliser des images png transparentes, ou semi-transparentes. Ceci vous permettra d'avoir une texture de fond avec une couleur dégradée. Celà peut faire assez joli.
Le header et le footer peuvent être assorties d'une image, ou plutôt d'une icône.
Le texte du header et du footer peuvent être paramêtrés pour utiliser n'importe quelle police, et taille de police. Il est aussi possible d'utiliser un dégradé de couleurs pour les textes. Enfin, il est possible d'ajouter des décallages à gauche, et en haut/bas, pour mêttre le texte à peu près ou vous voulez.
Le header est aussi agrémenté de plusieurs boutons :
Le bouton Close,
le bouton collapse,
le bouton agrandir,
le bouton réduire,
le bouton tray.
Sur chacun de ces boutons existent des évènements, qui vous pourrez récupérer. Pour ceux qui ne connaissent pas l'utilité de ces boutons, en voici quelques explications :
close : fermer (facile, hein ?).
collapse : c'est un bouton d'enroulement de la fenêtre sur elle même. Le composant devient alors une barre que l'on peut dérouler en appuyant sur le même bouton. En d'autres termes, ce bouton permet de réduire la taille du composant à une barre simple, et ensuite à revenir à la taille initiale.
agrandir : correspond au bouton agrandir de n'importe quelle application windows.
réduire : permet de réduire dans la barre des tâches.
tray : ce bouton sert générallement à mettre une application en Systray (en icone près de l'heure, dans la barre de menu démarrer).
A propos de ces boutons, il peuvent avoir des comportements différents selon l'endroit sur lesquels ils sont posés. Par exemple, si le FunkyContainer est directement posé sur une formn alors le bouton agrandir agrandira la form en question (pour la rendre "maximized") et le composant lui même. Si le composant est dans un autre contrôle conteneur, alors le composant sera agrandi pour tenir dans le contrôle conteneur et en occuper la plus grande superficie possible (en fait, on fait un Dock.Fill).
Chacun de ces boutons ont diverses propriétés, comme par exemple la couleur de fond (en dégradé), la couleur de fond quand la souris est dessus (en dégradé), la couleur de fond quand ils sont enfoncés (en dégradé aussi), et la couleur de bordure (quand ils sont normaux, quand la souris est dessus, et quand ils sont enfoncés, ces 3 couleurs sont en dégradés). Ils ont aussi chacun une taille propre. Vous pouvez faire un bouton close 3 fois plus grand que le bouton collapse, si ca vous chante. Il est aussi possible de définir une couleur pour le dessin du bouton (par ex. la croix du bouton close, les chevrons du bouton collapse, ...).
Les autres possibilités de ce contrôles sont les suivantes :
Il est possible d'assigner une action lorsque l'utilisateur double clique sur la barre de header. Lorsque ceci se produit, soit le contrôle ne fait rien, soit il s'agrandit, soit il se collapse (il s'enroule).
Il est aussi possible de définir des options de mouvement :
- Aucun mouvement : le contrôle ne peut être bougé,
- self : le controle peut être bougé lorsque l'utilisateur l'attrape par le header,
- TotalSelf : le contrôle peut-être bougé par l'utilisateur, même si l'utilisateur l'attrape par un autre endroit que le header.
- Parent et TotalParent : le principe est le même, mais ici, c'est le contrôle parent qui est bougé.
- Form et TotalForm : même principe, mais ici, c'est la fenêtre conteneuse qui bouge (donc tout bouge).
Vous noterez que si le contrôle est posé à même la form, alors le contrôle parent EST la form elle-même. Ceci signifie que Parent et TotalParent auront respectivement les mêmes effets que Form et TotalForm.
Il est possible aussi de permettre ou non le redimensionnement du contrôle. D'ailleurs, pour celà, il faut bien entendu attraper un des bord du composant. Plus le bord est large (ceci est paramêtrable), plus le composant sera facile à "étirer".
Bien sûr, vous constatez qu'il y a un grand nombre de paramêtres possibles. Il est donc très long de paramêtrer tous ses FunkyContainers les uns à la suite des autres. Pour celà, un système très interessant a été mis en place. Il s'agit de la possibilité de charger des thèmes et de les sauvegarder. Il est possible de charger un thème depuis un fichier, mais aussi depuis un flux. A quoi celà sert-il ? et bien celà vous permet de charger simplement votre thème depuis vos ressources. Ainsi, un même thème peut être appliqué à plusieurs FunkyContainers.
Exemple :
Vous avez mis dans vos ressources le thème nommé "xptheme". Pour l'appliquer au FunkyContainer nommé funkyContainer1, il suffit de faire ceci :
Assembly a = Assembly.GetExecutingAssembly();
string [] resNames = Assembly.GetExecutingAssembly().GetManifestResourceNames();
foreach(string s in resNames){
if(s == "xptheme"){
Console.WriteLine(s);
Stream str = a.GetManifestResourceStream(s);
this.funkyContainer1.LoadConfigFromStream(str);
str.Close();
str = null;
}
}
Oui, mais comment créer des thèmes ? La librairie FunkyComponents est livrée avec une application (TestGraph). Celle-ci vous permet de choisir toutes les propriétés de votre FunkyContainer, et d'enregistrer la config dans un fichier. Ce fichier et en fait un zip, il n'est donc pas nécessaire de rezipper le thème créé par la suite. Le fichier que vous sauvegarderez contiendra aussi toutes les icones, images et diverses textures utilisées dans votre thème. Certains programmeurs rêvent parfois de faire des applications skinnables. Les funkyContainers permettent de mêttre en place ce genre de chose. Il est aussi à noter que vous pouvers indiquer votre nom, et celui de votre thème dans ses propriétés. La copie d'écran que vous pouvez voir est l'application testGraph.
Bien sûr, j'adorerai que mon projet soit utilisé par un grand nombre de personnes, et j'aimerai aussi disposer d'un site internet permettant aux divers utilisateurs d'échanger leurs skins. Ce serait sympa... J'espère aussi que vous pourrez compiler tout ca chez vous. A ce propos, n'oubliez pas que parfois, certaines ressources du projet peuvent être "oubliées" par SharpDevelop s'il ne retrouve pas ses billes (noms de répertoires qui changent, ect...). Il faudra donc que vous remédiez à ceci vous même si vous voulez recompiler les FunkyComponents, mais sachez par avance que tous ce dont vous avez besoin est contenu dans le zip.
Dernière note : Comme je l'ai dit précédemment, tout ceci a été conçu au moyen de SharpDevelop. Il vous faudra aussi le FrameWork version 2.
J'espère que vous trouverez ce composant assez sympa, et je m'excuse par avance si le code n'est pas extrèmement clair/commenté. Cette librairie est plus destinée à l'utilisation qu'à des fins pédagogiques, mais vous pouvez bien entendu gratouiller vous même le code.
Bon, j'ai fait un peu long, mais mon composant à pas mal de propriétés et possibilités. Si j'explique pas, on peut me le reprocher, et ca pourrait peut-être me nuire pour une bonne note (ou un trophé ?) ;-D
Bon codage !
Yoann
Conclusion :
Le composant est dessiné au moyen de l'API windows GDI+. Cette source est compilée avec Le FrameWork 2 et SharpDevelop. La librairie utilise aussi la SharpZipLib, qui est une librairie de zippage, fournie avec SharpDevelop.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.