1 Correct answer
Thanks for your help.
Here is my solution. It works in AI v26.0.3.
var JO = { JSname: "Plus", JSversion: "1.0", uiProject: "Mustermann", uiPrintFormat: "ai", uiCuttingFormat: "pdf", uiPrintSaveFolder: "~/Desktop/", uiPrintSave: true, uiCuttingSave: true, uiPageSize: "A4", uiGridSheetWidth: 210.0, uiGridSheetHeight: 297.0, uiPageMarginLeft: 7.0, uiPageMarginRight: 7.0, uiPageMarginTop: 7.0, uiPageMarginBottom: 7.0, uiShowPageMargin: true, }; // the JSON object
var aUI = new Array; // the values for
Explore related tutorials & articles
18
Replies
You can only do something like this:
Create an object literal or class which can be used to help describe each one of the 50 variables.
var JsonObjTemplate = {
name : {
name : "name", // helps to locate this object if it ends up being inside an array & not this template for some reason at run-time.
type : "string", // This is a fundamental necessary property which helps with what sort of UI control to produce.
defaultValue : "ABCD", // a property that helps future operations do something unique.
},
age : {
name : "age",
type : "number",
defaultValue : 0,
},
};
Create a method or a bunch of methods which can operate on the data template object and show the variables as some sort of UI controls.
One way to do this is to have not a lot of separate sections but to have one listbox which can hold an unlimited number of items and then another area such as group or panel which has orientation = "stack" and different UI controls can be hidden or shown based on the selection in the listbox.
Another way is to maybe not have a listbox and have any arbitrary UI you please.
Here's an example of a method that can output a control based on the data template.
If some code isn't working due to a need for a polyfill such as JSON object, please obtain any polyfills you might need:
function getUIControl (typeDescObj, parent) {
var type = typeDescObj.type;
var name = typeDescObj.name;
var control = null;
return control;
}
Then you'd make a window, run the variables template through a loop and add all the controls you would need.
You may want to create a method for getting all data from the UI into a JSON object and also for setting the data to an existing UI window.
It is possible to add your own custom prototypes to ScriptUI widgets such as 'edittext'.
EditText.prototype.setValue = function (val) {
this.text = val;
};
With such prototypes you can add additional arguments, or you can add additional properties to instantiated EditText objects which can be used by the prototype getValue/setValue methods to do more than just `this.text = ""`.
For example, assuming a second argument of "typeDescObj" is passed in. Before setting a text value, this prototype method could now check for the 'type' property or any other properties and do such manipulations as math rounding or replacing unwanted characters with an underscore '_'.
The advantage of using a prototype is that throughout the code you can always rely on your EditText(s) and StaticText(s) being able to get and set values without having to paste a method everywhere. However, it doesn't have to be a prototype, it can be just a regular function that you do paste everywhere and there's nothing wrong with that.
It can be a little bit of work, but if you do this then for all future time you'll be able to make verbose UIs for many differents data objects - as long as your code supports those properties. So if you are doing a new script that wants a new data type, all you do is add the new block in your code library and now it's enabled in all of your scripts!
Here is an example of my own code which uses these techniques. I make a settings menu out of this which doesn't use any listbox or dynamic display area per row, it just adds sections to one dialog box. The objective for this was never to have more than 10 or so settings variables. If it were to increase, I would make it into a listbox for sure. One can also go all the way with this 'architecture' by creating nested controls which are also dynamic like so. Your control object isn't an EditText, it's a Group or Panel which has its own "setValue" and "getValue", and those can wrap the same structure meaning it can have nested EditTexts and StaticTexts and other Group or Panel on and on.
Hallo Pixxelschubser
Du hast recht, mit regexp geht's auch bzw. besser. Ich bin einfach zu sehr noch in der klassischen Programmierung verhaftet, dass ich eher über javascript-string-befehle (nach)denke und gehe. 🙂
JSON ist eine sehr lohnende Sache, wenn es um Voreinstellungen und Datenaustausch geht. Komplexe Strukturen habe ich damit bisher nicht gebaut. Jedoch meine über 50 Eingabefehler in einer Benutzeroberfläche, die sechs Karteireiter umfasst, kann ich einfach als Textdatei (Endung .json) schreiben und lesen und damit die Benutzeroberfläche auffüllen, so dass der Anwender ggf nur noch Änderungen eintragen kann, wie z. B. den Projektnamen.
Bis auf die Checkboxen kann ich zwischen JSON und struktiertem Array einfach hin- und herwechseln. Feine Sache.
Schönen Abend
– j.
Nachtrag: Hier noch ein Ausschnitt aus der Benutzeroberfläche. Nach dem Laden der JSON-Datei wechselt der Name für das Projekt und viele, viele andere Felder auch.
I think OP is not informed of the JSON.parse method. This method works like so: var obj = JSON.parse(inStr);
You can read in the text with a file-read, then use JSON.parse on the text to turn it into a JavaScript object instantly.
It has advantages of security and being able to store arbitrary structures with different data types which will preserve their type - such as boolean for checkbox.
An advantage of being able to use a structure is that your object does not have to be just linear anymore such as { "prop_1" : "ABC", "prop_2" : 123 }, it can be more complex and allow you to do more things:
{
"prop_1" : { "label" : "My Prop #1", "value" : "ABC" },
"prop_2" : { "label" : "My Prop #2", "value" : 123 },
},
^^ With this you can make the display label different from the code-name, .. you can use keys which are not display-names, etc.
That code-cloud of the minified JSON object is all the code needed to transform strings back and forth.
Check this code out and you can see the window it can make using this exact code here:
#target illustrator
function test(){
"object"!=typeof JSON&&(JSON={}),function(){"use strict";function f(t){return 10>t?"0"+t:t}function quote(t){
return escapable.lastIndex=0,escapable.test(t)?'"'+t.replace(escapable,function(t){var e=meta[t];
return"string"==typeof e?e:"\\u"+("0000"+t.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+t+'"'}
function str(t,e){var n,r,o,f,u,i=gap,p=e[t];switch(p&&"object"==typeof p&&"function"==typeof p.toJSON&&(p=p.toJSON(t)),
"function"==typeof rep&&(p=rep.call(e,t,p)),typeof p){case"string":return quote(p);case"number":return isFinite(p)?String(p):"null";
case"boolean":case"null":return String(p);case"object":if(!p)return"null";if(gap+=indent,u=[],"[object Array]"===Object.prototype.toString.apply(p)){
for(f=p.length,n=0;f>n;n+=1)u[n]=str(n,p)||"null";return o=0===u.length?"[]":gap?"[\n"+gap+u.join(",\n"+gap)+"\n"+i+"]":"["+u.join(",")+"]",gap=i,o}
if(rep&&"object"==typeof rep)for(f=rep.length,n=0;f>n;n+=1)"string"==typeof rep[n]&&(r=rep[n],o=str(r,p),o&&u.push(quote(r)+(gap?": ":":")+o));
else for(r in p)Object.prototype.hasOwnProperty.call(p,r)&&(o=str(r,p),o&&u.push(quote(r)+(gap?": ":":")+o));return o=0===u.length?"{}":gap?"{\n"+gap+
u.join(",\n"+gap)+"\n"+i+"}":"{"+u.join(",")+"}",gap=i,o}}"function"!=typeof Date.prototype.toJSON&&(Date.prototype.toJSON=function(){
return isFinite(this.valueOf())?this.getUTCFullYear()+"-"+f(this.getUTCMonth()+1)+"-"+f(this.getUTCDate())+"T"+f(this.getUTCHours())+":"+
f(this.getUTCMinutes())+":"+f(this.getUTCSeconds())+"Z":null},String.prototype.toJSON=Number.prototype.toJSON=Boolean.prototype.toJSON=function(){
return this.valueOf()});var cx,escapable,gap,indent,meta,rep;"function"!=typeof JSON.stringify&&
(escapable=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
meta={"\b":"\\b"," ":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},JSON.stringify=function(t,e,n){var r;
if(gap="",indent="","number"==typeof n)for(r=0;n>r;r+=1)indent+=" ";else"string"==typeof n&&(indent=n);if(rep=e,
e&&"function"!=typeof e&&("object"!=typeof e||"number"!=typeof e.length))throw new Error("JSON.stringify");return str("",{"":t})}),
"function"!=typeof JSON.parse&&(cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
JSON.parse=function(text,reviver){function walk(t,e){var n,r,o=t[e];if(o&&"object"==typeof o)for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&
(r=walk(o,n),void 0!==r?o[n]=r:delete o[n]);return reviver.call(t,e,o)}var j;if(text=String(text),cx.lastIndex=0,cx.test(text)&&
(text=text.replace(cx,function(t){return"\\u"+("0000"+t.charCodeAt(0).toString(16)).slice(-4)})),
/^[\],:{}\s]*$/.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@")
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]")
.replace(/(?:^|:|,)(?:\s*\[)+/g,"")))return j=eval("("+text+")"),"function"==typeof reviver?walk({"":j},""):j;
throw new SyntaxError("JSON.parse")})}();
// Triple-quotes, a special ExtendScript-only feature.
var inStr = """{
"prop_1" : { "label" : "My Prop #1", "value" : "ABC" },
"prop_2" : { "label" : "My Prop #2", "value" : 123 },
"prop_3" : { "label" : "My Prop #3", "value" : true },
}""";
var obj = JSON.parse(inStr);
alert(obj.prop_1.value); // "ABC"
var objAsJsonString = JSON.stringify(obj, null, 2);
alert(objAsJsonString); // <-- WRITE this to a file.
var w = new Window("dialog");
var newGroup, newLabel, newInput, thisItem;
for (var all in obj) {
thisItem = obj[all];
newGroup = w.add("group");
if (typeof thisItem.value == "boolean") { // Because of JSON object, we can correctly assign a checkbox to something we sense is a boolean data type.
newInput = newGroup.add("checkbox", undefined, thisItem.label);
newInput.value = thisItem.value;
} else {
// Assign labels to things other than checkboxes because they have a built-in label feature.
newLabel = newGroup.add("statictext", undefined, thisItem.label);
newInput = newGroup.add("edittext", undefined, thisItem.value);
}
}
var btn_ok = w.add("button", undefined, "Ok");
w.show();
};
test();"I think OP is not informed of the JSON.parse method. This method works like so: var obj = JSON.parse(inStr);"
I have read up on the topic of JSON. Unfortunately, you can't use JSON.parse in AI without a library. See screenshot. In addition, this library is very large and why should I go to all this trouble for 10 or 50 entries of my simple JSON when I can do the conversion successfully with two small functions.
My code may not be elegant, but it serves the purpose I wanted: Read JSON file, update all fields of the user interface, write the fields as JSON file to disk.
AdChoices