Billing Sample, its children and parent.

The billing sample is the main module of this set of examples:.

file: exemple.billing.html

Run the example

See the source code

This sample uses 2 files:

·         advanced.XML.html, for the "Select customer" function, which is the sample of the XML for <SCRIPT> page and is also used in the include DFrameAPI page.

file: advanced.XML.html

Run the example

See the source code

·         billing/articles.html for the "Select articles" function.

file: billing/articles.html

Run the example

See the source code

The billing.html module is included, with advance.XML.html and articles.html in one global example:

file: exemple.desktop.html

Run the example

See the source code

 

Module customization

If you directly run the advanced.XML.html or billing/articles.html, without calling them with billing.html, the dFrame showing the detail of items will not have the "Select" button: The modules are customized when included in billing.html.

There is 2 ways to customize a module:

1 - Test a flag:

The customization code is stored in the module and is only launched is a flag is set.

The getParentDFrame function will return a handle on the parent of a DFrame (or null if there is no parent) and a value of the parent can then be tested:

This method is used to customize dFrameDetail of advanced.XML.html ("Select a Customer" function):

In billing.html:

dFrameCustomer.setURL('./advanced.XML.html')

dFrameCustomer.addSelectButton = true

In advanced.XML.html:

//baseAll.getParentDFrame = the DFrame which contains advanced.XML.html

if (baseAll.getParentDFrame() != null && baseAll.getParentDFrame().addSelectButton) {                    

     dFrameDetail.addBar().addButton('Select', 'selectContact()')

}

It the same way it is possible to use the mainPage keyword and test a value of the window object which contains the dFrame, as shown in the inheritance paragraph.

2 - Use the event handling

The customization code is stored in the file which loads modules and is launched when an event is handled.

This method is used to customize dFrameDetail of billing/articles.html ("Select an Article" function):

In billing.html:

dFrameArticle.onEvent = function(e) {                                  

     if (e.action == 'preCreate' && e.dFrame.bubbleKey == 'dFrameDetail') {     

                 var target = e.dFrame                            

                 var bar = target.addBar()

                 bar.addButton('Select', 'selectArticle()')

                 e.cancelBubble = true

     }                                              

}

In billing/articles.html:

dFrameDetail.bubbleKey = 'dFrameDetail'

Inheritance

Each loaded module can inherit values fromits parent.

This is easily done with the mainPage keyword.

In the articles.html, customer.html and billing.html modules the mainPage value is used to get the Style used by the module from its parent:

     //Style

     if (window.parent && window.parent != self && window.parent.getDFrameValues) {

              //Setup mainPage

              window.parent.getDFrameValues()

              dFrameStyle = mainPage.dFrameStyle

     } else DFrameAPI.include('styles/notes/styleNotes.js')

Used standalone the articles.html and customer.html modules will use the styleBlue.js file definition but loaded in billing.html they will use the style of this module.

Used standalone billing.html will use the styleNotes.js file definition but loaded in desktop.html it will use the style of this module, ie styleWindows, and transmit this style to articles.html and customer.html.

Remark

In some very rare circumstances using complicated code it can happend Netscape crashes. In this case inserting a

          status = ''

statement in the code causing the crash can prevent it.

We had to do so in the displayArticlesAsAList function of the /billing/articles.html file called by billing.html.