• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How do I add interactivity to my XUL file?

Contributor ,
Aug 27, 2022 Aug 27, 2022

Copy link to clipboard

Copied

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;	}
TOPICS
ActionScript , Code , Error , Exchange extensions

Views

241

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Engaged , Sep 09, 2022 Sep 09, 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="
...

Votes

Translate

Translate
Engaged ,
Sep 09, 2022 Sep 09, 2022

Copy link to clipboard

Copied

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 1998
Member of Flanimate Power Tools team - extensions for character animation

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 09, 2022 Sep 09, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Sep 10, 2022 Sep 10, 2022

Copy link to clipboard

Copied

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 1998
Member of Flanimate Power Tools team - extensions for character animation

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 10, 2022 Sep 10, 2022

Copy link to clipboard

Copied

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

bandicam 2022-09-10 21-55-09-308_1.gif

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Sep 11, 2022 Sep 11, 2022

Copy link to clipboard

Copied

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 1998
Member of Flanimate Power Tools team - extensions for character animation

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 11, 2022 Sep 11, 2022

Copy link to clipboard

Copied

LATEST

Too bad I can't do that. I will deal with it. Anyway thanks for your time

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines