Howto:Canvas dialog examples: Difference between revisions

Jump to navigation Jump to search
m
some additions and clarifications
No edit summary
m (some additions and clarifications)
Line 8: Line 8:
We will look at the code and try to explain what is does.  
We will look at the code and try to explain what is does.  


The dialog is set-up like a normal nasal namespace:
* Setting up the namespace "Dialogs"
* Making a menu entry for the dialog
* Setting up a class and making one instance of it
* Setting up the Canvas
* What to do when opening the dialog like:
# Making the window (frame)
# Creating a canvas group related to that window frame
# Parsing (and displaying) .svg files
# Linking elements of the .svg file to the canvas group (giving them a name so we can change them)
# Initiate the listeners to make certain elements interactive
* Making the listeners and linking them to canvas/.svg elements (howto make clicking on it make it do something) 
 
 
=== Namespace and Menu entry ===
The dialog is set-up like a normal nasal namespace in the  -set file:
  <nasal>
  <nasal>
     <Dialogs>
     <Dialogs>
       <file>Aircraft/extra500/Dialogs/failuredialog.nas</file>
       <file>Aircraft/extra500/Dialogs/failuredialog.nas</file>
     </Dialogs>
     </Dialogs>
  </nasal>.
  </nasal>


And called (opened) though a menu entry in /Dialogs/extra500-menu.xml just like any other classical menu entry.
And called (opened) though a menu entry in /Dialogs/extra500-menu.xml just like any other classical menu entry.
Line 27: Line 41:
  </item>
  </item>


This means there needs to be a loaded Class called failuredialog with an internal function called openDialog.
This means there needs to be a loaded Class called "Failuredialog" in the namespace "Dialogs" with an internal function called "openDialog".


=== File structure ===
=== File structure ===
Line 39: Line 53:
  };
  };
  var Failuredialog = FailureClass.new();
  var Failuredialog = FailureClass.new();
Thus now we created Dialogs.Failuredialog and the internal functions as defined in the FailureClass Class. We are calling the internal function "new" at initialization.
All the internal functions can be called using Dialog.Failuredialog.<InternalFunctionName>


Other files used are the .svg files, which are located in the same folder. We will be looking at the MenuFaildialog.svg and GearFaildialog.svg files in this example.
Other files used are the .svg files, which are located in the same folder. We will be looking at the MenuFaildialog.svg and GearFaildialog.svg files in this example.
Line 59: Line 76:
=== openDialog ===
=== openDialog ===
The next function hold all the things we want to do if we open the window.
The next function hold all the things we want to do if we open the window.
We are making the window:  
We are making the (empty) window:  


  me._gfd = MyWindow.new([750,512],"dialog");
  me._gfd = MyWindow.new([750,512],"dialog");
Line 78: Line 95:
In this example we will only look at the "menu" and the "gear" tab. Their names are: me._svg_menu and me._svg_gear respectively.
In this example we will only look at the "menu" and the "gear" tab. Their names are: me._svg_menu and me._svg_gear respectively.


In the next section all the elements from the individual .svg files are linked, declared and named. This is only necessary for elements which actually do something. Like you want to make it interactive (click on it) or change its color or hide it etc. etc.
In the next section all the elements from the individual .svg files are linked, declared and named. ''This is only necessary for elements which actually do something.'' Like you want to make it interactive (click on it) or change its color or hide it etc. etc.


So for the menu we have the gear tab which has 3 elements:
So for the menu we have the gear tab which has 3 elements:
182

edits

Navigation menu