How to make a List in CocosCreator
|
CocosCreator version: 2.3.4 Cocos does not have a List component, so you have to write it yourself. Find the demo of assets/case/02_ui/05_listView from the cocos example project and modify it. Write a virtual list with vertical layout, horizontal layout, grid layout and Padding List Demo address: https://files-cdn.cnblogs.com/files/gamedaybyday/cocos2.3.4_ListViewDemo_Grid.7z
The original LayOut of cocos makes a list, and there are 100 instances for 100 data (left picture). In a virtual list, only the instances you see exist, and they are recycled when you scroll. (Right picture)
How to use ListThe method of use is to add the List component on the ScrollView. The item list items of List are placed directly under content and assigned to the List component. Item needs to add an object inherited from ItemRender for data refresh.
Set data for List in the code
//Set the ranking data let rankData = [];
for(let i=0;i<100;i++){
rankData.push({rank:i, name:"name"});
}
this.rankList.setData(rankData);Source code
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
import ItemRender from "./ItemRender"
const { ccclass, property } = cc._decorator;
/**List arrangement method*/
export enum ListType {
/**Horizontal arrangement*/
Horizontal = 1,
/**Vertical arrangement*/
Vertical = 2,
/**Grid arrangement*/
Grid = 3
}
/**Direction in grid layout*/
export enum StartAxisType {
/**Horizontal arrangement*/
Horizontal = 1,
/**Vertical arrangement*/
Vertical = 2,
}
/**
* List * Modified based on listView of cocos_example * @author chenkai 2020.7.8
* @example
* 1. Create a Cocos ScrollView component, add a List, and set the List properties*
*/
@ccclass
export default class List extends cc.Component {
//===================== Properties panel=========================
/**List options*/
@property({ type: cc.Node, tooltip: "list item" })
public itemRender: cc.Node = null;
/**Arrangement method*/
@property({ type: cc.Enum(ListType), tooltip: "Arrangement method" })
public type: ListType = ListType.Vertical;
/**Direction in grid layout*/
@property({ type: cc.Enum(StartAxisType), tooltip: "Direction in grid layout", visible() { return this.type == ListType.Grid } })
public startAxis: StartAxisType = StartAxisType.Horizontal;
/**X spacing between list items*/
@property({ type: cc.Integer, tooltip: "List item X interval", visible() { return (this.type == ListType.Horizontal || this.type == ListType.Grid) } })
public spaceX: number = 0;
/**Y spacing between list items*/
@property({ type: cc.Integer, tooltip: "List item Y interval", visible() { return this.type == ListType.Vertical || this.type == ListType.Grid } })
public spaceY: number = 0;
/**Top spacing*/
@property({ type: cc.Integer, tooltip: "Top spacing", visible() { return (this.type == ListType.Vertical || this.type == ListType.Grid) } })
public padding_top: number = 0;
/**Bottom spacing*/
@property({ type: cc.Integer, tooltip: "Bottom spacing", visible() { return (this.type == ListType.Vertical || this.type == ListType.Grid) } })
public padding_buttom: number = 0;
/**Left spacing*/
@property({ type: cc.Integer, tooltip: "Left spacing", visible() { return (this.type == ListType.Horizontal || this.type == ListType.Grid) } })
public padding_left: number = 0;
@property(cc.Integer)
public _padding: number = 0;
/**Right spacing*/
@property({ type: cc.Integer, tooltip: "Right spacing", visible() { return (this.type == ListType.Horizontal || this.type == ListType.Grid) } })
public padding_right: number = 0;
//====================== Scrolling container===============================
/**List scroll container*/
public scrollView: cc.ScrollView = null;
/**scrollView content container*/
private content: cc.Node = null;
//======================= List items===========================
/**List item data*/
private itemDataList: Array<any> = [];
/**Number of instances that should be created*/
private spawnCount: number = 0;
/**Array to store list item instances*/
private itemList: Array<cc.Node> = [];
/**item height*/
private itemHeight: number = 0;
/**item width*/
private itemWidth: number = 0;
/**Store list items that are no longer in use*/
private itemPool: Array<cc.Node> = [];
//======================= Calculation parameters=========================
/**The distance from the center of the scrollView. Items exceeding this distance will be reset. It is generally set to scrollVIew.height/2 + item.heigt/2 + space, because this distance item is just beyond the scrollView display range*/
private halfScrollView:number = 0;
/**The previous content's X value is used to compare with the current content's X value to determine whether to scroll left or right*/
private lastContentPosX: number = 0;
/**The Y value of the previous content is used to compare with the Y value of the current content to determine whether to scroll up or down*/
private lastContentPosY: number = 0;
/**Number of grid rows*/
private gridRow: number = 0;
/**Number of grid columns*/
private gridCol: number = 0;
/**Refresh time, unit s */
private updateTimer: number = 0;
/**Refresh interval, unit s */
private updateInterval: number = 0.1;
/**Whether to scroll the container*/
private bScrolling: boolean = false;
/**Refresh function*/
private updateFun: Function = function () { };
onLoad() {
this.itemHeight = this.itemRender.height;
this.itemWidth = this.itemRender.width;
this.scrollView = this.node.getComponent(cc.ScrollView);
this.content = this.scrollView.content;
this.content.anchorX = 0;
this.content.anchorY = 1;
this.content.removeAllChildren();
this.scrollView.node.on("scrolling", this.onScrolling, this);
}
/**
* List data (list data is copied and used. If the list data changes, you need to reset the data)
* @param itemDataList item data list */
public setData(itemDataList: Array<any>) {
this.itemDataList = itemDataList.slice();
this.updateContent();
}
/**Calculate the parameters of the list*/
private countListParam() {
let dataLen = this.itemDataList.length;
if (this.type == ListType.Vertical) {
this.scrollView.horizontal = false;
this.scrollView.vertical = true;
this.content.width = this.content.parent.width;
this.content.height = dataLen * this.itemHeight + (dataLen - 1) * this.spaceY + this.padding_top + this.padding_buttom;
this.spawnCount = Math.round(this.scrollView.node.height / (this.itemHeight + this.spaceY)) + 2; //Calculate the number of item instances created, which is 2 more than the number of items that can be placed in the current scrollView container this.halfScrollView = this.scrollView.node.height / 2 + this.itemHeight / 2 + this.spaceY; //Calculate bufferZone, the display range of item this.updateFun = this.updateV;
} else if (this.type == ListType.Horizontal) {
this.scrollView.horizontal = true;
this.scrollView.vertical = false;
this.content.width = dataLen * this.itemWidth + (dataLen - 1) * this.spaceX + this.padding_left + this.padding_right;
this.content.height = this.content.parent.height;
this.spawnCount = Math.round(this.scrollView.node.width / (this.itemWidth + this.spaceX)) + 2;
this.halfScrollView = this.scrollView.node.width / 2 + this.itemWidth / 2 + this.spaceX;
this.updateFun = this.udpateH;
} else if (this.type == ListType.Grid) {
if (this.startAxis == StartAxisType.Vertical) {
this.scrollView.horizontal = false;
this.scrollView.vertical = true;
this.content.width = this.content.parent.width;
//If the distance between left and right is too large to fit an item, both left and right are set to 0, which is equivalent to not taking effect if (this.padding_left + this.padding_right + this.itemWidth + this.spaceX > this.content.width) {
this.padding_left = 0;
this.padding_right = 0;
console.error("padding_left or padding_right is too large");
}
this.gridCol = Math.floor((this.content.width - this.padding_left - this.padding_right) / (this.itemWidth + this.spaceX));
this.gridRow = Math.ceil(dataLen / this.gridCol);
this.content.height = this.gridRow * this.itemHeight + (this.gridRow - 1) * this.spaceY + this.padding_top + this.padding_buttom;
this.spawnCount = Math.round(this.scrollView.node.height / (this.itemHeight + this.spaceY)) * this.gridCol + this.gridCol * 2;
this.halfScrollView = this.scrollView.node.height / 2 + this.itemHeight / 2 + this.spaceY;
this.updateFun = this.updateGrid_V;
} else if (this.startAxis == StartAxisType.Horizontal) {
this.scrollView.horizontal = true;
this.scrollView.vertical = false;
//Calculate the height interval this.content.height = this.content.parent.height;
//If the distance between left and right is too large to fit an item, both left and right are set to 0, which is equivalent to not taking effect if (this.padding_top + this.padding_buttom + this.itemHeight + this.spaceY > this.content.height) {
this.padding_top = 0;
this.padding_buttom = 0;
console.error("padding_top or padding_buttom is too large");
}
this.gridRow = Math.floor((this.content.height - this.padding_top - this.padding_buttom) / (this.itemHeight + this.spaceY));
this.gridCol = Math.ceil(dataLen / this.gridRow);
this.content.width = this.gridCol * this.itemWidth + (this.gridCol - 1) * this.spaceX + this.padding_left + this.padding_right;
this.spawnCount = Math.round(this.scrollView.node.width / (this.itemWidth + this.spaceX)) * this.gridRow + this.gridRow * 2;
this.halfScrollView = this.scrollView.node.width / 2 + this.itemWidth / 2 + this.spaceX;
this.updateFun = this.updateGrid_H;
}
}
}
/**
* Create a list * @param startIndex The starting index of the displayed data 0 represents the first item * @param offset ScrollView offset */
private createList(startIndex: number, offset: cc.Vec2) {
//When the length of the data to be displayed > the length of the virtual list, when deleting the last few data, the list needs to be reset to the bottom of the scrollView if (this.itemDataList.length > this.spawnCount && (startIndex + this.spawnCount - 1) >= this.itemDataList.length) {
startIndex = this.itemDataList.length - this.spawnCount;
offset = this.scrollView.getMaxScrollOffset();
//When the length of the data to be displayed is <= the length of the virtual list, hide the extra virtual list items} else if (this.itemDataList.length <= this.spawnCount) {
startIndex = 0;
}
for (let i = 0; i < this.spawnCount; i++) {
let item: cc.Node;
//If the data index to be displayed is within the data range, the item instance will be displayed if (i + startIndex < this.itemDataList.length) {
if (this.itemList[i] == null) {
item = this.getItem();
this.itemList.push(item);
item.parent = this.content;
} else {
item = this.itemList[i];
}
//If the data index to be displayed exceeds the data range, the item instance will be hidden} else {
//Number of item instances > amount of data to be displayed if (this.itemList.length > (this.itemDataList.length - startIndex)) {
item = this.itemList.pop();
item.removeFromParent();
this.itemPool.push(item);
}
continue;
}
let itemRender: ItemRender = item.getComponent(ItemRender);
itemRender.itemIndex = i + startIndex;
itemRender.data = this.itemDataList[i + startIndex];
itemRender.dataChanged();
if (this.type == ListType.Vertical) {
//Because the anchor point X of content is 0, the x value of item is content.with/2, which means centering. The anchor point Y is 1, so the y value of item is 0 to negative infinity from the top of content downward. So when item.y = -item.height/2, it is at the top of content.
item.setPosition(this.content.width / 2, -item.height * (0.5 + i + startIndex) - this.spaceY * (i + startIndex) - this.padding_top);
} else if (this.type == ListType.Horizontal) {
item.setPosition(item.width * (0.5 + i + startIndex) + this.spaceX * (i + startIndex) + this.padding_left, -this.content.height / 2);
} else if (this.type == ListType.Grid) {
if (this.startAxis == StartAxisType.Vertical) {
var row = Math.floor((i + startIndex) / this.gridCol);
var col = (i + startIndex) % this.gridCol;
item.setPosition(item.width * (0.5 + col) + this.spaceX * col + this.padding_left, -item.height * (0.5 + row) - this.spaceY * row - this.padding_top);
item.opacity = 255;
} else if (this.startAxis == StartAxisType.Horizontal) {
var row = (i + startIndex) % this.gridRow;
var col = Math.floor((i + startIndex) / this.gridRow);
item.setPosition(item.width * (0.5 + col) + this.spaceX * col + this.padding_left, -item.height * (0.5 + row) - this.spaceY * row - this.padding_top);
item.opacity = 255;
}
}
}
this.scrollView.scrollToOffset(offset);
}
/**Get a list item*/
private getItem() {
if (this.itemPool.length == 0) {
return cc.instantiate(this.itemRender);
} else {
return this.itemPool.pop();
}
}
update(dt) {
if (this.bScrolling == false) {
return;
}
this.updateTimer += dt;
if (this.updateTimer < this.updateInterval) {
return;
}
this.updateTimer = 0;
this.bScrolling = false;
this.updateFun();
}
onScrolling() {
this.bScrolling = true;
}
/**Vertical arrangement*/
private updateV() {
let items = this.itemList;
let item;
let bufferZone = this.halfScrollView;
let isUp = this.scrollView.content.y > this.lastContentPosY;
let offset = (this.itemHeight + this.spaceY) * items.length;
for (let i = 0; i < items.length; i++) {
item = items[i];
let viewPos = this.getPositionInView(item);
if (isUp) {
//When the item slides up, it exceeds the upper boundary of scrollView, and the item is moved to the bottom for reuse. The position where the item moves to the bottom must not exceed the lower boundary of content if (viewPos.y > bufferZone && item.y - offset - this.padding_buttom > -this.content.height) {
let itemRender: ItemRender = item.getComponent(ItemRender);
let itemIndex = itemRender.itemIndex + items.length;
itemRender.itemIndex = itemIndex;
itemRender.data = this.itemDataList[itemIndex];
itemRender.dataChanged();
item.y = item.y - offset;
}
} else {
//When the item slides down, it exceeds the bottom boundary of scrollView, and moves the item to the top for reuse. The position where the item moves to the top must not exceed the top boundary of content if (viewPos.y < -bufferZone && item.y + offset + this.padding_top < 0) {
let itemRender: ItemRender = item.getComponent(ItemRender);
let itemIndex = itemRender.itemIndex - items.length;
itemRender.itemIndex = itemIndex;
itemRender.data = this.itemDataList[itemIndex];
itemRender.dataChanged();
item.y = item.y + offset;
}
}
}
this.lastContentPosY = this.scrollView.content.y;
}
/**Horizontal arrangement*/
private udpateH() {
let items = this.itemList;
let item;
let bufferZone = this.halfScrollView;
let isRight = this.scrollView.content.x > this.lastContentPosX;
let offset = (this.itemWidth + this.spaceX) * items.length;
for (let i = 0; i < items.length; i++) {
item = items[i];
let viewPos = this.getPositionInView(item);
if (isRight) {
//When the item slides right, it exceeds the right boundary of scrollView, and moves the item to the left for reuse. The position of the item moved to the left must not exceed the left boundary of content if (viewPos.x > bufferZone && item.x - offset - this.padding_left > 0) {
let itemRender: ItemRender = item.getComponent(ItemRender);
let itemIndex = itemRender.itemIndex - items.length;
itemRender.itemIndex = itemIndex;
itemRender.data = this.itemDataList[itemIndex];
itemRender.dataChanged();
item.x = item.x - offset;
}
} else {
//When the item slides to the left, it exceeds the left boundary of scrollView, and the item is moved to the right for reuse. The position of the item moved to the right must not exceed the right boundary of content if (viewPos.x < -bufferZone && item.x + offset + this.padding_right < this.content.width) {
let itemRender: ItemRender = item.getComponent(ItemRender);
let itemIndex = itemRender.itemIndex + items.length;
itemRender.itemIndex = itemIndex;
itemRender.data = this.itemDataList[itemIndex];
itemRender.dataChanged();
item.x = item.x + offset;
}
}
}
this.lastContentPosX = this.scrollView.content.x;
}
/**Grid vertical arrangement*/
private updateGrid_V() {
let items = this.itemList;
let item: cc.Node;
let bufferZone = this.halfScrollView;
let isUp = this.scrollView.content.y > this.lastContentPosY;
let offset = (this.itemHeight + this.spaceY) * (this.spawnCount / this.gridCol);
for (let i = 0; i < items.length; i++) {
item = items[i];
let viewPos = this.getPositionInView(item);
if (isUp) {
//When the item slides up, it exceeds the upper boundary of scrollView, and the item is moved to the bottom for reuse. The position where the item moves to the bottom must not exceed the lower boundary of content if (viewPos.y > bufferZone && item.y - offset - this.padding_buttom > -this.content.height) {
let itemRender: ItemRender = item.getComponent(ItemRender);
let itemIndex = itemRender.itemIndex + (this.spawnCount / this.gridCol) * this.gridCol;
if (this.itemDataList[itemIndex] != null) {
item.y = item.y - offset;
itemRender.itemIndex = itemIndex;
itemRender.data = this.itemDataList[itemIndex];
itemRender.dataChanged();
item.opacity = 255;
} else {
item.y = item.y - offset;
itemRender.itemIndex = itemIndex;
item.opacity = 0;
}
}
} else {//When the item slides down, it exceeds the bottom boundary of scrollView, and moves the item to the top for reuse. The position where the item moves to the top must not exceed the top boundary of the content if (viewPos.y < -bufferZone && item.y + offset + this.padding_top < 0) {
let itemRender: ItemRender = item.getComponent(ItemRender);
let itemIndex = itemRender.itemIndex - (this.spawnCount / this.gridCol) * this.gridCol;
if (this.itemDataList[itemIndex] != null) {
item.y = item.y + offset;
itemRender.itemIndex = itemIndex;
itemRender.data = this.itemDataList[itemIndex];
itemRender.dataChanged();
item.opacity = 255;
} else {
item.y = item.y + offset;
itemRender.itemIndex = itemIndex;
item.opacity = 0;
}
}
}
}
this.lastContentPosY = this.scrollView.content.y;
}
/**Grid horizontal arrangement*/
private updateGrid_H() {
let items = this.itemList;
let item;
let bufferZone = this.halfScrollView;
let isRight = this.scrollView.content.x > this.lastContentPosX;
let offset = (this.itemWidth + this.spaceX) * (this.spawnCount / this.gridRow);
for (let i = 0; i < items.length; i++) {
item = items[i];
let viewPos = this.getPositionInView(item);
if (isRight) {
//When the item slides right, it exceeds the right boundary of scrollView, and moves the item to the left for reuse. The position of the item moved to the left must not exceed the left boundary of content if (viewPos.x > bufferZone && item.x - offset - this.padding_left > 0) {
let itemRender: ItemRender = item.getComponent(ItemRender);
let itemIndex = itemRender.itemIndex - (this.spawnCount / this.gridRow) * this.gridRow;
if (this.itemDataList[itemIndex] != null) {
item.x = item.x - offset;
itemRender.itemIndex = itemIndex;
itemRender.data = this.itemDataList[itemIndex];
itemRender.dataChanged();
item.opacity = 255;
} else {
item.x = item.x - offset;
itemRender.itemIndex = itemIndex;
item.opacity = 0;
}
}
} else {
//When the item slides to the left, it exceeds the left boundary of scrollView, and the item is moved to the right for reuse. The position of the item moved to the right must not exceed the right boundary of content if (viewPos.x < -bufferZone && item.x + offset + this.padding_right < this.content.width) {
let itemRender: ItemRender = item.getComponent(ItemRender);
let itemIndex = itemRender.itemIndex + (this.spawnCount / this.gridRow) * this.gridRow;
if (this.itemDataList[itemIndex] != null) {
item.x = item.x + offset;
itemRender.itemIndex = itemIndex;
itemRender.data = this.itemDataList[itemIndex];
itemRender.dataChanged();
item.opacity = 255;
} else {
item.x = item.x + offset;
itemRender.itemIndex = itemIndex;
item.opacity = 0;
}
}
}
}
this.lastContentPosX = this.scrollView.content.x;
}
/**Get the local coordinates of the item in the scrollView*/
private getPositionInView(item) {
let worldPos = item.parent.convertToWorldSpaceAR(item.position);
let viewPos = this.scrollView.node.convertToNodeSpaceAR(worldPos);
return viewPos;
}
/**Get list data*/
public getListData() {
return this.itemDataList;
}
/**
* Add an item of data to the end of the list * @param data data */
public addItem(data: any) {
this.itemDataList.push(data);
this.updateContent();
}
/**
* Add an item of data to the specified position of the list * @param index position, 0 means the first item * @param data data */
public addItemAt(index: number, data: any) {
if (this.itemDataList[index] != null || this.itemDataList.length == index) {
this.itemDataList.splice(index, 1, data);
this.updateContent();
}
}
/**
* Delete an item of data* @param index The position of the item to be deleted, 0 means the first item*/
public deleteItem(index: number) {
if (this.itemDataList[index] != null) {
this.itemDataList.splice(index, 1);
this.updateContent();
}
}
/**
* Change an item of data * @param index position, 0 means the first item * @param data data to be replaced */
public changeItem(index: number, data: any) {
if (this.itemDataList[index] != null) {
this.itemDataList[index] = data;
this.updateContent();
}
}
/**Get the position of the first Item*/
private updateContent() {
//The display list instance is 0 if (this.itemList.length == 0) {
this.countListParam();
this.createList(0, new cc.Vec2(0, 0));
//If the number of instances in the display list is not 0, you need to rearrange the item instance array} else {
if (this.type == ListType.Vertical) {
this.itemList.sort((a: any, b: any) => {
return by - ay;
});
} else if (this.type == ListType.Horizontal) {
this.itemList.sort((a: any, b: any) => {
return ax - bx;
});
} else if (this.type == ListType.Grid) {
if (this.startAxis == StartAxisType.Vertical) {
this.itemList.sort((a: any, b: any) => {
return ax - bx;
});
this.itemList.sort((a: any, b: any) => {
return by - ay;
});
} else if (this.startAxis == StartAxisType.Horizontal) {
this.itemList.sort((a: any, b: any) => {
return by - ay;
});
this.itemList.sort((a: any, b: any) => {
return ax - bx;
});
}
}
this.countListParam();
//Get the data index that needs to be displayed for the first item instance var startIndex = this.itemList[0].getComponent(ItemRender).itemIndex;
if (this.type == ListType.Grid && this.startAxis == StartAxisType.Vertical) {
startIndex += (startIndex + this.spawnCount) % this.gridCol;
} else if (this.type == ListType.Grid && this.startAxis == StartAxisType.Horizontal) {
startIndex += (startIndex + this.spawnCount) % this.gridRow;
}
//The x values of getScrollOffset() and scrollToOffset() are opposite var offset: cc.Vec2 = this.scrollView.getScrollOffset();
offset.x = - offset.x;
this.createList(startIndex, offset);
}
}
/**destroy*/
public onDestroy() {
//Clean up list items let len = this.itemList.length;
for (let i = 0; i < len; i++) {
if (cc.isValid(this.itemList[i], true)) {
this.itemList[i].destroy();
}
}
this.itemList.length = 0;
//Clean up the object pool len = this.itemPool.length;
for (let i = 0; i < len; i++) {
if (cc.isValid(this.itemPool[i], true)) {
this.itemPool[i].destroy();
}
}
this.itemPool.length = 0;
//Clean up list data this.itemDataList.length = 0;
}
}The above is the details of how to make a List in CocosCreator. For more information about CocosCreator List, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: Several important MySQL variables
>>: Detailed explanation of viewing and setting file permissions on Mac
Recommend
Detailed explanation of MySQL clustered index and non-clustered index
1. Clustered Index Table data is stored in the or...
JavaScript to implement the function of changing avatar
This article shares the specific code of JavaScri...
MySQL index optimization: paging exploration detailed introduction
Table of contents MySQL Index Optimization Paging...
Example of how to implement master-slave hot standby using Docker+keepalived+nginx
Preface To solve the single point of failure, we ...
Bootstrap 3.0 study notes page layout
This time we will mainly learn about layout, whic...
About WSL configuration and modification issues in Docker
https://docs.microsoft.com/en-us/windows/wsl/wsl-...
Mobile terminal adaptation makes px automatically converted to rem
Install postcss-pxtorem first: npm install postcs...
Some common advanced SQL statements in MySQL
MySQL Advanced SQL Statements use kgc; create tab...
The MySQL server is running with the --read-only option so it cannot execute this statement
I was in a meeting when a colleague called to rep...
Detailed steps for setting up the network for the virtual machine that comes with win10 (graphic tutorial)
1. Click the server host and click "Virtual ...
Quickjs encapsulates JavaScript sandbox details
Table of contents 1. Scenario 2. Simplify the und...
How to execute PHP scheduled tasks in CentOS7
Preface This article mainly introduces the releva...
Ubuntu 16.04 image complete installation tutorial under VMware
This article shares with you the installation tut...
Solution to MySQL root password error number 1045
Stop MySQL Service Windows can right-click My Com...
Various front-end printing methods of web: CSS controls web page printing style
CSS controls the printing style of web pages : Use...