Develop Calculator application for Lite-Wearable in Harmony OS - Huawei Developers

Article Introduction
In this article, I have explained to develop a calculator application for Huawei Lite Wearable device using Huawei DevEco Studio and using JS language in Harmony OS. Calculator here performs basic arithmetic operations which can be installed in wearable watch.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Huawei Lite Wearable
Requirements
1) DevEco IDE
2) Lite wearable watch (Can use simulator also)
New Project (Lite Wearable)
After installation of DevEco Studio, make new project.
Select Lite Wearable in Device and select Empty Feature Ability in Template.
After the project is created, its directory as shown in below displayed image.
hml files describe the page layout.
css files describe the page style.
js files process the interactions between pages and users.
The app.js file manages global JavaScript logics and application lifecycle.
The pages directory stores all component pages.
The common directory stores public resource files, such as media resources and .js files.
Integration process
Design the UI
Step 1: Add background image.
As the first step, we can create a UI that contains keypads with all number keys, operator keys and result display text box.
Create and add the background image for calculator screen using stack component.
index.html
Code:
<stack class="stack">
<image src='/common/watchbackground.png' class="background"></image>
</stack>
index.css
Code:
.stack {
width: 454px;
height: 454px;
justify-content: center;
}
Step 2: Add keys UI in the keypad
Create and add rows of the keys for keypad. Numbers 0-9, “.” And equal key for calculating operation.
Code:
<div class="calcRow">
<text class="numberBtn" value="7" onclick="handleNumber(7)"></text>
<text class="numberBtn" value="8" onclick="handleNumber(8)"></text>
<text class="numberBtn" value="9" onclick="handleNumber(9)"></text>
<text class="equalBtn" value=" "></text>
</div>
<div class="calcRow">
<text class="numberBtn" value="4" onclick="handleNumber(4)"></text>
<text class="numberBtn" value="5" onclick="handleNumber(5)"></text>
<text class="numberBtn" value="6" onclick="handleNumber(6)"></text>
<text class="equalBtn" value="=" onclick="handlecalculate"></text>
</div>
<div class="calcRow">
<text class="numberBtn" value="1" onclick="handleNumber(1)"></text>
<text class="numberBtn" value="2" onclick="handleNumber(2)"></text>
<text class="numberBtn" value="3" onclick="handleNumber(3)"></text>
<text class="equalBtn" value=" "></text>
</div>
Code:
.calcRow {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 454px;
height: 50px;
background-color: transparent;
}
.equalBtn {
display: flex;
text-align: center;
width: 75px;
height: 50px;
border-width: 0px;
border-color: #414343;
color: #414343;
background-color: #f87d4f;
}.numberBtn {
display: flex;
text-align: center;
width: 75px;
height: 50px;
border-width: 1px;
color: #414343;
background-color: #ffffff;
border-color: #414343;
border-radius: 5px;
}
For more, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0201459032942010032

---

John Wo said:
Article Introduction
In this article, I have explained to develop a calculator application for Huawei Lite Wearable device using Huawei DevEco Studio and using JS language in Harmony OS. Calculator here performs basic arithmetic operations which can be installed in wearable watch.
Huawei Lite Wearable
Requirements
1) DevEco IDE
2) Lite wearable watch (Can use simulator also)
New Project (Lite Wearable)
After installation of DevEco Studio, make new project.
Select Lite Wearable in Device and select Empty Feature Ability in Template.
After the project is created, its directory as shown in below displayed image.
hml files describe the page layout.
css files describe the page style.
js files process the interactions between pages and users.
The app.js file manages global JavaScript logics and application lifecycle.
The pages directory stores all component pages.
The common directory stores public resource files, such as media resources and .js files.
Integration process
Design the UI
Step 1: Add background image.
As the first step, we can create a UI that contains keypads with all number keys, operator keys and result display text box.
Create and add the background image for calculator screen using stack component.
index.html
Code:
<stack class="stack">
<image src='/common/watchbackground.png' class="background"></image>
</stack>
index.css
Code:
.stack {
width: 454px;
height: 454px;
justify-content: center;
}
Step 2: Add keys UI in the keypad
Create and add rows of the keys for keypad. Numbers 0-9, “.” And equal key for calculating operation.
Code:
<div class="calcRow">
<text class="numberBtn" value="7" onclick="handleNumber(7)"></text>
<text class="numberBtn" value="8" onclick="handleNumber(8)"></text>
<text class="numberBtn" value="9" onclick="handleNumber(9)"></text>
<text class="equalBtn" value=" "></text>
</div>
<div class="calcRow">
<text class="numberBtn" value="4" onclick="handleNumber(4)"></text>
<text class="numberBtn" value="5" onclick="handleNumber(5)"></text>
<text class="numberBtn" value="6" onclick="handleNumber(6)"></text>
<text class="equalBtn" value="=" onclick="handlecalculate"></text>
</div>
<div class="calcRow">
<text class="numberBtn" value="1" onclick="handleNumber(1)"></text>
<text class="numberBtn" value="2" onclick="handleNumber(2)"></text>
<text class="numberBtn" value="3" onclick="handleNumber(3)"></text>
<text class="equalBtn" value=" "></text>
</div>
Code:
.calcRow {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 454px;
height: 50px;
background-color: transparent;
}
.equalBtn {
display: flex;
text-align: center;
width: 75px;
height: 50px;
border-width: 0px;
border-color: #414343;
color: #414343;
background-color: #f87d4f;
}.numberBtn {
display: flex;
text-align: center;
width: 75px;
height: 50px;
border-width: 1px;
color: #414343;
background-color: #ffffff;
border-color: #414343;
border-radius: 5px;
}
For more, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0201459032942010032
Click to expand...
Click to collapse
can we use java language for Lite variable