In today's digital age, web applications have become an important part of our lives. Whether it's a social media platform, e-commerce website or online tool, the heart of a modern web application is its user interface (UI). One of the key components of the user interface is the front-end controls.
Front-end controls are an indispensable element in web development. They provide us with the tools to build a variety of interactive and feature-rich web applications. Whether you are a new front-end developer or an experienced engineer, understanding and mastering front-end controls is key to improving your web development skills.
This blog series will take you deep into the world of front-end controls. We'll look at a variety of UI components in detail, ranging from simple buttons and form controls to complex charting and map integration. Whether you're looking to improve your skills or find ways to build impressive user experiences, this series will provide you with valuable knowledge.
Over the next few articles, we'll explore the different types of front-end controls, discussing their uses, best practices, and real-world examples. Whether your interest is building beautiful UIs, improving user experience, or learning the latest web development techniques, this series will help.
Are you ready to explore the power of front-end controls? let's start!
1. Demo address
Visit URL: http://59.110.22.223:8080/Model_qianduan/dataset_bar_1.html
2. Common sense of controls
Custom controls
Custom controls are compiled server-side controls that encapsulate user interface and other functions into reusable packages. Compared with standard controls, custom controls have a different tag prefix. And having to do it shows no difference other than registration and deployment. In addition, custom controls have their own object model, can fire events, and support all Microsoft Visual Studio design features, such as the Properties Window, Visual Designer, Property Builder, and Toolbox.
The user controls are mentioned above. Just like creating a page, drag and drop the system controls in the designer to design the interface, and then add the necessary event codes to these controls. It is purely a combination. The custom control is to "implement from scratch" the underlying function of the control. Write a class that inherits from Control and implements the INamingContainer interface. It even overrides the Render method of the control, controls the html code generated by the control, and implements the response to return data from the browser. Events and processing of returned data are not only called custom controls, they can also be called composite controls.
When using custom controls, you can click on the toolbox on the right side of the vs software, right-click on the blank space on the toolbox to select an item – click “Browse” under the .NET Framework component tab – and find the custom control you want to add ( .dll file)–Open–OK. This way you can drag that custom control out of the toolbox and use it. Commonly used controls include: paging controls, text editors, Crystal Reports, ActiveReports, etc.
Development method:
1. Development of custom controls, that is, inheriting the accumulation of Control to implement server controls.
2. Develop user controls.
Creating a user control is similar to creating a regular ASP.NET web page, but there are some differences. The steps are:
① Create an .ascx text file. This is the first difference between user controls and asp.net web pages, which use the extension .aspx.
② Add the @Control directive at the top of the text file and set the selected programming language through the language attribute. This is the second difference between user controls and web pages. (The latter uses the @page directive).
③Add HTML markup text and asp.net server controls to the text file. You can add any html tag other than html, body and form. This is because user controls cannot be used alone and must be used as part of the web page. This is the third difference between user controls and web pages.
Three, source code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
</head>
<body >
<div id="1ccfe54281744b72a87d0a72767232e1" class="chart-container" style="width:900px; height:500px; "></div>
<script>
var chart_1ccfe54281744b72a87d0a72767232e1 = echarts.init(
document.getElementById('1ccfe54281744b72a87d0a72767232e1'), 'white', {renderer: 'canvas'});
var option_1ccfe54281744b72a87d0a72767232e1 = {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"aria": {
"enabled": false
},
"color": [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc"
],
"series": [
{
"type": "bar",
"name": "2015",
"legendHoverLink": true,
"realtimeSort": false,
"showBackground": false,
"stackStrategy": "samesign",
"cursor": "pointer",
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"margin": 8
}
},
{
"type": "bar",
"name": "2016",
"legendHoverLink": true,
"realtimeSort": false,
"showBackground": false,
"stackStrategy": "samesign",
"cursor": "pointer",
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"margin": 8
}
},
{
"type": "bar",
"name": "2017",
"legendHoverLink": true,
"realtimeSort": false,
"showBackground": false,
"stackStrategy": "samesign",
"cursor": "pointer",
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"margin": 8
}
}
],
"legend": [
{
"data": [
"2015",
"2016",
"2017"
],
"selected": {},
"show": true,
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14,
"backgroundColor": "transparent",
"borderColor": "#ccc",
"borderWidth": 1,
"borderRadius": 0,
"pageButtonItemGap": 5,
"pageButtonPosition": "end",
"pageFormatter": "{current}/{total}",
"pageIconColor": "#2f4554",
"pageIconInactiveColor": "#aaa",
"pageIconSize": 15,
"animationDurationUpdate": 800,
"selector": false,
"selectorPosition": "auto",
"selectorItemGap": 7,
"selectorButtonGap": 10
}
],
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"enterable": false,
"confine": false,
"appendToBody": false,
"transitionDuration": 0.4,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5,
"order": "seriesAsc"
},
"xAxis": [
{
"type": "category",
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
}
}
],
"yAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
}
}
],
"dataset": [
{
"source": [
[
"product",
"2015",
"2016",
"2017"
],
[
"Matcha Latte",
43.3,
85.8,
93.7
],
[
"Milk Tea",
83.1,
73.4,
55.1
],
[
"Cheese Cocoa",
86.4,
65.2,
82.5
],
[
"Walnut Brownie",
72.4,
53.9,
39.1
]
]
}
],
"title": [
{
"show": true,
"text": "Dataset simple bar example",
"target": "blank",
"subtarget": "blank",
"padding": 5,
"itemGap": 10,
"textAlign": "auto",
"textVerticalAlign": "auto",
"triggerEvent": false
}
]
};
chart_1ccfe54281744b72a87d0a72767232e1.setOption(option_1ccfe54281744b72a87d0a72767232e1);
</script>
</body>
</html>
4. Source code explanation
This HTML and JavaScript code creates a bar chart that visualizes the sales of different products in 2015, 2016, and 2017. Here is a detailed explanation of the code:
-
<!DOCTYPE html>: Declares the document type, indicating that this is an HTML5 document. -
<html>: The root element of the HTML document. -
<head>: Contains the document's meta-information and references to external resources. -
<meta charset="UTF-8">: Set the character encoding of the document to UTF-8 to ensure that the text can be displayed correctly. -
<title>Awesome-pyecharts</title>: Set the title of the web page to "Awesome-pyecharts". -
<script>: The JavaScript file of the ECharts chart library is introduced. The path of the file is "https://assets.pyecharts.org/assets/v5/echarts.min.js". This library is used to create interactive charts. -
<body>: The main part of the HTML document. -
<div id="1ccfe54281744b72a87d0a72767232e1" class="chart-container" style="width:900px; height:500px; "></div>: Create an<div>element to accommodate the chart, and set<div>the ID of the element to "1ccfe54281744b72a87d0a72767232e1". This<div>style is set to a width of 900 pixels and a height of 500 pixels. -
<script>: Contains JavaScript code for creating and configuring histograms.-
var chart_1ccfe54281744b72a87d0a72767232e1 = echarts.init(document.getElementById('1ccfe54281744b72a87d0a72767232e1'), 'white', {renderer: 'canvas'});<div>: Create an ECharts chart instance, specify the ID of the element to be rendered as "1ccfe54281744b72a87d0a72767232e1", set the background color to white, and the rendering mode to canvas. -
var option_1ccfe54281744b72a87d0a72767232e1 = { ... }: Defines configuration options for the chart. This includes the chart's animation, color, series (here, the data series for the histogram), legend, tooltip, and X and Y axis settings.
-
-
chart_1ccfe54281744b72a87d0a72767232e1.setOption(option_1ccfe54281744b72a87d0a72767232e1);:Applies the chart configuration options defined above to the chart instance to render a histogram. -
</body>: The main part of the HTML document ends. -
</html>: End of the root element of the HTML document.
The main purpose of this code is to create a bar chart with interactive functionality for visualizing product sales data. You can customize option_1ccfe54281744b72a87d0a72767232e1the appearance and behavior of the chart by modifying the data and configuration options in the object. In this example, the data source contains sales quantities for four products over three years.