Speech Transcript - Rich custom User Interfaces with Glade and CSS

0:00:10	hello everyone thank you for coming i know it's not that easy after three nice
0:00:18	and we are
0:00:20	okay so today
0:00:23	we're gonna talk about how we can use played and you guys actually to create
0:00:29	custom interface
0:00:31	usually judy katies meant for create in the top applications
0:00:38	so
0:00:41	they're supposed to look all consistent
0:00:45	here is a screenshot of all the number for like a regular that's not and
0:00:52	you can see that there are many different applications and since they are all implemented
0:00:58	with the G T K to give they all look a consistent
0:01:03	so that's the idea of the toolkit but now
0:01:07	with
0:01:09	seems a adjudicate reimplemented C S
0:01:14	it's really easy to use it to create our own loops for custom applications
0:01:21	so generally
0:01:25	i keep doing
0:01:28	generally in on the next talk there are
0:01:32	if you applications that don't want to look like the rest and usually those are
0:01:38	within the application for example and it's gonna mess here which is based on the
0:01:46	look and feel of win
0:01:50	has its own look
0:01:52	i hear you can see there's a
0:01:55	the same
0:01:57	it's the same application running with a custom game and the educating
0:02:03	so the idea of this talk is that about show with and real what example
0:02:08	of how to make a
0:02:10	custom look application using the normal start
0:02:15	before that i wanna show you another example this is markup of another multimedia application
0:02:24	i used to work
0:02:26	on this like five years ago
0:02:32	this is the artist more
0:02:34	and
0:02:36	that's this should be great to implementation
0:02:40	he used to run on
0:02:43	win those my controllers and obviously minutes
0:02:47	in order to implement a sun screen injured the guy i had to have a
0:02:54	lot i had to create my don't you think a style my own we should
0:02:59	so like to choose how they look and
0:03:03	implement everything in i for example in this screenshot the only images and music are
0:03:10	obviously the idols and then we can you have buttons
0:03:14	the rest
0:03:15	is all implement with a custom style
0:03:20	but that was quite a lot of work because you have to understand how well
0:03:24	which it
0:03:27	where drawn a
0:03:30	it was a
0:03:31	pretty tedious work but there was so where really good
0:03:38	initial you another example of the same application run in a slightly different call the
0:03:45	thing
0:03:50	okay enough with the screen shot let's start looking at the base time
0:03:56	so
0:03:58	few months ago somebody in a small casino warily from in argentina ask me if
0:04:04	i could do a display for background table and i still haven't learned to playback
0:04:11	are a but i did the display anyway
0:04:14	so first we gonna see a mock up i'm a bit friend that's a designer
0:04:21	then we gonna see that by state how i implemented if you elements of the
0:04:28	of that program using C S
0:04:31	and then we can see how all fit together
0:04:36	so
0:04:38	this is the mock up really
0:04:41	it was quite simple apparently people that play are gonna like to you know of
0:04:48	every
0:04:50	a player it's all in the table so there's
0:04:54	tree possible out on it play kind of have it like between the player could
0:05:01	win the then there
0:05:04	or there or we could be attacked so
0:05:08	we had to implement like agreed like table and we were gonna use a different
0:05:15	icon for each possible results
0:05:18	so
0:05:19	once we have something like they like this
0:05:24	i decided to split the design in different elements and
0:05:30	here so we have and i use
0:05:35	a background image
0:05:38	and another image shows for the icons and the low and that's it the rest
0:05:43	has to be implemented in C S in order to make it easier to add
0:05:48	up to different display and you
0:05:52	you have to change something you don't have to go and change all you really
0:05:56	images
0:05:59	so we're gonna as a study the is three elements the top frame which i
0:06:06	call the but frame that baby and the information frame
0:06:14	so what i do longer like experiment i'm a teacher and a man like a
0:06:19	regular and your big issue and i use
0:06:22	mostly reads
0:06:25	and
0:06:27	no i'm gonna tell you about why i use the fright so
0:06:33	C S for she to guy
0:06:37	it's very similar how it works on the
0:06:43	on the browser
0:06:45	all you have to read about is the box model and how it maps to
0:06:51	the which
0:06:53	so basically in
0:06:57	in triplicate every which it and it's can see their like a box
0:07:03	so in
0:07:05	in theory you could set the martine or there and
0:07:10	and or there are a frame and all this is this probability you would do
0:07:16	on
0:07:17	on a bro so
0:07:19	sometimes they are which is that don't work like expected and that because
0:07:26	they which it sell have to a call different function for each a C S
0:07:33	probably be for example are some which is that don't know about rome so you
0:07:37	can expect
0:07:40	to change their background with C S A so
0:07:44	it's when if you are working on P G T K and C S and
0:07:49	there's something that doesn't work
0:07:52	there's a really good chin that's because
0:07:54	they which it is not only in the write a growing function
0:08:00	so
0:08:02	it's don't have a don't be afraid should go take a look at the draw
0:08:07	signal i did a little mental in the which it and see what it's doing
0:08:11	so
0:08:13	that might have but so
0:08:16	okay one
0:08:21	here i am
0:08:24	sure win the results of editing delay
0:08:29	and apply this year says changes to the one place a this is all or
0:08:35	and work
0:08:37	in rubber is a there is the C S ranch of really that ad only
0:08:42	that option
0:08:43	it lets you choose which see assessed to use a this type provided for the
0:08:48	whole right
0:08:54	okay let's are for with the but three
0:09:01	also said before i use it typically frame so i could
0:09:06	make sure that it what quality in
0:09:11	what drawing the frame on the bottom
0:09:14	so i you can see
0:09:19	this is the first thing i did was obviously change the font type and i
0:09:25	think that's a reporter's size and the way
0:09:29	to make it look like i wanted
0:09:32	and
0:09:34	the vote on C S
0:09:36	it makes you it's a like all the G T gave frames that has a
0:09:42	frame but the startup
0:09:45	as you can see you can change or they're or they're all your the radios
0:09:51	that you choose if you want rounded corners or not
0:09:56	and the books
0:09:58	when i implemented this it was
0:10:02	with G T K three point eight so
0:10:06	shallows where always inset there was to know
0:10:10	way to make the shallow there on the outside and that's because we should be
0:10:16	there drawing
0:10:18	in the two they are location they are not allowed to
0:10:22	to your all outside but no that's gonna i think that change in carbon to
0:10:28	ticket
0:10:30	and this you are able to save you know side and but still gonna get
0:10:35	a lot but you could create a
0:10:39	your own which it that draws a frame inside it's i location and you will
0:10:43	be able to see your
0:10:45	yourself
0:10:49	anyway if anyone wants to the right and ask any question about the C S
0:10:56	you're welcome again okay and that see the other
0:11:03	the other frame
0:11:06	seems i wasn't able to
0:11:09	have the outside shuttle i decided i was gonna use
0:11:14	i used one frame inside of another as you can see the top frame
0:11:18	the C S style escort frame shuttle i said all the borders
0:11:25	to be zero
0:11:27	and i said
0:11:30	the
0:11:31	right and bottom body
0:11:35	to be four pixels
0:11:36	so when you back something inside you will show up a lot more
0:11:42	well so
0:11:45	if you had that top frame and you but inside a
0:11:50	another friend before frame
0:11:55	and change the font like we did on the other thing you gonna get something
0:11:59	like that
0:12:00	that their result
0:12:06	okay so now the
0:12:08	main great
0:12:11	as you i don't know if you noticed but the main great how the
0:12:16	gradient so each a square inside was a have the different gradient so i decided
0:12:22	i will implement that by creating it
0:12:25	big frame that will have the one change the border as you can see you
0:12:31	can specify that the
0:12:34	the we have and the type of for the or if it's already or that's
0:12:39	not and then the court
0:12:42	i said the three years
0:12:44	and i this is a very nice feature
0:12:49	you can set the background to be any image or you can use a seven
0:12:55	different functions that will create an image for the in the example i used a
0:13:00	gradient
0:13:01	so as you can see it's in your relate in that goes from left up
0:13:07	to the right button and
0:13:09	from a little
0:13:12	great to a little later great
0:13:16	and that's you sure i that some instead
0:13:19	a shallow
0:13:22	and
0:13:23	on the right here you can see
0:13:28	the first us yes this is so i
0:13:33	let's go back so it's a frame and i was going to use the i
0:13:37	used it should again agree
0:13:39	for the inside and
0:13:42	this is all gone been i meekly at a runtime you choose
0:13:50	that we have a paper on how many rows on all new once and my
0:13:54	custom which it with a to decay image each sell
0:14:01	and it will say those
0:14:05	C S class
0:14:07	to each image accordingly so every images every image it's i agree get the first
0:14:14	style that sets only travel
0:14:20	think shallow and then all a
0:14:24	so this guy that i with a different background all so you can see
0:14:30	how they do their and
0:14:32	once you put it all together
0:14:35	it looks something like that
0:14:40	another thing i had to do to make it look
0:14:43	like this is each corner image have to add it on radio set
0:14:53	so as you can see here in the
0:14:56	top left and top right you can see the
0:15:00	this C S for each corner
0:15:03	and
0:15:05	what
0:15:07	yes the animation
0:15:09	so i choose to use that you think the image because i knew you when
0:15:14	there's a background also because
0:15:18	that will let me if i eventually needed to do something more complicated i could
0:15:24	use an icon set the five or maybe i could draw myself on their cost
0:15:30	know all about it i want to do some animation that wasn't possible with C
0:15:34	S
0:15:36	but
0:15:37	and then do that you see in a simple animation with C S and effective
0:15:43	way nice and it works pretty well
0:15:49	so as you can see
0:15:53	i'm sitting the it she play here and make sure or when the player wins
0:15:59	for B G
0:16:02	banker or try and make sure it simply said create animation
0:16:09	and it's nice wanna use the player animation it's gonna last
0:16:13	have to segment
0:16:15	it's gonna be playing ones
0:16:17	and
0:16:20	it's gonna be pretty ones and the
0:16:23	function to calculate the correlation between the first frame and the last one it should
0:16:30	really your animation so it's really your function so you goes straight from
0:16:38	there and on the top you can see how i define
0:16:42	the they year transition from start to and
0:16:47	start with a know are grown image and then it's a bad
0:17:01	so
0:17:04	this is the and we saw when you put all together
0:17:08	i guess know you're wondering why the markup was a vertically and now this is
0:17:14	horizontal
0:17:16	that is because
0:17:19	when we installed it the first time we realised they what the
0:17:26	the chip money door that when you put it vertically it didn't look why well
0:17:32	from the young girl so we have to reimplemented and make it horizontal
0:17:46	okay so
0:17:48	what's missing
0:17:50	to do well first of all i have to finish
0:17:54	a this yes this
0:17:55	branch and merge it into laughter
0:17:59	and then i would like to see there is the way to disable C S
0:18:04	animation in the workspace because
0:18:08	sometimes can make it a little bit the slow
0:18:12	and another thing i was
0:18:14	i have to investigate is the final if we can at the
0:18:19	something to be in there to specify a C S
0:18:24	S E S provide something like that
0:18:27	and
0:18:28	obviously
0:18:30	make it a little bit fast that faster
0:18:35	okay
0:18:36	by the way this presentation is made we play and it's this
0:18:51	since i can if the source code of the other application at least you have
0:19:00	this as an example everything is implemented we play and see a says and actually
0:19:06	you didn't even create a program i'm using glade review where we'd if you arch
0:19:11	and i did you can specify the C S
0:19:17	you can even say you want to make it slide shows so it's gonna
0:19:22	pick up all the top level widgets in your russia and i could into she
0:19:27	to case that
0:19:29	and
0:19:30	make you go up and down
0:19:33	and change the top levels
0:19:38	okay
0:19:39	so
0:19:41	that would be
0:19:43	if there's any question you want to ask me then we can move and see
0:19:49	the actual implementation of be
0:19:53	that's less
0:20:01	okay
0:20:02	you wanna see this light on great
0:20:05	alright
0:20:09	okay here i remove the idea because
0:20:13	choose the resolution is not enough but as you can see
0:20:20	let me make this a little bit bigger so you can see the parakeet
0:20:27	they and main top level it's just the frame
0:20:31	and
0:20:37	in the common top
0:20:40	you have this type questions property where you can set all this type classes one
0:20:47	and
0:20:48	now the initial you
0:20:53	if you choose
0:20:54	the C S this for this virtual
0:21:02	then it's gonna low
0:21:06	alright it's a little bit slow i a
0:21:11	it is on my desktop and he was quite fast then when i move it
0:21:16	to my old notebook i realised it wasn't that us so but that would like
0:21:23	if you hours before catching the bus to the airport huh
0:21:27	so that so i realised that when you
0:21:33	when you set a
0:21:35	it problem animation to katie's embodied eighteen the whole which it
0:21:41	so that was you can E a whole rear all the whole us me
0:21:46	so what i did to make it a little bit faster now as you can
0:21:51	see here
0:21:54	i create
0:21:56	and
0:21:58	event box shot for the animation so that only but it's regional
0:22:04	and the same thing for this dining guide
0:22:12	and you can see here
0:22:17	all the top levels
0:22:22	and
0:22:29	here's the C S
0:22:31	for be
0:22:33	slide
0:22:35	first log is all the different examples you show in this light
0:22:40	and you to be
0:22:42	for the down
0:22:48	is the actual topsy assess
0:22:51	for example
0:22:54	right changed a greedy and on the back of the of the cover background
0:23:06	that's it is that this is something you see like i don't read
0:23:15	and it will back
0:23:22	you are
0:23:26	and it
0:23:27	save this
0:23:31	there we go
0:23:38	so
0:23:40	what's played i'm review do we they are actually money tori in the file and
0:23:46	each time it change simply below the C S
0:23:51	so those that make it a little bit easier to
0:23:55	to try different things because
0:23:58	well i'm not exciting or so we take me a little bit longer to make
0:24:03	things look a little bit better
0:24:09	but this is the
0:24:11	i think it's a pretty good way to create custom application because scenes G to
0:24:17	create a list of to be it has a lot of different features which make
0:24:23	it really handy to do this kind of a application easy like it's really easy
0:24:31	to have a configuration save and all that you already taking care by the
0:24:38	that we could so the only missing think was a easy way to create custom
0:24:43	lots
0:24:44	but now i think with
0:24:46	this
0:24:49	that it's a little bit the easier
0:24:55	so any more questions
0:25:02	yes
0:25:13	how are the presentation include
0:25:17	okay we took me
0:25:19	three days
0:25:23	a
0:25:24	but i spend most of the time actually adding those features like
0:25:30	it to me like probably
0:25:33	i don't know all the options i added to weekly review were
0:25:38	they probably took me like a full day because i was going to create a
0:25:44	i was gonna hide in D C application that creates the low the be there
0:25:49	and at the baby in the end and then i decided okay i since i'm
0:25:53	doing this work anyway split really to be better an idea to the preview where
0:25:59	which
0:26:00	it could be handy for someone another thing like making sure you
0:26:07	since i'm doing this with G T K and
0:26:14	you everything is wrong with cairo it was thinking
0:26:20	okay so what about it pdf because if someone wants to download
0:26:25	and see the apply than see this light and don't have the latest create from
0:26:31	master at another branch gonna be a little bit difficult for them to see
0:26:37	so i did i make so when you
0:26:41	you have
0:26:42	screenshot option in great review where
0:26:45	that will
0:26:46	taking screenshot and dump it to the feel slightly
0:26:50	so i made it when you pass that
0:26:55	parameter and also this light show parameter
0:26:59	when you put those two together we actually
0:27:04	create a B D S four S P G or possibly a star first graders
0:27:10	are first and we it will draw every top level to have pdf so for
0:27:16	example this is the same
0:27:18	it's like
0:27:27	this is the same slide
0:27:29	rent or buy cairo into the P D F
0:27:40	i actually really good i only seen one are defined in the first
0:27:45	in the cover
0:27:47	i don't know if you can leave your
0:27:52	not it's not baseball but if you watch this in
0:27:57	you know money per
0:27:59	there are some time they show with a thin line between the building in each
0:28:05	and a C S right on the bottom
0:28:10	but
0:28:11	otherwise you
0:28:13	by good
0:28:15	so you can download these P I it what's created by late two
0:28:27	one of them
0:28:33	questions
0:28:39	so we will become part of the future to gnome office
0:28:44	okay
0:28:46	we don't currently have any plan for that
0:28:50	but i can say know how
0:28:53	just there
0:28:57	so you well noted that a lot of random would use and you D J
0:29:01	don't really respects uses properties
0:29:05	so i went about fixing that are interesting to which is the just
0:29:09	it for us
0:29:13	well i don't know we won every which is to well
0:29:18	all this C S
0:29:20	a different things because maybe
0:29:25	i mean we can make a label draw it but if you already wrote about
0:29:30	one on the so that's a different that you had to learn
0:29:35	maybe we should document that a little bit better and it spend the differences between
0:29:40	C S
0:29:42	own should decay and actual implementations in browsers
0:29:50	that but if we've if i find any
0:29:54	after about yes i will try to fix it but
0:30:07	more questions
0:30:11	sexual much is

Rich custom User Interfaces with Glade and CSS

Developer Experience Track

Juan Pablo Ugarte