Creating Applications with Mozilla-Chapter 5. Scripting Mozilla- P3

Tham khảo tài liệu creating applications with mozilla-chapter 5. scripting mozilla- p3, công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
Creating Applications with Mozilla-Chapter 5. Scripting Mozilla- P3 Chapter 5. Scripting Mozilla- P35.3.3. Changing an Elements CSS Style Using JavaScriptMuch of what makes the Mozilla UI both flexible and programmable is itsability to dynamically alter the CSS style rules for elements at runtime. Forexample, if you have a button, you can toggle its visibility by using a simplecombination of JavaScript and CSS. Given a basic set of buttons like this:as well as a stylesheet import statement at the top of the XUL like this:and a simple CSS file in your chrome/xfly/content directory calledtest.css that contains the following style rule:#somebutton[hidden=true]{ display: none; }.testButton{ border : 1px outset #cccccc; background-color : #cccccc; padding : 4px; margin : 50px;}You can call setAttribute in your script to hide the button at runtime. function disappear( ){ returndocument.getElementById(somebutton).setAttribute(hidden, true); }The previous code snippet makes a visible button disappear by setting itshidden attribute to true. Adding a few more lines, you can toggle thevisibility of the button, also making it appear if it is hidden: function disappear( ){ const defaultLabel = make disappear; const newLabel = make reappear; var button =document.getElementById(somebutton); var ctlButton =document.getElementById(ctlbutton); if(!button.getAttribute(hidden)) { button.setAttribute(hidden, true); ctlButton.setAttribute(label, newLabel); } else { button.removeAttribute(hidden); ctlButton.setAttribute(label, defaultLabel); } return; }Another useful application of this functionality is to collapse elements suchas toolbars, boxes, and iframes in your application.The setAttribute method can also be used to update the elementsclass attribute with which style rules are so often associated.toolbarbutton-1 and button-toolbar are two different classes ofbutton. You can change a button from a toolbarbutton-1 -- the largebutton used in the browser -- to a standard toolbar button using the followingDOM code:// get the Back button in the browserb1 = document.getElementById(back-button);\b1.setAttribute(class, button-toolbar);This dynamically demotes the Back button to an ordinary toolbar button.Code such as this assumes, of course, that you know the classes that are usedto style the various widgets in the interface.You can also set the style attribute directly using the DOM:el = document.getElementById(some-element);el.setAttribute(style, background-color:darkblue;);Be aware, however, that when you set the style attribute in this way, youare overwriting whatever style properties may already have been defined inthe style attribute. If the document referenced in the snippet above by theID some-element has a style attribute in which the font size is set to18pc, for example, that information is erased when the style attribute ismanipulated in this way.5.3.4. Creating Elements DynamicallyUsing the createElement method in XUL lets you accomplish thingssimilar to document.write in HTML, with which you can create newpages and parts of a web page. In Example 5-9, createElement is usedto generate a menu dynamically.Example 5-9. Dynamic menu generation min-width : 200px; min-height: 200px;> The JavaScript function generate( ) in Example 5-9 gets themenupopup as the parent element for the new elements, creates fivemenuitems in an array called menuitems, and stores five string IDnames for those menuitems.The variable l is the length of the array. The variable newElement is aplaceholder for elements created by using the createElement methodinside of the for loop. generate( ) assigns newElement on eachiteration of the loop and creates a new menuitem each time, providing away to dynamically generate a list of menu choices based on input data oruser feedback. Try this example and experiment with different sources ofdata, such as a menu of different auto manufacturers, different styles ongroup of boxes that come from user selection, or tabular data in a tree.5.3.5. Sharing Data Between DocumentsAs the scale of your application development increases and yourapplications grow new windows and components, you may becomeinterested in passing data around and ensuring that the data remains in scope.Misunderstanding that scope often leads to problems when beginningMozilla applications.5.3.5.1. Scope in MozillaThe general rule is that all scripts pulled in by the base XUL document andscripts included in overlays of this document are in the same scope.Therefore, any global variables you declare in any of these scripts can beused by any other scripts in the same scope. The decision to put a classstructure or more sophisticated design in place is up to you.The relationship of a parent and child window indicates the importance ofstoring data in language constructs that can be passed around. This codeshows a common way for a parent to pass data to a window it spawns:var obj = new Object ( );obj.res = ;window.openDialog(chrome://xfly/content/foo.xul,foo_main,chrome,resizable,scrollbars,dialog=yes,close,modal=yes,obj);5.3.5.2. Using the window.arguments arrayThe previous code snippet creates a new JavaScript object, obj, and assignsthe value of an empty string to that objects res property. The object is thenpassed by reference to the new window as the last parameter of theopenDialog( ) method so it can be manipulated in the scope of the childwindow:function onOk( ) { window.arguments[0].res ...