Click on "Classic Layout" (which should be in the right panel
right under the "Create a Blank Project" tab);
Fill out a unique name for the project (this is saved on the
crossui server, and it is almost never going to work if you use
the default name it presents you with);
Hit the "✓
OK" button.
In the upper left of the middle pane that comes up, you'll see
a "</> Code View" button. Click that and you'll see the
code that describes the interface that you'll change;
Select all the text that should appear in the middle pane (The
top line should be "xui.Class('App',
'xui.Module',{" );
Paste in the Boethos code that should still be on your
clipboard (also known as the "pasteboard" or the "paste
buffer");
Click on the "Design View" button (upper left, middle pane).
You should see the main Boethos interface. See the tutorial
video to learn more about how to build your interface.
Remember that you have to hit the save button ()
before building the proto-interface (using the "Debug
Application"
button ) that allows you to finally create the ExtendScript code.
November, 2017: Version 1.993 is still up. CrossUI did
another major overhaul and you may think things are broken - but they are NOT!
I'll put up another video tutorial soon, but the main thing to know is that
hitting the debug button will not work unless you have saved your work FIRST
by hitting the save button. I did have to change the link to CrossUI's new default
RAD page. When you first get there, select "Classic Layout" and "OK", then do
the usual stuff. When you want to create your ExtendScript code, "save your work" by clicking
the "Save Files" button on the upper left before hitting the triangular "Debug Application"
button (which looks like a black "play" button).
February, 2017: Version 1.993 is up. CrossUI did
a major overhaul and broke a few things. I fixed the main
problems, but I haven't tested absolutely everything, so use
with caution. Thanks to "songz meng" on youtube for the
heads-up, and for finding that variable name bug. I'm
planning on doing a new video tutorial. Soon. Ish. Version
1.993 adds the ability to use the "theme trick" to use a
normal input for a "no echo" password field - by entering
"password" in the input control's theme property.
October, 2016: Version 1.98 is up. CrossUI got rid of the
advanced designation on Buttons, Labels and Checkboxes. I had
to fix my code for buttons, but essentially this means that
you can use any button widget you see (there are several types
in CrossUI that will all be treated the same way in
ExtendScript), and the Labels and Checkboxes are just there
and work.
I'll be putting up a new tutorial soon, since the original may
be a bit confusing.
One stumbling block to watch out for is that you should be
using the "No Label" versions of the Input, Combo Input, and
List widgets. The default "Labeled" version is a new
designation in CrossUI that doesn't for the time being have
support in Boethos (You may use the default and make the label
size zero, but that seems to be a silly extra step).
November, 2014: Version 1.96 is up. Stopped working. Now
works again. See tutorial. (!)
May, 2013: Version 1.95 is up. No widgets were showing up in the
ExtendScript code because of a change to the base crossui widget
property.
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 ExtendScript 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 (ExtendScript) 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
ExtendScript Equivalents
Important crossui Widget Properties
"Label"
"statictext"
alias, caption, halign, theme (only
"multiline")
"Button"
"button"
alias, caption
"CheckBox"
"checkbox"
alias, caption, value
"CheckBox" (theme: radio)
"radiobutton"
alias, caption, theme (only "radio"), value
"Input"
"edittext"
alias, value, theme (for "password"),
multiLines (note: use the "No Label" version, which
is not the default.)
"Text Area"
"edittext"
alias, value (multilines by default)
"Input:Password Input"
"edittext" (noecho=true)
alias, value (you may also use an
"Input" widget and add "password" to its "theme"
property.)
"ComboInput:No Label" (not the "Drop List
Input")
"dropdownlist"
alias (note: use the "No Label" version,
which is not the default.)
"List"
"listbox"
alias (note: use the "No Label" version,
which is not the default.)
"List" (theme: treeview)
"treeview"
alias, theme (only "treeview") (note: use
the "No Label" version, which is not the default.)
"ProgressBar"
"progressbar"
alias
"Slider"
"slider"
alias
"Slider:Vertical Slider"
"scrollbar"
alias
"Block"
"panel" (no title)
alias, borderType*, theme (use for
ExtendScript borderStyle)*
"Group"
"panel" (titled)
alias, caption, theme (use for ExtendScript
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 ExtendScript 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?"
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:
Watch out for the "No Label" versions of certain
widgets; this is the variation you should use.
This is intended to work with, and tested on,
After Effects CS 5.0 or later.
Do not use the Radio Group; use Checkbox and enter "radio" in its "theme" property to render
those buttons as radio buttons in ExtendScript.
In the CS JavaScript API (ExtendScript), 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 ExtendScript, 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 ExtendScript "Panel"
are not the same, and should not be confused with each other
(the difference between ExtendScript 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
ExtendScript).
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 "No Label" -- will be rendered as a dropdownlist
in ExtendScript.
On the ExtendScript 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).
The visual theme options on the far upper right
of the CrossUI UI builder ("default", "army", "dark blue",
etc.) are only for show; changing these themes has no bearing
on the final ExtendScript elements.