Édition de workspace – Ajout de nouveaux icônes

Bonjour à tous,

Si tout comme moi vous avez développé une certaine affinité envers les workspaces et leur conception, ce billet est susceptible de vous intéresser !
Chers consommateurs de workspace, j’ose me laisser croire qu’un jour nous avons tous eu l’envie d’étayer la palette d’icônes proposée de base dans l’outil de conception ; a minima, imaginer une icône autre que celui que vous employez…

Voilà pourquoi nous nous retrouvons donc ce mardi, j’ai décidé il y a peu de chercher une possibilité pour ajouter autant de nouvelles icônes que l’on souhaite, et digne de faire l’objet d’un nouvel article à vous faire lire. Non pas qu’ils soient en quantité restreinte de base, bien au contraire, il peut arriver que l’on imagine une icône bien plus spécifique à son besoin que ce qu’on peut trouver dans la liste actuelle. Voilà la raison de notre rendez-vous !

Menu d’action d’un workspace

Principe

L’idée a été de trouver le SmO qui stockait les images, et de voir ce que l’on pouvait en faire. Le dit smartObject appartient à la catégorie “System” comme une grande partie de ceux-là, il est donc protégé et ne peut être édité. Mais ce n’est pas cela qui nous arrêtera ! J’ai donc construit une vue interactive avec laquelle j’ajoute, modifie ou supprime mes icônes. Il y a toutefois deux importants facteurs à noter :

  • Chaque icône dispose respectivement de trois states :
    • Normal
    • Selected
    • Hover
  • Tout icône ajoutée doit l’être en trois formats :
    • 16 pixels
    • 32 pixels
    • 48 pixels

Nous verrons comment grâce à une vue je peux ajouter mes neuf icônes png d’un seul enregistrement, configuration légèrement fastidieuse mais qui reproduit parfaitement le travail attendu. Conformément aux trois states énumérés ci-dessus, je dois disposer de mon icône en trois couleurs.

Pratique

Les pré-requis pour notre astuce du jour sont :

  • Le designer K2
  • La console de management
  • Un site de redimensionnement d’image
  • Un éditeur d’image

1 ère Étape

Il va s’agir de créer une vue éditable, qui va nous permettre d’ajouter, modifier ou supprimer des icônes ; Oui oui, même ceux présents de base dans votre éditeur de workspace vont pouvoir être modifiés ou supprimés… Attention les hackeurs (haha).

J’accède au SmO comme sur la capture ci-dessous :

Context browser K2 Designer

Déroulez votre context browser côté K2 Designer, comme encerclé de rouge sur la capture ci-dessus, vous devez retrouver le SmO “Workspace Image Library“. Vous l’aurez compris, ce smartObject opère dans le traitement des icônes que l’on retrouve dans la drop-down list de notre concepteur de workspace. (cf.Image ci-dessous)

Concepteur workspace

Une fois le SmO localisé, générez une editable list vue comme celle ci-dessous. Vous avez la possibilité de la mettre en forme si vous en exprimez le besoin, pour notre billet je ne m’attarderai pas dessus.
On possède désormais un affichage sur les données présentes dans le SmO, ne reste plus qu’à interagir avec !
Next step !

Éditable liste vue

NB: Colonne “Check Sum“, lorsque vous exécuterez un get list du SmartObject (sans filtre) vous constaterez que cette colonne est remplie d’une série de chiffres et de lettres. Je n’ai pas centralisé mes recherches sur cette colonne lorsque j’ai distingué que le traitement de nouvelles icônes se déroulait correctement avec, ou sans cette valeur.

2 ème Étape

Intéressons-nous maintenant à l’interaction avec nos données, avant d’expliquer le principe de la vue que j’ai développée pour ajouter des icônes, quelques informations clés pour vous faire gagner du temps :

  • La colonne “Icon ID” nécessite un GUID, qui lui, sera identique pour les neuf lignes qui concerne une icône.

  • La colonne “Name“, le nom doit être aussi identique pour les 9 lignes…

  • La colonne “Class Name” est une concaténation de Name, le GUID (respectivement séparé par “_”) et l’adresse “-com_K2_System_Workspace_SmartObject_ImageLibrary”

  • La colonne “State” correspond donc aux trois couleurs différentes que doit avoir votre icône.

Vous voilà prévenu d’éventuels bugs qui pourraient subvenir, la méthode démontrée ci-dessous n’est pas la seule et unique pratique qui fonctionnerait, le principe est le même, libre à vous de définir votre méthode pour venir interagir avec la table.
Lorsque j’ai généré ma liste éditable j’ai apporté une modification au bouton “Add“, j’ai supprimé les règles qu’il y avait par défaut, pour en ajouter une d’ouverture de subview. (cf. image ci-dessous)

Règle derrière le bouton “Add”

Ceci est l’unique modification que j’ai réalisée dans cette vue pour le billet, l’avantage de générer la vue en mode éditable est que nous bénéficions d’une conception automatique des règles de la part de K2. Les boutons Edit, Delete et Save gardent leurs comportements de base, et c’est exactement ce que l’on voulait.

3ème Étape

Voyons donc quel comportement j’ai affecté à mon item vue. (Cf. image ci-dessous)

Vue d’ajout d’icône

Je commence par renseigner le nom de mon icône, c’est cet intitulé qui apparaîtra dans la drop down list de mon concepteur de workspace. Le champs “Class name” n’a pas à être rempli, cela se fait automatiquement, j’indique que mon icône est disponible universellement par le mot “All” dans les champs “Locale et Theme“.
J’ai inséré le champs “Check Sum” pour qu’il soit disponible si je suis amené à l’utiliser plus tard, il ne me reste plus qu’à ajouter mes trois icônes de couleurs différentes, dans les neuf champs suivants, en 16 pixels, 32 pixels puis 48 pixels.
En pratique, je vais ajouter l’icône “Plane” à ma liste de conception de workspace, celui que vous avez pu voir sous forme de trois photos, en fin de paragraphe, démontrant les trois states possibles en partie “Principe” de l’article.

Ajout de l’icône

J’ai défini le nom de mon icône “AvionPapier”, spécifié “All” dans mes champs “locales et themes” puis j’ai téléversé mon icône en trois formats et couleurs différentes.
Derrière mon bouton “add” j’ai créé indépendamment de ma règle principale (is clicked…) trois règles sans événements déclencheurs, qui, une fois appelées, exécute trois create dans mon SmO, un pour chaque state, et donc trois règles pour les trois formats possibles. J’aurai pu tout faire dans une seule règle, pour des raisons d’organisation et de clarté, je préfère procéder ainsi. (Cf. Image ci-dessous)

Règle When TBT_Add is clicked…

Dans le cas de mon process, j’ai créé un SmartObject “Generate_GUID” qui contient une colonne, GUID, lorsque je clique sur le bouton “Add” j’appelle une règle qui clique sur mon bouton caché “GUID”, qui lui, exécute une règle create. Une fois mon GUID généré je le transfers à un data label, qui le stocke le temps de la création de mon icône, j’exécute ensuite l’appel de mes trois règles indépendantes. Le résultat et le suivant :

Une idée du class name de mon icône : AvionPapier_981def79-2ba6-4dfe-affe-f14e78c02c6a-com_K2_System_Workspace_SmartObject_ImageLibrary
Je vais maintenant vérifier que mon icône est bien été ajouté à la liste déroulante “icons” de conception de workspace, et si tous les states sont biens présents.

Icône “AvionPapier” ajouté

L’icône a bien été ajouté, je peux maintenant l’utiliser pour une application, ou en ajouter d’avantage !

Quelques informations utiles concernant cet article :

  • N’utilisez pas d’espace dans le champs “Name” car cela posera problème lors de la lecture du class name, il commencera la lecture après le dernier espace et ne trouvera pas la cohérence ! Vous pouvez éventuellement créer un pattern de validation.
  • Pour le moment cette astuce n’est pas déployable d’un environnement à un autre, une idea va être mise en place, vous la retrouverez dans les commentaires pour voter !
  • C’est tout pour ce billet, on se retrouve plus tard pour présenter d’autres fonctionnalités.

    Enjoy 

Vincenzo

Consultant Junior Pre-Sales at K2 | Linkedin | Twitter

One thought to “Édition de workspace – Ajout de nouveaux icônes”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.