7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 NativeScript Components

Hello everyone. I am Reggie Dawson. Welcome to the NativeScript in Mobile Angular two course from tutsplus. In this video, we will talk about the components we used to build our app. And like a hybrid framework, these are not HTML elements, so you will have to learn how they work in order to use them. The thing to bear in mind is that our components we use will translate directly to native controls. If you look at the documentation for the NativeScript components, we can see how we can use them and how they work. This is important because NativeScript doesn't explain step by step how to use each component. Instead, we will need to use the documentation to figure out what attributes we can use. For example with the button component, we can also look at the cookbook section for ideas on how to use it. Here we can see some ways to use the button, as well as how to manipulate the button from JavaScript. Also, if you look at the API documentation, we can see the properties that we can use with our button Then if we click on the button link in the button documentation, we can see the properties and methods of the button. For example, we can change the background color of the button with this property. Now, if we go back to our demo project that we created, let's go back to app.component.ts. First, we can remove the labels from our template. After that, we can remove everything from the app component class Once we've done that, we can focus on the button that we have left. Don't worry about the stack layout element, we will talk about that in the next video. The first thing we see is the text attributes at the tab. If we looked at the API documentation for the button, we would see that this sets the label of our button. Let's set the text to read my button You should get used to referring to the documentation for the NativeScript controls, so you can see what's available for you to change. Let's change the background color of our button to orange. Here we have added the background color tribute and set it to orange. If we look back at the documentation for the button, we see that we have to pass a color to the background color property. The last thing I want you to take note of is the tab surrounded by parentheses. This is how we set up a vent binding and angular too. This is listening for the tap event which detects when the user touches that control. It is configured to run the tap method but we have removed that method. We can go ahead and remove the event binding as well but we will work with this in a later video. After that, you can save your project and preview it. And as you can see, when our project starts our button is orange. Now the next component we will look at is the label component. This is a very common component and lets us set a text label. Fortunately VS code has the NativeScript XML snippets extension. With these snippets, we can add components just by prefixing our command. For example, just to add a label we will start with ns, Then all we have to do is choose nslabel. This is great because it helps to learn the syntax of NativeScript. Understand it is important to always close your tags because Angular 2 is very touchy about that and its templates. If you notice our label has the text and text wrap property. If you look at the API documentation for the label, we can see that the text property should be set to a string. The text wrap property which determines if the label wraps or not is set to a Boolean. Now if we go back to our property, we will see that the text wrap property is indeed a Boolean. We can use the documentation to determine what attributes we can pass to our components and what types. First, we will add text that says this is my label, after that we will add a color of red and define size of 40. This will set the text color to red and make the font size 40 pixels. Go ahead and save your project and preview. The label should appear in red and at 40 pixels in height. The next component we will look at is the text view component. This component let you create a multi-line text view. You can use this for any type of text based content you want to present. Again we can look at the API documentation for the text view, to get an idea of what properties we have available to us. If we go to our project we can also use our snippets to add the text view for us. Here you will see that we can choose from two versions of the text view editable and not editable. This is because the text view behaves in two ways. The not editable text view is used to present static text in your add. The editable version on the other hand behaves an HTML text area. We an use this to provide a way to enter a multi-line text as opposed to a text field. Choose the editable version. Here we have the hint, text and editable attributes. The head will be displayed if we delete all of the content from the text view. The text is what is going to initially be inside of this text view. If we were to leave this blank, no text will be displayed and we will see the hint. If we leave both this in the hint blank, will see an empty text view. Then we have the editable attribute which determines how the text view behaves. This is the Boolean that is set to true which will allow us to add an edit text inside of the text view. I've added a hint in some text of the text view. So, let's save in preview our project. Now, once it runs we can remove all of the content from the text view. After that we should see the hint. We can also add text to the text view. Also we can press enter, so that we can have multi-line text. The last component we will talk about is the action bar. This bar that we see by default can be overwritten by our own. We can also disable this bar through JavaScript. At its most basic we add our action bar like this. Here we have added the action bar with the title of native script demo. Let's save our project and preview. Once we do that, we see the title that reflected our project name has now been replaced with NativeScript demo. Now, this is very basic and there are many different options for action bar. We can create a custom bar using NativeScript layouts or even add action buttons. We can also use the app icon in our action bar with a few changes. First, we have added the Android icon. This is pointing to the contents of the app resource folder. We will talk more about this when we discuss images. The icon visibility is there because the icon is hidden by default. Let's go ahead and save and preview this change. Now this action bar is using the app icon for this app, make sure to check out the documentation on the action bar as there are a lot of neat things that you can do with it. I have included a link in the course notes, also make sure to refer to the documentation on the components as I only talked about a small selection of what is available. One last thing I want you to understand is that, I only demonstrated the use of the components through XML, you can also control all of these components through JavaScript. Check out the cook book in the NativeScript documentation for different examples of how this works. In the next video, we will learn about NativeScript layouts

Back to the top