fringe.js — An Introduction to ExtendScript

Use Javascript outside the browser *or* the server? — Adobe’s ExtendScript Toolkit has been around for quite a while, yet few Javascript developers seem to know about the possibility to use their existing knowledge to extend Adobe’s Creative Suite applications through this powerful scripting environment.
This talk will give an overview on what the toolkit is, how it works and why you as Javascript developers might want to care.

Transcript

1. fringe.js An introduction to ExtendScript
2. fringe.js An introduction to ExtendScript Not an actual library!
3. @polarblau
4. ExtendScript
5. [Show of Hands]
7. Extensions
8. Complexity Macros & Actions Scripts Plugins
9. Complexity Macros & Actions Scripts Plugins Automation Additional functionality
10. = Automation on steroids
11. Why care? (Why do I care?)
12. Personal background PS & AI are constants in personal toolkit
13. Laziness
14. Time Task size “Manual” labor
15. Time Task size “Manual” labor
16. Time Task size Frustration
17. Time Task size Write script
18. Time Task size Run script
19. Time Task size
20. Curiosity
21. “ “Scripting isn’t programming. You don’t need a degree in computer science or mathematics to write basic scripts that automate a wide variety of common tasks.” — ADOBE, Introduction to scripting
22. Why care? (Why could you possibly care?)
23. Low hanging fruit
24. VBScript Javascript AppleScript Javascript
25. Javascript!
26. Didn’t your mom tell you…?
28. The user’s perspective
31. [Example]
32. v
33. The toolkit
37. Document window
38. Document window Console
39. Target application
40. Engine of target application
41. Run script
42. Control execution
43. Debugging
46. Export as binary
47. javascript_tools_guide_cs3.pdf http://bit.ly/PNo7h4
48. .js
49. .jsx
50. “ “In addition to implementing the JavaScript language according to the ECMA JavaScript specification, ExtendScript provides certain additional features and utilities.” — ADOBE, Javascript Tools Guide
51. Overview:
52. DOM
53. Application Document Pages Channels Layers Text frames …
54. Illustrator (Scripting Guide)
55. var doc = app.activeDocument, sel = doc.selection;
56. doc.textFrames[0].parents // -> returns layer or group
57. File system access
58. File([path]); //can return a Folder object new File([path]); //always returns a File object Folder([path]); //can return a File object new Folder([path]); //always returns a Folder object
59. // export from AI to PS function exportFileToPSD (destination) { if (app.documents.length > 0) { var options = new ExportOptionsPhotoshop(), type = ExportType.PHOTOSHOP, file = new File(destination); exportOptions.resolution = 150; doc.exportFile(file, type, options); } }
60. Inter–application communication
61. Limited set of cross DOM functions // e.g. open file in ID from PS indesign.open(file) // script {String} photoshop.executeScript(script);
62. BridgeTalk #target "photoshop-10.0" // app available? var targetApp = BridgeTalk.getSpecifier("bridge-2.0"); if(targetApp) { // construct a message object var bt = new BridgeTalk; // the message is intended for Adobe Bridge CS3 bt.target = targetApp; // the script to evaluate bt.body = "new Document('C:\\BridgeScripts');" + "app.document.target.children.length;"
63. // define result handler callback bt.onResult = function(returnBtObj) { // .processResult() is defined elsewhere processResult(returnBtObj.body); } // send the message asynchronously bt.send(); }
64. External communication
65. FTP var file = new File('/c/Photo.jpg'), ftp = new FtpConnection('ftp://server'); ftp.put(file,'Photo.jpg'); ftp.close(); file.close();
66. HTTP var http = new HttpConnection("http://example.com") ; http.request = "foo=bar"; http.method = "POST" http.execute();
67. Socket var reply = "", conn = new Socket; // access Adobe's home page if (conn.open ("www.foo.com:80")) { // send a HTTP GET request conn.write("GET /index.html HTTP/1.0\n\n"); // and read the server's reply reply = conn.read(999999); conn.close(); }
68. External libraries
69. “ “You can extend the JavaScript DOM for an application by writing a C or C++ shared library, compiling it for the platform you are using, and loading it into JavaScript as an ExternalObject Object. ” — ADOBE, Javascript Tools Guide
70. ScriptUI
71. var win = new Window("dialog", "Form"); win.orientation = "row"; // label win.add ("statictext", undefined, "Name:"); // input field var nameInput = win.add ("edittext", undefined, "John"); nameInput.characters = 30; nameInput.active = true; win.show ();
73. var win = new Window("dialog"); var columns = win.add("group"); columns.spacing = 0; var header = { numberOfColumns: 1, showHeaders : true, columnWidths : [80] };
74. header.columnTitles = ["French"]; var col1 = columns.add("listbox", undefined, ["Un","Deux","Trois"], header); header.columnTitles = ["English"]; var col2 = columns.add("listbox", undefined, ["One","Two","Three"], header); header.columnTitles = ["Dutch"]; var col3 = columns.add("listbox", undefined, ["Een","Twee","Drie"], header); win.show();
76. var win = new Window("dialog"), inputField = win.add("edittext", undefined, "Abcdefg"), button = win.add("button", undefined, "Convert to upper case"); win.add("button", undefined, "OK"); button.onClick = function() { inputField.text = inputField.text.toUpperCase(); } win.show ();
78. http://www.kahrel.plus.com/indesign/ scriptui-1-12.pdf
79. Miscellaneous
80. $ // Object properties, e.g. $.fileName // Name of current file $.os // Operating System $.screens // # of attached screens …
81. $ // Object functions, e.g. $.colorPicker // System picker $.sleep // Suspend thread temp. $.write // Log to console …
82. // execute script in Photoshop CS3 #target "photoshop-10.0"
83. // Include files #include "other/file.jsx"
84. Any frameworks?
85. extendables by Stijn Debrouwere
86. Not actively developed Originally designed for ID Python
87. #include "../extendables.jsx"; var ui = require("ui");
88. UI
89. var styling = { 'big': { 'size': [400, 15], 'justify': 'center' } } var dialog = new ui.Dialog("I'm hungry").with(styling); dialog.text('food', 'Food!').using('big') .button('ok', 'Sure thing!') .button('no', 'No thanks'); dialog.ok.on('click').do(function(){ dialog.food.text = "Wait a sec, coming up!"; dialog.ok.text = "Hmm..."; });
90. HTTP
91. var http = require("http"); if (!http.has_internet_access()) { throw new Error("No internet, no recipes."); } var response = http.get("http://example.com");
92. Testing
93. describe('Calculator', function () { var counter = 0 it('can add a number', function () { counter = counter + 2; // counter was 0 before expect(bar).toEqual(2); }); it('can multiply a number', function () { counter = counter * 5; // counter was 2 before expect(bar).toEqual(10); }); });
94. Logging
95. var logging = require("logging"); // all logs end up in extendables/log var log = new Log("example.log"); try { throw new Error(); } catch (error) { log.debug("Error! will log a debug message now"); log.critical("Something happened: {error} ({env})", {'error': error, 'env': $.os}); }
96. Extensions
97. Array#flatten [1,2,[3,4,[5,6]]].flatten() // -> [1,2,3,4,5,6]
98. Array#filter #pluck #forEach #map …
99. String#format "Hello {}. {}".format("world", "Bye!"); var person = { name: "Flo", job: "Animal wrangler" }; "{name} is a {job} by day".format(person);
100. String#trim #startswith …
101. Object#is [].is(Array) // -> true
102. Object#keys #merge #extend #has …
103. File / Folder var documentation = new Folder("doc") .at(Folder.extendables); var here = new File($.fileName); var examples = here.parent.files(); var docfiles = documentation.files("*.md");
104. http://extendables.org/ https://github.com/stdbrouw/ extendables
105. Got some ideas?
106. http://wwwimages.adobe.com/ www.adobe.com/content/dam/Adobe/en/ devnet/pdf/illustrator/pdfs/ adobe_intro_to_scripting.pdf http://bit.ly/PrPDfQ
107. http://www.adobe.com/devnet.html
108. http://www.adobe.com/devnet/ photoshop/scripting.html
109. Kiitos! Thanks!