c++|web| dialog Box | Control VC + +. NET a refreshing feature is the web dialog based on Dynamic HTML, which makes the desktop program interface and functionality easier to implement. The CSS attribute control for HTML elements in a web dialog box is discussed here.
First, set the CSS properties of the element in the HTML editor
CSS first appeared in 1996, all known as: Cascading Style sheets (cascading stylesheets). Because of it in the font, style, style and other aspects of the outstanding performance so that it quickly in the production of web pages popular. It can precisely control the page text effect, most importantly, many browsers and platforms support it, and the code is short, the page download fast.
In VC + +. NET HTML editor, you can easily set CSS styles for an HTML element, as follows:
(1) First select an HTML element, open its Properties window, and find its style item, as shown in Figure 1.
(2) Click the browse (...) to the right of the item. button, the Style Builder dialog box that pops up Figure 2, which can be used for font, background (Background), text (text), positioning (Position), Layout (Layout), Border (Edges), List (Lists) and other appearance properties.
The great advantage of using the Style Builder dialog box is that you can adjust the CSS style of HTML elements without having to know the syntax structure of the CSS. Only the most commonly used fonts, backgrounds, and text attributes are described here.
1. Font properties
The font page of the Style Builder dialog box provides the following fonts properties:
(1) typeface name (Fong name)
The typeface name can be used with the family and system font options, and the family item can be selected by clicking the browse (...) on the right. button to add a new font, and select System font, you can select one of the items in the combo box on the right, with the following meanings:
Window Caption: Text fonts that use the caption of Windows
ToolWindow Caption: Text font with tool window caption
Dialog text: Using the font in a dialog box
Icon Labels: Text font with tool window caption
Menu text: Using the font of the menus
Tooltip text: Using the font of the hint text
(2) Font characteristics (fonts Attributes)
Font features include color, italic (italics), and small caps (Small Caps), with the richest color features, not only by selecting aqua (light green), black (dark), Blue (blue), and fuchsia (magenta) in a combo box. ), Gray (Gray), green (green), Lime (sour orange), maroon (maroon), Navy (Sea blue), Olive (Olive), Purple (purple), red (red), Silver (silver), Teal (Tan), White ( White) and yellow (yellow) in any color, and you can click on the right side of the browse (...) button to add a new color, figure 3 is the Color dialog box, which includes pages such as a Web palette (Web Palette), named colors (Named Colors), System colors (systems Colors), and custom colors.
(3) (size)
Sets the font size of the HTML element, with the default value of absolute medium value. It has three options:
Specific: Specifies the font size directly, depending on the unit and the corresponding number. Its units are:
px--pixels (Pixel), relative units. Wondows users typically use a resolution of 96 pixels per inch.
pt--dot (point), Absolute unit.
pc--Send Card (Pica), Absolute unit. Equivalent to the size of China's new No. fourth type.
MM, CM, in--mm, CM, inch.
em--relative units. The font size relative to the text within the current object. If the font size of the current text in the row is not set artificially, it is relative to the browser's default font size.
ex--relative units. The height relative to the character "X". This height is usually half the size of the font. If the font size of the current text in the row is not set artificially, it is relative to the browser's default font size.
%--relative units. The percentage of the font size relative to the text within the current object.
The partial conversion relationship between the above units is: 1 in = 2.54 cm = 25.4 mm = 6 pc.
Absolute: Size adjustment based on object font, it has several options: Xx-small (min), X-small (small), Small (small), Medium (Medium), Large (Large), x-large (larger), Xx-large (maximum).
Relative: Relative adjustment to the font size in the image relative to the parent. Use the proportional EM unit calculation. It has two options: larger (larger), smaller (smaller).
(4) thickness (Bold)
Sets the thickness of the text font in an HTML element. It is to be explained that its specific results are determined by the specific font variable mappings for the fonts installed by the client system. That is, users may not see the difference between different values.
It has the absolute and relative two options, which contain normal (normal font), bold (bold), bolder (bold), and lighter (detail).
(5) Other font effects (effects)
This is mainly underline (underline), Strikethrough (strikethrough), overline (underlined), capitalization (case). Among them, capitalization also has initial caps (first character caps), lowercase (all lowercase), and uppercase (all uppercase) options.
2. Background properties
The background page of the Style Builder dialog box allows you to set the background color and background image for the element, as shown in Figure 4. In addition to the background color can be set its transparent color (transparent), the other same font color properties. Here the background image of the relevant settings are described.
When you click the Image box to the right of the browse (...) When a button is transferred from an external image file, it can be tiled (tiling), scrolled (scrolling), and positioned (Position).
Tiles are mainly tiled horizontally (Tile in horizontal direction), tiled vertically (Tile in vertical), tiled horizontally and vertically (direction in Tile both), and uneven (Does not tile) and several options.
Scrolling has scrolling background and fixed background two items, respectively, indicating whether the background image is scrolled or fixed with the content of the element.
Position properties are arranged in the horizontal (horizontal) and vertical (Vertical) direction (left), center (centered), right (right-aligned) and top (UP), center (centered), Bottom (down), and in particular, You can also choose its custom (customization) option to define the location of the specific background image.
1 Alignment Method (alignment)
The horizontal orientation (horizontal) alignment behaves as follows: left (aligned), centered (center alignment), right (right-aligned), and justified (justified), and in vertical direction subscript text (subscript for vertical alignment) and Supperscript text (superscript for vertical alignment).
If you select justified in a horizontal alignment, you can also have the following options:
Auto: auto-align Justify
Space words: Aligns text by adding spaces between words.
Newspaper style: Increases or decreases the space-aligned text between words or letters.
Distribute spacing: Working with spaces is much like newspaper, which applies to East Asian documents.
Distribute all Lines: Both ends are hyphenation the same way as distribute, and apply to ideographic documents.
(2) kerning and line spacing
Kerning (Letters) is similar to the adjustment of line spacing (Lines), both normal (normal) and custom (custom), and if you select Custom, you can set the specific spacing size on the right.
(3) Text flow
The text flow consists of the indentation (indent) and text Direction (text direction) two properties. In which, the text direction can have left to right (Left-to-right) and right to left (Right-to-left) two options.
It should be noted that the above property settings will have the corresponding results in the Preview box below the dialog box.
Getting and changing CSS properties of elements in a program
To get and change the CSS properties of elements in the web dialog class, you can use the IHTMLElement interface, which provides a number of methods for HTML elements, where Get_style is used to manipulate attributes, including CSS, and its prototype is as follows:
HRESULT Get_style (IHTMLStyle **p);
where P is the IHTMLStyle pointer variable, IHTMLStyle is also an interface that provides methods to get and set specific properties. For example, Get_color and Put_color are used to get and set the color of elements, and their prototypes are as follows:
HRESULT Get_color (VARIANT *p);
HRESULT Put_color (VARIANT v);
Where the variant is a type compatible with most data types, be careful to set the specific type of variant variable when used.
The following example is when the mouse crosses a paragraph of text, the color from red to blue, the following steps:
(1) Select the File menu->new menu->project command to create a EX_DLG project based on the web dialog box (detailed process here slightly).
(2) switch to the Resource View window in the scenario navigation area, expand the HTML entry, and double-click the Idr_html_ex_dlg_dialog item to display the corresponding HTML template in the document window.
(3) Delete all the default elements (including OK and Cancel buttons) in the HTML template, double-click the Linear Layout panel button in the HTML toolbox, add a line panel to the HTML page, and add text to it: "When you use the mouse to cross the text, See what's changed? "。
(4) In the Properties window, change the ID number of the panel added above to Div1, and then click the browse (...) to the right of the style item. button to set its text color to red.
(5) Open the Web dialog class Cex_dlgdlg file Ex_dlgdlg.cpp, locate the program segment between Begin_dhtml_event_map (Cex_dlgdlg) and End_dhtml_event_map () in front of the file. Then add the following code:
Where the event map macros Dhtml_event_onmouseover and dhtml_event_onmouseout are used to map the events that the mouse moves to and moves out respectively.
(6) Open the header file Ex_dlgdlg.h, add the declaration of the following event-mapping function, and add the member variable M_varcolor to hold the original color value:
(8) Compile and run, and then see when the mouse across that paragraph of text, color will change? When removed, is the color not restored to the original red?
At this point, through the above methods and techniques, we can set the HTML element properties and program control. To be presented is, in Visual C + +. NET's Beta 1 version, the Web dialog class CDHtmlDialog Getelementproperty and Setelementproperty seem to be able to effectively get and set the attributes of HTML elements.
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
