what's going on everybody and welcome to
a TV tutorial series if you don't know
what TV is it's a cross-platform GUI
development library the idea is that you
can code it in one place one time and it
just works everywhere on Windows Mac
Linux as well as on mobile with like
Android and iOS it's been about four
years since I looked into K being
curious about the changes curious if
like packaging and deploying to Linux
I'm sorry not Linux Android and iOS like
on mobile here you see how that works
out now after it's been some time it's
pretty clunky before so to get started
head over to a kiva.org go to download
and grab the download instructions for
whatever operating system you intend to
program on this isn't for running it
it's just simply where do you want to
develop your TV app so I'm on Windows so
I'd go here grab these things there's
some stuff that's like you you could
this is optional TV examples also
optional but if you like TV I would
suggest coming back and grabbing the
examples just so you can see how other
people have done things and get ideas
about how you might want to do cool
things with your TV app also check out
the API reference if you want to learn
more the API is huge there's a lot of
stuff here okay so I just kind of
glanced through that get ideas again
about things you might want to make with
TV if you like TV so with that go ahead
and install all the things you want
pause the video if you need to and then
continue when you're ready to go we're
gonna start making our first TV app ever
in the series what I'd like to do is
make a chat app with TVs so the idea is
you can taking from our sockets tutorial
we want to be able to create a chat app
that can work on our phone and our
desktop and all that kind of stuff so
we're gonna use TV for the UI aspect of
that so let's go ahead get started so to
use TV no surprise we're going to import
keavy without the capital K from TV app
we're going to import
app this is just your base app class
every app is gonna have it then from TV
uix not label we are going to import
label this is just so we can add some
text then we're gonna say key B dot
require this is just so we can make sure
that people are using the same version
again this is just mostly for
development purposes so key need to
require one point 10.1 and key V you
installed so as soon as you install it
you'll see what the version was so mine
is one point ten point one using
different also when you do install key V
you could always do pip install key V
equals or double equals one point ten
point one if you need to get the exact
same version of me because something's
not working and you're not sure if it's
you or if it's just the version okay
so keep you require done now let's go
ahead and epic app and epic F is going
to inherit from app can't get away with
that I don't know if my Pepe winters
happy with that or not
looks like it is okay class app or class
epic app inheriting from app what do we
want to do we were going to run the
build method and the build method is
pretty much your initialization method
right
it's your initialization method without
being an initialization method because
app already has one but you'll see in a
moment we have to supersede that anyways
pretty quickly anyway your
initialization method so we're gonna
build and all we're gonna do is return
label hey there and I don't remember
this is the firmest ooming text is the
first parameter but just in case go
ahead just pass text equals hey there
and then your usual if equals does
anybody know it Thunder dunder magic
dunder is fascinating anybody knows what
the heck that is let me know man okay if
name equals main epic app dot run
don't forget your parentheses in both
cases otherwise not
work very well okay let's go ahead and
save that and I'm gonna run that in
another window so I don't think it's
gonna work out in sublime I can test it
in sublime let's just try it real quick
I just don't think it's gonna work yeah
I don't see it here so I'm gonna go
ahead and exit that tools cancel the
build and then what I'm gonna do is come
over to TV tutorial here open the
command prompt and do PI - 3 7 TV app PI
go ahead and run that if you get any
errors they'll be displayed here so you
can hopefully Google them or ask
compaint ask in the comments anyway here
is our app awesome
one thing to note right out of the gate
is you can resize it mm-hmm and it just
kind of just works and that's kind of
the point is it works on many different
screens or on a phone if you were to
rotate your phone it'll fix itself and
all that so cool all right so cool but
not that cool so now what we're gonna do
is actually start building the first
page of our app because this is very
boring up to this point so we're gonna
say from T V dot uix dot grid layout
we're going to in or grid layout and
then we want to bring in text input so
from key V dot UI x dot text input we're
going to import text input so try to
make a chat app the first step to this
chat
you know server app thing is we need to
input at least a username for sure but
also in our case we can customize the
port and IP so really the first page of
this app needs to be like you know IP
port in username you know so for all
those things and probably like a button
to connect and then when it's connecting
then switched to the chat app page right
which will just contain the chat history
and then a field for you to chat in ok
so so we're gonna use the grid layout
this is just so we can organize the
widgets and stuff right and then text
input so we can input some text and then
label we already have that so text input
from the user labels so we can just put
some text on the screen basically so the
first thing that we're gonna do is make
a new class
so rather than epic app just simply
returning a label it's actually what
we'd like it to do is return the connect
page now we need to define the connect
page so a class Connect page and connect
page is going to inherit from the grid
layout and then one thing to keep in
mind that first of all there's many
layouts but also to further customize
layout so you can like in the case of a
grid it's obviously a grid surprise uh
but you can make make certain cells of
that grid a certain percentage width or
height and then also you can add layouts
inside of layouts so just keep that in
mind that you have lots of options there
anyway connect page grid layout awesome
we're going to define our init init
method here and past-self here don't
forget that and the first thing that we
want to do is actually run the init
method of grid layout so we're going to
say super init and self and kwargs
cards one day I'm gonna get it and then
we need to add the Korg's here as well
okay so if you don't totally understand
that that's okay we've actually really
never covered the super init but
basically all you're you're saying is
super so you're referring to grid layout
run the init method okay
and why might we want to do that well
John I'm so glad that you asked let's
just copy pasta let me just run a test
up oops
I want to do that I want this one to be
modified test up I will just open that
and let's say you had two classes you
had class one and in fact
let's dude fine in it so and then all
we're gonna do is print one okay let's
say you did that and then let me just
copy this come down here paste we're
gonna call this two two and let's say
two inherits from class one so that's
your parent class right let's just say
we made a two objects you'd see here it
just prints too right but sometimes
you'd actually want the init method of
the inherited from class otherwise known
as the parent class you want that to run
as well so the way that you would do
that is accessing the super method and
then we're gonna say super init self or
not Sela see a super init there we go
and boom
obviously you don't need to pass self
here that's just understood okay so now
that's how you're gonna run one and two
so you run the initialization method of
both classes and that's what we're
trying to achieve here okay so back to
the regular world cool so the connect
page basically gonna have two columns
because you're gonna have some text on
the left and then the field input on the
right so it'll be like you know IP and
then you enter the IP port : right you
enter the port username : enter the
username that you want to use right so
we need two columns so we're say self
dot calls equals two and then we're
gonna start adding some widgets so self
dot and underscore widgets this widget
will be a label widget where the text
equals IP : then what we're going to say
is self dot IP equals the text input and
then we'll pass multi
equals false here and then we're gonna
say self dot add widget' self dot add
widget' self dot IP so really we could
say this so imagine you've got two
columns and then infinite rows so boom
you've got IP : just a label it just
says IP : and then right next to it it
says basically you've got this text
input widget added there so you can just
boom input some text so widget number
one widget number two we've exceeded two
columns we now are on row number two
easy so now we're going to basically do
the same thing again with port and for
username so I'm actually just going to
copy this paste paste IP port and then
username and then we're gonna say here
port username copy this pasta there copy
that pasta that alright that looks
pretty beautiful what'd you guys think
is it gonna run hey man there's only one
way to find out let's do this save that
so let me run it and just for the record
I probably won't always have this on the
screen if I say I'm running it I'm just
doing PI 3 7 key v app top PI if you're
on Mac OS I believe to run it it's key V
and then the file name
just for the record oh did I pass self I
probably passed self to this I really
wanted to keep doing that I don't want
to do that either I'm so used to just
hitting ctrl be ok rerunning it okay I
know Python I swear okay so there's our
app ok so just in case I assumed through
that too quickly I did the exact same
thing I tried to do I'm just like used
to like anytime I in it I just
past-self because like you never you
never actually run in it right except
when you're doing the super but you
never actually intentionally run in it
so literally every time I do in it it's
just like ingrained in meself anyway
cool so here's our app and again pretty
nice that you can just kind of continue
resizing it and it just works right so
yeah pretty cool now what we want to
have is probably one more row and have
like some sort of submit button where
you click on that and then we got a
handle for that so one we need buttons
we need to start handling for events we
got all kinds of stuff that we got to
figure out and I'm gonna save that for
the next video so a quick shout out to
my recent channel sponsors members
awesome people Clark uma caught adrak
adducts in dis year thank you guys very
much for your support you guys are
amazing
alright everybody I will see you guys in
the next video