Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web application site fix (Part - 05) #1964

Merged
merged 1 commit into from
May 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/application/web/guides/applications/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ The [Tizen Studio](../../../tizen-studio/index.md) enables you to create Web app

The Application API is mandatory for Tizen mobile, wearable, and TV profiles, which means that it is supported on all mobile, wearable, and TV devices. All mandatory APIs are supported on the Tizen emulators.

## Web Application Models
## Web application models

The application models support a rich set of standard W3C/HTML5 features, which include various JavaScript APIs as well as additional HTML markups and CSS features. These features along with the Tizen Device APIs and UI framework support can be used to create rich Web applications in a variety of categories, such as contact, messaging, device information access, multimedia, graphics, and games.

Expand Down Expand Up @@ -32,7 +32,7 @@ Tizen provides various application models to allow you to create applications ta

Addon is a type of extension for Web applications. Addon works while the Web applications run. They work commonly on all the Web applications installed and provide some common functionalities, which are not included in Web applications. For example, an addon can show an advertisement before a Web application runs. Addons can be installed and removed separately. However, you cannot run them solely without running the Web applications.

## Application Package Manager
## Application package manager

The application package manager is one of the core modules of the Tizen application framework, and responsible for installing, uninstalling, and updating packages, and storing their information. Using the package manager, you can also retrieve information related to the packages that are installed on the device.

Expand All @@ -45,7 +45,7 @@ The application package manager module is expandable to support various types of
Tizen supports both Web application packages and hybrid application packages, which combine a Web application and one or more native service applications. Applications in the same package follow the same installation life-cycle, handled by the application package manager.


## Related Information
## Related information
- Dependencies
- Tizen 2.4 and Higher for Mobile
- Tizen 2.3.1 and Higher for Wearable
Expand Down
18 changes: 9 additions & 9 deletions docs/application/web/guides/applications/service-app.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Web Service

A Web service is a type of Tizen Web application that provides an environment for running JavaScript in the background without a graphical user interface (the Web service follows the [ECMA-262 specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm)). Web services are useful in performing periodical or continuous activities that doesn't need user intervention, such as crawling data in the background. For example, a Web service can be used for getting data or listening for platform events in the background. As Web services do not have UI components, they run on top of a more light-weight runtime than Web applications. Therefore, you can expect them to perform better and consume less memory.
A Web service is a type of Tizen Web application that provides an environment for running JavaScript in the background without a graphical user interface (the Web service follows the [ECMA-262 specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm){:target="_blank"}). Web services are useful in performing periodical or continuous activities that doesn't need user intervention, such as crawling data in the background. For example, a Web service can be used for getting data or listening for platform events in the background. As Web services do not have UI components, they run on top of a more light-weight runtime than Web applications. Therefore, you can expect them to perform better and consume less memory.

The main features of the Web service include:

Expand Down Expand Up @@ -53,9 +53,9 @@ To enable your application to use the Web service functionality:
> No privileges need to be separately defined for Web services, since the Web service is always packaged with a Web application, and a privilege defined for the Web application covers the entire application package.

<a name="create"></a>
## Manage Web Service Life-cycle
## Manage Web service life-cycle

To run a Web service, you must export a number of callbacks using the [CommonJS Modules](http://wiki.commonjs.org/wiki/Modules/1.1) API. The callbacks need to be added to the `module.exports` object, which is provided by the environment. The following callbacks are called when there are life-cycle changes or application control events which are triggered by the application management framework:
To run a Web service, you must export a number of callbacks using the [CommonJS Modules](http://wiki.commonjs.org/wiki/Modules/1.1){:target="_blank"} API. The callbacks need to be added to the `module.exports` object, which is provided by the environment. The following callbacks are called when there are life-cycle changes or application control events which are triggered by the application management framework:

- `onStart()`: The entry point of the service. It is called after the service runtime finishes the set-up.
- `onStop()`: The exit point of the service. It is called to end a service. You can release resources or save the context by using this callback.
Expand All @@ -68,15 +68,15 @@ The Web service is running in browser thread of the Web application process.

To manage Web service callbacks, follow these steps:

1. Create the service entry point with the `onStart()` callback. The callback is invoked when the service is launched. Within the callback, you can prepare resources and initialize whatever the Web service needs during the execution.
1. Create the service entry point with the `onStart()` callback. The callback is invoked when the service is launched. Within the callback, you can prepare resources and initialize whatever the Web service needs during the execution:

```
module.exports.onStart = function() {
console.log("onStart is called");
};
```

2. Create the service exit point with the `onStop()` callback. The callback is invoked when the service is about to be stopped. All resources can be cleared and backed up within the callback.
2. Create the service exit point with the `onStop()` callback. The callback is invoked when the service is about to be stopped. All resources can be cleared and backed up within the callback:

```
module.exports.onStop = function() {
Expand All @@ -85,13 +85,13 @@ To manage Web service callbacks, follow these steps:
```

<a name="package"></a>
## Package Web Service
## Package Web service

A Web application package can contain one Web application and several Web services. Each application in the Web application package shares the same package ID and has a unique application ID. In the following example, you can use the `<tizen:application>` element to define information for the Web application. The `<tizen:service>` element is used to define information about the Web service. The Web application and the Web service have the same package ID and different application IDs.

The Web application package file is installed, updated, and uninstalled as a single [package](../../index.md#package).

To package the Web service with a Web application, define the service in the `config.xml` file. The `<tizen:service>` element allows you to define the characteristics of the Web service. For example, you can specify the name, type and starting JavaScipt file of the Web service.
To package the Web service with a Web application, define the service in the `config.xml` file. The `<tizen:service>` element allows you to define the characteristics of the Web service. For example, you can specify the name, type and starting JavaScipt file of the Web service:

```
<?xml version="1.0" encoding="UTF-8"?>
Expand All @@ -111,7 +111,7 @@ To package the Web service with a Web application, define the service in the `co
```

<a name="launch"></a>
## Launch Web Service by Web Application
## Launch Web service by Web application

The following code explains you how to launch a Web service by Web application.

Expand All @@ -133,7 +133,7 @@ The Web application launches a Web service by calling the `startService()` metho
```

<a name="terminate"></a>
## Terminate Web Service by Web Application
## Terminate Web service by Web application

The following code explains you how to terminate a Web service by Web application.

Expand Down
4 changes: 2 additions & 2 deletions docs/application/web/guides/applications/watch-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ This feature is supported in wearable applications only.

To build a watch face application, you must follow these general steps:

1. Before you get started with developing Tizen applications, download and install the [Tizen Studio](https://developer.tizen.org/development/tizen-studio/download).
1. Before you get started with developing Tizen applications, download and install the [Tizen Studio](https://developer.tizen.org/development/tizen-studio/download){:target="_blank"}.

For more information on the installation process, see the [installation guide](../../../tizen-studio/setup/install-sdk.md).

Expand All @@ -27,4 +27,4 @@ To build a watch face application, you must follow these general steps:
This step shows how you can create the application UI and make small alterations to it to improve the usability of your application.


Creating Your First Tizen Wearable Web Watch Application [Create a wearable Web watch project](../../get-started/wearable-watch/first-app-watch.md) describes the main steps required to develop a watch face application using Tizen Studio. For more detailed information about the application development process, see [Web Application Development Process](../../tutorials/process/app-dev-process.md). To learn how to design a watch face, see the Gear UI guides on the [Samsung Developers](https://developer.samsung.com/home.do) site.
Creating Your First Tizen Wearable Web Watch Application [Create a wearable Web watch project](../../get-started/wearable-watch/first-app-watch.md) describes the main steps required to develop a watch face application using Tizen Studio. For more detailed information about the application development process, see [Web Application Development Process](../../tutorials/process/app-dev-process.md). To learn how to design a watch face, see the Gear UI guides on the [Samsung Developers](https://developer.samsung.com/home.do){:target="_blank"} site.
40 changes: 20 additions & 20 deletions docs/application/web/guides/applications/web-widget.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Since widgets are loaded on the widget board in the home screen layer, the only
![User actions on a widget](./media/webwidget_tap_tasks.png)

<a name="app_model"></a>
## Application Model
## Application model

Web widgets use only a subset of HTML, CSS, and DOM APIs available for Web applications. Since a design goal of widgets is to provide a quick view of the widget content to the user, there are some restrictions in the Web widget implementation to prevent unnecessary performance degradation:

Expand Down Expand Up @@ -86,7 +86,7 @@ The Web widget life-cycle proceeds as follows:

6. To uninstall the parent Web application and all its widgets, the user long-presses the Web application and selects its **-** button. In this case, the Web application package (including all its widgets and their resources) is deleted from the wearable device. The Tizen framework removes the Web application from the application tray and deletes all its widgets from the widget board.

### Packaging and Configuration
### Package and configuration

The Web widget application must be included in the same package with its parent Web application. The Web widgets are placed in the `widget` subdirectory, which is generated automatically by Tizen Studio. The following example shows a typical structure of a Web application package with 2 Web widgets:

Expand Down Expand Up @@ -180,7 +180,7 @@ The following examples show the `config.xml` files in a Web application package:
```

<a name="ui_design"></a>
## UI Design
## UI design

Although only limited subsets of Tizen Web APIs are supported for Web widgets, they provide a wide range of UI designs sufficient for wearable devices. The following sections show various design examples using the HTML elements and CSS properties supported in Web widgets.

Expand Down Expand Up @@ -331,8 +331,8 @@ The following UI layouts with code examples are common use cases in widgets on w

![Vertical split layout](./media/webwidget_vertical_split_layout.png)

> **Note**
> The widget engine only supports the `block`, `inline`, `inline-block`, and `none` values for the `display` property.
> [!NOTE]
> The widget engine only supports the `block`, `inline`, `inline-block`, and `none` values for the `display` property:
> ```
> #more {
> .display: inline-block;
Expand Down Expand Up @@ -657,7 +657,7 @@ function goAni() {
```

<a name="event"></a>
## Event Handling
## Event handling

The Web widget applications support the following events: `onload`, `onclick`, and `visibilityChange`:

Expand Down Expand Up @@ -762,7 +762,7 @@ The Web widget applications support the following events: `onload`, `onclick`, a
```

<a name="communication"></a>
## Communication Between Web Widgets and Other Applications
## Communication between web widgets and other applications

Web widgets can communicate with other applications in various ways. As shown in the following table, the available methods depend on the type of the application the Web widget interacts with.

Expand All @@ -775,7 +775,7 @@ Web widgets can communicate with other applications in various ways. As shown in
[Web widget &lt;--&gt; Web server](#comm_server) | XMLHttpRequest |

<a name="comm_parent"></a>
### Communicating with a Web Application on a Wearable Device
### Communicate with a web application on a wearable device

For data sharing between a Web widget and its parent application on the same device, use the Tizen [Preference API](../../api/latest/device_api/wearable/tizen/preference.html). The Preference API allows a Web widget to communicate with its parent Web app (and vice versa) by storing key-value pairs in a hashtable-like data structure. The data stored by the Preference API has a "package" scope, which means that any widgets (or a Web app) in a package can access the data stored by the other widgets (or a Web app) in the same package. In addition, the Preference API does not need additional permissions, so no modifications in the `config.xml` file are required.

Expand Down Expand Up @@ -852,13 +852,13 @@ In addition, to launch an application, its application ID must be used to identi
tizen.application.launch('ApplicationIDToLaunch', onGetAppsContextSuccess);
```

> **Note**
> [!NOTE]
> It is not recommended for a Web widget to launch other Web widgets. This feature is deprecated in Tizen 3.0.

<a name="comm_host"></a>
### Communicating with a Host Application on a Host Device
### Communicate with a host application on a host device

The widget and its parent application can reside on separate devices, as when a Web widget is on a wearable device while the host (parent) application is on a mobile device. In this case, the widget and parent applications can communicate through [SAP (Samsung Accessory Protocol)](https://developer.samsung.com/galaxy-watch/develop/sdk#samsung-accessory-sdk) to share data between the widget (the consumer in SAP) and the parent application (the provider in SAP).
The widget and its parent application can reside on separate devices, as when a Web widget is on a wearable device while the host (parent) application is on a mobile device. In this case, the widget and parent applications can communicate through [SAP (Samsung Accessory Protocol)](https://developer.samsung.com/galaxy-watch/develop/sdk#samsung-accessory-sdk){:target="_blank"} to share data between the widget (the consumer in SAP) and the parent application (the provider in SAP).

The following example shows SAP communication implementation between a Web widget on a Tizen wearable device and its parent application on an Android&trade; mobile device:

Expand Down Expand Up @@ -1071,7 +1071,7 @@ The following example shows SAP communication implementation between a Web widge
```

<a name="comm_server"></a>
### Communicating with a Web Server
### Communicate with a web server

To get data from a Web server through the Internet, use the XMLHttpRequest API. The Web widget engine, however, does not support the full XMLHttpRequest specification. It only supports the `GET` and `POST` methods, and the `TEXT` and `JSON` data types. This design decision emphasizes the read-only behavior of the Web widgets and meets the runtime memory requirements. Use Web widgets to display information in a compact manner, and do not create new resources using the `PUT` method: as user interaction is not intended and can exceed the widget's maximum allowed memory, it can lead to security risks.

Expand Down Expand Up @@ -1137,7 +1137,7 @@ function handleResponseJSON(e) {
```

<a name="cookbook"></a>
## Locale Information Formatting
## Locale information formatting

You can use a `Date` object to format locale information in a widget.

Expand All @@ -1151,7 +1151,7 @@ d.toLocaleTimeString(); /* '7:38:05 AM' */
```

<a name="debug"></a>
## Debugging
## Debug

You can debug and validate your Web widget. Currently, there are 2 approaches to debugging a Web widget:

Expand All @@ -1161,7 +1161,7 @@ You can debug and validate your Web widget. Currently, there are 2 approaches to
The validation process checks whether a Web widget is compliant with the specifications and whether it contains unsupported HTML elements and CSS properties.

<a name="consolelog"></a>
### Debugging with the Console Log
### Debug with the console log

Using the `console.log()` method is a simple and convenient way of debugging a Web widget. The following figure shows how to debug a Web widget using Tizen Studio.

Expand All @@ -1182,7 +1182,7 @@ The following figure shows the `sbd dlog` command in action.
![Debugging messages in the terminal](./media/webwidget_debug_terminal.png)

<a name="web_debug"></a>
### Debugging with the Web Debugger
### Debug with the web debugger

To make Web widgets lighter, debugging features may not be supported by default. In this case, take the following steps to use a built-in Web application debugger:

Expand All @@ -1202,7 +1202,7 @@ In addition, you can still use the `console.log()` method as shown in the follow

![Web debugger](./media/webwidget_debug_web_consolelog.png)

Similarly, you can also use the following command to print the `console.log()` messages in a terminal.
Similarly, you can also use the following command to print the `console.log()` messages in a terminal:

```
sdb dlog | grep ConsoleMessage
Expand All @@ -1215,7 +1215,7 @@ The following figure shows the `sdb dlog` command in action.
![Debugging messages in the terminal](./media/webwidget_debug_web_terminal.png)

<a name="validate"></a>
### Validating a Web Widget
### Validate a web widget

You can validate a Web widget using the following validators:

Expand All @@ -1238,7 +1238,7 @@ When the validation is complete, its results are shown in the **Problems** view.
![Web widget validation result](./media/webwidget_validate_result.png)

<a name="performance"></a>
## Performance Considerations
## Performance considerations

It is important to prevent unnecessary performance degradation in widgets. As a result, some restrictions must be followed when implementing Web widgets:

Expand Down Expand Up @@ -1592,6 +1592,6 @@ After removal, no corresponding event is fired because no event is considered ne

For the Web widget file and image size limits, see [Performance Considerations](#performance).

## Related Information
## Related information
- Dependencies
- Tizen 2.3.2 for Wearable