DEV Community: Application Library Engineering Group

Counter App in Open Harmony

Application Library Engineering Group — Fri, 24 Jun 2022 06:39:06 +0000

If you have been following our articles for a quite some time we have worked and introduced HarmonyOS and the importance of the library development. In this article the context would be expressed more in terms of Open Harmony, as the vision always align in delivering a unique user experience across different consumer devices and scenarios.

Let me introduce what Open Harmony is all about, let me describe Open Harmony in Simple terms "Open Harmony – the open-source project of the HarmonyOS operating system".

Open Harmony downloadable source code can be found here.

In order to explain how application development really works, let's start with a simple counter application. In this article we will be walking you through how to create, run and showcase the counter application. The complete code can be found here.

Once we understand the skeleton of the project structure, the set of basic files then creating any applications would be easy and will tend to avoid the initial common errors.

Just a quick heads-up, in this article we are using Open Harmony API version 8, IDE version that I have followed while creating the below demo example in this article is DevEco Studio 3.0 Beta3(Build Version 3.0.0.900).

Now let's move on to the setup process.

1. DevEco Studio

Here we would be using DevEco studio IDE which is designed exclusively to run HarmonyOS applications, if you haven’t installed one then you can get it from the official link with the SDK. Also, we have a step by step instructions for the environment setup available here.

2. Project Creation

Once you have the DevEco Studio up running you can create a select a ”File” -> New -> New Project Option, then you are presented with multiple templates to choose from, select the template as shown below which is Empty Ability.

As a next step, you will have to “Configure the Project” with the project details as shown below.

Provide the Application of your choice.
Choose the Project type as "Application"
Compile API needs to be 8
UI syntax is Js

The above details are good to go for now and click "Finish".

Below is the project structure created by default when you create an application.

Now moving onto the design aspects of the application since we have considered a simple counter app. The counter contains a very basic components like increment, decrement, and display, we can have few more features like reset etc. As mentioned previously the goal of this article is not to focus on the design aspects rather see how to build applications using Open Harmony and its details.

By the end of this article you will have successfully built a counter app application as shown below and the entire code is available here.

We just have 3 buttons "Increment", "Decrement" and the "Reset" button.

For the front end we use the HarmonyOS Markup Language (HML). The HarmonyOS Markup Language (HML) is an HTML-like language that allows you to build pages based on components and events. Pages built using HML have advanced capabilities such as logic control, data binding, event binding, loop rendering, and conditional rendering.

More info about HarmonyOS Markup Language (HML) can be found here.

Now let's start crafting the buttons and we will use the below code in index.htm and this can be found in the path
..//MainAbility/pages/index.htm

  <div style="justify-content: center;">
        <button class="signs" type="circle" icon="/common/images/plus.png" on:click="add"></button>
        <text class="text">{{count}}</text>
        <button class="signs" type="circle" icon="/common/images/minus.png" on:click="subtract"></button>
    </div>

    <div>
        <button type="capsule" value="Reset Counter" style="margin: 20px;" on:click="reset"></button>
    </div>

If you would like to add some styling factors then you can find the index.css in the same path as in index.htm

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.signs{
    margin: 10px;
}

.text{
    font-size: 50px;
    padding-left: 100px;
    padding-right: 100px;
    margin: 30px;
    border: dimgray;
    border-radius: 5px;
    border-width: 5;
}

@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

Now moving to the js part which is actual functionality part giving some life to increment and decrement buttons. We need to add the event handlers here.

export default {
    data: {
        count: 0
    },
    onInit() {

    },
    add(){
        this.count = this.count + 1;
    },
    subtract(){
        if(this.count > 0){
            this.count = this.count - 1;
        }
        else{
            this.count = 0;
        }
    },
    reset(){
        this.count = 0;
    }
}

The complete code can be found here. This is a simple example to demonstrate how to start with Open harmony in DevEco Studio and develop a counter application here.

Since now you know the basic drill, I think it's time to expand your horizon in building a bit complex applications. Please feel leave your comments below if you have tried building any applications with the repo details, we would love to see it.

For more exciting libraries to develop your app, peep into third-party-components at OpenHarmony-TPC.

If you still want to explore on the HarmonyOS then do check out the articles about HarmonyOS here.

To know more about the development work happening on harmony application layer, and even be part of the exciting stuff, watch this space of Application Library Engineering Group

How to progress with Dottedprogressbar in HarmonyOS

Application Library Engineering Group — Wed, 11 May 2022 03:06:31 +0000

A progress bar is a graphical control element used to visualize the progression of an extended computer operation. Visualization, indications, representations are the terms used to confirm a action irrespective of whether it is successful or failed.

Now the key factor is how you would like to illustrate the progress bar, whether is it with animations, just text based or shapes, simple indicators etc. Well, it totally depends on the customer requirements or the theme of the app.

The image shown below is one of the most common type of indicator.

Sometime app requires you to indicate the progression level and change based on the status like shown below which is also one of the type.

Since progress bar is one of the basic and commonly used component in App, then how about making it reusable and defining a library out of it and customize it as when required.

One such library is dottedprogressbar library and we will see in this article more about the library, customize it and how to use the library in HarmonyOS application.

In the article our focus is on a particular type of progressbar which is dottedprogressbar which consist of custom elements or color to configure dots.

Circle Indicator

Create Circle Indicators for your beautiful application between the two pages (Screen)

ViewPager with Tab Title Dot Indicators

ViewPager is common among mobile developers, It is a group of multiple views connecting to each other with swipe effect.

let's see how to use *dottedprogressbar * in your HarmonyOS Mobile App and process or the setup required.

If you are new to *HarmonyOS * then do checkout the articles about HarmonyOS here.

More info on the dottedprogressbar library can be found here

Step by Step Implementation

1. DevEco Studio

Here we would be using DevEco studio IDE which is designed exclusively to run HarmonyOS applications, if you haven't installed one then you can get it from the official link with the SDK. Also, we have a step by step instructions for the environment setup available here.

2.Project Creation
Once you have the DevEco Studio up running you can create a select a **"File" -> New -> New Project Option, **then you are presented with multiple templates to choose from, select the template as shown below which is Empty Ability.

As a next step you will have to "Configure the Project" with the project details, path and ensure to select

Language as Java and
API version to 5

After the initial setup you are ready to start working on the application.

*3.Dependency *

Next add the dottedprogressbar Dependency, in order to use the library in your HarmonyOS mobile app, you need to first install it by adding the below dependency in your entry/build.gradle file.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.har'])
    implementation 'io.openharmony.tpc.thirdlib:dotted-progress-bar:1.0.0'
           }

4. Define layout via XML

Now it is time to add the layout details in ability_main.xml as shown below.

<com.trncic.library.DottedProgressBar
        ohos:id="$+id:progress"
        ohos:width="match_parent"
        ohos:height="match_parent"
        ohos:padding="30vp"
        app:activeDot="$media:active_dot"
        app:dotSize="29vp"
        app:inactiveDot="$media:inactive_dot"
        app:jumpingSpeed="670"
        app:spacing="15vp" />

List of few xml attributes that are supported in DottedProgressBar.

activeDot - applies to the image of the dotted progress bar
dotSize - size in dp of the dots(by default it is 16dp)
inactiveDot - which is of imagetype and it is used to apply the image of the inactive dotted-progress-bar
Jumping speed - Indicates speed between the dots.
spacing - spacing between dots which is in dp.

Customize programmatically via Java API

 @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
   DottedProgressBar progressBar = (DottedProgressBar) findComponentById(ResourceTable.Id_progress);
   progressBar.startProgress();
   progressBar.stopProgress();  

            }

Below are some of the support public API's listed below.

startProgress()
stopProgress()
onDraw(Component component, Canvas canvas)

private DottedProgressBar bar;
private boolean isInProgress;

 @Override
    protected void onStop() {
        super.onStop();
        stopProgress();
    }

    public void stopProgress() {
        isInProgress = false;
        bar.stopProgress();
    }

Now let's add some customization to the dottedprogressbar and see that in effect.

<com.trncic.library.DottedProgressBar
   ohos:id="$+id:progress"
   ohos:width="match_parent"
   ohos:height="match_parent"
   ohos:padding="30vp"
   app:activeDot="$color:red"
   app:dotSize="25vp"
   app:inactiveDot="$color:black"
   app:jumpingSpeed="670"
   app:spacing="15vp" />

In the above code I have changed the active and inactive colors and below is the outcome of it.

In this article you must have got a glimpse of dottedprogressbar library in HarmonyOS, how to customize and implement it.

The entire code is available here for your reference here. Hope you enjoyed it and please post your queries in the comment section and would be glad to answer it.

Introduction to Flexbox Layout in HarmonyOS

Application Library Engineering Group — Tue, 22 Mar 2022 03:37:46 +0000

While building application, layouts play a vital role in defining the structure for a user interface in your app. Layouts is more like a base on which components are laid over it and following some guidelines makes it more efficient and aesthetic the User.

Now lets dwell into Flexbox layout, here the word "Flex" stands for Flexible, in the sense it adapts to the environment or conditions. Similarly if the items is flex it flexes to different sizes to fill the space or environment.

Lets consider a simple example to start with, lets consider a series of blocks and you can see based on the screen size the blocks are flexible to adaptive based on the environment.

Here we are using Flexbox Layout library and how it is similar to CSS Flexible Box Layout Module and how to implement in the HarmonyOS. Also we will cover the steps involved to enjoy the feature of flexbox.

Let's view some of the features

Creating Flexbox Layout with Flex Direction in ROW, ROW_REVERSE, COLUMN and COLUMN_REVERSE.
Creating Flexbox Layout with Flex Wrap as NO_WRAP, WRAP and WRAP_REVERSE.
Creating Flexbox Layout with Justify Content as FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND and SPACE_EVENLY.
Creating Flexbox Layout with Align Items as FLEX_START, FLEX_END, CENTER, BASELINE, and STRETCH.
Creating Flexbox Layout with Align Content as FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND and STRETCH.
Updating attributes of Child view with order value.
Updating attributes of Child view with flex grow and flex shrink values.
Updating attributes of Child view with flex basis percent value.
Updating attributes of Child view with width, height along with minimum and maximum values.
Updating attributes of Child view with wrap before.
Updating attributes of Child view with Align Self as AUTO, FLEX_START, FLEX_END, CENTER, BASELINE, and STRETCH.

let's see how to use Flexbox in your HarmonyOS Mobile App and process or setup required.

If you are new to *HarmonyOS * then do checkout the articles about HarmonyOS here.

More info on the Flexbox Layout library can be found here

Step by Step Implementation

1.DevEco Studio

2.Project Creation
Once you have the DevEco Studio up running you can create a select a **"File" -> New -> New Project Option, **then you are presented with multiple templates to choose from, select the template as shown below which is Empty Ability.

As a next step you will have to "Configure the Project" with the project details, path and ensure to select

Language as Java and
API version to 5

After the initial setup you are ready to start working on the application.

*3.Dependency *

Next add the Flexbox layout Dependency, in order to use the library in your HarmonyOS mobile app, you need to first install it by adding the below dependency in your entry/build.gradle file.

Define layout via XML

<com.google.harmony.flexbox.FlexboxLayout
        ohos:id="$+id:flexbox"
        ohos:height="match_parent"
        ohos:width="match_parent">
        <Text
            ohos:id="$+id:text_1"
            ohos:height="80vp"
            ohos:width="110vp"
            ohos:background_element="$graphic:flex_item_background"
            ohos:text_alignment="center"
            ohos:text="1"
            ohos:text_size="20fp" />
        <Text
            ohos:id="$+id:text_2"
            ohos:height="80vp"
            ohos:width="140vp"
            ohos:background_element="$graphic:flex_item_background"
            ohos:text_alignment="center"
            ohos:text="2"
            ohos:text_size="20fp" />
        <Text
            ohos:id="$+id:text_3"
            ohos:height="80vp"
            ohos:width="110vp"
            ohos:background_element="$graphic:flex_item_background"
            ohos:text_alignment="center"
            ohos:text="3"
            ohos:text_size="20fp" />
</com.google.harmony.flexbox.FlexboxLayout>

and access from code like this:

FlexboxLayout flexLayout = ((FlexboxLayout) findComponentById(ResourceTable.Id_flexbox));
// To set Flex Direction
flexLayout.setFlexDirection(ROW);
...
// set other properties

Lets create Flexbox Layout will be created with flex direction in row mode.

FlexboxLayout flexLayout = ((FlexboxLayout) findComponentById(ResourceTable.Id_flexbox));
// To set Flex Direction
flexLayout.setFlexDirection(ROW);
// ... other required properties
flexLayout.refresh();

Flexbox Layout will be created with flex wrap in wrap mode.

FlexboxLayout flexLayout = ((FlexboxLayout) findComponentById(ResourceTable.Id_flexbox));
// To set Flex Wrap
flexLayout.setFlexWrap(WRAP);
// ... other required properties
flexLayout.refresh();

Flexbox Layout will be created with flex wrap in wrap and justify content with start

FlexboxLayout flexLayout = ((FlexboxLayout) findComponentById(ResourceTable.Id_flexbox));
flexLayout.setFlexWrap(WRAP);
// To set Justify Content
flexLayout.setJustifyContent(FLEX_START);
// ... other required properties
flexLayout.refresh();

Align items with flex start.

FlexboxLayout flexLayout = ((FlexboxLayout) findComponentById(ResourceTable.Id_flexbox));
flexLayout.setFlexWrap(WRAP);
// To set align items
flexLayout.setAlignItems(FLEX_START);
// ... other required properties
flexLayout.refresh();

AlignContent for the FlexboxLayout

FlexboxLayout flexLayout = ((FlexboxLayout) findComponentById(ResourceTable.Id_flexbox));
flexLayout.setFlexWrap(WRAP);
// To set align Content
flexLayout.setAlignContent(FLEX_START);
// ... other required properties
flexLayout.refresh();

By now you must have got an idea how to use Flexbox Layout in HarmonyOS and how to add variations like Align, Wrap, direction factors and how the layout changed.

More info on the Flexbox library can be found here

A Guide to Lottie in HarmonyOS

Application Library Engineering Group — Tue, 08 Mar 2022 09:42:12 +0000

Introduction

I can hardly imagine any application without animations, fancy designs, at least there is one component on the screen which is interactive. This boils down to one aspect which is the User Experience which is key factor to be considered while designing apps.

User experience encompasses of all aspects of the end-user’s interaction with the company, its services, and its products
— Don Norman, Cognitive Scientist & User Experience Architect

As a developer the vital role is in Architecting, deriving the functionalities and many more on top of this focusing on the design aspects becomes tedious.

Thanks to libraries like Lottie which is a full-fledged one such library to provide Animation effortlessly in your application with few initial setup.

Lottie

If you haven't heard about Lottie, then let's understand what is this library and its features.

Lottie is a library that can be used on website or mobile application for adding animations.
It is a one stop solution for animation and it’s perfect for developers as you just have to add a few lines of code and you are good to go, isn’t it amazing.
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!

More info on Lottie can be found here.

Are we using Lottie just for animation or does it have more features with this pack, I have listed few of them below.

Create, edit, and ship in a few clicks.
We can eliminate long codes, just implement the animation and the rest is taken take by the library.
Compatible with all browsers.
It is seemingly ease to use.

It is an ideal choice to create an engaging user experience with animations then Lottie is the go to library or tool.

Since we have gathered loads of information about Lottie, now let's see how to use Lottie in your HarmonyOS Mobile App and process or setup required.

If you are new to **HarmonyOS **then do checkout the articles about HarmonyOS here.

More info on the Lottie library can be found here

Step by Step Implementation

1.DevEco Studio

Here we would be using DevEco studio IDE which is designed exclusively to run HarmonyOS applications, if you haven't installed one then you can get it from the official link with the SDK. Also, we have a step by step instructions for the environment setup available here.

2.Project Creation

Once you have the DevEco Studio up running you can create a select a **"File" -> New -> New Project Option, **then you are presented with multiple templates to choose from, select the template as shown below which is Empty Ability.

As a next step you will have to "Configure the Project" with the project details, path and ensure to select

Language as Java and
API version to 5

After the initial setup you are ready to start working on the application.

3.Dependency

Next add the Lottie Dependency, in order to use the library in your HarmonyOS mobile app, you need to first install it by adding the below dependency in your entry/build.gradle file.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.har'])
    implementation 'io.openharmony.tpc.thirdlib:lottie-ohos:1.0.4'
}

4.Network settings

Navigate to resources -> config.json and add the below lines of code to access internet.

{
  "app": {
    "bundleName": "com.airbnb.lottie.demo",
    "vendor": "airbnb",
    "version": {
      "code": 1000000,
      "name": "1.0.0"
    }
  },
  "deviceConfig": {},
  "module": {
    "package": "com.airbnb.lottie.demo",
    "name": ".Lottie",
    "reqCapabilities": [
      "video_support"
    ],
    "deviceType": [
      "default",
      "tablet"
    ],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry",
      "installationFree" : true
    },
    "abilities": [
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "orientation": "portrait",
        "name": "com.airbnb.lottie.demo.MainAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "$string:app_name",
        "type": "page",
        "launchType": "standard"
      }
    ],
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET",
        "reason": "get right",
        "usedScene": {
          "ability": [
            "com.airbnb.lottie.demo.MainAbility"
          ],
          "when": "always"
        }
      }
    ]
  }
}

In HarmonyOS loading Lottie animations are simple and this requires 3 step process as listed below.
The String URL — The URL is passed as parameter to the setFilename() function which needs to be loaded.
The Repeat Count — Passed setRepeatCount the function.Lottie library should display animation according to the repetition count specified.
The Target — Passed through the setAnimationData() function. This parameter will represent the LottieAnimationView components and Targets where your Lottie animation is assumed to be displayed in.

6.Implementation - Here we are loading an Lottie json found on the internet in an LottieAnimationView component:

let's define the layout file, you can find the layout by navigating to the below path "entry" -> src-> resources ->base -> layout ->animation_slice.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <com.airbnb.lottie.LottieAnimationView
        ohos:id="$+id:animationView"
        ohos:width="match_parent"
        ohos:height="match_parent"/>
</DirectionalLayout>

NOTE: the LottieAnimationView are present in the resource/raw folder, you can refer this link for further details.

7. Get the reference to LottieAnimationView Component

//Initialize LottieAnimationView Component

     LottieAnimationView lv = (LottieAnimationView)rootLayout.findComponentById(ResourceTable.Id_animationView);

8.Loading lottieJson present in server

Now that you have the reference of the LottieAnimationView component, you can write code to load animation into LottieAnimationView component.

private void initLottieViews(String string, String bundleKey, int repeatCount) {
        L.setTraceEnabled(true);
        LottieAnimationView lv = (LottieAnimationView)rootLayout.findComponentById(ResourceTable.Id_animationView);
        lv.setContentPosition((float)50.0,(float)50.0);
        LottieAnimationViewData data = new LottieAnimationViewData();
        if(bundleKey.equals(KEY_JSON_STRING) && string!=null) {
            data.setFilename(string);
        }
        else {
            data.setUrl(string);
        }
        data.setRepeatCount(repeatCount);
        data.autoPlay = true;
        lv.setAnimationData(data);
    }

You can find the above code here

List of public APIs for app-developer
The public methods below will help us to operate on the component at runtime.

setContentPosition(float x, float y)
setAnimationData(LottieAnimationViewData data)
setRepeatCount(int count)
setFilename(String name)
setUrl(String url)
setResId(int id)

Now let's see couple examples of loading Animation from different Source.

1. Loading Lottie animation from folder.

In this example we will load the Lottie animation which is stored in the res/raw folder. you can refer this link for further details.

Layout.xml:


<com.airbnb.lottie.LottieAnimationView
        ohos:id="$+id:animationView"
        ohos:width="match_parent"
        ohos:height="match_parent"/>

Java Slice:

LottieAnimationViewData data = new LottieAnimationViewData();
data.setUrl(string);
data.setRepeatCount(repeatCount);
data.autoPlay = true;
lv.setAnimationData(data);

Loading Lottie from URL

You can refer here how is the URL loaded and used.

Layout.xml:

<com.airbnb.lottie.LottieAnimationView
        ohos:id="$+id:animationView"
        ohos:width="match_parent"
        ohos:height="match_parent"/>

Java Slice:

LottieAnimationViewData data = new LottieAnimationViewData();
         data.setUrl(stringURL);
        data.setRepeatCount(repeatCount);
        data.autoPlay = true;
        lv.setAnimationData(data);

Conclusion

So in this post you must have got a understanding how user
experience play a vital role and how Lottie comes to rescue in giving this wonderful full pack collection of amazing animations.

Later on we also saw how we could implement Lottie animations in HarmonyOS easily from URL or locally stored.

More info on the Lottie library can be found here