Tiện ích

Bạn có thể sử dụng nhiều tiện ích để tạo giao diện người dùng. Các tiện ích này bao gồm các nút, hộp đánh dấu, thanh trượt, hộp văn bản và trình đơn lựa chọn. Bạn chỉ có thể in hoặc thêm tiện ích vào một bảng điều khiển một lần. Các phần sau đây minh hoạ chức năng, giao diện cơ bản của các tiện ích. Hãy xem phần Kiểu để biết thêm thông tin về cách tạo kiểu cho tiện ích. Các ví dụ sau đây chỉ print() các tiện ích vào bảng điều khiển. Để biết thông tin chi tiết về cách thêm tiện ích vào bảng điều khiển, hãy xem trang Bảng điều khiển và bố cục.

ui.Label

Nhãn chỉ đơn giản là các khu vực hiển thị văn bản. Ví dụ: mã sau đây sẽ in một nhãn:

Trình soạn thảo mã (JavaScript)

var label = ui.Label('Cool label!');
print(label);

Có dạng như sau:

Chia nhỏ các nhãn dài bằng cách chèn ký tự dòng mới (\n) và đặt đối số thuộc tính kiểu whiteSpace thành 'pre':

print(ui.Label('Here is a:\nnew line', {whiteSpace: 'pre'}));

ui.Button

Nút là một tiện ích giao diện người dùng tương tác có thể nhấp vào. Bạn có thể chỉ định một hàm để gọi (hàm "lệnh gọi lại") khi người dùng nhấp vào nút. (Để biết thêm thông tin về cách xử lý sự kiện bằng hàm gọi lại, hãy xem trang Sự kiện). Ví dụ sau đây in tâm điểm hiện tại của bản đồ khi người dùng nhấp vào nút:

Trình soạn thảo mã (JavaScript)

var button = ui.Button({
  label: 'Get Map Center',
  onClick: function() {
    print(Map.getCenter());
  }
});
print(button);

Có dạng như sau:

ui.Checkbox

Hộp đánh dấu là một tiện ích cho phép người dùng đánh dấu (hoặc bỏ đánh dấu) một hộp. Khi trạng thái của hộp đánh dấu thay đổi, các lệnh gọi lại đã đăng ký cho tiện ích sẽ được truyền một giá trị boolean cho biết liệu hộp đánh dấu hiện đã được đánh dấu hay chưa. Ví dụ:

Trình soạn thảo mã (JavaScript)

var checkbox = ui.Checkbox('Show SRTM layer', true);

checkbox.onChange(function(checked) {
  // Shows or hides the first map layer based on the checkbox's value.
  Map.layers().get(0).setShown(checked);
});

Map.addLayer(ee.Image('CGIAR/SRTM90_V4'));
print(checkbox);

Hộp đánh dấu được in sẽ có dạng như sau:

Xin lưu ý rằng việc đánh dấu vào hộp này sẽ bật một lớp hiển thị trên bản đồ. Cũng như các thành phần giao diện người dùng khác, bạn có thể thao tác với Bản đồ của Trình soạn thảo mã theo phương thức lập trình. Tìm hiểu thêm về đối tượng Map (Bản đồ) trên trang Panels and Layouts (Bảng điều khiển và bố cục).

ui.Slider

Thanh trượt là một tiện ích cho phép người dùng điều chỉnh thanh trượt để nhận một số trong phạm vi thanh trượt. Định cấu hình phạm vi bằng hàm khởi tạo hoặc bằng cách đặt các thuộc tính của thanh trượt. Ví dụ sau đây sử dụng thanh trượt để đặt độ mờ của lớp đầu tiên trên Bản đồ:

Trình soạn thảo mã (JavaScript)

var slider = ui.Slider();

slider.setValue(0.9);  // Set a default value.
slider.onChange(function(value) {
  Map.layers().get(0).setOpacity(value);
});

Map.addLayer(ee.Image(255), {palette: 'blue'});
print(slider);

Thanh trượt sẽ có dạng như sau:

Lưu ý rằng giá trị của thanh trượt sẽ hiển thị ở bên phải thanh trượt.

ui.DateSlider

Tiện ích DateSlider giống như tiện ích Slider, nhưng xử lý ngày một cách rõ ràng. DateSlider được định cấu hình để chọn một ngày trong tháng 6 năm 2018 sẽ có dạng như sau:

DateSlider hữu ích cho việc lọc các bộ sưu tập, như trong ví dụ sau đây, ví dụ này sẽ tạo một thành phần kết hợp hằng năm dựa trên DateRange được đặt trong DateSlider:

Trình soạn thảo mã (JavaScript)

// Use a DateSlider to create annual composites of this collection.
var collection = ee.ImageCollection('LANDSAT/LC08/C02/T1');
// Use the start of the collection and now to bound the slider.
var start = ee.Image(collection.first()).date().get('year').format();
var now = Date.now();
var end = ee.Date(now).format();

// Run this function on a change of the dateSlider.
var showMosaic = function(range) {
  var mosaic = ee.Algorithms.Landsat.simpleComposite({
    collection: collection.filterDate(range.start(), range.end())
  });
  // Asynchronously compute the name of the composite.  Display it.
  range.start().get('year').evaluate(function(name) {
    var visParams = {bands: ['B4', 'B3', 'B2'], max: 100};
    var layer = ui.Map.Layer(mosaic, visParams, name + ' composite');
    Map.layers().set(0, layer);
  });
};

// Asynchronously compute the date range and show the slider.
var dateRange = ee.DateRange(start, end).evaluate(function(range) {
  var dateSlider = ui.DateSlider({
    start: range['dates'][0],
    end: range['dates'][1],
    value: null,
    period: 365,
    onChange: showMosaic,
    style: {width: '180px'}
  });
  Map.add(dateSlider.setValue(now));
});

// Initialize the map location at southern Africa.
Map.setCenter(23.861, -27.144, 6);

ui.Textbox

Hộp văn bản là nơi thu thập văn bản do người dùng nhập. Ví dụ:

Trình soạn thảo mã (JavaScript)

var textbox = ui.Textbox({
  placeholder: 'Enter text here...',
  onChange: function(text) {
    print('So what you are saying is ' + text + '?');
  }
});
print(textbox);

Hộp văn bản sẽ có dạng như sau:

Xin lưu ý rằng lệnh gọi lại chỉ được kích hoạt khi người dùng đã nhập xong văn bản (và nhấn return) hoặc người dùng nhấp ra khỏi hộp văn bản.

ui.Select

Tiện ích chọn đại diện cho một trình đơn thả xuống gồm các lựa chọn mà người dùng có thể chọn một. Ví dụ sau đây minh hoạ một trình đơn thả xuống cho phép người dùng chọn một vị trí:

Trình soạn thảo mã (JavaScript)

var places = {
  MTV: [-122.0849, 37.3887],
  PEK: [116.4056, 39.9097],
  ZRH: [8.536, 47.376]
};

var select = ui.Select({
  items: Object.keys(places),
  onChange: function(key) {
    Map.setCenter(places[key][0], places[key][1]);
  }
});

// Set a place holder.
select.setPlaceholder('Choose a location...');

print(select);

Tiện ích chọn sẽ có dạng như sau:

ui.Chart

Các biểu đồ trong gói ui.Chart hoạt động tương tự như các biểu đồ trong gói Chart. Cụ thể, ui.Chart là một lớp phủ mỏng xung quanh một thực thể của ChartWrapper trong API Google Visualization. Để biết thêm thông tin về cách thao tác với các đối tượng ChartWrapper, hãy xem tài liệu tham khảo này. Để biết thêm thông tin về các hàm trợ giúp biểu đồ trong Earth Engine, hãy xem tài liệu về Biểu đồ.

ui.Thumbnail

Bạn có thể dùng tiện ích hình thu nhỏ để xem trước các đối tượng ee.Image và ee.ImageCollection. Khi được cung cấp ee.Image, tiện ích sẽ hiển thị một hình ảnh tĩnh; khi được cung cấp ee.ImageCollection, tiện ích sẽ hiển thị một ảnh động với một khung hình cho mỗi hình ảnh trong dữ liệu đầu vào. Cũng như với ee.Image.getThumbURL() và ee.ImageCollection.getVideoThumbURL(), bạn có thể chỉ định các tham số để kiểm soát định dạng và kích thước của hình thu nhỏ thu được:

Trình soạn thảo mã (JavaScript)

// Create a box around an area in the Brazilian Amazon.
var box = ee.Geometry.Polygon([[
  [-62.9564, 2.5596], [-62.9550, 2.4313], [-62.8294, 2.4327], [-62.8294, 2.5596]
]]);

// Visualize the image in RGB.
var image = ee.Image('LANDSAT/LE07/C02/T1_L2/LE07_233058_20011113')
                .select(['SR_B[1-3]'])  // blue, green, red reflectance
                .multiply(0.0000275).add(-0.2)  // apply scaling factors
                .visualize({
                  bands: ['SR_B3', 'SR_B2', 'SR_B1'],
                  min: 0,
                  max: 0.12,
                  gamma: 1.3
                });

// Print a thumbnail to the console.
print(ui.Thumbnail({
  image: image,
  params: {dimensions: '256x256', region: box, format: 'png'},
  style: {height: '300px', width: '300px'}
}));

Hình thu nhỏ sẽ có dạng như sau:

ui.Map

ui.Map là một tiện ích bản đồ. (Thực tế, Map (Bản đồ) của Trình soạn thảo mã mặc định là một thực thể của lớp này). Giống như các tiện ích khác, bạn có thể in bản đồ vào bảng điều khiển. Thao tác với nội dung của bản đồ bằng cách xoá, lấy hoặc đặt từng lớp. Ví dụ sau đây in một bản đồ vào bảng điều khiển cho thấy các giới hạn của Bản đồ trong Trình soạn thảo mã:

Trình soạn thảo mã (JavaScript)

// Make a little map.
var map = ui.Map();

// Make the little map display an inset of the big map.
var createInset = function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  map.centerObject(bounds);
  map.clear();
  map.addLayer(bounds);
};

// Run it once to initialize.
createInset();

// Get a new inset map whenever you click on the big map.
Map.onClick(createInset);

// Display the inset map in the console.
print(map);

Bản đồ lồng ghép sẽ có dạng như sau:

Trong ví dụ này, người dùng cần nhấp vào bản đồ lớn để phần lồng ghép vẽ trong bản đồ nhỏ.

Bạn cũng có thể thao tác với các lớp trên bản đồ bằng cách gọi layers() trên bản sao bản đồ. layers() trả về một ui.data.ActiveList, một đối tượng giống mảng. Khi bạn thay đổi giá trị này, các lớp trên bản đồ cũng sẽ thay đổi. Tìm hiểu thêm trong mục ui.Map.Layer.

ui.Map.Layer

Lớp không phải là một tiện ích có thể định kiểu như ui.Button. Đây chỉ là dữ liệu đại diện cho lớp trên bản đồ. Ví dụ sau đây minh hoạ cách cập nhật bản đồ bằng cách tạo một lớp và cập nhật các thuộc tính của lớp đó dựa trên dữ liệu đầu vào của người dùng:

Trình soạn thảo mã (JavaScript)

var consoleMap = ui.Map({
  lon: -2.0174,
  lat: 48.6474,
  zoom: 13
});

// Create a Layer from this Sentinel-2 image
var image = ee.Image('COPERNICUS/S2/20150821T111616_20160314T094808_T30UWU');
var visParams = {bands: ['B4', 'B3', 'B2'], max: 2048, gamma: 1};
var layer = ui.Map.Layer(image, visParams);

// Update the map by updating the layers list.
var layers = consoleMap.layers();
layers.add(layer);

// Make a textbox to accept a gamma value.
// Update the layer when the gamma value is entered.
var gammaBox = ui.Textbox({
  value: 1,
  onChange: function(value) {
    // visParams is NOT an ActiveDictionary, so set it again.
    visParams.gamma = value;
    layer.setVisParams(visParams);
  }
});

print(ui.Label('Enter a gamma value:'));
print(gammaBox);
print(consoleMap);

ui.Map.CloudStorageLayer

Nếu muốn hiển thị (ví dụ: trong một ứng dụng) một lớp tương đối tốn kém để tính toán, bạn nên xuất dữ liệu của mình sang một bộ chứa trên Bộ nhớ trên đám mây vì lý do hiệu suất. Các lớp tĩnh, chỉ có hình ảnh này có thể giúp ứng dụng và tập lệnh của bạn phản hồi nhanh hơn. Bạn có thể tạo một lớp hiển thị tĩnh cho mục đích này bằng cách sử dụng Export.map.toCloudStorage(). Để sử dụng một tập hợp thẻ thông tin đã được Export.map.toCloudStorage() xuất trước đó, hãy tạo một ui.Map.Layer mới từ một bộ chứa và đường dẫn Cloud Storage được chỉ định:

Map.add(ui.Map.CloudStorageLayer({
  bucket: 'earthenginepartners-hansen',
  path: 'tiles/gfc_v1.4/loss_year',
  maxZoom: 12,
  suffix: '.png'
}));

Khi chạy một tập lệnh tải lớp Cloud Storage, bạn có thể thấy thông báo cảnh báo:

ui.Map.DrawingTools

Có một bộ công cụ vẽ hình học được thêm theo mặc định vào Map trong Trình soạn thảo mã. Bạn có thể thay đổi hành vi của các công cụ này trong Map mặc định bằng cách gọi Map.drawingTools(). Ví dụ: để ẩn các công cụ vẽ:

Trình soạn thảo mã (JavaScript)

Map.drawingTools().setShown(false);

Theo mặc định, các bản đồ mới tạo không có công cụ vẽ, nhưng bạn có thể bật công cụ này bằng cách gọi phương thức drawingTools() trên bản đồ:

Trình soạn thảo mã (JavaScript)

var map = ui.Map();
// Prints true since drawingTools() adds drawing tools to the map.
print(map.drawingTools().getShown());
// Replace the default Map with the newly created map.
ui.root.widgets().reset([map]);

Các lớp hình học do các công cụ vẽ vẽ được đưa vào một ui.data.ActiveList mà bạn có thể truy cập bằng cách gọi Map.drawingTools().layers(). Danh sách lớp hình học phản hồi các sự kiện giống như các danh sách đang hoạt động khác, ví dụ: danh sách các lớp trên Map do Map.layers() trả về. Ví dụ sau đây cho thấy cách bạn có thể thiết lập chế độ hiển thị của các lớp hình học do các công cụ vẽ (hiển thị theo mặc định):

Trình soạn thảo mã (JavaScript)

Map.drawingTools().layers().forEach(function(layer) {
  layer.setShown(false);
});

Để thêm một lớp theo phương thức lập trình vào các công cụ vẽ, bạn có thể gọi phương thức addLayer trên các công cụ vẽ hoặc thêm một lớp trực tiếp vào danh sách lớp:

Trình soạn thảo mã (JavaScript)

var geometries = [ee.Geometry.Point([0,0]), ee.Geometry.Rectangle([[0,0], [1,1]])];
Map.drawingTools().addLayer(geometries, 'my_geometry1', 'red');

var layer = ui.Map.GeometryLayer(geometries, 'my_geometry2', 'blue');
Map.drawingTools().layers().add(layer);

Trạng thái của các công cụ vẽ cũng được chuyển sang khi bạn phát hành một Ứng dụng. Nếu bạn hiển thị hoặc ẩn các công cụ vẽ, thì các công cụ đó cũng sẽ hiển thị hoặc ẩn trong Ứng dụng. Các hình học trong nội dung nhập cũng sẽ được chuyển sang trong Ứng dụng.

ui.Map.GeometryLayer

GeometryLayer là một tập hợp các hình học đóng vai trò là một Geometry, GeometryCollection hoặc FeatureCollection duy nhất được thêm vào phần nhập ở đầu tập lệnh và có thể được tham chiếu trong mã.

GeometryLayer do các công cụ vẽ vẽ có hành vi mặc định mà bạn có thể ghi đè bằng cách cung cấp các hàm gọi lại mới. Ví dụ: giả sử bạn muốn các thay đổi tương tác đối với hình học kích hoạt một sự kiện. Để triển khai một hành vi cụ thể, bạn có thể đặt(các) phương thức onEdit(), onErase() hoặc onDraw() trên các công cụ để phản hồi hành động của người dùng. Ví dụ sau đây cho thấy cách kích hoạt một phép tính và cập nhật nhãn bằng kết quả tính toán khi người dùng thêm/chỉnh sửa/xoá một hình học:

Trình soạn thảo mã (JavaScript)

// Load elevation data.
var srtm = ee.Image('USGS/SRTMGL1_003');
Map.addLayer(srtm, {min: 0, max: 5000}, 'SRTM');

// Make a label to display mean elevation at drawn points.
var label = new ui.Label('Draw points to calculate mean elevation');
var inspector = new ui.Panel([label]);
Map.add(inspector);
// Don't make imports that correspond to the drawn points.
Map.drawingTools().setLinked(false);
// Limit the draw modes to points.
Map.drawingTools().setDrawModes(['point']);
// Add an empty layer to hold the drawn points.
Map.drawingTools().addLayer([]);
// Set the geometry type to be point.
Map.drawingTools().setShape('point');
// Enter drawing mode.
Map.drawingTools().draw();

// This function gets called when the geometry layer changes.
// Use debounce to call the function at most every 100 milliseconds.
var getAverageElevation = ui.util.debounce(function() {
  var points = Map.drawingTools().layers().get(0).toGeometry();
  var elevation = srtm.reduceRegion({
    reducer: ee.Reducer.mean(),
    geometry: points,
    scale: 30
  }).get('elevation');
  // Asynchronously evaluate the mean elevation.
  elevation.evaluate(showElevation);
}, 100);

// Set the callback function on changes of the geometry layer.
Map.drawingTools().onEdit(getAverageElevation);
Map.drawingTools().onDraw(getAverageElevation);
Map.drawingTools().onErase(getAverageElevation);

// Set the label to the result of the mean reduction.
function showElevation(elevation) {
  inspector.clear();
  var elevationLabel = ui.Label('Mean elevation: ' + elevation);
  inspector.add(elevationLabel);
}

Lưu ý rằng setLinked() được dùng để bật/tắt kết nối giữa các công cụ vẽ hình học và phần Imports (Nhập) của Trình soạn thảo mã. Trong ví dụ này, các công cụ hình học sẽ bị huỷ liên kết để ngăn việc tạo các tệp nhập. toGeometry được dùng để chuyển đổi lớp thành ee.Geometry. Nếu lớp đã nhập đại diện cho Feature hoặc FeatureCollection, bạn có thể truy xuất đối tượng EE cơ bản bằng getEeObject(). Ngoài ra, hãy lưu ý việc sử dụng ui.util.debounce để ngăn mỗi chuyển động của một hình học kích hoạt hàm gọi lại. Cụ thể, hàm sẽ không kích hoạt cho đến khi 100 mili giây trôi qua kể từ sự kiện gần nhất. Điều này giúp đảm bảo rằng hàm chỉ chạy khi người dùng đã hoàn tất thao tác chỉnh sửa.

Lớp hình học trong tệp nhập được liên kết với Geometry hoặc GeometryCollection, vì vậy, lớp này chỉ có thể chứa các hình học có cùng trạng thái geodesic vì định dạng GeoJSON chỉ cho phép một trạng thái geodesic duy nhất cho tập hợp hình học (xem trang Geodesic vs. Planar Geometries để biết thêm thông tin). Việc chuyển đổi lớp hình học thành FeatureCollection bằng cách nhấn vào biểu tượng bánh răng bên cạnh tên lớp sẽ cho phép bạn thêm hình học geodesic và hình học phẳng vào cùng một lớp. Tuy nhiên, việc chuyển đổi lại thành Geometry sẽ gây ra lỗi. Để tránh điều đó, hãy chuyển đổi thành FeatureCollection hoặc xoá các hình học cho đến khi chỉ còn một trạng thái geodesic trong lớp.

ui.Map.Linker

Giống như lớp, trình liên kết không phải là tiện ích có thể tạo kiểu. Đây là một tiện ích ở chế độ nền có thể dùng để đồng bộ hoá chuyển động của nhiều thực thể ui.Map:

Trình soạn thảo mã (JavaScript)

// Add two maps to the screen.
var left = ui.Map();
var right = ui.Map();
ui.root.clear();
ui.root.add(left);
ui.root.add(right);

// Link the "change-bounds" event for the maps.
// When the user drags one map, the other will be moved in sync.
ui.Map.Linker([left, right], 'change-bounds');

ui.SplitPanel

ui.SplitPanel rất hữu ích khi so sánh các nội dung cạnh nhau. Ưu điểm của ui.SplitPanel so với hai bảng điều khiển thông thường là bạn có thể sử dụng một tay cầm để thực hiện hiệu ứng chuyển đổi vuốt giữa các bảng điều khiển trong ui.SplitPanel. Ví dụ sau đây sử dụng ui.SplitPanel để hiển thị sự khác biệt về phổ của các vết bỏng:

Trình soạn thảo mã (JavaScript)

// Load an image of the Santa Rosa, California 2017 fires.
var image = ee.Image('LANDSAT/LC08/C02/T1_TOA/LC08_045033_20171011');

// Add a color-SWIR composite to the default Map.
Map.setCenter(-122.6624, 38.5011, 12);
Map.addLayer(image, {bands: ['B7', 'B5', 'B3'], max: 0.3}, 'color-SWIR');

// Make another map and add a color-NIR composite to it.
var linkedMap = ui.Map();
linkedMap.addLayer(image, {bands: ['B5', 'B4', 'B3'], max: 0.3}, 'color-NIR');
// Add a thermal image to the map.
linkedMap.addLayer(image, {
  bands: ['B11'],
  min: 290,
  max: 305,
  palette: ['gray', 'white', 'yellow', 'red']
}, 'Thermal');

// Link the default Map to the other map.
var linker = ui.Map.Linker([ui.root.widgets().get(0), linkedMap]);

// Make an inset map and add it to the linked map.
var inset = ui.Map();
inset.style().set({position: 'bottom-right', width: '300px', height: '250px'});
inset.setControlVisibility({all: false, mapTypeControl: true});
linkedMap.add(inset);

// Register a function to the linked map to update the inset map.
linkedMap.onChangeBounds(function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  inset.centerObject(bounds);
  inset.layers().set(0, bounds);
});

// Create a SplitPanel which holds the linked maps side-by-side.
var splitPanel = ui.SplitPanel({
  firstPanel: linker.get(0),
  secondPanel: linker.get(1),
  orientation: 'horizontal',
  wipe: true,
  style: {stretch: 'both'}
});

// Set the SplitPanel as the only thing in root.
ui.root.widgets().reset([splitPanel]);

Xin lưu ý rằng tham số wipe được đặt thành true trong hàm khởi tạo ui.SplitPanel để cho phép người dùng vuốt tay cầm qua lại giữa hai hình ảnh trực quan.

Định kiểu tiện ích

Kiểu của tiện ích được kiểm soát bằng từ điển thuộc tính kiểu của tiện ích. Bạn có thể truy cập vào từ điển bằng cách gọi style() trên tiện ích. Đối tượng do style() trả về là một thực thể của ui.data.ActiveDictionary. Điều đó có nghĩa là việc đặt thuộc tính của từ điển kiểu sẽ tự động cập nhật cách hiển thị tiện ích. Các khoá được phép cho từ điển kiểu của mỗi tiện ích được nêu chi tiết trong tài liệu tham khảo của tiện ích cho lệnh gọi style().

Bạn có thể đặt kiểu của tiện ích bằng hàm khởi tạo, bằng cách gọi style().set() hoặc bằng cách gọi style() với đối số từ điển. Ví dụ:

Trình soạn thảo mã (JavaScript)

var redLabel = ui.Label('Big, Red Label');

redLabel.style().set('color', 'red');
redLabel.style().set('fontWeight', 'bold');
redLabel.style().set({
  fontSize: '32px',
  padding: '10px'
});

print(redLabel);

Xin lưu ý rằng trong ví dụ này, trước tiên, nhãn được tạo kiểu bằng cách gọi style().set() với đối số khoá và giá trị, sau đó gọi style().set() với đối số từ điển. Lệnh gọi thứ hai không ghi đè lệnh gọi đầu tiên; lệnh gọi này sẽ thêm và thay thế từng thuộc tính kiểu riêng lẻ thay vì thay thế toàn bộ từ điển kiểu.

Để biết thêm thông tin về các tuỳ chọn tạo kiểu cho tiện ích, hãy xem tài liệu tham khảo về Trang tính kiểu dạng lũy tiến (CSS) này cho các kiểu được liệt kê trong tài liệu style() cho từng tiện ích. Xin lưu ý rằng các kiểu được phép cho tiện ích Earth Engine khác với các kiểu CSS ở một số nơi, đáng chú ý là fontSize và fontWeight tương ứng với font-style và font-weight.

Từ điển kiểu cũng chứa các khoá kiểm soát vị trí của tiện ích. Hãy xem trang Bảng điều khiển và Bố cục để biết thêm thông tin về cách sử dụng các thuộc tính vị trí.