Outils pour utilisateurs

Outils du site


issue146:inkscape

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
issue146:inkscape [2019/07/16 14:57]
auntiee
issue146:inkscape [2019/07/17 06:56] (Version actuelle)
andre_domenech
Ligne 11: Ligne 11:
 As with the “Embedded scripts” tab, the UI here is sparse and slightly misleading. At the top is an excessively short area that lists any external script files linked to from your document – it should be empty at the moment. Below that is an unlabelled line, with Plus (+) and Minus (-) buttons after it, the latter being disabled at this point. As the name of the tab suggests, this UI is used to link external scripts – i.e. JavaScript code stored in a separate file – to your SVG file. You have probably also guessed that the Plus button adds a file to the list above, whilst the minus button removes it. What isn’t so clear is that the Plus button actually works in three different ways, depending on the content of the unlabelled field, and whether or not your JS file exists yet.** As with the “Embedded scripts” tab, the UI here is sparse and slightly misleading. At the top is an excessively short area that lists any external script files linked to from your document – it should be empty at the moment. Below that is an unlabelled line, with Plus (+) and Minus (-) buttons after it, the latter being disabled at this point. As the name of the tab suggests, this UI is used to link external scripts – i.e. JavaScript code stored in a separate file – to your SVG file. You have probably also guessed that the Plus button adds a file to the list above, whilst the minus button removes it. What isn’t so clear is that the Plus button actually works in three different ways, depending on the content of the unlabelled field, and whether or not your JS file exists yet.**
  
-D'​abord,​ chargez dans Inkscape le fichier SVG du bouton que vous avez créé la dernière fois. Puisouvrez le dialogue Fichier > Propriétés du document et sélectionnez l'​onglet « Scripts ». Dans cette section, assurez-vous que l'​onglet « Scripts externes » est actif.+D'​abord,​ chargez dans Inkscape le fichier SVG du bouton que vous avez créé la dernière fois. Puis ouvrez le dialogue Fichier > Propriétés du document et sélectionnez l'​onglet « Scripts ». Dans cette section, assurez-vous que l'​onglet « Scripts externes » est actif.
  
-Comme pour l'​onglet « Scripts incorporés », l'​interface utilisateur est ici spartiate et légèrement trompeur. En haut il y a une zone excessivement petite où sont listés les fichiers des scripts externes liés à votre document - elle devrait être vide pour l'​instant. Juste en dessous se trouve une ligne sans étiquette, suivie de boutons Plus (+) et Moins (-), ce dernier étant inactif actuellement. Comme le nom de l'​onglet le suggère, cet interface utilisateur est utilisée ​pour relier des scripts externes - c-à-d, du code JavaScript dans un fichier séparé - à votre fichier SVG. Vous avez aussi probablement deviné que le bouton Plus ajoute un fichier à la liste du dessus, alors que le bouton Moins l'​enlève. Ce qui n'est pas clair, c'est que le bouton Plus fonctionne en fait de trois façons différentes,​ selon le contenu du champ sans étiquette et si votre fichier JS existe déjà ou pas.+Comme pour l'​onglet « Scripts incorporés », l'​interface utilisateur est ici spartiate et légèrement trompeur. En haut il y a une zone excessivement petite où sont listés les fichiers des scripts externes liés à votre document - elle devrait être vide pour l'​instant. Juste en dessous se trouve une ligne sans étiquette, suivie de boutons Plus (+) et Moins (-), ce dernier étant inactif actuellement. Comme le nom de l'​onglet le suggère, cet interface utilisateur est utilisé ​pour relier des scripts externes - c-à-d, du code JavaScript dans un fichier séparé - à votre fichier SVG. Vous avez aussi probablement deviné que le bouton Plus ajoute un fichier à la liste du dessus, alors que le bouton Moins l'​enlève. Ce qui n'est pas clair, c'est que le bouton Plus fonctionne en fait de trois façons différentes,​ selon le contenu du champ sans étiquette et si votre fichier JS existe déjà ou pas.
  
 **Method 1: If you just click on the Plus button, you’ll be presented with a file selector dialog. You can then navigate to the directory of your choice and enter a new filename into the file selector. When you accept the content of the file selector (e.g. by clicking the “Open” button), the full path and name of your file will appear in the list at the top of the dialog. NOTE: This does not actually create the file on-disk, so you’ll need to do that manually, opening up the possibility of typos. **Method 1: If you just click on the Plus button, you’ll be presented with a file selector dialog. You can then navigate to the directory of your choice and enter a new filename into the file selector. When you accept the content of the file selector (e.g. by clicking the “Open” button), the full path and name of your file will appear in the list at the top of the dialog. NOTE: This does not actually create the file on-disk, so you’ll need to do that manually, opening up the possibility of typos.
Ligne 21: Ligne 21:
 Method 3: Type something into the unlabelled box, then click the Plus button. Whatever you typed will be added to the list of files at the top of the dialog. Of course, it only really makes sense to type the name (and possibly path) of a JavaScript file, but this field does no error checking so typos and bad paths are all too easy to introduce.** Method 3: Type something into the unlabelled box, then click the Plus button. Whatever you typed will be added to the list of files at the top of the dialog. Of course, it only really makes sense to type the name (and possibly path) of a JavaScript file, but this field does no error checking so typos and bad paths are all too easy to introduce.**
  
-Méthode 1 : Si vous cliquez simplement sur le bouton Plus, un dialogue de sélection de fichier vous est présenté. Vous pouvez alors naviguer jusqu'​au répertoire de votre choix et entrer le nouveau fichier dans le sélecteur de fichier. Quand vous acceptez le contenu du sélecteur de fichier (c-à-d, en cliquant sur le bouton Ouvrir), le chemin complet et le nom du fichier apparaîtront en haut du dialogue. NOTE : Ceci ne crée pas vraiment un fichier sur le disque ; aussi, vous devrez le faire manuellement,​ ouvrant ainsi la possibilité d'​erreurs.+Méthode 1 : Si vous cliquez simplement sur le bouton Plus, un dialogue de sélection de fichier vous est présenté. Vous pouvez alors naviguer jusqu'​au répertoire de votre choix et entrer le nouveau fichier dans le sélecteur de fichier. Quand vous acceptez le contenu du sélecteur de fichier (c'est-à-dire, en cliquant sur le bouton Ouvrir), le chemin complet et le nom du fichier apparaîtront en haut du dialogue. NOTE : Ceci ne crée pas vraiment un fichier sur le disque ; aussi, vous devrez le faire manuellement,​ ouvrant ainsi la possibilité d'​erreurs.
  
 Méthode 2 : C'est la même chose que la méthode précédente,​ sauf que, cette fois, vous utilisez le sélecteur de fichier pour choisir un fichier qui existe déjà. Encore une fois, le chemin complet du fichier est placé au sommet de la liste. L'​avantage ici est que vous ne pouvez pas faire de coquille avec le nom du fichier. Méthode 2 : C'est la même chose que la méthode précédente,​ sauf que, cette fois, vous utilisez le sélecteur de fichier pour choisir un fichier qui existe déjà. Encore une fois, le chemin complet du fichier est placé au sommet de la liste. L'​avantage ici est que vous ne pouvez pas faire de coquille avec le nom du fichier.
Ligne 31: Ligne 31:
 The first two methods, on the other hand, produce absolute paths which will break as soon as the files are moved. And you can’t edit the paths within this dialog – you have to modify them via the XML editor. So not only is there a chance of introducing typos as you edit them, but you have to be comfortable with using the XML editor to do so. Better, I think, to use method 3 and just be careful with what you type.** The first two methods, on the other hand, produce absolute paths which will break as soon as the files are moved. And you can’t edit the paths within this dialog – you have to modify them via the XML editor. So not only is there a chance of introducing typos as you edit them, but you have to be comfortable with using the XML editor to do so. Better, I think, to use method 3 and just be careful with what you type.**
  
-Vous pourriez penser que la méthode 3 est à éviter ​la possibilité de faire une erreur est trop grande. Mais, en pratique, c'est la seule des trois méthodes que je recommande d'​utiliser ! Dans à peu près tous les cas, vous voudrez garder le fichier JavaScript près de votre fichier SVG : si ce n'est pas dans le même répertoire,​ c'est dans un dossier « scripts » ou « ressources » juste en dessous. La troisième méthode vous permet de ne spécifier que le nom du fichier ou un chemin relatif et le nom (par ex, « scripts/​button.js »), qui restera correct si vous déplacez vos fichiers SVG et JS sur une autre machine ou dans un autre endroit de votre disque dur.+Vous pourriez penser que la méthode 3 est à éviter ​la possibilité de faire une erreur est trop grande. Mais, en pratique, c'est la seule des trois méthodes que je recommande d'​utiliser ! Dans à peu près tous les cas, vous voudrez garder le fichier JavaScript près de votre fichier SVG : si ce n'est pas dans le même répertoire,​ c'est dans un dossier « scripts » ou « ressources » juste en dessous. La troisième méthode vous permet de ne spécifier que le nom du fichier ou un chemin relatif et le nom (par ex, « scripts/​button.js »), qui restera correct si vous déplacez vos fichiers SVG et JS sur une autre machine ou dans un autre endroit de votre disque dur.
  
 En revanche, les deux premières méthodes produisent des chemins absolus qui seront erronés dès que les fichiers seront déplacés. Et vous ne pouvez pas modifier les chemins dans le dialogue - vous devez les modifier via l'​éditeur XML. Ainsi, non seulement le risque d'​introduire des coquilles en les modifiant existe, mais vous devez être à l'aise avec l'​éditeur XML pour le faire. Il vaut mieux, je pense, utiliser la méthode 3 en faisant bien attention à ce que vous tapez. En revanche, les deux premières méthodes produisent des chemins absolus qui seront erronés dès que les fichiers seront déplacés. Et vous ne pouvez pas modifier les chemins dans le dialogue - vous devez les modifier via l'​éditeur XML. Ainsi, non seulement le risque d'​introduire des coquilles en les modifiant existe, mais vous devez être à l'aise avec l'​éditeur XML pour le faire. Il vaut mieux, je pense, utiliser la méthode 3 en faisant bien attention à ce que vous tapez.
Ligne 65: Ligne 65:
 Save both files, then reload the SVG file in a web browser, confirming that both elements are visible, and that a click on the button shows the new alert() dialog.** Save both files, then reload the SVG file in a web browser, confirming that both elements are visible, and that a click on the button shows the new alert() dialog.**
  
-Nous voulons que notre bouton pilote un autre objet quand il est cliqué ​ce qui sera plus facile si nous avons un autre objet à piloter ! Dans Inkscape, modifiez le fichier pour ajouter un simple cercle rempli, en vous assurant de lui donner un ID logique via le dialogue des Propriétés de l'​objet (J'ai appelé le mien « redCircle »).+Nous voulons que notre bouton pilote un autre objet quand il est cliquéce qui sera plus facile si nous avons un autre objet à piloter ! Dans Inkscape, modifiez le fichier pour ajouter un simple cercle rempli, en vous assurant de lui donner un ID logique via le dialogue des Propriétés de l'​objet (J'ai appelé le mien « redCircle »).
  
 Par un clic droit sur le bouton, ouvrez le dialogue des Propriétés de l'​objet. En bas, dans la section « Interactivité », enlevez tout code existant, puis, dans le champ « onclick », ajoutez l'​appel de fonction en JavaScript suivant : Par un clic droit sur le bouton, ouvrez le dialogue des Propriétés de l'​objet. En bas, dans la section « Interactivité », enlevez tout code existant, puis, dans le champ « onclick », ajoutez l'​appel de fonction en JavaScript suivant :
Ligne 118: Ligne 118:
 Tentez un essai de changement de couleur en réponse à un appui sur le bouton. Vous pouvez utiliser une classe du CSS et appeler la méthode circle.classList.toggle() pour alternativement l'​appliquer et l'​enlever. C'est semblable à l'​approche que nous avons prise la dernière fois, sauf que nous faisons référence à notre variable objet plutôt qu'à « this ». Mais que ce passe-t-il si nous réglons la couleur du cercle directement,​ plutôt que via une classe ? Vous pouvez relire la valeur de circle.style.fill et tester pour voir quel est actuellement le réglage. Mais il y a de nombreuses façons de définir des couleurs dans le CSS ; aussi, vous pourriez ne pas recevoir le format que vous attendez en retour. Tentez un essai de changement de couleur en réponse à un appui sur le bouton. Vous pouvez utiliser une classe du CSS et appeler la méthode circle.classList.toggle() pour alternativement l'​appliquer et l'​enlever. C'est semblable à l'​approche que nous avons prise la dernière fois, sauf que nous faisons référence à notre variable objet plutôt qu'à « this ». Mais que ce passe-t-il si nous réglons la couleur du cercle directement,​ plutôt que via une classe ? Vous pouvez relire la valeur de circle.style.fill et tester pour voir quel est actuellement le réglage. Mais il y a de nombreuses façons de définir des couleurs dans le CSS ; aussi, vous pourriez ne pas recevoir le format que vous attendez en retour.
  
-Une meilleure approche est de créer une propriété sur cet objet à laquelle vous pouvez vous référer chaque fois que la fonction est appelée. Vous pouvez tester sa valeur actuelle, puis la régler à quelque chose d'​autre avant que votre fonction finisse. Vous n'avez pas besoin d'​imaginer quoi que ce soit de raffiné pour créer une propriété comme celle-ci ​le navigateur la créera dès que vous essayerez de l'​utiliser ​ainsi le code finit par ressembler à ce qui est montré à la page suivante, en bas à gauche.+Une meilleure approche est de créer une propriété sur cet objet à laquelle vous pouvez vous référer chaque fois que la fonction est appelée. Vous pouvez tester sa valeur actuelle, puis la régler à quelque chose d'​autre avant que votre fonction finisse. Vous n'avez pas besoin d'​imaginer quoi que ce soit de raffiné pour créer une propriété comme celle-cile navigateur la créera dès que vous essayerez de l'​utiliser ​ainsi le code finit par ressembler à ce qui est montré à la page suivante, en bas à gauche.
  
 **The first time you click the button the “isOn” property doesn’t exist. That means the test in the “if” statement fails, and the code in the “else” runs – setting the color to green, and creating the “isOn” property, with a value of “true”. The next time you click the button the “if” succeeds, the fill is set to red and the property is set to “false”. Thereafter the color and property will continue to toggle each time you click the button. **The first time you click the button the “isOn” property doesn’t exist. That means the test in the “if” statement fails, and the code in the “else” runs – setting the color to green, and creating the “isOn” property, with a value of “true”. The next time you click the button the “if” succeeds, the fill is set to red and the property is set to “false”. Thereafter the color and property will continue to toggle each time you click the button.
Ligne 124: Ligne 124:
 One important thing to note as we’ve been editing this code is that you haven’t had to go anywhere near Inkscape since the initial setup. This is one big advantage of using external, linked scripts, as there’s less chance of accidentally making changes to your SVG file. You also get all the benefits of using a proper text editor: with any half-decent editor you should get syntax highlighting and other aids, which can help to indicate problems in your code. Plus, being able to work in a proper sized window, rather than the single line of the Object Properties dialog or the letterbox of Inkscape’s Embedded Scripts tab, is a huge advantage.** One important thing to note as we’ve been editing this code is that you haven’t had to go anywhere near Inkscape since the initial setup. This is one big advantage of using external, linked scripts, as there’s less chance of accidentally making changes to your SVG file. You also get all the benefits of using a proper text editor: with any half-decent editor you should get syntax highlighting and other aids, which can help to indicate problems in your code. Plus, being able to work in a proper sized window, rather than the single line of the Object Properties dialog or the letterbox of Inkscape’s Embedded Scripts tab, is a huge advantage.**
  
-La première fois que vous cliquez sur le bouton, la propriété « isOn » n'​existe pas. Ça signifie que le test de la déclaration « if » échoue, et le code de « else » s'​exécute ​réglant la couleur en vert et créant la propriété «isOn », avec la valeur « true » (vrai). La prochaine fois que vous cliquez sur le bouton, le « if » est un succès, le remplissage devient rouge et la propriété est mis à « false » (faux). Par la suite, la couleur et la propriété continueront de permuter à chaque fois que vous cliquerez sur le bouton.+La première fois que vous cliquez sur le bouton, la propriété « isOn » n'​existe pas. Ça signifie que le test de la déclaration « if » échoue, et le code de « else » s'​exécuteréglant la couleur en vert et créant la propriété «isOn », avec la valeur « true » (vrai). La prochaine fois que vous cliquez sur le bouton, le « if » est un succès, le remplissage devient rouge et la propriété est mis à « false » (faux). Par la suite, la couleur et la propriété continueront de permuter à chaque fois que vous cliquerez sur le bouton.
  
-Une chose importante à noter lors de la modification de ce code, c'est que vous n'avait pas eu à vous approcher d'​Inkscape depuis le paramétrage initial. C'est un des gros avantages de l'​utilisation des scripts externes liés, car il y a moins de chances de faire des modifications accidentelles dans le fichier SVG. Vous avez aussi tous les bénéfices de l'​utilisation d'un éditeur de texte adapté : avec un éditeur à moitié convenable, vous aurez la mise en valeur de la syntaxe et d'​autres aides, ce qui peut aider à signaler des problèmes dans votre code. En plus, en étant capable de travailler dans une fenêtre de taille correcte, plutôt que sur l'​unique ligne du dialogue des Propriétés de l'​objet ou le petit cadre de l'​onglet Scripts incorporés d'​Inkscape,​ vous disposez d'un énorme avantage.+Une chose importante à noter lors de la modification de ce code, c'est que vous n'avez pas eu à vous approcher d'​Inkscape depuis le paramétrage initial. C'est un des gros avantages de l'​utilisation des scripts externes liés, car il y a moins de chances de faire des modifications accidentelles dans le fichier SVG. Vous avez aussi tous les bénéfices de l'​utilisation d'un éditeur de texte adapté : avec un éditeur à moitié convenable, vous aurez la mise en valeur de la syntaxe et d'​autres aides, ce qui peut aider à signaler des problèmes dans votre code. En plus, en étant capable de travailler dans une fenêtre de taille correcte, plutôt que sur l'​unique ligne du dialogue des Propriétés de l'​objet ou le petit cadre de l'​onglet Scripts incorporés d'​Inkscape,​ vous disposez d'un énorme avantage.
  
 **When deploying an SVG file with a linked script, you need to make sure that the script is still accessible to the SVG file once it’s on to your web server – typically by ensuring you use a relative path as outlined at the top of this article. You have to make sure you remember to keep your JS file in sync with any changes to your SVG file or its location. But this additional housekeeping is usually more than worth it. Generally, unless you really are writing only a single line of code, or perhaps a single, short function, linking is the way to go.** **When deploying an SVG file with a linked script, you need to make sure that the script is still accessible to the SVG file once it’s on to your web server – typically by ensuring you use a relative path as outlined at the top of this article. You have to make sure you remember to keep your JS file in sync with any changes to your SVG file or its location. But this additional housekeeping is usually more than worth it. Generally, unless you really are writing only a single line of code, or perhaps a single, short function, linking is the way to go.**
  
-Lors du déploiement d'un fichier SVG avec un script lié, vous devez vous assurer que le script reste accessible au fichier SVG une fois qu'il est chargé dans votre navigateur Web typiquement en vous assurant que vous utilisez un chemin relatif comme souligné au début de cet article. Assurez-vous de vous souvenir de garder votre fichier JS synchronisé avec tous les changements dans votre fichier SVG ou de sa localisation. Mais cette maintenance supplémentaire vaut en général largement le coup. Dans l'​ensemble,​ sauf si vous n'​écrivez réellement qu'une seule ligne de code, ou peut-être une seule et courte fonction, le lien est la bonne manière de faire. ​+Lors du déploiement d'un fichier SVG avec un script lié, vous devez vous assurer que le script reste accessible au fichier SVG une fois qu'il est chargé dans votre navigateur Webtypiquement en vous assurant que vous utilisez un chemin relatif comme souligné au début de cet article. Assurez-vous de vous souvenir de garder votre fichier JS synchronisé avec tous les changements dans votre fichier SVG ou de sa localisation. Mais cette maintenance supplémentaire vaut en général largement le coup. Dans l'​ensemble,​ sauf si vous n'​écrivez réellement qu'une seule ligne de code, ou peut-être une seule et courte fonction, le lien est la bonne manière de faire. ​
  
issue146/inkscape.txt · Dernière modification: 2019/07/17 06:56 par andre_domenech