Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 UI Development Basics

In this lesson, I’ll teach you some of the basics of UI development in NativeScript. You’ll learn about using XML for laying out UI components and CSS for styling them, and also how to use images, action bars, and livesync.

Related Links

2.5 UI Development Basics

Welcome back. In this video, we learned about the basics of UI development like page element, XML, UI components, CSS and initializing an app at the beginning of the application. As we mentioned before app.js is the starting point of the application. In this file on line one, we defined the application and on line two we call a global CSS and on line three we are initializing the app with main-page module. But since we have restructured the app, we need to create a new module to be used by our app. To make it simpler, we can say each module is one view. Now back to our views folder we have already created three folders. We're going to develop the login view as our starting module. Now create a file called login.js and now back to app.js. Change the module name parameters to views/login/login. The first login is the folder name and the next one is the name of the file without .js extension. The login js file is responsible for the logic of our first view, but to be the layout of the first view we need to create another font called login.xml. Why xml? I have to say the user interface of a mobile application is typically developed in XML file. XML is a mark up language, similar to HTML. And it's a standard for installing and transporting the data. All right, HTML, majority of tags in XML are user defined. And in NativeScript we use XML to create the layout of the page. Each XML layout file is wrapped inside a page tag. Label text equal Hello World. Each page is one distinct screen of your application. And page is a top most element in the screens that we make. Also label element is a UI component that we are going to explain shortly. Now let's start the application with livesync command. TNS livesync iOS dash dash watch. This page is currently using two UI elements, page and label. We will show to you more UI elements to this page. But before that, let's discuss attributes in an XML file. Attributes in a NativeScript UI component, lets you configure the behavior or appearance of the element. In this example, label tag has a text attribute which is used to display the very obvious label element on a screen. In NativeScript there are nearly 20 default UI elements like button, search bar, text field, and so on so forth. And there are many more community elements that can be found on GitHub of NPM. A typical log in page has two text fields for username and password. And buttons for sign in or sign out, or forget password. In this course we only cover a sign in scenario, to keep it simple. The text attribute is a value that user enters into the field. Okay, as you can see the label element is gone. But this is simply an issue that can be fixed with layouts that we are going to cover next. But to make this page work properly, we should use the layout. A layout is a container that defines how elements on the page are going to be organized. Let's fix this issue and continue to build the app. There are many types of layouts. But for this page, we're going to use a StackLayout. It has one attribute called orientation, and the value is vertical. And finally, we should close the tag at the end before page element. Now, we can see our label element as the last text script. But still TextField can be improved with a place holder text. To create a place holder for TextField, we can use a hint attribute. As a time the place holder is gone and the value is updated. Next, let's create the password field. Text attribute is empty and hint is equal to pasword. And since this is a password field, we must use an attribute called secure, which takes Boolean and it is true. If by now you have an error on your screen, always make sure that you close your elements with a slash. Okay, so far we have a label, username, and password now we need to have a button for signing. Button takes an attribute called text, which is the button's caption. And finally let's remove the label element while we don't use it anymore. We are almost done with our first page design, but as you can see we don't have any stylings apply to the page. Let's quickly fix this issue. NativeScript uses CSS to change the visual appearance of your app, but it uses a subset of CSS style. Main CSS selectors like element tech name, ID, class, hierarchical, attribute and pseudo selectors are available. And majority of CSS properties are covered as well. To see a complete list of CSS selectors and properties supported by NativeScript, make sure you check out the official documentation introduced in the link below. There are three ways to use CSS in a NativeScript project. Application wide CSS applies to every application page and is the one that we used for the simple demonstration. Page-specific CSS applies to the pages you have use. This is mainly use for use cases where you want to create the starts only for one specific view. And Inline CSS applies directly to a UI view. The best use case of this module is to override the current style and is used with a style attribute tag. But the best practice is to avoid it as much as possible. By the way, the priority is always with inline CSS. And the least priority belongs to the application wide CSS. Now, let's update the CSS file. Very nice, as you can see, the styles are kicking in. Now let's discuss different layouts that we have in NativeScript. NativeScript supports six different layouts. As we have mentioned before, layouts are used to organize UI elements on the screen. Flexbox Layout is the first layout that recently has been introduced in NativeScript. Even though it should be based on W3's, flexboxes are not. But is not implemented the same way. And we don't use it for this demonstration. However, I'm sure that in future it is going to be adopted more in apps. Absolute Layout, lets you set exact locations. Left top coordinates for its children. Dock Layout, arranges it's children and it's outer edges and allows it last child to take out the remaining space. Grid Layout, defines a rectangular layout area that consists of columns and rows. Stack Layout arranges it's children horizontally or vertically. The direction is set with the orientation property and this is the layout that we will use to build our pages, Wrap Layout, positions its children into rows or columns based on the orientation property until the space is filled, and then wraps them on a new row or columns. Using each of these layouts should be based on the application that you're going to build. And there are very good community examples where they have used other more complex layouts, which are not covered in this short video. But for us, we can rely on the stack layout. Next let's talk about images. In NativeScript, we use image UI component to show images. Back to login.xml we create an image tag, it has one attribute called src. For this application, I'm going to put images under images folder in the root of the application. But you can clear, proper images and resources like spacious screens or icons for each platform and put them under App_Resources folder. I have all ready created a sample logo image that I put it In this folder. Now to reference the image inside the src attribute, I have to write ~/images/repos.png. And the tilde means, root of the app. To fix the styling of the image, I add another block to the app.css. Finally, to test if it's works properly on Android, let's run it on Android emulator as well, tns lifesync android--watch. You can test your apps on both Android and iOS with livesync command. As you can see in Android version, we see an action bar but typically in the log in screen this component is disabled. To fix this, we need to add an attribute to page UI component of the view. Go to login.xml file and add actionBarHidden equal to true to the page stack, and now hit save. Great, in this video we have learned the basics of UI development in NativeScript. In next video we're going to talk about core concepts, and application logic.

Back to the top