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/kline_base.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="19bd5bcf24064a0ca0a3737cb326ac2b" class="chart-container" style="width:900px; height:500px; "></div>
<script>
var chart_19bd5bcf24064a0ca0a3737cb326ac2b = echarts.init(
document.getElementById('19bd5bcf24064a0ca0a3737cb326ac2b'), 'white', {renderer: 'canvas'});
var option_19bd5bcf24064a0ca0a3737cb326ac2b = {
"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": "candlestick",
"name": "kline",
"colorBy": "series",
"data": [
[
2320.26,
2320.26,
2287.3,
2362.94
],
[
2300,
2291.3,
2288.26,
2308.38
],
[
2295.35,
2346.5,
2295.35,
2345.92
],
[
2347.22,
2358.98,
2337.35,
2363.8
],
[
2360.75,
2382.48,
2347.89,
2383.76
],
[
2383.43,
2385.42,
2371.23,
2391.82
],
[
2377.41,
2419.02,
2369.57,
2421.15
],
[
2425.92,
2428.15,
2417.58,
2440.38
],
[
2411,
2433.13,
2403.3,
2437.42
],
[
2432.68,
2334.48,
2427.7,
2441.73
],
[
2430.69,
2418.53,
2394.22,
2433.89
],
[
2416.62,
2432.4,
2414.4,
2443.03
],
[
2441.91,
2421.56,
2418.43,
2444.8
],
[
2420.26,
2382.91,
2373.53,
2427.07
],
[
2383.49,
2397.18,
2370.61,
2397.94
],
[
2378.82,
2325.95,
2309.17,
2378.82
],
[
2322.94,
2314.16,
2308.76,
2330.88
],
[
2320.62,
2325.82,
2315.01,
2338.78
],
[
2313.74,
2293.34,
2289.89,
2340.71
],
[
2297.77,
2313.22,
2292.03,
2324.63
],
[
2322.32,
2365.59,
2308.92,
2366.16
],
[
2364.54,
2359.51,
2330.86,
2369.65
],
[
2332.08,
2273.4,
2259.25,
2333.54
],
[
2274.81,
2326.31,
2270.1,
2328.14
],
[
2333.61,
2347.18,
2321.6,
2351.44
],
[
2340.44,
2324.29,
2304.27,
2352.02
],
[
2326.42,
2318.61,
2314.59,
2333.67
],
[
2314.68,
2310.59,
2296.58,
2320.96
],
[
2309.16,
2286.6,
2264.83,
2333.29
],
[
2282.17,
2263.97,
2253.25,
2286.33
],
[
2255.77,
2270.28,
2253.31,
2276.22
]
]
}
],
"legend": [
{
"data": [
"kline"
],
"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": [
{
"show": true,
"scale": true,
"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"
}
},
"data": [
"2017/7/1",
"2017/7/2",
"2017/7/3",
"2017/7/4",
"2017/7/5",
"2017/7/6",
"2017/7/7",
"2017/7/8",
"2017/7/9",
"2017/7/10",
"2017/7/11",
"2017/7/12",
"2017/7/13",
"2017/7/14",
"2017/7/15",
"2017/7/16",
"2017/7/17",
"2017/7/18",
"2017/7/19",
"2017/7/20",
"2017/7/21",
"2017/7/22",
"2017/7/23",
"2017/7/24",
"2017/7/25",
"2017/7/26",
"2017/7/27",
"2017/7/28",
"2017/7/29",
"2017/7/30",
"2017/7/31"
]
}
],
"yAxis": [
{
"show": true,
"scale": true,
"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"
}
}
}
],
"title": [
{
"show": true,
"text": "Kline-\u57fa\u672c\u793a\u4f8b",
"target": "blank",
"subtarget": "blank",
"padding": 5,
"itemGap": 10,
"textAlign": "auto",
"textVerticalAlign": "auto",
"triggerEvent": false
}
]
};
chart_19bd5bcf24064a0ca0a3737cb326ac2b.setOption(option_19bd5bcf24064a0ca0a3737cb326ac2b);
</script>
</body>
</html>
4. Source code explanation
The HTML code provided in this section is an HTML document, which contains a JavaScript script to generate a K-line chart within the specified <div>element, using the ECharts library (specifically Pyecharts). Here is a detailed explanation of this code:
-
<!DOCTYPE html>: This is a document type declaration, indicating that this is an HTML5 document. -
<html>:<html>tag indicates the beginning of an HTML document. -
<head>:<head>section usually contains some metadata and links to external resources used by the HTML document.-
<meta charset="UTF-8">: This tag sets 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 HTML document. This title will be displayed on the title bar or label of the browser. -
<script>: This<script>tag introduces external resources from the ECharts library (echarts.min.js). Chart drawing depends on this library.
-
-
<body>:<body>section contains the actual content of the HTML document that will be displayed in the browser.-
<div id="19bd5bcf24064a0ca0a3737cb326ac2b" class="chart-container" style="width:900px; height:500px; "></div>: This<div>element has a specific ID and class and is used to render K-line charts. It has specified width and height. -
<script>: This JavaScript script initializes and configures an ECharts chart that will be<div>drawn within the specified element.-
var chart_19bd5bcf24064a0ca0a3737cb326ac2b = echarts.init(...): This line initializes the ECharts chart, using the specified<div>elements and some initial configuration options. -
var option_19bd5bcf24064a0ca0a3737cb326ac2b = {...}: This variable saves the configuration options of the K-line chart, including various chart settings, data and style options. -
chart_19bd5bcf24064a0ca0a3737cb326ac2b.setOption(option_19bd5bcf24064a0ca0a3737cb326ac2b);: This line sets the chart options for the initialized chart object.
-
-
-
</body>: This closing tag indicates the end of the body part of the HTML document. -
</html>: This closing tag indicates the end of the HTML document.
In summary, this HTML code sets up a web page containing a candlestick chart generated using the ECharts library (Pyecharts), including some predefined data and chart configuration options. The chart will be displayed within the specified <div>element. The HTML code provided in this section is an HTML document, which contains a JavaScript script to generate a K-line chart within the specified <div>element, using the ECharts library (specifically Pyecharts). Here is a detailed explanation of this code:
-
<!DOCTYPE html>: This is a document type declaration, indicating that this is an HTML5 document. -
<html>:<html>tag indicates the beginning of an HTML document. -
<head>:<head>section usually contains some metadata and links to external resources used by the HTML document.-
<meta charset="UTF-8">: This tag sets 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 HTML document. This title will be displayed on the title bar or label of the browser. -
<script>: This<script>tag introduces external resources from the ECharts library (echarts.min.js). Chart drawing depends on this library.
-
-
<body>:<body>section contains the actual content of the HTML document that will be displayed in the browser.-
<div id="19bd5bcf24064a0ca0a3737cb326ac2b" class="chart-container" style="width:900px; height:500px; "></div>: This<div>element has a specific ID and class and is used to render K-line charts. It has specified width and height. -
<script>: This JavaScript script initializes and configures an ECharts chart that will be<div>drawn within the specified element.-
var chart_19bd5bcf24064a0ca0a3737cb326ac2b = echarts.init(...): This line initializes the ECharts chart, using the specified<div>elements and some initial configuration options. -
var option_19bd5bcf24064a0ca0a3737cb326ac2b = {...}: This variable saves the configuration options of the K-line chart, including various chart settings, data and style options. -
chart_19bd5bcf24064a0ca0a3737cb326ac2b.setOption(option_19bd5bcf24064a0ca0a3737cb326ac2b);: This line sets the chart options for the initialized chart object.
-
-
-
</body>: This closing tag indicates the end of the body part of the HTML document. -
</html>: This closing tag indicates the end of the HTML document.
In summary, this HTML code sets up a web page containing a candlestick chart generated using the ECharts library (Pyecharts), including some predefined data and chart configuration options. The chart will be displayed within the specified <div>element.