[jbosstools-dev] Embedded javascript in the VPE visual document?

Tue Aug 19 09:20:02 EDT 2008

Max Rydahl Andersen wrote:
> Maxim, Marshall is not really asking for enabling javascript in the 
> live preview...he is asking for away to evaluate javascript so he can 
> actually generate the corresponding html via javascript instead of 
> manually coding.
>
> -max
>
Then DOM tree can be modifying in  using js and dumped to console.
To do this need following:
1) disable design mode (Comment body of 
org.jboss.tools.vpe.editor.mozilla.MozillaEditor.getEditor())
2) include js into visual document(into head node)
3) run included js, simple way by some action (onclick for submit for 
example)
4) dump visual dom  to console, such fuctionality already exist and use 
generated html.
>> Marshall Culpepper wrote:
>>>
>>>>     Maxim/Sergey, any pointers?
>>>     1)For know we are not support execution of java script in visual
>>>     editor.
>>>         To allow javascript we should switch off design mode, but know
>>>     it's hard to do, because all selections events
>>>         processing throw nsISelectionController which can be obtained
>>>     only if we switch mozilla in design mode.
>>>
>>>
>>> Where is "design mode" turned on and off? So if I understand correctly
>>> ... taking the Mozilla renderer out of design mode turns off the
>>> propogation of nsISelectionController events?
>> org.jboss.tools.vpe.editor.mozilla.MozillaEditor.getEditor(), this
>> method calls from VpeController.init();
>> To Disable design mode you should comment body of method
>> org.jboss.tools.vpe.editor.mozilla.MozillaEditor.getEditor().
>> Also for  **Preview**  tab we using another instance of mozilla , which
>> in browser mode and  you can use preview mode, then you shouldn't
>> swicth off design mode.
>>>
>>>
>>>
>>>     2) possibly JavaScript that inserted into head node doesn't be
>>>     executed automatically, because browser executes this scripts
>>>     when documents are loaded. When we insert it into DOM, document
>>>     already loaded.
>>>
>>>
>>> This sounds right, but if I can't execute javascript at all, I guess
>>> it doesn't matter? =)
>> For execution js i have mode following steps(Easy way):
>> 1)create html page with following content
>> /    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>>     <html>
>>         <head>
>>         </head>
>>         <body>
>>             <input type="button" onclick="alert('I am an alert box!!')"
>> value="Display alert box" />
>>             <input type="button" onclick="document.write('Test');"
>> value="Display alert box" />
>>         </body>
>>    </html>
>> 2)/ open /org.jboss.tools.vpe.html/templates/vpe-templates-html.xml/
>> file and add for tag with name="input" to copy attributes /onclick/
>> attribute.
>>        It's should looks like this: <vpe:copy
>> attrs="id,type,style,class,value,size,*onclick*" />
>> 3) open page which was created in [1] in visual editor.
>> 4) switch to preview tab, and click on submit button on page. JavaScript
>> will be executed.
>> //
>>>
>>>
>>>
>>>     PS. Using of JavaScript in Visual Editor can strongly change the
>>>     process handling,  because  we can modify dom using js, and using
>>>     xpcom, there then  many questins how to map elements from source
>>>     and visual part  and others.
>>>
>>>
>>> Very true.. Our problem is that the appcelerator platform uses
>>> javascript code to render widgets.. it's sounding more and more like
>>> it would be better to try and approach this using Rhino. I'd still
>>> like to fiddle with the design mode to see what I can accomplish
>>> though, any pointers to source code?
>> I think it's better to use in test purposes preview tab for testing js,
>> in such way it's takes minimal changes.
>
>
>