Web App framework with TizenUIs Advanced UI

Web App framework with TizenUIs Advanced UI

TizenUIs Advanced UI

Discover an interesting way to develop TizenUIs with the Tizen Advanced UI or TAU framework. Hello, once again, and welcome to Samsung Developers. In today’s episode, we will look into TAUsfeatures and see the different classes and interfaces that we can use to improve creating our Tizen Web applications both on Mobile and Web. Before we start with TAU, let us first refresh our memories with the typical web app development workflow.

First, we need to define the app concept, the number of pages, and its contents. An example is creating a contact app with two pages. Page one will contain the list of contacts, while the second page will contain the details of an element in the contact list. The second is defining the DOM layout of the page.

TAU framework

This is where we create the structure of the app. In our example, the first page may contain a header and a list. While the second page may contain an image, a list of details, and a footer that will contain buttons for actions. Next is creating the UI/UX for the application. After that, we can start constructing DOM for the UI. Now that the UI is set up, we can use them for adding event handlers. And then lastly, we can add or make control logic. This defines what happens after an event. For example, is what happens after clicking the list – the page navigates from page 1 to page 2. Now the TAU framework comes in the Designing of the DOM layout, creating UI style, and

UI library

Manipulation and creation of UI in Tizen can be done by utilizing the TAU framework. It enables creating and managing different types of UI components. These components include the common visual UI controls such as buttons, lists, pickers, and many more. TAU is the standard web UI library for the Tizen platform. It aims to simplify coding and to improve the speed of creating different applications. TAU brings the following significant benefits to web mobile/wearable developers is a standalone library that provides everything. No added libraries are needed which will decrease the complexity of your app and at the same time speed it up.

TAU is tweaked for maximum performance. Speed is its main strength. It improves the startup performance of applications. It is HTML5 compliant. It’s an open API which means the different methods and core functions are available for everyone to tinker with. It is very customizable and extensible. It is optimized for creating apps for wearable, mobile, and TV devices. Now that you’ve seen the noteworthy improvements TAU can provide, let’s check out how to create Tizen UI components and features. First, up is the UI Service Template showed by in the following code snippet.

HTML content

We can use the Web UI service just by importing the library in the script tag at our web application’s header. Now to use them we must first implement the HTML content. As the previous snippet shows, it must begin with an HTML header, and in it are the declarations that will let us utilize. Next is specifying the scale of the UI.

We can do this by modifying the meta tags. Scaling has two types, first is device-width scaling. The viewport is set to device-width. If you want to use this type of scaling, use this meta tag. Another is fixed-width scaling. This type of scaling is appropriate when developing Tizen devices. In this, the entire screen is scaled on a viewport level. Use this metatag to have a fixed-width scaling in your app. Now that we have set up the library and scale the UI. We can now indicate the location whereto make our scripts. We can either use the script tag and key in the source if we have an external .js file or we can just input the scripts inside the tag. As mentioned earlier, TAU is the standard WEB UI library for Tizen.

UI-page & UI-header

It has an array of UI components that can make application coding easier. Let’s check out the basics. The code snippet shows how to create a page in a wearable application. The div with classic-page enables page creation, it also has a header, content, and footer. Take note that this class attributes “UI-page”, “UI-header”, “UI-content”, and “UI-footer” are TAU specifics and must appear in your div to be able to use these components. If you want to create a header, you must include the class attribute UI-header. This is needed for all components. Here is the code for creating a similar page but on mobile. Instead of using class, a data-role attribute is used and the keywords are “page”, “header”, “content”, and “footer”.Aside from creating UI components by HTML, we can also use HTML + Javascript to create dynamically. Here is an example code.

Application Coding

Here we can see that the div with the id buttons targeted and used as an argument to the tau. widget.Button function. Tau. widget is the constructor of the component from the tau namespace. The header area indicates the page that is currently open. It may contain buttons, menus, and a toolbar. When creating an application, the header area is optional. The content area will hold the application’s body. You could optionally include a scroll-bar for it. The footer area is also an optional part. It can contain buttons or status texts in your app. We have now created pages, but how can we manage page transitions? With TAU being built for easy application coding, it also provides basic functionality for multiple screen applications.

There are multiple ways to do this and you can use the API to create a more controlled pace routing. The first one is routing without javascript. You can use refer to another HTML file just like old-school HTML. If you have two or more pages inside an HTML, you can use hashtag plus the id of the page and use them in there. The second is routing using the TAU API. We have tau. change page() method which manages page transitions. To use it we just have to input the page where we want to go. Also, we can include effects or animations making the applied. We can also load from external sources by also using the attribute and specifying the page’s path. Let’s check out the code that we’ve written.

UI components

Here you can see that the page has an animation when making transitions. Tizen mobile and wearable have the same application page layout or structure. Both of them have a page, header, content, and footer. The only difference is in using them. For mobile, the data-role attribute is used while the wearable makes use of the class attribute. The page navigation is also the same. Both make use of either TAU API. In UI Components, Wearable has fewer compared to Mobile. You can get the reference for mobile on this site. The link for the guide in using wearable UI components is available in the description below. Creating components and modifying them is fairly easy. Let’s check out the button guide. Here you can see how to construct UI widgets using TAU.

Just use tau. widget. The button then includes the reference to the HTML div id that you want. Also, we can see examples of how to use them, the type of button modification we can do, the methods available, and others. With this, developing Tizen applications is made easier. Also available on TAU is support for easy and selector methods. The link to the DOM utility and Selectors utility guide is also included in the description below. The DOM utility replaces jQuery methods with the TAU API which provides DOM manipulation and also has support for CSS properties and attributes. The Selector Utility on the other hand contains functions to target HTML elements in your application. Another added feature in TAU for wearable is gestures.

TAU HTML Attributes

TAU provides gesture events optimized for the Tizen Web application. You can also take a look at this guide, the link is provided below. TAU enables the app to listen for gesture events and with this, you can also be able to observe event data. Let’s go ahead and wrap up this episode. TAU provides UI creation and capabilities that make Tizen app creation easier and richer. It has different features that revolve around the idea of creating apps with ease, speed, and simplicity.UI components are easy to declare by just using TAU HTML attributes. TAU API also enables scripting and replaces jQuery methods and functions with more powerful versions.TAU in Mobile and Wearable has slight differences, but the idea is still the same. They’re still using web technologies so no need to worry.

Wearable has fewer compared to Mobile. You can get the reference for mobile on this site. The link for the guide in using wearable UI components is available in the description below. Creating components and modifying them is fairly easy. Let’s check out the button guide. Here you can see how to construct UI widgets using TAU. Just use tau. widget. The button then includes the reference to the HTML div id that you want.

Tizen Web

Also, we can see examples of how to use them, the type of button modification we can do, the methods available, and others. With this, developing Tizen applications is made easier. Also available on TAU is support for easy and selector methods. The link to the DOM utility and Selectors utility guide is also included in the description below. The DOM utility replaces jQuery methods with the TAU API which provides DOM manipulation and also has support for CSS properties and attributes. The Selector Utility on the other hand contains functions to target HTML elements in your application. Another added feature in TAU for wearables gestures. TAU provides gesture events optimized for the Tizen Web application.

You can also take a look at this guide, the link is provided below. TAU enables the app to listen for gesture events and with this, you can also be able to observe event data. Let’s go ahead and wrap up this episode. TAU provides UI creation and capabilities that make Tizen app creation easier and richer. It has different features that revolve around the idea of creating apps with ease, speed, and simplicity.

UI components are easy to declare by just using TAU HTML attributes. TAU API also enables scripting and replaces jQuery methods and functions with more powerful versions.TAU in Mobile and Wearable has slight differences, but the idea is still the same. They’re still using web technologies so no need to worry. That’s it for Tizen Advanced UI Framework!

Leave a Reply

Your email address will not be published. Required fields are marked *