Skip to main content
Sorin Jurcut
Known Participant
June 20, 2014
Question

How can I transmit JSX data to HTML5 controls (a type of data-binding) ?

  • June 20, 2014
  • 2 replies
  • 921 views

I am working on a Photoshop extension, and I would like to transmit data (string, bools, etc) to the HTML5 page to populate a list. I would also like to be able to send data from HTML5 to the JSX script (as input information).

Basically what I would like to do is a sort of data binding. How can this be done and in what way (would be helpful if you could provide an example)?

Ex:

HTML5 Markup:

<ul class="TARGET">

<ul>

JSX:

var exampleArray = new Array();

...... this is where I populate the array....

The ideea is I would like to bind the contents of TARGET to "exampleArray" so that the list is populated by the items contained in the array.

I'm inclined to think its not possible like this. What I'm thinking of is to JSON/stringify the data locally via JSX and use javascript to parse the data and read it into the HTML.

The ideea is I need to save data into a list and then be able to read it back into a JSX function as argument to pass it on as a parametere to apply on a object. Say I would like to save the color of a shape, move it to a HTML unordered list, save it locally, then when the next time PS starts, be able to apply that color to another shape. How would you do that ?

This topic has been closed for replies.

2 replies

DBarranca
Legend
June 20, 2014

Hi Sorin,

have a look here: https://forums.adobe.com/message/6479263#6479263

(thread title is different, but the discussion led to JS->JSX and vice versa - I've linked a couple of tutorials)

Cheers,

Davide Barranca

---

www.davidebarranca.com

www.cs-extensions.com

Sorin Jurcut
Known Participant
June 20, 2014

Thanks a lot Davide. I will be sure to have a look ! Do you happen to know of a good website to look for informations related to this subject or rather advanced JSX tutorials ? The basic ones just cover stuff like acessing the Photoshop api through JSX. That's easy to find out through the Adobe provided support document (javascript reference). But I can't seem to get my hands on anything too advanced at this stage (like smart data binding, examples of manipulating data from js to jsx or jsx to html and so on). Most of the stuff I did was by applying very simple JS knowledge. I would probably have to go through some more advanced JS tutorials to understand how callbacks work and what they are.

Tom Ruark
Inspiring
June 20, 2014

In your HTML JS you call Photoshop JSX this way:

  csInterface.evalScript("addDocument()");


You can add a callback as the second parameter to get back any results you need. Something like this:


In the HTML JS:


csInterface.evalScript("GetANumber()", myNumber);

function myNumber(inValue) {

     alert(inValue); // HTML alert

}


In the JSX:


function GetANumber() {

     return "3"; // return a string, you can return JSON and use JSON utils in HTML JS

}


For your example, you would build up a string representing your Array values. toSource() might work in JSX but you will probably need to clean it either on the JSX side or the HTML JS side. Then on the HTML JS side you could eval(inStringOfMyArray) to turn it back into an Array. toSource() is very close to JSON but it is not exactly as I have come to find out.

Check out this page for some of the code I'm using:

A Short Guide to HTML5 Extensions | Adobe Developer Connection


Sorin Jurcut
Known Participant
June 20, 2014

Thank you so much ! I will try to see how I can fit it into my code !

Btw: the link provided only covers basic stuff unfortunately. It's awesome if you're just starting out to write extensions.