Theming A NativeScript Angular 2 Mobile Application [w/ subs]



00:00:03 – everyone in this tutorial we're going to
00:00:05 – take a look at dreaming a native script
00:00:07 – angular 2 project so as some of you know
00:00:10 – who have worked with a descriptor even
00:00:13 – looked at native script out-of-the-box
00:00:15 – the UI components don't look too
00:00:17 – appealing
00:00:18 – it's not that because the guys that
00:00:21 – native script have chosen to do a very
00:00:23 – bad job at theming these components it's
00:00:26 – because they actually use the native
00:00:27 – components that either iOS or Android
00:00:30 – use and they leave it up to you to style
00:00:31 – them however native script has actually
00:00:35 – released eight theme that you can
00:00:37 – install the CSS theme to make these
00:00:40 – components look very good without having
00:00:42 – to put a lot of effort into them so what
00:00:44 – we're gonna do is we're going to build a
00:00:46 – basic project and we're going to see how
00:00:48 – it looks and then we're going to theme
00:00:50 – that project to make it look even better
00:00:51 – so you'll notice I do have my terminal
00:00:54 – open i do have native script installed
00:00:57 – i'm using currently too . 3.1 in the
00:01:00 – future it may change but native script
00:01:03 – as a language in angular2 the probably
00:01:05 – won't change too much so this tutorial
00:01:07 – should remain pretty valid what I'm
00:01:10 – going to do is I'm going to create a
00:01:10 – fresh project on my desktop I'm gonna
00:01:12 – say TNS create a theme project and i'm
00:01:16 – going to use the ng tags for angular 2
00:01:19 – so that project created what you want to
00:01:27 – do is you want to navigate into it so we
00:01:28 – call the theme project and then we want
00:01:31 – to add some build platform so we can say
00:01:33 – TNS platform add iOS and then TNS
00:01:40 – platform add android so I'm actually
00:01:44 – only going to be demoing the iOS portion
00:01:47 – but if you're using linux or windows
00:01:50 – you'll probably want to use android if
00:01:53 – you are using a Mac you could use use
00:01:54 – either
00:01:55 – this tutorial will hold true for both
00:01:57 – build platforms so the platform's added
00:02:02 – gonna go and clear it i'm also going to
00:02:05 – open up the project in my editor of
00:02:07 – choice so I'm gonna be using Adam how
00:02:10 – you can use whatever editor you want
00:02:12 – that's perfectly fine
00:02:13 – alright so i do have the project open
00:02:21 – we're gonna be spending all of our time
00:02:22 – inside of the app directory of the
00:02:24 – project and we're going to be looking at
00:02:26 – a few files so we're gonna be looking at
00:02:29 – the app CSS file and we're gonna be
00:02:31 – looking at the apt . component . HTML
00:02:34 – file we won't be worrying about the
00:02:37 – typescript file although let's go ahead
00:02:39 – just for the heck of it just clear out
00:02:40 – all of the class variables and functions
00:02:44 – inside of it although it really doesn't
00:02:46 – matter if you leave a man or not
00:02:47 – alright so starting with the HTML file
00:02:51 – what we're going to do is we're going to
00:02:53 – create a basic form and a basic button
00:02:57 – so this is using the stack lale however
00:03:00 – we're going to add an action bar at the
00:03:01 – top just for make it a little more
00:03:04 – cosmetically appealing
00:03:18 – alright so we have an action bar let's
00:03:20 – go ahead and add some form elements so
00:03:23 – we're gonna be using a lot of stack
00:03:25 – layout here and if you've never used a
00:03:26 – stack layout it's a we're gonna be using
00:03:28 – a vertical stack so every every
00:03:30 – component is going to reside underneath
00:03:32 – the previous component stay close to
00:03:35 – other stuff as well but for our purposes
00:03:37 – we're just going to leave it as vertical
00:03:38 – so the first thing we want to do is
00:03:41 – let's go ahead and add a stack layout
00:03:43 – let's just start with up with the label
00:03:47 – so we're going to say label we're going
00:03:50 – to say text equals and then let's say
00:03:53 – this is a first name
00:04:01 – and this label is going to go with a
00:04:03 – particular form element so this is going
00:04:05 – to go with text field and this text
00:04:10 – field was not going to bound to anything
00:04:11 – we're just going to have just blank hint
00:04:19 – the next one we're going to have another
00:04:21 – label so let's just copy and paste it
00:04:24 – will be roughly the same let's call this
00:04:27 – last name and then finally we're going
00:04:31 – to have a button and this button is
00:04:35 – going to have the text submit
00:04:40 – so what we want to do is we actually
00:04:42 – want to check out and see what this
00:04:45 – looks like
00:04:46 – as of now so open up your terminal again
00:04:48 – I'm gonna be running it in iOS but I'm
00:04:50 – gonna say TNS emulate no this time I'm
00:04:53 – actually gonna live sync it but first we
00:04:55 – have to build it build iOS because as of
00:04:59 – right now live sync does not build the
00:05:02 – first time so we have to build the first
00:05:04 – time all right with the project built
00:05:12 – now we can say TNS live sync iOS
00:05:16 – simulator and then we're going to watch
00:05:18 – for changes
00:05:39 – so as you can see we do have a few items
00:05:45 – in here that we just had we added the
00:05:47 – action bar we have a label we have an
00:05:49 – input field right below that label
00:05:51 – another input field and then a button to
00:05:54 – notice that they look a little off their
00:05:55 – little centered that's because by
00:05:57 – default the apt CSS file has a bunch of
00:06:00 – weird CSS Styles I don't necessarily
00:06:03 – agree with why they're in the default
00:06:04 – template but let's go ahead and remove
00:06:06 – them and save it again
00:06:08 – so what live sync enabled it should
00:06:13 – refresh the page momentarily
00:06:18 – alright so didn't it didn't refresh the
00:06:19 – CSS that's alright it's still a work in
00:06:22 – progress i believe for the most part it
00:06:24 – does a pretty good job the live sync so
00:06:26 – we're just going to TN s emulate iOS it
00:06:31 – should repackage the CSS most of the
00:06:36 – time when i do lives think it does
00:06:37 – recompile scss for me no problem
00:06:44 – alright perfect so that looks a little
00:06:45 – better so what we have here is we have a
00:06:48 – button this button is actually full with
00:06:50 – this is an iOS button we have our form
00:06:53 – elements they are left aligned how
00:06:56 – everything sounds good so far but
00:06:57 – they're not they're not very attractive
00:06:58 – this whole thing is is not too
00:07:00 – attractive so what we're going to do is
00:07:02 – we're going to make some changes here
00:07:03 – and inside of up before we start working
00:07:08 – with the cs what s we're actually going
00:07:10 – to include the theme package so this is
00:07:13 – from the native script website for
00:07:15 – themes we're going to actually install
00:07:17 – it by saying npm install native script
00:07:21 – theme core hyphen hyphen save so that
00:07:29 – did was install the theme but also added
00:07:31 – an import to our CSS file so this will
00:07:34 – import the light beam if you want to
00:07:36 – include the dark theme change light with
00:07:39 – dark
00:07:41 – there are some changes that need to be
00:07:42 – made as well because now we need to take
00:07:45 – the classes that are available inside of
00:07:46 – this theme and apply them and that's
00:07:49 – going to come with a few changes to our
00:07:51 – XML as well so first of all what we want
00:07:55 – to do is we want to wrap
00:07:56 – well first we want to take stack layout
00:07:59 – class equals and it's going to be form
00:08:02 – and inside the form we want each one of
00:08:06 – these to be an input element so they're
00:08:07 – going to be its own stack layout
00:08:17 – alright szostak layout it also has the
00:08:23 – class of input field and you'll notice
00:08:26 – that this is very similar it's not the
00:08:27 – same by far a very similar to bootstrap
00:08:30 – so the same kind of rules apply to have
00:08:34 – the label the label is going to have
00:08:37 – class label this text field right here
00:08:42 – it's going to have a class of input and
00:08:49 – we're going to apply the same thing for
00:08:51 – the next I'm just going to change them
00:08:52 – again this is going to say last name
00:08:57 – we also do have our button star button
00:08:59 – is going to have a class as well is a
00:09:02 – class BTN btn-primary so there's a list
00:09:06 – of different colors that you can have as
00:09:07 – well to make this all possible so let's
00:09:11 – go and take a look at what we have so
00:09:12 – far
00:09:16 – I just hit a pair a couple times see if
00:09:22 – it compiles at this time
00:09:33 – so didn't quite it didn't quite do what
00:09:36 – we want it so it looks like wives think
00:09:38 – might be having some issues on there may
00:09:40 – be a bug ticket open for it let's go
00:09:42 – ahead and just try to emulate the
00:09:44 – old-fashioned way
00:09:56 – alright so it's still in work wondering
00:10:00 – if I have a type of somewhere i do so
00:10:03 – actually it's class i misspelled class
00:10:06 – so let's resave it so maybe maybe I i
00:10:11 – gave a live sync improper credit here
00:10:14 – looks like it probably wanted to work
00:10:23 – yeah so we just we just now created a
00:10:26 – more attractive button we have these
00:10:27 – labels that look a little more
00:10:29 – attractive
00:10:30 – there's proper padding between the form
00:10:32 – elements giving an overall better
00:10:35 – appearance and there's there's you can
00:10:37 – apply way better theming that I did
00:10:39 – using the CSS that was available in this
00:10:42 – particular theme but I'm not much of an
00:10:45 – artist myself but this is substantially
00:10:47 – better than the default that comes out
00:10:50 – of the box so there's a website for this
00:10:52 – you can go on the native script website
00:10:54 – look for themes and a whole bunch of
00:10:56 – documentation similar to what you would
00:10:59 – find in bootstrap and i'll help you
00:11:02 – design a more attractive application
00:11:04 – with not a whole lot of effort


Video Url:
http://youtu.be/0Ml-73GdNp0

(Visited 446 times, 135 visits today)

Comments

comments