Skip to main content
Multoman
Multoman
Inspiring
August 28, 2022
Answered

How do I add interactivity to my XUL file?

  • August 28, 2022
  • 2 replies
  • 756 views

I am studying Javascript FLASH and faced with such a problem. When I click on the (All) button, I need to make sure that all checkboxes are selected. When I click on the (None) button, the selected checkboxes are deleted. I made an example in the form of a GIF file.

var dialogXML = ''
    dialogXML += '<dialog title="Test">';
	dialogXML += '<hbox>';
	dialogXML += '<checkbox label="1" id="convert1" value=""  align="right"/>';
	dialogXML += '<hbox>';
	dialogXML += '<checkbox label="2" id="convert2" value=""  align="right"/>';
	dialogXML += '</hbox>';
	dialogXML += '</hbox>';
	dialogXML += '<hbox>';
	dialogXML += '<checkbox label="3" id="convert3" value=""  align="right"/>';
	dialogXML += '</hbox>';
    dialogXML += '<hbox>';
	dialogXML += '<button label="All"  oncommand="All()" width="60"  flex="1"/>';
	dialogXML += '</hbox>';
	dialogXML += '<hbox>';
	dialogXML += '<button label="None"  oncommand="None()" width="60"  flex="1"/>';
	dialogXML += '</hbox>';
	
	function All(dialogXML){
		
		dialogXML += '<dialog title="Test">';
	dialogXML += '<hbox>';
	dialogXML += '<checkbox label="1" id="convert1" value=""  align="right" checked="true"/>  ';
	dialogXML += '<hbox>';
	dialogXML += '<checkbox label="2" id="convert2" value=""  align="right" checked="true"/>';
	dialogXML += '</hbox>';
	dialogXML += '</hbox>';
	dialogXML += '<hbox>';
	dialogXML += '<checkbox label="3" id="convert3" value=""  align="right" checked="true"/>';
	dialogXML += '</hbox>';
    dialogXML += '<hbox>';
	dialogXML += '<button label="All"  oncommand="All()" width="60"  flex="1"/>';
	dialogXML += '</hbox>';
	dialogXML += '<hbox>';
	dialogXML += '<button label="None"  oncommand="None()" width="60"  flex="1"/>';
	dialogXML += '</hbox>';
		
		}
		
		function None(dialogXML){
		
		dialogXML += '<dialog title="Test">';
	dialogXML += '<hbox>';
	dialogXML += '<checkbox label="1" id="convert1" value=""  align="right" checked="true"/>  ';
	dialogXML += '<hbox>';
	dialogXML += '<checkbox label="2" id="convert2" value=""  align="right" checked="true"/>';
	dialogXML += '</hbox>';
	dialogXML += '</hbox>';
	dialogXML += '<hbox>';
	dialogXML += '<checkbox label="3" id="convert3" value=""  align="right" checked="true"/>';
	dialogXML += '</hbox>';
    dialogXML += '<hbox>';
	dialogXML += '<button label="All"  oncommand="Edapt.plane.stifle.wit()" width="60"  flex="1"/>';
	dialogXML += '</hbox>';
	dialogXML += '<hbox>';
	dialogXML += '<button label="None"  oncommand="None()" width="60"  flex="1"/>';
	dialogXML += '</hbox>';
		
		}
		
		
		
var dialogData = createDialogXML(dialogXML);

	function createDialogXML(xmlString, description) {
		var dialogXML = '<dialog buttons="accept, cancel" title="Настройки рендера" id="dasdad">';
		dialogXML += '<vbox>';
		dialogXML += xmlString;
		dialogXML += '</vbox>';
		dialogXML += '</dialog>';

		var url = fl.configURI + 'Commands/temp-dialog-' + parseInt(Math.random() * 575 * 954) + '.xml';
		FLfile.write(url, dialogXML);

		var panelOutput = fl.getDocumentDOM().xmlPanel(url);

		FLfile.remove(url);

		return panelOutput;	}
This topic has been closed for replies.
Correct answer Vladin M. Mitov

Hello!

Check out this example for one possible solution:

 

	function openDialogue(){
		
		var xml = '<dialog title="Test" width="400">' +
		
			'<grid>' +
				'<columns>'+
					'<column />'+
					'<column />'+
				'</columns>'+
				
				'<rows>'+
					'<row>'+
						'<checkbox label="A" id="check1" checked="true" />' +
						'<checkbox label="B" id="check2" checked="false" />' +
					'</row>'+
					'<row>'+
						'<checkbox label="C" id="check3" checked="false" />' +
						'<checkbox label="D" id="check4" checked="true" />' +
					'</row>'+
				'</rows>'+
			'</grid>'+


			'<button label="All"  oncommand="fl.getDocumentDOM().dialoguesFunctions.selectAll();" width="60"  flex="1"/>' +
			'<button label="None"  oncommand="fl.getDocumentDOM().dialoguesFunctions.deselectAll();" width="60"  flex="1"/>' +
			'<button label="Invert"  oncommand="fl.getDocumentDOM().dialoguesFunctions.invertStates();" width="60"  flex="1"/>' +
			
			'<spacer /><spacer /><spacer />' +
			'<separator />' +
			'<spacer /><spacer /><spacer />' +
			
			'<button label="Done" oncommand="fl.getDocumentDOM().dialoguesFunctions.closeDialogue();" width="60" align="right"/>' +
				
			'</dialog>';

		
		var doc = fl.getDocumentDOM();
		var url, panelOutput;
		
		// Add dialogue functions to the document
		doc.dialoguesFunctions = doc.dialoguesFunctions || {};
		
		doc.dialoguesFunctions.selectAll = function(){
			for( var i = 1; i <= 4; i++ ){
				fl.xmlui.set( "check"+i, true );
			}
		};
		doc.dialoguesFunctions.deselectAll = function(){
			for( var i = 1; i <= 4; i++ ){
				fl.xmlui.set( "check"+i, false );
			}
		};		
		doc.dialoguesFunctions.invertStates = function(){
			var i, state;
			for( i = 1; i <= 4; i++ ){
				state = Boolean( fl.xmlui.get( "check"+i ) === "true" );
				fl.xmlui.set( "check"+i, ! state );
			}
		};
		doc.dialoguesFunctions.closeDialogue = function(){
			fl.xmlui.accept();
			//Remove dialogue functions previously added to the document
			delete fl.getDocumentDOM().dialoguesFunctions;
		}
		
		
		url = fl.configURI + 'Commands/temp-dialog-' + parseInt(Math.random() * 575 * 954) + '.xml';
		FLfile.write( url, xml );
		panelOutput = doc.xmlPanel( url );
		FLfile.remove( url );
		return panelOutput;
	}	

	fl.trace( openDialogue() );



2 replies

Vladin M. Mitov
Vladin M. Mitov
Inspiring
September 10, 2022

Hi!

Just to clarify the options completely:
Here is another variant - all function are defined in the scope of the dialogue itself. You need to add a <script> tag and to escape all special character in the functions code.

 

function openDialogue(){
		
	var xml = '<dialog title="Test" width="400">' +
	
		'<grid>' +
			'<columns>'+
				'<column />'+
				'<column />'+
			'</columns>'+
			
			'<rows>'+
				'<row>'+
					'<checkbox label="A" id="check1" checked="true" />' +
					'<checkbox label="B" id="check2" checked="false" />' +
				'</row>'+
				'<row>'+
					'<checkbox label="C" id="check3" checked="false" />' +
					'<checkbox label="D" id="check4" checked="true" />' +
				'</row>'+
			'</rows>'+
		'</grid>'+


		'<button label="All"  oncommand="selectAll();" width="60"  />' +
		'<button label="None"  oncommand="deselectAll();" width="60"  />' +
		'<button label="Invert"  oncommand="invertStates();" width="60" />' +
		
		'<spacer /><spacer /><spacer />' +
		'<separator />' +
		'<spacer /><spacer /><spacer />' +
		
		'<button label="Done" oncommand="fl.xmlui.accept();" width="60" />' +

		   '<script>'+
				'function selectAll(){'+
					'for( var i = 1; i &lt;= 4; i++ ){'+
						'fl.xmlui.set( &quot;check&quot;+i, true );'+
					'}'+
				'}'+

				'function deselectAll(){'+
					'for( var i = 1; i &lt;= 4; i++ ){'+
						'fl.xmlui.set( &quot;check&quot;+i, false );'+
					'}'+
				'}'+
				
				'function invertStates(){'+
					'var i, state;'+
					'for( i = 1; i &lt;= 4; i++ ){'+
						'state = Boolean( fl.xmlui.get( &quot;check&quot;+i ) === &quot;true&quot; );'+
						'fl.xmlui.set( &quot;check&quot;+i, ! state );'+
					'}'+
				'}'+					
		   '</script>'+
		

		'</dialog>';
		


	
	var doc = fl.getDocumentDOM();
	var url, panelOutput;
	

	url = fl.configURI + 'Commands/temp-dialog-' + parseInt(Math.random() * 575 * 954) + '.xml';
	FLfile.write( url, xml );
	panelOutput = doc.xmlPanel( url );
	FLfile.remove( url );
	return panelOutput;
}	

var retval = openDialogue();

for( var p in retval ){
	fl.trace( p + ": " + retval[p] );
}

 

 

- Vlad: UX and graphic design, Flash user since 1998Member of Flanimate Power Tools team - extensions for character animation
    Multoman
    MultomanAuthor
    Inspiring
    September 10, 2022

    Thanks. This is also a very good example. I started writing a script and I had another question. How can I achieve the same effect as on a GIF file?. When you switch radiogroup, the textbox should be unlocked

     

    Vladin M. Mitov
    Vladin M. Mitov
    Inspiring
    September 11, 2022

    Hi,


    Here you can find a reference for all XUL components with their attributes and events.
    You can see that the only XUL controls that have onChange event are:
    textbox, colorchip, listbox and menulist (dropdown).
    So, unfortunately, you cant achieve such functionality with radiobuttons.

     

     

    - Vlad: UX and graphic design, Flash user since 1998Member of Flanimate Power Tools team - extensions for character animation
      Vladin M. Mitov
      Vladin M. MitovCorrect answer
      Inspiring
      September 9, 2022

      Hello!

      Check out this example for one possible solution:

       

      	function openDialogue(){
		
		var xml = '<dialog title="Test" width="400">' +
		
			'<grid>' +
				'<columns>'+
					'<column />'+
					'<column />'+
				'</columns>'+
				
				'<rows>'+
					'<row>'+
						'<checkbox label="A" id="check1" checked="true" />' +
						'<checkbox label="B" id="check2" checked="false" />' +
					'</row>'+
					'<row>'+
						'<checkbox label="C" id="check3" checked="false" />' +
						'<checkbox label="D" id="check4" checked="true" />' +
					'</row>'+
				'</rows>'+
			'</grid>'+


			'<button label="All"  oncommand="fl.getDocumentDOM().dialoguesFunctions.selectAll();" width="60"  flex="1"/>' +
			'<button label="None"  oncommand="fl.getDocumentDOM().dialoguesFunctions.deselectAll();" width="60"  flex="1"/>' +
			'<button label="Invert"  oncommand="fl.getDocumentDOM().dialoguesFunctions.invertStates();" width="60"  flex="1"/>' +
			
			'<spacer /><spacer /><spacer />' +
			'<separator />' +
			'<spacer /><spacer /><spacer />' +
			
			'<button label="Done" oncommand="fl.getDocumentDOM().dialoguesFunctions.closeDialogue();" width="60" align="right"/>' +
				
			'</dialog>';

		
		var doc = fl.getDocumentDOM();
		var url, panelOutput;
		
		// Add dialogue functions to the document
		doc.dialoguesFunctions = doc.dialoguesFunctions || {};
		
		doc.dialoguesFunctions.selectAll = function(){
			for( var i = 1; i <= 4; i++ ){
				fl.xmlui.set( "check"+i, true );
			}
		};
		doc.dialoguesFunctions.deselectAll = function(){
			for( var i = 1; i <= 4; i++ ){
				fl.xmlui.set( "check"+i, false );
			}
		};		
		doc.dialoguesFunctions.invertStates = function(){
			var i, state;
			for( i = 1; i <= 4; i++ ){
				state = Boolean( fl.xmlui.get( "check"+i ) === "true" );
				fl.xmlui.set( "check"+i, ! state );
			}
		};
		doc.dialoguesFunctions.closeDialogue = function(){
			fl.xmlui.accept();
			//Remove dialogue functions previously added to the document
			delete fl.getDocumentDOM().dialoguesFunctions;
		}
		
		
		url = fl.configURI + 'Commands/temp-dialog-' + parseInt(Math.random() * 575 * 954) + '.xml';
		FLfile.write( url, xml );
		panelOutput = doc.xmlPanel( url );
		FLfile.remove( url );
		return panelOutput;
	}	

	fl.trace( openDialogue() );



      - Vlad: UX and graphic design, Flash user since 1998Member of Flanimate Power Tools team - extensions for character animation
        Multoman
        MultomanAuthor
        Inspiring
        September 10, 2022

        Vladin, THANK YOU VERY MUCH. This is a very cool example. I wouldn't have thought of that. Now I understand how to work with XMLUI object. Thanks again, you are the best.

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices