How to Develop

The Clock app displays the current time through a clock face and numbers.

As shown in Figure 1 Clock display effect, the page consists of two parts:

• Clock face area: displays a dynamic analog clock whose hands rotate accurately.
• Digital time area: displays the current time in numerals.

To build such an app, we can create a page that has a flexible layout with two rows vertically arranged. The development procedure is as follows:

1. Add a root <div> to the .hml file. Note that each .hml file can contain only one root component. The example code is as follows:

   <div class="container">
   </div>

   class="container" indicates the style used by the component. The container is a style class defined in the index.css file.

   .container {     
       flex-direction: column;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 100%;
   }

   The height and width of the root component <div> are set in the style class. Note that the height and width must be explicitly specified (except for some components, such as <text>). Otherwise, the component may fail to display. In the container style class, the flex-direction attribute is set to column, which means that child components of <div> are vertically arranged from top to bottom for implementing the flexible page layout.

2. Implement clock hand rotation using the <stack> component. The <stack> component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.

   Add a stack container to the root component. The example code is as follows:

   <div class="container">    
       <stack class="stack">
           <image src="/common/clock_bg.png" class="clock-bg"></image> <!--Set the clock face image.-->
           <image src="/common/hour_hand.png" class="clock-hand"
                  style="transform : rotate({{ hour * 30 + minute / 2 }}deg);"></image> <!--Set the hour hand image. (hour * 30) indicates that the hour hand rotates 30 degrees every hour. (minute / 2) indicates the rotation degrees per minute.-->
           <image src="/common/minute_hand.png" class="clock-hand"
                  style="transform : rotate({{ minute * 6 + second / 10 }}deg);"></image> <!--Set the minute hand image. (minute * 6) indicates that the minute hand rotates 6 degrees every minute. (second / 10) indicates the rotation degrees per second.-->
           <image src="/common/second_hand.png" class="clock-hand"
                  style="transform : rotate({{ second * 6 }}deg);"></image> <!--Set the second hand image. (second * 6) indicates that the second hand rotates 6 degrees per second.-->
      </stack>
   </div>

   style="transform: rotate({{ second * 6 }}deg) sets the rotation event of a component. transform translates, rotates, or scales an element. rotate rotates an element. You can set the element to rotate around its x-axis or y-axis.

   Set attributes, such as the height, width, and position, of the <stack> component in the CSS file. The example code is as follows:

   .stack {
       flex-direction: column;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 50%;
   }

   Set attributes, such as the height and width, of the <clock-bg> component in the CSS file. The example code is as follows:

   .clock-bg {
       width: 80%;
       height: 80%;
       object-fit: scale-down;
   }

   Set attributes, such as the height and width of the hour, minute, and second hands, of the <clock-hand> component in the CSS file. The example code is as follows:

   .clock-hand {
       width: 25%;
       height: 65%;
       object-fit: contain;
   }

   Add a timer in the index.js file to update the hour, minute, and second variables in real time so that time can be automatically updated on the app UI. The example code is as follows:

   export default {
       timer: undefined,
       // Define parameters.
       data: {
         hour: 0,   // Define hours.
         minute: 0, // Define minutes.
         second: 0  // Define seconds.
       },
       onInit () {
           this.updateTime();
           this.timer = setInterval(this.updateTime, 1000)// Set the update time of the timer to 1 second.
       },  
       updateTime: function () {       
           var nowTime = new Date()    
           this.hour = nowTime.getHours()    
           this.minute = nowTime.getMinutes()   
           this.second = nowTime.getSeconds()    
           if (this.hour < 10) {        
               this.hour = '0' + this.hour    
           }  
           if (this.minute < 10) {       
               this.minute = '0' + this.minute   
           }    
           if (this.second < 10) {      
               this.second = '0' + this.second   
           }
       },
   }

3. Display the current time in digital form under the analog clock. Add the <text> component at the end of the root layout. The following example shows the page structure:

   <text class="digit-clock"> {{ hour }}:{{ minute }}:{{ second }}</text>

   class="digit-clock" sets the height, width, and font size of the component. The example code is as follows:

   .digit-clock {    
       font-size: 58px;   
       width: 100%;
       margin-top: 0px;
       text-align: center;
   }

4. Set the style, animation effect, and dynamic data binding for all components. The complete example code is as follows:

   • index.hml

   <div class="container">
       <stack class="stack">
           <image src="/common/clock_bg.png" class="clock-bg"></image>
           <image src="/common/hour_hand.png" class="clock-hand"
                  style="transform : rotate({{ hour * 30 + minute / 2 }}deg);"></image>
           <image src="/common/minute_hand.png" class="clock-hand"
                  style="transform : rotate({{ minute * 6 + second / 10 }}deg);"></image>
           <image src="/common/second_hand.png" class="clock-hand"
                  style="transform : rotate({{ second * 6 }}deg);"></image>
       </stack>
       <text class="digit-clock">{{ hour }}:{{ minute }}:{{ second }}</text>
   </div>
   • index.css

   .container {
       flex-direction: column;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 100%;
   }
   
   .stack {
       flex-direction: column;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 50%;
   }
   
   .digit-clock {
       font-size: 58px;
       width: 100%;
       margin-top: 0px;
       text-align: center;
   }
   
   .clock-bg {
       width: 80%;
       height: 80%;
       object-fit: scale-down;
   }
   
   .clock-hand {
       width: 25%;
       height: 65%;
       object-fit: contain;
   }
   • index.js

   A .js file is used to implement interaction logic of your app. In the .js file of the page, implement the function of periodically obtaining the system time.

   export default {
       timer: undefined,
       data: {
           hour: 0,
           minute: 0,
           second: 0
       },
       onInit() {
           this.updateTime()
           this.timer = setInterval(this.updateTime, 1000)
       },
       updateTime: function () {
           var nowTime = new Date()
           this.hour = nowTime.getHours()
           this.minute = nowTime.getMinutes()
           this.second = nowTime.getSeconds()
           if (this.hour < 10) {
               this.hour = '0' + this.hour
           }
           if (this.minute < 10) {
               this.minute = '0' + this.minute
           }
           if (this.second < 10) {
               this.second = '0' + this.second
           }
       },
       onDestroy() {
           clearInterval(this.timer);
       }
   }