diff --git a/docs/api.md b/docs/api.md index 8f6d4affc..07b659bf9 100644 --- a/docs/api.md +++ b/docs/api.md @@ -1,6 +1,6 @@ --- id: api -title: Api +title: API sidebar_position: 5 --- diff --git a/docs/design-system.md b/docs/design-system.md index ce5208f4a..9bed3701e 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -6,7 +6,7 @@ sidebar_position: 4 # Design System -The **DHIS2 Mobile UI Library** is built upon the [DHIS2 Mobile Design System Figma library](https://www.figma.com/file/eRk6bt0B8BJlTO9PZXirHN/DHIS2-Mobile-Design-System). This design system offers a comprehensive set of guidelines, components, and best practices to ensure consistency and enhance user experience across all DHIS2 mobile applications. +The **DHIS2 Mobile UI Library** is built upon the [DHIS2 Mobile Design System Figma library](https://www.figma.com/community/file/1423970586603523207/dhis2-mobile-design-system). This design system offers a comprehensive set of guidelines, components, and best practices to ensure consistency and enhance user experience across all DHIS2 mobile applications. ![](resources/design-system.png) @@ -52,7 +52,8 @@ The design system encompasses a wide array of elements that contribute to a cohe To incorporate the DHIS2 Mobile Design System into your project: -1. **Explore the Figma Library**: Familiarize yourself with the available components and styles by accessing the [Figma library](https://www.figma.com/file/eRk6bt0B8BJlTO9PZXirHN/DHIS2-Mobile-Design-System). +1. **Explore the Figma Library**: Familiarize yourself with the available components and styles by accessing the [Figma library](https://www.figma.com/community/file/1423970586603523207/dhis2-mobile-design-system). +2. **Use the Figma Library for Mock-ups and Prototypes**: Before starting development, you can utilize the Figma library to create mock-ups and prototypes. This allows you to visualize the app's design and functionality, facilitating better planning and collaboration among team members. 2. **Follow the Guidelines**: Apply the design principles and component guidelines to ensure a consistent and user-friendly interface. 3. **Maintain Accessibility**: Ensure all design elements meet accessibility standards for color contrast, font sizes, and interactive elements. 4. **Collaborate and Contribute**: Share feedback, suggest improvements, or contribute new components to help evolve the design system. diff --git a/docs/overview.md b/docs/overview.md index efdd355d3..287ff5074 100644 --- a/docs/overview.md +++ b/docs/overview.md @@ -18,10 +18,15 @@ This library currently supports **desktop** and **Android** targets, in the next support **iOS**. ### Android - **DHIS2 Mobile UI library** provides native support for Android. When targeting Android, you can leverage the full power of Jetpack Compose, Google's modern UI toolkit for Android. The Compose -Multiplatform library seamlessly integrates with Android Studio and the Android build system. +Multiplatform library seamlessly integrates with Android Studio and the Android build system. +However, if your project uses Java and XML layouts, you can still integrate the library by embedding Compose +components within your existing views. + +#### Using with Java and XML + +If your project uses Java and XML layouts, you can still integrate the library by embedding Compose components within your existing views. For guidance on interoperability between XML and Compose, refer to the [Android Developers Interoperability Guide](https://developer.android.com/develop/ui/compose/migrate/interoperability-apis). ### Desktop diff --git a/docs/demo.md b/docs/showcase-application.md similarity index 75% rename from docs/demo.md rename to docs/showcase-application.md index 0a5b7ca03..577d81a55 100644 --- a/docs/demo.md +++ b/docs/showcase-application.md @@ -1,18 +1,18 @@ --- -id: demo -title: Demo +id: showcase-application +title: Showcase application sidebar_position: 3 --- -# Demo Application +# Showcase Application -The Mobile UI library includes a **demo application** that showcases all the components available in the library. This application allows you to see the components in action and understand how they can be integrated into your projects. +The Mobile UI library includes an application that showcases all the components available in the library. This application allows you to see the components in action and understand how they can be integrated into your projects. ![](resources/showcase.png) -## Downloading the Demo Application +## Downloading the Showcase Application -Each release of the Mobile UI library provides artifacts for various targets, including Android and desktop platforms. You can download the demo application from the **Assets** section at the bottom of each [release page](https://github.com/dhis2/dhis2-mobile-ui/releases) on GitHub. +Each release of the Mobile UI library provides artifacts for various targets, including Android and desktop platforms. You can download the Showcase application from the **Assets** section at the bottom of each [release page](https://github.com/dhis2/dhis2-mobile-ui/releases) on GitHub. ### Steps to Download: @@ -25,7 +25,7 @@ Each release of the Mobile UI library provides artifacts for various targets, in ![](resources/assets.png) -## Installing the Demo Application +## Installing the Showcase Application ### On Android: @@ -41,7 +41,7 @@ Each release of the Mobile UI library provides artifacts for various targets, in 1. **Ensure Java is Installed**: - - The demo application requires the Java Runtime Environment (JRE) to run. + - The Showcase application requires the Java Runtime Environment (JRE) to run. - Download and install Java from the [official website](https://www.java.com/en/download/) if you haven't already. 2. **Extract the ZIP File**: @@ -59,13 +59,13 @@ Each release of the Mobile UI library provides artifacts for various targets, in - Navigate to the directory containing the `.jar` file. - Run the command: ``` - java -jar your-demo-application.jar + java -jar your-showcase-application.jar ``` **Note**: If double-clicking the `.jar` file doesn't work, ensure that the file association for `.jar` files is correctly set to the Java Runtime Environment. -## Using the Demo Application +## Using the Showcase Application -1. **Launch the App**: Open the demo application on your device. +1. **Launch the App**: Open the Showcase application on your device. 2. **Explore Components**: Browse through the various components showcased in the app. 3. **Interactive Examples**: Interact with the components to see how they behave and respond.