Glossary
AliOS Things: The Internet of Things operating system self-developed by Alibaba Cloud Intelligent IoT
HaaS: The full name is Hardware as a Service, the hardware as a service launched by the Alibaba Cloud Intelligent IoT team based on the AliOS Things system
HaaS UI: The full name is Hardware as a Service User Interface, which is a set of application & graphic solutions derived from the AliOS Things operating system, supporting C/C++ and JS two development languages
1, HaaS UI
HaaS UI is a screened application framework built on AliOS Things operating system, which supports the use of front-end JS language to develop UI. The front-end application framework of HaaS UI is extended based on the Vue framework (V2.6 version), and uses front-end technology to build pages within a certain restricted subset (specifically supported basic components and styles for more detailed content).
The previous article has introduced the development environment of HaaS UI. This article mainly introduces how to use Vue and some basic components to develop a simple page.
2. Introduction to Vue Framework
Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with modern tool chains and various supporting libraries, Vue is also fully capable of providing drivers for complex applications.
You can also refer to the Vue official website for a more detailed introduction: https://cn.vuejs.org/
Getting started: https://www.runoob.com/vue2/vue-tutorial.html
3. Built-in basic components
The basic components that the HaaS UI framework has built-in support include the following:
| Component |
description |
| <scroller> |
Page scrolling component |
| <div> |
Common container General container |
| <text> |
Text component |
| <image> |
Picture component |
| <slider> |
Carousel component |
| <input> |
Input box component |
| <seekbar> |
Components for sliding progress bar |
| <canvas> |
Canvas component |
| <modal> |
Floating window assembly |
For detailed introduction of related components, you can scan the QR code at the end of the article to enter the group consultation. Let’s take a look at how to build a page based on these basic components.
4. Use Vue to develop a HaaS UI page
The core of Vue is a system that allows the use of concise template syntax to declaratively render data into the DOM. The basic structure of a Vue component or page is generally divided into three parts: HTML template, js script and style. According to this structure, let's take the first HelloWorld page first.
4.1, the first page
<template>
<!-- HTML模板 -->
<div><text class="text">{
{message}}</text></div>
</template>
<script>
// js脚本
export default {
name: "demo",
data() {
return {
message: 'hello world'
};
}
}
</script>
<style scoped>
/* 样式 */
.text {
font-size: 50px;
color: red;
}
</style>The running effect of the simulator is as follows:
In this way, we have successfully built the first HaaS UI page. Now that the data and DOM have been linked, everything is responsive. How to confirm the response? We only need to modify this.message in js to see the corresponding updates on the page.
4.2, responsive update
<template>
<!-- HTML模板 -->
<div><text @click="click" class="text">{
{message}}</text></div>
</template>
<script>
// js脚本
export default {
name: "demo",
data() {
return {
message: 'hello world'
};
},
methods: {
click() {
// 修改this.message，界面自动更新
this.message = 'text clicked.'
}
}
}
</script>
<style scoped>
/* 样式 */
.text {
font-size: 50px;
color: red;
}
</style>
4.3, advanced
The first page is built. We try to build a richer UI with basic components. The following examples basically cover the basic components built into HaaS UI. In addition, how to extend customized front-end components based on basic components will be introduced in a follow-up article.
<template>
<scroller>
<div style="padding:30px">
<div class="list-item">
<text class="list-item-title">Flex布局</text>
<div class="flex-container">
<div v-for="i of 7" class="flex-container-item" :key="i">
<text>{
{i}}</text>
</div>
</div>
</div>
<div class="list-item">
<text class="list-item-title">image组件</text>
<div style="flex-direction: row;">
<image style="width:100px;height:100px; margin:3px"
src="https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg"/>
<image style="width:100px;height:100px; margin-right:5px"
src="https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg"/>
<image style="width:100px;height:100px; margin-right:5px"
src="https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg"/>
</div>
</div>
<div class="list-item">
<text class="list-item-title">slider组件</text>
<slider style="width:400px;height:150px" showIndicators="true" infinite="true">
<div v-for="i of 3" :key="i" :style="{'background-color':RGBS[(i-1)%3],'align-items':'center'}">
<text>{
{i}}</text>
</div>
</slider>
</div>
<div class="list-item">
<text class="list-item-title">seekbar组件</text>
<seekbar style="width: 300px;" handleColor="#108ee9"
handleInnerColor="#fff" handleSize="20" trackSize="10" />
</div>
<div class="list-item">
<div style="flex-direction: row;">
<text class="list-item-title">canvas组件</text>
<div class="button" @click="drawCanvas">
<text style="font-size:16px;">点我画圆</text>
</div>
</div>
<canvas ref="canvas" width="300" height="300" style="background-color:#ccc;margin-top:5px;"/>
</div>
<div class="list-item">
<text class="list-item-title" @click="toggleModal">Modal组件(点我弹出)</text>
<Modal ref="modal" :system="true">
<div class="modal-content">
<text style="text-align:center;">this is a system modal.</text>
<div class="button" @click="toggleModal"><text style="font-size:16px;">close</text></div>
</div>
</Modal>
</div>
<div class="list-item">
<text class="list-item-title">Buttons</text>
<div style="flex-direction: row;">
<div class="button" @click="buttonClick(1)"><text style="font-size:16px;">Button1</text></div>
<div class="button" @click="buttonClick(2)"><text style="font-size:16px;">Button2</text></div>
<div class="button" @click="buttonClick(3)"><text style="font-size:16px;">Button3</text></div>
</div>
</div>
</div>
</scroller>
</template>
<script>
import Modal from "../packages/modal/index.vue";
export default {
components: { Modal },
data(){
return {
RGBS: ['#f00','#0f0','#00f'],
};
},
mounted() {
this.drawCanvas();
},
methods: {
buttonClick(i) {
let modal = $falcon.jsapi.modal;
modal && modal.toast({
content: `Button${i} clicked.`,
duration: 1000,
});
},
drawCanvas() {
let ctx = createCanvasContext(this.$refs.canvas);
ctx.fillStyle = this.RGBS[Math.floor(Math.random()*3)];
ctx.beginPath();
ctx.arc(Math.floor(Math.random()*300),Math.floor(Math.random()*300),
Math.floor((Math.random()*20)+10),0,3.15*2);
ctx.fill();
},
toggleModal() {
this.$refs.modal.toggle();
},
},
}
</script>
<style scoped>
.list-item {
flex-direction: column;
margin-bottom: 30px;
}
.list-item-title {
font-size: 30px;
color: black;
margin-bottom: 5px;
}
.flex-container {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: #888;
width: 600px;
}
.flex-container-item {
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
align-items: center;
justify-content: center;
}
.button {
margin-right: 20px;
padding: 10px;
background-color: #888;
border-radius: 10px;
align-items: center;
justify-content: center;
}
.button:active {
background-color: #aaa;
}
.modal-content {
width: 290px;
height: 150px;
padding: 10px;
background-color: white;
border-radius: 20px;
align-items: center;
justify-content: center;
}
</style>The above page basically covers the basic components built in HaaS UI, and the effect on the simulator is as follows:
5. Developer technical support
If you need more technical support, you can join the DingTalk developer group or follow the WeChat public account
For more technology and solution introduction, please visit the Aliyun AIoT homepage https://iot.aliyun.com/