In this section, we're going to begin creating our production defect tracking application.
We're going to create an overview screen as well as some placeholder screens for our operator repair
and supervisor.
We're going to create a pop up for our Manage Staff screen.
And we're going to create a view for our defect tracking table to show our current defects in a web
browser.
So let's get started.
So now we have everything we need to create our defect tracking user interfaces.
Let's walk through doing this I'm going to create a new screen.
And I'm going to set the width and height as I want them.
You're going to be building the same thing in the next assignment.
I turn off my global color scheme, and this is going to be my main page for the application.
So we'll go ahead and save this.
I am going to save this as my defect tracking main screen.
And.
I will just throw up a banner here.
Let's put in defect tracking and give it 36 font and just kind of dress it up a little bit and I'll
turn off my global color scheme and just add the little 3D effect that we've been doing.
So we'll just kind of make this black.
Or we could even go kind of a charcoal color, send it back.
There we go.
And I'm going to give this a white font.
And so we're going to need screens and a picture window.
And so first I'm just going to grab a picture window.
And the way that I'm going to do this is we're going to have one screen that just shows our defect records
from our production defect tracking table.
And so it's geometry is going to be 1080.
And it's going to be a height of about 600.
And then this picture window I'm just going to go ahead and name this.
I'm real big on naming objects.
This is going to be P.W. for picture Window.
And let's just call it Defect View.
And then we're going to have another picture window object.
And this is going to show our interfaces for operators and repairmen and things like that.
And so it's geometry.
We're going to make it 1080 by about 330.
And we're going to go ahead and name this P.W. manage defects.
And then we're going to add some buttons.
And the idea here is the buttons will change what we see here.
And in this picture window we'll always see our defect records.
So I'm going to go grab some windows buttons.
And so the first one is just going to be what.
Just keep it simple operator.
And go ahead and set our font and everything.
I'll duplicate that.
And this is going to be hair interface.
Duplicate this again.
And this is going to be our supervisor interface.
And then a couple other things that we want.
I'm going to add the manage staff.
And we're going to show our existing staff screen as a pop up.
And then I want one more.
So I'll just duplicate this once more.
This is going to be a button to show the error log.
That way we're not having to go back to the file system every time.
Let's take that space out of there and just kind of clean up a little bit.
So I have this one selected.
I'll hold my control key down, select all of those, make them all the same size.
And then if we wanted to, we could just select one button and hit control A that selects all buttons.
That's kind of a nice thing there.
And then.
Now I can just turn off my global color scheme for all of these.
And so repair will do.
Orange supervisor we're going to do kind of this.
Actually this black color here, and I need to give it a white font.
As a matter of fact, I'll hit control A again, give them all a white font then I don't know.
Manage staff will do purple.
And then show where a log will do kind of a read.
So these are navigation buttons.
I'll select these all again.
Use my arrow keys to kind of tighten this up.
Hit save okay.
So I have some buttons.
We have a couple of picture windows.
Now we need to build placeholders for these pages.
So for our defect tracking we made this 1080 by 600.
So we're going to create a new screen.
And we're going to make it 1080 by 600 and we'll turn off our global color scheme.
And this is going to be our defect view.
So I'm just going to hit save.
And we're just going to call this defects view and hit save.
And all we're going to do here is we're going to add a browser.
And the idea is we're going to be showing our defect table information as an HTML like we've done before.
I'm going to use in this case the CC web browser control instead of the chromium one.
And I'm just going to kind of place this out like this kind of size it to the page for this particular
object.
It doesn't have a dialog that you double click to pop up.
So I'll turn off status and turn off show navigation.
So it looks basically like a big white square.
We're going to come back and load this with our defects table.
But I'll hit save here.
And now I'm just going to create a new screen.
This is going to be the template for our operator and repair supervisor interfaces.
So it's geometry is going to be.
1080 by 330.
That's going to fit in the bottom window.
Turn off our global color scheme.
And for right now, I'm just going to add a static text that says to do.
Create operator screen.
And this is going to be the screen where the operator adds in the defects.
I'm going to up the font here so that you can read that.
I'll hit save.
And this is going to be.
Operator.
And then I'm going to do file save as we're going to call this repair.
So I'll just change this here on repair.
So this is now the repair screen I'll save that.
We're going to do save as one more time.
This is going to be the supervisor screen.
And we'll hit save.
Change this to supervisor.
And now let's go back to our main screen.
This window is going to show always our defect tracking which is this defects view.
So we can go ahead and assign it.
So for this picture window we'll hit miscellaneous I'm going to turn the border on just because it looks
better.
But I don't want to be able to move it around or close it or anything.
And we're going to find the picture name and just double click on this.
And this is going to be my defects view.
And so by default it's just going to show it.
Right now it's just a big white square.
And then to set up our navigation for this picture window the name of it is Manage Defects.
We need to remember that.
And so for our operator I'm going to hit my events tab.
And we're just going to use a direct connect to cause navigation.
When you release the left button we're going to trigger this.
We'll just choose constant.
This is our picture browser.
And we're just going to put the operator screen.
And the target is going to be our managed defects picture name.
So what's going to manipulate that same property picture name and cause it to show that screen.
We're going to do the same thing with repair.
So I'll right click Do Direct Connect and we'll use a constant and we'll do our repair.
Go to the same picture window.
We will do picture name.
And then finally we'll do the same thing with supervisor.
So here's my supervisor screen manage defects picture name.
And we can test this out.
We'll just hit save here and go to runtime.
So by default we are showing just a blank web browser.
It doesn't have anything in it.
We don't see anything down here.
But when I hit operator then it shows the operator screen.
There's our repair screen.
There's supervisor.
Now if we want it to also have this border, we can just go down.
Grab this guy here and turn the border on.
Then save it and go back to runtime.
And it's only going to show the border, of course, when it's actually showing a screen.
So the next thing we'll do right now is just default this to the operator screen.
And so for this picture window by default see how picture name is italicized.
That means that a direct connect is affecting this property on this page.
So that's just some good information.
And we're going to default it to the operator dot PDL.
So you can see it shows a preview.
And so now by default we're going to show the operator screen.
So we've got something to show.
And so let's set up our manage staff because we're going to need to add a few staff members.
And for that we can go back to an example we did earlier in the class.
And it was on my first screen.
And we have a manage staff button here.
And there's just a function called open screen and pop up.
And it dynamically creates a picture window on the fly.
And so I'm just going to copy this script and I'm going to put it on the manage staff release left paste
that in there.
And so basically this is the name of the screen.
This is going to be the name of the pop up window that is automatically created.
This is a tag prefix.
You can see the arguments up here.
We're not using tag prefix and we're not dynamically setting this.
You can learn more about open screen and pop up.
If you open the help for Winsock and search for this term, it shows you about this function.
Also have a video on my YouTube channel that talks about using this function.
So we'll click okay there.
We'll click save and we'll just go to runtime and we can test this out.
There's our pop up and we can see our staff and interact with that.
So we're going to be using that in a moment.
So next we want to get our view working for our production defect table.
We can just go back to graphics designer see our defects view.
And first on our work web browser control.
We need to change this to web browser just to kind of keep it consistent.
And then next we're going to go to the picture object itself to the events.
And we'll use the open picture to put a script to load this.
And we're going to use our build HTML for right now I'll just do select star from production defect
tracking order by ID.
Since this is the wink web browser object and not the chromium, we have to add an additional line in
order for the refresh to work.
And so first we just have to do about blank.
And so that just constitutes a change of address which will cause this to update.
We'll just click okay.
And we're going to save and just go to runtime.
And so of course this isn't going to be a very useful view because it's just got all of our ID fields
rather than the actual operator name and station name and things like that.
Also notice it looks a little funny because we have these nice cells here, and that's just a test entry.
But here our cells are not there.
So we're going to open up SQL Server Management Studio to see why.
So in SQL Server Management Studio I'll just hit a new query window.
I'll make sure we are looking at our production database.
And we'll just do select star from.
And I'll just do my drop down.
And I'll do production defect tracking.
And notice that we just have entries for the operator stuff.
We don't have entries for our repair information or our supervisor information.
So all of that is null.
And what's happening is the VBScript is not handling that well and it's not processing that.
So I'd like to go back and fix this situation.
First we'll go to Winsock Control Center and go back to our VBScript editor.
And in our SQL functions module, we'll just go to our build HTML.
And what we're going to need to do is it's in this area where it's printing out the fields.
And what's happening is this ends up being null, and the null just kind of skips over.
And it doesn't always throw an error.
As you can see.
I just know this from experience.
So what we're going to need to do is test this value for null.
And if it is null then just replace it with a couple of dashes.
So this is our loop.
And I'm just going to paste in some code here.
And basically the way that this works is I've created a variable V for value.
It's going to use the Isnull function to test whether or not this is null.
So for this line it's saying that if this value is not null, then set v to our value of our current
field.
But if it is null, just set it to a couple of dashes and then we have an endif.
And then lastly we're just going to replace this with V.
And so now whatever V ends up being either the value or the double dashes, it's going to end up in
our cell.
So I'm just going to save this.
And we'll go back to defect tracking and we'll go to runtime.
And now you can see that our values are double dashes for our null values.
Now, later maybe we can do a center line or something to kind of clean this up.
But the next thing I want to do is replace these ID fields with our actual names and descriptions.
And so we're going to go back to SQL Server Management Studio.
And in the first couple of lectures we created a view.
And it resolved these relationships and showed our actual information.
So we're going to do the same thing again.
But we're going to learn a few new things here.
So I'll right click and create a new view.
Our primary table is going to be our production defect tracking.
And for right now I'm just going to do our reason and our category.
And then we'll come back and add these a little later.
And I'll click add.
And that's going to give us our tables.
It's going to generate this SQL query.
And it's going to do something called a join on these relationships.
We're going to learn about join in the next section.
But for now what we can do is just pick our columns that we want to show as our output.
And the order that we pick these is going to put the order here.
But of course we can go back and drag these around.
And so for our production defect tracking table I'm going to want the ID the defect time.
But I'm not going to choose the ID because I don't really care about the number.
I care about our defect category.
So I'll choose description and I care about our reason description.
Okay.
So as I'm clicking these it's adding these to our output.
And you can see this is a SQL statement.
So these are going to be our output columns.
And we can come in and manually edit these.
But let's just run this.
So I'm just going to hit execute.
And you can see our output here.
Now we only have one record.
And there's our ID and there's our time.
It has resolved our category as assembly.
And our reason as missing parts.
And so I could just go to this description and just manually put in as category.
And traditionally we can put these square braces around here.
All right.
So now it's called category.
That makes this output a little bit better.
And then expression one let's do reason and we will rerun that.
And so now we've got some stuff that makes sense.
Now if we want to go and add in our operator name, the operator is going to come from our staff table.
So I'll right click in here and do add table.
And we know that our staff is going to be in there.
And the staff table references our roles table.
So we're going to need both of these.
And I'll click add.
And I'll just kind of pull up here.
What we want to do is maybe just put our last name.
And let's just say we want to show the last name of the operator.
But when I run my query, notice that I have no results.
The reason is it's also looking at the repairman as well as our supervisor.
And for this record, those are null.
So it can't return anything.
So we're it's filtering these records out.
And so what we're going to have to do is come in and manually edit this.
And it's creating this join.
So it says okay look at our roles and do an inner join on the repairman ID and our operator we want
to keep but the supervisor and the repairman we don't.
And so I'm just going to get rid of this part and say, okay, let's not worry about the repairman ID
right now.
So we're doing the join where our operator is equal to our staff ID, but we also don't want the supervisor
right now.
And so if we try to run this now now we're going to get our relationships.
And so when you have null values like we do right now in our repairman and our supervisor, these nulls
are not going to allow us to have relationships.
Now when we do start having information where our repairman and our supervisor and there we're going
to have to find a way to go make those relationships on the records that have them.
But we can kind of deal with that a little bit later.
And so we can also go add in our operator station so I can right click and do add table.
So we need stations and I'll click add.
And of course we're going to have the same problem because it's going to try to do the supervisor station
and it's going to try to do the repairman station.
So we are just going to get rid of our supervisor station and the and statement.
So we're just doing the join for production defect tracking.
Operator station ID is in our stations table.
And we're also going to get rid of our repair station.
And of course we have to go in and say we want our station name as part of the output.
And now we have our station.
So this is going to give us a much nicer interface to look at.
And one last thing I want to do, I want to get rid of the roles table.
And I can get rid of that because we're not using any fields out of that table.
It will still make the relationship without it.
And then we're going to save this view.
And we'll start this with a V for view.
And we will do operator defect entries.
And then we're going to right click refresh.
It's going to show up down here.
And I can do a new query window and just do select star from and pull out the name of our view.
And we can actually just do a select statement against that just like we do for a table.
And so here we can just use this.
Go back to Graphics designer on Defects view and then on our script.
I can just kind of paste this in here, click okay, save this, and then we'll just refresh runtime.
And now we have a much nicer interface.
It's not showing our repair supervisor stuff right now because we have not selected those from the view.
And we will handle that later once we're putting in repair and supervisor entries.
So that was part one of building our production defect tracking interfaces.
In the next section, you're going to be building the operator repair and supervisor interfaces as well
as showing the error log.
In the meantime, you have an assignment coming up where you'll build the defect tracking application
up to the point where we got it in this video.
So see you in the next assignment.