Boethos
Current Status Announcement/Warning:
Version 1.94 is up. It adds the ability to use "multiline" in the theme property of CrossUI Labels (there is no "multiLines" property in CrossUI Labels). Make sure you reload the code page; your browser (please use Firefox) may be using a cached version of the page.Current Version 1.93! Make sure you reload the code page. On April 13th, 2013, I had to adjust the code to work with the new "CrossUI" update to the linb UIBuilder, which is now called "CrossUI", not jslinb UIBuilder. Better name. Unless you think it gives the impression that it is an angry UI Builder. But seriously, it broke my code. No problem; it was a quick fix (and, to be honest, I don't even know what the problem was. Ain't programming grand?). As a consequence of this update, all references to jsLinb will be slowly changed to read "CrossUI", starting with the text in this document, below this line.
Happy '13, everyone! On January 15 2013, I updated Boethos to version 1.8. Then, on January 16, I updated it to 1.9 (to fix a pretty amateurish error). Make sure you refresh the Boethos code page and that you see the correct version! This update includes a few cosmetic improvements, but the most important improvement is that the Panel/Palette code generated now works as either UIPanels or Palettes. You can test this in After Effects by generating a UI, choosing the "palette/dockable panel" option, save that text as a .jsx file, put it in your AE "Scripts/ScriptUI Panels" folder, open AE, choose the panel from the Window menu, and see it as a dockable panel. Then choose the script from the File menu and see it load as a palette.
And Text Area inputs in CrossUI automatically work as multiline edittext, which has always been the case, but I neglected to show this in the table below and the Quick Reference graphic.
Also, it's probably necessary to point out that if you use Safari or Chrome, pasting into the CrossUI code view can only be done by right-clicking and choosing "Paste" from the popup menu. At least on a Mac. Firefox works perfectly.
On October 20, 2012, I temporarily removed the default reference widget from Boethos, because a bug appeared which prevented Boethos from working when the original code (version 1.4) was used. The newest version, 1.6 is now up, which restores the default reference widget. If you do not see version 1.6, you may need to reload the Boethos code page in your browser.
I have tested pretty extensively on Mac OSX on various browsers, and find that FireFox works best (or ... works). I have done a little testing of the built jsx code on Windows (in ExtendScript Toolkit), but with early versions (why does Windows seem to only allow left-justified text??). Any feedback regarding this issue is appreciated (but I do hope to get to a Windows box with CS5 on it soon). The UI changed considerably from CS4 to CS5 on both platforms, so Boethos is somewhat usable but not recommended on CS4 or earlier. Of course you are welcome to go right ahead and use Boethos for CS4 (or even earlier *gulp*) and make adjustments to the code in your favorite code editor. At version 1.3 I added a little more error correction, mostly to catch for single quotes and badly formatted "alias" properties. Version 1.4 has better slider and scrollbar code (default value, min, max).
Q: "First of all, how the heck is that pronounced?"
Any way you want, really. Click to hear my best effort at getting an official Greek pronunciation:
Q: "What is it?"
Boethos is a big chunk of JavaScript code designed to be plugged into the CrossUI UI Builder in order to rapidly create working JavaScript user interface ("jsx") code for certain Adobe CS apps, especially After Effects. Go to the bottom of this page for the code.
Q: "How much does it cost to use?"
Nothing. Donations are happily, in fact, giddily accepted ...
Q: "Who made this? Who are you?"
I did. Christopher Green (http://www.crgreen.com).
Q: "What crossui widgets can I use? All of them?"
Not all of them. In fact, a relatively small subset:
|
Valid Widgets |
jsx Equivalents |
Important crossui Widget Properties |
|
"Label:Advanced" |
"statictext" |
alias, caption, halign, theme (only "multiline") |
|
"Button:Advanced" |
"button" |
alias, caption |
|
"CheckBox:Advanced" |
"checkbox" |
alias, caption, value |
|
"CheckBox:Advanced" (theme: radio) |
"radiobutton" |
alias, caption, theme (only "radio"), value |
|
"Input" |
"edittext" |
alias, value, multiLines |
|
"Text Area" |
"edittext" |
alias, value (multilines by default) |
|
"Input:Password Input" |
"edittext" (noecho=true) |
alias, value |
|
"ComboInput:Drop List Input" |
"dropdownlist" |
alias |
|
"List" |
"listbox" |
alias |
|
"List" (theme: treeview) |
"treeview" |
alias, theme (only "treeview") |
|
"ProgressBar" |
"progressbar" |
alias |
|
"Slider" |
"slider" |
alias |
|
"Slider:Vertical Slider" |
"scrollbar" |
alias |
|
"Block" |
"panel" (no title) |
alias, borderType*, theme (use for jsx borderStyle)* |
|
"Group" |
"panel" (titled) |
alias, caption, theme (use for jsx borderStyle)* |
|
"Image" |
"image" |
alias, src |
*You may use the crossui borderType property (which is different from the CS convention, of course, so they are translated into the closest equivalent), or (better yet) enter the CS jsx borderStyle property ("black", "etched", "gray", "raised", or "sunken") in the crossui widget's theme property field. Using the theme method is better because it is easier, faster, and works for both Blocks and Groups.
Q: "The written word nauseates me. Do you have a lively, entertaining movie I can watch that will explain how this works?"
Not yet.
Q: "Can I do this offline?"
Boethos requires the crossui "back-end" (PHP, Java or C#) to be running; that is what builds and runs the "Single Page Application" when you click the big "Debug" (formerly "Run") button. You can always install the back-end code on your machine locally. It is available on the crossui website. I have almost no connection to the brilliant folks who created CrossUI, so I am not inclined to help with doing this kind of thing (I have yet to do it myself), but I am sure it is pretty straight forward.
Q: "What potential problems should I be aware of?"
Here is a list of caveats:
- This is intended to work with, and tested on, After Effects CS 5.0 or later.
- Do not use "Simple" widgets; use "Advanced" widgets (this applies to Label, Button & Checkbox).
- Do not use the Radio Group; use Checkbox and enter "radio" in its "theme" property to render those buttons as radio buttons in jsx.
- In the CS JavaScript API (jsx), a "panel" control can be titled or untitled. In crossui, use "Group" for a titled panel, use "Block" for an untitled panel. Note that there is a UI control known as a "Group" in jsx, which is essentially the same as an untitled Panel (or a Block in crossui), but Boethos does not support it. The crossui "Panel" and the jsx "Panel" are not the same, and should not be confused with each other (the difference between jsx and crossui Groups and Panels is confusing, so get used to using Groups and Blocks in crossui to render titled and untitled panels, respectively, in jsx).
- The (horizontal) Slider will be rendered as a slider; the Vertical Slider will be rendered as a scrollbar.
- In crossui, a List (not "Multimode") will be rendered as a listbox. If you enter "treeview" in its theme property, it will be rendered as a treeview control. A "Combo Input" -- sub-category "Drop List Input" -- will be rendered as a dropdownlist in jsx.
- On the jsx side, listbox and dropdownlist controls are given generic three-item arrays. A treeview is given several lines of code to add generic hierarchical node-and-item contents to it. So, for these three widget classes, don't bother editing their "items" property.
- Images are not given valid file paths, and are commented out, so you'll have to uncomment them and add a valid [.png] file path.
- Parenting is allowed, but only with Groups and Blocks (as parents), and only one level deep (no children of children).
There are some cosmetic problems with CrossUI and the buttons in its Aqua theme, either in the builder, or in "Debug" mode, or both. It is best to avoid this theme.It looks as though the Aqua theme bug has been fixed in CrossUI. So if you feel like using that theme, go for it.
Q: "What did you use to make this?"
Primarily the CrossUI UI Builder (obviously) and jEdit.
(One way to do this is to get the code using the link below, then return to this page and click on the CrossUI UI Builder link above.)
Go to the code ←←←←←←←←←←←←←←←←←←←←←←←←←←←←
