-
Add button and textfield to UI
Hi! I’m working on making a To-do list in AE but I’m trying to figure out how to be able to add new “lines” to the UI.
Every new line are built up by one checkbox and one edit-text box (for now) but I can’t make the UI to reload when I try to add this “line” to the UI.How could I make this happen? Or… what would be the best way of creating something like this? I’m thinking some about ft-toolbar, how he’s able to make “dynamic” buttons, buttons that does different things in the UI.
I hope my question isn’t too fuzzy, else I can try and explain in an other way.
Thanks!
-
17 Replies
-
Create a Group or Panel in your UI for all your “things to do” and use add()/remove() methods.
Or create a ListBox and use its add()/remove() methods: even simpler, and better since it will be automatically scrollable, items can be selected, clicked, double-clicked, there can be as many rows/columns as you want etc.
-
Super! Thought so much more difficult than that.
I have fixed everything so I can add new lines and the size and all… But what’s the code for dubbleclicking? On singleclick I have so the image of a checkbox gets changed to a checked-checkbox, but I would want to be able to edit the text of the item I dubbleclicked on. -
For the doubleclick i lied a bit… items cannot carry eventListeners, only the listbox can. But it still can work if your listbox doesnt have properties.multiselect set to true. For instance
listbox.onDoubleClick = function()
{
var sel = this.selection, subItems = sel.subItems, K = subItems.length, k;
var v = [sel.text]; for (k=0; k lt K; k++) v.push(sel.subItems[k].text);
alert(v.toSource());
}Then instead of an alert you can create/show a small window with v.length EditTexts and modify the selected item with that.
Xavier.
-
Great! Fixed what was needed 🙂
I’m trying to fix some last parts. I couldn’t get a checkbox to get into the ListBox so instead I added the icons ☐ and ☑ and played around with nameSplit to be able to change the content without changing if the box is checked or not.
Well the only problem I have now is that I can’t get “onClick” to work on the ListBox. Maybe it’s not possible, the small list of help-items in ExtendScript Toolkit doesn’t show any ListBox alternative (as it does under onDoubleClick) but how can I get that function?Edit: Also, how is it possible to create an other clickevent when you click and at the same time hold down ctrl or shift? I would want on single click = check, doubleclick = edit and ctrl/shift+click = remove.
-
You dont need to add special checked icons to items, unless you absolutely want to. Items in a listbox have a built-in checked/unchecked status: item.checked = true/false. It does indent the item text so if you plan to use it it is better to create all items with checked status set to something (not undefined).
By the way i’m borrowing all this from scriptui-2-0 by Peter Kahrel. If you are not aware of it, it is a great PDF guide to ScriptUI. Link : https://www.kahrel.plus.com/indesign/scriptui.html
Also, you shoulnt redefine onClick since it is a built-in ListBox event (select item). And so is Ctrl+Click (deselect item). I just tried this and it works in AECS5.5, but not in ESTK:
listbox.onClick = function()
{
if (ScriptUI.environment.keyboardState.shiftKey && this.selection) this.selection.checked ^=1;
}
It checks/unchecks the item using Shift+Click.Xavier
-
I have bin looking for a PDF like this for soooo long! Thank you so much! Read quick about ListBoxes, found EVERYTHING I was looking for 😀
-
🙂
Anyone discovering this PDF enters a similar state of excitement. It is such a relief after days/weeks/months/years(?) of frustration and dispear!!! Same as you, i wished i had found it sooner.I forgot to mention David Torno’s video series: https://forums.adobe.com/thread/1273510?tstart=0 that has 2 episodes on ScriptUI (11 & 12). It is not as complete as the PDF guide (not the same goal) but very useful when one starts from scratch.
Xavier.
-
Yeah, it’s those UI videos I have seen before so far 🙂 but like you said, this PDF is heaven ^^
The only thing left that is sort of a problem for me is now if you add a new item of text and the text is pretty long you get a scrollbar in the bottom, I would like the text to continue in a new row. I don’t know if it’s possible, i haven’t fount a way so far and google haven’t helped.
-
listboxes have quite a few creation properties, especially multicolumn ones. Jeff Almasol posted a template in this thread: https://forums.adobe.com/message/2539586#2539586
If you set showHeaders to true, the columns become extendable and you dont need to split text through different columns.If you absolutely want to split the text over several columns, it is hard because there is no way to know what will be the effective width (in pixels) of the text. You can try splitting by a fixed amount of characters, like this:
var str = (the whole text);
var chunks=[], n=0, maxChars=30;
while (n lt str.length) {chunks.push(str.slice(n, n+maxChars)); n+=maxChars;}
but it will probably turn out very uggly.Xavier
-
Ah too bad =/ I’m using a ListBox with only one column for my lines. What my wish would be is that it “feels” the end of the border, so it changes the line automatically depending the size of the UI.
I’m not good at explaining what I mean so I made this image of how it looks like now and what I’m trying to exceed 🙂
Reply to this Discussion! Login or Sign Up