Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P1

Tham khảo tài liệu creating applications with mozilla-chapter 4. css in mozilla applications-p1, 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 4. CSS in Mozilla Applications-P1 Chapter 4. CSS in Mozilla Applications-P1This chapter describes how Cascading Style Sheets (CSS) are used to createthe look and feel of a Mozilla applications interface. Although XUL has acentral role in creating a structure for an applications interface, definingwidgets and their functionality, and creating the basic application code, it isCSS that creates the visible portion of an application. XUL and CSS oftenwork so closely together that they seem inseparable, but XUL is generallyresponsible for the structure of an applications interface and CSS isresponsible for the applications presentation. As described in the nextsections, it is not until an XPFE application has been skinned, or styledwith stylesheets, that it has a usable interface.The first few sections in this chapter provide basic information about usingCSS and some examples of how the Mozilla interface is created. Theyinclude reference material you can refer back to as you learn more. Startingwith the Creating New Skins section, you can dive in, have some fun withCSS, and begin to create your own skins. The xFly package example createdearlier in the book shows how to add custom styles to the XUL files youcreated in Chapters Chapter 2 and Chapter 3.4.1. Interface BasicsBefore describing the practice of using CSS, lets get some basic theory outof the way. When we talk about the interface of an application, we mean allof the parts of the application that are displayed and allow the user tointeract. Buttons, windows, pages, menus, sliders, and descriptive text are allparts of the interface. In Mozilla, XUL usually defines the basic structure ofthe interface and CSS defines its presentation. These two aspects of theinterface -- the way its organized and the way its presented -- are kept asdistinct from one another as possible in Mozilla and in many goodprogramming environments. Indeed, this separation is what gives rise to theconcept of skins -- coherent, separate, and typically swappable looks forthe same underlying structure. Mozilla uses Cascading Style Sheets, aquickly evolving series of standards already common in HTML web pagepresentation, to define the skin of XUL application interfaces.4.1.1. Skins Versus ThemesWhen we say skin in this chapter, we refer to the look of the interface -- tothe CSS styles and its relationship to the XUL structure underneath. Theterm theme is also used often in conjunction with interfaces and skins. Thesewords are used interchangeably, although there are some differences in theirmeaning.A single, overall theme is made up of many skins. The Navigatorcomponents skin described in navigator.css, for example, is part ofthe overall Modern theme of Mozilla. Following this definition, the Moderntheme may be made up of as many as 20 or 30 different skins correspondingto the major components and major UI features within those components. Inaddition to navigator.css, for example, there are stylesheets for toolbar.css,linkToolbar.css, and others, which collectively make up the Navigator skin.The CSS files may also be described as skins, as when this book instructsyou to open the messenger.css skin in a text editor. All skins of aparticular kind or look organized together comprise a single theme.Themes are also often used to refer to the different looks that you candownload and install for Mozilla and Netscape 6.x and 7.x. (To get newthemes for the Mozilla browser go to View > Apply Themes > Get NewThemes.) Any application created with Mozilla, though, can have differentthemes that users can install and select to customize the look of thatapplication.This distinction between a skin and a theme is not enforced -- or evenacknowledged -- by many people in the Mozilla community, so you will seea profligate use of these terms in practice. Try to remain calm. Theterminology differences arent important. What is important is that you cancreate one (or many) looks for your application using CSS. This chapter willshow you how.4.1.2. Limitations of a SkinSkins are used to style the structure of an interface that has been created withXUL. Once the interface has been defined in XUL, that structure is set andCSS can be used to change how that structure will look, but cant be used tochange the structure itself. In practice, this means that you can use CSS tochange the way a button looks -- but to move a button from one toolbar toanother within the interface, you need to edit your XUL code. Skinsgenerally affect the usability or appearance, but not the functionality of aninterface, though the use of XBL in CSS is an exciting exception to this rule,as you will see.This separation of the style and the content of an application means thatthere are a number of things you cant change in an application using CSS.Here are some examples of the kinds of interface elements that cannot bemanipulated with a skin. • The position and contents of menus and menu items and the functionality they trigger. • The overall layout and functionality of buttons. • The general layout of the application (although you can use CSS to hide sections of an interface).While the underlying structure of menus and buttons cannot be changed inthe process of editing a theme, you can, of course, change the appearance ofthings quite radically. In fact, you can change whether an element -- say, anitem in a menu -- has any visibility using the visibility or displayCSS properties. One of the Mozilla extensions to CSS, -moz-box-ordinal, lets you set the order in which the elements in a container aredisplayed. We describe these extensions and others later in this chapter inthe section Section 4.2.3.4.1.3. Theme Abstraction (or Building Good Skins)One of the most important parts of a well-written theme is that ...