IntroductionWelcome| 00:04 | Hi! I am Todd Perkins.
| | 00:06 | Welcome to Up and
Running with Java Applications.
| | 00:09 | If you're just beginning to learn
Java and you feel comfortable with the
| | 00:12 | language but don't know how to build
an app or what you can do with Java, this
| | 00:17 | is the course for you.
| | 00:18 | Throughout this course, you'll see how
you can use Java to develop backend web
| | 00:22 | applications, front-end web applications,
desktop apps, and even an Android app.
| | 00:27 | So we'll tour the most common uses of
Java today, and you'll see how to build and
| | 00:33 | publish these applications on your own.
| | 00:36 | And now we'll move forward with Up
and Running with Java Applications.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | Before you go through this course, it's
important to have a basic understanding
| | 00:04 | of the Java language.
| | 00:06 | There are many different places to
learn Java, but the place I recommend is the
| | 00:10 | Java Essential Training course
in the Online Training Library.
| | 00:14 | Java Essential Training will show you
all that you need to know to get up to
| | 00:18 | speed to start building Java
applications like you learn how do in this course.
| | 00:22 | So once you feel comfortable with Java
then you can go ahead through this course
| | 00:26 | and learn how to build
Java applications on your own.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium subscriber to
lynda.com then you have access to the
| | 00:04 | exercise files for this course.
| | 00:06 | Exercise files are organized by chapter.
Each chapter folder contains the files
| | 00:11 | used in the corresponding movies.
| | 00:14 | For Chapter 1 here, you'll see that
there are no files because there are no
| | 00:17 | exercise files used in that chapter.
| | 00:19 | For chapters that do have exercise
files, you'll see the names of the folders,
| | 00:24 | and they'll appear on your screen
according to which movie you're watching so
| | 00:27 | that you can follow along and use
the appropriate files for each movie.
| | 00:32 | Each folder has its final version and
a starting version, so just in case you
| | 00:36 | get lost, you can see the final code
and compare your code against that code.
| | 00:42 | I'll close that window.
| | 00:43 | If you don't have access to
the exercise files, don't worry.
| | 00:46 | You could still follow along.
| | 00:48 | Throughout the entire course I'm going
to go through my projects line by line
| | 00:52 | and explain what you can do to set up
your files and folders in the same way so
| | 00:58 | that you can follow along as well.
| | 00:59 | So now that you've taken a look at how
the exercise files are organized, you're
| | 01:03 | ready to begin building apps using Java.
| | Collapse this transcript |
| Importing exercise files into Eclipse| 00:00 | If you're working along with the
exercise files for this course, you're going to
| | 00:04 | need to do a lot of importing existing files.
| | 00:08 | To do that, you can simply create the
default Java project, so you can go to
| | 00:14 | File > New > Java Project.
| | 00:17 | Now of course if we're working with a
different type of project for that chapter
| | 00:21 | then you create the
appropriate project for that chapter.
| | 00:24 | For example, if I'm working in an
Android project, you'd create an
| | 00:29 | Android project, and so on.
| | 00:31 | So I'll create a new Java project.
| | 00:33 | I'm just going to use the
default location in the workspace.
| | 00:37 | I'll name this project
"example." Then I'll hit Finish.
| | 00:42 | And now I'm going to expand the example project.
| | 00:45 | You'll notice there is a folder called
src that holds the class files that we
| | 00:49 | will be working with.
And now I'll tab over to Finder.
| | 00:54 | The exercise files contain
start and final versions.
| | 00:58 | If you just see a folder called com, that
folder belongs in the source area of your project.
| | 01:04 | So you can simply click and drag that
com folder right onto src, choose Link to
| | 01:11 | files and folders, and click OK. And
now I can expand src and I can see my
| | 01:17 | appropriate class path.
| | 01:19 | For other chapters you
won't just see a com folder.
| | 01:22 | I'll go back to Finder.
| | 01:24 | For example, in Chapter 5,
you'll see a whole batch of files.
| | 01:32 | In the event you see a lot of files,
including the src folder, you can simply
| | 01:37 | select all of those files--
| | 01:39 | I'm doing that now by Shift+Clicking the
bottom one and then the top one--and just
| | 01:44 | drag all of the files right onto the
main source folder for the project. And
| | 01:50 | that's not the src
folder, but the main project folder.
| | 01:54 | That's because we want to make sure that we
overwrite all of the files inside of our project.
| | 02:01 | In the event that you get a conflict
when you're trying to create a project, you
| | 02:05 | might have to go into your
workspace and manually delete the files.
| | 02:10 | You can see at the top of my screen that
Eclipse is telling me that my workspace
| | 02:15 | is in the Documents folder,
in a folder called workspace.
| | 02:19 | I'll go back to Finder,
into the workspace folder.
| | 02:23 | In here you can delete any folders as needed.
| | 02:27 | So if you need to create a second
project called android_gb, for example, you
| | 02:32 | can just delete that folder, and then
you can create that same project with the
| | 02:37 | same name without any problems.
| | Collapse this transcript |
| Getting the most out of this course| 00:00 | The structure of this course is
somewhat different than most of the courses in
| | 00:04 | the Online Training Library.
| | 00:06 | While this course doesn't follow
the creation of one project from start
| | 00:10 | to finish, it looks at one project from
many different perspectives and applications.
| | 00:17 | For that reason, I highly recommend
watching all of the videos in the course in order.
| | 00:23 | Now the reason for that is because
we basically create one app toward the
| | 00:28 | beginning of the course and then we
look at porting the app to the web, to the
| | 00:34 | desktop, and to Android
throughout the rest of the course.
| | 00:38 | Since we're porting the same
application, I don't cover the intricacies of the
| | 00:43 | app itself in detail, but rather, I
mostly cover the nuances of the different
| | 00:50 | publishing platforms.
| | 00:52 | So again, I highly recommend watching
all of the movies in this course in order,
| | 00:57 | rather than jumping around randomly.
| | 01:00 | That said, in the event that there are
some more so that you want to get for a
| | 01:04 | particular platform,
| | 01:06 | you can feel free to jump ahead, but
just know that you won't have all the
| | 01:10 | context necessary to
understand everything in the app.
| | 01:14 | So now that you've seen how this course
is structured, you're better prepared to
| | 01:19 | know which movies to watch
for your individual needs.
| | Collapse this transcript |
|
|
1. Exploring Development EnvironmentsChoosing a development environment| 00:00 | There are many different choices of
integrated development environments, or IDEs,
| | 00:05 | for developing in Java.
| | 00:07 | Let's look at some popular ones here,
and you can explore on your own and choose
| | 00:11 | which one best suits your needs.
| | 00:13 | Eclipse is probably the most
popular IDE for developing Java apps.
| | 00:18 | Part of that is because it's so customizable.
| | 00:21 | Not only you can use it to develop Java
apps, but you can use it to develop many
| | 00:26 | different types of apps.
| | 00:27 | If you scroll down, at eclipse.org/
downloads, you'll see that you can also use C
| | 00:33 | or C++, JavaScript, and other languages as well.
| | 00:38 | And if you're using Eclipse, chances
are, if you're missing a feature or a
| | 00:42 | language, there's a plug-in out there
somewhere that will add that feature to Eclipse.
| | 00:48 | Another one is NetBeans.
| | 00:50 | You can find NetBeans at netbeans.org.
| | 00:53 | I've used both Eclipse and NetBeans, and
one thing that I like about NetBeans is
| | 00:59 | that you can easily create a
user interface for your apps.
| | 01:03 | Basically you could just drag and drop
components onto the screen, and you can
| | 01:07 | organize them in a visual
way, and I really like that.
| | 01:12 | And finally there is an app called
IntelliJ that a lot of people like because it
| | 01:17 | looks nice and it works really well.
| | 01:21 | Also know that all of these
IDEs are cross-platform and free.
| | 01:26 | If you want to get in the realm of paid
applications, there are plenty out there
| | 01:30 | that can help you to develop with Java.
| | 01:32 | So you can pick one from this list or
choose an app on your own that best suits
| | 01:37 | your needs for developing Java applications.
| | Collapse this transcript |
| Setting up the development environment| 00:00 | The IDE I've chosen for this course is
the Eclipse IDE for Java Developers, which
| | 00:05 | you can find at eclipse.org/downloads.
| | 00:09 | So once you've downloaded that
file, you can install Eclipse.
| | 00:13 | I've already installed it to my
computer, and I'll launch it from the Dock.
| | 00:18 | Here I'm going to choose the default
workspace and click to use this as the
| | 00:22 | default and do not ask again. I'll click OK.
| | 00:28 | Now that we're in Eclipse,
let's create a new project.
| | 00:31 | So I go to File > New > Project.
| | 00:34 | Under Java, I'll choose Java Project. Click Next.
| | 00:38 | I'll call this TestProjct, I'll use the
default location, and then I'll just click Finish.
| | 00:46 | I'm going to choose to open the Java
Perspective, and I'm going to expand the
| | 00:51 | TestProject in the Navigator.
| | 00:53 | I'll right-click the src
folder and then choose New > Class.
| | 00:59 | We'll just use the default package,
and for the name we'll call this Test.
| | 01:05 | I'll choose public static void main for
method stubs to create. I'll click Finish.
| | 01:12 | Here I see the class opened in my view.
| | 01:15 | Now one thing that's important to note is that
my font is probably a larger size than yours.
| | 01:21 | You can adjust your font size by going
to Eclipse > Preferences. In the General
| | 01:25 | section expand the Appearance section,
the Colors and Fonts, under the Basic
| | 01:32 | option, scroll down to Text Font, and
you can bump up your font size here.
| | 01:37 | I've also edit Text Editor Block
Selection Font, close the window, click
| | 01:43 | Apply, then click OK.
| | 01:46 | And the last thing I want to do is
just make sure that Java is running,
| | 01:49 | so inside of my main method I'm
going to type System.out.println, short
| | 01:56 | for print line, and in the parentheses I'm
going to pass in the string "Hello World!"
| | 02:03 | We'll save and test this, and in the
console at the bottom of the screen we
| | 02:09 | should see Hello World!
| | 02:10 | and I see it there.
| | 02:11 | So we've successfully installed
Eclipse, adjusted font settings, and tested
| | 02:16 | an app in the console.
| | Collapse this transcript |
|
|
2. Building Dynamic Web ApplicationsPreparing Eclipse to build dynamic web pages| 00:00 | One of the uses for Java is that you
can communicate with a database to create
| | 00:05 | dynamic web pages much like
you would with PHP or ASP.
| | 00:10 | To do that, you're going to need a
testing server and some plug-ins in Eclipse.
| | 00:15 | The most common testing server for Java
Server Pages, or JSP, is called Tomcat.
| | 00:22 | You can download Tomcat at tomcat.apache.org.
| | 00:24 | I'm going to click to
download Tomcat 7.0, the zip version.
| | 00:32 | Once you have that folder, you can
drag it to somewhere on your hard drive.
| | 00:36 | I've chosen my
Applications folder on my computer.
| | 00:39 | Now let's go over to Eclipse.
| | 00:41 | Once you've downloaded the zip file,
make sure that it's unzipped, and you can
| | 00:46 | drag that folder into your Applications
folder or into your Program Files folder
| | 00:51 | or anywhere else on your
computer for that matter.
| | 00:54 | Now we're going to install the plug-ins
by going to Help > Install New Software.
| | 00:59 | In the Work with box, start to type
Indigo and click on it once you see it
| | 01:04 | appear in the menu.
| | 01:05 | It may take a few seconds for all the
plug-ins to load, so you might have to
| | 01:10 | wait while you see the word Pending,
but eventually if you have an Internet
| | 01:15 | connection, the plug-in should load in
there. And you can scroll down and select
| | 01:19 | any plug-ins that you'd like to install.
| | 01:22 | So I'll scroll down, check the box
that says Web, XML, Java EE, and OSGI
| | 01:29 | Enterprise Development.
| | 01:32 | Here I click Next, and you might see
some information that your request has been
| | 01:38 | modified because you already
have some of the plug-ins installed.
| | 01:41 | I'll just click Next, and then here you
can look at the user license agreement.
| | 01:46 | I'm going to click that I
accept these terms and click Finish,
| | 01:50 | and now the software will install, and
afterwards you will be asked to restart Eclipse.
| | 02:02 | So once the progress bar finishes,
you'll see an option to restart Eclipse.
| | 02:07 | So let's restart Eclipse, and then
I'll just close the Welcome screen, and in
| | 02:12 | here I'm going to create a new project.
| | 02:15 | So File > New, and this
is going to be under Other.
| | 02:20 | In the type of project, scroll down to the
Web section and choose Dynamic Web Project.
| | 02:26 | I'll click Next.
We'll call this TestJSP.
| | 02:32 | Now I'll click the Next button, Next
button again, and then I'll click Finish.
| | 02:39 | Now we need to associate our project with
Tomcat, so we need to associate it with a server.
| | 02:45 | If you click that Servers tab at
the bottom of the screen, you will see
| | 02:49 | Tomcat server version 7.0.
| | 02:52 | If you don't see that, you can Ctrl+Click
or right-click and choose New > Server,
| | 02:59 | and under Apache you'll see Tomcat version 7.0.
| | 03:02 | You go through the process, and then
we're going to move TestJSP over to
| | 03:10 | Configured by clicking it and
selecting Add. Then I'll click Finish, and then
| | 03:17 | I'll click a server and
then the Start Server button.
| | 03:21 | All right, so I have the server running,
and then I'm going to expand TestJSP,
| | 03:32 | expand the WebContent folder, and then
I'm going to right-click WebContent and
| | 03:37 | then choose New > JSP File.
| | 03:39 | I'll change the name of the file to
Test.jsp, click Next. From the Templates
| | 03:49 | I'll choose New JSP File
(html), and then I'll click Finish.
| | 03:54 | So this creates a JSP file
that's based on a template.
| | 03:57 | So you'll notice html code in here,
in the bottom, and then you'll notice
| | 04:01 | this tag that has a bracket and then a percent
sign and the closing tag has percent bracket.
| | 04:08 | Those are areas where we can put Java.
| | 04:11 | So in the body I am going to click and
type less than and a percent sign, and
| | 04:16 | inside of that tag I'm going to type
out.print. In parentheses I'm going to type
| | 04:25 | "Hello World!" Make sure to add a
semicolon after the closed parenthesis. And
| | 04:32 | if this runs correctly, the Java
should be processed and it should spit out
| | 04:38 | "Hello World!" in the body tag, so we
should see that in the published page.
| | 04:43 | So I'll go to File > Save, and
then I'll click the Run button.
| | 04:48 | I will choose the server that's
currently running, then click Finish, and
| | 04:55 | we're testing this in a simulated web browser
inside of Eclipse, and there we have Hello World!
| | 05:01 | So we have JSP file
successfully running in Eclipse.
| | 05:06 | So just remember, if you want to
execute Java inside of a web page, you'll
| | 05:11 | need to set up the plug-ins in Eclipse
and a testing server, which is normally
| | 05:16 | going to be Tomcat.
| | Collapse this transcript |
| Installing MySQL on the Mac| 00:00 | Our next step in getting our dynamic
web page to work with the database is to
| | 00:05 | install a testing database on our computer.
| | 00:08 | On the Mac you can find a
testing database server at mamp.info.
| | 00:15 | MAMP is a Mac Apache
MySQL, and PHP testing server.
| | 00:21 | The free version is sufficient for what
we're going to do in this course, so you
| | 00:25 | can click to download the one on the left.
| | 00:28 | Once you've downloaded and
installed MAMP, you can launch it.
| | 00:33 | You may be asked for a password,
which is the default setting, and once you
| | 00:37 | started it, you should see
two green lights on the left.
| | 00:41 | We're really mostly
concerned with the MySQL server.
| | 00:44 | Go to Preferences. Under Ports,
| | 00:49 | you can click to set to default
Apache and MySQL ports. Then click OK, and
| | 00:56 | you should still have green lights.
I'm going to have to enter my password to
| | 01:01 | confirm that change.
| | 01:02 | I should see two green
lights. Everything looks good.
| | 01:08 | And once you have MAMP set up, you
see that your MySQL server is running.
| | 01:13 | We are ready to start working with the database.
| | Collapse this transcript |
| Installing MySQL on Windows| 00:00 | In order to use Java to build a dynamic
web page, you'll need a testing server.
| | 00:05 | For Windows, the easiest way to set that up is
WampServer, which you can find at wampserver.com.
| | 00:12 | I'm now in the Downloads section, and I'm
going to click to download the 64-bit version.
| | 00:17 | When the window opens up, I can skip
filling out all my contact information and
| | 00:20 | just click "download it directly."
| | 00:23 | I'm taken to another link and
WampServer is then being downloaded.
| | 00:27 | I'm going to choose to run
the file when it's downloading.
| | 00:33 | Once it's done downloading, I'm going to
click Run, because I do trust this application.
| | 00:38 | I'm going to click Yes to make sure the
application runs, and then the WampServer
| | 00:45 | setup wizard starts.
| | 00:47 | I am going to click Next to start the wizard.
| | 00:49 | I'm going to accept the license
agreement, and of course make sure you
| | 00:52 | read through it before you click Yes.
I'm going to install the default location
| | 00:58 | at to c:\wamp. We're going to create
a desktop icon. I'll click Next and
| | 01:06 | then I'll click Install.
| | 01:12 | Now it's asking for my default web browser.
| | 01:14 | It's already on Internet Explorer, so I'm
just going to click Open. It asks
| | 01:17 | to install the new WampServer2 homepage.
| | 01:21 | I'll just click Yes. And for PHP,
we actually don't need any of this, so
| | 01:25 | I'm not going to change it.
| | 01:26 | I'll just click Next and then click Finish,
| | 01:29 | and I'll launch WampServer now.
| | 01:30 | Again, I'm going to click Yes to
confirm that I still want to run WampServer.
| | 01:35 | I'm going to minimize Internet Explorer
for the moment and at the bottom right
| | 01:40 | of my of my screen you can see the
little green icon that indicates that
| | 01:43 | WampServer is running.
| | 01:45 | It says it is offline currently,
| | 01:48 | so I'm going to click Put Online,
after I click on the WampServer icon. I'll
| | 01:56 | click the button again, and then I
can launch phpMyAdmin from there.
| | 02:01 | When this launches, you have actually
confirmed that you're testing server
| | 02:06 | is running properly.
| | 02:07 | Now if you'd like to set a password,
you can click on Privileges--that's at the
| | 02:13 | top--and where that says root localhost,
click Edit Privileges, and here I'm
| | 02:22 | actually going to scroll
down and change the password.
| | 02:25 | Now in the Password field you'll
notice that it's blank, so it's blank as the
| | 02:30 | default, but I recommend
typing in a password here.
| | 02:33 | I'm going to type in a simple four-
character password, but if you'd like to be
| | 02:37 | more secure, you can click the
Generate button to generate a better password.
| | 02:43 | Remember that when you create the
password you should write it down or have it
| | 02:47 | somewhere so you can access
it again if you ever need it.
| | 02:50 | Now of course you will need it when
we'll log in to the MySQL database later on.
| | 02:55 | Now throughout this course we're
going to use a server port for MySQL and
| | 03:02 | Apache, so you might have to
know that. For phpMyAdmin
| | 03:06 | you can just note the URL right now,
so mine is just localhost/phpmyadmin.
| | 03:12 | If you need to change the port or
you're having a problem, if you click on Wamp
| | 03:16 | icon, go to the Apache folder to open up
httpd.conf, you can actually use the Find
| | 03:25 | command, So Ctrl+F, and then we'll
find 80, which is the default port for
| | 03:32 | Apache, and you want to find
after it says localhost and a colon.
| | 03:37 | So if you change that number from 80 to
something else then you can change the
| | 03:41 | default port number for Apache.
| | 03:44 | So again, it's very unlikely that
you'll have to change this, but this is just
| | 03:48 | so you know, if you have to.
| | 03:50 | Finally, we'll look at
the port number for MySQL.
| | 03:53 | If I click on that
WampServer icon again, I go to MySQL.
| | 03:58 | I can open up my.ini, and then
right in here it says port equals 3306.
| | 04:05 | Now of course that's the default port
and you shouldn't need to change it, but
| | 04:09 | in the event that you do, here is
where you can change that value. Just make
| | 04:13 | sure you change it in a plain
text editor and then save the file.
| | 04:17 | So once you have your WampServer up and
running, you're ready to start building
| | 04:21 | dynamic applications using Java.
| | Collapse this transcript |
| Importing data into a MySQL database| 00:00 | With your MySQL server running,
browse to the address on your screen.
| | 00:05 | If you happen to browse to
localhost/phpmyadmin and don't see what I have all
| | 00:11 | on my screen, after localhost and
before the forward slash, type a colon
| | 00:16 | and then type the number of the
port that you entered in your settings.
| | 00:20 | You may also be asked for login
information before you go to phpMyAdmin. The
| | 00:25 | default login info is "root" for
the user and for the password.
| | 00:32 | You can of course change that
later and I recommend doing that,
| | 00:36 | but for now, root and root is sufficient.
| | 00:39 | So the first thing we will do is
create a new database and in the Create new
| | 00:43 | database field type tours, t-o-u-r-s,
all lowercase, and then click Create.
| | 00:50 | Make sure you have the tours database
selected. On the left side of the screen
| | 00:56 | you could see that. And then click Import.
| | 01:00 | For those of you who don't have access
to the exercise files, we are going to
| | 01:03 | provide this exercise file for free
because it will save a lot of time in
| | 01:09 | just downloading it.
| | 01:10 | So you should have an SQL version of that file.
| | 01:14 | So once you unzip it, it will be an
SQL file, which is a plain-text export of
| | 01:19 | the database we're using.
| | 01:20 | So click Choose File, and you can browse
in the chapter 02 folder, if you have the
| | 01:26 | exercise files, in the importing data
folder. You will see tours.sql there. Click
| | 01:32 | Choose, choose SQL for the Format of
the Imported file, and then click Go.
| | 01:38 | At the top of the screen you should
see a green check box and "Import has been
| | 01:43 | successfully finished."
| | 01:46 | If you click on tours on the left side
of the screen, you will see there is one
| | 01:49 | table in the database called tour.
| | 01:51 | If I click on tour on the left, you
will see all the different fields, and you
| | 01:57 | can click Browse to see the
actual data in the database.
| | 02:01 | If creating databases is new to you
and you'd like to learn more information,
| | 02:05 | you can find that in the
Online Training Library.
| | Collapse this transcript |
| Using MySQL database drivers| 00:00 | The last step before we connect our
code in our JSP file to our MySQL database
| | 00:06 | is to download and install the database driver.
| | 00:10 | You can find it at
mysql.com/downloads/connector/j/
| | 00:18 | Here I will click to download the zip file.
| | 00:21 | I can click No thanks to take me to
the download and then choose a mirror.
| | 00:26 | I have already downloaded the files, so
I am going to tab over to Eclipse, and
| | 00:33 | in Eclipse I'm going to create a new project.
| | 00:36 | Now you need do this whether or not
you have access to the exercise files, so
| | 00:40 | create a new dynamic web project.
| | 00:42 | I will call this using_
drivers, and click Finish.
| | 00:52 | Now if you already have access to the
exercise files, then what you can do is
| | 00:59 | just grab the folders and drag them
into Eclipse, and so I'm going to grab
| | 01:05 | WebContent, the source folder, and the build folder.
| | 01:11 | Click and drag those three folders
right on top of using_drivers, and you
| | 01:16 | will be asked if you want to link the files.
I'm going to choose Link and then click OK.
| | 01:23 | And then I am asked if I want to
overwrite the files, so I click Yes to All.
| | 01:27 | So that's how you're going to be
importing the existing projects if you're
| | 01:31 | working with the existing exercise files.
| | 01:34 | For those of you who don't have access
to the exercise files, just expand the
| | 01:38 | WebContent folder and right-click it,
create a new jsp file called data.jsp, and
| | 01:44 | just empty out all the code in it.
| | 01:46 | So I just have a blank file here.
| | 01:49 | And now what I'm going to do is in my
project is expand the WEB-INF folder, and
| | 01:57 | for the lib folder, you are
going to go over to Finder,
| | 02:01 | I'm going to go in my Downloads folder
and find that mysql download that I have.
| | 02:06 | In there, there is .jar file.
| | 02:09 | And this is the file that contains all
of the classes that we need to work with.
| | 02:12 | So I'm going to click and drag that
file right onto my lib folder and then make
| | 02:18 | sure to copy the file
into my project and click OK.
| | 02:21 | Once you have done this, then you have
the database drivers installed and you're
| | 02:26 | ready to start writing code in your
JSP file to connect to a database.
| | Collapse this transcript |
| Connecting to a database| 00:00 | Now we'll write the code
to connect to our database,
| | 00:04 | so make sure first that your database
server is running and that Tomcat is
| | 00:08 | running inside of Eclipse and that you
have installed the appropriate MySQL driver.
| | 00:14 | So I'm in data.jsp. I am going to
double-click the tab so that I can get a full
| | 00:19 | view of just my code.
| | 00:21 | You can always double-click it
again to go back to the standard view.
| | 00:25 | The first thing we are going to do
is write some import statements.
| | 00:27 | So open bracket, a percent sign and
that symbol, we will close that out with a
| | 00:35 | percent sign and a greater than sign.
| | 00:39 | And inside of this tag I'm going to
type page, space, import, an equal, and in
| | 00:46 | quotes I am going to type in
the classes that I want to import,
| | 00:49 | so java.sql.*. And then I'm going to
copy and paste this code right after itself
| | 01:00 | to eliminate whitespace.
| | 01:02 | So I'll paste that using the keyboard
shortcut Command+C or Ctrl+C to copy and
| | 01:08 | Command+V or Ctrl+V to paste.
| | 01:11 | And I'm going to change the import
code from java.sql.* to java.io.*.
| | 01:18 | And I will repeat the process and paste
the code again and change the import to
| | 01:26 | com.mysql.* and then finally after
that, still on the same line, I am going to
| | 01:35 | write a declaration that
this is an XML document.
| | 01:37 | So open bracket, question mark, xml,
space, version= and in quotes, the version
| | 01:48 | is going to be 1.0, and then we will close it
out with question mark and a greater than sign.
| | 01:54 | So what we have done so far is just
declare the classes that we want to import
| | 01:59 | and use in Java and then outside of our Java
code we have declared that this is an XML file.
| | 02:04 | So let's go to the next line, and we
are going to create the tours tag.
| | 02:10 | So <tours>, and on the next line we will
close that out with /tours tag.
| | 02:19 | So we have an opening
closing tag called to tours.
| | 02:24 | And on the next line, inside of our tours
tag, I'm going to write some Java code.
| | 02:28 | So I will need to type a less than sign
and a percent sign and Eclipse will
| | 02:33 | autocreate the closing tag for me.
| | 02:38 | And in here I'm going to initialize
some variables that we will be using.
| | 02:41 | So connection is the data type, and we
will call this connection lowercase.
| | 02:46 | We will just initialize it to null.
| | 02:49 | We will do the same thing for a
Statement. Statement is the class, statement
| | 02:56 | lowercase is the name of the variable,
set it equal to null, and the same thing
| | 03:02 | for ResultSet. Capital R and
capital S for the class name.
| | 03:06 | And then result for the name, and
again, we will initialize to null here.
| | 03:11 | Now let's go down a few lines, and we need to
connect to the database in a try catch block.
| | 03:18 | So try and then some brackets
and below the brackets, catch.
| | 03:25 | The error is going to be of type SQLException.
| | 03:32 | We will name it e. I will put the
brackets there, and we will just type
| | 03:36 | out .println and in the
parentheses, pass in the string, "error
| | 03:44 | connecting to database."
| | 03:48 | No return to the try block. In there,
we are going to create a new instance of
| | 03:52 | the driver class by typing Class,
capital C, .forName, and the name will pass in
| | 04:00 | as a string so quotes and then pass in
com.mysql.jdbc.Driver, with a capital D.
| | 04:12 | And then after the close parenthesis
type a dot and then newInstance.
| | 04:19 | On the next line we will set
the value of our connection.
| | 04:22 | So connection all lowercase. We will set
that equal to DriverManager, capital D,
| | 04:31 | capital M, .getConnection, and then we pass
in three parameters that are all strings.
| | 04:40 | First the database url, then the username for
the database and the password for the database.
| | 04:48 | So in quotes url is going to be
jdbc:mysql://localhost:3306. Remember that's the
| | 05:02 | port for your MySQL server.
| | 05:05 | And if you change it to something else in your
settings, make sure you put that number here.
| | 05:09 | And then /tours. That's
the name of our database.
| | 05:14 | After that string, type a comma. The next
string is the username of our database.
| | 05:19 | I kept mine at the default, which is root.
| | 05:22 | And finally, the third parameter is
also a string that's the password for the
| | 05:25 | database, and I kept mine at the
default as well, which is root.
| | 05:30 | Make sure to add a semicolon
after the end of the statement.
| | 05:34 | And then here I am just going to type
out.println, and in parentheses I will pass
| | 05:39 | in the string "connected to database."
| | 05:44 | So this is going to
happen if there's no problem.
| | 05:48 | So when we test this we should see
either "connected to database" or "error
| | 05:52 | connecting to database."
| | 05:53 | So let's save the file and then test
this using Tomcat. I am going to click OK
| | 06:01 | to restart the server.
| | 06:05 | And then in Eclipse's built-in
browser I should see a message that says
| | 06:11 | "connected to database."
| | 06:13 | So that successfully connected to the database.
| | 06:16 | If you have any problems with this,
make sure that you're running both your
| | 06:19 | MySQL server and Tomcat, and then
check to see that the jar file is in the
| | 06:25 | correct location so that
you can load in the drivers.
| | 06:30 | Finally, of course, make sure to check
all of your code against mine, including
| | 06:38 | the port number for your MySQL server.
| | Collapse this transcript |
| Displaying data from a database as XML| 00:00 | Now that we have established our
database connection, let's look at printing out
| | 00:05 | the database data as XML.
| | 00:07 | That way we can use this data in a
later application to simulate exporting
| | 00:13 | data from a real web server's database and
bring it in from the web into a desktop app.
| | 00:22 | So for now I'm going to delete the
out.println line of code in the try block,
| | 00:27 | and here I'm going to create a statement.
| | 00:29 | So set the value of statement
to connection.createStatement.
| | 00:36 | Make sure to add the parentheses and a semicolon.
| | 00:39 | Now on the next line we will create a
string called s, short for statement,
| | 00:44 | that will be the string version of our query.
| | 00:47 | So in quotes, we will set it equal to
Select with a capital S, space, asterisk, from, space, tour.
| | 00:57 | Remember, tour is the name
of the table in our database.
| | 01:05 | So then we will loop through the records.
| | 01:07 | The first thing to do is execute the query.
| | 01:09 | So to do that, set the result equal
to statement.executeQuery, passing in the
| | 01:17 | string called s. Then we will loop
through the results in a while statement.
| | 01:23 | So while and in parentheses,
result.next--so this will run as long as there
| | 01:31 | is another result--and some brackets, and
we are going to create the tour XML element.
| | 01:40 | So here I'm going to close out the
Java code by closing out that tag with a
| | 01:45 | percent and a greater than sign.
| | 01:46 | I will go down a few lines and I'll open
it back up again, and then within that,
| | 01:54 | I'm going to create the tour element.
| | 01:56 | So tour first opening tag and then
another line down, the closing tag.
| | 02:02 | So for every record in the database, we
are going to create this tour element,
| | 02:08 | and inside of that element we are going to
create subelements, one for each row in the table.
| | 02:14 | So go between the opening and closing
tag of tour, and tab in, and we will
| | 02:19 | create an element called tourId,
capital I. So I will create it.
| | 02:25 | I will close it out right here.
| | 02:29 | In here we are going to use Java and
MySQL to grab the tourId from the database.
| | 02:36 | So create a opening and closing Java
block, so less than sign and percent and
| | 02:44 | then percent greater than sign, and in
here we are going to use out.print and in
| | 02:50 | the parentheses, add the
parentheses and a semicolon, and inside the
| | 02:55 | parentheses, type result.getString, and
we simply name the column label, which
| | 03:04 | is going to match the name of the XML
element, which in this case is tourID.
| | 03:09 | This one has both a capital I and a capital D.
| | 03:14 | So this tourIDs are integers, and if
we save and test this in a browser, we
| | 03:19 | should see some integers
printed out to the screen.
| | 03:21 | So File > Save, and then I'll test this app.
| | 03:25 | I am restarting the server here, and
in the web browser I should see all the
| | 03:40 | different IDs for the different tours.
| | 03:43 | So that's telling me that we are
successfully grabbing data from the database.
| | 03:46 | So that's wonderful.
| | 03:47 | I will close that and return to data.jsp.
| | 03:52 | And now what I am going to do is simply
copy this line of code for all the other
| | 03:56 | elements that we want to put in our XML.
| | 03:59 | So select that line and then paste
it, 1, 2, 3, 4, 5, 6, 7, 8, 9 times.
| | 04:12 | Now what we are going to do is just
change each of the XML elements and have
| | 04:16 | them match the value that
we have in result.getString.
| | 04:20 | So right below tourID, the first one,
I'm going to go to the second element
| | 04:25 | and call this tourTitle, and I'm just
going to paste that in the string and in
| | 04:33 | the closing element.
| | 04:34 | So tourTitle and then the next one is
packageId. And once you have written them,
| | 04:43 | you will see that we have tourId,
tourTitle, packageId, packageTitle,
| | 04:47 | description, price,
difficulty, length, image, and link.
| | 04:51 | This is all pulling the data
directly from the database.
| | 04:55 | So now let's save and test the file again.
| | 04:57 | So now we see all of this
data spewed out in one big page.
| | 05:06 | If you want to see what it looks like
as actual XML data, you can actually copy
| | 05:10 | and paste this into a web browser
and then click to view the source.
| | 05:17 | So View > View Source and
then here is all the XML data.
| | 05:22 | So now this data is
usable in another application.
| | 05:26 | So in this chapter we have
successfully established a connection between a
| | 05:30 | dynamic web page and a MySQL server,
and we've printed out data from the
| | 05:35 | database as XML that we can
use in another application.
| | Collapse this transcript |
|
|
3. Creating a Desktop AppLoading XML data from the web| 00:00 | In this chapter we're going to look at
how to use XML data from a URL to run a
| | 00:06 | desktop application.
| | 00:08 | The XML data we're going to use is the same
data that we created in the previous chapter,
| | 00:13 | so for this you're going to need
two projects in your Projects Explorer.
| | 00:17 | First, the final version of the app
created in the last chapter and here
| | 00:23 | you'll see data.jsp.
| | 00:26 | Note that the project name is jsp_final.
| | 00:29 | And if you test this with the built-in
Eclipse web browser, you'll see a URL in
| | 00:34 | the Web Browser area.
| | 00:36 | You can copy that URL now because
we're going to use it in just a second.
| | 00:39 | So I'm going to close those two files.
And the main files we're going to be
| | 00:43 | working with for this are in the loading
_xml project, and I put them inside the
| | 00:48 | com.toddperkins.uar package.
| | 00:52 | So I'm going to double-click the tab
for AppMain.java to expand the area.
| | 00:57 | AppMain is the main class.
| | 00:59 | Here I create a new instance of
the View class and run some methods.
| | 01:03 | Explain the
DefaultCloseOperation, which is a method of JFrame.
| | 01:08 | We'll look at that in just a minute.
| | 01:09 | Set the size of the window
and set it to be visible.
| | 01:13 | So the View is the main
visible class for our project.
| | 01:17 | Let's go over to View.java.
| | 01:19 | So here I've declared that's part of the
com.toddperkins.uar package, and then I
| | 01:25 | have a list of import statements.
| | 01:27 | The class extends JFrame, which is
part of the Swing framework, and it
| | 01:33 | implements ActionListener.
| | 01:35 | Keep in mind that we'll be talking more about
the Swing framework later on in this chapter.
| | 01:40 | Here I have some initialized properties,
ArrayList to hold values from the XML,
| | 01:46 | and some various Swing-framework
objects that I'm mostly creating here.
| | 01:51 | And later on we'll look at how
to actually use them in an app.
| | 01:56 | In the constructor, I call super and
pass in Backpack CA, which sets the title
| | 02:02 | area for the window that we're looking at.
| | 02:05 | And I call setLayout to a new FlowLayout.
| | 02:09 | What that does is it sets the class to
present added visual elements vertically.
| | 02:15 | Then I run the custom method loadData,
passing in the URL copied from the
| | 02:20 | Eclipse web browser when
I looked at that XML data.
| | 02:25 | Then I have public void actionPerformed.
| | 02:27 | This is so that we can fulfill
the requirements of ActionListener.
| | 02:32 | And I have loadData, and I have a
utility method called getTagValue that returns
| | 02:39 | the value inside an XML tag.
| | 02:42 | Let's return to loadData.
| | 02:44 | I actually have this code already
written, because if you watched the Java
| | 02:49 | Essential Training, then you've
already experienced loading data from a URL.
| | 02:53 | So here we're just going to review.
| | 02:55 | Note that we're loading a
document in a try catch block.
| | 02:59 | So we create a new
DocumentBuilderFactory, then a new DocumentBuilder.
| | 03:04 | Then we have the DocumentBuilder parse
the URL and save it in that document object.
| | 03:10 | Then we normalize it to condense the XML data.
| | 03:13 | Then I have a NodeList called nodes,
and that grabs all the elements by tag
| | 03:18 | name, which is tour.
| | 03:19 | And then I could simply loop through
all the tags using the iterator called i.
| | 03:25 | So I have a node that we set as
nodes.item index i, and we check to see if the
| | 03:33 | NodeType is an ELEMENT_NODE.
| | 03:35 | And if so, I grab the element as an
element, so I'm typecasting it here, and
| | 03:41 | then I put these elements
inside of the ArrayList.
| | 03:46 | So titles.add, descriptions.add,
et cetera, we pass in getTagValue.
| | 03:51 | That's our custom method that returns
the value of a tag, so we pass in a
| | 03:55 | string which is the name of
the tag and then the element.
| | 04:00 | In the case of the link, I made sure
to remove any extra whitespace, because
| | 04:05 | links won't work if there's extra whitespace.
| | 04:07 | So I'm using a regular expression
here to grab all the space characters and
| | 04:13 | replace all of them with nothing.
| | 04:15 | And that's only for links.
| | 04:17 | Now if you want to log this to the
console, just to make sure that we're able to
| | 04:22 | read the XML data okay, you can type
System.out--don't forget to capitalize the
| | 04:28 | S--.println and in the
parentheses we'll pass in getTagValue.
| | 04:38 | And in the parentheses for
getTagValue, we'll pass in first the string
| | 04:41 | tourTitle, capital T for Title, and
then a comma, and then e for the element.
| | 04:48 | So let's save and test this, and we
should see all the tour titles in the console.
| | 04:54 | So test the app, and we now
have a blank view for the app.
| | 04:59 | There's the window with Backpack CA at the top.
| | 05:02 | I'll close that and if I look in the
console, I can see all of the names
| | 05:07 | on different lines.
| | 05:08 | So I've successfully extracted the XML
data. We're using it as XML, and the data
| | 05:14 | is coming from a URL.
| | 05:16 | And the last thing I'm going to do is
just delete that line of code at the
| | 05:20 | bottom, the System.out.println.
| | 05:23 | We've seen that we can actually read
XML data from a URL, and we'll look at,
| | 05:30 | throughout this chapter, how to use
that data in a desktop application.
| | Collapse this transcript |
| Creating a UI with the Swing framework| 00:00 | Using the Swing framework, you can create
a visual interface for your applications.
| | 00:06 | In the Swing framework, elements start
with a capital J. So we have JComboBbox,
| | 00:11 | JTextArea, JLabel, JScrollPane.
| | 00:15 | So the first thing we are going to do
is create something called a JPanel.
| | 00:19 | So the data type is going to be JPanel--
this is at the bottom of the constructor,
| | 00:24 | right below load data--and
we will call this panel.
| | 00:27 | And a panel is basically a grouped visual area.
| | 00:31 | We will set that equal to new JPanel.
Then we'll set the layout of the panel, so
| | 00:38 | panel.setLayout, and the layout
is going to be a newBoxLayout.
| | 00:47 | Now a box layout enables you to
align things horizontally or vertically.
| | 00:53 | So we can do that within each unique panel.
| | 00:56 | So in the parentheses after new
BoxLayout, you need to pass in two parameters.
| | 01:02 | The first one is the element that the
box layout is being applied to, so panel
| | 01:08 | and then a comma, and then we pass
in the alignment, which is going to be
| | 01:12 | BoxLayout, capital B, capital L,
.PAGE_AXIS, all caps.
| | 01:18 | So that's going to be vertical.
| | 01:21 | There is also line axis, which goes
along with the flow of a line on a page,
| | 01:26 | which is a horizontal layout.
| | 01:27 | Go down to the next line. And then what we
want to do is we want to display the panel,
| | 01:33 | so we actually need to use the
Add method to add it to the screen.
| | 01:37 | So type add, and that's a method of
JFrame, which this class is extending,
| | 01:43 | as you could see here.
| | 01:44 | So we are putting the panel on the screen.
| | 01:46 | We just is pass in panel into the parentheses.
| | 01:49 | The next line we will
create a panel for the labels.
| | 01:53 | And the way it's going to work is it
will have the combo box and then the text
| | 01:56 | area going vertically, and then
below that is going to be a horizontally
| | 02:02 | aligned set of labels.
| | 02:04 | So let's create a panel for the labels
so that we can align them horizontally.
| | 02:09 | So JPanel and we will call this
labelPanel and set it equal to new JPanel.
| | 02:17 | Now I'll need to set the layout, so
labelPanel.setLayout. It's going to be a new
| | 02:25 | BoxLayout as well. And in the
constructor for BoxLayout we will pass in
| | 02:31 | labelPanel and then BoxLayout.LINE_AXIS.
| | 02:37 | So remember, that's going to be horizontal.
| | 02:39 | Then we are going to add the price label
and the length label to the label panel,
| | 02:44 | so labelPanel.add. And we will first
pass in the priceLabel and then on the next
| | 02:51 | line, instead of directly adding in the
lengthLabel, we are going to put in some space.
| | 02:57 | So labelPanel.add and then in the
parenthesis we are going to create space by
| | 03:06 | creating something called a dimension.
| | 03:08 | To do that, type in Box with a capital B
.createRigidArea, and then we pass in a dimension.
| | 03:16 | So create a new dimension, and
this is going to be a horizontal and
| | 03:21 | vertical dimension.
| | 03:22 | So we are specifying the size
of space in between the object.
| | 03:25 | So the Dimension constructor is going
to take two parameters: first the width
| | 03:31 | and then the height. So we
will pass in 15 and then 0.
| | 03:35 | So you have 15 pixels in between the labels.
And then we'll add in the length label.
| | 03:41 | So labelPanel.add and then in the
parentheses we will pass in lengthLabel.
| | 03:46 | Then we are going to add one more
set of space, and this is going to be to
| | 03:54 | separate the length label from the button.
| | 03:59 | And so we will copy and paste the code
to create some space between the length
| | 04:03 | label and the button that we
are going to add in just a second.
| | 04:06 | We will set a default text for the
price label, so priceLabel.setText, and pass
| | 04:14 | in the string Price: $ and then 0.
| | 04:20 | Now in the next line we will set
default text for the length label, so
| | 04:23 | lengthLabel.setText, and then pass in
the string Length: and then 5 miles.
| | 04:31 | On the next line we are going to set
the value of our combo box, and we will
| | 04:36 | automatically populate it with the data from
our XML. And we look at how to do that right now.
| | 04:41 | So combo equals new JComboBox and in
the parentheses we are going to pass in
| | 04:47 | an array of items. And to get the
array, we will type titles, which is an
| | 04:52 | array list, .toArray.
| | 04:55 | That will automatically populate the combo
box with all of the elements from our XML data.
| | 05:01 | And then panel.add(combo), on the next
line panel.add, and here we are going to
| | 05:10 | create some vertical space, so
Box.createRigidArea, pass in a new Dimension. And
| | 05:19 | the dimension is going to be 0
for the width and 15 for the height.
| | 05:23 | Remember that the panel is aligning
items vertically along the page access, not
| | 05:29 | to be confused with the label panel,
which is using the line or horizontal axis.
| | 05:35 | Onto the next line. textScroller equals
new JScrollPane, so the scrollable area
| | 05:44 | and in the parentheses of the
constructor we will pass in textArea and then a
| | 05:49 | comma, ScrollPane, capital S, capital P,
Constants.VERTICAL_SCROLLBAR_AS_NEEDED,
| | 05:58 | all caps, separated by underscores,
and then a comma. We will pass in a value
| | 06:04 | for the horizontal scrollbars, so,
| | 06:06 | ScrollPaneConstants.HORIZONTAL_
SCROLLBAR_NEVER and to the next line,
| | 06:13 | textArea.setLineWrap passing
true. Next line, textArea.setRows.
| | 06:24 | That's going to be an integer, and the
number of rows we want to display is 10.
| | 06:30 | This essentially controls the
vertical size of the textArea.
| | 06:33 | textArea.setWrapStyleWord and pass is
true, so this does word wrap instead of a
| | 06:43 | letter wrap, and we will add the text
scroll to the panel, so panel.add, and in
| | 06:48 | the parentheses pass in textScroller.
| | 06:53 | Onto the next line. panel.add, and we
will put in some more space, and so we will
| | 07:00 | type box.createRigidArea. We will pass
in a new Dimension, and that will be 0 for
| | 07:08 | the width and another 15 for the height.
| | 07:10 | Make sure to add a semicolon
to close out that statement.
| | 07:13 | And then we are going to add the
label panel to the main panel, so
| | 07:17 | panel.add, pass in labelPanel.
| | 07:20 | Then finally, we will create the
button and put it inside of the label panel.
| | 07:27 | So JButton, capital B, will be the data
type, call this btn, set it equal to a new
| | 07:33 | JButton, and in the constructor we will
pass in the string "Book Now." This is
| | 07:39 | the string that's going to be on
the button. And on the next line,
| | 07:44 | labelPanel.add, and then will pass in
the button. And finally for the last line
| | 07:51 | we will set an initial item
selected in the combo box.
| | 07:54 | So combo.setSelectedIndex, pass in 0,
semicolon to add that statement. And after
| | 08:04 | we have typed this massive block of code,
let's save and test and we should see
| | 08:09 | the visual elements in the window.
| | 08:11 | Going to test this as a Java
Application, click OK, and there is my window.
| | 08:17 | It's the appropriate size.
| | 08:19 | I have the combo box with all of the
data populated from the XML, some space,
| | 08:25 | and then I have a text area that's 10
lines high, and then I have the default
| | 08:30 | text labels that are organized with
the button horizontally, and there's space
| | 08:35 | between them and the text area.
| | 08:37 | So I will close out that.
| | 08:38 | So we have successfully used the Swing
framework to create a layout for our app.
| | 08:44 | Remember that when you're using the
Swing framework use the add method to place
| | 08:48 | an object on the screen and use
an array to populate a ComboBox.
| | Collapse this transcript |
| Displaying data based on user input| 00:00 | With our XML loaded and our user
interface set up, we will connect our combo box
| | 00:06 | to our text field so that when you
change a value in the combo box the text
| | 00:10 | filed will update with
the appropriate description.
| | 00:13 | Scroll down in your code, right
below where we create the new combo box.
| | 00:17 | So combo equals new JComboBox.
| | 00:20 | On the next line we are going to add
something called an ActionListener.
| | 00:24 | This listens for an action, which is, for
example, when a user changes a combo box.
| | 00:30 | So type combo.addActionListener, and
then the value that you pass in needs to
| | 00:35 | be an ActionListener.
| | 00:37 | Remember that this class implements
ActionListener so I can actually pass in this.
| | 00:43 | So make sure to add a semicolon to
close out the statement, and just scroll
| | 00:47 | down and find the actionPerformed method.
| | 00:51 | So when the combo box has changed, this
method receives an ActionEvent, which is
| | 00:56 | held in the parameter e, which we can
use to access information about the event.
| | 01:01 | Keep in mind that this same handler can
be used for all different types of events,
| | 01:07 | so it's kind of a generic event handler.
| | 01:10 | So inside of this method, the first
thing we are going to do is capture the
| | 01:14 | selected index of the combo box.
| | 01:17 | So create an int called i, and we will
set it equal to combo.getSelectedIndex and
| | 01:25 | that will return the
selected index, which is zero based.
| | 01:29 | So go down a few lines and all we are
going to do is just set the value of the
| | 01:35 | text fields. So the first one is text
area, which is the main big text area, so
| | 01:39 | type textArea, capital A, .setText.
| | 01:43 | Here we just need to pass in a string
of the text, and we can get that string
| | 01:48 | from our descriptions ArrayList.
| | 01:51 | So if your Array List is declared as
having only a certain datatype, for
| | 01:55 | example, string here, we don't
have to typecast it to a string.
| | 02:00 | So in setText, we'll type
descriptions.get and we pass in i. So we get item i
| | 02:09 | from descriptions array list and that's it.
| | 02:12 | Let's just save and test at this point
to make sure that that's working, and
| | 02:16 | then we will move forward and
update the length and price labels.
| | 02:21 | And so now we will save the file and
actually before I can test it, I am going to
| | 02:24 | need to open the main class file, so I
am going to double-click the View tab and
| | 02:30 | open up AppMain and then with AppMain
selected, I will click to run the app.
| | 02:34 | Again make sure that your servers are
running. And so now I see the combo box
| | 02:39 | and the appropriate text in the text field.
| | 02:42 | And every time I change the value in the
combo box, I should see the text update.
| | 02:45 | You will notice one thing, that the
scrollbar doesn't scroll back up to the top,
| | 02:49 | so we will look at how to
fix that in just a second.
| | 02:50 | But everything else seems
to be working just fine.
| | 02:53 | So we just need to update the price and
length labels and fix that scrollbar issue.
| | 02:58 | So I will quit the app and return to view.java.
| | 03:01 | What I'm going to do is just copy this
line twice, so the text area lines, copy,
| | 03:07 | Command+C or Ctrl+C and then go to the
next line and paste with Command+C or Ctrl+V.
| | 03:11 | And then I will change text area in the
first paste code to priceLabel, capital L,
| | 03:17 | and then the text area in the
second block of code to lengthLabel.
| | 03:22 | And then for the price label we will
change descriptions to prices, and then
| | 03:28 | before that we are going to put a
string and then concatenate with the plus sign.
| | 03:34 | So inside of that string, type Price,
colon and then a space and a dollar sign,
| | 03:39 | I will do the same thing for length.
| | 03:42 | So change descriptions to lengths
and then the string before that,
| | 03:48 | make sure to add the plus sign to
concatenate, and then in the string Length,
| | 03:53 | colon, space, and then I'm going to add
miles after we grab the value from the XML.
| | 03:59 | So concatenate another string on the
end of that, so plus and then some quotes,
| | 04:04 | and inside of the quotes, miles.
| | 04:06 | So you should be able to save and test
this again if you'd like and just see the
| | 04:10 | price and the length label update.
| | 04:12 | Before I test it, I am just going to
fix that issue with the scrollbar where it
| | 04:16 | doesn't move all the way to the top every time.
| | 04:18 | Now you can actually just set the
scrollbar's position with one line of code;
| | 04:23 | however, it won't work because you
need to execute the code after the Swing
| | 04:28 | framework has handled the
user interface updating thread.
| | 04:32 | So to do that, we are going to type javax.swing.
| | 04:38 | capital S for SwingUtilities.invokeLater.
And in the parentheses we are going to
| | 04:46 | create a new object here, so new, space,
Runnable and then after that last close
| | 04:53 | parentheses I am going to add a
semicolon and before the last close parenthesis
| | 04:57 | I'm going to down a few lines.
| | 04:59 | We are actually going to define the Run method
inside of this method call for invokeLater.
| | 05:05 | So I am defining this class right here.
| | 05:10 | The open bracket right after the
parentheses for new Runnable and the close
| | 05:15 | bracket right before the
close parenthesis of invokeLater.
| | 05:21 | Inside here I need to define the run
method, so public void run, and parentheses
| | 05:27 | and some brackets and inside the run
method, I can then update the scrollbar.
| | 05:33 | So textScroller.getVerticalScrollBar.
setValue, then pass in 0. Make sure to close
| | 05:43 | out the statement with a semicolon.
| | 05:45 | And what we are doing here is we are
setting the position of the scrollbar to 0,
| | 05:48 | which makes it go all the way to the top.
| | 05:50 | We're doing it this way because we have
to run it after the thread is completed
| | 05:56 | that updates user interface, or
else the update will not show.
| | 06:00 | So save and then go to at
AppMain.java and test this, and you should see
| | 06:06 | that everything works.
| | 06:07 | So I see the price and the length are updated.
| | 06:10 | I can change that, and every time I
change the combo box everything is updated.
| | 06:18 | I could scroll down and scroll up and
look at the text in the combo box. And the
| | 06:22 | only thing that we could improve upon
here is put a space between the number of
| | 06:27 | the length and the word miles.
| | 06:29 | So let's just quit our app, return to
our code, and put a space right before
| | 06:34 | miles in that string, save, and then
we will test again, and we should see
| | 06:39 | now, there is a space between miles,
the combo box updates the text field, the
| | 06:44 | price and length labels.
| | 06:46 | You could update by changing the combo
box and you will see that the scrollbar
| | 06:50 | is moved all the way back to the top.
| | 06:52 | So remember, you can handle events
using the add ActionListener method so we
| | 06:57 | apply that to the combo box.
| | 06:59 | You handle it in a class that
implements ActionListener in a method
| | 07:03 | called actionPerformed.
| | 07:06 | In the actionPerformed method, you
could handle the event and get specific data
| | 07:10 | about the event through the ActionEvent object.
| | 07:13 | If you want to update a scrollbar in a
Swing element's text field, then you need
| | 07:18 | to make sure that you use invoke later
so there won't be any conflicts when you
| | 07:22 | update the scrollbar.
| | Collapse this transcript |
| Opening a URL when a button is clicked| 00:00 | Let's complete the app by adding the
button functionality so that when you
| | 00:04 | click the "Book Now!" button a URL
opens in the user's default browser.
| | 00:10 | In your constructor find the line of
code where you create the button.
| | 00:13 | On the next line, type
button.addActionListener and pass in this.
| | 00:21 | We're using the same handler to handle
the combo box event and the button event,
| | 00:26 | so what we're going to need to do is create
some way to differentiate between the two.
| | 00:30 | To do that, go to the next line and
type btn.setActionCommand, and then we can
| | 00:36 | pass in a string that identifies the
name of action for this particular object.
| | 00:42 | So I'm going to type "click," all lowercase.
| | 00:45 | So now when the ActionCommand is click
in the actionPerformed method, I know
| | 00:49 | that the button was clicked and it
wasn't that the combo box was moved.
| | 00:53 | Keep in mind, if you're going to have
many events that you're handling, it's
| | 00:56 | better to create constants than using
direct strings like I'm using here, but
| | 01:01 | for what we're doing in this
tutorial, a standard string will suffice.
| | 01:06 | So in actionPerformed scroll down and
under int i, create a few extra new lines
| | 01:12 | and create an if statement in there.
| | 01:14 | In the if statement we're going to
see if the action that was performed was
| | 01:17 | indeed the click action.
| | 01:19 | So type e.getActionCommand. After
the parentheses type .equals, and the
| | 01:27 | parentheses for equals, we're just
passing the string, click, all lowercase,
| | 01:30 | make sure it matches the value that
you passed in btn.setActionCommand
| | 01:33 | above, which it does, and inside of the if
statement we're going to create try catch block.
| | 01:40 | So just create that real quick, and the
exception that we're going to catch is
| | 01:45 | just a standard exception.
| | 01:48 | We'll call this ex, and inside of the
catch block all we'll do is just print that
| | 01:53 | there was an error, so System.out.
println, and in the parenthesis we will println
| | 01:59 | just pass in the string "error loading url."
| | 02:04 | In the try block, we'll load the URL,
so when the button was clicked, we're
| | 02:09 | going to launch that URL. And to
open up the user's default browser, type
| | 02:14 | java.awt.Desktop, capital D, .getDesktop,
capital D again, .browse, and you can see
| | 02:23 | in the code here that this launches
the default browser to display a URI.
| | 02:28 | So in there we need to create a new URI.
| | 02:31 | So new space URI and in the
parentheses for new URI, type links.get, and then
| | 02:40 | pass in i. So we'll correspond to
the current value that's selected in the
| | 02:45 | combo box, and that's it.
| | 02:48 | So save the file and go over to
AppMain.java and test this and you should see
| | 02:53 | the app launch, and click Book Now!
And you'll see that your browser opens and
| | 02:59 | if you look at the URL, you're getting
the correct URL that was from the XML, so
| | 03:04 | you can go through the different
ones and test it if you'd like.
| | 03:07 | And the main thing you're looking for
at the top of the screen is that the URL
| | 03:10 | matches the URL from XML.
| | 03:13 | So once you get that working, you can
see that you can add support in your apps
| | 03:17 | to open up links from XML
data that comes from a database.
| | 03:22 | We'll tab that to Eclipse.
| | 03:25 | So remember, you can add a button
listener by using the simple addActionListener
| | 03:30 | Command, and if you have different
events that you're listening for in the same
| | 03:34 | handler, use the setActionCommand
and pass in a unique string for each
| | 03:39 | particular event. That way inside of
action performed, you can check to see
| | 03:44 | which command happened and
handle the event accordingly.
| | Collapse this transcript |
| Publishing a desktop app| 00:00 | Now that our code is complete, we'll look at
how to publish the application as a desktop app.
| | 00:06 | Before you do anything else, make sure
that all of your servers are running and
| | 00:10 | that your data file is working.
| | 00:12 | So again, that's your MySQL server,
your Tomcat server, and you can make sure
| | 00:16 | that you have the JSP project inside
of your Project Explorer. So you can test
| | 00:21 | it in Eclipse in the built-in web browser
if you want; just make sure that URL works.
| | 00:26 | So the first step is to select our project.
| | 00:29 | I'm going to select publishing.
I have AppMain selected.
| | 00:32 | I'll go to Run, and then Run
Configurations. And in Run Configurations, I'm
| | 00:38 | going to select Java Application, and
then I'm going to click the button to
| | 00:42 | create a new configuration.
| | 00:43 | I'm going to call this Backpack CA, and for
the Main Class I'm going to select Search,
| | 00:51 | I'll choose the AppMain class and
click OK, and you can click through these
| | 00:55 | different tabs and add any
settings that you'd like.
| | 00:58 | I'm going to leave them at the default
and click Apply, and on the left side I should
| | 01:03 | see Backpack CA run
configuration. So I'll click Close.
| | 01:08 | And then what I'm going to do is with
publishing still selected, I'm going to
| | 01:12 | go to File and then Export, and in the
Other category I'm going to choose Mac
| | 01:18 | OS X application bundle.
| | 01:20 | Of course, if you're not running a Mac
you're going to see a different icon there
| | 01:24 | that's the appropriate application
bundle for your operating system.
| | 01:26 | So select that and click Next, and
then when it says use this launch
| | 01:32 | configuration, make sure to choose
Backpack CA, make sure the main class is
| | 01:36 | correct, application name
should be written there as a default.
| | 01:40 | For folder, we're going to choose
the export location, and I'm going to
| | 01:43 | choose the Desktop, and for the icon, I have
an icon in the assets folder called icon.icns.
| | 01:51 | There is also an icon.ico for
Windows apps that you can use.
| | 01:55 | If you don't have an icon file, you can
create a 512x512 pixel image, and go to
| | 02:03 | one of the free web sites that
converts the icons for you, like for example
| | 02:07 | iconverticons.com. That's
where I created my icon.
| | 02:12 | So you simply upload the image,
click Convert, and you get icons for
| | 02:16 | various operating systems.
| | 02:19 | So I have that set up, and I'm just
going to click Finish and then Eclipse will
| | 02:23 | actually publish the app for me, so on
my desktop, I should see the Backpack
| | 02:28 | California app. And if I look there, I
can see that the icon is displaying, and it
| | 02:34 | looks just like any other Mac app.
| | 02:37 | If I double-click the icon, the app
opens, and it works just like the app did in
| | 02:43 | Eclipse, except for this is actually
desktop app. And if you look at the doc,
| | 02:47 | you'll see there is the icon in there,
so this actually runs just like any other
| | 02:52 | native app on my computer.
| | 02:54 | So again, you could see I can click to
switch through and browse all of the data.
| | 02:59 | I can click Book Now! and the URL opens.
| | 03:03 | And the functionality is exactly the
same as the app that we built in Eclipse,
| | 03:07 | except for this is the desktop-
published version of the app.
| | 03:10 | So remember that if you want to
publish a desktop app, you'll have to create
| | 03:15 | your own run configuration and then you
export the app as an application bundle
| | 03:20 | in the Other category, and when you
follow those steps and create your icon
| | 03:24 | file, you'll have a native
desktop app that you created using Java.
| | Collapse this transcript |
|
|
4. Making AppletsUnderstanding applets| 00:00 | Let's say you wanted to take the
Java desktop application you created and
| | 00:04 | publish it for the web using a browser plug-in.
| | 00:07 | It's actually a fairly
straightforward process and a version of the app
| | 00:11 | is called an applet.
| | 00:13 | Before we get started, I want to show
you that I have this file called data.xml.
| | 00:19 | I'm going to double-click that
file and look at the source code.
| | 00:23 | And you'll notice here the source is
just exactly the same source that we've
| | 00:27 | been kicking out from our database.
| | 00:29 | I just copied and pasted the source
code so you can view that in a web browser
| | 00:33 | and then go to view source, copy and
paste that into a plain text file, and
| | 00:38 | change the extension to XML,
and you'll have this file here.
| | 00:42 | So what I've done is I've taken that
data.xml file and I put that inside of a
| | 00:48 | folder called resource.
| | 00:50 | So that's in my resource folder, and
then I have the com folder, and I just took
| | 00:54 | those two folders and dragged them
into the src folder for my project.
| | 01:00 | So make sure you close out that data.xml
file, and let's take a look at AppMain.Java.
| | 01:06 | In here I've just condensed
all of our code into one class.
| | 01:10 | An applet basically works just like a
regular Java app, except for your main
| | 01:15 | class needs to extend JApplet, and
JApplet is a visual class similar to JFrame.
| | 01:21 | So this class is essentially the view class.
| | 01:24 | And really the only change that I've
made is I've called loadData instead of
| | 01:28 | passing in a URL and passing
the path to the resource.
| | 01:31 | So that first forward slash gets us to
the root of our project, and then inside
| | 01:36 | of that, there's the resource folder,
and in that folder you'll see data.xml.
| | 01:41 | So if we scroll down to the loadData
method, you could actually see how resource
| | 01:46 | is loaded rather than data from URL.
| | 01:49 | It's actually not that different at all.
On the document builder.parse line of code
| | 01:54 | all I changed was the value passed
into the parentheses, and I typed
| | 01:58 | this.getClass so that grabs a
class, which has a method called
| | 02:04 | getResourceAsStream.
| | 02:05 | This is just built-in, and I
didn't have to define that myself.
| | 02:09 | So I pass in the string, a path to the
file, and boom, it loads in just like the
| | 02:16 | other content loaded in.
| | 02:17 | And so I could test that
right now inside of Eclipse
| | 02:21 | if I click the Run button. And here
you'll notice that the size isn't right, and
| | 02:27 | that's because we're not setting
the size inside of the Java code;
| | 02:30 | we're actually going to set the size
in an HTML element that will load to
| | 02:35 | applet, so don't worry about that.
| | 02:36 | So you see it works just like the desktop
version did and so I'll close it out, and that's it.
| | 02:43 | So if you want to create a Java app
that runs in the web browser as a plug-in
| | 02:49 | just extend the JApplet class, and
if you want to load a resource, create a
| | 02:54 | folder called resource inside of your
source folder and put your files inside
| | 02:59 | of there.
| | Collapse this transcript |
| Publishing and viewing an applet| 00:00 | Now let's publish our applet
and test it in a web browser.
| | 00:04 | So I have my app opened here and I'm
just going to go to File > Export and then
| | 00:10 | choose under Java, JAR file.
| | 00:14 | I'll click Next, and here I'm
choosing the resources to export.
| | 00:18 | I'm just going to have applet selected.
| | 00:20 | I'm choosing Export generated class
files and resources and Export Java source
| | 00:25 | files and resources.
| | 00:27 | And here I have the location of my JAR
file, and you can set it here by clicking
| | 00:34 | Browse. Then I have Compress the
contents of the JAR file and Overwrite existing
| | 00:40 | files without warning checked.
| | 00:42 | And then since I've already exported
this, I'm just going to click Cancel, and
| | 00:46 | then I'm going to jump over to Finder.
| | 00:49 | And inside of the assets folder I have
the JAR file and the HTML file. And so if
| | 00:56 | I open the HTML file then
you can see that it'll run.
| | 01:01 | So I double-click that and you should see
the JAR file running inside of my web browser.
| | 01:06 | So there it is, running inside of the
Java plug-in, and you can note that it works
| | 01:12 | just like it did in the Desktop.
| | 01:15 | I can click the Book Now button to
browse to the web page and everything
| | 01:20 | is virtually the same.
| | 01:22 | So let's take a look at the source
code, especially for those of you who don't
| | 01:25 | have the exercise files.
| | 01:26 | I'll go to View and then View Source,
and I'm pressing Command+Plus to bump up
| | 01:31 | the file size so it's easier to see.
| | 01:33 | In here we have the source code,
so it's just a basic HTML file.
| | 01:38 | I put the title in there.
| | 01:39 | And in the body all I did is I put the
applet tag, and then you set code=, and
| | 01:46 | then in there you put the location of your
class, and you use the .class instead of .java.
| | 01:53 | So I have the full name for
the class, including the package.
| | 01:58 | And then I have the value
for the width and the height.
| | 02:03 | And then the archive file, which is the
JAR file, I just have the name. It's in the
| | 02:06 | same directory as the HTML
file to keep things simple.
| | 02:10 | And then if the browser doesn't have support
for the applet tag then you'll see this message.
| | 02:15 | So we successfully exported our
application that was on the Desktop to being a
| | 02:20 | web app that runs in the browser.
| | Collapse this transcript |
|
|
5. Writing Android ApplicationsInstalling the Android SDK| 00:00 | Now we are going to port
our application to Android.
| | 00:03 | Go to developer.android.com/sdk/installing.html.
| | 00:09 | Now step one here is to install
Eclipse, and you have already done that.
| | 00:13 | So go to step two, and you can click
the link to go to the SDK download page.
| | 00:17 | I go into Command+Click or Ctrl+Click it
so that that I open it in a new tab.
| | 00:22 | Here I'm going to click to download
the version of the SDK that's appropriate
| | 00:27 | for my operating system.
| | 00:29 | And then I will go back to the
steps to installing the Android plug-in.
| | 00:34 | In Step 3 there is a link that
says, Installing the ADT Plugin.
| | 00:37 | I'm going to click that link and
scroll down to Downloading the ADT Plugin,
| | 00:42 | to where I see a URL.
| | 00:44 | This I'm going to need to type into Eclipse.
| | 00:47 | I'm going to select it and copy it and then
before I go to Eclipse, I'm going to go to Finder.
| | 00:54 | And now I'm going to take that
folder that was just downloaded--
| | 00:56 | you may have to unzip it of course--and
just drag it into your Documents folder.
| | 01:03 | And then I'm going to go to Eclipse.
| | 01:05 | Go to Help > Install New Software
and in the Work with field, paste, using
| | 01:13 | Command+V or Ctrl+V the URL, that you just copied.
| | 01:17 | Check the box to install the
Developer tools and then click Next.
| | 01:22 | And you will see the Install Details.
| | 01:24 | I'm going to click Next and then
choose to accept the terms of the license
| | 01:28 | agreement. Of course you want to read
over that first and then if you agree to
| | 01:33 | the terms, you can choose
that option and click Finish.
| | 01:36 | Then the new software will
be downloaded and installed.
| | 01:39 | You may see a security warning that says
you're installing content that is unsigned.
| | 01:44 | Now I actually downloaded this
directly from Google, so I trust it.
| | 01:48 | So I'm going to click OK, and we'll
wait for the software to be installed.
| | 01:54 | Once you install the plug-in,
Eclipse will need to restart,
| | 01:57 | so I'm going to click to restart now.
| | 01:59 | Once Eclipse is restarted, you may see that
the SDK Platform Tools component is missing,
| | 02:05 | so we'll look at managing
the SDK Manager to install it.
| | 02:09 | You also may see another pop-up window
about the location of your Developer tools.
| | 02:16 | If you see that window, you can
tell the input box that you already
| | 02:21 | have downloaded it.
| | 02:22 | You can point your computer to the
appropriate location of the folder.
| | 02:27 | And don't worry, because you can
always fix that later as well.
| | 02:30 | And let's take a look at
what I am talking about.
| | 02:32 | If I go to Preferences, which is under
Eclipse on the Mac and Window on the PC,
| | 02:37 | then you will that in the Android tab
| | 02:40 | I have my SDK Location here.
| | 02:42 | If you don't have anything, just click
Browse, and then you can browse to that
| | 02:46 | folder on your computer.
| | 02:48 | Once you're inside the Android SDK
folder, you can click Open, then click
| | 02:52 | Apply, and then click OK.
| | 02:54 | Now let's look at managing the
Android Development Tools plug-in.
| | 02:59 | Go to Window > Android SDK Manager.
| | 03:03 | Now this might be married with the
AVD Manager if you're on Windows.
| | 03:09 | So I'll launch that, and here what I want to
do is just install the Android 2.3.3 API,
| | 03:18 | so I'm going to check that box.
| | 03:22 | And you may be wondering why we are not
downloading the latest version of Android.
| | 03:26 | That's just because for this project
we are not using any features specific to
| | 03:30 | later versions of Android.
| | 03:32 | So this will be sufficient for our
project, and I will just click Install 5
| | 03:36 | packages, accept the
defaults, and then click Install.
| | 03:43 | Now it may take a minute for these to install.
| | 03:47 | You will see the progress bar going.
| | 03:54 | And once that's complete, you can close
the Windows. And then we are going to go
| | 03:59 | to Window > AVD Manager.
| | 04:03 | AVD stands for Android Virtual Device.
| | 04:08 | Now the previous installation
of the SDK actually created a device
| | 04:12 | already, so I'm going to delete that,
and then I'm going to click New. And
| | 04:18 | before we go through this, I want to
explain that this is actually a simulator
| | 04:23 | for running an Android app.
| | 04:24 | So we are creating this virtual device.
| | 04:28 | So the name is going to be Gingerbread,
after the name of the operating system.
| | 04:33 | And I'll choose the Target to Android
2.3.3. For the SD card I am just going to
| | 04:40 | enter 100 in the Size field. Snapshot, I
am going to click Enabled so that this
| | 04:45 | will run faster in the simulator.
| | 04:47 | I recommend doing that as well, and then
I'm going to leave the Built-in Skin at
| | 04:52 | WVGA800, and then I'm going to click Create AVD.
| | 04:59 | Now I will close the Android Virtual
Device Manager, and then it's time to
| | 05:03 | create a new Android project.
| | 05:05 | So go to File > New. I'm going to go to Other.
| | 05:11 | I'm going to expand the Android folder and
then choose Android Project. I will click Next.
| | 05:19 | I will just call this android_test1 and
I will click Next. And I'm choosing an
| | 05:31 | SDK to target. We only have
one, so I'll click Next again.
| | 05:35 | And now I have to specify a package name
so it's going to be com.toddperkins.uar,
| | 05:42 | and I will click Finish.
| | 05:44 | And then I'm going to expand the
folder so I can see the project, and in the
| | 05:49 | source folder, I can expand that and
I can see Android_test1Activity.java.
| | 05:57 | I'll open that file and when it opens
in the Code view, I can see the default
| | 06:01 | code that's written.
| | 06:02 | This creates a hello-world app, and let's see
what this looks like in the Android Simulator.
| | 06:10 | So then I will click Run. Then you
may see a window that asks you to choose
| | 06:14 | which type of application you want
to run. Make sure to choose Android
| | 06:17 | application. Then the Simulator should
launch, and it might take a minute for
| | 06:22 | you to see your app in the Simulator.
| | 06:25 | And so, once you've waited for the
Simulator to start up all the way--and again
| | 06:30 | it may take several minutes for this to happen--
| | 06:33 | you should see the name of your
app, which here I have Android_test1
| | 06:38 | as the name of the main class
that I'm running, and then it says Hello
| | 06:42 | World, Android_test1Activity!
| | 06:45 | So I have the initial hello-world app
for Android running in the Simulator.
| | 06:50 | So now you can see we've successfully
installed the Android SDK into Eclipse,
| | 06:56 | and we can now build Android apps.
| | Collapse this transcript |
| Building the app's layout| 00:00 | We will start an Android
app first with the layout.
| | 00:04 | So if you have access to the
exercise files, create a project called
| | 00:07 | building_layout and then drag the
appropriate exercise files right on to that
| | 00:11 | project in Eclipse, making sure to
link and overwrite all the files.
| | 00:17 | If you don't have access to the
exercise files, then in the Source folder you
| | 00:21 | can create the Java
classes AppMain and Detailview.
| | 00:25 | We will go over them soon.
| | 00:28 | And in the assets folder you go are
going to need data.xml, which is just that
| | 00:32 | same data file that we have been using,
the static data file that we have been
| | 00:36 | using in other chapters in this course.
| | 00:37 | So you can just copy that into the
assets folder, and in the resources folder, in
| | 00:43 | layout, I have not only main.xml, which
is the default file we get in Android
| | 00:48 | project, but I also have detail.xml.
| | 00:51 | So you can create that by clicking
that icon on the screen that looks like a file
| | 00:56 | with a plus on the top right.
| | 00:58 | So let's start by opening up main.xml.
| | 01:02 | Now if you don't see the same view
that I do, which is the Android XML layout,
| | 01:07 | you can right-click main.xml and
choose Open With > Android Layout Editor.
| | 01:13 | So here we have the default view for our main file.
| | 01:16 | What I am going to do is select that text
that says Hello World and I'm going to delete it.
| | 01:21 | And then I'm going to go into
Composite and then grab a ListView to drag
| | 01:28 | into that window.
| | 01:29 | And the last thing we need to do
is give this ListView a special ID.
| | 01:36 | So click to go to the code view in
main.xml, and then we are going to change the
| | 01:41 | id value, so inside of the quotes we
are going to type @android:id/list.
| | 01:54 | And now we can go back to the graphical layout.
| | 01:57 | And what that does is it sets it
as the main list view for our app,
| | 02:05 | and that's all we need to do for now,
| | 02:07 | so I will make sure to save this file,
and then I will open that detail.xml.
| | 02:13 | So in here I'm going to go to the
graphical layout, and then I'm going to grab,
| | 02:17 | in the Form Widgets section, Large Text,
drop it in, and then I will go to Small
| | 02:23 | Text and then two Medium Texts.
| | 02:27 | Large, Small, Medium, Medium and
finally I'm going to grab a button.
| | 02:34 | So put that at the bottom.
| | 02:36 | And now what I want to do is expand
all of these to the whole height of the
| | 02:40 | screen, so I will just click on Large
Text, choose Distribute Weights Evenly, and
| | 02:48 | now you can see that I have all even
space between each of the elements.
| | 02:54 | And now for my button, I
actually want to have the text book now.
| | 02:58 | So we'll look at changing that in just a minute.
| | 03:01 | What I'm going to do first is
assign the IDs to all my text fields.
| | 03:06 | If you look on the right side in your
Outline View, you can see all of the ID
| | 03:11 | names for your Text Fields, so we have
textView 1, 2, 3, 4 and then button1.
| | 03:15 | So this isn't very
descriptive of what these objects are.
| | 03:18 | So I am going to right-click Large Text
at the top, choose Edit ID, and we will
| | 03:23 | call this tTitle, capital T for title.
| | 03:29 | And then for the Small Text, I'm going to
right-click it, choose Edit ID, and
| | 03:33 | choose tDescription.
| | 03:37 | For Medium Text, at the top, I am going
to right-click it, edit the ID, and we
| | 03:42 | will call that tLength, capital L,
edit the ID for the last text field, and we
| | 03:50 | will call this tPrice, capital P.
And then for the button I'm going to
| | 03:57 | right-click, Edit ID and I am just
going to call this button, so we will click
| | 04:02 | OK, and now we will look at how
to change the text on the button.
| | 04:07 | If I go into my code, after I save
the file and I look at detail.xml in the
| | 04:14 | code view, we can scroll down and find
the button, and there's a text area that
| | 04:19 | says text, but if I change that to
say Book Now with an exclamation point,
| | 04:25 | later on when I test my app, I will get
a warning saying that this should be in
| | 04:29 | the strings.xml file.
| | 04:32 | So just in case you want to do that,
just open up strings.xml from the values
| | 04:36 | folder, which is in the resources folder.
| | 04:37 | So open that and I am looking at this in
the standard XML view, so what I want to
| | 04:45 | do is open that in the string view,
so Open With > Android Resource Editor.
| | 04:54 | So I'll close the other instance of
strings.xml, and in here you can see that I have
| | 04:58 | already created the sBookNow (String).
| | 05:00 | So if you don't have the exercise
files, just click the Add button, and then
| | 05:04 | you will choose string and then click
OK. And with your new string selected,
| | 05:08 | give it name, sBookNow with a capital B,
capital N, and for the value put Book,
| | 05:14 | space, Now with an exclamation point,
and then save the file and go back to
| | 05:19 | detail.xml. And you can use a string
from your strings file by typing
| | 05:25 | @string/sBook, with a capital B, and then
now, so that's the ID value of our string.
| | 05:34 | So you can save that, go over to
Graphical Layout, and then you'll see Book Now
| | 05:39 | in that button field.
| | 05:40 | So now we have successfully set up our
layout files, we are ready to move on
| | 05:47 | in creating our app.
| | Collapse this transcript |
| Displaying loaded XML in a list| 00:00 | Here is our main app file,
which is the class AppMain.
| | 00:05 | If you don't have exercise files, the
best place to start is by using one of the
| | 00:11 | files from one of the other apps that we made.
| | 00:13 | So take the Main class file from
another app that we made and then modify it
| | 00:18 | to match this. That way you'll have
the least amount of work, rather than
| | 00:22 | starting from scratch.
| | 00:23 | So we have these classes that are imported.
| | 00:27 | Notice that the class extends
ListActivity. The default Android class to extend
| | 00:34 | is just activity, so make sure
that you extend ListActivity.
| | 00:38 | Now we have a list of properties, just
the same as before, and then I have static
| | 00:43 | properties for each of the XML fields.
So if you don't have those, I recommend
| | 00:49 | creating them now, because we're going
to be using them in multiple places.
| | 00:52 | The onCreate method is pretty much
the default at this point. And then
| | 01:01 | onListItemClick, I have most of it
commented out, and this is going to be the
| | 01:06 | handler for when a list item is clicked.
| | 01:08 | We're going to look at how to
handle that in another movie.
| | 01:13 | And I have a loadData method to load
the file data.xml, and I'm loading it by
| | 01:20 | calling the DocumentBuilder parse
method and passing in getAssets.open and then
| | 01:26 | passing in the name of the
file so we can parse that file.
| | 01:29 | And I have all the XML elements added
here, just as before, and then getTagValue,
| | 01:36 | which you've also seen before.
| | 01:39 | So let's go at the bottom of onCreate.
What we're going to do is take the titles
| | 01:43 | array and then put that in that list,
so that we have a List view with all the
| | 01:48 | titles from our XML.
| | 01:51 | So the thing that we need to do
first is to get a string array, and then
| | 01:55 | we'll put in there. So type String, capital S, and then some
brackets, and we'll call this titles_str.
| | 02:05 | I will set it equal to titles.toArray,
capital A, and in the parentheses after
| | 02:14 | toArray, I'm going to get the length of
our titles array list by typing new, space,
| | 02:19 | String, and then brackets, so new
string array. And the length is going to be
| | 02:24 | titles.toArray, after the parentheses .length.
| | 02:29 | So we create the array and it's the
length of the titles array list, and then
| | 02:36 | we go to the next list. We'll use that.
Type this.setListAdapter and then here
| | 02:44 | we pass a new, space, ArrayAdopter,
capital A, capital A, and then less than and
| | 02:53 | then a greater than in there.
| | 02:56 | We'll define it as a string, and then
in the parentheses after that pass in
| | 03:01 | (this,android.R.layout.simple_list_item_1),
separated by underscores, and a
| | 03:19 | comma, and then titles_str.
| | 03:22 | I'll just end that statement with a
semicolon and go to the next line. So
| | 03:28 | what we're doing here is we're just
taking that title string and then putting
| | 03:33 | it inside of our list.
| | 03:38 | So here, this android.R.layout.simple_
list_item_1 just refers to the layout for
| | 03:44 | the list items in the list.
| | 03:46 | And now we'll save and test the app. And
here's the Simulator, and you should see
| | 03:54 | the app launching in the simulator, and
here I have all of my XML data, so it's
| | 04:00 | appearing in that list view.
| | 04:02 | So now that we've taken that XML data
that we created and we successfully used
| | 04:06 | it to populate a list.
| | Collapse this transcript |
| Sending data to a new intent| 00:00 | Now we're going to look at clicking
an item in the ListView and having a
| | 00:03 | new intent open up.
| | 00:06 | Think of an intent as a separate view for
your app, so that will show the DetailView.
| | 00:11 | Before you can do that, open up
AndroidManifest.xml and go to the Source Code
| | 00:17 | view. Right below the closing tag
for activity we need to declare the
| | 00:22 | DetailView activity.
| | 00:24 | So I create a new element called
activity and inside of the opening tag set the
| | 00:30 | attribute android:name=2 and in quotes,
.Detail, capital D, View with a capital
| | 00:41 | V. So we'll save the file, and we can
close it. Then we'll go to AppMain.java.
| | 00:50 | Scroll down into the
OnListItemClick event handler.
| | 00:55 | So here we receive the data, which is
the ListView, the main View, integer for
| | 01:04 | the position of the item
that was clicked, and an ID.
| | 01:07 | So first thing I do is I
call super.onListItemClick.
| | 01:14 | So right below that comment that says
Get the item that was clicked,
| | 01:18 | let's handle this event.
| | 01:19 | So the first thing we'll
do is create the new intent.
| | 01:23 | So datatype Intent, capital I. We'll
call this intent with a lowercase i, and
| | 01:31 | we'll set it equal to a new intent. And
in the parentheses for the constructor
| | 01:38 | we'll pass in V, which is the view,
.getContext. Make sure we include the
| | 01:45 | parentheses. And the second
parameter is going to be DetailView.class, so
| | 01:50 | DetailView with a capital D, capital
V, .class, so that we'll create a new
| | 01:56 | instance, and then we're going
to put an extra inside of that.
| | 02:02 | What we use the extra for is to pass
data from one intent to the new intent
| | 02:08 | that's going to appear.
| | 02:10 | So below that, type intent.putExtra, and
then we pass in the name and the value.
| | 02:17 | The name is going to be TITLE in all
caps and then for the value we'll pass in
| | 02:24 | titles.get, so we're grabbing an
item inside of the titles array list.
| | 02:31 | And the Item number that we want to
get is the position that's passed into the
| | 02:34 | onItemClick, so just passed in position,
and then a semicolon to end the statement.
| | 02:40 | Just make sure that you spelled it
correctly, so position, and that's it. And what
| | 02:45 | I'm going to do here is just highlight
these lines of code that are commented
| | 02:50 | out and I'm going to press Command+7 or
Ctrl+7 on my keyboard to uncomment them.
| | 02:56 | So I did the same thing for putExtra
with description, price, and length, and the link.
| | 03:02 | Then I run the method
startActivity, passing in the intent.
| | 03:06 | So let's save that file and before we
test it, let's go over to DetailView.java.
| | 03:11 | In DetailView we're importing several
classes of a property called URL that's a string.
| | 03:20 | It extends the activity class. onCreate
is pretty much the default, and all that
| | 03:27 | runs is this code in here,
which are commented out.
| | 03:29 | So right below set ContentView, which,
by the way, calls that detail XML file
| | 03:36 | through the value R.layout, so that's what
associates the XML layout file with this class.
| | 03:43 | I'll set the value of URL, so
url = getIntent, capital I, and then parentheses,
| | 03:55 | .getStringExtra. And then we pass in
AppMainm so the class of name .LINK, all caps.
| | 04:05 | So we'll close that line out, and
then what we're going to do is make sure
| | 04:08 | there's no white space in the URL. And
I've already looked to doing this before.
| | 04:12 | I'm just doing this after
we've already parsed the XML.
| | 04:16 | So url = url.replaceAll, and then we
pass in the regularExpression, which in
| | 04:24 | quotes is to \\s+. That's
any space, and the replacement is going to
| | 04:32 | be nothing, so just two quotes right there.
| | 04:34 | So it removes all the white space, and
then we'll look at one more example of
| | 04:39 | grabbing the title, so create a string
called title, and I'll set it equal to
| | 04:44 | getIntent, same as before, after the
parentheses .getStringExtra, and then in the
| | 04:53 | parentheses for getStringExtra
it's going to be AppMain.title.
| | 04:58 | Now I'll go to the next line, and what
we're going to do now is put the title
| | 05:04 | inside of the Title field in the DetailView.
| | 05:07 | We'll create a value of type TextView,
we'll call this titleView, capital V, and
| | 05:16 | we'll set it equal to in parentheses
TextView, so we're telling it to treat
| | 05:22 | whatever we put after the
parentheses as a TextView.
| | 05:27 | And then findViewById, after the
parentheses, and then in the parentheses after
| | 05:34 | findViewById, type capital R.id.tTitle.
Now we'll set the text for the titleView.
| | 05:44 | Go to the next line and type
titleView.setText, and then we'll just pass in title.
| | 05:52 | Make sure to add a semicolon to close
out that statement, and then we'll just
| | 05:57 | uncomment the rest of the code.
| | 06:03 | So I'll select it here, Command+7 or
Ctrl+7 to uncomment. And I didn't write this
| | 06:08 | code by hand just now, just because
we're repeating the same process of
| | 06:12 | setting the text fields,
| | 06:13 | so you can just look at the code and see
how I did it there and just notice that
| | 06:16 | it's exactly the same as what
we've already done. So we'll save now.
| | 06:20 | I'm going to return to AppMain.java
and then run the app in the Simulator.
| | 06:25 | Note that you might have to click on
your project and then choose to run as
| | 06:29 | an Android application, or you might
have to go to the Run menu and run it.
| | 06:34 | So you can see my app is loaded into the
Simulator, and I can simply click on one
| | 06:40 | of the list items. Then the new
intent shows with the appropriate title,
| | 06:44 | description, length, price,
and a Book Now button.
| | 06:48 | So we successfully created our app,
and we can now see all that data from the
| | 06:53 | XML directly in our application.
| | 06:56 | So remember, you can transfer to a new
intent by creating the intent, adding
| | 07:04 | extra data with the putExtra method,
and then running startActivity and
| | 07:08 | passing in the intent.
| | 07:10 | You can get the extraData by
calling getIntent and then .getExtra.
| | 07:19 | If it's the string, then it is getStringExtra;
| | 07:22 | if it's intent then it is
getIntentExtra; and so on.
| | Collapse this transcript |
| Opening a browser when a button is clicked| 00:00 | Now we'll finish our Android
application by adding the functionality so that
| | 00:04 | when you click on the Book Now!
| | 00:06 | button, the device's browser will open up.
| | 00:09 | Below all the rest of your code, in
DetailView.java, inside of the onCreate method,
| | 00:17 | type the following code.
| | 00:18 | The first step is to declare a button
object, so data-type it to a button, and
| | 00:25 | then we'll call this button, and
we'll set it equal to, and we'll use the
| | 00:30 | parentheses, and type Button in the
parentheses, and after the parentheses
| | 00:33 | findViewByID, just like we done before. And in the
parenthesis for findViewByID, type R.id.button.
| | 00:44 | We go to the next line, and we'll
type button.setOnClickListener.
| | 00:54 | Now, in the parentheses we pass in a
method to handle what happens when
| | 00:58 | the button is clicked.
| | 00:59 | So in here we'll type new, space, View,
capital V, .OnClickListenter. The beginning of
| | 01:09 | each word will be capitalized. And if
I follow the code hinting by pressing
| | 01:14 | Enter or Return then Eclipse actually
writes out that whole method for me.
| | 01:19 | Now I'm getting this red x right here
because I don't have a semicolon, so I'll
| | 01:23 | put that at the end of after the close
parenthesis. And in here in OnClick, we can
| | 01:28 | handle the click event, so we want to
open up that URL. And we already have that
| | 01:34 | saved in our URL property,
| | 01:36 | so what we do is we just create a new
intent and that intent is going to be a
| | 01:40 | new browser window, and then we just
run start activity, passing that intent in,
| | 01:44 | and the browser window should open up just fine.
| | 01:46 | So Intent with a capital I, and we'll call
this browserIntent, capital I. And we'll
| | 01:55 | set it equal to a new intent, and in
the parentheses we're going to pass in
| | 02:01 | Intent with a capital I, .Action_View, and
the next parameter is going to be Uri,
| | 02:11 | with a capital U, .parse. And then it
asked for uriString, which is going to be
| | 02:17 | that URL that we created in this class.
So we just passed that in, and then all
| | 02:22 | we have to do is run startActivity, passing
in browserIntent, capital I, and that's it.
| | 02:32 | So when you click the button, it'll open
up the appropriate URL in the device's
| | 02:36 | default browser. So let's just
save this and then we'll click Run.
| | 02:41 | Now we'll just wait for a minute
for the application to star tup.
| | 02:44 | Now since we used a snapshot for the
emulator, you might see a previous version
| | 02:51 | of app before the current version loads in.
| | 02:53 | So you might have to wait an extra
second or two. And then here I'll just click
| | 02:56 | one of the elements in the list and
then I can see all of the description data.
| | 03:02 | I can click the Book Now!
| | 03:03 | button, and I should see the device's
browser open up with the appropriate URL.
| | 03:08 | So here I have this blank window.
| | 03:10 | You can see that a URL is opening, and it does
start with Explore California, and there we go.
| | 03:16 | And if you want to go back, of course
you can click the Back button, and we go
| | 03:21 | back to the previous activity. And we
can go back again to the main list view.
| | 03:25 | So our application is now finished,
and we've successfully created an Android
| | 03:31 | port of our application.
| | 03:33 | So with that, we've created an application
for the web, for the Desktop, and for Android.
| | 03:41 | Remember that when you need to handle
a button click, on Android you need to
| | 03:45 | call the button.setOnClickListener
method, and then you create a new
| | 03:49 | OnClickListener, and you can just write
the code to handle the event inline.
| | Collapse this transcript |
| Viewing the app on a device| 00:00 | Here is our app running on
an actual Android device.
| | 00:03 | So you can see all of the data pulled
from XML in a list element, and then I
| | 00:08 | could tap any one of them and see the details.
| | 00:12 | I can press the Back button on my
device to return back to the main screen. And
| | 00:16 | if I select another object, you'll
see information about the title, the
| | 00:20 | description, the length, and the
price, and if I hit the Book Now!
| | 00:24 | button, then the URL opens in
my device's default browser.
| | 00:28 | So you can see we've successfully ported
our Desktop app both to the web and now
| | 00:34 | to Android.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | This concludes Up and
Running with Java Applications.
| | 00:04 | Throughout this course you saw how you
can use Java to create server-side apps,
| | 00:08 | desktop apps, web apps, and
even Android applications.
| | 00:13 | This was meant to be just a demo to show
you what is possible using Java and the
| | 00:18 | many ways you can use it to develop
front-end and backend applications.
| | 00:22 | If you're curious about learning
more details about working with Java, I
| | 00:26 | recommend going back to Java Essential Training.
| | 00:29 | You can find this in the
Online Training Library.
| | 00:31 | For a more thorough explanation of
how to work with Android using Java, see
| | 00:36 | Android App Development with Java
Essential Training. And as we've seen in this
| | 00:40 | course, there is so much that
you can accomplish with Java,
| | 00:43 | so I encourage you to keep learning,
exploring, and becoming better at
| | 00:48 | developing Java apps, and if you make
anything you'd like to show me, you can
| | 00:52 | contact me on Twitter at
asktodd. I'll see you next time!
| | Collapse this transcript |
|
|
