In this episode I’m discussing Panels vs. Commands in Vanilla JS UXP plugins and the way they are expressed in the
If you find this content useful, please consider supporting me – 2020 is a hell of a year. I don’t have a Patreon page, but I’ve got two fairly cheap plugins on the Photoshop Marketplace, ALCE (Advanced Local Contrast Enhancer) and Double USM (on sharpening). If you happen to buy them, please leave a positive rating/review, it would greatly help. Or, you can
If you cannot, or don’t want to, that’s OK anyway.
Stay safe and thanks! 🙏🏻
The whole series so far
- #01 – Rundown on the UXP announcement @ the Adobe MAX 2020
- #02 - Documentation
- #03 - UXP Developer Tool
- #04 - Commands vs. Panels and the manifest.json
- #05 - Sync vs. Async code in Photoshop DOM Scripting
- #06 - BatchPlay (part 1): the ActionManager roots
- #07 - BatchPlay (part 2): Alchemist as a UXP Script Listener
- #08 - BatchPlay (part 3): Alchemist as a UXP Inspector
- #09 - Adobe Spectrum UXP
- #10 - Modal Dialogs
- #11 - Flyout Menus and Entrypoints
- #12 - React JS and the UXP plugins Course
- #13 - Manifest v5
- #special - The UXP Landscape Guide
The transcripted video looks weird, but I’m told it helps to have it anyway because it’s easier to translate to other languages. Apologies for the lack of punctuation and the sloppy syntax.
and then I want the write layers to disk which is equal to write layer to disk and then duplicate this and then do the same with show alert which is here let me save this and in the index.js I need to do something quite close to that so instead of entrypoints and requiring UXP we are requiring the lib that sits in the same folder as this index.js and we are interested in the show alert and in the write layers
with a capital L so this should work fine we are watching for changes and if I click this the alert pops up and if I click the other it doesn’t so something is missing let me try to understand what write layers
property that in turn contains an object again that has this time the id the id of the panel and again be aware that we’re not talking about the idea of the plugin but the id of the panel which is hello world okay so this here and this one is going to have an object and in here we have a show function and in this show function what do I want to do I don’t know just maybe show an alert and show alert again is just a wrapper for the require Photoshop app show alert so show alerts and I don’t know showing like that okay so let me save am I watching this plugin I doubt in fact I’m not watching let me watch for changes and let me save again just to trigger the watch and it says showing now very important thing don’t think that this function shows every time that the panel is closed and reopened because it won’t let me close the kitchen sink the hello world sample is here you see it doesn’t and the reason why is that this shows only the first time because UXP panels are persistent by default if you have experience with CEP panels you know that the initialization code that they might contain would run each time that you reopen them unless they are persistent in which case the init code runs just once while UXP panels are persistent by default so no matter how many times that you close and reopen them this show will run just once if you want to run code based on the show hide status you have to follow a different path that we might look at in a future video so the bottom line is that this show alert just run once okay okay let me recap what we have seen so far we can have plugins that contain just commands scripts must be wrapped with UXP plugins and this is how to do it you can have more than one command inside the same UXP plugin and we’ve also seen how to export functions to be imported with this require syntax and the object destructuring syntax here then we have this hello world panel sample where instead we have panels as opposed to commands and this is defined by the type we still have the id and we can have this entrypoints set up panels and the show function again this must match the string that is found in the manifest.json right and then in the kitchen sync example we have seen a plugin that contains both a command and a panel and the way that the two are set up in the entrypoints setup right? OK I think this is it for this time I hope you have learned something new and if this is the case please consider
supporting me I want to thank all the people who made a donation there’s a button on my website it’s been truly very much appreciated you can also purchase ALCE and DoubleUSM in the Photoshop marketplace and if you happen to buy them please leave a positive rating or a review which will always help very much as well. Okay thanks for watching and see you in the next one. Bye!