IntroductionWelcome| 00:00 | (Music playing.)
| | 00:06 | If you're a web designer who wants to
add AJAX-driven functionality to your sites,
| | 00:10 | but you've been held back due
to lack of experience with JavaScript,
| | 00:13 | then this title is for you.
| | 00:15 | Welcome to Dreamweaver CS4
Introduction to Spry. I'm James Williamson,
| | 00:19 | Adobe Certified Master Instructor and
Director of Training for Lodestone Digital.
| | 00:24 | In this title, we'll examine the three
main focuses of Spry, creating amazing
| | 00:29 | interactive Spry effects, using pre-
built Spry widgets to create immersive user
| | 00:33 | interface experiences and how to populate
pages using Spry's robust data capabilities.
| | 00:39 | Along the way, we'll cover how to
validate form data using Spry, allowing you
| | 00:43 | to give your users detailed feedback
as they fill out your forms. We'll also
| | 00:48 | build pulldown menus using Spry and
learn how to serve alternate content to
| | 00:52 | users who do not have JavaScript enabled.
| | 00:55 | As we work with Spry data, we'll
explore the many different ways that Spry can
| | 00:58 | collect and display data using it to
pull in data from XML, HTML and even Excel
| | 01:04 | spreadsheets on the fly.
| | 01:06 | All this as they say and much more.
Although you don't need to know JavaScript
| | 01:11 | to complete this title, a comfortable
working knowledge of HMTL and CSS is
| | 01:15 | recommended. There are many fantastic
titles on the lynda.com Online Training
| | 01:20 | Library on HTML and CSS. If you are
new to web design, I recommend you start
| | 01:25 | there before learning Spry.
Okay, let's get started.
[00:01:29.8]
| | Collapse this transcript |
| Setting up Spry management| 00:00 | Before we get started with learning
more about Spry, I want to take just a
| | 00:04 | moment to talk about something that's
going to be very, very important for this
| | 00:07 | title and that's managing your Spry assets.
| | 00:09 | Throughout the title, we'll need to
redefine Spry's default Spry assets
| | 00:13 | directory, so that when we create
Spry elements on our page, our assets are
| | 00:17 | copied into the right folder.
| | 00:19 | Now in each exercise that we do this,
I'll give you brief instructions on how
| | 00:23 | that's done, but I think it's worth
going over before we get into the title so
| | 00:27 | that you're aware of why we're doing
what we're doing. So to control the
| | 00:30 | default Spry assets directory in
Dreamweaver, you just go to your Site
| | 00:33 | Definition dialog box. The easiest
way to get to that is go over to Files
| | 00:37 | panel, find the name of your site in
this pulldown menu and simply double-click.
| | 00:42 | When you do that, the Site Definition
dialog box will come up, just click on
| | 00:46 | the Advanced tab, you want to go
down to the Spry category. In the Spry
| | 00:50 | category, there is only one option and
that's, hey, where should the default
| | 00:54 | Spry assets directory be?
| | 00:56 | Now, by default, Dreamweaver will copy
your Spry assets over to a directory on
| | 01:00 | the root folder called Spry assets. If
that folder does not exist, Dreamweaver
| | 01:05 | is going to create it for you. Well,
using this method you can take control of
| | 01:09 | exactly where does it place. So if
you click the Browse folder, you can go
| | 01:13 | anywhere throughout your site and tell
exactly where to place your Spry assets.
| | 01:20 | So as we get into specific exercises,
I'll give you instructions on exactly
| | 01:23 | which folder and directory should be
the current default Spry assets directory.
| | 01:28 | Make sure that you use this method to
set it before completing the exercise,
| | 01:32 | that way our Spry assets won't be
overwritten, modified, or ignored and
| | 01:37 | everything should work properly.
| | 01:38 | I'd also like to point out that I use a
custom workspace in this title. Now if
| | 01:42 | you're curious about my custom workspace,
I'll go ahead and show it to you now,
| | 01:46 | that way, if you want to build
the same exact workspace that I use,
| | 01:49 | you're free to do that.
| | 01:50 | Now I'm just going to open up the page
here and you can open up any page or you
| | 01:53 | can do what I'm going to do which is
just to create a blank page. I just want
| | 01:56 | to make sure I'm looking at the
default workspace. So as I modify it, I know
| | 02:00 | exactly what I'm doing here.
| | 02:02 | Now I really like the Split-Screen View
but I don't like that to be my default
| | 02:05 | view, so the first thing I'm going to
do is just switch that to Design View so
| | 02:09 | that that's my default view.
| | 02:10 | The next thing I'm going to do is I'm
going to take the Insert toolbar, which
| | 02:13 | is by default over here on the side,
and I'm going to move that over here above
| | 02:18 | the document window. Now I can do that
manually or I can just switch workspaces
| | 02:21 | because the Classic workspace has that,
you've got to remember, go back to
| | 02:25 | Design View. So by switching to Classic
the Insert toolbar is exactly where I want it.
| | 02:29 | Now I'm going to change one more thing.
When I'm working in Dreamweaver,
| | 02:33 | I really like to have access to my
page validation and checking for browser
| | 02:37 | compatibility in running reports and
doing searches and Find and Replaces right
| | 02:41 | at my fingertips. I really
like to have that functionality.
| | 02:44 | Well, that's in a whole set of panels,
we can get by going to Results and
| | 02:47 | choosing any of these options. I'm
just going to go ahead and choose Search.
| | 02:50 | Now, you'll notice that it went ahead
and docked this just below the Properties
| | 02:54 | Inspector. It's not exactly the most
efficient layout, so what I'm going to do
| | 02:58 | is I'm going to take the tab of the
Properties Inspector, I'm going to drag
| | 03:02 | that over this panel grouping and now
my Properties Inspector is part of this
| | 03:06 | much larger group.
| | 03:08 | Now, most people like the Properties
Inspector to be over here on the left-hand
| | 03:11 | side, so I'm going to grab that and
just simply slide it on over until it is
| | 03:16 | the leftmost panel.
| | 03:17 | Now, in addition to my Properties
Inspector, I have the Search, Reference,
| | 03:22 | Validation, Browser Compatibility, all
of these groups of panels down here. So
| | 03:27 | that just makes my life a little bit easier.
| | 03:29 | Now once I've got that workspace set,
I'm going to save it, so I'm going to go
| | 03:32 | up to my Workspace Switcher right up
here at the top and I'll choose New
| | 03:36 | Workspace and I'm just going to call
that one The James, feel free to insert
| | 03:40 | your own name.
| | 03:41 | Now no matter what happens, no matter
how things get changed up or moved around
| | 03:46 | or undocked or resized, I can go right
back to The James and I get exactly what
| | 03:52 | I'm looking for, perfect!
| | 03:53 | So keep in mind that as we go into
each new exercise, we may need to redefine
| | 03:58 | the Spry assets directory, and now we
know how to do that, and also, if you
| | 04:02 | want your workspace to match mine,
you can just build this workspace for yourself.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the
lynda.com Online Training Library or
| | 00:05 | if you are watching this tutorial on a disc,
you have access to the Exercise Files
| | 00:09 | used throughout this title.
| | 00:11 | To use the Exercise Files, I recommend
that you copy them or download them to
| | 00:14 | your desktop. From there in Dreamweaver,
you're going to define the site using
| | 00:19 | the Exercise Files as your root
directory. So I'm going to go to Site, choose
| | 00:24 | New Site. Now you can name this
anything that you want. I'm going to go in the
| | 00:27 | Advanced Site Definition dialog box and
I'm just going to name this spry_intro.
| | 00:34 | I'll browse out to my Desktop, find my
exercise_files folder and I'll select
| | 00:39 | that. Now on the PC, you'll choose
Select and on the Mac, you'll choose Choose.
| | 00:44 | As soon as I click OK, it
will cache the site up for me.
| | 00:49 | Once your site is defined, in the
Files panel you'll have access to all the
| | 00:53 | Exercise Files organized by chapters.
So as you're following along with me with
| | 00:57 | the Exercise Files, you'll simply go
into the appropriate chapter, open the
| | 01:01 | Chapter folder and open
the Exercise Files within.
| | 01:05 | If you are a monthly or annual
subscriber to Lynda.com, you don't have access
| | 01:09 | to the Exercise Files but you can
follow along from scratch or from your own
| | 01:13 | assets. Let's get started.
| | Collapse this transcript |
|
|
1. Introducing SpryWhat is AJAX?| 00:00 | Although the term AJAX has been
around since 2005, there is still some
| | 00:04 | confusion about just what AJAX is. One
of the most prevalent misconceptions is
| | 00:09 | that AJAX is a new standalone
technology for creating interactive web pages.
| | 00:13 | In reality, AJAX, which stands for
Asynchronous JavaScript and XML, is a
| | 00:18 | combination of several existing
standards and technologies, all working
| | 00:22 | together to create a more
seamless and engaging user interface.
| | 00:25 | In the narrow sense, AJAX refers to
the process of eliminating the need to
| | 00:30 | refresh every time data on a page is
either changed or added. In a much broader
| | 00:35 | sense, the term AJAX is now used to
describe almost all user interactions
| | 00:38 | improved through the combination
of CSS, XHTML and JavaScript.
| | 00:44 | Take one of the first and still
one of the most popular AJAX-driven
| | 00:47 | applications, Google Maps. Before the
use of AJAX, users would have had to
| | 00:52 | request a specific map, wait for the
database to be queried and then be served
| | 00:57 | a brand-new page with
their new map displayed on it.
| | 01:00 | For each map requested, the server
would have had to process that request and
| | 01:03 | then serve up a brand-new page. This
process is not only inefficient for most
| | 01:07 | applications, it doesn't give the
immediate feedback that users want in an interface.
| | 01:12 | Through the use of AJAX, users can
get updated map information as it's
| | 01:16 | requested, even updating the maps as
users scroll from one area to the next. So,
| | 01:21 | what technologies make up AJAX?
| | 01:23 | Well, you should keep in mind that
AJAX is kind of a loose term. It means
| | 01:26 | different things for different people.
However, the most widely accepted
| | 01:30 | definition of AJAX components includes
a well-structured XHTML, CSS to control
| | 01:36 | the presentation and JavaScript to
control user interaction, data requests and
| | 01:41 | DOM manipulation.
| | 01:42 | XML and XSLT are typically used to
store and write data but they aren't
| | 01:46 | required and, in fact, any server-side
technology can be integrated into the
| | 01:50 | process to handle business logic and data.
| | 01:52 | Now, in addition, some AJAX-driven
applications make use of I-frames and DHTML
| | 01:57 | while other AJAX developers
avoid using them altogether.
| | 02:01 | The biggest factor in the rise of AJAX-
driven applications has been the release
| | 02:05 | of structured JavaScript frameworks.
That makes it much easier for web
| | 02:08 | designers and developers to
create AJAX-flavored sites.
| | 02:12 | Some of the more popular frameworks
include JQuery, Prototype and MooTools.
| | 02:17 | It should be noted that almost none of
them refer to the term AJAX in their
| | 02:21 | documentation. That term is more of a
catchall phrase to describe asynchronous
| | 02:25 | interfaces rather than to describe
the actual process or the frameworks themselves.
| | 02:30 | Adobe's JavaScript framework is called
Spry and it is an INET framework, aimed
| | 02:35 | that designers and developers, who are
looking to enhance the user experience
| | 02:39 | without having to write
a lot of additional code.
| | 02:42 | Adobe has integrated Spry into
Dreamweaver making it easier than ever to create
| | 02:45 | AJAX-driven websites. In this title,
I'll introduce Spry and show how you can
| | 02:50 | use it to create richer user
experiences within your websites.
| | 02:54 | Although Adobe automates much of the
process of integrating Spry into your web
| | 02:57 | applications, it's a good idea to
have a solid understanding of the
| | 03:00 | technologies and standards that Spry
relies on, so that you can go beyond its
| | 03:04 | default appearances and functionality.
| | Collapse this transcript |
| What is JavaScript?| 00:00 | One of the most important components of
any Spry enabled page is the underlying
| | 00:04 | JavaScript that controls its functionality.
| | 00:06 | JavaScript is a scripting language
that was developed in 1995 by Netscape and
| | 00:10 | has been gaining in popularity ever
since. Although it shares a similar name,
| | 00:14 | JavaScript actually has nothing to do
with the programming language Java, and
| | 00:18 | it's important not to confuse the two.
| | 00:20 | Netscape simply licensed the term
Java from Sun to help in the adoption of
| | 00:24 | their new scripting language. I guess
it worked, since JavaScript is still
| | 00:27 | around and Netscape, well,
for the most part isn't.
| | 00:30 | JavaScript allows you to do things
within the browser that XHTML can't do;
| | 00:35 | by creating interactive rollovers,
controlling browser window properties,
| | 00:39 | validating forms, and
generating dynamic content.
| | 00:42 | As it relates to web development,
JavaScript runs in the browser and not the server,
| | 00:46 | which makes it a popular
choice for client-side scripting.
| | 00:50 | One of the downsides to this
however is that each browser has its own
| | 00:53 | JavaScript interpreter which can make
for some frustrating cross browser issues.
| | 00:58 | Like most popular web development
languages, JavaScript is an object-oriented
| | 01:02 | programming language. Object-oriented
programming languages are by definition
| | 01:06 | made up of objects and classes of
objects that make scripting applications with
| | 01:10 | them much easier.
| | 01:11 | For example, let's say we want to have
our page send an email to us when a user
| | 01:16 | fills out a form. Almost all server-
side languages have a mail object that make
| | 01:21 | sending and formatting emails much
easier. We simply create a new instance of
| | 01:25 | the mail object and then use its pre-
built methods and properties to format and
| | 01:29 | send an email.
| | 01:30 | One of the main differences between
JavaScript and most web development
| | 01:33 | object-oriented programming
languages is that in JavaScript, objects are
| | 01:37 | created by attaching methods and
properties to otherwise empty objects at
| | 01:41 | runtime. This is very different than
the majority of compiled languages like
| | 01:45 | C++ and Java, which use predefined
class definitions to store common objects in
| | 01:50 | their properties.
| | 01:51 | This difference is one of the driving
factors behind the rising popularity of
| | 01:55 | pre-built JavaScript frameworks and
libraries. Instead of having to build
| | 01:59 | objects to control animation,
interactivity, and data handling, the developer
| | 02:03 | can simply use the predefined
objects inside the chosen framework.
| | 02:07 | This also makes it very easy for
web designers that are not fluent in
| | 02:10 | JavaScript to add advanced
functionality to their pages. Indeed, Spry was built
| | 02:15 | with designers in mind, making the
JavaScript unobtrusive and easy to
| | 02:19 | communicate with.
| | 02:20 | Although by using Dreamweaver and the
pre-built Spry JavaScript libraries,
| | 02:23 | you don't really have to know JavaScript to
add Spry functionality to your pages,
| | 02:27 | I can't recommend highly enough that
you learn JavaScript. With a functional
| | 02:32 | knowledge of JavaScript, you'll be
able to extend the existing Spry framework
| | 02:35 | and tweak the existing
libraries to do exactly what you need.
| | Collapse this transcript |
| What is XML?| 00:00 | Another important component of many
Spry driven sites is the use of XML to
| | 00:04 | store and display data. XML is a
common markup language used to share
| | 00:09 | information across multiple platforms,
and is widely used across all types of
| | 00:13 | web applications.
| | 00:15 | As a markup language, XML is very
similar to HTML. It stands for Extensible
| | 00:20 | Markup Language and is the W3C's
recommended specification for general-purpose
| | 00:25 | markup. This means, unlike other markup
languages, XML is not predefined and is
| | 00:30 | made up of the tags that you
create to describe the structure.
| | 00:33 | The primary purpose of XML is to share
data across different systems, since any
| | 00:38 | system that understands the current
document structure can access and use its data.
| | 00:42 | Although the tags in XML are not
predefined, XML documents must conform
| | 00:47 | to specific syntax to be considered
valid. Well-defined XML document must have
| | 00:51 | a root element. The elements must
have both opening and closing tags.
| | 00:55 | Invalidly nested tags are not allowed.
Attributes must be in quotation marks
| | 01:00 | and XML documents generally have a
declaration that identifies aspects of the XML file.
| | 01:05 | The complete XML specifications
can be found online at the W3C's
| | 01:10 | XML Recommendation page.
| | 01:12 | The typical structure of a simple
XML file is to have a root element that
| | 01:16 | describes the contents of the page
and then repeating child objects that
| | 01:20 | contain data in attributes of specific objects.
| | 01:24 | Here for example, I have the
contributors.xml file open. You'll notice that we
| | 01:28 | have a root tag, the contributors tag,
and if we go all the way down to the
| | 01:31 | bottom, we'll see the contributors tag
close. Inside of that, we have repeating
| | 01:35 | child elements, and in this case
we have one repeating child element:
| | 01:39 | the photographer. In each photographer,
we have an attribute value that's giving
| | 01:43 | the name of the photographer, and then
thus followed by the country, city, and camera.
| | 01:50 | So that repeating structure makes
it very easy to store data, and any
| | 01:53 | application that understands this
structure could find the name of our
| | 01:56 | photographers, the country of origin,
the city that they live in, and the
| | 02:01 | camera that they use.
| | 02:02 | As for Spry, Spry can use any valid
well-formed XML file to built datasets for
| | 02:07 | displaying content on your pages.
The XML can be freestanding or it can be
| | 02:11 | generated using server-side
technology based on databases or any other data
| | 02:16 | source. This creates a very
flexible and powerful means for storing,
| | 02:20 | manipulating, and displaying data within Spry.
| | 02:23 | We will discuss creating XML datasets
in Spry in greater detail later.
| | 02:27 | For the moment, I would recommend becoming
familiar with the structure and syntax rules
| | 02:31 | surrounding XML documents, so that you
can ensure you are using well-formed and
| | 02:36 | valid XML within your applications.
| | Collapse this transcript |
| Spry overview| 00:00 | Spry is Adobe's JavaScript based
framework that allows you to create powerful
| | 00:04 | Ajax driven web applications. Unlike
other JavaScript frameworks, Adobe's goal
| | 00:09 | in building Spry was to have the
framework seem like an extension of HTML and
| | 00:12 | CSS. That way anyone with basic web
production skills should be able to create
| | 00:17 | Spry enabled pages.
| | 00:19 | To make Spry even easier to implement,
Adobe has integrated it into Dreamweaver
| | 00:22 | since version CS3. As a designer,
you can add advance Spry functionality
| | 00:27 | directly from the Dreamweaver interface.
| | 00:29 | Spry is essentially made up of a set
of JavaScript and CSS libraries. To use
| | 00:34 | Spry on a page, you include the
JavaScript file that contains the Spry features
| | 00:38 | you need. Reference those features on
the page. Link to the CSS that controls
| | 00:42 | the presentation of the Spry elements,
and then deploy the JavaScript and CSS
| | 00:47 | files to your site along with your
page. For those Spry features that are
| | 00:50 | integrated into Dreamweaver, that
entire process is automated for you.
| | 00:55 | Spry is made up of three core
components. These are Spry data, which handles data.
| | 01:00 | Spry widgets, which can be
thought of as pre-built interactive
| | 01:03 | components. Spry effects, which can
animate, hide, or otherwise modify page
| | 01:09 | elements. These can be used
independently or combined together to create
| | 01:13 | compelling user experiences.
| | 01:14 | Well, here in my browser I have one of
those Spry widgets that I was talking
| | 01:18 | about opened up. This is an Accordion
widget and you'll notice it allows me to
| | 01:22 | present a lot of
information in a very small space.
| | 01:25 | Here we have the three bios of the
founder sof the site, and they're presented
| | 01:28 | in a very interactive, engaging
manner through the use of Spry.
| | 01:33 | Exactly how much work did it take
to get that? Well, let's go back into
| | 01:36 | Dreamweaver and check it out.
| | 01:37 | So here we are back in Dreamweaver,
and if I switch over to Code View, we can
| | 01:41 | see that we've got two lines of code at
the very top of the page, and these are
| | 01:45 | linking to external Spry Assets.
| | 01:48 | If I scroll a little bit further down
the page, I see that I have a collection
| | 01:53 | of div tags that are surrounding all
of my bio information. So this is just
| | 01:56 | normal XHTML structure. Each one of
these is identified with classes and IDs
| | 02:02 | that help create the widget structure.
| | 02:03 | Then at the very bottom of the code,
there is one line of JavaScript that
| | 02:08 | creates and enables our new Accordion
widget. So you can see, it doesn't really
| | 02:13 | take a whole lot of effort or work to
achieve some really nice functionality with Spry.
| | 02:18 | Another thing that I'd like to mention
is that Spry can also be used with any
| | 02:21 | server-side technology. That means
that you could build the user interface of
| | 02:25 | your application with Spry, thereby
creating a richer user experience that is
| | 02:29 | separated from the back-end application logic.
| | 02:32 | While Dreamweaver CS4 has integrated
Spry features, they are by no means
| | 02:35 | complete, and Spry itself is
completely tool-agnostic. You can create and
| | 02:40 | deploy Spry from any code editor that
you choose to use, or hand-code Spry
| | 02:44 | through Dreamweaver. In fact, there
are so many Spry features that are not
| | 02:48 | integrated into Dreamweaver, I highly
recommend digging deeper into Spry and
| | 02:53 | learning how to control it manually.
| | Collapse this transcript |
| Downloading the Spry framework| 00:00 | Although Dreamweaver ships with much of
the Spry framework, Adobe is constantly
| | 00:04 | updating and adding to it. In fact,
Spry is still considered to be in beta.
| | 00:09 | Before starting any Spry project, you
should check to make sure you have the
| | 00:12 | most current release. As of this
recording, the Spry 1.61 release is the most
| | 00:18 | current version. Although Dreamweaver
CS4 shipped with Version 1.6, Adobe has
| | 00:23 | created a Spry Updater for Dreamweaver,
which can update any previously built
| | 00:27 | Spry content to the latest version.
| | 00:30 | You can download both the Spry 1.1
release as well as the Dreamweaver Updater
| | 00:34 | from Adobe's Spry homepage, and
here we are at Adobe's Spry homepage.
| | 00:39 | You'll notice on the left-hand side
we have a lot of information about
| | 00:42 | Documentation and Samples, and we'll
talk more about that a little bit later
| | 00:45 | on. Right now, I want to talk about
downloading the Spry framework; that's a
| | 00:49 | must for anybody that's going to be
working with Spry, even if you have the
| | 00:52 | latest version of Dreamweaver.
| | 00:54 | On the far left-hand side, this is the
Dreamweaver Spry Updater. So if you've
| | 00:58 | built some applications with an
earlier version of Spry, something prior to
| | 01:01 | 1.6, you'd want to download that using
the Extensions Manager and then update
| | 01:06 | your older pages.
| | 01:07 | However, if you're looking for the
Spry framework, you can find that right up
| | 01:10 | here in the upper-left hand corner. I
should point out that if you download the
| | 01:14 | entire Spry framework, the Dreamweaver
Spry Updater is included. So I'm going
| | 01:18 | to go ahead and click to Download the
Spry framework. Before you download it,
| | 01:23 | you'll need to enter in an Adobe ID
and your Password. And if you don't have
| | 01:32 | one of these, they're free. So just
take a moment or two to sign up, and you'll
| | 01:37 | be downloading Spry in no time.
| | 01:38 | This will take you to the Download page,
where you have to agree to Terms of
| | 01:42 | Use. It will discuss what the latest
version is, and the download for both Mac
| | 01:47 | and Windows is the same file, and it's
a zipped file, and all you have to do to
| | 01:51 | install the Spry framework is extract it.
| | 01:59 | So here I've got the Spry framework
that I've downloaded. I'm going to go ahead
| | 02:02 | and extract that, and it's going to
take a second or two. But as soon as it's
| | 02:08 | finished extracting, we're going to
take a look inside and see what is included
| | 02:11 | with the release of the Spry
framework. Okay, there we go.
| | 02:18 | Inside the Spry folder you're going
to find a wealth of information. In
| | 02:22 | addition to all the files that you need;
and you can find those in the Includes
| | 02:26 | folder, here we have a whole set of
JavaScript library that contains utilities
| | 02:31 | and datasets. We also have widgets,
such as the SlidingPanels widget, that
| | 02:37 | we'll be building later on. So here is
all the files necessary to build that.
| | 02:40 | There are different versions that
they've got as well. They do have the
| | 02:44 | minified versions, so for deployment
you may want to use those, to save a
| | 02:47 | little bit of space and save on bandwidth.
| | 02:50 | But I do want to point out that the
Dreamweaver Updater is included as part of
| | 02:54 | this install, plus we have articles,
demos, samples, a couple of HTML files
| | 03:00 | that you can open up and pick through
and see exactly how they're building
| | 03:02 | stuff. So it's not just the JavaScript
files that are included with the Spry
| | 03:06 | framework, there is a lot of
information there to get you started and to help
| | 03:09 | serve as a point of reference for you,
as you continue to go deeper into Spry.
| | 03:13 | Well, now that the Spry framework is
installed and ready to use, let's take a
| | 03:17 | look at Adobe's online Spry
documentation, which should serve as a starting
| | 03:22 | point for any project using Spry.
| | Collapse this transcript |
| Using Adobe's online Spry documentation| 00:00 | To get the most out of any Spry based
project, you should take advantage of
| | 00:03 | Adobe's extensive series of tutorials,
samples, and documentation on the Spry
| | 00:08 | homepage. Whether you are using them
as a starting point or as a reference,
| | 00:12 | these files offer a wealth of
information about working with Spry.
| | 00:15 | So here we are on the Spry home age,
its labs.adobe.com. You can see on the
| | 00:21 | left-hand side here we have links to
Demos, Documentation, Samples, Forums,
| | 00:26 | Adobe's Development Center, with a
focus on Spry, so there's a lot of really
| | 00:30 | good information here.
| | 00:31 | Now, let's take a look at the
Documentation first. So the Spry Documentation
| | 00:35 | looks pretty plain, but there's some
really cool stuff in here. So as I scroll
| | 00:40 | down, you can see we have some overview
articles about data sets and regions, a
| | 00:44 | primer on Spry, and if you're new to
technologies like XML and JavaScript,
| | 00:48 | there's also some links on here for you as well.
| | 00:50 | If you want to work with Spry data,
we have a whole series of articles on
| | 00:54 | working with data.
| | 00:56 | Each widget has its own page, and let's
go check the Sliding Panels widget out,
| | 01:01 | where it describes exactly how the
panel works and gives you some code sample
| | 01:06 | to show you how the
widget is built and controlled.
| | 01:08 | Well, in addition to the
Documentation, we also have some Samples. On the
| | 01:14 | Samples page, we have a whole series
of samples that range from both basic to
| | 01:18 | really advanced stuff. You can come
check out examples on using Spry Data, the
| | 01:23 | Utilities that come with Spry,
things like Effects, widgets.
| | 01:28 | So here is the Accordion Panel Sample,
and they've got a whole series of
| | 01:33 | samples. So let's just check out the
Default Behavior and Style, and you can
| | 01:37 | see it in action. You can also go in
and check out the code and break it down
| | 01:41 | and see how you'd use it in your own pages.
| | 01:42 | Now remember, there's more here than
just the Documentation and the Samples,
| | 01:48 | there's also a set of Forums, a Blog
that's updated on a continual basis to let
| | 01:52 | you know what's new in Spry. You can
go to the Development Central to find
| | 01:55 | longer articles and tutorials.
| | 01:58 | By spending some time on the Spry
homepage and examining the Spry framework
| | 02:02 | documentation carefully, you'll find
an entire world of functionality and
| | 02:05 | capabilities that, not only will
enhance your understanding of what you'll find
| | 02:08 | in Dreamweaver's normal toolset, but
that will also go well beyond it. Any
| | 02:13 | designer or developer that is
considering adding Spry functionality to their
| | 02:16 | pages should have these pages
bookmarked and should visit them frequently.
| | Collapse this transcript |
| Dreamweaver-Spry integration| 00:00 | To make deploying Spry even easier
for web designers, Adobe has integrated
| | 00:04 | large parts of the Spry framework into
Dreamweaver. Dreamweaver allows you to
| | 00:08 | automate the process of adding Spry
functionality to your site, speeding up the
| | 00:12 | development process and making it
possible for designers who are not fluent in
| | 00:16 | JavaScript or web development
to create Ajax driven sites.
| | 00:19 | In this movie, we'll take a brief
tour of where to find Spry elements in
| | 00:23 | Dreamweaver. Before we get into exactly
where to find everything Spry related,
| | 00:27 | I want to point out the Help features
that Dreamweaver has, related directly to Spry.
| | 00:32 | So if I go up to the Menu to Help, I
can see that the first link is to the
| | 00:36 | normal Dreamweaver Help. If I go to the
online Help directory, I can see that I
| | 00:42 | have an entire section on Building Spry
pages visually, where we get overviews
| | 00:47 | of working with the different widgets,
working with the Spry framework, and
| | 00:50 | where to find everything within
Dreamweaver. That's really cool!
| | 00:53 | Now, I don't know if you noticed it
or not, but I'm going to jump back into
| | 00:56 | Dreamweaver, and you may have noticed
that directly under the Help file there's
| | 01:00 | this cool little Spry Framework Help.
Let's go ahead and click on that and see
| | 01:04 | what that's all about.
| | 01:05 | Now, this takes me to Adobe's
LiveDocs page, to the Spry framework for Ajax
| | 01:11 | Developer's Guide. Here we have
sections on working with Spry widgets, working
| | 01:15 | with data sets, building dynamic pages,
and also working with Spry effects, so
| | 01:20 | there's a lot of information here as
well. So you might want to use either of
| | 01:24 | these Help sections, if not both of them,
as a starting point for working with
| | 01:28 | Spry and Dreamweaver.
| | 01:29 | Now, let's go back into Dreamweaver
and see where in the interface we can
| | 01:33 | access all these really cool Spry tools.
So here we are back in Dreamweaver.
| | 01:37 | One of the most obvious places to
look for Spry functionality would be an
| | 01:41 | Insert toolbar, and indeed, Spry has
its own toolbar. You'll notice its broken
| | 01:46 | up into sections, and the first
section involves dealing with Spry Data. The
| | 01:50 | second section involves the Spry Form
Validation widgets, and then the third
| | 01:55 | section involves the User Interface widgets.
| | 01:57 | Now, that's not the only place we can
find those, you'll notice that if I look
| | 02:01 | in Layout, I have the User Interface
widgets. If I look in Forms, I have the
| | 02:06 | Form Validation widgets. If I look in
Data, there are all the data elements
| | 02:11 | involved as well. Now, those are
exactly the same as the ones that we find in
| | 02:14 | the Spry Insert toolbar, they're just
placed there so that as you're working
| | 02:18 | with those types of objects, you will
have access to the Spry objects as well,
| | 02:21 | which in my opinion is pretty darn nice of them.
| | 02:23 | That is not the only place where
you can find Spry functionality in
| | 02:27 | Dreamweaver. If I go over to the Tag
Inspector and I look at the Behaviors
| | 02:32 | Panel, you may have noticed this before,
because Behaviors has been around for
| | 02:35 | a very long time inside Dreamweaver,
but something that's rather recent to
| | 02:39 | Dreamweaver is this little
Effects fly-out Menu there.
| | 02:41 | Well, those are all Spry Effects. So
if you add one of these. Let's say you
| | 02:45 | take something in Grow it or Shrink it
or Fade it out, you're actually using
| | 02:50 | Spry, even though you might not have known it.
| | 02:52 | At some point in the process of using
Spry, you are going to figure it out. Let
| | 02:56 | me show you what I mean. Let's say I
highlight the word home" here and I insert
| | 03:00 | a Spry Tooltip widget. This is a
really neat little feature that enables the
| | 03:04 | Tooltip; if you hover over something,
it will float the Tooltip up. Here's the
| | 03:09 | Tooltip content right down there. Let's
just type in Click here to go home. Not
| | 03:15 | the best Tooltip I've ever done in
the world, but it will suit our needs.
| | 03:18 | So if I save this file, notice that
Dreamweaver is telling me, hey, you need
| | 03:23 | certain files in order for this
functionality to work, and these are what we
| | 03:26 | call Spry Assets. Its going to copy
those over to my site, and when I click OK,
| | 03:30 | if I were to Preview in this Live View
and I were to hover over home, you'll
| | 03:34 | notice that there is the Tooltip. Perfect!
| | 03:37 | So you can see that Dreamweaver makes
adding Spry functionality to our pages
| | 03:42 | really, really easy. As a matter of fact,
it's as easy as adding any other page element.
| | 03:46 | Keep in mind that the process of
adding Spry to your pages will require
| | 03:50 | Dreamweaver to link to and add
external assets to your site. Managing those
| | 03:55 | assets and making sure that you don't
disable functionality, by either removing
| | 03:59 | or failing to update links is
extremely important, and will be a continuing
| | 04:03 | theme for this title.
| | 04:04 | We'll also take a closer look next on
how to plan strategies for managing those assets.
| | Collapse this transcript |
| Managing Spry assets| 00:00 | One of the biggest challenges when
working with Spry in Dreamweaver is managing
| | 00:04 | the Spry assets that are necessary for
your Spry elements to function. When you
| | 00:08 | add a Spry element to your page and
save the file, Dreamweaver is going to add
| | 00:12 | the necessary external asset files to
your site and link them to that page.
| | 00:17 | By default Dreamweaver is going to add
those files to a folder named SpryAssets
| | 00:22 | that it will locate inside the root
folder if that folder doesn't already
| | 00:26 | exist. It will just go ahead and
make it for you. For the most part this
| | 00:30 | process is fairly painless and
requires you to only upload the SpryAssets
| | 00:34 | folder along with the rest of
your site, when you deploy it.
| | 00:36 | However, when things get a little bit
more complicated, it's really easy for
| | 00:40 | these assets to get mixed up,
overwritten or removed without updating the link.
| | 00:45 | By being aware of how Dreamweaver
adds these files and what you can do to
| | 00:48 | control them, you can
avoid any serious problems.
| | 00:52 | So here I have the contact.htm file
open from the 01_08 folder and if I scroll
| | 00:57 | down in the sidebar here, I can see
where I like to put a tabbed panel widget
| | 01:02 | where the users could tab back and
forth between the featured photographs. So
| | 01:05 | far so good, right? So I'm to go right
up here and I'm going to click to Insert
| | 01:09 | a Spry Tabbed Panels widget. When I
do that, I didn't get kind of what I
| | 01:14 | expected here. So let me save the file.
Notice I didn't copy over any files
| | 01:20 | even when I saved it. So, what in the
world is going on here? This does not
| | 01:23 | look like the default Tabbed Panels
widget and I thought it was going to copy
| | 01:27 | over some files since I was
asking for a brand new widget.
| | 01:30 | Let's try to figure out what's going on
here. If I open up the shop.htm, I can
| | 01:34 | see that this one already has a Tabbed
Panel widget. And this particular Tabbed
| | 01:38 | Panel widget is designed specifically
for the shop page. So the styles and the
| | 01:42 | functionality of it have been
overwritten from the default. Okay, so, what
| | 01:47 | happened with our other page is that
when we ask for a Tabbed Panel widget
| | 01:51 | here, Dreamweaver saw that in the
SpryAssets folder those assets were already
| | 01:55 | there. So instead of overwriting them,
it just figured, oh, you must want to
| | 01:59 | use those again.
| | 02:00 | Well, that's not going to be true in
every single case. And as a matter of
| | 02:03 | fact, if you guys were doing this
along with me, I really doubt that you saw
| | 02:07 | the same result that I did. You
probably saw a brand new default Tabbed Panel
| | 02:11 | widget and you probably saw files
getting copied over. So what in the world is
| | 02:15 | going on here?
| | 02:16 | Well, one of the really cool things
about Spry and Dreamweaver is that in terms
| | 02:20 | of the Spry assets, you can tell
Dreamweaver exactly where it should place
| | 02:24 | those files. Before the exercise, I
kind of achieved it a little bit and I told
| | 02:28 | it to place it in the 01_08 SpryAssets
folder. How could I have avoided what
| | 02:33 | just happened here? Let's go ahead and
Undo this little Tabbed Panels. And I'm
| | 02:38 | going to help to place these asset
files separate from my other ones, in that
| | 02:42 | way, I'll have two sets of the Tabbed
Panel assets and I'll be able to control
| | 02:46 | and modify them separately.
| | 02:47 | So here's how we do that. I'm going to
go over to the 01_08 folder. I'm going
| | 02:51 | to right click and choose to create a
New Folder. Just going to call these
| | 02:56 | photoAssets since they are going to
deal with my featured photos. If I go up to
| | 03:01 | the Site Definition, here is the name
of my site, right here, spry_intro. If I
| | 03:04 | double click that, that opens up the
Site Definition dialog box. Now this is
| | 03:08 | something we are going to do a lot of
in this course. I'm going to go all the
| | 03:11 | way down to the bottom category, which
is Spry, and right here is where I can
| | 03:15 | browse and tell Dreamweaver where it
should be placing the Spry assets from my site.
| | 03:20 | So if you want to place them in a
different directory or if you want to create
| | 03:22 | several different sets, this is how
you do that. So I'm going to go ahead and
| | 03:26 | click on this folder to browse, I'm
to go up into the 01_08 and choose the
| | 03:31 | photoAssets folder. I'll
select then I'll click OK.
| | 03:34 | All right, let's try that again. I'm
going to click in the Featured Photos and
| | 03:39 | I'm going to insert a new Spry Tabbed
Panels, there we go. Now I'm getting the
| | 03:45 | default styling and if I save it,
notice that it's copying over the
| | 03:49 | SpryTabbedPanels.css and the
JavaScript file. And notice where's it's copying
| | 03:53 | them to. To the photoAssets directory.
| | 03:56 | So using this method, I'm now in
control of exactly where all of my Spry assets
| | 04:01 | are added to my site. So I hope this
exercise demonstrates how important it is
| | 04:05 | to have a plan for managing your Spry
assets. By planning ahead of time, which
| | 04:10 | assets your site will need and how
those assets will be modified and deployed,
| | 04:14 | you can avoid having any unfortunate
styling conflicts and non-functioning elements.
| | Collapse this transcript |
|
|
2. Spry Effects and Spry WidgetsUnderstanding Spry effects| 00:00 | In this chapter we'll take a closer
look at two of the main components of Spry,
| | 00:04 | Spry Effects and Spry widgets. Spry
Effects are combinations of JavaScript and
| | 00:09 | CSS that cause page elements to change
appearance, size or position. They can
| | 00:14 | be triggered by user interaction, and
can help enhance user interactivity,
| | 00:18 | transition elements from one state to
another and increase the visual focus of
| | 00:22 | a specific element.
| | 00:23 | There are seven predefined effects in
the Spry framework: Fade, Highlight,
| | 00:28 | Blind, Slide, Grow, Shake and Squish.
In reality these are just clusters of the
| | 00:36 | core animator classes Move, Size,
Opacity and Color, as you can imagine being
| | 00:41 | able to change the position, size,
opacity and color of elements on the page,
| | 00:45 | it allows you to create
some compelling visual effects.
| | 00:48 | So here I have a summary of all the
different effects, and we'll just go
| | 00:50 | through them one by one and preview
these guys. Now I have these effects all
| | 00:54 | applied to div tags, and one of the
thing you will notice, is some of the
| | 00:58 | effects can be applied to just about
any element, well, some are restricted to
| | 01:02 | specific elements, and those
are mentioned in the summaries.
| | 01:05 | So the first thing I want to take a
look at is the Appear/Fade, so if I like
| | 01:08 | the click the Appear/Fade button, we
can see that our targeted tag fades out.
| | 01:12 | Now a lot of the effects can be set to
toggle, and those like if I click again,
| | 01:16 | it comes back, if you needed to toggle
back and forth, most effects can do that
| | 01:20 | for you. So I'll scroll down a little
bit and we'll find Blind. Notice that
| | 01:25 | Blind is going to roll that up or
close it just like a window shade blind
| | 01:28 | would, but I want you to notice
something about the content, and as the content
| | 01:32 | stays in place, while the Div
tag itself collapses and expands.
| | 01:37 | Next we have Grow and Shrink, and the
interesting thing about Grow and Shrink
| | 01:41 | is that you can set this from the
center of the element, or you can do it as we
| | 01:44 | are doing it here from the top left-
hand corner. Notice that it affects both
| | 01:47 | the content and element itself.
| | 01:49 | Next we have Highlight, and what
Highlight is going to do for you is, it's
| | 01:53 | going to change color from one color
to another. So you have the starting
| | 01:56 | color, and you have the stopping color.
In this case the starting color was the
| | 01:59 | default gray, and the end color was
the yellow. If I run the effect again,
| | 02:03 | notice it does the same thing. A lot
of people will use roller effect for
| | 02:07 | highlight, and it can be really
effective in rolling over one elements and
| | 02:10 | having another element highlight.
| | 02:12 | Next we have Shake, which is a fun
little effect, it just kind of shakes it
| | 02:15 | back and forth. We have Slide, now
Slide is very similar to Blind. Notice this
| | 02:20 | time though that the content also
animates, so it's not just the Div tag itself
| | 02:24 | that collapses, Slide literally moves
to Div tag and hides the portion of it
| | 02:28 | that is moving.
| | 02:30 | And then finally we have Squish,
Squish is a lot like Grow and it always
| | 02:35 | animates from the top left-hand
corner. Squish can also be set to toggle
| | 02:39 | through Dreamweaver, you can do it
through code, but you can't do Dreamweaver.
| | 02:41 | So in order to see that again, I'll
just refresh the page, and I can run the
| | 02:45 | effect again.
| | 02:47 | Used correctly Spry Effects can be
a very elegant way of enhancing the
| | 02:50 | interactivity and design of your pages,
and as we'll see their ease of use
| | 02:55 | makes them incredibly easy to
implement them on your pages.
| | Collapse this transcript |
| Adding Spry effects| 00:00 | Although adding Spry Effects through
code is actually pretty simple and only
| | 00:04 | requires a minimal amount of coding,
if you are using Dreamweaver the process
| | 00:08 | is even easier. In Dreamweaver you
add Spry Effects through the Behaviors
| | 00:12 | panel, just like any other JavaScript
behavior. As you apply a Spry Effect,
| | 00:16 | Dreamweaver will prompt you to set
options that are specific to that effect.
| | 00:20 | In this example we'll add the Blind
Effect to three of our page elements to
| | 00:24 | reduce their footprint, and add user
activity to our page. Now before we get
| | 00:28 | started, we are going to have to take
a moment and redefine where Dreamweaver
| | 00:32 | copies our Spry assets. Now if you've
watched the earlier movie on managing our
| | 00:36 | Spry assets, you know exactly what
I'm talking about, and if you haven't, I
| | 00:40 | recommend pausing this one, going back
and watching that one again, so that you
| | 00:43 | have a really good understanding of
how Dreamweaver handles adding new Spry
| | 00:47 | Assets to your site. What we are
going to do, is we are going to tell
| | 00:50 | Dreamweaver exactly where
to place our new Spry Assets.
| | 00:52 | So what we are going to do, if you are
following along with me in the exercise
| | 00:55 | files we are going to go to the 02_02
folder in our Chapter_2 folder I'm going
| | 01:00 | to go ahead and right click that folder,
choose New Folder, and I'm going to
| | 01:03 | title it, SpryAssets. Notice that this
is all one word, capital S, Capital A.
| | 01:08 | Now it doesn't have to be named that,
Dreamweaver can put these in any folder
| | 01:11 | you want them to, we are just going to
do that because it's a consistent naming
| | 01:14 | that we'll use the entire class.
| | 01:16 | Now I need to go and edit my site
definition, and I can do that very easily by
| | 01:20 | going over to my Files panel and
double clicking the name of my site right
| | 01:23 | there, spry_intro, and that brings up
my Site Definition dialog box. I'll go in
| | 01:28 | Advanced tab. go right down the Spry.
And what I need to do now is I need to
| | 01:33 | browse out to folder that I just
created. So I'm going to go up to the
| | 01:37 | Chapter_2 folder, 02_02 SpryAssets,
I'll open that one and I'll select it.
| | 01:45 | Any new Spry Assets that needed to be
added to my site will now to be added to
| | 01:48 | this folder, and this is the way that
we are going to keep all that localized,
| | 01:53 | so that we don't overwrite some of
those Spry Assets stuff that we have already
| | 01:55 | got in our site. Now let's see what we
are actually going to do here, I'm going
| | 01:59 | to scroll down towards the bottom of
the page, and at above the page I see a
| | 02:03 | couple of bios. There is me, there's
my friend Danny, and my friend Greg, and
| | 02:09 | these bios don't require a lot of
scrolling, but it would be really nice if
| | 02:12 | after they were done reading one, they
can sort of roll it up to read the other
| | 02:15 | ones, and Spry Effects are
going to allow us to do that.
| | 02:18 | So the first thing I'm going to need to
do, is go ahead and give each of these
| | 02:21 | elements an id. So if I click inside
in my headline here James Williamson, I
| | 02:26 | can see that the div that's around it
has an id of jamesBio. And then Danny's
| | 02:34 | is, of course as you would imagine,
it's danBio, and Greg's is gregBio. That's
| | 02:40 | very important, because as we are
setting options for the Blind effect, it's
| | 02:43 | going to want to know which
element we are going to be driving.
| | 02:46 | Now the next thing we need to do is,
we need to figure out which element is
| | 02:49 | going to serve as a trigger for it,
and the natural trigger for this effect
| | 02:52 | would be our headlines. So we'll do
the first one by clicking inside the
| | 02:56 | headlines James Williamson, and if
you want you can use the tag selector to
| | 02:59 | click on that, and actually select the
h1 tag, although being inside it will be
| | 03:03 | fine to, but I think you will be
happy with results, you can go ahead and
| | 03:06 | highlight that, and I'm going to go
over to my Tag Inspector panel and click on
| | 03:10 | the Behavior.
| | 03:11 | So we find our Spry Effects in the
same place that we find all of our
| | 03:15 | JavaScript behaviors. I'm going to go
ahead and click on the plus symbol, I'm
| | 03:18 | going to get on the Effects, and I'm
going to choose Blind. Each effect has its
| | 03:24 | own set of options, but they'll look
very similar to this. The first thing that
| | 03:29 | it's going to ask you is, who do you
want to effect? It doesn't have to be the
| | 03:32 | element that you have selected,
although that's the default.
| | 03:34 | So I'm going to grab the pull-down menu
and you can see any element that has an
| | 03:38 | id I can go ahead and affect, and I'm
going to choose jame'sBio. The Effect
| | 03:42 | Duration is in milliseconds, and I'm
going to make that a little faster, maybe
| | 03:45 | 500 milliseconds, so half a second,
rather than a whole second. And I can
| | 03:49 | choose either to Blind it up or Blind
it down, and since we are starting with
| | 03:53 | these open, I'll have a Blind up, and
it can Blind from 100% to 0% or whatever
| | 03:59 | you'd like that. Now 0% means
totally hidden, and I don't want it totally
| | 04:03 | hidden, what I would like to have,
is just the headlines still visible.
| | 04:07 | It's interesting, because you can mix
percentages and make use of measurements
| | 04:11 | like pixels. So I'm going to have it
actually Blind up to 30 pixels instead of
| | 04:15 | 30%. It's nice, and then I want the
effect to Toggle, because I want to give
| | 04:20 | the person the ability to open and
close them. So I'm going to click OK, and
| | 04:25 | then this becomes extremely simple,
because it's going to repeat it for the
| | 04:28 | other two headlines.
| | 04:29 | Now I do want to point out one thing
before I do that, if you look in the
| | 04:32 | Behaviors panel, you can see there is
our Blind Effect and there is the trigger
| | 04:35 | for it on click, if you wanted to, you
could change that. So you could change
| | 04:39 | that to a MouseOver or MouseOut. So
you are not stuck with the default event,
| | 04:43 | you can have any event
that you want triggered at.
| | 04:46 | All right, just go ahead and do it for
the rest of these guys. So I'll go to
| | 04:50 | Danny's headline, select it, go to
Blind, make sure that we are effecting his
| | 04:55 | bio, take that effect on the 500
milliseconds, and remember I'm going to change
| | 05:01 | that to 30 pixels, and not percent and
we'll toggle it. Third time as the charm
| | 05:07 | we'll go ahead and do Greg, we'll
Blind effect, make sure we are going the
| | 05:14 | gregBio, do that at 500 milliseconds as
well, give that a 30 pixels, and again
| | 05:23 | toggle effect.
| | 05:24 | Now I'm going to do is Save All and as
soon as I do that, notice that it said,
| | 05:30 | hey, you need an external JavaScript
file to make this work, and I'm going to
| | 05:35 | go ahead and copy this over. So notice
where it's placing it. It is placing it
| | 05:38 | in 02_02 SpryAssets directory and the
reason it's placing it there, we told it
| | 05:42 | to. And I'll go ahead and click OK
and then preview that in my browser.
| | 05:49 | Now if I scroll down each one of these
and click on them, and notice they Blind
| | 05:54 | right up. So also the toggle, so if I
click on it again it extends. Now I truly
| | 06:00 | believe and it's the little things
that make a big difference, and you'll
| | 06:03 | notice that the user is not getting
any feedback whatsoever, that these
| | 06:07 | elements are clickable. So the next
thing we need to do is go ahead and take
| | 06:10 | care of that really quickly. So I'm
going to close my browser, and I'll go back
| | 06:14 | to Dreamweaver, and I'm going to go
into my CSS styles, and I'm going to look
| | 06:19 | at all styles.
| | 06:20 | Now we already have a selector that
can help us out here. So I'm going to
| | 06:24 | browse down, and as I go through, I
can find #maincontent. galleryArticle
| | 06:32 | div.bioContainer h1, so it's a long
selector, but it's not too far down. Now if
| | 06:38 | I click on this, I could double-click
this to open it up and edit it with the
| | 06:42 | dialog box, but I really like
changing my properties down here in the
| | 06:45 | Properties view. So I'm just going to
come down here right below the list of my
| | 06:49 | styles. I want to make sure that I
have to show only Set Properties icon
| | 06:53 | selected here down below that, and I'm
just going to add a property. I'm going
| | 06:56 | to add the Cursor property, you can
grab that from a pull-down menu or if you
| | 07:01 | are comfortable you can just type that
in, and I'll hit Tab, and I'm going to
| | 07:05 | type in pointer, perfect. Just do one
more, Save All, let's preview that in the
| | 07:11 | browser one more time.
| | 07:14 | Now we are getting the feedback that
says, hey, this is clickable, and when you
| | 07:17 | click on it, pulls it up, excellent,
exactly what we wanted to, how much code
| | 07:24 | did that take? Let's go and find out.
If I switch over to Code View, I notice
| | 07:28 | that my h1 tag has a little bit of
JavaScript that's responding to the click
| | 07:34 | event. Let's find the MM_effectBlind
and then if I scroll up to the head of my
| | 07:39 | document, I can see that I have a
predefined function right there that's
| | 07:44 | calling the DoBlind function on this
Spry Effects, and then I have the link to
| | 07:49 | my external SpryAssets file and
that's it. That's all it required.
| | 07:53 | So the overall process for adding Spry
Effects is the same for each effect. Now
| | 07:57 | keep in mind that while the overall
process for adding Spry Effects is the same
| | 08:00 | for each effect, each one is unique and
requires input that is specific to that
| | 08:05 | effect. You should also note that
occasionally certain options will not be
| | 08:08 | available through Dreamweaver's
Behaviors interface, and will need to be added
| | 08:12 | through code if you need them.
Truthfully, while our Blind effect is adding
| | 08:15 | some spice to or bio capsules, by
themselves they are a bit lacking, they
| | 08:18 | aren't communicating with each other
at all, opening and closing one of them
| | 08:22 | has no effect on any of the others.
| | 08:24 | In that case we might be better off
using a widget. widgets are more complex
| | 08:29 | interactive structures that allow us
to display related data in a visual and
| | 08:33 | interactive component. Before exploring
using a widget for our bios, we should
| | 08:37 | take a moment to discuss widgets in
greater detail, and we'll do that next.
| | Collapse this transcript |
| Spry widget overview| 00:00 | Spry widgets are user interface
components that allow you to display content in
| | 00:04 | small spaces, enable navigation and
increase user interactivity.
| | 00:09 | Although all Spry widgets have unique structure
and interactivity, they all share a common
| | 00:13 | makeup of clean, well-structured XHTML,
element-specific CSS and interactive
| | 00:20 | JavaScript functions that
control interactivity and behaviors.
| | 00:23 | This consistent structure makes it easy
to work with all widgets after learning
| | 00:27 | the basics of using and modifying them.
Within the Spry Framework each widget
| | 00:31 | has its own set of unique CSS and
JavaScript files. If you insert one of these
| | 00:36 | widgets using Dreamweaver, Dreamweaver
will automatically link these files to
| | 00:40 | your page to control the
widget's functionality and styling.
| | 00:43 | From that point, you can modify the
content the same way you add any XHTML to
| | 00:48 | the page. You can control the
appearance of the widget by modifying the related
| | 00:52 | CSS. So before we get into inserting a
widget on our own, I want to do a brief
| | 00:56 | overview of the widgets that are
available through the Dreamweaver Interface.
| | 01:00 | Each of these widgets are presented
here using their default styling and
| | 01:04 | makeup. So if you put one on the page,
this is what you'll see before you
| | 01:07 | modify it. So the first one I want to
take a look at is an extremely popular
| | 01:10 | one. It's the Spry menu bar. So if you
ever wanted one of those pulldown menu
| | 01:16 | systems that you see everybody having
and that are CSS and JavaScript-based,
| | 01:20 | you can just grab one of those by
inserting this widget and you can have as
| | 01:24 | many nested menu structures as you want
with this. This is just the default one
| | 01:28 | that kind of shows you what's possible.
| | 01:29 | If I scroll down a little bit, we also
have our Tabbed Panels and it allows you
| | 01:34 | to display content from one panel to
the next. There is a really nice way of
| | 01:39 | showing a lot of content in a small
space. Now if you want a more interactive
| | 01:43 | take on that we have the Accordion widget.
| | 01:45 | The Accordion widget lets you have some
panels as well, but these panels slide
| | 01:49 | and animate up and have different focus
states that you can respond to as well
| | 01:53 | as hover states. So that's pretty
cool. We also have the Spry Collapsible
| | 01:58 | Panel, which is much like an Accordion
widget, but it's just a single panel.
| | 02:02 | Also, notice that you're basically
blinding that panel up or down using the
| | 02:06 | Blind effect. So you can see it's a
combination of structure and effect.
| | 02:10 | Finally, we have one of my favorite
widgets, the Tooltip widget. With the
| | 02:13 | Tooltip widget you have a trigger
element on the page and then when you hover
| | 02:16 | over that, you get to see the Tooltip
content and the Tooltip content can be
| | 02:20 | anything you want. Notice that the
default content is just some text but it can
| | 02:24 | be images, and really anything we want
to put in it. So you can do some really
| | 02:28 | creative, cool things with the Tooltip.
| | 02:30 | The great thing about using
Dreamweaver to build Spry widgets is that it does
| | 02:33 | the heavy lifting for you. As a
designer you can focus on styling and layout
| | 02:38 | and let Spry handle the
functionality and structure behind the widget. It
| | 02:42 | should be noted that not all Spry
widgets are available through the Dreamweaver
| | 02:45 | interface and require minimal hand
coding to insert into your pages.
| | 02:49 | For more information on all of the
Spry widgets, be sure to explore Spry's
| | 02:53 | online documentation.
| | Collapse this transcript |
| Adding Spry widgets| 00:00 | Now that we've spent some time
examining the Spry widgets available in
| | 00:03 | Dreamweaver, let's add one to our
site. The About page that we looked at
| | 00:07 | earlier contains the bios of the three
founders of the Desolve.org site. In a
| | 00:12 | previous movie we added a Spry effect
to increase user interactivity with our
| | 00:15 | bios. Although, the effect looks good,
the way that it is currently applied
| | 00:19 | isn't as coherent as we'd like it to be.
| | 00:22 | Interacting with one element does not
affect the remaining elements at all. To
| | 00:25 | create a more intuitive user experience,
we'll replace the effects with a Spry
| | 00:29 | widget. Often, deciding on which widget
to use in a specific instance requires
| | 00:34 | careful thought. In this example, we
have three bios that we would like to
| | 00:38 | display in a shorter space and also
add some interactivity to encourage users
| | 00:43 | to read them.
| | 00:44 | While the Tabbed Panels widget would
work well here, the Accordion widget
| | 00:47 | features a series of collapsible panels,
which use the same animation we had
| | 00:52 | applied by using the Blind effect.
Since that's the animation we want, we'll go
| | 00:56 | with an Accordion widget.
| | 00:57 | Now before I get started, we've got to
manage our S Spry assets again. So I'm
| | 01:01 | going to go over to the 02_04 folder,
I'm going to right-click and create a new
| | 01:08 | folder and I'm going to name this new
folder SpryAssets. Now again, if you
| | 01:11 | haven't viewed the movie on managing
our Spry assets I would highly encourage
| | 01:16 | you to go back and do that again so
that you understand exactly why we're doing this.
| | 01:20 | The next thing I'm going to do I'll
double-click the name of my site here,
| | 01:23 | spry_intro. That will take me to the
Site Definition dialog box and once again,
| | 01:28 | I'll go down to Spry, and then we'll
browse out to our newly created SpryAssets
| | 01:33 | folder. Remember this is in the 02_04
directory, SpryAssets, and if you're
| | 01:39 | following along with me at home with
other files, just make sure that you have
| | 01:42 | an empty folder in someplace, it
doesn't need to be named SpryAssets, that you
| | 01:46 | can copy those assets over to.
| | 01:48 | Okay, time to insert our widget on the
page, I'm going to scroll to the point
| | 01:51 | where we have this headline that says,
Our founders and I'm just going to click
| | 01:54 | right after it. Most Spry widget
structures are based on Div tags so you don't
| | 01:58 | have to create an empty line for them,
they are block-level elements. They will
| | 02:01 | exist in their own space, you just
need to insert your cursor right at the
| | 02:05 | point that you want them.
| | 02:06 | So I'll go up to my Insert toolbar and
find the SpryAssets and the widgets are
| | 02:10 | found on the right-hand side. Here we
have all our widgets and we're going to
| | 02:15 | find the Spry Accordion widget. It's
the third widget over from the left one
| | 02:19 | there in the middle. I'm going to go
ahead and click that and just like that we
| | 02:23 | have a Spry Accordion widget on our page.
Now we have three bios, so we need to
| | 02:28 | add a panel and it's incredibly easy to do.
| | 02:30 | Now if you have ever lose focus on
your widget and you want to get those
| | 02:34 | properties back on the Properties
Inspector, simply mouse over your widget and
| | 02:38 | when you mouse over it, you'll see a
little tab, click on the tab itself. That
| | 02:42 | focuses on the widget Properties and
not on the Properties of the contents,
| | 02:46 | like the Div tag or the heading or the
paragraph that you might have inside of it.
| | 02:49 | Well, one of the things that we can do
with our Accordion widget is add panels.
| | 02:53 | So I'm going to go ahead and add one
more panel, and notice that it adds the
| | 02:57 | panel where you placed it. So we've
got Label 1, Label 3 and Label 2. That's
| | 03:01 | another nice thing about this, you can
reorder these. So if I select Label 3,
| | 03:05 | notice that I hit the Down
Arrow and have it go down.
| | 03:09 | So we're just looking at the default
content right now. Editing and working
| | 03:12 | with your Accordion widget can be a
little tricky. You'll notice that whatever
| | 03:16 | panel I select in the Properties
Inspector, I can see the content in that
| | 03:20 | panel. But if I'm focused someplace
else and I click back in it, it's not quite
| | 03:24 | that easy. Notice if I click to any
of these labels however, there is this
| | 03:28 | little Visibility icon that shows up
on the right-hand side. If I click that,
| | 03:31 | that will help me show the panel content.
| | 03:34 | Now in reality, if I were looking at
this in Code View, I can see that our
| | 03:37 | widget is merely a collection of Div
tags. That's all it is. There is no smoke
| | 03:41 | and mirrors there. So one thing that
I could do and actually it's one thing
| | 03:45 | that, I think, I'll do is I'm going to
go to my Document toolbar, right-click
| | 03:51 | to open up my Style Rendering toolbar
and I'm going to turn my Style Rendering
| | 03:55 | off. By doing that, I have much easier
access to the labels and the content.
| | 04:01 | So what I'm going to do now is I'm
just going to copy and paste. So I'm going
| | 04:04 | to copy all the content from each of
my panels and I'm going to copy the
| | 04:09 | headlines, the name of the person and
put that in place of the label and then
| | 04:14 | the content itself including the image
and the text, I'm going to paste in the
| | 04:19 | Content regions. So just go through,
copy each of the headlines and paste them
| | 04:26 | into where the labels are. Then copy
the contents of the images and the text
| | 04:37 | and replace the placeholder content.
| | 04:42 | You can see how much easier this is
with Style Rendering turned off because we
| | 04:46 | don't really have to worry about
navigating that widget structure. There we go,
| | 04:54 | and as soon as you're happy with that,
go ahead and save the file. Now you're
| | 04:57 | going to get a message here and
Dreamweaver is going to tell you that the
| | 05:00 | Accordion widget's CSS and JavaScript
files are going to be copied over to the
| | 05:05 | default directory, or in this case, the
directory that we have defined for it.
| | 05:09 | So click OK, let's copy those over there.
| | 05:12 | Now we need to do one more thing
here and, by default, these panels don't
| | 05:18 | really have any formatting going on
inside of them. So I'm going to format each
| | 05:21 | of the labels as a Heading 1 and then
I'm going to make sure that the text is
| | 05:26 | formatted as paragraph. So I'm going
to do that for each one of those. So the
| | 05:30 | name is going to be Heading 1 and
then make sure that the text itself is
| | 05:35 | formatted as a paragraph.
| | 05:37 | All right, great. So once again I'm
going to do a Save All and then I'm just
| | 05:49 | going to preview that in my browser
to see what we have going on now. If I
| | 05:53 | scroll down, well, look at that. All
right, well, our Accordion widget is
| | 06:00 | behaving the way we want it to, but the
styling is way off. We've got existing
| | 06:05 | styles competing with and overriding
the added Spry styles, and the default
| | 06:09 | styles themselves, they are
not exactly what we want either.
| | 06:13 | So clearly, there is still work to do
here. So our next job is to begin styling
| | 06:17 | the widgets so that it
integrates into the design of our site.
| | Collapse this transcript |
| Styling Spry widgets| 00:00 | If you are a designer, one of the best
things about the Spry Framework is its
| | 00:04 | reliance on technologies that you
probably already know. In the case of our
| | 00:09 | Accordion widget, it is functioning
properly but the styling is a bit of a
| | 00:12 | mess. Fortunately Dreamweaver has
linked an external CSS file to our page that
| | 00:17 | controls the styling of our widget and
is just as easy to update as any other CSS file.
| | 00:23 | First, we'll start the container
elements that make up our widget and then
| | 00:26 | customize it by adding styles specific
to this widget. So if I scroll down we
| | 00:31 | can see -- well that's a mess. We can't
even see half the content, the image is
| | 00:36 | kind of that erect, the text is all
over the place, the colors aren't doing
| | 00:39 | what they're meant to do. Not so good.
| | 00:42 | Also I'm going to preview this using
the Live View. This is a really cool new
| | 00:44 | feature in Dreamweaver CS4 and that
allows me to kind of preview some of the
| | 00:50 | styling. Now I do want to point out
that it's not always 100% accurate. So,
| | 00:55 | never ever fear previewing that in the
browser as well. I definitely recommend
| | 01:00 | that, because notice that in the
browser we see that we have a focus class too.
| | 01:05 | We've to decide whether we really
want it look different from when it's not
| | 01:09 | being focused versus focused on. So
there is a lot of decisions to be made here
| | 01:13 | about the styling. Well, back in
Dreamweaver, I'm going to turn off Live View
| | 01:18 | and what I'm going to do is just
modify my interface a little bit, so I have
| | 01:21 | got a little bit more room to code and
see what's going on on the right-hand side.
| | 01:25 | I am going to collapse my panels
down at icons, which -- I love that new
| | 01:29 | feature. I'm going to use a Split
Screen View, so that I can see the design on
| | 01:35 | the right-hand side and the code on
the left-hand side. So, what I have is I
| | 01:40 | have the Split Vertically View turned
on and I definitely recommend working that way.
| | 01:44 | Well, we'll be using another new
feature of Dreamweaver CS4. See how it
| | 01:47 | affected my word flow. Right up
underneath the about.htm I have got a listing
| | 01:51 | of all the related documents. I click
on the SpryAccordion.css and this is our
| | 01:57 | first look at one of the CSS
files that drives the widgets.
| | 02:00 | Now, one of the things that I really,
really like and admire about the way they
| | 02:04 | put these together, is they are
extensively commented, so we can go through and
| | 02:10 | read about what each one of these
selectors is doing, how it's controlling the
| | 02:15 | element and some of the dos and
don'ts of the specific rule. So if it's the
| | 02:20 | first time that you modify one of your
widgets, I definitely recommend reading
| | 02:23 | through that very, very carefully.
Now it is causing a little bit of extra
| | 02:27 | spacing. So if you wanted to deploy
it by getting rid of comments,
| | 02:30 | that would be fine as well.
| | 02:32 | So let's take a look at some of the
rules that we're going to change. I'm going
| | 02:35 | to scroll down and I'm going to find
the AccordionPanelTab. This is a class.
| | 02:42 | Most widgets are class driven, the
classes are dynamically assigned to the
| | 02:46 | elements inside the widget or
they're manually assigned as the widget is
| | 02:49 | created, either way.
| | 02:51 | In this case this class is controlling
the individual tab themselves. So we're
| | 02:55 | going to do a slight change here. We're
going to change the background and I'm
| | 02:59 | going to change it from background
color to just background. That will allow me
| | 03:02 | to add an image later on. I still
use shorthand notation and I'm going to
| | 03:06 | change the color to 999073. So that's more
in alignment, what we're doing with our site.
| | 03:14 | I am also going to change the border.
I'm not going to do a border on top and
| | 03:18 | the border on bottom, I'm going to
change a little bit. I'm going to leave it
| | 03:21 | at solid at 1 pixel but I'm going to
change the color and the color is going to
| | 03:25 | be #5d5743 again, more in
alignment what's going on with our site.
| | 03:34 | Now I'll scroll down to the next rule
and our next rule that we're going to
| | 03:38 | change is the AccordionPanelContent.
So this is the region where the actual
| | 03:42 | content is sitting, notice that it has
an overflow of orders, so that you can
| | 03:46 | scroll bars the content that no longer
fits into it and notice that we also can
| | 03:49 | change the height of our panel here as
well. So we can set that if we needed
| | 03:53 | our panels to be taller or shorter.
| | 03:55 | So I'm going to go in and add a
background attribute to this. I'll go down the
| | 03:59 | next line, add a background attribute
and we're just going to color initially
| | 04:02 | so #D2CEC1. So there is our background
color for our AccordionPanelContent. Now
| | 04:15 | if I scroll down a little bit
further, I can see that here we have
| | 04:18 | AccordionPanelOpen, AccordionPanelTab.
| | 04:20 | So one other things that we notice is
that AccordionPanelOpen is referencing a
| | 04:25 | specific state of the widget. So this
would be a dynamically assigned class
| | 04:29 | that as the widget is running,
JavaScript could go ahead and assign this class
| | 04:33 | whenever it's open. So, that way we
can style the different states of the
| | 04:36 | widget individually as
well which is pretty cool.
| | 04:38 | Now here we're just going to change
the background color of this. Let's make
| | 04:41 | that 999073. So keeping that color
consistent. If we scroll down a little bit
| | 04:47 | further we can see that we have
the AccordionPanelTabHover and the
| | 04:51 | AccordionPanelOpen.
AccordionPanelTabHover. So this is when you're hovering
| | 04:55 | over the panel whether it's open or not.
We're going to give that actually the
| | 04:58 | same color, just the way that here
it's going to be a different color.
| | 05:00 | So here I'm going to do 4B4739. Feel
free to use your own colors obviously and
| | 05:08 | we're going to replicate that down to
that 4B4739. Just a couple more to go.
| | 05:17 | One thing I'm going to do, the focused
AccordionPanelTab, I actually don't like
| | 05:21 | the effect of giving it a different
color when you're focused on it and I think
| | 05:24 | it ruins the aesthetics
of what we're going to do.
| | 05:25 | So I'm going to take that rule and
using my Cutting toolbar I'm going to go
| | 05:29 | ahead and comment that out using a CSS
based multi-line comment. It basically
| | 05:34 | just turns that style off now. Now, why
not delete it? Well because if I decide
| | 05:38 | later on that I actually do want that,
there is that rule just sitting in there
| | 05:41 | really to be reactivated
and changed. So that's nice.
| | 05:45 | Then finally we're going to
change the background color of our
| | 05:48 | AccordionFocused, AccordionPanelOpen
and for that one we're going to do 4B4739.
| | 05:53 | You'll notice that we're using very
consistent colors all the way throughout.
| | 05:59 | So I'm going to do a Save All there and
then we'll preview that in our browser.
| | 06:06 | If I scroll down into my widgets, here
we go. All right. So color you can see
| | 06:11 | is now little bit more consistent
with our site. Although the rest of it
| | 06:15 | doesn't look exactly the way we want.
| | 06:16 | So our basic styling is out of the way.
We've modified the widget, so this
| | 06:20 | color scheme matches our site and so
that the interactive element are styling
| | 06:23 | the way we want, when the widget
animates. The only thing left to do is
| | 06:27 | overwrite the site wide styles that are
causing some formatting issues with our
| | 06:30 | headlines and things like that. And
then add a little user feedback and
| | 06:33 | accenting through the use of
some simple background images.
| | Collapse this transcript |
| Customized widget styling| 00:00 | By exposing the structure and styling
of Spry widgets so clearly, Adobe has
| | 00:04 | made it easy to not only change the
default styling of your widgets but to add
| | 00:08 | to and customize your styling as well.
| | 00:11 | Currently our Accordion widget's default
styles have been changed to be in line
| | 00:14 | with our site design, but our overall
site styles are causing the contents to
| | 00:18 | not look the way we need them to.
In this exercise, we'll take care of our
| | 00:22 | widget's content by overwriting our
site styles and we'll add to the usability
| | 00:26 | of our widget by using background
images to give the users feedback on
| | 00:29 | various panels and their states.
| | 00:32 | So here we have the about.htm file
open from the 02_06 folder and we're just
| | 00:37 | picking up where we left off
but before we get into the styling,
| | 00:40 | let's figure out exactly what's going
on here. You can see our headings are way too big
| | 00:44 | and if I use our Code Navigator,
and I can get that by holding down the Alt key
| | 00:48 | and then clicking on the element,
| | 00:51 | we get a nice little cascading set
of rules that tells us exactly who is
| | 00:55 | applying in the bottom rule is the
one that is taking the precedence over
| | 00:59 | the rules further up the list. So you can
see that our SpryAccordion external files --
| | 01:04 | well, these are all class based. So
that's pretty low in terms of specificity,
| | 01:07 | whereas our main.css, we get this
rule all the way down here in the bottom
| | 01:11 | #mainContent.galletyArticleh1.
| | 01:14 | So we can tell for that particular
element that is a really specific selector,
| | 01:18 | so it's going to be overwriting some
of our other stuff. So if we want to
| | 01:21 | change the styling of these elements
inside of our widget, we're going to have
| | 01:23 | to write some selectors that are
little bit more specific than the default
| | 01:27 | selectors and there is
nothing wrong with doing that.
| | 01:29 | So, I'm going to go and collapse my
panels down the icons. I'll click on Split
| | 01:34 | Screen view and reposition my widget
so that I can see it, so that I can see
| | 01:38 | how my styling is going to be affected.
If I go into the SpryAccordion.css,
| | 01:43 | I'm going to scroll all the way down at
the very bottom of it. I'm going to add
| | 01:47 | some user-defined styles here and I'd
like to separate those from the default selectors.
| | 01:52 | You don't have to. You can put them
anywhere you want to within the external CSS,
| | 01:54 | but it's a nice idea to do this
so that later on you can remember that
| | 01:59 | these are author defined styles. You'll
notice that I'm going ahead and placing
| | 02:02 | in a comment that lets me know that
these are author defined styles. I guess
| | 02:07 | I should pluralize that.
| | 02:08 | Again, a year from now or three
months from now, I might not remember that
| | 02:11 | those are not a part of the default
styles that come with this widget that I
| | 02:14 | added there. So I want to be very
specific about that. Let's go ahead and take
| | 02:18 | care of our Heading 1 first. I'm going
to type the #mainContent, space, .galleryArticle,
| | 02:27 | space, .AccordionPanelTab h1. Now, notice
how specific this is. It's targeting any H1
| | 02:39 | inside of Accordion panel tab, inside
Gallery Article, inside Main Contents.
| | 02:43 | It's a very specific rule.
| | 02:44 | Also notice that if you are like me
and you use camel case naming a lot,
| | 02:48 | the Spry class names are all capitalized.
So that's something you're going to have
| | 02:52 | to remember if you're writing
selectors for those. I'm going to down to the
| | 02:55 | first line. I'm going to set my color
to be #FFF. I'm going to set my font size
| | 03:01 | to be 1.4 ems. I'm going to set my
text align to left and anything after
| | 03:08 | the first two rules, we're really just
sort of overwriting what we don't like in
| | 03:12 | the earlier Heading 1.
And then I'm going to do padding right.
| | 03:15 | So we're taking off some of the padding
that's on here, 0 pixels. Then finally
| | 03:20 | I'm just going to do a margin of 0
as well and save that. If I click back
| | 03:26 | over here in my Design view, you
can see that I've sort of reset those headings
| | 03:29 | and they look much, much better now.
All right let's keep going.
| | 03:31 | I'm going to click back into my CSS and
let's do #mainContent, space, .galleryArticle,
| | 03:40 | space, .Accordion, so it's going to go a
little different, panelContent.
| | 03:45 | Instead of the tab, this time
we're focusing on content. Space, img.
| | 03:50 | So now we're targeting the
image inside of our content tabs.
| | 03:54 | Here we're going to set display to
inline and what that's going to do for us is
| | 03:59 | overwrite the default block formatting
that's been applied to it. Then we are
| | 04:02 | going to do a float to the left and
that will help wrap the text around it and
| | 04:06 | finally, we'll give it a little bit of
a margin and our margin's going to be
| | 04:09 | 0 pixels for the top, 10 pixels for the
right-hand side, 0 for the bottom and
| | 04:15 | finally 0 for the left. So just a
little bit of right margin on that, so that
| | 04:19 | the text will wrap around
the image, looking much better.
| | 04:21 | I am going to go ahead and do one
more of these. So we'll do #mainContent
| | 04:26 | .galleryArticle .AccordionPanelContent
and then finally P for paragraph.
| | 04:34 | So we're targeting the paragraph inside
of the panel content this time. And for
| | 04:39 | that one we're going to set a margin-
top of 20 pixels. We're going to set our
| | 04:44 | font size, 2.9 ems, and finally we're
going to set line height to a multiple of 1.4,
| | 04:52 | save that. If we preview that
in our browser we can see that
| | 04:57 | the formatting of our Accordion
widget is looking so, so much better.
| | 05:02 | We're not totally done with it yet. I
mentioned that I wanted to add little bit
| | 05:04 | of accenting to that. So, up in the
headlines we're going to have a background
| | 05:07 | graphic for the tabs that identify the
current state of the widget and help the
| | 05:13 | user know that there is another
state down below it. So let's close that.
| | 05:17 | What we're going to do now is we're
going to go ahead and modify some of the
| | 05:20 | existing selectors for our tabs to put
the background images inside of them.
| | 05:24 | But before we do that we'll add
little bit of padding. So I'm going to do
| | 05:28 | padding to the left of my H1 selector
and we'll do 70 pixels. Now what that
| | 05:32 | will do for us is it will sort of
move the heading over a little bit and
| | 05:35 | give room for our background image,
which is exactly what we what.
| | 05:38 | Now let's go and add our background
graphic. So I'm going to scroll all the way up
| | 05:43 | and find my first AccordionPanelTab,
there it is. And we're going to modify
| | 05:47 | the background property. Now be very
careful. Make sure you're modifying
| | 05:51 | background and not background-color.
That's the default that comes with this.
| | 05:55 | So make sure that's been change; if it
hasn't you are going to want to change that.
| | 05:59 | So right after the color, I'm going to
type in 'u', that gives us the little
| | 06:02 | URL code hinting and if I hit Enter,
I can now browse for my image which is a
| | 06:06 | mush faster way of finding it. And
we're going to look in the 02_06_images
| | 06:11 | directory and you want to
choose this accordion_tab.gif.
| | 06:16 | Now, notice that this is one graphic
that has all four states of my background
| | 06:20 | image on it. So instead of doing four
separate graphics, we're just doing the one.
| | 06:24 | That lowers the overhead a little bit
and then when we want to display
| | 06:27 | another one, we just simply move its
position in with that rule. That's very
| | 06:31 | easy to do. So we're going
to highlight that, click OK.
| | 06:34 | Now, we need to set that position. So
I'm going to type in no-repeat, so
| | 06:38 | we only get one of these and then I'm
going to type in left and then choose top.
| | 06:42 | Now that is the default, but I just want to
be very explicit with that since we're
| | 06:46 | going to be moving that position around.
So I'll save that if I click back,
| | 06:50 | I can now see that tab. So that
looks great. It looks perfect.
| | 06:52 | I am going to scroll down a
little bit and I'm going to find my
| | 06:56 | AccordionPanelOpen AccordionPanelTab
and this is exactly what I was talking about.
| | 07:00 | I'm going to get rid of that
background color so that just says
| | 07:02 | background. Now, I learned by
mistake last time, so this time instead of
| | 07:07 | having to re-type that or re-browse for that,
I'm just going to copy what we've got
| | 07:11 | and paste that into that because
all we're changing is the positioning.
| | 07:16 | So, I'm going to change left top and
for this rule, we're going to get a little
| | 07:20 | explicit here. We are going to do 0
pixels for horizontal and then a space and
| | 07:24 | -44 pixels for vertical.
Very nice, keep scrolling down.
| | 07:30 | Find the AccordionPanelTabHover and inside
that I'm going to do a paste and this one
| | 07:36 | instead of being left top, just going
to go up a little further. I'll go 0
| | 07:39 | pixels for horizontal and then
-88 pixels for vertical, perfect!
| | 07:44 | Now scroll down little bit and
you'll find the AccordionFocused,
| | 07:47 | AccordionPanelOpen, AccordionPanelTab.
It's a long one but that is exactly what we need,
| | 07:52 | so we'll go ahead and paste that
in there as well. This time we're going
| | 07:55 | to change left top to left and then
bottom. So we'll save that as well.
| | 08:00 | All right let's go ahead and preview that
in our browser. Now we can see all of our
| | 08:05 | different states and if we click,
we can see that the background images are
| | 08:11 | responding to this quite nicely.
Very good! So that is exactly what we want.
| | 08:16 | Now, if you are new to using Spry,
you might be a little intimidated by these
| | 08:20 | widgets initially, but they are very
easy to use, easy to update and extremely
| | 08:24 | easy to customize. There are no
rules that prevent you from modifying the
| | 08:28 | existing CSS, structure or even the behaviors
of your widgets, if you are fluent in JavaScript.
| | 08:33 | Now keep in mind that widget structure
and functionality are tied together. So
| | 08:37 | before committing to any major changes in
structure or styling, be sure to test it thoroughly.
| | Collapse this transcript |
|
|
3. Building Navigation Through SpryPlanning for drop-down menus| 00:00 | One of most common questions that I
get from students in my classes is how to
| | 00:04 | build the CSS based drop-down menu for
their site's navigation. Well, there is
| | 00:08 | no shortage of techniques on exactly
how to build drop-down menus. Each one has
| | 00:13 | its own pros and cons in terms of
accessibility, cross browser reliability and
| | 00:18 | functionality.
| | 00:19 | Most techniques involve combining CSS
and JavaScript to build the drop-down so
| | 00:24 | its no surprise that most Ajax
frameworks include libraries for building these
| | 00:29 | types of menus, surprised, no exception.
And the Spry menu bar widget is among
| | 00:33 | the easiest to deploy and modify.
| | 00:36 | In this chapter we'll examine the Spry
menu bar widget in detail. First looking
| | 00:40 | at the basic structure and styling
of the widget and then customizing its
| | 00:44 | appearance and functionality for our
own site. Before we get into examining the
| | 00:48 | Spry menu bar, however I would like
to take a moment to discuss the factors
| | 00:52 | that should be considered when deciding
whether or nor to deploy drop-downs on your site.
| | 00:57 | While there is nothing inherently wrong
with using such a menu structure, there
| | 01:00 | are many factors that need to be
considered before committing to it. Many user
| | 01:04 | agents do not support JavaScript and
indeed many users will disable it for
| | 01:08 | their own browsers. In such an
environment having your navigation solely rely
| | 01:13 | on JavaScript to function properly is
a recipe for disaster. At a minimum you
| | 01:18 | should have alternate content to serve
to client agents that are not JavaScript enabled.
| | 01:22 | Before we embark on the journey of
creating our own drop-down menus. Let's take
| | 01:26 | a look at how a very popular site
utilizes them and plans for non-JavaScript
| | 01:30 | enabled clients. So here we are on one
of the webs more popular sites. And if I
| | 01:36 | look at the menu navigation, if I roll
over these, we can see that there are a
| | 01:40 | lot of different links here. Of course
the top-level links are not clickable
| | 01:45 | and normally that would be a no-no in
terms of accessibility. But what's really
| | 01:50 | nice here is the implementation of
non-JavaScript enabled navigation.
| | 01:55 | So I'm going to go up to my browser
Options and I'm going to disable JavaScript
| | 02:00 | and Reload the page. Notice that the
this particular client agent did not have
| | 02:05 | JavaScript enabled, its serving up an
entirely different secondary menu that
| | 02:10 | has all of the main links and
secondary links exposed. So there was a lot of
| | 02:14 | thought that went into this.
| | 02:15 | So usually when I'm advising students
or clients about Ajax driven navigation,
| | 02:20 | I recommend asking certain questions
about the navigation. First, are the
| | 02:24 | secondary links crucial to the goals
of the site? Second, are there enough
| | 02:28 | secondary and tertiary links to
justify drop-downs? Third, is there a
| | 02:32 | compelling reason to expose these links
and drop-downs beyond the it-looks-cool
| | 02:37 | reason? And finally, if the client
has decided to move forward with the
| | 02:40 | drop-down based navigation system,
is there a plan and place for serving
| | 02:44 | alternate content when JavaScript is disabled?
| | 02:47 | There are always multiple design
decisions that are made when it comes to
| | 02:50 | navigation. But never lose side of the
fact that usability and accessibility
| | 02:54 | should be the driving factors behind
the navigation of your site. In some cases
| | 02:59 | drop-down menus can make the site more
usable by making the navigation simpler
| | 03:03 | and easy to access. In other
situations it can harm usability. So careful
| | 03:08 | planning and consideration should go
into any decision concerning using them.
| | Collapse this transcript |
| Examining the Spry menu bar widget| 00:00 | Much like the Accordion widget we
worked with earlier, the Spry Menu Bar widget
| | 00:04 | is easy to insert and easy to modify.
Because of the important role that
| | 00:08 | navigation plays in your site, it's
crucial that you understand the structure
| | 00:12 | and functionality of the Menu
Bar widget before deploying it.
| | 00:16 | In this movie we'll examine the
default menu bar before attempting to modify it.
| | 00:20 | That way we'll have a much clear
understanding of how its basic styling and
| | 00:24 | structure work before we add
to it or change it in anyway.
| | 00:27 | The only thing I have modified on the
default menu bar are the menu options
| | 00:31 | themselves. So if I click on the Spry
Menu Bar tab right there, I can see that
| | 00:35 | I went through the Properties and
added a couple of links to this and the
| | 00:39 | submenu. This will be the menu bar
that we're going to be using for our site.
| | 00:43 | So if I Preview this page in my browser,
I can see that my drop-down menus are
| | 00:48 | working just fine. All of my hovering
attributes are showing up perfectly. So
| | 00:53 | right now, working just fine.
Just a little bland I would say.
| | 00:57 | So let's go back to Dreamweaver and
let's take a look in the Code View so we
| | 01:01 | can see exactly how this menu bar is
being created and structured. So I'm going
| | 01:05 | to switchover to Code View. At the
very top of the document, I can see in the
| | 01:09 | Head tag I've got two tags that are
bringing in my external assets that are
| | 01:15 | necessary for my menu bar. We've got
the Script tag that's linking out to the
| | 01:18 | SpryMenuBar.js and we have a Link tag
that's linking out to the external CSS
| | 01:24 | file, SpryMenuBarHorizontal.css.
| | 01:27 | So you if you choose a vertical menu
bar, you're going to get the vertical style sheet;
| | 01:31 | if you choose a horizontal menu bar,
you're going to get the horizontal style sheet.
| | 01:34 | If I scroll down to the actual widget
itself, you can see that really all it
| | 01:39 | is, is a series of nested unordered
lists. So that's it, an extremely simple
| | 01:46 | structure, and this is something you
could very easily hand-code yourself.
| | 01:50 | Also, notice that we are passing along
some classes to identify what type of
| | 01:54 | menu bar it is and to identify the
Submenu items as well. Very simple widget
| | 02:00 | structure here, just XHTML with a
few class attributes identifying the
| | 02:04 | different elements.
| | 02:05 | Finally, at the very bottom of our code,
we'll find another Script tag, where
| | 02:09 | we have a constructor function that's
actually creating the menu bar itself.
| | 02:13 | There are a couple of options being
past into that, that are very noteworthy.
| | 02:16 | Notice that we have graphics that
identify the Down and the Right, so to let
| | 02:21 | people know when a menu is being
dropped down and when a menu has available
| | 02:26 | content, those little tiny errors.
| | 02:29 | You can change those. You will notice
that currently those graphics are found
| | 02:32 | in the SpryAssets folder. Now, most
of us would probably move them to the
| | 02:36 | Images Directory and you'd need to
update this here as well. So keep that in
| | 02:40 | mind, if you don't like the graphic
that they're using, you're free to use your
| | 02:44 | own, just type in what you would like
and you will get exactly that graphic, so
| | 02:48 | that would work perfectly.
| | 02:49 | As for the CSS; let me switch back to
Design View, and I'm going to turn on
| | 02:54 | Live View so that we can preview
this within the Dreamweaver interface.
| | 02:57 | What I'm going to do is drop-down one
of the Submenus, and I'm going to hit F6.
| | 03:01 | That's going to freeze your
JavaScript for you, in that way this state will
| | 03:04 | remain active. So now that I've got
this drop-down menu pulled down, I can hold
| | 03:09 | down the Alt key, the Option key on the
Mac, and click to get my Code Navigator.
| | 03:14 | So I can see within the
SpryMenuBarHorizontal.css file that I have a lot of
| | 03:19 | class selectors dealing with the
different elements inside my menu bar. Now,
| | 03:23 | I'm going to click on one of
those, so that we can jump into the
| | 03:26 | SpryMenuBarHorizontal page. I'm going
to scroll down through some of these styles.
| | 03:31 | There aren't a ton of styles in here,
but there are some very important things
| | 03:35 | going on. You'll notice that almost all
of these have a Positioning Attribute.
| | 03:38 | A lot of the Positioning Attributes
are Absolute Positioning. We have left
| | 03:43 | values, we have z-index. So there is a
lot of CSS based positioning going on
| | 03:48 | here. If you're not very familiar with
the concept of controlling positioning
| | 03:52 | through CSS, you want to be very
careful about modifying any of those values,
| | 03:55 | because they directly affect the
functionality of your menu bar.
| | 03:58 | I'm going to hit F6 to unfreeze my
JavaScript, as a matter of fact, I'll just
| | 04:02 | go ahead and turn Live View off.
| | 04:05 | One last thing before we move on to
inserting our own Spry Menu Bar, you
| | 04:09 | definitely want to get extremely
comfortable with the structure of it, and one
| | 04:12 | of the best places to do that is
in the online Spry Documentation.
| | 04:17 | If you navigate to the homepage
and the Spry Documentation, which is
| | 04:20 | labs.adobe.com/technologies/spry,
you'll find a link to this page, which is the
| | 04:26 | specific Help page for the Menu Bar
widget. They go through every single
| | 04:30 | element of the Menu Bar widget in
great detail. So if you read through this,
| | 04:34 | you'll have a better understanding of it,
than probably 90% of the people that
| | 04:38 | are actually using it.
| | 04:39 | There's one specific thing I want to
show you in this file. I'm going to scroll
| | 04:42 | all the way down to the bottom of the
page to show you this. Here they have a
| | 04:50 | list of the different styles, what they're
controlling, and what you can do to change them.
| | 04:55 | So if you're looking for a little
primer in terms of, what I can change to
| | 04:59 | affect the visual design of my menu bar,
this is a great list here. Notice that
| | 05:04 | they're focusing on the vertical menu
bar, here but they also give you the
| | 05:08 | horizontal menu bar item as well,
and that's really just the only change
| | 05:12 | between the two of them.
| | 05:13 | So that's a nice little list that you
can go through and kind of figure out
| | 05:16 | exactly what you can't change and
what you can change, that sort of thing.
| | 05:19 | So before you attempt to customize
your Spry Menu Bar, you really should make
| | 05:23 | sure you understand exactly how the
CSS rules are controlling positioning and
| | 05:26 | styling. It's very easy to adversely
affect functionality or trigger some cross
| | 05:31 | browser compatibility issues when
modifying the source style, so you want to
| | 05:35 | test thoroughly as you begin
installing your menus and you definitely want to
| | 05:38 | come online and check out some of the
reference so that you really thoroughly
| | 05:41 | understand the menu bar before using it.
| | Collapse this transcript |
| Inserting the Spry menu bar| 00:00 | Obviously, the first step in working
with any Spry widget is to insert it on
| | 00:04 | the page. In this movie, we'll start
creating our site navigation by inserting
| | 00:08 | a Spry menu bar on the page and
editing it to match the structure of our navigation.
| | 00:13 | I always find it helpful to know
where you are going, even if you are going on a path.
| | 00:17 | So what I have here is I have the
finished Spry menu bar opened up.
| | 00:21 | This want it is going to look
like at the end of the chapter.
| | 00:23 | So our menu looks just the way it
normally looks, but when I get to the About
| | 00:27 | and to the Shop, we have- you know not
pull-down menus in this case, but fly-up menus.
| | 00:32 | So, as the other thing you can
customize these menus as well.
| | 00:35 | And you can see that our menu structure is
working -- well, relatively well there. Nice.
| | 00:40 | So that is what we are going to be
creating. So to get there, we first have to
| | 00:44 | insert it on the page.
| | 00:45 | So I'm going to go back to in the
Dreamweaver and now I have the index.htm page
| | 00:50 | open. So here is our page with
absolutely no navigation on it. So we need to go
| | 00:54 | ahead and insert our Spry menu bar.
Before we get start with these steps
| | 00:58 | themselves, we are going to have to be a
little bit more managing of our Spry Assets.
| | 01:00 | So you can see over on my Files panel,
we are looking at the 03_02 directory.
| | 01:05 | I am going to go ahead and
create a brand new folder there.
| | 01:08 | Once again it's going to be the SpryAssets folder.
We are just keeping our consistent naming
| | 01:12 | convention all the way through. We'll
double-click the name of our site to go
| | 01:15 | into and edit our site definition.
I'll click on Spry and for the default
| | 01:21 | location where the Spry Assets are being copied,
I'm going to point that to the 03_02.
| | 01:27 | So, Chapter 3, 03_02 and there is
the SpryAssets folder I just created.
| | 01:32 | So we'll choose that folder and then
click OK. So now, we are sure that when we
| | 01:37 | insert our Spry menu bar that the Spry
Assets would go in the proper place. So
| | 01:40 | once again we are just managing our
Spry Assets a little bit here before we get started.
| | 01:44 | Now there is a lot of CSS controlled
layout going on here. So rather than trying
| | 01:48 | to do this in Design View, I'm going
to switch over to Code view. And what I
| | 01:51 | want to do is place my cursor right
after the heading 1 tag in the header on
| | 01:56 | line 19. Fell free to create a blank
space in the code, if you would like or
| | 02:00 | you can just place right after
that. It does not really matter.
| | 02:02 | At this point you can also go back into
the Design view too if you want to see
| | 02:05 | what's going to happen here. That way
you can physically see what is going to
| | 02:09 | be happening. You know your cursors are
in the right spot. You just do not want
| | 02:11 | click anywhere else. You want to
maintain focus at that point of code.
| | 02:14 | Okay, I'm going to go up to my
Insert toolbar and I'm looking at my Spry
| | 02:17 | Objects. I want go to the first widget
available to me, which is the Spry menu
| | 02:23 | bar. I would go ahead and click on that.
The first thing it wants to know is,
| | 02:26 | "Hey, do you want a horizontal menu
system or you want a vertical navigation system?"
| | 02:30 | Well, we are going to choose
Horizontal and then we are going to go ahead and
| | 02:33 | click OK. So, you will notice that the
very top of my screen now, we have our
| | 02:39 | drop-down menu. Now if you are
noticing that lot of styling is already taken
| | 02:43 | place here. Well, we do have some
existing menu styles that were styling the
| | 02:46 | old navigation system and some of those
we are going to have overwrite change,
| | 02:50 | but some of them are going to
exactly what we need them to do so.
| | 02:53 | When we get into styling, we'll
discuss those in little bit more detail. What
| | 02:56 | we are more interested in right now, is
going ahead and populating our menu and
| | 03:00 | making sure that it has what we need in
it. Right now it says the Item 1, Item
| | 03:04 | 2, Item 3, Item 4. So again, if you
hover over any type of the widget that you
| | 03:09 | have properties that you can modify.
You will see this little tab show up and
| | 03:12 | clicking on that will populate the
Properties Inspector with all of those
| | 03:15 | different properties and values.
| | 03:17 | So the first thing we are going to do
is we are going to name our menu bar. So
| | 03:22 | I'm going to go ahead and highlight on
the menu bar here and name that mainNav.
| | 03:25 | You will notice that occasionally it
will jump you down the page. That's really
| | 03:30 | not hurting anything. You just want to
be able see it, so I'm going to scroll
| | 03:33 | back up. Now, I'm going to
control each of these individual items.
| | 03:37 | Well, the panes that you are seeing
here are the different systems of sub-menus
| | 03:40 | that you can have. The first pane on
the left is your Main Navigation Items.
| | 03:44 | Then the middle pane gives you your drop
-down menus for that particular one and
| | 03:48 | then if you were to need another sub-
navigation system, you can go ahead and
| | 03:52 | add that to that one as well.
| | 03:54 | So what we are really just seeing is
the nested list. Well, our first item,
| | 03:58 | click on Item 1 on the left-most pane
here and the text over here reads Item 1.
| | 04:02 | I'm going to change to the word Home.
You will notice that it updates that
| | 04:05 | within a menu itself. Then for the link
I'm going to type in index.htm, notice
| | 04:11 | that we do have the ability to browse.
| | 04:12 | I might go in and give that a title
as well. I'm going to title that Our
| | 04:16 | homepage. I'm a big believer in
giving your links titles because it really
| | 04:19 | helps out with accessibility. For Home,
we do not need any drop-down menu item.
| | 04:23 | So I'm going to go ahead select these
and one other time, highlight them and
| | 04:26 | click the minus symbol so that they are gone.
| | 04:29 | So we'll just go through all of our
menu items in order. Item number 2, I'm
| | 04:33 | going to select that. Its text is
going to be Galleries. Its link will be
| | 04:38 | galleries.htm. It's too bad that you
do not have the point to file icon, that
| | 04:42 | would be extremely nice, but as it is
typing these inner heading browser really
| | 04:45 | not that bad.
| | 04:47 | The title for that one going to be
Visit our photos. Maybe that's something
| | 04:52 | they will put in later versions of
Dreamweaver. And I'm going to click on Item
| | 04:57 | 3 and this one is going to About and
the link will be the about.htm and title
| | 05:05 | will be Learn more about us. Now
this one does have some sub-menu Items.
| | 05:12 | So what I'm going to do now is go over
to this middle pane, click on the first
| | 05:16 | one which reads Item 3.1, and the
text for this one we are going to type in
| | 05:21 | Contributors. And that's going to link
contributors.htm and the title for that
| | 05:29 | one is going to be Meet our
contributors. Now Contributors does not have any
| | 05:35 | sub-menu items. So I'm going to go
ahead and select those and delete them.
| | 05:38 | Again the default one is sort of
showing what's possible. The second item in
| | 05:44 | our sub-menu here is going to be Gear
and it will link to gear.htm and the
| | 05:48 | title for this is going to be Check out
our sweet gear. Then finally the third
| | 05:57 | item of the sub-menu is going to be
Tour. That will link to tour.htm as well.
| | 06:02 | The title of that is going to
Find out where will be next.
| | 06:07 | So, you will notice that after a
while you can really get into a rhythm of
| | 06:10 | this. Well, our fourth item is going to
be Contact. It will link to contact.htm
| | 06:18 | and the title on that one will be
Contact us. That's not our entire list. So
| | 06:25 | we'll find out links here, but that's
okay, because it is really easy to add
| | 06:28 | new ones. So, right after Contact, I'm
going to go up and click the plus button
| | 06:31 | right there to add another menu item.
| | 06:34 | This item is going to be Shop. It will
link to shop.htm and the title for this
| | 06:40 | one will be Shop Desolve. Now, that
one does one have some drop-down links as
| | 06:46 | well. So it is really easy to add those
also. I'm just going to highlight Shop,
| | 06:50 | come here and click plus for the
first sub-menu Item, that's going to be
| | 06:54 | Prints, and it will link to prints.htm.
The title for that one is going to be
| | 06:59 | See our featured prints.
| | 07:02 | Then one more sub-menu Item. This is
going to be Specials and this is going to
| | 07:10 | be specials.htm. The title of that one,
Check out this month's specials. So it
| | 07:19 | just takes time. It's certainly not
hard to add these items. You just have to
| | 07:23 | stay focused to make sure you are
placing the sub-menus items where you need
| | 07:26 | them, but really it's extremely easy
to do. So I'm going to go ahead and save
| | 07:31 | this, I'm going to click OK. And then
I'm just going to preview that in my browser.
| | 07:37 | And we see our menu bar with drop-
downs and everything. Except for that and
| | 07:42 | there is a good reason for that,
because we have an element floating on top of it.
| | 07:45 | So our menu bar is now in place
and populated with the links we need.
| | 07:49 | But it is not however looking or even
functioning the exact way we would like it to.
| | 07:53 | Now we need to carefully modify the
CSS controlling our menu functionality
| | 07:58 | and we'll start that next.
| | Collapse this transcript |
| Styling menu bar placement| 00:00 | Although some of our menu bar styling
is being taken care of by our site's
| | 00:04 | external styles, the bulk of the menu
styling is being performed currently by
| | 00:08 | the external SpryAssets CSS file.
Currently our external style sheet is
| | 00:12 | controlling the background color,
foreground color, rollover color and spacing
| | 00:17 | for the links. Every other property
is being controlled through the default
| | 00:21 | menu bar styles.
| | 00:23 | Although, we certainly do need to
tweak some of the visual properties of our
| | 00:25 | menu bar, our most pressing concern
currently with the default styling is the
| | 00:29 | placement of the menu bar and the
location of the sub-menus, when they are
| | 00:32 | revealed. Based on what we are doing
for our final design, we would like the
| | 00:35 | menu bar to be at the bottom right of
the header element and to prevent the
| | 00:39 | sub-menus from covering up a content
below it, we would like to move here above
| | 00:42 | the related menu items that are below that.
| | 00:44 | So to do that, we'll need to adjust
some of the layout properties in the
| | 00:48 | default style sheet. I'm once again,
going to minimize my panel, it's going to
| | 00:53 | collapse those down to icons to get
myself a little bit more screen real
| | 00:56 | estate, and when I do that, I can even
move my style rendering toolbar right
| | 01:00 | back up there which is where I
would like to have that and I'll go into
| | 01:04 | Split-Screen View, so that I can see
design on one side, code on the other.
| | 01:07 | And you will notice that in your
related files right here we have our
| | 01:10 | SpryMenuBarHorizontal.css. So I'll
click on that. Now if you were to do a
| | 01:15 | vertical menu bar, that would be
SpryMenuBarVertical.css. As I mentioned
| | 01:19 | earlier, as we were reviewing our menu
bar structure, you really want to read
| | 01:23 | the comments of these styles very, very
carefully because making a wrong change
| | 01:28 | can cause your menu bar to be placed
in entirely area, the drop-down menus
| | 01:32 | might really looking weird or
they may not even work altogether.
| | 01:35 | So our first number one priority is to
go ahead and move our menu bar into our
| | 01:39 | desired position. So what I'm going
to do is find this rule right here,
| | 01:43 | ul.MenuBarHorizontal. That is the
parent menu bar element and that's what we
| | 01:48 | are going to use to control the
positioning. So I'm going to change this, so
| | 01:53 | that it does have a position attribute
and I'm going to use absolute positioning.
| | 01:56 | Now it's inside the header element.
This is a really important point,
| | 01:59 | the header element has a relative
positioning attribute. So anything that we do
| | 02:04 | here with absolute positioning for
our menu bar is going to move it around
| | 02:08 | inside the header bar, so it will move
it relative to the top left-hand corner
| | 02:12 | of the header element and it's exactly
what we want. So we have it position:
| | 02:16 | absolute, and what we'll do here is
we'll do a right of zero pixels and we'll
| | 02:22 | do a bottom of zero pixels.
| | 02:25 | So that's going to move the right
bottom edge of our menu bar to the right
| | 02:30 | bottom edge of our header and if I
save this file, click over here in Design
| | 02:34 | View, you can see that our menu moves
right down in the place, so that it's
| | 02:38 | perfect. So far so good. Now one of the
things I noticed is the menu bar items
| | 02:44 | are a little too wide. There is a
little bit of a problem here altogether
| | 02:47 | actually, when I do a horizontal menu,
I really like to have the width of the
| | 02:51 | element sort of take care of itself
and that's once place where me and
| | 02:55 | standards compliance typically take a
little bit of a side journey, because if
| | 02:59 | you float elements by and large you
are supposed define a width for it, but I
| | 03:02 | founded there is still the cross
browser compliant to get away from that every
| | 03:05 | now and then.
| | 03:06 | Well, not so much with this menu bar.
If you don't specify width of the list
| | 03:09 | items that you are going to float,
then portions of the menu bar may not work
| | 03:12 | inside the browser. So you want to
really be careful about that. So, I'm going
| | 03:15 | to scroll down in my styles a
little bit and I can see that for my
| | 03:19 | ul.MenuBarHorizontal li, so those are
the individual items within the menu
| | 03:23 | itself, that they are given a default
width of 8 ems. That's a little high, I'm
| | 03:28 | going to change that to 6 ems and save
it and I'll click over here and you can
| | 03:33 | see now they are a lot shorter.
| | 03:35 | That, only takes a little bit or trial
and error to be honest with you. We are
| | 03:38 | going to leave enough space for the
little arrows when they are necessary and
| | 03:41 | you want to leave enough space for
your widest element. Now the next thing we
| | 03:44 | are going to do is we are going to go
down and find our ul.MenuBarHorizontal
| | 03:48 | ul. So this is dealing with any of
the unordered list nested inside of the
| | 03:55 | apparent unordered list and
that would be any of our sub-menus.
| | 03:58 | So we are going to go ahead and
affect our sub-menus as well. It is 8.2 ems
| | 04:03 | wide, we are going to change that to
8. So once again we are just sort of
| | 04:05 | shrinking down the width of the sub-
menus. Now, right now I'm not terribly
| | 04:10 | happy with the way that the sub-
menus are functioning, because they are
| | 04:12 | dropping down instead of dropping up.
So we need to go ahead and take care that
| | 04:16 | next as well. And you will notice that
we have this rule, ul.MenuBarHorizontal
| | 04:23 | ul.MenuBarSubmenuVisible.
| | 04:26 | So again, this is a dynamic class
that's being assigned when a sub-menu is
| | 04:31 | visible and that's going to be visible
when a user rolls over the parent link
| | 04:34 | and it shows up. So right now, the
left position is auto, meaning that it's
| | 04:38 | going to align its left edge with the
left edge of its parent element. We are
| | 04:41 | going to change that a little bit, but
not going to affect the left edge just
| | 04:45 | yet. But we are going to go down and
type in bottom and we are going to give it
| | 04:53 | a bottom value of 1.6 ems.
| | 04:57 | Now if you are wondering, how in the
world is that even working? Well notice
| | 05:01 | that the ul.MenuBarHorizontal ul is
giving it a position at absolute. So it's
| | 05:06 | inheriting a positioning attribute, we
don't have to explicitly give it one and
| | 05:09 | we are giving it at a bottom value
there to also move it up a little bit. Now
| | 05:13 | remember negative values would move me
down, positive values would move me up.
| | 05:17 | And then one last thing here, we are
going to go into the actual items within
| | 05:21 | the sub-menu and we are going to
shrink them down in size as well to match
| | 05:24 | their parents. So instead of 8.2 we
are doing 8. So you should always double
| | 05:28 | check if you change one value,
sometimes you got to go elsewhere and change
| | 05:32 | that value again. So I'm going to go
ahead and save that file. I'm going to
| | 05:36 | preview that in my browser and now if I
rollover my elements, so my menu is in
| | 05:42 | place and my drop-downs or no one are
dropping down, they are dropping up.
| | 05:47 | So it doesn't look exactly the way we
want it to, but it is positioned and
| | 05:51 | functioning that we needed to. So our
next step is going to be the modify the
| | 05:55 | styling of our menu which we'll
require as not only to make some additional
| | 05:58 | modifications to the default styles but
to add some additional styles as well.
| | Collapse this transcript |
| Styling menu bar links| 00:00 | It's time to finish up our menu bar
styling by taking care of the remaining
| | 00:03 | link styling. We need to make sure
that the users have the visual clue that a
| | 00:08 | link contains a sub-menu, we need to
style our sub-menu links, so they are
| | 00:12 | visually distinct and we want to add a
bit of flare to our sub-menus by giving
| | 00:16 | them a graphical treatment that
separates them visually from our main menu.
| | 00:21 | We are going to do this all in Code
View because sometimes when you are
| | 00:24 | manipulating your CSS, it's a lot
easier to do it in Code. So, I'm going to
| | 00:28 | click on the SpryMenuBarHorizontal.css
right here in my related documents and
| | 00:32 | then I'm going to switch to Code View.
| | 00:34 | Now one thing I want to point out about
these default styles, it's not true for
| | 00:37 | every widget, certainly for the menu
bar one. Notice that we have different
| | 00:41 | sections and they are commented. So
this is layout information. If we scroll
| | 00:44 | down a little bit and here we have our
design information. Now you want to be
| | 00:48 | really careful here, because
notice that the design information has a
| | 00:52 | ul.MenuBarHorizontal ul and layout has
a ul and in fact we'll find it, here we
| | 00:57 | go, ul.MenuBarHorizontal ul.
| | 01:00 | So you have to really make sure you
are modifying the one that you think you
| | 01:04 | are going to modify. The other thing
that we are going to do here is, we are
| | 01:07 | going to add some new rules
ourselves. So I want to keep the comment
| | 01:10 | inconsistent so I'm going to highlight
one of the commentated regions. One of
| | 01:14 | those little comments here and just
copy that, so that it want me add our own
| | 01:17 | code, I can add my own little commenting.
| | 01:19 | So I'm going to scroll down and just in
front of the Submenu Indication, right
| | 01:24 | on the line 114 or so, I'm going to
create some blank space, paste this comment
| | 01:28 | again and here I'm going to replace
Design Information with Added By Author and
| | 01:36 | then I'm going to highlight little
comment out beside that and type in styling
| | 01:41 | submenus. Again that's little note to
myself that I added these styles and the
| | 01:47 | reason as to why I added these styles.
| | 01:49 | Trust me, you may not see the use for
that if you haven't done a lot of CSS
| | 01:53 | work, but after a while it's really
nice to go back into your own code and read
| | 01:57 | notes that you made to yourself, so
that's very handy. So the first one we are
| | 02:01 | going to do here, is we are going to
type in #header. So you can see that I'm
| | 02:05 | making these rules more specific
right off the bat, so that I'm overwriting
| | 02:08 | what's happening with the
default styling of my site.
| | 02:12 | So I'm going to type in #header ul ul.
So remember those are our submenus. Then
| | 02:16 | I'm going to do space li a:link, so
I'm going to be using the pseudo selector
| | 02:22 | link there. I'm going to type in a
comma and then I'm going to do another one.
| | 02:26 | I'll group another selector here,
so #header ul ul li a:visited.
| | 02:33 | Now we certainly could have taken
advantage of some of the dynamic classes that
| | 02:37 | are assigned. There is a hover class
for example that is assigned dynamically.
| | 02:42 | I like doing it this way however
because this way, I'm not really relying in
| | 02:46 | the JavaScript. If the JavaScript is
turned off, the roller rule still work in
| | 02:49 | the submenus will be visible
because they are just nested lists.
| | 02:52 | So that's actually kind of a nice thing.
So I'll go down to the next line here
| | 02:55 | and we are going to give them a
background color of white. So they are going to
| | 02:58 | be a little different than our main
links. I'm going to go ahead and give them
| | 03:02 | a margin-right of zero and that
counters the existing margin that is set on the
| | 03:09 | parent ones spacing them apart, these
are going to be vertically stacked, so
| | 03:11 | they don't need that. Then I'm going to
type in color and their color is going
| | 03:17 | to be #58725A.
| | 03:18 | Font-Size is going to be 0.8 ems, so we
are going to make them pretty small and
| | 03:27 | then we'll give little bit of padding.
Padding top to bottom is going to 0.4
| | 03:31 | ems and then a space and padding left
to right is going to 1 em that person is
| | 03:35 | going to give us a little bit of
space between the background color and the
| | 03:37 | text itself. So that will be that rule.
| | 03:40 | Lets go down to our next one and here
we are going to type in #header ul ul li
| | 03:48 | a:hover. So we are going to go ahead
and deal with the hover of our submenu
| | 03:52 | links. Here we are going to change
the color to #fff and we are going to go
| | 03:56 | ahead and give it a background of
#88A48A. So, just sort of inversing that a
| | 04:07 | little bit. So I'll go ahead and
save that and then I'm also going to do
| | 04:10 | another little comment here.
| | 04:11 | I am going to do /* to open up the
comment and then I'm going to type in end
| | 04:16 | author styles and I'm just going to go
ahead and get myself a few more stars
| | 04:22 | out here, let me know that that section
has ended there as well. Now we are not
| | 04:27 | quite done yet however, we are going
to go down and modify some of these
| | 04:29 | existing styles a little bit more so
I'm going to go down into my submenu
| | 04:33 | indications styles and here I'm going
to modify some of my background graphics.
| | 04:39 | So what we are going to do is we
really only want our arrow to show up to
| | 04:43 | indicate that there is a submenu, I
really don't care about having it show up
| | 04:46 | as the menus split up, because I have
got little other background graphic that
| | 04:49 | I'm going to use this as a separator
and as it hovers over, I don't really need it either.
| | 04:53 | So what I'm going to do is I'm going
to take each one of these except for the
| | 04:55 | first rule, which is ul.
MenuBarHorizontal a.MenuBarItemSubmenu. So always
| | 05:01 | except the first rule, I'm going to
take everything except for background-image
| | 05:04 | and I'll replace background-image with
none. So the bottom three rules there,
| | 05:09 | go ahead and replace background image
with none and then it will just turn the
| | 05:12 | background of the image
off for that particular item.
| | 05:14 | So in that case no harm, no foul. Now
I'm going to scroll back up. I'm going to
| | 05:20 | go outside of my author styles and
into these design information styles and
| | 05:25 | around line 92 or so, right around
here find the ul.MenuBarHorizontal ul. I'm
| | 05:33 | going to change the border to a
background graphic. So I'm going to highlight
| | 05:37 | that and I'm going to totally replace
the border, so highlight entire border
| | 05:40 | and type in background and then : space
and the what we are going to do here is
| | 05:45 | we are going to do a URL.
| | 05:46 | Now, once again you can just type it in,
if you would like, hit Return and that
| | 05:49 | way you can browse. Now in this case
we are going to go to the Chapter_03,
| | 05:52 | 03_04 folder and to the images
directory and what we are looking for here is we
| | 06:00 | are looking for the submenu_back. So
you may have to scroll a little bit.
| | 06:06 | submenu_back, I guess I could have
typed in the S. There it is and you can see
| | 06:13 | it's a transparent GIF file and it has
the little bracket indicator to it. So
| | 06:17 | I'm going to go ahead and click OK on that.
| | 06:19 | Now that's going to be no-repeat. So,
we really want one of those and we are
| | 06:23 | going to have to replace it by typing
in center and then bottom. So what that's
| | 06:27 | going to do is it will place it
against the bottom of the element and it will
| | 06:30 | center it horizontally, so that's
perfect. It's exactly how we want that. Lets
| | 06:34 | go ahead and save that and then lets
finish up by going up and taking a look at
| | 06:40 | our submenu visible.
| | 06:41 | So I'm going to scroll up to right
around line 58, 59, right here. This is the
| | 06:47 | row we want, ul.MenuBarHorizontal ul.
MenuBarSubmenuVisible. So this is the rule
| | 06:54 | that effects the nested on our list as
a submenu is visible. We have got that
| | 06:58 | background graphic showing up right
now and when this is visible, we want to
| | 07:02 | give a little bit of spacing, so that
we can see that transparent background graphic.
| | 07:06 | So I'm going to click underneath that.
I'm going to add a little of padding to
| | 07:09 | the bottom because remember, when we
attached the graphic to the bottom of the
| | 07:13 | element and we are going to do a
padding to the bottom of 15 pixels.
| | 07:17 | So if 15 pixels were the padding to the bottom
that should be enough to allow us to see that graphic.
| | 07:21 | So go ahead and save that, preview
that in your browser and well, everything
| | 07:27 | looks okay for the most part. We
notice that our submenu items are coming up,
| | 07:31 | the background graphic that we ask for
here, the transparent one is showing up
| | 07:34 | and working just fine. Padding is
giving us enough spacing, so we can see that
| | 07:38 | but there is one problem. Our
background graphic, our images, those little
| | 07:41 | arrows that we were hoping for are not there.
| | 07:44 | So I'm going to close this and I'll go
back into CSS and if you scroll down to
| | 07:49 | that line 142, this is the rule that
should be showing us that but it's not. I
| | 07:55 | notice that the URL for the graphic is
SpryMenyBarDown.gif. If I go over and
| | 08:00 | look at my SpryAssets, I'm going to
clean this up little bit. There it is.
| | 08:03 | SpryMenuBarDown.Gif, So it wasn't showing up.
| | 08:05 | Well, see this is going to be a
recurring problem if you are modifying your
| | 08:11 | Spry widgets, you are constantly going
to have to battle between the existing
| | 08:15 | styling that you have in your site
versus the styling that you do for your
| | 08:18 | widget. To be honest with you, if you
are doing a workflow where you are adding
| | 08:21 | your widgets as you are designing your
site, this is little easier to deal with
| | 08:24 | because you're not having to
constantly go back and overwrite some stuff.
| | 08:27 | In this case, it's just not a specific
enough rule. So if I go back to my code
| | 08:32 | and I click on line number 42, I can
just add #header in front of all that to
| | 08:37 | make the rule a tad bit more specific
and that is going to deal with the fact
| | 08:41 | that one of those rules had told the
background to be none. So, now if I
| | 08:45 | preview that in my browser again, there
we go. Now one thing I do want to point
| | 08:49 | out, you see how the arrows are
pointing out, that is not the default graphic.
| | 08:53 | We went and took that into Photoshop
or Fireworks or whatever image editor y
| | 08:57 | have and I just rotate the triangle,
so it pointed up, pointing in the
| | 09:01 | direction that our menus are going to
be going, perfect. The good news is, our
| | 09:06 | menu bar looks and functions exactly
the way that we want it to. So what's the
| | 09:11 | bad news? Well, so far we have
absolutely no plan for what to do if the browser
| | 09:16 | doesn't have JavaScript enabled. So
that's something that we are going to have
| | 09:19 | to tackle next.
| | Collapse this transcript |
| Coding for non-JavaScript enabled clients| 00:00 | The fluid and changing nature of
the web means that the one constant web
| | 00:04 | designers can count on is change. Truly
mastering your craft means making sure
| | 00:08 | your code works in older browsers
and current browsers, in alternate user
| | 00:13 | agents and with an eye towards
future clients and standards.
| | 00:16 | Now usually this means you have to do
a little bit more work then you would
| | 00:18 | like to make sure your site is rock
solid for the majority of your clients.
| | 00:22 | While initially more painful, it's one
of the things that separates the great
| | 00:26 | designers and sites from the merely good
ones. The devil as they say is in the details.
| | 00:31 | Before we leave our menu bar, we have
to sweat one more detail, taking care
| | 00:35 | of user agents that are not
JavaScript enabled. So here I have my index.htm
| | 00:40 | page open and I'm previewing in the
browser, you can see our drop down menus
| | 00:44 | are working just fine.
| | 00:45 | But if I go up to this browser and
I turn JavaScript off and reload it...
| | 00:52 | Well, the rollovers are still working
because they are not tied into the menu
| | 00:55 | structure but you didn't have no idea
that About and Shop had additional links.
| | 01:01 | So at that point, you got nothing
going on there so we need to make sure that
| | 01:06 | we are dealing with that. Let me go ahead and
turn that back on, just in case I need it later.
| | 01:09 | All right, now there are multiple ways
to serve our content based on whether
| | 01:13 | JavaScript is enabled or not. One of
the oldest and most consistent ways of
| | 01:17 | doing it, is by using what we called
the noScript tag. The noScript tag is
| | 01:21 | ignored and thereby not rendered by
any user agent that has JavaScript
| | 01:26 | turned-on. For those devices that
have JavaScript turned-off however, the
| | 01:30 | contents of the noScript tag are
rendered exactly where they are within the code.
| | 01:35 | While noScript does have a few support
issues such as incomplete support within
| | 01:39 | the head tag, it offers a solid and
widespread method for supplying alternative
| | 01:44 | content to those who are not JavaScript enabled.
| | 01:47 | Since, our menu bar involves navigation,
we'll serve up alternate navigation to
| | 01:51 | our sub-menu pages and since our
site contains a lot of other Spry based
| | 01:55 | content, pass along a message advising
the user to enable JavaScript. So what
| | 01:59 | we are going to do is for the pages
that have alternate content, let me refresh
| | 02:03 | my browser real quick here. So the
About and Shop, these guys have drop down
| | 02:07 | menus. Those pages will have a
little bit of a sub-menu right above the
| | 02:10 | headline. For pages like Home and
Galleries and Contact, we just want to pass
| | 02:15 | along a little message that says,
hey, you may want to consider turning
| | 02:18 | JavaScript on.
| | 02:19 | Okay, and this is another thing that 's
a little bit easier to do in Code view.
| | 02:23 | Now if you would like, go ahead and
highlight, this headline New York City
| | 02:26 | because flipping back over to Code
view and focusing on the Source Code, it
| | 02:30 | will jump you right down where you want to be.
| | 02:32 | So right there on line 70, just inside
this opening div tag where the class is
| | 02:37 | article, go ahead and create a little
bit of space for yourself there and we
| | 02:40 | are going to work right there. So the
first thing I'm going to do is I'll put
| | 02:43 | up a noScript and then I'll hit
Return and I'll close my noScript tag.
| | 02:48 | So anything that I want to be visible
when JavaScript is turned-off, should go
| | 02:53 | inside those tags. And inside that,
I'm going to type in a paragraph tag then
| | 02:58 | I'm going to go and give it a class
attribute and my class is going to be
| | 03:02 | noScript. We haven't written a style
for yet, but we'll and that will allow us
| | 03:06 | to style our new script paragraph text,
little bit differently than the rest of
| | 03:10 | our text in our page.
| | 03:11 | So I'm going to type in something
kind of funny here. So I'll go, I'll say,
| | 03:15 | 'Psst. Hey. You have JavaScript turned
off. If you want to see the REALLY cool
| | 03:27 | stuff on the site, turn it on.
Thanks!' Always pays to be nice, right.
| | 03:35 | All right, so I'll close the paragraph
tag, there we go. And I'm just going to
| | 03:40 | go ahead and save that. Now still in
Code view I'm going to switch over to our
| | 03:44 | main CSS file, which is main_hasMenuBar
.css, and I'll scroll all the way down
| | 03:53 | to the bottom of my rules, right from
noDisplay. And I'll just hit Return. We
| | 03:57 | are going to add another class here.
It will be the noDisplay but I need to
| | 04:00 | make that a little bit more specific,
so I'm going to type in #container
| | 04:03 | #mainContent p.noScript.
| | 04:11 | Since it's always going to be in the
same place and since we only want to
| | 04:14 | assign it to paragraphs, we can be
that specific with it and make sure that
| | 04:18 | it's going to render properly. This is
going to be the easy one, this is going
| | 04:21 | to be font-size, and the font size is
going to be 0.8 ems. And then I'm going
| | 04:28 | to type in color and we are going to
do a color of #f00 which is red, so we
| | 04:34 | want to make it really red, so it stands out.
| | 04:37 | So we'll go ahead and save that file.
I'm going to preview that in my browser.
| | 04:42 | So currently, I don't see anything in
terms of the noScript tag but if I turn
| | 04:47 | my JavaScript off and refresh my browser,
you will notice that navigation menu
| | 04:54 | is gone again but now we have this nice
little message that says, Hey. You have
| | 04:57 | JavaScript turned off. If you want to see
the REALLY cool stuff on the site, turn it on.
| | 05:00 | So nice way of passing messages to
people who don't have their JavaScript
| | 05:04 | enabled. So let's turn our
JavaScript back on and now we have to concern
| | 05:09 | ourselves with the pages that actually
have some sub-menu navigation. So I'm
| | 05:14 | going to go over to our Files panel
and I'm going to open up the about.htm as
| | 05:18 | well. Now remember the About page, if I
go and take a look in the Design view,
| | 05:22 | the About menu item has three sub-
menus, Contributors, Gear and Tour.
| | 05:27 | If I'm on the About page and
JavaScript is turned off. I would like to have a
| | 05:30 | little bit of a sub-navigation just
below the main navigation. No, no we are
| | 05:34 | not going to do a whole lot of crazy
styling with this, we are just going to
| | 05:38 | place that content just about the article
so that somebody could have easy access to that.
| | 05:42 | Now what better place to start with
content, you have already done. So I'm
| | 05:45 | going to go back to the index page,
I'm going to stay in Code view but I'm
| | 05:48 | going to go to my Source Code. And
let's scroll down to find the noScript tag
| | 05:53 | that I created earlier. It was
around 72. And I'm going to highlight the
| | 05:58 | opening and closing noScript tag and copy that.
| | 06:00 | So I'm going to go back over to the
about.htm. Once again I'm going to focus on
| | 06:04 | Source Code. And again if you are
trying to figure out exactly where to place
| | 06:08 | it, clicking inside this main heading
is a good way to do that. So I'm going to
| | 06:10 | do that, click on the Source Code, hit
Code and it jumps me right down where I
| | 06:15 | need to be. So that line 74 here, just
inside the galleryArticle div, I'm going
| | 06:19 | to go ahead and paste my noScript content.
| | 06:22 | Now it's going to be a little different,
I still want that little paragraph to
| | 06:25 | come in and say, hey, you know just in
case but actually above that I want to
| | 06:29 | place my other menu. So I'm going to do
another little paragraph, this one I'm
| | 06:33 | not going to give a noScript class to
because I don't want it to have that
| | 06:36 | styling. And I'm going to type in
Contributors and then little pipe character
| | 06:42 | and I'm going to type in Gear and
little pipe character and then I'm going to
| | 06:47 | type in Tour and then I'll close the paragraph.
| | 06:50 | Now of course, those are all links,
so I'm going to highlight the word
| | 06:53 | Contributors here and I'm just going
to wrap this using Wrap tag right over
| | 06:57 | there and I'm going to wrap this in an
a tag and the href for that is going to
| | 07:03 | be contributors.htm. And we can also
do a title if we like, and I'll go ahead
| | 07:10 | and title this, Meet our Contributors.
| | 07:16 | So all the stuffs that we had in our
previous link, want to go ahead and do
| | 07:19 | that for all of these guys. So I'm
going to highlight Gear. We'll wrap that in
| | 07:22 | an A tag as well. We'll href that to
gear.htm. We'll go ahead and give it a
| | 07:30 | title of Check out our sweet gear. Then
I'm going to run in Tour, wrap that in
| | 07:41 | a tag, href is going to be tour.htm
and the title for that one is going to be
| | 07:47 | -- we'll do a, Check out our tour dates.
| | 07:51 | So almost exactly what we had earlier,
perfect. So I'm going to go ahead and
| | 07:54 | save that. Now that we have this, I'm
also going to open up Contributors. So we
| | 07:58 | are not going to do all of these but we
are going to get a good feel for how we
| | 08:01 | would implement it in one page versus another.
| | 08:04 | So I'm going to highlight everything
in the noScript tag and copy this. I'll
| | 08:08 | open up Contributors and I'm going to
do the same thing. I'll just go into Code
| | 08:13 | view. Highlight that one so I know
where to place the noScript tag. And right
| | 08:17 | there on line 72, I'm just going
to drop it in there. Since this is
| | 08:20 | Contributors, I want to let people know
that they are on the Contributors page.
| | 08:23 | So I'm just going to go in here and I'm
going to strip out that a tag, so there
| | 08:28 | is no link whatsoever there. And that
way it will give the appearance of yes we
| | 08:32 | are on the Contributors page and we
don't need any link. So I'm going to go
| | 08:34 | ahead and save that.
| | 08:36 | And starting with the index file, I'm
going to preview this in my browser. Now
| | 08:42 | we already know how it works with
JavaScript turned-on, so I'm going to come in
| | 08:46 | and turn JavaScript off, refresh our
page. So now if we click on the About
| | 08:51 | page, not only do they get the message,
they get the links to the sub-pages
| | 08:56 | there as well. And then if I click on
Contributors, I still get the message and
| | 08:59 | it lets them know they are on the
Contributors page and the sub-links to Gear
| | 09:03 | and Tour. So I'll just repeat that
process for both the Gear and the Tour. I
| | 09:07 | would also repeat it for the sub-menu
pages underneath Shop, which would be perfect.
| | 09:12 | And that is certainly not the most
robust alternate content method that's ever
| | 09:15 | been served up but we are providing
alternate means of navigation for those
| | 09:19 | without JavaScript and a gentle
reminder that the page experience would be
| | 09:23 | improved by enabling JavaScript.
We now have a properly styled, functioning
| | 09:27 | cross browser compliant drop down menu
that also serves up alternate content
| | 09:32 | for non-JavaScript clients.
| | 09:34 | All right. While we did have to do some
tweaking to get exactly what we wanted,
| | 09:38 | it is worth noting that taking
advantage of Dreamweaver and using the Spry
| | 09:41 | widget saved us some serious
time and gave us a head start on both
| | 09:45 | functionality and styling.
| | Collapse this transcript |
|
|
4. Validating Form Data with SpryExploring form validation| 00:00 | I have been putting it off but I really
need to start a Twitter account.
| | 00:03 | Yeah, I know. All the cool kids are
doing it but I have barely time to return
| | 00:07 | emails, much less let everybody know
what I'm doing every second in a day.
| | 00:10 | Still, here we are at Twitter's signup page
and this is actually a really good place
| | 00:15 | to start talking about form validation
which is what Chapter 4 is all about.
| | 00:20 | So let me click inside the form, just start
typing, and hey, look at that. As soon as I
| | 00:25 | click in this and enter your first
name and last name, okay fair enough.
| | 00:28 | So this form is helping me. I like to be
helped. Pick a unique name on Twitter.
| | 00:33 | How about James? It's going to check.
You'll notice it goes" oh, user name has already
| | 00:36 | have been taken." Deadgumit. All right,
how about DreamweaverJames?
| | 00:44 | Uhoh. How about DreamweaverJam? Since James
isn't going to fit. I'm checking, well,
| | 00:49 | believe it or not- I know it's
hard to believe it- it's not taken.
| | 00:52 | So now I'm going to do a password and
oops, '6 characters or more be tricky.'
| | 00:57 | Tricky is six characters so let's
do tricky.
| | 01:02 | Too short? Weak? Oh, come on, man,
what's up with the Weak stuff?
| | 01:05 | Well, hey, did you notice how all this stuff
| | 01:07 | is happening as I'm filling
out my form? I'm not having to actually
| | 01:10 | submit the form in order to get this kind
of feedback that's going to help me filling out.
| | 01:14 | Now this may seem like a really obvious
solution like duh, why wouldn't you want this?
| | 01:17 | But client-side form validation
has only recently hit its stride.
| | 01:22 | So validating form data is just another
way of saying that you are checking how
| | 01:26 | the user is filling out your form. By
validating forms, you can prevent a form
| | 01:30 | from submitting incorrectly or
simply make sure that you are getting the
| | 01:33 | required information from the user.
There are two ways that you can validate forms:
| | 01:37 | you can do client-side
and server-side validation.
| | 01:42 | Server-side validation requires the
use of server-side software, such as Cold
| | 01:45 | Fusion, PHP or .Net. It's usually done
by having the server check the form
| | 01:50 | data as it's being submitted, return an
error if the form data doesn't validate
| | 01:54 | and then display a message to
the user detailing the problems.
| | 01:57 | Well server-side validation can be
extremely robust, it does require a server
| | 02:02 | request in order to check for errors.
Because of this, the feedback to the user
| | 02:07 | isn't received until the form is
submitted and for many users this can be a
| | 02:10 | little frustrating and off-putting.
Well, that's where client-side validation comes in.
| | 02:14 | Client-side validation is typically
handled by JavaScript and can check form
| | 02:17 | data as it's being filled out. When the
user moves from one form of element to
| | 02:21 | another and when the form is submitted.
Now this allows you to give the user
| | 02:25 | immediate feedback and better overall
user experience. The only drawback to using
| | 02:29 | client-side validation is the
JavaScript has to be enabled in the browser in
| | 02:33 | order for it to work. It's not a bad
practice to have at least some simple
| | 02:37 | server-side validation to handle
non-JavaScript enabled clients.
| | 02:40 | So in this chapter, we are going toe
examine doing client-side validation using
| | 02:44 | Spry includes multiple form
validation widgets that check items such as
| | 02:48 | text fields, passwords, checkboxes,
radio buttons and more. Their simple
| | 02:52 | structure and clear CSS makes creating
and styling user feedback a breeze as well.
| | Collapse this transcript |
| Inserting text field validation widgets| 00:00 | So our desolve.org site does a
registration form and I'm previewing this now in
| | 00:05 | the browser. This is just the default
form and notice that if I click, I do get
| | 00:11 | some feedback in terms of at least
letting me know where my focus is, but
| | 00:15 | that's really being
handled right now by CSS anyway.
| | 00:18 | So everything else seems to be
working okay, but I'm not getting any user
| | 00:22 | feedback. I have no idea whether
it's a good password or not. To be honest with you,
| | 00:25 | I don't even know what I typed. And there
is nothing here outside of some cool CSS work.
| | 00:32 | There is really nothing
there to help me fill out this form.
| | 00:34 | So we need to take this form and
upgrade it using some of our Spry validation
| | 00:38 | widgets. So our first step in adding
client side validation to our forms will be
| | 00:43 | to replace some of the existing form
elements in our registration form with
| | 00:46 | Spry validation form widgets.
| | 00:48 | We'll first replace the Email and
Password text fields, since both of them
| | 00:52 | include information that is required
for people to register with our site.
| | 00:56 | As we add the widgets to our page, we'll
also set options for each widget that
| | 00:59 | will control which message is
displayed if the data is not valid and choose
| | 01:04 | exactly when to have Spry validate the data. So
there is a lot of options available to us here.
| | 01:08 | So I'll go back in the Dreamweaver. Now
for those of you who are kind of new to
| | 01:11 | the party here and they are following
along with me, we need to go ahead and
| | 01:14 | set a default directory for our Spry
Assets. So the Dreamweaver is adding those
| | 01:18 | to the right folders.
| | 01:19 | So I'm going to go in the 04_01 folder.
I'm going to right-click choose New
| | 01:24 | Folder. We are going to call this
SpryAssets. Again that just keeps it
| | 01:27 | consistent with what Dreamweaver
normally uses, although you could name this
| | 01:31 | anything that you want.
| | 01:32 | Next thing we have to do is go up to
our Files panel, go up to the name of your
| | 01:36 | site and double-click that. That will
open up our Site Definition dialog box
| | 01:41 | and in the Events tab we want to go in
the Spry category and here we'll browse
| | 01:46 | and we'll go into Chapter_04 > 04_01 >
SpryAssets. Select or Choose on
| | 01:54 | the Mac and then click OK and
we are ready and raring to go.
| | 01:59 | So I'm going to scroll down and find my
existing email element within the form.
| | 02:04 | We are going to replace this with
the Spry validation widget. Now the
| | 02:07 | interesting thing here guys if you are
hand coding this, you really wouldn't
| | 02:10 | have to delete anything, but because
we are not hand coding it and we want to
| | 02:14 | go through the automated process of
having Dreamweaver insert this, I'm going
| | 02:17 | to go ahead and select both the Label and
the Form Element and I'm going to delete them.
| | 02:22 | I want to make sure I don't get rid of
the paragraph that's there but I need
| | 02:25 | the label tag gone and I need the
input tag gone. So if you are not entirely
| | 02:29 | comfortable with what's going to on
here, you might want to do that in a Code view.
| | 02:32 | So if we go up to our Insert toolbar
and find our Spry panel, we can see that
| | 02:37 | we have all of these Spry validation
widgets. You don't always have to go Spry
| | 02:41 | to find that; you can click on the
Forms>Insert toolbar as well and they are
| | 02:45 | all right there. So you can insert
these as you are building out, your forms
| | 02:49 | that as well they are the same exact items.
| | 02:51 | So I'm going to go ahead do a Spry
validation text field. Now the interesting
| | 02:54 | thing here is if you ever built a
form in Dreamweaver, this is instantly
| | 02:58 | recognizable. You've done this before.
So we are going to go ahead and give
| | 03:02 | this an ID, which is Email for this
particular form element. The label is going
| | 03:07 | to say Email:.
| | 03:10 | Now for those of you that aren't
familiar with forms, the ID is the name of the
| | 03:13 | element itself. The label is the text
that's going to show up beside that we
| | 03:16 | are going to attach the label using
a for attribute and we have our form
| | 03:20 | elements tabbed index, so the tab
index of that element will be 20.
| | 03:24 | We'll go ahead and click OK. Now that
had nothing to do with form validation.
| | 03:28 | That had everything to do with
making sure that the form element meets
| | 03:32 | accessibility standards and that's
something that is a preference that you can
| | 03:36 | turn on or off inside Dreamweaver.
| | 03:37 | I am going to go ahead and select
form element itself and using Properties
| | 03:42 | Inspector I'm going to grab the Class
pulldown menu and choose Text. We are
| | 03:46 | good bid in inserting this form
validation widget and we haven't seen really
| | 03:49 | anything to do with Spry so far at all.
Well, here is one thing different.
| | 03:54 | Notice that when we clicked on the
text field, around it we have this little
| | 03:58 | blue Spry tab that says Spry text field.
| | 04:01 | If I click on that tab, now the
Properties Inspector is reflecting all of those
| | 04:05 | Spry validation properties. So this is
a Spry text field. So what we are going
| | 04:10 | to do is we are going to grab the
Type pulldown menu and notice that you
| | 04:14 | validate against certain required
items. Such as a Credit Card number or a
| | 04:18 | Date, and in our case we want an Email
Address. So I'm going to validate that
| | 04:22 | versus an Email Address.
| | 04:24 | So the JavaScript will make sure that
whatever somebody enters here is at least
| | 04:27 | an email address in the terms of the @
symbol and the .com, or .org or whatever it may be.
| | 04:33 | Now I can also validate this and
notice that by default when the form is
| | 04:37 | submitted, Spry is going to validate
this form. But I can also validate it on
| | 04:40 | blur which means when somebody leaves
focus or on change as somebody is typing
| | 04:45 | that in, I only want to validate that
on blur and submit, because as they are
| | 04:49 | typing in, I don't want to say, hey,
make sure you type in an email address.
| | 04:52 | But you can do that if you wanted to.
| | 04:54 | The next thing that happens is here
we have a Preview state. If I grab that
| | 04:58 | pulldown menu, this is what the form
element looks like initially when somebody
| | 05:01 | first loads the site up. Next, we have
the required format, and you can see it
| | 05:06 | changes color. It has a red
background color and now it says a value is
| | 05:10 | required right out there to the side.
| | 05:12 | In the Invalid Format we could say
Invalid format. Now we want to make that a
| | 05:16 | little bit specific. So what I'm
going to do is I'm going to go up to the
| | 05:19 | Required and I'm going to highlight
the text right here that says a value is
| | 05:23 | required. You will notice that I didn't
highlight the period. There is a little
| | 05:26 | bit of bug inside Dreamweaver here and
if you highlight the whole text, sometimes
| | 05:29 | it doesn't allow you to actually change it.
You have to go in Code view and do it.
| | 05:32 | So if you are going to stick with
working in Design view, my advice is do not
| | 05:36 | select the whole thing. All right, I'm
going to type in Valid email please and
| | 05:43 | if you want, you can replace the
period with an exclamation point, if you are
| | 05:46 | really, really serious about it.
| | 05:47 | Now I'm going to go ahead and do the
same thing for the Invalid Format. I'm
| | 05:51 | going to let him know what that
format should be. I'm just going to type in
| | 05:55 | Valid email please. Now how in the
world is all that structured? Well, if I
| | 06:01 | highlight this and switch over to Code
view, you can see that these messages
| | 06:05 | are really just inside of span tag and
the span tag will display dynamically
| | 06:10 | based upon whether the form
element is whether or not.
| | 06:13 | So I'm going to go ahead and save this
and I'll notice that it's going to copy
| | 06:16 | over the SpryAssets folder
that we set as the default folder.
| | 06:19 | SpryValidationTextField.css and the
SpryValidationTextField.js, so both the
| | 06:24 | JavaScript and Cascading Style Sheets
being able to work. So I'm going to do a
| | 06:28 | Save All and preview that in my browser.
| | 06:32 | So now when I click inside our email,
I don't really get anything, but then
| | 06:36 | when I start typing, I don't get
anything. But let's say I don't feel like
| | 06:40 | typing in a full email address and I
hit tab. It tells me, hey, you need a
| | 06:43 | Valid email please. And if I just typed
it then correctly, and the tab it goes away.
| | 06:52 | Same is true for submitting the
form. If I go down and submit it, it
| | 06:58 | immediately gives me that same user
feedback that I need a valid email. So now
| | 07:01 | we are getting somewhere. It would be
pretty counterproductive to have somebody
| | 07:05 | register for our site without knowing
our email address. So now that we have
| | 07:08 | our validation widget in there we're
ensuring that they are at least typing in
| | 07:11 | an email address whether it's valid or not.
| | 07:14 | So we are not quite done yet. So next
we'll deal with validating our password
| | 07:18 | text field and adding a
confirmation widget as well.
| | Collapse this transcript |
| Inserting password and confirmation validation widgets| 00:00 | Since our form is allowing our users to
register for our site, we want them to
| | 00:03 | choose a password to make sure they
are choosing at least a little secure
| | 00:08 | we'll restrict their passwords to
at least eight characters.
| | 00:11 | Remember that if you are using a
password text field, users wouldn't be able to
| | 00:14 | see the characters they are typing in
and to make sure they don't make a typo,
| | 00:18 | we want to make them type it twice.
Well, thanks to our Spry validation
| | 00:21 | widgets, we can do just that.
| | 00:23 | So here I have the contact.htm opened
from the 04_02 folder and before we get
| | 00:29 | too far into this, let's go ahead and
reset Dreamweaver's default SpryAssets
| | 00:33 | directory. So I'm going to go over to
our Files panel, find the name of my site
| | 00:36 | and double-click that. That will open
up my Site Definition dialog box and I'll
| | 00:42 | click on the Spry category and just
for my SpryAssets directory I'm going to
| | 00:47 | browse for the Chapter_04>04_02>
SpryAssets folder and you can either hit select
| | 00:53 | of choose based upon your operating system.
| | 00:55 | So I'm going to take the existing
password text field and it's labeled and I'll
| | 00:59 | delete that, but leave the empty
paragraph and then I'm going to go up to my
| | 01:03 | either Forms object or Spry Insert
toolbar. And I'm going to find the Spry
| | 01:07 | validation password widget.
Let's go ahead and insert that.
| | 01:11 | So we'll follow the normal procedure
for inserting a text field and I'll just
| | 01:15 | type in pwd for ID and password for
the label, so those of were what our
| | 01:20 | previous password text field had.
We'll attach label using the for attribute
| | 01:24 | and the tab index will be 30. Let's go
ahead and click OK and then I'm going to
| | 01:29 | select the text field itself and using
the Properties Inspector I'm going to
| | 01:33 | apply the class text, so that it has
the same width as everybody else, and it's
| | 01:37 | being driven CSS.
| | 01:38 | Now you may have noticed this little
error up here. It's not really an error.
| | 01:42 | Let me show you what's happening. If I
go over in Code view and scroll all the
| | 01:46 | way down to the bottom, you can see
it's added another constructor function;
| | 01:49 | this one for the validation
password widget inside of our JavaScript.
| | 01:52 | Now for some reason any time you
add a new constructor function there
| | 01:56 | automatically, it returns an error in
the syntax, although it's not really
| | 01:59 | there. If you just make some minor
edit to it, like adding a space and then
| | 02:02 | taking the space right away again, and
it just goes away. So it's just a little
| | 02:06 | bug there and don't worry about it.
| | 02:08 | So I'm going to go back to the Design
view, scroll back up, and I'm going to
| | 02:12 | click on the tab for this Spry password.
That's going to give me all my options
| | 02:15 | for the Spry validation password
widget. I can see that I have got minimum
| | 02:20 | characters and maximum characters. So I
can set a range for my passwords and I
| | 02:23 | can even go in the More Detail and set
minimum and maximum numbers of letters,
| | 02:28 | numbers, uppercase and even special characters.
| | 02:30 | But we'll keep it fairly simply. We
are going to do a minimum characters of
| | 02:33 | eight. So it has to have at least eight
characters. As soon as I choose that my
| | 02:38 | Preview states populates. So you don't
want to see your Preview states until
| | 02:42 | you've set the range of characters.
That way you make sure that it has been
| | 02:45 | populated with all of the
different possible Preview states.
| | 02:49 | So first I'm going to go to Required
and I'm going to highlight error message,
| | 02:52 | a value is required and I'm going to
change that to Eight characters please.
| | 03:00 | Clicking on the blue tab again, I'm
going to switch my Preview states to
| | 03:02 | minimum numbers of characters not met
and keeping with character of the site
| | 03:06 | I'm just going to type
not yet ... and there we go.
| | 03:10 | Now I also want to validate this on
both blur and change as well as submit.
| | 03:18 | That way if somebody navigates off
of it by tabbing off of it without the
| | 03:21 | requirements being met or validate and
as they are typing it in, it will give
| | 03:25 | them some feedback as to whether they
have made the password strength-y yet or
| | 03:28 | not. Perfect.
| | 03:29 | I will set the Preview state back
initial and now we are ready to go ahead and
| | 03:33 | insert the confirmation widget. So
I'll create a new blank paragraph there. I
| | 03:37 | go up to my Insert toolbar and I'm
going to find the Spry Validation Confirm
| | 03:41 | widget. So I'm going to go right there.
I click that. For this ID I'll type in
| | 03:46 | confirm and for label I'm
going to type in confirm password.
| | 03:51 | Now we didn't have this form element
before, so we are going to reap the
| | 03:54 | benefits here of using a factor of
ten and the tab index, because now I can
| | 03:58 | type in 35 and that will snuggly put
it in between of the previous two values
| | 04:04 | there without our tab index. So we'll click OK.
| | 04:06 | I am going to do the same thing here
again guys. So I'm going to click that,
| | 04:10 | give the class of text, and I'm just
going to ignore this little error message
| | 04:14 | until we are all done. So I'm
going to click on the tab to go into my
| | 04:18 | confirmation widget. Now this one
doesn't have any options. You can see that
| | 04:21 | what we are looking for here is which
form field is it validating against.
| | 04:26 | Now by default if there is a
password text field already in your form it
| | 04:30 | automatically chooses that, but if for
whatever you were doing this to out of
| | 04:34 | order you could simply grab the
pulldown menu and choose the proper one, but we
| | 04:37 | are going to leave the password selected,
so I could, because that's the one we want.
| | 04:40 | Now we have to set some values for
this one as well. So I go to Required and
| | 04:45 | I'm going to go ahead and highlight and
I'm going to type in Values must match
| | 04:52 | and I'll click on that and switch to
the Invalid. So here if it validates and
| | 04:56 | it doesn't match, it's going to type in
Umm... that's not right ... so a little
| | 05:03 | tongue-in-cheek there.
| | 05:03 | All right, we are going to save all of
this and when we do that, notice that it
| | 05:08 | is now copying over four Asset files
to CSS for both the confirmation and the
| | 05:12 | password widget and two JavaScript
files for the confirmation and the password
| | 05:16 | widget. So I'm going to click OK, and
I'm going to switch over to Code view and
| | 05:20 | just get rid of little error message
real quick. Again, you can just take a
| | 05:24 | space or add a space and it will just go away.
| | 05:27 | So we'll save that, and I'm going to
take care of one more think that I forgot
| | 05:30 | about. I'm going to scroll back up and
choose the confirmation password widget
| | 05:35 | again. Notice that right now we only
have it validating on submit. We wanted to
| | 05:38 | validate it when somebody changes
focus and when somebody changes the values
| | 05:42 | that are getting constant feedback on
that. So you always want to double -check
| | 05:45 | that before you save it and preview it.
| | 05:48 | Let's do that. Let's go ahead and save
it and preview it. Now if I type in my
| | 05:52 | password, you can see it's giving me
feedback and when the minimum number of
| | 05:57 | characters are met, the message goes
away. And before I want to confirm it,
| | 06:00 | notice that again it's giving me
feedback that's it's not right until it is
| | 06:03 | right and then it goes ahead and confirms.
| | 06:05 | Now they are working properly for the
most part, but you may have noticed that
| | 06:09 | the default behavior for a password
does not inform the user that the parameter
| | 06:13 | is the password when I establish
focus on it. So I don't really get that it
| | 06:17 | needs eight characters until I try to
submit it with nothing in it, and that's
| | 06:20 | not really what I want.
| | 06:22 | Now this is kind of unfortunate. It
forces us to either inform the user in none
| | 06:25 | another way like just writing some
default text there, it just makes them
| | 06:29 | guess, frankly. So we don't have an
automated way of dealing with this. It does
| | 06:32 | give us a chance to discuss the
rather unique relationship that styles and
| | 06:36 | functionality enjoy within validation widgets.
| | 06:38 | So we are going to get to that shortly
and we are going to correct that to use
| | 06:41 | it in CSS. Before that however we are
going to finish inserting our validation
| | 06:45 | widgets by using a
checkbox validation widget next.
| | Collapse this transcript |
| Inserting a checkbox validation widget| 00:00 | Text fields are not the only thing
that Spry widgets can validate. In fact,
| | 00:04 | there aren't many form fields that it
can't. Validating anything like checkboxes
| | 00:07 | and radio buttons are just as easy
but since they have their own specific
| | 00:11 | characteristics, it's well
worth examining their settings.
| | 00:14 | In our current form, there is no
acceptance of our site terms and conditions,
| | 00:18 | something that's pretty important
for any site that offers any type of
| | 00:21 | membership. So we'll insert a check box
that allows people to accept our terms
| | 00:25 | and use a validation widget to ensure that
they have checked the box prior to registering.
| | 00:29 | Now before we insert that, I'm going
to go ahead and reset our default Spry
| | 00:33 | Assets directory. So I'm going to go
over to our site name, right up here in
| | 00:37 | the Files panel, double click that.
When the Site Definition dialog box comes
| | 00:41 | up, I'll choose Spry and
I'm just going to browse.
| | 00:44 | This time we are going to go into the 04
_03 SpryAssets folder, open that up and
| | 00:50 | either select or choose that. So I
just want to make sure that it's going to
| | 00:53 | copy over those assets in the proper
folder. So I'm going to scroll down the
| | 00:58 | very bottom of the form and just above
the Submit button, I'd like to place an
| | 01:02 | acceptance check box, so that people can
accept the site's terms and conditions.
| | 01:05 | So I'm going to go ahead and create
a new paragraph just above the Submit
| | 01:09 | button and if I go to my form objects,
one of my Spry Insert toolbar, I can
| | 01:13 | find a Spry Validation Checkbox. So
I'm going to go ahead and click that. The
| | 01:18 | ID for this one is going to be Terms
and the Label for this is going to read I
| | 01:23 | agree to Dissolve.org's terms and conditions.
| | 01:31 | Now, we are going to Tab Index this on
at 150 and we are going to position it
| | 01:36 | after the form item. Did you notice
how Dreamweaver did that automatically,
| | 01:39 | it's very smart like that. Let's go
ahead and click OK and right there is our
| | 01:43 | checkbox but notice that again we get
that little Spry indication around that,
| | 01:47 | so I'm going to click on that tab
and you can see that this is Required.
| | 01:51 | You can Enforce a range and if you
have a group of checkboxes together for
| | 01:54 | example if there are multiple
selections that they can make, you could say
| | 01:57 | something like choose at least two
and you could enforce that range. So I'm
| | 02:01 | going to go in and go to the Required
Preview state. That's really the only
| | 02:05 | other Preview state that you have and
here it says Please make a selection.
| | 02:09 | Well, there is no rule about what
you can and can't have in these error
| | 02:13 | messages. So I'm going to highlight
this and we are going to include a little
| | 02:16 | bit more than we normally would. I'm
going to type in You must approve our
| | 02:22 | terms and conditions, to review
them please visit our terms page.
| | 02:34 | Now I'm going to hide the word Terms
and using the Properties Inspector, I'm
| | 02:39 | just going to link that to terms.htm.
So absolutely, they can have a link
| | 02:46 | inside of them. They can have link
inside them, they can have images inside
| | 02:47 | them, background graphics whatever
you want these guys to have. It's just a
| | 02:51 | Span tag and you can style the content
inside of it anyway that you want which
| | 02:54 | is really cool.
| | 02:55 | All right, I'm going to go ahead and
Save this again. It's going to copy over
| | 02:59 | the Spry Assets for the validation
checkbox, both the Cascading Style Sheets
| | 03:03 | and the JavaScript and let's go ahead
and preview that within our browser.
| | 03:11 | Okay, I'm just going to scroll down and
since the checkbox is really only going
| | 03:15 | to validate on a blur or a change,
I'm going to go to Tell me about it and
| | 03:19 | notice that as soon as I typed it in
without selecting the checkbox, up comes
| | 03:23 | the error message and it says, I must
approve our terms and condition to review
| | 03:26 | them, this is our terms page, and
notice that, that is indeed an active link.
| | 03:30 | When I check the checkbox, I'd really
like that to go away and right now it's
| | 03:34 | still there. So you want some
acknowledgment that they have agreed to your
| | 03:37 | terms. So I'm going to close this, we
are going to go back into Dreamweaver,
| | 03:41 | and having selected that, we are
going to go ahead and validate that on a
| | 03:45 | change and a blur as well. You really
won't notice the blur unless they tab off
| | 03:49 | of it, but the change is what's important here.
| | 03:51 | So let's go ahead and Save that one
more time, preview that again and this time
| | 03:56 | if I submit the form, now as I check it,
notice that it's going to toggle that
| | 04:00 | on and off. So that's a really nice
thing to do there for a checkbox validation widget.
| | 04:05 | So our validation widgets are all on
the page and for the most part, they are
| | 04:08 | functioning exactly the way that we
want them to. The default look could
| | 04:12 | integrate into our site, defined a
little bit more cleanly. Now, this is
| | 04:15 | usually pretty easy for any type of
Spry widget you will be working with since
| | 04:18 | the CSS is exposed and very easy to manipulate.
| | 04:21 | However, with validation widgets,
modifying the CSS like this is going to
| | 04:25 | present certain hurdles for us and
we'll take a look at that shortly. I also
| | 04:29 | want to point out that while we didn't
do every single validation widget that
| | 04:32 | comes with Dreamweaver, it's pretty
clear to see based upon our sampling that
| | 04:36 | the process of inserting and
controlling these widgets, is remarkably similar
| | 04:40 | across all of them.
| | 04:42 | Learning how to insert control and as
we are about to do style, one validation
| | 04:46 | widget should make working with
any other validation widget a snap.
| | Collapse this transcript |
| Controlling basic validation widget styling| 00:00 | Almost everything in Spry is amazingly
easy to update, modify or style.
| | 00:05 | Notice I said almost. Spry validation widgets
start off just like every other Spry
| | 00:10 | element. They seem like a snap to
update and style. However, most designers find
| | 00:15 | out very quickly when they try to
deviate too far from their default styling,
| | 00:19 | that validation widgets can be very
tricky to style indeed. That is due to the
| | 00:24 | fact that more than perhaps any other
widget, the validation widget's CSS is
| | 00:29 | directly and dynamically linked with
its functionally. Knowing what you can and
| | 00:35 | what you can't change is crucial to
making a widget style the way that you want.
| | 00:39 | Before we get too far down that road
however, let's examine modifying the
| | 00:42 | default styling and then reviewing the
functionality of our widgets to see if
| | 00:46 | it's still exactly what we want or
not. And before we start reviewing the
| | 00:51 | styling of this, I'm just going to
Preview this one more time and I want to
| | 00:54 | point out something about how the widgets
react to somebody is filling out the form.
| | 00:58 | So if I click in our Email and I begin
to fill it out, notice that I get some
| | 01:01 | feedback about the fact that I need to
have a valid email address. As soon as I
| | 01:07 | meet the requirement, the message goes
away. Same with the password, as I start
| | 01:10 | to fill that out, it tells me that I
haven't got the required numbers of
| | 01:13 | characters yet. As soon as I do, it
goes away and when I confirm it, it tells me
| | 01:17 | that the values are not right until
it's met and then that goes away as well.
| | 01:21 | Because of the fact that we have
these items validating on change, as you
| | 01:26 | change the value inside the widget
that is constantly updating. Well,
| | 01:29 | believe it or not, that is directly tied
in the CSS, so let's go and check that out.
| | 01:33 | I am going to go back into Dreamweaver
and again with this contact page,
| | 01:39 | you can see how many external assets are
required. Here we have a JavaScript file
| | 01:43 | for every widget and we also have a
CSS file for every widget. We have gotten
| | 01:47 | so many of these that I can't even see
them all anymore and I have to use this
| | 01:50 | little drop-down menu to
get to some of these guys.
| | 01:53 | One thing that I can do is minimize my
panels to icons. That helps but I still
| | 01:58 | got a lot here. So one of the things
you may want to consider if you have to do
| | 02:01 | a lot of validation widgets, after you
have done modifying things, you may want
| | 02:05 | to consolidate them into a single file
and then just update that link. That is
| | 02:08 | something that you can do to sort of
save yourself from having all of these
| | 02:12 | external assets floating
about all over the place.
| | 02:15 | Okay, well, we are going to start with
the text validation CSS file. So I find
| | 02:19 | the related file, SpryValidationTextfield.css,
I'm going to click on that and
| | 02:24 | go into either Code view or as we are
doing here Split Screen view. Now notice
| | 02:29 | that we have some class files that
are dynamically assigned and these class
| | 02:33 | files, basically are assigned based
on the current validation state, whether
| | 02:37 | it's valid or invalid, whether it
meets the minimum or maximum characters.
| | 02:42 | So every single widget is going to
have slightly different styling.
| | 02:44 | But if you scroll down, one of the
things that we are going to see that's
| | 02:48 | consistent in all of our widgets is
we are going to have a large block of
| | 02:51 | styles that deal with the required
states, minimum and maximum value states.
| | 02:55 | Now they are all going to show you one
consistent property, Display inline.
| | 02:59 | Now that's going to come back and
haunt us in a big way here in just a moment
| | 03:02 | but let's go ahead and style these,
so they look a little better.
| | 03:06 | Now first off, that Display inline is causing
the messages to sometimes display beside the
| | 03:10 | form element, and in some cases, it
looks okay, in some cases it doesn't and
| | 03:14 | rather be consistent. So I'm just
going to change that to Block so that
| | 03:17 | they will show up on their own line.
| | 03:19 | I am going to leave the color the way
it is, CC3333. But we are going to add a
| | 03:24 | few more items to this. So the first
thing I'm going to do is go down after
| | 03:29 | color and I'm going to choose
background and I'm going to do #fff, so there
| | 03:34 | will be a white background for our
error messages and then I'm going to type in
| | 03:38 | URL and open up the parenthesis and
I'm going to do ../. It's relative to the
| | 03:44 | CSS file here, images/sm_skull.gif, so
a small skull.gif. We are going to do a
| | 03:54 | no-repeat on that and then left and
center. Don't forget your semicolon.
| | 04:02 | Next, we'll throw in a little bit of
padding and we'll do 10 pixels to the top,
| | 04:07 | 10 pixels to the right, 10 pixels in
the bottom and 40 pixels to the left.
| | 04:14 | We are going to give it a width of 200
pixels, so we are going to go ahead and
| | 04:18 | give them a fixed width for the error message.
| | 04:21 | Then for border, I'm going to change
the existing value that we have here.
| | 04:24 | I'm going to change that to border-right
and I'm going to have maybe 1 pixel and solid,
| | 04:29 | but I'm going to do #666, have
a little bit of a gray color there and
| | 04:33 | then I'm going to do border-bottom and
we'll do the same values, 1 pixel solid
| | 04:39 | and then #666 for that gray and then
finally we are going to do a top margin.
| | 04:44 | So margin-top of 10 pixels.
| | 04:48 | All right, I'm going to go ahead and
Save that and I'm going to Preview that.
| | 04:52 | And now when I click in my Email as I
begin to validate that, you will notice
| | 04:56 | that our validation message appears and
it's a little bit more in line with the
| | 05:00 | design of the rest of the site. So you
can style in any way you want. Remember,
| | 05:04 | it's just normal content so
you can go ahead and style them.
| | 05:07 | Now, our display block is going to
cause them some problems here in just a
| | 05:10 | moment, but first let's go ahead and
style everybody else before we come into that.
| | 05:13 | Now they're going to have
exactly the same styling. So I'm going to
| | 05:16 | highlight all these rules and copy
them and then I'm going to go into each of
| | 05:20 | the validation widgets' CSS. I'm going
to go to the password one next, scroll
| | 05:25 | down to find its large
blocks of styles and paste them.
| | 05:28 | Again you know you are in the right
place when you see that display inline.
| | 05:31 | I'll paste that and save it. Then I'm
going to go to SpryValidConfirm.css,
| | 05:38 | find its display inline properties and
paste that. And then finally, the Spry
| | 05:43 | Validation checkbox, find its
values and paste that as well.
| | 05:48 | Now I'm going to go ahead and save all
of those and Preview that in my browser
| | 05:53 | again. So now when I click on my Email,
I get that error message and
| | 06:00 | when I tab off of it, it goes away. I'm going
to enter my password, the error message shows up
| | 06:03 | but now I notice, it's not
going away. Hit Tab and that's valid and
| | 06:13 | again, I'm not getting a lot of feedback there.
So that's a problem we are having.
| | 06:16 | We're going to have to
deal with that in just a moment.
| | 06:17 | Then if I go down to the bottom, if I
submit the form, you can see that again
| | 06:23 | our terms conditions page comes up. So
that's nice. But we still have a larger problem.
| | 06:30 | Our password and confirmation password
widgets are not giving us
| | 06:35 | continuous feedback now. So notice
that as I type, it does fine but I would
| | 06:40 | never get the error message to go
away after it's correct. Same thing with
| | 06:44 | confirming the password.
| | 06:45 | You will notice that as soon as I get
it right, it doesn't let me know and that
| | 06:49 | type of feedback is actually not
helpful. So our error messages do look a
| | 06:53 | little better and they fit with the
rest of our site design, we do have this
| | 06:56 | functionality issue that's
going to cause us an issue here.
| | 06:58 | So tackling this problem and keeping
our error messages consistent with the
| | 07:02 | other widgets is proving to
be a little tricky. But by going into
| | 07:05 | more detail about how the widgets
actually work, we'll ultimately have more
| | 07:09 | control over how our
validation widgets look and feel.
| | Collapse this transcript |
| Understanding validation message functionality| 00:00 | For the most part, changing the
default styling of the validation message is
| | 00:04 | pretty straightforward. However, the
one property that most designers trip up
| | 00:08 | on is the Display property.
| | 00:10 | By default, all validation messages are
set to display inline, which causes the
| | 00:15 | messages to display on the same line
as the form element itself. Seeking to
| | 00:19 | either move them, or to ensure that
they will display on their own line,
| | 00:22 | designers will often change the display
setting to block as we have done in our
| | 00:26 | previous exercise.
| | 00:27 | In some cases, this will not cause a
problem at all; in others as we have
| | 00:31 | found, it can break or damage
functionality. In this movie, we'll first find
| | 00:36 | out why having an inline display is so
important for certain validations and
| | 00:39 | areas, which will then allows to
explore ways to change the display of the
| | 00:43 | message while still retaining
the functionality that we need.
| | 00:47 | The first thing we are going to do,
is we are going to take a look at the
| | 00:49 | structure of the widget itself. So I'm
going to scroll down, find our password
| | 00:53 | validation widget selected and switch
over to the source code. So here we are
| | 00:58 | within the source code, and we can
see that the validation widget itself is
| | 01:02 | simply a span tag, and it surrounds the
entire input form element label in all.
| | 01:09 | Notice that it is identified by an ID
sprypassword1, and then the individual
| | 01:14 | messages themselves come after the
input tag, and they are surrounded by span
| | 01:19 | tags as well.
| | 01:21 | Here we have the span and its class,
it's "passwordRequiredMsg">8 characters
| | 01:26 | please, and here we have another one
whose class is "passwordMinCharsMsg." So
| | 01:30 | we have a feeling that we know kind of
what these are, and again notice that
| | 01:33 | they are nested within that span tag.
| | 01:37 | So we have the widget identifying,
it's up to an ID tag, and then individual
| | 01:40 | messages that are being identified to
use of class attributes. So the way the
| | 01:44 | widget works is it dynamically applies
a class to the parent span tag of the
| | 01:51 | widget, which would be right there,
that indicates the current state of the
| | 01:54 | widget. Then by combining that with
these individual class attributes, it
| | 01:59 | passes styling through the CSS.
| | 02:01 | Let's examine the CSS rules and that I
think will become a little clear. So I'm
| | 02:05 | going to go my SpryValidationPassword.
css and you can kind of see what I'm
| | 02:10 | talking about. So, here where we've
changed the display property to block, the
| | 02:15 | first value that you see here is the
dynamically applied class, that's going to
| | 02:19 | be applied to that parent span tag.
| | 02:21 | Then this is the class of the actual
message itself. So based upon the current
| | 02:27 | state of the widget, you are going to
get different styling based on that. But
| | 02:30 | in this case, they are all kind of
grouped together and if we take a close look
| | 02:34 | at this, we can get some idea as to
what states are available to us. Here for
| | 02:38 | this password widget, we have
RequiredState and MinimumCharacterState and
| | 02:42 | InvalidStringState. This is just a few of them.
| | 02:44 | So as the Spry functions evaluate the
form element, the JavaScript is going to
| | 02:48 | determine which state or states are
currently active, and then assign us class
| | 02:51 | attributes to the widget parent tag.
That in turn is going to trigger the
| | 02:54 | changes, styling based on this rules.
| | 02:56 | Now, in some cases, you are going to
want the message to change as the user
| | 03:00 | interacts with the form element, in the
case where password is certainly true.
| | 03:03 | Based on how the widget is structured
unless display property is set to inline,
| | 03:07 | your users will not receive updates
and will only see the initial display of
| | 03:12 | any message. So the first state that
is applied you will get to see it, but
| | 03:16 | then after that the block property will
keep it from changing it and displaying the others.
| | 03:21 | So because of this, it's really
important that any message that you want to
| | 03:24 | update based on user changes has the
display property set to inline. Once you
| | 03:29 | are on with that knowledge, several
opportunities for controlling, styling, and
| | 03:32 | functionality appear to you. Number one,
you could break these group selectors
| | 03:36 | up. So they were all individual
selectors and change the styling based on that,
| | 03:41 | instead of grouping them together, the
way they are here within the default.
| | 03:43 | The other thing that we could do is we
could change the structure of the widget
| | 03:46 | itself. I mean nobody says they have
to be inside of a span tag, what about
| | 03:50 | putting inside of a Div tag or
something like that. And in the case of our own
| | 03:53 | password widget, we are going to do
both. So now that we have all this
| | 03:57 | information, we are going to
go ahead and tackle that next.
| | Collapse this transcript |
| Controlling validation message functionality| 00:00 | It's worth taking just a moment here
to pause and talk about what works and
| | 00:03 | what doesn't work with our
validation widgets currently. So our email
| | 00:07 | validation widget, well, it's working
just fine. As I type in my email address,
| | 00:12 | I get that validation message and
when I hit Tab, it does just fine.
| | 00:15 | However, when I tab into the Password
widget, I would like to give the user
| | 00:18 | instructions on our site's password
requirements, monitoring the strength of
| | 00:22 | the password, and then have the
message disappear, and currently that's not
| | 00:26 | happening. As a matter of fact the
only thing that happens is the message
| | 00:29 | appears and then when it meets the
confirmation, it just doesn't give me anything.
| | 00:33 | The same thing I would like to have
with the Confirm Password, as I begin
| | 00:36 | typing in that, as soon as the values
match, I would like it to update and let
| | 00:41 | me know that, but it's not right now.
So that's not happening due to the fact
| | 00:45 | that the display property for both of
these guys is set to Block. So resetting
| | 00:50 | that to Inline is going to cause our
messages to display on the same line as
| | 00:53 | the form elements and
that's going to ruin our styling.
| | 00:55 | So it seems like we have a choice here
between functionality and styling, but
| | 00:58 | not really. We are going to fix this
by resetting the display property to
| | 01:02 | Inline, and then modifying the actual
widget structure itself to ensure the
| | 01:06 | things are displaying on its own line,
the way that we want them to.
| | 01:09 | So I'm going to get back in the Dreamweaver.
Now the first thing I'm going to do is
| | 01:13 | go in and modify the actual
structure of this widget source code.
| | 01:16 | So I'm going to click on the Spry
Password widget, and I'm going to switch to
| | 01:20 | my Source Code and I think I'm just
going to go straight to Code View to get
| | 01:24 | myself a little bit of extra room here.
And around 66, 67, 65 in there, we have
| | 01:31 | our Validation widget. We have
changed things up a little bit here.
| | 01:34 | So I'm going to make sure that this widget
structure is exactly what I need. So we've
| | 01:38 | got line 65, going all the way down to
the closing paragraph tag in line 68. So,
| | 01:44 | this is what we are going to update here.
| | 01:45 | Now the first thing I'm going to do
is I'm going to take the parent tag for
| | 01:49 | the widget, which is currently a Span tag,
and I'm going to change that to a Div tag.
| | 01:52 | So I'm going to change Span tag
to a Div tag and I've got to go and find
| | 01:57 | the last closing tag here right before
the end of the paragraph tag, and change
| | 02:01 | it to closing Div tag.
| | 02:03 | Now putting a Div tag inside of a
paragraph is not a really good idea. So the
| | 02:07 | Div tag is now going to surround the
Paragraph tag. There is no rule against that.
| | 02:11 | We just need our Spry widget
parent tag to make sure that the widget
| | 02:15 | itself is inside of it, and in this case,
it certainly is. If you did like I did,
| | 02:20 | and left off a little piece of that,
you can be sure to put that back
| | 02:23 | together. So when you are dragging code
around like that, you want to be really
| | 02:26 | careful. It's very easy to make a
mistake and not realizing what you are doing.
| | 02:30 | Now the next thing I want to do is
I'm going to take the required message;
| | 02:33 | this 8 characters please message. I'm
not currently seeing that and remember
| | 02:37 | we want that to appear by default. I'm
going to grab this, the opening and the
| | 02:41 | closing Span tag. I'm going to move
this up a little bit and I'm going to move this
| | 02:46 | just above the opening Paragraph tag.
| | 02:49 | So just inside the parent tag there,
place it just above the Paragraph tag. And
| | 02:55 | I'm going to change it to Div tag as
well. Now, a Div tag is a block level
| | 02:58 | element and despite having it set to
display inline by placing it above the
| | 03:02 | Paragraph tag, this is still going to
display on separate lines because the
| | 03:06 | Paragraph tag is going
to appear on its own line.
| | 03:09 | Now I'm going to do something very
similar for our PasswordMinChars is not met,
| | 03:14 | the Span tag here. I'm going to grab it
and I'm going to move it outside of
| | 03:19 | the paragraph. So the proper structure
here, I'm going to go through this kind
| | 03:24 | of slowly, to make sure we've got this right.
| | 03:27 | Our widget parent tag is now a Div tag
that surrounds our entire password input
| | 03:33 | text field. We then have our required
message to change to a Div tag, and it
| | 03:38 | sits above the Paragraph tag, and then
our minimum characters message is left
| | 03:43 | in the Span tag, but it is below the
paragraph as well. So we are separating
| | 03:48 | the actual structure of this.
| | 03:49 | Now we are going to do something very
similar to the Confirmation widget. So
| | 03:53 | again, I'm going to change the Span tag,
as the parent tag there on line 73.
| | 03:57 | I'm going to change that to a Div tag.
I'll move it outside of the opening
| | 04:01 | Paragraph tag. I'll find its closing
Span tag here on line 76, change that to
| | 04:07 | closing Div tag, and once again, move
it outside the paragraph, so that we have
| | 04:10 | proper nesting.
| | 04:12 | The next thing I want to do, is
I want to go ahead and take the
| | 04:14 | ConfirmRequiredMsg. I'm going to
change that to a Div tag. We are going to
| | 04:18 | change the closing tag as well. I'm
just going to say a value is required. I'm
| | 04:22 | going to take the ConfirmInvalidMsg,
change it to a Div tag as well, and don't
| | 04:28 | forget to change the closing tag there as well.
| | 04:31 | Now, that should also be outside of the
Paragraph tag. So I'm going to grab the
| | 04:34 | closing paragraph tag, and move that
to the very beginning of the Div tag
| | 04:38 | there. So a good thing to do here guys
would be go ahead and pause the movie.
| | 04:41 | Review the code structure here and
make sure that your code structure is
| | 04:44 | matching my code structure. But I'm
going to go ahead and save the file.
| | 04:48 | I'm going to go ahead and preview that,
and let's see how that impacted our functionality.
| | 04:55 | Notice that the password, as I begin to
type in, it says Not Yet and now it updates.
[00:05.01.00]
Very nice. The confirmation
password is giving me similar
| | 05:05 | functionality. The problem here
however is that the styling doesn't match
| | 05:10 | exactly what I would like, so what I'm
going to do is close that and I'll go
| | 05:15 | into my SpryVaidationPassword.css and
I'm going to define a large block of code
| | 05:21 | here. I'm going to change that display
back to inline , and then at the very
| | 05:25 | bottom of that, I'm going to go ahead
and set my font-family to Georgia, Times
| | 05:30 | New Roman, Times, serif .
| | 05:32 | I am going to set my font size to 0.
85 em and then I'm going to change the
| | 05:39 | margin-left to 1.6 em. Now, I'm going
to do that on both of these guys, so I'm
| | 05:47 | going to go ahead and copy those
three lines of code, go into the
| | 05:51 | SpryValidationConfirm.css and do the
same thing, change display to inline, and
| | 06:01 | add those new rules.
| | 06:03 | So let's do a Save All, preview that
in my browser again. I'll see if this
| | 06:09 | looks a little better. I'll click into
the Password and begin typing and that
| | 06:13 | matches the rest of our styling,
excellent. It is updating properly, as is my
| | 06:18 | confirmation password.
| | 06:19 | So the only thing that's still not
working is if I refresh the page, when I tab
| | 06:23 | or click into the Password text field,
I still would really like to get the
| | 06:26 | message here, that my 8 characters are
required. So we are going to customize
| | 06:30 | our SpryValidationPassword.css and
take advantage of something that we'll
| | 06:34 | notice if we go a little bit further down.
| | 06:37 | Notice that one of the states that's
applied to our parent Div tag now is
| | 06:41 | password-focused state. It's always
been there. We just haven't been doing a
| | 06:44 | lot with it. So you should really
examine these CSS files closely to see if
| | 06:48 | there is anything in there that you
can use to do something that you would
| | 06:51 | really like to do, but
isn't in there by default.
| | 06:54 | So I'm going to add a new rule to
this. I'm going to go down at the very
| | 06:57 | bottom, and I'm going to type in .
passwordFocusState. passwordRequiredMsg. So
| | 07:10 | now, I'm using the class that's
applied to the Div tag that's around the
| | 07:14 | message I want it to display.
Rather than having to type in a lot of
| | 07:17 | properties, I'm just going to scroll
up and copy what's up here, because it's
| | 07:21 | pretty much exactly the same
| | 07:23 | I will scroll back down and paste this.
The only thing that I need to change is
| | 07:28 | I'm going to change display from Inline
to Block. Now it's just to ensure that
| | 07:34 | it's its own block level element. So
I'm going to go ahead and save that,
| | 07:38 | preview that in my browser, and now
when I click inside the password, I get the
| | 07:43 | 8 characters please message and as I
begin to type, it lets me know that I'm
| | 07:47 | not yet there and that message
because it is applied to the focus state is
| | 07:51 | going to persist until focus is removed
from that. So they are always going to
| | 07:55 | get that particular type of feedback, sweet!
| | 07:58 | Now, our messages are styled, displayed
and they function the way we want them
| | 08:02 | to. Making sure that your form
validates properly is something that is rather
| | 08:06 | easy to do with Spry that can
occasionally require a good bit of extra work in
| | 08:10 | digging to get your widgets exactly
the way you would like them to be.
| | 08:13 | To be honest, I'd love to see their
structure to be a little bit more flexible
| | 08:17 | and open to things like absolute
positioning, or have the ability to associate
| | 08:21 | any structural element with the form
element to validate much the way you can
| | 08:24 | with a Label tag. It would make
formatting and positioning our validation
| | 08:27 | messages much easier, but as it exists,
we can take advantage of the widget's
| | 08:31 | code structure flexibility to exert a
strong amount of control over the widget itself.
| | Collapse this transcript |
|
|
5. Working with Spry DataWhat is a Spry dataset?| 00:00 | One of the most powerful features that
Spry offers is the ability to create and
| | 00:04 | store data in JavaScript objects
and control how that data is presented
| | 00:07 | throughout your site. Much like
working with a database on a server, a Spry
| | 00:12 | dataset allows you to dynamically
retrieve and display data on your pages.
| | 00:16 | Unlike most server-side database
applications however, Spry datasets allow you
| | 00:21 | to pull data from any number of sources.
You can almost say that Spry is data
| | 00:25 | agnostic. To occur to Spry dataset you
could use XHTML, XML, JSON objects or
| | 00:32 | even an Excel
spreadsheets to populate the dataset.
| | 00:35 | Now here is how it works. First using
the Spry Data JavaScript Libraries, you
| | 00:40 | create a new Spry dataset by choosing
a source file to pull the data from and
| | 00:45 | describe how that data
should be filtered and sorted.
| | 00:48 | Spry will then store that information
in a JavaScript Object that is formatted
| | 00:53 | much like a table with rows and columns
of data by default this data is cached,
| | 00:58 | but you can set Spry to refresh that
data from the source at predetermined
| | 01:02 | intervals or based on user interactions.
| | 01:05 | To display the data on a page, we'll
use what we call Spry Regions. Spry
| | 01:09 | Regions allow you to process and
display data in almost any XHTML tag you want.
| | 01:15 | Spry Regions can be used to display
repeating data, apply conditional logic,
| | 01:19 | filter which data is placed and
determine how the data respond to user
| | 01:23 | interaction or changes. Think of Spry
Regions as where the processing logic of
| | 01:29 | using your data is done.
| | 01:30 | Now finally, inside of these Spry
Regions you will use a data placeholder to
| | 01:35 | describe which information from the
dataset should display in each region. Spry
| | 01:40 | datasets can be used to populate widgets,
build tables, create interactive data
| | 01:44 | displays, retrieve and display
data from another site or simply pull
| | 01:48 | information from one area of
your site and display it in another.
| | 01:52 | As with most Spry capabilities
Dreamweaver does a great job of automating most
| | 01:56 | of this process for you. When building
Spry datasets in Dreamweaver, you have
| | 02:00 | the option of using a wizard-like
interface that allows you to preview your
| | 02:03 | data, control how it's filter and
sorted and ultimately control how the data is
| | 02:08 | presented on the page.
| | 02:10 | As you would, except each type of
dataset has slightly different options and
| | 02:13 | capabilities based on its source data
type. As we go through this chapter on
| | 02:18 | working with Spry data, we'll use the
two most popular dataset types, XML and
| | 02:22 | HTML and work with one of the not so well
known types, a comma delimited file dataset.
| | 02:29 | Although not integrated into the
Dreamweaver interface, building datasets from
| | 02:32 | a comma delimited file opens up a
world of possibilities for the average web
| | 02:36 | designer. We'll start it by building a
simple table from the external XML file
| | 02:41 | by using an XML dataset.
| | Collapse this transcript |
| Creating Spry datasets with Dreamweaver| 00:00 | Before we get too far into discussing
the specific types of datasets available
| | 00:04 | to us through Spry, it's worth our
time to discuss the benefits of creating
| | 00:07 | those datasets in Dreamweaver. When
using Dreamweaver you can build datasets
| | 00:11 | two ways, you can hand code them or
you can use Dreamweaver's built-in Spry
| | 00:15 | Dataset Constructor Wizard to create them.
| | 00:18 | Dreamweaver's Dataset Wizard is
limited to XML and HTML datasets, but since
| | 00:23 | those are the types you will be
using most frequently, the wizard is a
| | 00:26 | compelling option for creating
those datasets. Dreamweaver's Dataset
| | 00:30 | Constructor guides you through the
process of building datasets visually.
| | 00:35 | Using it, you can choose the Data Source,
preview the data, choose how the data
| | 00:39 | is filtered and sorted, and then
choose exactly how the data should be
| | 00:42 | formatted and placed on the page.
With a full set of interactive layouts to
| | 00:46 | choose from, now that's pretty cool.
| | 00:47 | The Dataset Constructor Wizard
features three screens. The first screen lets
| | 00:52 | you specify the Data Source, choose
the type of dataset you need, preview the
| | 00:56 | data and filter which data is brought in.
| | 00:59 | Next you will choose Options for the
data such as, how the data should be
| | 01:02 | sorted whether the data is cached or
refreshed and how the information should
| | 01:06 | be data typed if that is required. Now
finally, you choose how the data should
| | 01:11 | be inserted on the page. You can
choose from preset layout such as tables,
| | 01:15 | master detail regions and stacked containers.
| | 01:18 | Once you choose a layout, you can
also go in and customize how your data is
| | 01:21 | presented in that chosen format. You
can choose not insert the data at all if
| | 01:25 | you would like and that's very useful,
if you want to manually control when and
| | 01:28 | where the data is placed on the page later.
| | 01:31 | Regardless of whether you are creating
and XML or HTML dataset, you will find
| | 01:35 | the power, flexibility and ease of
use of Dreamweaver's Spry Dataset
| | 01:39 | Constructor to be a huge time saver and
a powerful way of integrating Spry data
| | 01:43 | in your pages, especially
if you are new to using Spry.
| | Collapse this transcript |
| Creating an XML dataset| 00:00 | The first dataset that we'll use is one
of the most powerful and most commonly
| | 00:04 | used types, the XML dataset. To build
and work with an XML dataset, Spry uses
| | 00:09 | two library files xpath.js and the SpryData.js.
| | 00:14 | xpath is used to navigate through the
XML file and retrieve the data while the
| | 00:19 | SpryData.js file contains all the
functions used in conjunction with building
| | 00:24 | and manipulating Spry data. As with
most Spry, if you build the datasets in
| | 00:28 | Dreamweaver, it will include these
files for you in your SpryAssets folder.
| | 00:32 | When building an XML dataset any
valid XML file can be used. Due to the
| | 00:37 | widespread use of XML in the majority
of today's web applications this opens a
| | 00:42 | lot of doors.
| | 00:43 | If you are new to working with XML
files one thing that you will need to keep
| | 00:46 | in mind is that if the XML file is on
another domain, you will need a learn a
| | 00:50 | little bit more browser security in
order to use it. Other than that, all you
| | 00:54 | need to know is where the XML file is
located and you can get started. And
| | 00:58 | before we get started we are going to
go ahead and set our default Spry assets directory.
| | 01:02 | So I'm going to go over to my Files
panel, find the title of my site, double
| | 01:07 | click that. It's going to open up our
Site Definition dialog box. We are going
| | 01:11 | to get down to the Spry category and
browse for the Chapter_05, 05_01 folder
| | 01:19 | and we are going to find the
SpryAssets folder, open that up. And either hit
| | 01:22 | Select or Choose and then click OK.
| | 01:25 | So now we have set that to the proper
directory and all those files will all be
| | 01:29 | copied there by Dreamweaver
automatically for us. Before we create our dataset,
| | 01:33 | let's take another sneak little peek
here at our XML file. So our top tag is a
| | 01:39 | contributor tag and inside that we
have repeating photographer tags. The
| | 01:43 | photographer tag has the name of the
photographer's attribute, the country they
| | 01:47 | live in, the city they live in, and
then the camera that they use. So that's
| | 01:51 | the information we can pull
and use to display on our page.
| | 01:55 | So I'm going to open up the
contributors.htm and I'm going to browse down to
| | 01:59 | the very bottom of the page and there
is an empty paragraph down there. And
| | 02:02 | this is where we'll insert a table
built from that XML data. Go to my Insert
| | 02:07 | toolbar and go to my Spry objects and
the very first object there is the Create
| | 02:12 | Spry Data Set. I'm going
to go ahead and click that.
| | 02:14 | Now this brings up our Spry Data Set
constructor wizard and the first thing it
| | 02:18 | wants to know is what type of dataset
are we going to create. Now we are going
| | 02:21 | to do an XML dataset and we are
going to go name this dsContributors. You
| | 02:24 | definitely want to name your dataset
something that makes sense and references
| | 02:31 | the content inside of it, instead of
just ds1, ds2, ds3. Because we have
| | 02:35 | multiple datasets, it's really hard to
remember what's in one versus the other.
| | 02:38 | Next thing we are going to do is we
are going to browse to find that file. So
| | 02:41 | I'm going to hit Browse and I want to
go into the 05_01, _xml folder and I'm
| | 02:48 | going to find the contributors.xml file.
I'm going to click OK. Dreamweaver is
| | 02:53 | going to go out, parse the document and
then show this little schema right here
| | 02:57 | of our XML file. It wants to know
what I consider the root node of our data
| | 03:01 | source to be and in this case the
repeating node is photographer, so I'm going
| | 03:05 | to go ahead and choose that. When I do
that, down below that I can actually see
| | 03:09 | the data being previewed. You see the
country on one side, then the city, then
| | 03:13 | the camera and then the name. So we
are getting it all coming in, perfect.
| | 03:16 | So I'm going to hit Next and this
takes us to our Data Set Options. This is
| | 03:22 | where we can sort our information,
rename columns, data type information. I'm
| | 03:26 | going to go ahead and sort our
columns by name, I'm going to sort them in
| | 03:30 | Ascending order and that way the data
is sorted by the name of the contributor.
| | 03:35 | Now notice also I can filter out any
duplicate row. So if you had multiple rows
| | 03:39 | within this dataset, it would filter
those guys out. And if you want to disable
| | 03:43 | the data caching, you can do that here
and you can set an Autorefresh rate, if
| | 03:47 | you want to refresh that data every 5
seconds or 10 seconds or however long you
| | 03:51 | want to update that.
| | 03:52 | So I'm going to hit Next and that
takes us to our third screen, which is the
| | 03:56 | Insert Option. Now here is where we
choose how this information should be laid
| | 03:59 | out on to the page. Of course one of
our options is not to insert it at all and
| | 04:03 | if doesn't then the data is made
available to us in the Bindings panel and we
| | 04:07 | can use it by referencing that
data anytime we want to in our code.
| | 04:10 | So don't feel like you have to do one
of these. But since it's so convenient we
| | 04:13 | are going to go ahead and use this to
insert a table with that information on
| | 04:17 | the page. Now once you select one of
those items, you will hit Set Up and that
| | 04:21 | allows us to go into a dialog box and
choose options for that specific format.
| | 04:26 | In this case, I'm going to reorder some
of my items here. I'm going to reorder
| | 04:30 | it so that name is on top and that will
be the first column and then I'll want
| | 04:35 | city next, country next and then camera.
| | 04:39 | We also have some really neat stuff
down here as well. Notice that we can set
| | 04:42 | classes for Odd rows, Even rows. The
class currently selected in the Hover
| | 04:46 | class. Well, I'm going to choose an
Odd row class and I'm going to choose odd
| | 04:50 | so, obviously this is CSS
that I have already written.
| | 04:53 | Now here we have a nice little
Dreamweaver bug, you choose one of these guys
| | 04:56 | and no matter what you use you are
going to get the top level class whatever
| | 04:59 | that may be. So you just have to choose
it twice. You get in habit of doing it, trust me.
| | 05:04 | We also have one other nice little
thing here, Sort column when header is
| | 05:08 | clicked. I really like that. That means
that when somebody clicks on the header
| | 05:12 | it will sort the data in the table by
that. So again this is something that we
| | 05:15 | can do through the use of Spry data.
I'm going to go ahead and click OK and
| | 05:20 | finally I'm going to click Done.
| | 05:22 | There is our table. Now you don't see
anything right now because we are not
| | 05:24 | previewing the actual data. What
you are seeing is you are seeing these
| | 05:27 | placeholders, name, city, country and
camera. I like the format of this table
| | 05:31 | to look a little nicer. And I have
already got some CSS in my site written to
| | 05:35 | do just that. So I'm going to click
anywhere inside the table and I'm going to
| | 05:39 | click on the table tag in the tag
selector. And using the Properties Inspector
| | 05:43 | on the far left hand side, I'll grab
the pulldown menu and assign the id of
| | 05:47 | gearTbl to that. I'll go ahead and
format that using styles that we already
| | 05:50 | have defined in the site.
| | 05:52 | So we'll now save our file and when we
do that, notice that it's going to copy
| | 05:55 | over the SpryData file, any xpath file,
both of which are needed for our XML
| | 05:59 | dataset. And then we can preview that
in the browser. Cool, there is our list
| | 06:05 | of contributors coming in from the XML
file. There is our styling there is the
| | 06:08 | Odd row class giving us that
alternating row and the Hover is actually being
| | 06:11 | done through the CSS but we could have
certainly that through the Spry data as well.
| | 06:15 | Notice that each one of these columns
is sortable by clicking on it. We can
| | 06:19 | sort it by that particular attribute
which is very nice. And we got that
| | 06:23 | through choosing the Sort option when
we inserted the table on the page. Just
| | 06:27 | to show you that this information is
being brought in dynamically, I'm going to
| | 06:30 | leave this Preview window open. I'm
going to go back in Dreamweaver and I'm
| | 06:34 | going to go into the contributors.xml.
Just kind of copy one of these notes,
| | 06:40 | paste it and I'm going to
change some values here.
| | 06:43 | So I'm going to change Max Smith to
Megan Anderson and I'm going to change city
| | 06:49 | from Baltimore to Ventura, which is
where she lives. And by quirk of fate she
| | 06:54 | has the exact same camera, so we'll
leave that. So I'll do a save there. Go
| | 06:59 | back into my browser and I'm going to
refresh that data, and look there is Megan.
| | 07:03 | So it is live and coming in and that's
it, it really is that easy. The Data Set
| | 07:09 | construction wizard in Dreamweaver
incorporates the building, sorting and
| | 07:12 | formatting Spry data all in one easy
step-by-step process. Next step we'll
| | 07:18 | explore creating another powerful
Spry data type the HTML dataset.
| | Collapse this transcript |
| Understanding HTML datasets| 00:00 | To me one of the coolest, most inventive,
and powerful features of Spry is its
| | 00:04 | ability to create HTML datasets. There
are going to be plenty of times when you
| | 00:08 | want to share data across pages without
having to create a database or generate XML.
| | 00:14 | HTML datasets allow users to use
standard HTML tables and any other valid
| | 00:19 | structured markup as a data source.
This is a great feature for anyone who
| | 00:23 | needs to re-purpose data from one page
into other places in their site or for
| | 00:27 | someone who may be new to web
development who wants to use dynamic data, but
| | 00:31 | might not be that familiar with XML
or working with databases. Although any
| | 00:35 | structured markup work, an HTML table
closely resembles the structure with
| | 00:40 | dataset and is a great place to
start when learning to use Spry data.
| | 00:44 | In this movie we'll use a table that
contains a lot of information about the
| | 00:47 | cameras I used, to create a smaller
summary of those cameras on another page.
| | 00:51 | We'll make the summary interactive
and allow the user to determine which
| | 00:55 | cameras information to display.
| | 00:57 | The best part about this technique
is that the summary will pull the
| | 00:59 | information from the larger table at
runtime, meaning if I changed the larger
| | 01:03 | table, my summary will update
automatically. And if I scroll down, I can see
| | 01:08 | the table that I'm talking about. So
here I'm on Camera Specs table and there
| | 01:12 | are lot of Specs here, Zoom Wide,
Zoom Tele, that will need that for the
| | 01:15 | summary, but it would be good to grab this data.
| | 01:17 | Now I want to point out something here
that the CSS is sort of hiding. So I'm
| | 01:21 | going to turn off my Style Rendering
and to do that -- when I go down and look
| | 01:26 | at this table again, you can see I
have a header here that says camera and I
| | 01:30 | have some text that says image
that's hidden by the CSS. It's on purpose
| | 01:34 | because when I create this dataset,
I'm going to need labels for those items,
| | 01:38 | camera and the image there. So that kind of
has to be there for what I'm going to be doing.
| | 01:42 | There is another thing I want to
point out and that is that this table does
| | 01:46 | have an id, gearTbl. So that is a
another really important factor in this that
| | 01:52 | if you want to pull information from a
specific element no matter what that is
| | 01:56 | whether it's a table or something else
that element has to have an id in order
| | 02:00 | for the Spry data to be able to grab it.
| | 02:02 | So now I'm going to switch over to
galleries.htm, you could find this on the
| | 02:06 | same directory. And we are going to
place our summary over here in the side
| | 02:10 | bar. Now before we do that this is
going to copy over some Spry assets for us.
| | 02:14 | So we'll need to go ahead and reset
our default SpryAssets directory. So I'm
| | 02:19 | going to go over to my Files panel,
find the name of my site and double click
| | 02:22 | that. That will open up my Site Define
dialog box. We'll go down to the Spry
| | 02:29 | category in the Advanced tab, just
going to browse out and I'm going to go in
| | 02:33 | the 05_02 folder, find the
SpryAssets and choose that.
| | 02:38 | So again it's just making sure that's
putting the SpryAssets in the proper
| | 02:41 | location. Well, I'm going to go ahead
and delete this line, summary data goes
| | 02:45 | here. I won't delete the entire
paragraph, just the line. And now I'm going to
| | 02:48 | build my datasets. So I'm going to go
up to my Spry Insert toolbar. I'm going
| | 02:52 | to click on the Insert Spry Data Set
and this time I'm going to leave it as
| | 02:56 | HTML. And I'm going to change
to the dataset name to dsGear.
| | 03:01 | Now notice that when you are doing an
HTML data type, one of things that it
| | 03:04 | wants to know is what type of element
do you want it to detect. It can look at
| | 03:08 | divs, lists, tables or any other
custom element. We are going to stick with
| | 03:13 | tables because that is exactly where
we calling the data from and then I'm
| | 03:17 | going to browse to find the data file.
Here we are going to go to Chapter_05,
| | 03:20 | 05_02 and I'm going to
find that gear.htm. Click OK.
| | 03:26 | Now I love this because it previews the
data by actually showing you a preview
| | 03:30 | of the page and then any element,
in this case a table, that meets our
| | 03:34 | requirements of having an id. It's
going to have this little yellow arrow out
| | 03:38 | by side of it and if I click, it sets
that as the data source. I could also
| | 03:42 | choose them from this pull down menu,
but in this case our page only has one
| | 03:45 | table with an id, so it's a pretty easy choice.
| | 03:48 | Now as soon as you select that, notice
that the Data Preview area down below
| | 03:51 | that is now populating with all that
data and it's bringing in everything. We
| | 03:57 | also have this Advanced data
selection where we can create rows and columns
| | 04:01 | based on specific selectors. Now we
are not going to filter out data this way
| | 04:04 | yet, but we'll be doing that later on.
So I'm going to click Next and that
| | 04:08 | takes me to our Data Options.
| | 04:10 | Now here I need to reformat this data
a little bit. I kind of don't like this
| | 04:16 | in terms of using this for a summary.
So I'm going to go down into our Other
| | 04:18 | Options and I'm going to click on the,
Use columns as rows. When I do that I
| | 04:23 | can see that I have a column for the
camera, the image for the camera, all the
| | 04:28 | resolution and that's going to be a
little bit better presentation for a
| | 04:32 | summary of our camera
data then what we had before.
| | 04:35 | Now I could sort these by the camera
name, but I use the Sony more than the
| | 04:38 | Fuji, so I'll leave the Sony on top. So
I'm going to go ahead and hit Next and
| | 04:42 | this time instead of inserting as a
table, I'm going to insert the data as a
| | 04:45 | master/detail layout. These are really
cool because you will have your detail
| | 04:50 | area and your master area. And the
detail area will display detailed
| | 04:53 | information about whatever is currently
selected from master area. So you get a
| | 04:57 | list on left hand side and as you
click those items the detail region will
| | 05:01 | update. So this is a pretty unique way
of displaying a lot of data in the small
| | 05:05 | area, just like we are doing.
| | 05:06 | So I'm going to hit Set Up and the
first thing it wants to know is what should
| | 05:10 | the Master Columns be. I'm going to
leave it as camera because that makes
| | 05:14 | logical sense. The next thing I'm
going to do is go down and filter out the
| | 05:17 | Detail Columns. I don't want all
this information so I'm going to start
| | 05:21 | deleting some of these guys. For example,
Low_Resolution, don't need it, going
| | 05:25 | to highlight and hit the minus symbol.
Sensor_Type, don't need it. ISO_Rating,
| | 05:30 | going to get rid of that. Zoom_Wide,
Zoom_Tele, Aperture_range, Storage_type,
| | 05:36 | Uncompressed_format, pretty much
everybody except for image, Max_Resolution
| | 05:41 | Effective_Pixels and Weight.
| | 05:43 | Notice also that I can reorder these if
I want, but right now I think they are
| | 05:47 | in pretty good shape. Now I'm going
to change one thing here though. Notice
| | 05:50 | that it's by default placing all of
these items inside DIV tags. I'm going to
| | 05:55 | change that and I'll place them
inside paragraphs. So you can change the
| | 05:59 | structure of this widget as it's
being created as well which is just pretty
| | 06:02 | cool. Click OK and then I'm just going
to go ahead and choose Done, there we go.
| | 06:08 | Now I'm going to Save this, notice
it's copying over all the dependent files
| | 06:13 | that it needs. And then I'm just going
to switch to Live View to preview this.
| | 06:17 | So here we have our summary information
coming in, there is a Sony camera. When
| | 06:22 | I click on the Fuji FinePix, I'm
getting its information. So here is the
| | 06:26 | master/detail region and it
isn't working. Well, okay.
| | 06:31 | So it doesn't look so great right now,
but what rather you focus on is that we
| | 06:34 | are pulling data from a table on
another page and using it to build an
| | 06:38 | interactive summary on this page. And
as we'll see next, the two are linked, if
| | 06:43 | we update our source table the
summary regions will update as well. And you
| | 06:46 | have got to admit that's pretty cool.
| | Collapse this transcript |
| Styling master/detail regions| 00:00 | So currently, we have built an HTML
dataset and then used that data to build a
| | 00:05 | master detail region on our galleries
page. Master detail regions are extremely useful.
| | 00:11 | They allow us to display a
large amount of data in a small area and
| | 00:14 | their interactive nature encourages
users to explore and consequently spend
| | 00:18 | more time with that information. As
with other Spry structures, the default
| | 00:22 | styling is fairly basic, making it
easy to customize to suit your own site's needs.
| | 00:27 | In this example, our master detail
region needs to be styled so that it can fit
| | 00:31 | into the extremely small area we have
chosen for it and so that it fits with
| | 00:35 | the rest of our site. So, here, I
have the galleries.htm page open from the
| | 00:40 | 05_03 folder. The first thing I want
to do is examine the structure of the
| | 00:45 | master detail region a little bit more
closely. So I'm going to go over here to
| | 00:49 | the sidebar and find our master detail
region, and if you want, you can just
| | 00:53 | sort of highlight a couple of items,
so that when you go into Code View,
| | 00:56 | it jumps right down there.
| | 00:57 | So let's see what we have got here, oh,
this is fairly simple. We have a div tag
| | 01:01 | that surrounds everything with
the class, MasterDetail. Then inside of that,
| | 01:06 | we have another div tag with the
class MasterContainer. So the MasterDetail
| | 01:12 | surrounds the MasterContainer
and the DetailContainer. So we have got
| | 01:16 | one parent tag surrounding two containers.
Now you will notice the addition of the
| | 01:19 | Spry region and that tells Spry which
dataset to pull the information from and
| | 01:23 | then these are our data references.
So that's telling us to pull the camera
| | 01:26 | from this particular region.
So very, very useful app.
| | 01:29 | So we just have a collection of div
tags, a couple of paragraph tags, and
| | 01:33 | that's really all that's going on here,
so there is not a lot to this.
| | 01:37 | The first thing I'm going to do is I'm
going to take this MasterColumn div tag,
| | 01:40 | I'm going to change it from a div to a
heading to. There is nothing that says
| | 01:44 | that there can't be other structural
elements. As a matter of fact, Spry really
| | 01:48 | doesn't care what elements there are
at all, and if I switch back to Design
| | 01:51 | View, there is something else
I need to take care of as well.
| | 01:54 | This is going to be easier for us to
accomplish with style rendering off. So,
| | 01:57 | I'm going to use my Style Rendering
toolbar and I'm going to turn Style
| | 02:00 | Rendering off and then now I can
see my master detail region even more
| | 02:05 | clearly. So what I want to do is I
want to label these items, maximum
| | 02:08 | resolution, effective pixels, and
weight. We are not really telling anybody
| | 02:11 | what those are right now.
| | 02:12 | So I'm going to click on the data
reference here for maximum resolution and
| | 02:15 | hit my Left Arrow key. It will place my
cursor blinking just in front of that,
| | 02:19 | and I'm going to type in the word,
Resolution. I'll do a colon and then what
| | 02:23 | I'm going to do is I'm going to hit
Shift and then Enter. That's going to give me
| | 02:26 | a line break and it's going to place
the maximum resolution on a line below that,
| | 02:29 | but still within the same paragraph.
I'll do the same thing for effective pixels.
| | 02:34 | So in front of that, I'm going to
type in Megapixels and once again
| | 02:37 | Shift+Return and then finally for
weight, I'm just going to type in the word
| | 02:42 | Weight, again Shift+Return. I'm going
to go ahead and save that. Then I'll
| | 02:47 | turn my Style Rendering back on again,
and why don't we go ahead and preview
| | 02:51 | that in the browser. So now it's
looking a little better. We can't read our
| | 02:56 | headings anymore because they don't
fit into that space, but at least these
| | 02:59 | guys are labeled - resolution, mega
pixels, and weight. That's a little better,
| | 03:02 | but we still have a little ways to go
here. So what we are going to do next is
| | 03:05 | modify our styles.
| | 03:07 | So in my related files folder, I'm
going to go find my SpryMasterDetail.css.
| | 03:12 | I'm going to click on that, and again,
I'm going to use the Split Screen View.
| | 03:16 | Now I'm going to minimize my panels
down to icons, so that I can see more of my
| | 03:20 | code or more of my Design View, based
on what I need. So I'm going to come over
| | 03:23 | to the CSS and scroll down just a
little bit and I can find the selector for
| | 03:27 | MasterDetail, MasterContainer, and
if you remember, this is the parent tag
| | 03:31 | that's sort of surrounding both the
MasterColumn and the DetailContainer as well.
| | 03:35 | You can see what's causing
some of our problems here with the 35%,
| | 03:39 | floating them all to the left. So
there is just no way for it to fit within
| | 03:42 | that small little space.
| | 03:43 | So I'm going to take all of those
properties and I'm going to get rid of them.
| | 03:46 | I'm going to replace it with a very
simple property. I'm just going to type in
| | 03:49 | color, #fff. So that will just make
sure that everything is white, so that it
| | 03:55 | reverses out very nicely against the
green background. So I'm going to go ahead
| | 03:58 | and save that, and that
will help us out a little bit.
| | 04:01 | Now I'm going to go down to the
MasterDetail and MasterColumn. If you can
| | 04:04 | remember, those are our headings
over there and we have a font size and a
| | 04:07 | background color, padding, and a cursor.
| | 04:09 | Now the cursor is changing to a
pointer, so that it knows that it's
| | 04:12 | interactive, so that's kind of nice,
but let's take a look at some of the
| | 04:15 | things we are going to do here. We
are going to take the background color
| | 04:17 | property and we are going to get rid
of that, so we don't really need to give
| | 04:19 | it its own background color, we'll
change its styling another way, but we are
| | 04:23 | going to give those headers,
a border underneath them.
| | 04:26 | So to sort of identify what their
content is, so I'm going to type in
| | 04:28 | border-bottom and there we are going to
do 1 pixel solid and then #fff to make
| | 04:37 | that white. Excellent, I'm going to go
ahead and save that, so that should be
| | 04:41 | good. And I'm going to go down and
find MasterDetail, MasterColumnHover.
| | 04:46 | So remember that is, again, the hover
attribute of these headings that we are
| | 04:49 | going to be taking a look at and we
are going to change the background color
| | 04:52 | from this EAEAEA to 848484, so just a
different shade a gray, to tell you the truth.
| | 04:59 | The same thing for the MasterDetail
MasterColumnSelected. We are going to
| | 05:04 | change its background color
too and it's going to go to #333.
| | 05:08 | So a fairly dark gray if you would.
| | 05:10 | So one more thing we need to change
here, MasterDetail, DetailContainer.
| | 05:14 | This is the div tag that
contains the actual data, the image,
| | 05:16 | the resolution, the megapixels, the weight.
You can see, again, it has a width
| | 05:20 | property, it has a float property. So
there are some issues there that are
| | 05:23 | affecting our layout as well.
| | 05:25 | So, what I'm going to do is I'm going
to get rid of all these properties as well,
| | 05:28 | and we are going to replace them
with background colors. So I'm going
| | 05:30 | to type in background-color and
that's going to be #768577 and then we are
| | 05:40 | going to give it a padding of 10 pixels
and that will help. Give it little bit
| | 05:44 | of padding away from the text and edges
of this. So, I'm going to go ahead and
| | 05:47 | save that and we'll preview this in
our browser, and you can see already
| | 05:53 | that's looking a little better.
| | 05:55 | We have got a nice little underline
underneath those guys. We have some hover
| | 05:58 | attributes that are already there.
There is that gray, and there is that black
| | 06:01 | that we had chosen, and you can see
that now this is all fitting within the
| | 06:05 | space. There is still some formatting
that needs to be done though, and for
| | 06:08 | this formatting we are going to go
in and affect our main pages CSS.
| | 06:12 | So let's go back into Dreamweaver and
now I'm going to switch CSS files. I'm
| | 06:17 | going to stick in Split Screen
View here, but I'm going to go to this
| | 06:19 | main_hasmenubar.css. So I'm gong to
make this a little easier on you guys. Go
| | 06:23 | ahead and scroll all the way down
towards the bottom, all the way to the bottom
| | 06:28 | of the code, and you will find at line
602, I have got a little comment, that
| | 06:32 | says master detail specific styles go
here. So just create a little blank area
| | 06:37 | for us to write these styles.
| | 06:39 | Okay, well let's try out our fist one.
I'm going to type in '.twoColFixSnSide'.
| | 06:41 | Now, that is Two Column Fix Small Side.
That is the layout that we are using
| | 06:53 | and I'm identifying those layouts by
using a class attribute on the body tag.
| | 06:57 | So, that's a very high-level selector.
Then I'm going to hit Space and I'm
| | 07:00 | going to type in #sidebar, that's
the div tag that this is all inside of,
| | 07:05 | #sidebar div.MasterContainer.
| | 07:10 | So, notice that I'm referencing the
Spry selector, here in my main styles,
| | 07:16 | there is really nothing saying I can't
do that. You can reference to CSS from
| | 07:19 | any CSS file you want. So this is going
to target the MasterContainer div tag,
| | 07:24 | and we are just using a really, really
specific selector, so that we make sure
| | 07:27 | that these rules are followed. So I'm
going to type in margin-bottom, and we'll
| | 07:32 | do, 1 em, that will give us a little
bit of spacing between them. And I'm going
| | 07:36 | to do padding-bottom of 0, and that's
just to overwrite some of the existing
| | 07:41 | padding that's on some of our interior div tags.
| | 07:44 | The next thing we are going to do is we
are going to do #sidebar. You'll notice
| | 07:47 | we are not having to be as specific now.
div#check. And that is the id of the
| | 07:54 | little sidebar module that we are
inside of, Space h2, so it's going to target
| | 07:58 | any Heading 2 inside of the check
div tag. Now we are going to change our
| | 08:03 | font-size to .8 ems. We are going to
set the margin to 0. That will override
| | 08:11 | any default Heading 2 margin. And we
are going to give it a margin-bottom, of 1
| | 08:17 | em. So again, that's going to just
space stuff underneath it out a little bit.
| | 08:21 | Next, we are going to do #sidebar div
#check p, so targeting any paragraph
| | 08:29 | inside of our check div tag. And that
one, again, we are just going to do a
| | 08:32 | margin-bottom, 1 em, and that will
again push elements away from each other.
| | 08:37 | Just give ourselves a little
bit of vertical spacing there.
| | 08:40 | And then next we are going to do,
#sidebar. And again, we are going to
| | 08:43 | reference some of those class selectors
from Spry. So .MasterDetail, notice the
| | 08:48 | capitalization there, that matters,
Space.DetailContainer. So, once again we
| | 08:53 | are targeting the DetailContainer
inside the MasterDetail, inside the sidebar.
| | 08:57 | So it's this little region,
right over here, that we are targeting.
| | 09:01 | And inside that, we are going to give
it another background-color, and this
| | 09:04 | background-color is going to be #768577,
it's that green color. And again we
| | 09:14 | are going to do a padding of 10 pixels.
| | 09:17 | One more to go and that is going to
be -- we are going to create a class
| | 09:20 | selector called checkTitle. We haven't
applied this yet. So creating the style
| | 09:24 | is only half of what we are going to do
here. We are going to do font-size and
| | 09:29 | we are going to set that to 1.2 ems. We
are going to do font-weight, and we are
| | 09:35 | going to bold those and then for color,
we are going to do #333. Whew! Man, a
| | 09:39 | lot of CSS there, guys.
| | 09:43 | The next thing we have to do and the
last thing we have to do actually is I'm
| | 09:47 | going to highlight each one of these
little areas right here, resolution,
| | 09:50 | megapixels, and weight. In
highlighting them I'm gong to use the properties
| | 09:53 | inspector to go ahead and apply the
class checkTitle, the one that we just
| | 09:57 | created to those guys. So do that to
resolution, do it to megapixels, and do it
| | 10:06 | to weight. Just be very careful and
make sure you are only highlighting that
| | 10:10 | and not the information underneath it.
So we'll do save, preview that in our
| | 10:15 | browser, and there we go, check it out.
| | 10:20 | So there is our MasterDetail region.
It looks great and we know it's being
| | 10:24 | populated from our earlier gear table.
Now, again, I want to prove that. You
| | 10:28 | can see that the Sony camera there is
listing its resolution as 4.9 Megapixel,
| | 10:33 | really? Seriously? Not 5? Well, all
right. So what I'm going to do is I'm going
| | 10:37 | to go back into my site, and I'm going
to open up the gear.htm, and this is the
| | 10:40 | file that it is pulling that from, and
I'm going into the table and change that
| | 10:45 | from 4.9 million to 5 million or 54
million, that would be really good. So I'm
| | 10:50 | going to save that. Now I don't have
to republish this, or do anything else
| | 10:53 | like that. I just have to save this.
| | 10:55 | Now when I go back in the galleries,
and I test that again you can see that in
| | 11:00 | my Summary it now says 5 million
Megapixels. So our MasterDetail region looks
| | 11:04 | great and by populating it with the
data from an HTML dataset we are using
| | 11:08 | information, we already had on the
site and even better, as we update our
| | 11:12 | existing table or add new cameras to it.
Our Summary will continue to update as
| | 11:16 | well with no action required by us at
all. So it's pretty low maintenance.
| | Collapse this transcript |
| Using non-table HTML elements for data| 00:00 | While the structure of an HTML table
is perfect for building data sets, you
| | 00:04 | will sometimes find yourself wanting
to build a data set out of information
| | 00:07 | found outside of a table. That is not
a problem as Spry enables us to build
| | 00:12 | HTML data sets out of any HTML element
type, even, as we'll see in this movie
| | 00:16 | from multiple element types.
| | 00:18 | The key to working with elements
other than tables is in having a clearly
| | 00:22 | defined structure to your data that
Spry can successfully parse. With some
| | 00:26 | elements like lists this is fairly
straightforward, as an unordered list or
| | 00:31 | ordered list are built
using repeating structures.
| | 00:34 | In other cases, creating the structure
of your data and assigning relationships
| | 00:38 | through Class and ID attributes is your
job. In this example we need to display
| | 00:43 | the three prints from the desolve.org
site that are on special for this month,
| | 00:47 | and list the title of the print, show
a thumbnail, list the price and display
| | 00:52 | the photographer's name.
| | 00:53 | We already have this information on
another page and here I have the prints.htm
| | 00:57 | page opened, you can see what I'm
talking about. Here we have the name of the
| | 01:01 | print, we have a thumbnail, we have a
description of it, we have the artist
| | 01:05 | name and we have the price of it. So
this is really all the information that we
| | 01:08 | need and we have a full listing of
prints. Of course, we don't need all these
| | 01:12 | prints, we only need three of them
and we only need the three that are on
| | 01:15 | special for this month.
| | 01:17 | So in order to figure out how we are
going to build this data set, it's worth
| | 01:21 | taking a look at the structure of our
prints here. So I'm going to highlight
| | 01:24 | all that, switch over to Code View, so
I can see what's going on here. So each
| | 01:29 | one of these is surrounded by a div tag.
It has the class of printStory. Then
| | 01:33 | we have a Heading 3 and it has a class
of head to let us know it's the heading for that.
| | 01:39 | Then we have an img tag and this img
tag is in a Span tag that is floating the
| | 01:44 | images to the left, so the text can
wrap around it but notice that we have a
| | 01:47 | class called floatLeft and we
can take advantage of that as well.
| | 01:50 | Our description is in a paragraph, we
don't need that, so we'll just kind of
| | 01:55 | ignore that. Although notice that the
author right here is in another paragraph
| | 01:59 | and it has a class of author that helps
us with the styling but in the case of
| | 02:03 | our data sets, it's going to
help us build the data set too.
| | 02:06 | And finally we have our price, which
is in another paragraph, and again it's
| | 02:09 | using a class to identify and style that.
| | 02:12 | Now every single one of these prints
has exactly the same structure repeating
| | 02:17 | over and over again. So these are
perfect candidates for building a data set.
| | 02:21 | Now we only want part of the data. So
what I'm going to do now is go into some
| | 02:25 | of these prints and I'm going to go
to the div tag and if you are following
| | 02:30 | along with me, this is in the 05_04
folder, this is the prints.htm file.
| | 02:35 | I am going to go in the Code View and
certain prints I'm just going to choose
| | 02:38 | them at random, I'm going to go to the
very top, the <div class= "printStory">
| | 02:42 | and I'm going to add the class of
special to it. You will notice that it is not
| | 02:47 | coming up because I don't have a
defined CSS rule around it, but that's okay.
| | 02:50 | I will go down and find another div
tag with a class of printStory and I'm
| | 02:55 | going to add the class of special to
that. Now if you have never done multiple
| | 02:58 | class attributes on one item, there
is no comma, it's just a space between
| | 03:02 | them. And finally I'll go down and
find another one and we'll give that one a
| | 03:08 | class of special as well.
| | 03:10 | So now that our data is properly
formatted we have identified just the ones we
| | 03:14 | want with the class of special we can
go ahead and bring those guys in. So what
| | 03:19 | I'm going to do is switch back to
Design View and I'm going to switch to the
| | 03:22 | speicals.htm file.
| | 03:25 | Okay so now I'm going to go and scroll
down and I can see on this page that we
| | 03:28 | have a little section here where our
spotlight prints are going to go and below
| | 03:31 | that we have a place where they are
showing the featured product of the month
| | 03:34 | but we are really interested
in a spotlight prints area.
| | 03:37 | So I'm going to place my cursor just
after this month's spotlight prints,
| | 03:40 | create a little empty paragraph down
there for it and I'm going to go up to the
| | 03:43 | Spry tab on my Insert toolbar, click
the Spry Data Sets and we are going to be
| | 03:47 | building an HTML data set here.
| | 03:49 | Now the data set that we are going to
be using is dsSpotlight because we are
| | 03:53 | spotlighting certain prints and last
time you will notice we said that we were
| | 03:57 | going to detect tables, this time
we are going to detect div tags.
| | 04:00 | I am going to go and specify the data
file, so I'm going to browse and I want
| | 04:04 | to browse to the 05_04 prints.htm page,
now remember we just updated that page
| | 04:10 | and wow, all of a sudden we get
all these markers all over the place.
| | 04:13 | Well any div tag with an id you are
going to be able to use. Now frankly
| | 04:18 | getting this right by clicking the
arrows can be sometimes a little difficult,
| | 04:21 | so I'm going to go over to this pull-
down menu for Data Containers and instead
| | 04:24 | of trying to pick a specific div tag
of one print, we want all the prints, so
| | 04:28 | I'm just going to use their
parent div tag mainContent.
| | 04:32 | Now when I do that, in there you see
a jumbled mess down here in the Data
| | 04:35 | Preview because everything inside of
the mainContent div tag is sort of flowing
| | 04:39 | into this one single column layout.
Well we need to filter this data because we
| | 04:43 | are looking for some very specific things.
| | 04:45 | So that's where these advanced data
selectors come in. These are very nice. I'm
| | 04:48 | going to go ahead and click this
little checkbox for Advanced data selection
| | 04:52 | and remember to create our rows, we
used that special class to do that. So I'm
| | 04:57 | going to type in .special and you
actually type in whatever selector you want
| | 05:02 | to filter this by and this is CSS based
selectors, classes, ids, tags, whatever
| | 05:05 | you would like.
| | 05:06 | When I do that and hit Tab, you don't
want to hit Enter but you want to hit
| | 05:09 | Tab, you will notice the data updates
and now I see only three elements and I'm
| | 05:14 | seeing the three prints that
I we identified as specials.
| | 05:16 | Well now we need to break them up into
columns and to do that, we are going to
| | 05:20 | use some of the additional selectors
and their class attributes to pass in just
| | 05:25 | the items that we want. So here we
are taking advantage of the existing
| | 05:28 | structure. So for a Column Selector,
I'm going to choose h3, span.floatLeft,
| | 05:38 | .author, .price.
| | 05:42 | You can think of it like writing a
really big group selector because that's
| | 05:45 | kind of what you are doing. I'm going
to hit Tab. It will update that and look
| | 05:48 | at this. Now we have a table of data.
So we are filtering out from this much
| | 05:52 | larger page, just the three prints that
were specified with a special class and
| | 05:57 | then we want the image, the author, the
price and the title and we are getting
| | 06:01 | all of that by passing these
individual selectors as well.
| | 06:05 | Now I want to pass one more little
piece of information about this. When you
| | 06:09 | pull an image and you want the actual
image tag, don't use the image tag as one
| | 06:13 | of the selectors. If you want the image,
it has to be surrounded by a parent
| | 06:17 | tag because what you are pulling in
is the contents of the tag, not the tag
| | 06:20 | itself. That is why we have the span
tag around the image and that's why we are
| | 06:24 | using the span tag to float it to the
left rather than just float the image
| | 06:27 | itself to the left. So I'm going to click Next.
| | 06:30 | Now we get to do some of our data set
options. Now when you create a custom
| | 06:33 | table like this, it doesn't really name
the columns anything that makes sense,
| | 06:37 | so we are going to go and change those.
I'm going to click in the first column,
| | 06:40 | all right, up here where it says Column
Name I'm going to name that title. I'm
| | 06:43 | going to click in the second column
and I'm going to go ahead and name the
| | 06:46 | image, I'll click in the third column
and I'm going to name that artist and I'm
| | 06:52 | going to click in the fourth column
and I'm going to go ahead and name that price.
| | 06:56 | Be very careful about hitting a Return
or Enter, it will close this out, you
| | 06:59 | really don't want that. Sometimes you
get in the habit of doing that when you
| | 07:02 | type something in. Remember the
Tab key is your friend with this.
| | 07:05 | So there we go, that's looking pretty
good. What we are going to do next, we
| | 07:08 | are not really going to sort this,
although I guess I could sort it by title
| | 07:11 | and let's do that. I'm going to click
on title and I'm going to sort it by the
| | 07:14 | title column. Here we go.
| | 07:16 | Now I'll hit Next and in terms of my
data options and how I want to insert
| | 07:21 | this, I'm going to insert it using
the stacked containers with a spotlight
| | 07:23 | area. That will allow our thumbnail to
be the spotlight area and all the other
| | 07:27 | information will show up on the right
hand side of it. So that's pretty cool.
| | 07:29 | Now of course we want to do a set up
on that and remember at the spotlight
| | 07:33 | columns, I don't want the title, I want
the image. So I'm going to click plus,
| | 07:36 | choose Image and then I'm going to get
rid of the title. So I just want image
| | 07:39 | there for my Spotlight Column.
| | 07:41 | If I go down to my Stacked Columns,
I'm going to go ahead and add my title to
| | 07:45 | that and you can reorganize these guys
as well. I'm going to take image and get
| | 07:48 | rid of that and now I just have title,
artist and price and if I needed to I
| | 07:54 | could use these arrows to move those up
and down. Now I'm going to take title,
| | 07:57 | I'm going to format that as a
Heading 3. So the title will be an h3 tag,
| | 08:01 | whereas my artist and my price
are going to be in Paragraph tags.
| | 08:05 | All right, looking good. So I'm going
to go and click OK, I'm going to click
| | 08:09 | Done and I'm going to just save the
file. Now you will notice that the
| | 08:13 | SprySpotlightColumn.css is being added
to my Spry Assets and if I preview this
| | 08:18 | in my browser, you can see that all
three of these guys are coming in. So there
| | 08:23 | is some default styling that I don't
like here at the border end but that's
| | 08:26 | pretty easy to remove.
Everything else is looking pretty good.
| | 08:29 | Now you will notice that it is
bringing in just those three prints, the ones
| | 08:33 | that we identified as specials. So if
we were to go back into prints and change
| | 08:37 | that so that maybe this one was no
longer special this month, so I'm just going
| | 08:43 | to bring up the Quick Tag Editor and
get rid of special, so this is Orange Walk
| | 08:48 | and I'll change the two towers and
actually you know what I really like this
| | 08:53 | image of Charlotte, it's a Bullish of
Charlotte, so we'll do this one, we'll
| | 08:56 | grab it's div tag and I'll
identify that one as special.
| | 09:03 | So every month you can just some in
here and change those class selectors. You
| | 09:06 | can save that, preview that in a
browser and now you can see it's bringing in
| | 09:11 | that print instead. Awesome!
| | 09:14 | Now if we wanted to we could certainly
go into our SpotlightColumn.css and find
| | 09:19 | that border that has given us such
trouble, there it is right there. So maybe
| | 09:23 | we just don't want that border and
remember you can modify those anyway that
| | 09:27 | you want. I would really recommend that
you go and you kind of play around with
| | 09:30 | those and find out what you don't
need and what you don't like and you can
| | 09:34 | comment certain things out and delete
other things and just save that, strip
| | 09:39 | out those borders, preview it again and
now we don't have any border around it
| | 09:43 | and we don't have any borders around
those items. So that's looking more of the
| | 09:46 | way that we wanted it to look. Perfect.
| | 09:49 | So our repeating div structure with a
little help from some class attributes
| | 09:53 | allowed us to build a Spry data set
that is now powering our monthly specials
| | 09:56 | print list. While it's extremely easy
to filter data this way, keep in mind
| | 10:00 | that consistent structure is crucially
important to making this work and that
| | 10:04 | class attribute is going to help you
filter out which elements are brought into
| | 10:07 | the data set and which are not.
| | 10:09 | Remember as well that if you want to
add an image as part of your data set, it
| | 10:13 | needs to be inside a parent element to
work correctly. It's also a good idea to
| | 10:17 | name your columns as you build the
filtered set referencing that data could be
| | 10:20 | tricky if your columns are named
column1 column2, column0 and so forth. Other
| | 10:25 | than that building HTML data sets are
an easy way to reuse data across sites
| | 10:30 | and speed development time.
| | Collapse this transcript |
| Using Excel spreadsheets to build datasets| 00:00 | Spry is full of surprises, especially
if you really get in and dig around the
| | 00:04 | documentation. Although not
integrated into Dreamweaver, Spry has a
| | 00:08 | capabilities to build datasets out of
many objects and file types such as JSON
| | 00:12 | objects, CSV and TSV files.
| | 00:16 | Being able to build datasets from
comma and tab delimited files means that
| | 00:20 | anyone in your organization with access
to Excel or any type of spreadsheet or
| | 00:24 | word processing application can build
and modify datasets for your website.
| | 00:29 | That, my friends, can save you a lot of time.
| | 00:32 | As usual the same warnings apply. If
someone who has JavaScript disabled
| | 00:36 | browses your site, they won't be able
to see your data. Because of this you
| | 00:40 | should be careful about using Spry to
display critical data or at least give
| | 00:43 | the user alternate access to it. For
us to build the Spry CSV dataset, we'll
| | 00:48 | have to leave the cozy confines of
Dreamweaver Spry toolbar and so a little bit
| | 00:52 | of hand coding. Don't be nervous,
it's actually very simple. It gives you a
| | 00:56 | front-row seat to what Dreamweaver has
been doing in the background as you have
| | 01:00 | been creating your Spry datasets.
| | 01:01 | Regardless of the dataset type, the
code used to construct them is extremely
| | 01:05 | similar. So learning the hand code one
type makes it a lot easier when you want
| | 01:10 | to learn how to do other types.
We'll also have to do one more thing that
| | 01:13 | Dreamweaver has been taking care of for
us. We need to include the related Spry
| | 01:16 | library files that it needs
to build our Spry dataset.
| | 01:20 | Here is where carefully researching the
online Spry documentation pays off and
| | 01:25 | what we want to do is we want to create
a dynamic table of when the artist will be
| | 01:30 | in a certain city. Now we actually
happen to have that in a comma delimited file.
| | 01:34 | Very convenient, huh?
| | 01:36 | So, I'm going to open that up in Excel.
Feel free to open that up in any
| | 01:39 | spreadsheet application you have and
notice that I have got City, Date and
| | 01:45 | Artist columns and it explain the Dates,
the Artist and the City. Notice that
| | 01:50 | City, Date and Artist are all
capitalized and that's going to come into play a
| | 01:53 | little bit later on. So I'm going
ahead and close that and don't save any
| | 01:57 | changes if it prompts you.
| | 01:58 | We are also going to need to have our
Spry Assets. So I'm going to go into the
| | 02:04 | Spry Release that we have downloaded
and unpacked earlier in the title.
| | 02:09 | If you haven't done that yet, I would
recommend going back and checking out
| | 02:12 | downloading the Spry Framework from
Adobe and unpacking it. So you have access
| | 02:16 | to these files and I'm going to look
in the Includes folders and find the
| | 02:20 | SpryCSVDataSet file. We'll go ahead and
select that, hold my Ctrl key down and
| | 02:26 | I'm going to move that up and copy it
to the 05_05 SpryAssets folder. It should
| | 02:32 | copy right in there now.
| | 02:33 | We are also going to need the SpryData
file to do this as well but it's already
| | 02:37 | in there. If it wasn't, we would have
to copy that one as well. Okay, well
| | 02:41 | everything we do from this point
forward, it can be done in Code view. So I'm
| | 02:44 | going to back to tour.htm, switch
over to Code view and go up and let's go
| | 02:48 | ahead and code this.
| | 02:49 | Now I'm big believer in copying and
pasting and you can see we have a script
| | 02:53 | tag that's linking us here to the
SpryMenuBar.js. I'm going to ahead and
| | 02:57 | highlight that, copy it and
I'm just going to paste it twice.
| | 03:02 | Now, at first I'm going to bring in my
SpryData.js and the order that you bring
| | 03:07 | these in is actually very important.
The CSV dataset calls on functions from
| | 03:11 | the Spry dataset, so I'm going to make
sure that's brought in first and then
| | 03:15 | below that, I'm going to change
SpryMenuBar to SpryCSVDataSet.js. It's going to
| | 03:24 | go and grab both the data file and the
SpryCSVDataSet file and bring those in.
| | 03:28 | So that's good.
| | 03:29 | Now we have access to those JavaScript
libraries and let's scroll down to the
| | 03:34 | very bottom of the code and I can see
I have another script tag down here,
| | 03:37 | where I have a constructor function
building our menu bar. They are kind of
| | 03:41 | like putting all my constructor
functions in the same place, so just below the
| | 03:45 | line where we are building our menu bar,
we are going to have to do a little
| | 03:47 | bit of JavaScript work here, not much
and if you have never done it before, you
| | 03:51 | will be surprised to how easy this is.
| | 03:52 | I am going to type in var. That's the
var keyword that allows us to create
| | 03:56 | brand new object types and I'm just
going to go ahead and type in dsDates = new
| | 04:05 | and here is where code hinting is going
to help us out again. I'm going to type
| | 04:07 | in Spry and a dot and right up comes
code hinting and .Data.CSVDataSet.
| | 04:15 | So it certainly recognizes it because
code hinting allows us to access it.
| | 04:18 | So that's nice. And inside that I'm going
to just tell it where to go find that,
| | 04:22 | so I'm going to in parenthesis,
tell it in quotation marks to go
| | 04:25 | "_xml/dates.csv" so it
point directly to the CSV file.
| | 04:35 | Now go ahead and close your quotation
mark, your parenthesis and then type in
| | 04:38 | semicolon, so that it stops
evaluating that line because that line of
| | 04:42 | JavaScript is done. We are going to
save the file and now we have constructed a
| | 04:46 | brand new data set. We have told it
where to find the data and we have told it
| | 04:50 | which libraries are needed to process
this Spry data and the Spry CSV dataset
| | 04:54 | files. So all there is left to do is code
our tables so that it can display this data.
| | 05:00 | Now if you remember from your
discussions earlier, if you wanted to display
| | 05:02 | Spry data on the page, you need to
have a Spry Region. So we need to surround
| | 05:07 | these entire tables with the Spry Region.
| | 05:09 | So I'm going to highlight all of these
Table tags, click on the Tag Editor over
| | 05:13 | here so that it can wrap this tag with
a Div tag and I'm going to give it an ID.
| | 05:18 | And I'm just going to give an id
of datesRegion, although I could have
| | 05:22 | named this anything that I wanted to.
That really doesn't have any thing to do with Spry.
| | 05:25 | However, the next thing does. So
the next thing, I'm going to type in
| | 05:28 | Spry:region and the Spry Region wants
to know which dataset I'm going to be
| | 05:34 | pulling from and I'm going to pull
from the dsDates dataset. So if you have
| | 05:38 | multiple datasets there, we would want
to tell that which one we were going to
| | 05:41 | pull from. If you are wondering, yes
you can pull from multiple datasets in one
| | 05:44 | region, there is nothing wrong with that.
| | 05:46 | So we have now identified this table
that's being inside of the Spry region and
| | 05:51 | now we need to deal with the repeating
nature of this. So every time there is a
| | 05:55 | new item inside my dataset,
I want a new table row.
| | 05:59 | So I'm going to go into the second tr
tag. Again I'm going to do Spry but this
| | 06:03 | time I'm going to do a repeat region
and this repeat region is again going to
| | 06:07 | be pointing to dsDates. So we have two
Spry regions going on; we have a Spry
| | 06:11 | region that allows us to display data
anywhere inside the table, but inside
| | 06:15 | this table row, it's a repeat region.
So every time it finds a new item inside
| | 06:19 | the dataset, it is just going to
create a brand new table row for us.
| | 06:22 | Now we need to replace these non-
breaking spaces with what we call data
| | 06:25 | references. So here I'm going to type
in a curly brace and capital C and I'm
| | 06:29 | going to type in City. Then I'm going
to in curly braces, type in D for Date.
| | 06:37 | And then in curly braces, I'm going
to type in capital A and then Artist.
| | 06:41 | So what's going on here? Well the
curly braces indicate that this is a data
| | 06:45 | reference and it's basically telling
Spry, "Hey, look in the dataset and find
| | 06:49 | this column of data," remember in the
CSV file, the Artist, Date and City were
| | 06:54 | capitalized so that's case-
sensitive and we are returning that here.
| | 06:57 | Normally you can look in the Bindings
Panel and you can see what all these are
| | 07:00 | named but since this is a CSV dataset,
Dreamweaver doesn't do that for us. So
| | 07:04 | I'm going to go ahead and save that
and then we have one last little thing to
| | 07:08 | take care of. This is a minor
housekeeping detail, I would love it to make it
| | 07:11 | to where you can click on City, Date
and Artist and sort the table. Well that's
| | 07:15 | very simple to do too.
| | 07:16 | So I'm going to go up to my headers and
inside of the th tag, I'm going to do a
| | 07:20 | Spry:sort and I'll sort the first one
by City and then for the second one, I'll
| | 07:25 | do another Spry:sort. I'll sort down by
Date and then finally we'll do another
| | 07:31 | Spry:sort and we'll sort that by Artist.
| | 07:34 | So that way if somebody clicks on that
header, they will go ahead and sort by
| | 07:38 | that information. So I'm going to go
and save all of that, preview that in my
| | 07:42 | browser and hey, look. There is our
data coming in from our .csv file and
| | 07:48 | notice it is sortable. I can sort if by
Artist, Date or City. How cool is that?
| | 07:56 | As you can see, once you know the
structure and syntax of Spry,
| | 08:00 | it's surprisingly easy to hand code.
Having our CSV file supplying the data is pretty cool,
| | 08:05 | since anyone with a spreadsheet
or word processing application can now
| | 08:08 | update and upload the new data
for us without needing our input and
| | 08:12 | how much time is that going
to save you? Really, really cool.
| | Collapse this transcript |
| Hiding unloaded data references| 00:00 | I have always said that it's the
little thing to count and that is certainly
| | 00:03 | true in regards to this movie. When
you are using Spry data on a page,
| | 00:08 | occasionally there might be a brief
pause between the page loading and the time
| | 00:11 | that it takes the data to load. During
that pause, the data references in your
| | 00:15 | code and that's the text surrounded by
this curly braces that tells Spry which
| | 00:19 | data to use, well those are
going go be visible to the user.
| | 00:22 | This pause is usually very, very brief,
sometimes so quick that you wouldn't
| | 00:26 | notice it at all and in some cases
you might feel like the amount of data
| | 00:29 | loading is so small to worry about
dealing with this and then in other cases,
| | 00:33 | you might want to make
sure that this doesn't happen.
| | 00:35 | It's really a personal choice. My own
opinion is that anything that you can do
| | 00:39 | to make the user experience better and
more seamless, well you should do that.
| | 00:43 | There are actually several techniques
that you can use to hide unloaded data
| | 00:46 | references from users and if you are
interested in learning more about it, you
| | 00:50 | can read up on these techniques on
Abode Spry documentation sample pages.
| | 00:55 | The technique we'll use is the one
that I consider to be the easiest and the
| | 00:58 | most non-technical. To use it, you
just have to know how to apply a class
| | 01:02 | attribute and write some simple CSS.
So I have the tour.htm file opened and I
| | 01:07 | want to point out a little bit of
scripting change here. If I go up to the head
| | 01:12 | of the document, we see that there is
some new JavaScript code just has been
| | 01:15 | added to this. So I'm registering a
new observer, so when the page finishes
| | 01:19 | loading, it's going to fire of this
alert, which is 'click OK to load the table.'
| | 01:24 | Well once the user clicks OK, it's then
going to go out and create the new Spry
| | 01:28 | dataset. So that will create a pause
between when the page loads versus when
| | 01:33 | the data loads and that's going to
allows us to see what the user would see if
| | 01:37 | the data was loading slowly. So I'm
going to go and preview that in my browser
| | 01:42 | and right here you are seeing those
data references. So if there is any type of
| | 01:46 | pause between the page loading and
the data loading, that's want the n user
| | 01:49 | sees once the data loads, those go
away and they see the actual data. Now
| | 01:54 | usually that happens so quickly that
you can barely register it but on slower
| | 01:58 | connections or if there is a really a
lot of data that's being filtered, that
| | 02:02 | might actually take a little bit longer.
| | 02:03 | So how do we hide that. Well, as I have
mentioned, there are several different
| | 02:06 | methods but there is one really super
easy method and that involves a class
| | 02:12 | called SpryHiddenRegion.
| | 02:14 | Now data is loading up dynamically.
What happens is as soon as Spry finishes
| | 02:19 | loading the data, it looks all the way
throughout your page for anything with
| | 02:22 | the class attribute SpryHiddenRegion.
If it finds that class attribute, it
| | 02:27 | removes it. So what we can do is we can
write a simple selector that uses that
| | 02:32 | class to hide elements, knowing that
class attribute will be stripped out once
| | 02:36 | the data loads and anything that wasn't
visible will suddenly be visible. It's
| | 02:40 | a really unique technique and you can
see right in my code here, I have an
| | 02:44 | embedded style called SpryHiddenRegion
and it has the visibility attribute set
| | 02:50 | to hidden. So this is an embedded style,
it's probably something you want to
| | 02:53 | put in your external style sheet,
but you just want to have that selector
| | 02:57 | available for any region that's
going to have data loaded into it.
| | 03:00 | So I'm going to scroll down into
my page and I'm going to find my
| | 03:04 | sprydsDatesRegion and that's where I
want to apply this class. So I'm going to
| | 03:10 | type in class and I'm going to type in
SpryHiddenRegion. It picks it up because
| | 03:15 | I have got it defined above that and
that's all you need to do. So you just
| | 03:19 | need to have the class attribute
assigned to a Spry Region and you just need
| | 03:23 | the CSS that's actually going to hide it.
So that is extremely simple; once the
| | 03:29 | data loads, Spry is going to go all
the way through the page and nay elements
| | 03:32 | it finds with that class, it's going
to strip that class out so that the
| | 03:35 | element will be visible. So I'm
going to go ahead and preview that in my
| | 03:39 | browser and now you can see no table
at all. So no hidden data reference, no
| | 03:43 | table, as soon as the data loads, table
shows up, the data appears on the page.
| | 03:48 | There might be a brief flicker where
the data loads but we won't see those
| | 03:51 | hidden data references.
| | 03:53 | That is really simple. As a matter of
fact, this technique is almost too easy.
| | 03:58 | I can't think of a reason not to use it.
It manages to hide all unloaded data
| | 04:02 | references by simply applying a
class and writing a style that keeps that
| | 04:06 | content hidden. It is usually the
small thing to separate the good sites from
| | 04:10 | the great sites and this is a very
small thing that can make a noticeable difference.
| | Collapse this transcript |
|
|
6. Hand-Coding SpryTaking Spry beyond Dreamweaver| 00:00 | Although Spry and Dreamweaver are
well integrated and designed to work
| | 00:03 | together, if you only stick with the
Spry capabilities that are built into
| | 00:07 | Dreamweaver, you are missing out on
a lot of powerful features that Spry
| | 00:10 | offers. Also, regardless of how
fast Dreamweaver's automatic insertion
| | 00:15 | processes are, once you have mastered
hand coding Spry you will be much faster
| | 00:18 | when building your
applications by simply dong them by hand.
| | 00:22 | Even if you are not a JavaScript wizard
or a strong Web developer, learning to
| | 00:25 | code Spry by hand will make you
more comfortable with what is being done
| | 00:29 | behind the scenes as
Dreamweaver helps you build your pages.
| | 00:32 | It also helps to reveal this simple
truth that Spry content is really just
| | 00:36 | collection of well-structured XHTML, CSS,
JavaScript and the occasional use of
| | 00:42 | XML or other types of data sources.
| | 00:45 | As long as you let Spry's JavaScript
libraries handle the functionality,
| | 00:48 | writing the corresponding XHTML
and CSS is really pretty simple.
| | 00:52 | In this chapter, we'll revisit a
widget I showed you how to build in an
| | 00:55 | earlier lynda.com title, Dreamweaver
CS3 Projects: Creating Custom Spry Widgets.
| | 01:01 | I'm returning to this widget because
it's a perfect example of how to take Spry further.
| | 01:06 | The Sliding Panels widget is not
included within the Dreamweaver's Spry tools
| | 01:10 | and can only be created by hand.
It's the perfect way to learn how to
| | 01:14 | structure, code and style custom Spry
content and we'll take this example one
| | 01:19 | step further than my previous project
by making the widget data driven,
| | 01:23 | making it even more powerful and simple to update.
| | 01:26 | I just want to preview this on my
browser to show you what we are going to be
| | 01:30 | building. So if I scroll down little bit,
we have what we call a Sliding Panels
| | 01:36 | widget here and we have four thumbnails
of items that are on special and if you
| | 01:40 | click on one of the thumbnails, it
animates to that item and you will notice
| | 01:45 | there is a nice little animation
happening and the content blurs as it animates,
| | 01:49 | so this is a really
cool little Sliding Panels widget.
| | 01:52 | Let's take a look. If I scroll down in
my code, I can find our widget, which
| | 01:58 | doesn't look so good in Dreamweaver's
default view and let's take a look at
| | 02:02 | exactly how much code that takes. So
here are our thumbs and there is our div
| | 02:08 | tag and that's it, 16 lines of code.
| | 02:12 | In addition to that, of course, we have
the links to our external assets and
| | 02:15 | we have a constructor function,
but really that's it. So, before we get
| | 02:21 | started we want to make sure that we
have the proper Spry Assets and again we
| | 02:25 | are going to do something that
usually Dreamweaver does for us.
| | 02:27 | I am going to go into my Spry
library, so I'm going to open up the Spry
| | 02:30 | Framework that I downloaded from Adobe,
again if you have not done that yet, go back
| | 02:35 | and watch the movie on downloading
the Spry Framework and installing that and
| | 02:39 | then you will be able to
grab these files along with us.
| | 02:41 | So I need a couple of files here. Now
the first thing I need to do is I'm going
| | 02:45 | to go into the includes folder in the
Spry Framework and I'm going to grab
| | 02:49 | these SpryData.js and I'm going to
grab xpath.js because our data is
| | 02:55 | going to be coming from an XML file, so
I need both of those. And I'm going to
| | 02:59 | copy those up into the 06_01
SpryAssets folder and I notice that SpryData is
| | 03:06 | already there, so I'm going to say No.
And I'm also going to go down and not in
| | 03:11 | the includes this time, but I'm going to
go into the widgets and notice that all of
| | 03:15 | our widgets are in here and there is a
Sliding Panels widget, so I'm going to
| | 03:18 | grab that and I need to grab
the SprySlidingPanels.js and the SprySlidingPanels.css.
| | 03:25 | If you are wondering what that HTML
file is, that is a sample file that you can
| | 03:28 | open up and take a look at how this
widget is constructed and I'm going to copy
| | 03:33 | that in the 06_01 SpryAssets folder as well.
| | 03:36 | So now, all of our Spry Assets are in
place and ready to use on our page. So,
| | 03:41 | while this application really isn't
that different than anything else we have
| | 03:44 | done up to this point, it's a little
different because we are going to build it
| | 03:47 | manually from the very beginning,=
all the way to the end of it. Since our
| | 03:51 | component will be data driven, the data
itself is a logical starting point and
| | 03:55 | is the next thing that we are going to built.
| | Collapse this transcript |
| Writing XML| 00:00 | Most of the XML files you will use
will probably come from another source.
| | 00:03 | It's quite easy in fact to have
server-side applications based on PHP,
| | 00:08 | ColdFusion or .Net create XML for you
based on an existing database, or return form data.
| | 00:14 | In fact, Adobe has several sample
scripts for generating server-side XML within
| | 00:18 | the Spry documentation. There are times,
however when you might need to do it
| | 00:21 | yourself. Much like XHTML and CSS,
Dreamweaver helps to make the process of
| | 00:26 | hand-coding XML faster by giving you
eeal-time code hinting based on your
| | 00:30 | current tag structure. As soon as you
add a tag, Dreamweaver remembers it and
| | 00:34 | adds it to the Auto-complete list and
if you have never written XML before,
| | 00:38 | relax. It's extremely easy for anyone
who has a solid working knowledge of HTML.
| | 00:43 | The syntax rules are almost identical
to HTML; you must have probably missed
| | 00:46 | your tags, all tags must close and all
attribute values must be in quotation
| | 00:50 | marks. So what we are going to do is we
are going to go in the 06_01 folder and
| | 00:55 | I'm going to open up this _xml folder
and there is actually a couple of things
| | 00:58 | we are going to do here. I'm going to
open up specials.xml. This is going to
| | 01:02 | describe all of the products that are
on special for us and I'm also going to
| | 01:05 | open up descriptions.txt. Just like any
good cooking show, we have a couple of
| | 01:11 | things that are already done to
save you a little bit of time.
| | 01:14 | So let's take a look at our specials.
xml file. So the root tag of this XML file
| | 01:19 | is products. Notice that it has a name
space declaration and this is pointing
| | 01:23 | to some place on our site where the
skimmer would be listed. So there is our
| | 01:27 | products and there is a closing
products tag, then inside that we are going to
| | 01:30 | have repeating structure of items.
| | 01:33 | Notice that the item has a name and an
index value. The index value is going to
| | 01:37 | help us keep count of our products.
We'll also have a description and a price
| | 01:42 | and a thumb. We are going to add a
couple of things to this but I want to make
| | 01:45 | a point here about a few things.
| | 01:47 | First of our description and our price
is surrounded by something that we call
| | 01:51 | a CDATA tag; you can see here's the
opening CDATA tag, here is the closing part
| | 01:55 | of the CDATA tag. Now what does that do for us?
| | 01:57 | Well the CDATA tag is going to take
any special characters inside of it, like
| | 02:01 | dollar symbols or percentages and it's
going to ignore them, it will not parse
| | 02:05 | the. So if you had actually written
an h1 tag in the middle of that, it
| | 02:10 | wouldn't try to parse that if it's an
h1 tag, it would just represent it as a
| | 02:13 | literal string. It's very helpful if
you ever have code examples that you need
| | 02:17 | to display and you want the XML
parser to ignore those. So CDATA tag is
| | 02:22 | something you must spent a
little bit of time doing.
| | 02:23 | For my own personal use, I have
created to snip it out of them so that I can
| | 02:27 | highlight any copy and then just go
ahead and surround it by CDATA tag. Now
| | 02:30 | there are a couple of things I want to
change here. First of, I'm going to take
| | 02:33 | this $50 and get rid of that because
well, that's part of the price. So inside
| | 02:37 | the description, highlight the $
50 at the end of it and delete it.
| | 02:40 | When you are working around the CDATA
tag, though make sure you don't ever
| | 02:43 | delete any of the opening tag or the
closing tag. It's really easy to find, you
| | 02:47 | have got this left bracket and right
brackets and those guys, you want to stay away from.
| | 02:51 | There is a couple of things we want to
add here too at the very bottom of our
| | 02:55 | item tag but still inside of it, right
after the thumb as a matter of fact. I'm
| | 02:59 | going to hit Return and I'm going to
open up a new tag. You will notice that
| | 03:02 | because of the previous tags, the
Dreamweaver's catalog it's like pull the odd
| | 03:05 | description out of price products or
thumb? Well, I don't want any of those. We
| | 03:08 | are going to make up a brand-new tag.
| | 03:10 | It's a beautiful thing about XML. If
you don't have a tag to do something you
| | 03:13 | need it to do, you can make one. So we
are going to create a panel tag and then
| | 03:17 | inside the panel tag, our initial
value is going to be panel0; notice that,
| | 03:22 | that is all lowercase and there is no
spaces there, panel0 and now I'm going to
| | 03:25 | close the panel tag and notice that
Dreamweaver has closed that for me because
| | 03:29 | it's like okay, you want to close the
panel tag. What's this going to do for us?
| | 03:32 | Well, when we are calling out Sliding
Panels widget, that identifies which
| | 03:36 | panel is sliding, so we are keeping
count. index of 0 and a panel of 0, that's
| | 03:40 | going to help us with our function.
| | 03:41 | Next thing we are going to do is we are
going to place in an id and the id for
| | 03:46 | this particular item is going to be
hoody and all lowercase. So again, that's
| | 03:50 | going to be unique id that identifies
which element we are dealing with. We can
| | 03:54 | also use our name for that but we
wouldn't be able to be quite as descriptive here.
| | 03:59 | So I'm going to go and save this file
and I'm a big believer in copying and
| | 04:02 | pasting. We have four items, we need
four item tags. I can go ahead and copy
| | 04:07 | that and I can paste that one, two,
three more times. So now we have four items
| | 04:15 | and all we have to do is
change the data in each one.
| | 04:17 | So I'm going to go down to the second
item tag. You can identify those by that
| | 04:23 | opening item tag right there and I'm
going to change the name from Desolve
| | 04:26 | Hoody, and I'm going to change that to
AsterRisk T-Shirt. Its index value of
| | 04:36 | course is going to be 1.
| | 04:37 | Now to save your little bit of typing,
I have given you this text file and I'm
| | 04:41 | going to copy the description, the
second description here, we are going to
| | 04:44 | highlight that paragraph and copy it
and then I'll replace the existing one
| | 04:48 | inside the CDATA tag with that one.
Again, be careful not to replace the
| | 04:52 | opening or closing CDATA tags.
| | 04:54 | Now I'll save that. Now the price for
AsterRisk T-Shirt is going to be $18 and
| | 05:01 | the thumbnail instead of the hoody_sm.
jpg is going to small_tshirtFront. You
| | 05:13 | would want to type this carefully,
so you might want to pause the ,movie
| | 05:16 | occasionally and just type the stuff
in because all of this stuff is very
| | 05:19 | important. If this link is not written
correctly, then we won't get to see our
| | 05:24 | thumbnail image, so it's very important.
| | 05:26 | The panel for this one is going to be
panel1 and the id for it is going to be
| | 05:31 | tshirt. So you see, we just have a
repeating structure and we just have to make
| | 05:36 | sure that we are being careful and
meticulous as we go through this.
| | 05:40 | The third item is title and so Desolve
Hoody is going to be Desolve Messenger
| | 05:48 | Bag. So Desolve Messenger Bag. Its
index value is going to be 2 and I'm going
| | 05:55 | to go copy its description and paste
that into its description tag as well.
| | 06:03 | Again, be very careful around that CDATA tag.
| | 06:06 | The price of our Messenger Bag is $75
and the thumbnail for that, I'm going to
| | 06:13 | go ahead and highlight this hoody_sm
right here as bag_sm. It is panel2 and its
| | 06:22 | id is going to be bag. So far,
so good, and one more item to go.
| | 06:27 | Our last item's name instead of Desolve
Hoody is going to be Long Sleeve T and
| | 06:35 | its index value is going to be 3. I'm
going to go over the text descriptions,
| | 06:41 | copy that one and then paste
it inside my CDATA tag. Perfect.
| | 06:48 | Now the price of our Long Sleeve T is
going to be $25 and the thumbnail for
| | 06:52 | that one instead of the hoody_sm is
going to be longt_sm. Panel for that one
| | 07:00 | would be panel3. Even though it's the
fourth panel, we started counting at 0
| | 07:04 | and the id will be longT as well. So
I want to make sure I didn't make a
| | 07:09 | mistake, so I'm going to go back up
and I'm going to see that we have an item
| | 07:13 | name index for each one of these guys.
| | 07:15 | I am really interested in the ones
that I have changed here, so AsterRisk
| | 07:19 | T-Shirt index of 1, here is my CDATA
tag. It's intact. I have got my price
| | 07:25 | inside it. CDATA tag, it's intact.
This is panel1, tshirtFront. Well, that's
| | 07:31 | looking good, there is my id. Desolve
Messenger Bag, its index value is 2, its
| | 07:35 | panel is 2. So the index and a panel
value should match. It's $75. It's all
| | 07:40 | looking good. The same
thing around Long Sleeve T.
| | 07:42 | So now we have an XML file that
describes our monthly specials. I'm going to go
| | 07:46 | ahead and save this. It contains all
the necessary information to describe our
| | 07:50 | products and display the thumbnails
even better, the XML structure makes it
| | 07:54 | easy to add new products
or to revise existing ones.
| | 07:57 | Now that we have our data, it's time
to return to our Specials page and build
| | 08:00 | the structure of our Sliding Panels widget.
| | Collapse this transcript |
| Coding widget structure| 00:00 | When Dreamweaver inserts Spry widgets
on to your pages, there are a lot of
| | 00:03 | things that happen behind the scenes.
Links and script tags are added to the
| | 00:07 | header of your document, constructor
functions are added to create new instance
| | 00:10 | of your widget. And all the XHTML
structure necessary for the widget to
| | 00:14 | function is automatically
added to the body of your code.
| | 00:18 | Because we are not saying that if
you are building your own widgets from scratch
| | 00:20 | all this is your responsibility.
That's why it's so important to
| | 00:24 | understand the necessary structure
of your widget prior to building it.
| | 00:27 | Adobe's online documentation is very
good about giving detailed information
| | 00:32 | about the tags, IDs, and classname
attributes that are required for each widget
| | 00:36 | to function properly. And it should be
the starting point for any Spry based project.
| | 00:41 | Since we are working on a Sliding
Panels widget, it would be worth our time to
| | 00:44 | discuss the necessary elements on
page prior to adding the code. Like most widgets,
| | 00:49 | the actual required structure
is pretty simple. You need an outer
| | 00:53 | container with the class attribute
Sliding panels, an inner container with the
| | 00:56 | class attribute Sliding panels
content group. And then finally as many
| | 01:01 | container tags as needed to
service the panels themselves.
| | 01:04 | All elements must also have ID
attributes. Although this can be of your choosing.
| | 01:09 | The majority of the time those container
elements will be Div tags, although you are
| | 01:13 | free to use whatever tags you would like.
| | 01:15 | Another important part of the Sliding
Panels widget are the links that are used
| | 01:18 | to animate the panels. These can be
any links at all. In our example we'll be
| | 01:22 | using our thumbnails as links. We'll
go ahead and add the structure for our
| | 01:26 | thumbnails, while we build the widget
structure as well. So we'll go ahead and
| | 01:30 | do both of structural elements. And
I'm just going to immediately switch over
| | 01:33 | to Code view because we are
going to be hand coding our widget.
| | 01:36 | Now I'm going to go ahead and scroll
down and starting on line 77, all the way
| | 01:44 | through line 85 I'm going to delete
those. And what is that? Well, in Design view,
| | 01:48 | these were our feature products.
So rather than doing a feature product
| | 01:51 | every month, they want to
display whatever items are on special.
| | 01:54 | So, I'm going to go to Code view and we
are just going to go ahead and move it
| | 01:58 | that out of there. So, right there in
that empty space that we have created,
| | 02:02 | we'll go ahead and add our widget
structure. Now, before we add the widget
| | 02:05 | structure, we are going to add the
structure for our thumbs. I'm going to go
| | 02:08 | ahead and create a div tag and I'm
going to ahead and give that an id of thumbs
| | 02:12 | and I'll close that div tag. And I'm
very contentious about opening a tag and
| | 02:19 | closing a tag. It prevents me from
forgetting the closing tag a little bit
| | 02:22 | later on, which is very easy to do.
| | 02:24 | Next, I'm going to add a span tag and
I'm going to give that an id of thumb
| | 02:31 | regions. So this should give you some
idea as to what we are going to do later
| | 02:33 | on with our Spry regions and then I'll
close the span tag. And then I'm going
| | 02:38 | to open up a link tag. Now this is
going to have href attribute and instead of
| | 02:44 | actually linking to a page it is
going to activate one of those panel.
| | 02:47 | So I'm just going to go ahead and
give this a JavaScript, no link and we'll
| | 02:50 | type in javascript:void and then pass
in 0 in the arguments. So, that's not
| | 02:56 | going anywhere. And we'll go ahead and
do a semicolon there. And that's very
| | 03:00 | useful guys if you ever need a link to
be a no link and you want to click and
| | 03:03 | activate something which you don't
actually wanted to go anywhere, reset it to
| | 03:07 | the top of the page, this is a handy
way of doing that, that's as a JavaScript
| | 03:10 | and no link.
| | 03:11 | So after that I'm going to type in space,
I'll do a little bit of a title here
| | 03:15 | and for title, I'm just going to type
in placeholder and that seems really
| | 03:18 | weird but anything that says
placeholder is eventually going to be filled with
| | 03:22 | dynamic data. After that we are going
to go ahead and close the link tag, and
| | 03:28 | then inside the link tag, I'm
going to open up an image tag, IMG.
| | 03:31 | Now, I don't know what my images are
going to be because this is going to be
| | 03:33 | coming in from dynamic data. So, I'm
going to have a lot of placeholders here.
| | 03:38 | I'm going to do source equals
placeholder and then space and then alt equals
| | 03:46 | placeholder. I'll tell you what. Code
writing is nice, but sometimes it gets a
| | 03:49 | headache, name is going to equal
placeholder. So a lot of attributes here in
| | 03:55 | this image tag and it's going to be
doing a lot of different things for us,
| | 03:58 | width is, like an equal placeholders,
it can be 125 pixels, a lot of thumbnails
| | 04:02 | are of the same size. So I'm going
to do 125, height is going to be 135.
| | 04:10 | Finally the id will also be placeholder
because that is going to be dynamic as
| | 04:16 | well. Now this image tag is a self-
closing tag. So, I'm going to do a space, a
| | 04:19 | forward slash and close that out and
we'll save that. Now, only one? Well,
| | 04:25 | remember we are going to dynamically
build this widget. So, we'll have as many
| | 04:27 | thumbnails as we have inside the XML
file. So, instead of using four different
| | 04:32 | link tags, we are just go ahead
and let Spry populate that for us.
| | 04:35 | Okay, so now we need to do our actual
widget structure. The good news is that
| | 04:39 | really the widget structure is
extremely simple. So, I'm going to go down below
| | 04:43 | my thumb region or on my thumbs div tag,
and I'm going to open up another div
| | 04:46 | tag and this is going to serve as my
parent. So, I'm going to give this an id
| | 04:50 | of panelContainer. Now I want to
mention something here, this is not required
| | 04:55 | by the Spry widget. I'm doing this
simply because I want to be able to style
| | 05:00 | this for the little bit more control.
So I'm wrapping my entire widget in a div
| | 05:04 | tag, that's going to give
me a little extra styling up.
| | 05:06 | Now after that I'm going to type in
another div tag. So, inside that I'm going
| | 05:09 | to nest another div tag. And this one
is going to be the id of detailSlide1.
| | 05:14 | Now, that could be anything, I wanted
to be but that seems to make sense. And
| | 05:21 | then the class is going to be
SlidingPanels, now that cannot be anything I
| | 05:27 | wanted it to be. But I wanted to just
use the default widget structure that if
| | 05:30 | the class that I have to give to me
Sliding Panels. I'll go ahead and close
| | 05:34 | that div tag out.
| | 05:37 | Inside of that I'm going to open up
yet another div tag. So, widgets are
| | 05:41 | getting lots of div tags. And this one
is going to have the class attribute of
| | 05:45 | SlidingPanelsContentGroup. Pay attention
to the capitalization because it does matter.
| | 05:54 | So what this div tag does
for us is all of the individual panels
| | 05:57 | themselves, it helps to group them
together. So this identifies the panel
| | 06:01 | widget itself. This identifies the
grouping of panels inside a widget.
| | 06:05 | Now we are going to go down to the next
line and we are going to do another div
| | 06:09 | tag and this one is going to have an id.
And I'm going to go ahead and set the
| | 06:13 | initial id to panel0. We'll make that
dynamic a little bit later on but for
| | 06:17 | right now we are going to test the
function, this is going to be panel0. Then
| | 06:21 | its class attribute is going to be
SlidingPanelsContent. We are going to go
| | 06:27 | ahead and close that out, close that div tag.
| | 06:31 | Now just a word about this
for a moment. So inside your
| | 06:33 | SlidingPanelsContentGroup, you are
going to have the individual panels
| | 06:37 | themselves, and this is the first one.
So, for every panel I would want, I'll
| | 06:40 | add another div tag. I'll change the
id from 0 to 1 to 2 to 3. And I would
| | 06:46 | still keep it with the same class,
SlidingPanelsContent. Again you could
| | 06:50 | manually build this up, we are going to
dynamically populate this, so each one
| | 06:54 | of theses would be in our Spry Repeat region.
| | 06:56 | So, inside that I'm just going to add a
little bit more structure. I'm going to
| | 07:00 | do an h2 tag, and that's going to
give me the Product Name, which is just
| | 07:04 | placeholder data that we'll replace
later ,and then finally- I'm very glad to
| | 07:08 | hear that- let's do a paragraph
and inside that I'm going to type in
| | 07:11 | Description. Again that's just
placeholder data and then type in a span tag and
| | 07:17 | the span tag go ahead and give it a
class of price. Notice that we already have
| | 07:21 | a style for that. I'm going to type in
the text, price, and then close the span
| | 07:25 | tag, and close paragraph tag. So,
that's going to allow us to have a
| | 07:28 | description and a price in the same
paragraph and of course all that will be
| | 07:32 | replaced with dynamic data.
| | 07:34 | So I'm going to go ahead and save my
file. I know it's not much to look at, but
| | 07:38 | all the proper structure is in place
and it's ready for content now. Keep in mind
| | 07:42 | that since our panels will
be going to dynamically generated and
| | 07:44 | populated, we only needed one
thumbnail and one panel. Now with that external
| | 07:48 | data in mind our next step is going to
be to make the data available to us on
| | 07:52 | the page by creating a Spry data set.
| | Collapse this transcript |
| Constructing Spry datasets through code| 00:00 | Our Sliding Panel structure is in place,
but we aren't able to populate it with
| | 00:04 | data yet since we don't have a defined
dataset. We'll take care of that now by
| | 00:08 | linking to the necessary Spry Assets
with the construction of an XML dataset
| | 00:13 | and then using a constructor function
to create the data self itself. This will
| | 00:17 | require us to write a little JavaScript,
but as we'll see it is fairly simple to do.
| | 00:21 | Now the first thing I'm going to do is
I'm going to put my head in the 06_03
| | 00:24 | Spry Assets folder and I'm going to
make sure we have got everything that we
| | 00:27 | need. We need the SpryData.js, check.
We got that and we also need the
| | 00:33 | xpath.js, check. We have got that,
okay. So, if I didn't have those I would
| | 00:37 | need to go to the Spry Framework get
them and copy them in here, so you always
| | 00:40 | want to double check to make sure you
have got the necessary Spry Assets before
| | 00:44 | you link to them or add them to the page.
| | 00:45 | So I'm just going to go over my Code
view, scroll up to the very top of my code
| | 00:53 | and here again I can see some
existing script tags and link tags that are
| | 00:56 | already bringing in some of those
assets. So I'm going to go right below my
| | 01:00 | script tags. I like grouping those
together so that my script tags and my link
| | 01:03 | tags are all grouped there together.
So I'm going to type in script and I'm
| | 01:08 | going to do src and if you want
you can go ahead and browse for this.
| | 01:12 | I am going to browse for this and
I'm going to go in the Chapter 6, 06_03
| | 01:18 | folder, SpryAssets and what we are
looking for is the xpath.js. So you can see
| | 01:25 | it just goes in and resolves that
for us. Let's just go ahead and do type
| | 01:31 | text/javascript, close that and then
close the script tag. Here we go, save
| | 01:38 | that and I notice the little error
message I had up there is now missing. All
| | 01:41 | right, fantastic.
| | 01:42 | Well just below that we can see a
constructor function that's building the HTML
| | 01:46 | dataset and that is populating our
prints that we did actually earlier in the
| | 01:51 | title, so then it's still there.
Well there is nothing wrong with having
| | 01:54 | multiple datasets in a file. So right
after the constructor function for this
| | 01:58 | one, I'm going to go on another line
and I'm going to type in var and then a
| | 02:02 | space, and you want to do dsProducts.
So notice it is a unique name. ds is the
| | 02:08 | identifier as data source. It's just a
nice name you can mention to use. = new
| | 02:11 | and I'm going to do spry.data.
And this time XML dataset.
| | 02:20 | Inside I'm going to open up some
parenthesis. Inside that with quotation marks,
| | 02:23 | I'm going to type in _xml/specials.
xml. Notice that it was giving me the
| | 02:32 | opportunity to browse there and if I
typed that in, well I'll be kicking myself
| | 02:35 | that I didn't take it. When you are
doing an XML dataset in addition to telling
| | 02:40 | it where to find the XML file, you
really need to use xpath notation to tell it
| | 02:44 | which note you want to access is
repeating root note. So what we are going to
| | 02:47 | do now is I'm going to type in a comma,
open up another set of quotation marks
| | 02:53 | and I'm going to type in products.
Remember that is our parent tag, forward
| | 02:56 | slash item and that is the repeating element.
| | 02:59 | So as long as you know the interior
structure of your XML file that's going to
| | 03:03 | be very easy to populate. Otherwise
you definitely want to take a look at the
| | 03:06 | schema before you come in here and do
that. So we'll go ahead and save that and
| | 03:11 | what's really kind of cool about this
now is because we are using HTML and XML
| | 03:15 | files, if I switch back to the Design
view -- it doesn't really matter but I'm
| | 03:18 | now going to open up my Bindings panel
and if I refresh my Bindings, there is
| | 03:23 | these dsProducts and if I open that
guy up, I can see I have description,
| | 03:27 | panel, price, thumb, id, index, name,
all of those things that we were working
| | 03:32 | on earlier are now available to us
and we can place the data on the page
| | 03:36 | anytime we want by using a
combination of data regions and data references.
| | 03:41 | Wonderful, now our structure is in
place and our data is available. The next
| | 03:45 | step will be to define the regions
of our widget that will be displaying
| | 03:48 | dynamic data, so that Spry can
began to populate our widget.
| | Collapse this transcript |
| Defining Spry regions and data references| 00:00 | In order for Spry to display data form
your dataset, you will need two things.
| | 00:04 | First you need to define a parent tag
as a Spry region. This tells Spry that
| | 00:09 | all the content inside of the parent
tag is referencing a specific dataset or
| | 00:13 | sets. Once that is taken care of, you
populate the contents inside the parent
| | 00:17 | tag using data references. A data
reference is a simple textural reference that
| | 00:22 | corresponds to the information from
the dataset that you want to display.
| | 00:25 | As you will see as we add our Spry
regions, there are different types of Spry
| | 00:29 | regions that help you control exactly
how that data is displayed. To display
| | 00:33 | more than one item from the dataset,
we'll use a Spry Repeat Region. This will
| | 00:38 | allow us to populate our widgets with
all the datasets data and to repeat the
| | 00:42 | structural elements contained within.
This is how we'll end up with multiple
| | 00:46 | div tags inside of our sliding
panels widget instead of just the one.
| | 00:49 | And I'm just going to switch right
over to Code view and I'm going to scroll
| | 00:53 | down till I find my widget structure.
And don't be fooled, remember that we
| | 00:56 | have that Spry region up there. I'm
going to go down till about line 79 or so.
| | 01:01 | Here we have a div with an id of thumbs.
Here is our thumbRegion. This is all
| | 01:05 | the stuff that we created earlier.
| | 01:06 | So we need to take care of both of
those, we have two Spry regions for this.
| | 01:10 | I'll go to line 79, the div and id of
thumbs then I'm going to go ahead and
| | 01:15 | make that a Spry region. And notice
that we have two datasets to choose from
| | 01:21 | and now this time I'm going to use
dsProducts. So code hinting is really
| | 01:24 | helping us out here.
| | 01:25 | Now the next thing I'm going to do is
I'm going to go in and I want to have
| | 01:28 | multiple images, remember. So we have
our image and it is wrapped by a link
| | 01:33 | tag. But the reason I did the span
tag here is I want to have multiples of
| | 01:37 | those so I can make this little span
tag be a repeat region. So right after the
| | 01:41 | id of the thumb region span tag, I'm
going to do spry and then repeat, and it
| | 01:47 | is going to repeat from the dsProducts as well.
| | 01:50 | Now that we have our Spry regions for
our thumb area, we need to go down into
| | 01:54 | our Spry regions for our widget
structure. So I'm going to go to where my div
| | 01:59 | panelContainer is and I'm actually
going to go ahead and do this to the
| | 02:02 | SlidingPanels. So, it just needs to be
one of the parent elements. I could have
| | 02:05 | done to the panelContainer but since
this is the actual widget itself, this is
| | 02:09 | a tag that I created for styling purposes,
I'm going to go ahead and do it to the widget.
| | 02:13 | So after the class SlidingPanels, I'm
going to do another Spry Region and it is
| | 02:19 | going to be dsProducts as well and
remember we'll need a Spry Repeat Region
| | 02:24 | also. So I'm going to go into my
SlidingPanelsContent. Now remember this is the
| | 02:29 | div that it groups all of our panels
together. These are the individual panels
| | 02:33 | themselves. I need multiples of these
and that is why that is going to get the
| | 02:37 | Spry Repeat Region. So we'll do spry
and then repeat and once again that is
| | 02:43 | going to be dsProducts.
| | 02:44 | So we have all of our Spry regions in
place, but we don't have any of our data
| | 02:47 | references in place. So, let's go back
up and do that. This is going to require
| | 02:51 | a little precision based on what we
have got happening up on line number 81.
| | 02:55 | This is our link tag surrounding our image tag.
| | 02:57 | So I'm going to highlight title, right
now that says placeholder and I'm going
| | 03:02 | to replace that with {@name}. Now,
look at that, because we have this dataset
| | 03:08 | created, it knows that we are doing a
data reference and it is going to go down
| | 03:12 | and help us with code hinting. So
this is going to be a lot easier than I
| | 03:16 | thought. For src, I'm going to replace
placeholder and I'm going to open up a
| | 03:19 | curly brace and that is going to be
thumb. So, I'll type in th and then thumb
| | 03:24 | and it will fix it for me. My alt text
is going to come from the name so that
| | 03:29 | is going to be @name. The name itself
strange enough is going to come from id
| | 03:36 | and then id is also going to come from id.
| | 03:40 | So that is going to take care of all
our images. I'm going to go down now and
| | 03:43 | take care of all the data references
inside of our SlidingPanels. We don't have
| | 03:48 | too many here. I'm going to replace
Product Name with the name itself. And then
| | 03:54 | I'm going to replace the Description
with the description and price with price.
| | 04:04 | There is one last little piece of house
cleaning that we need to do here. Right
| | 04:09 | after my SlidingPanels detail slide,
I'm just going to do a little line break
| | 04:14 | and I'm going to give that a class of
clearfloat and that is going to handle a
| | 04:19 | little bit of formatting issues that we
might come up with. And that's based on
| | 04:22 | our floated layout of the SlidingPanels
that we are going to be doing a little
| | 04:25 | bit later on. So just going to go
ahead and doing a little house cleaning there.
| | 04:28 | So I'm going to go ahead and save that.
And I'm going to preview that in my
| | 04:32 | browser, as I scroll down, there
is all my products. There is all my
| | 04:37 | thumbnails, they are repeating and
there is each one of my descriptions and my titles.
| | 04:43 | So we have a repeating structure that
is being created through the use of our
| | 04:46 | XML dataset, that's pretty cool. We are
still not all the way there however. We
| | 04:50 | still have to control our widgets
functionality and modify it's styling.
| | 04:53 | Although the styling is the fun part,
we're going to control the basic functionality next.
| | Collapse this transcript |
| Constructing Spry widgets through code| 00:00 | As we found when creating our XML
Dataset, creating Spry objects through a code
| | 00:04 | is fairly simple once you know the
proper syntax. The usual process is to link
| | 00:09 | to any external JavaScript and CSS files
necessary for the object and then use a
| | 00:14 | constructor function to create a
new instance of your Spry object.
| | 00:17 | Creating Spry widgets through code is
no different and those are the exact
| | 00:20 | steps that we'll use when creating our
Sliding Panels widget and I'm just going
| | 00:24 | to go ahead and switch over to Code
view because if you remember from our
| | 00:27 | previous exercise, our widget is
populating with the data but there is no widget
| | 00:32 | functionality. Well that's because
up to this point, there really isn't a widget.
| | 00:36 | So I'm going to scroll up to the very
top of my code and here we are going to
| | 00:40 | need to go ahead and initialize our
widget. Now we are going to need to link to
| | 00:42 | some of our external Spry Assets and
if I open my 06_05 SpryAssets folder,
| | 00:48 | I can see that I have already
in there SlidingPanels.css and
| | 00:53 | SprySlidingPanels.js.
| | 00:54 | So again if I did not have those, I
would have to copy them over from the Spry
| | 00:58 | Framework. So I'm going to go again
into my Source code and right here after
| | 01:03 | about line 16, I'm going to go ahead
and hit Return into this again, actually
| | 01:07 | you know what, let's copy and paste. Why not?
Why make life difficult for ourselves, right?
| | 01:13 | So after I copy and paste the xpath.js,
I'm going to change that so that this
| | 01:17 | now says SprySlidingPanels.js. I also
need a little new link tags, I'm going to
| | 01:26 | highlight a link tag and copy that,
paste it below the existing links and
| | 01:31 | again, I'm going to change this to
SprySlidingPanels.css and all the rest of
| | 01:39 | that can stay the same.
| | 01:40 | So that's going to link to the external
assets the SprySlidingPanels.js and the
| | 01:45 | SprySlidingPanels.css necessary to
construct our widget. So I'm going to go
| | 01:49 | ahead and save this and we still
don't have a Sliding Panels widget though,
| | 01:53 | just like the datasets that we
created in the HTML and the XML dataset, you
| | 01:58 | have to instantiate. So we are going
to go into our constructor functions,
| | 02:01 | right down here and make
a new Spry Sliding Panels.
| | 02:05 | We could do that at the top of our
code but we have another set of objects
| | 02:10 | being instantiated down here at the
bottom of the code and that's going to help
| | 02:13 | me separate my datasets from my actual
widget objects. So I'm going to go right
| | 02:17 | down here where our menu bar is being
instantiated and we'll write another
| | 02:21 | constructor function for our
Sliding Panels, directly underneath that.
| | 02:24 | So I'm going to go ahead and type in
var on that blank line and this is going
| | 02:28 | to be sp1. Now, we could give it any
name that we want but that's what we can
| | 02:33 | reference in code when we referencing
our Sliding Panels. We did in sp1 equals
| | 02:37 | new Spry.widget.SlidingPanels.
| | 02:43 | This is going to require a couple of
different parameters passed into it and
| | 02:46 | here's what's really important to
understand, how the constructor function for
| | 02:50 | each widget works. This is fully
covered within the online Spry documentation,
| | 02:54 | so any widget that you want to
create, you should be able to go online,
| | 02:57 | de-construct, the constructor function
and figure out exactly what it's looking
| | 03:00 | for and even some options that you
might not have known that you can place in there.
| | 03:04 | But the first thing it wants to know
which element on the page is the Sliding
| | 03:08 | Panels widget. So in quotation marks
I'm going to type in "detailSlide1". Now
| | 03:16 | if you remember I'm going to scroll up
just a little bit here, detailSlide1 is
| | 03:20 | the div tag right there and this is
our Sliding Panels widgets so it's just
| | 03:24 | identifying which element we are
telling it is our Sliding Panels widget.
| | 03:28 | Then I'm going to type in a comma, we
need to pass in several parameters for a
| | 03:32 | Sliding Panels widget. So when you are
passing any options for it, you do that
| | 03:35 | within curly braces so we'll go ahead
and send those on and as arrays, so we
| | 03:39 | are going to type in duration:500, it's
in milliseconds and what that is saying
| | 03:44 | is that their panels are going
to animate for half a second.
| | 03:47 | Then I'm going to type in comma and
I'm going to type fps and then colon and
| | 03:53 | then 60, so that is frames per second
and this is that going to help control
| | 03:57 | our animation and we need to close the
curly braces, close my parenthesis, and
| | 04:01 | type in semi colon.
| | 04:02 | So these two items that are here, are
going to control our animation. This is
| | 04:06 | how long it should animate and this
is the qualitative animation frames per
| | 04:09 | second. That's going to play at
large factor into exactly how fast that
| | 04:12 | animates and how good the quality is,
more frames per second equals more
| | 04:16 | quality but on slower connections, it
really actually could result in less
| | 04:20 | quality because the animation might
start to jump a little bit. So you want to
| | 04:23 | test that very thoroughly.
| | 04:25 | Again these are options that we
have learned about in the Spry online
| | 04:28 | documentation, so any Spry object that
you want to create through coding, you
| | 04:32 | want to be very, very careful and
read the documentation thoroughly, so you
| | 04:34 | know exactly how to initialize that.
| | 04:36 | So I'm going to go ahead and save that
and for the first time we are going to
| | 04:40 | preview our brand new Sliding Panels
widget in our browser. So I'm going to
| | 04:44 | scroll down and there is our Sliding
Panels widget and if I click on one of
| | 04:49 | these guys, check that out.
It's going to go and animate that.
| | 04:53 | So although not the style the way we
need it to, our Sliding Panels widget is
| | 04:56 | functioning properly, well almost.
The animation is vertical instead of
| | 05:00 | horizontal, the way we need it to be.
So this illustrates another fundamental
| | 05:03 | concept of using Spry, the JavaScript
and CSS work together for appearance and
| | 05:09 | functionality. Our remaining task will
be to rewrite our CSS to help control
| | 05:13 | both styling and functionality and
we'll tackle the functionality of our CSS next.
| | Collapse this transcript |
| Controlling panel animation through CSS| 00:00 | Our SlidingPanels widget is working,
but it's not working exactly the way we
| | 00:04 | would like. With many Spry widgets
functionality can be modified by making
| | 00:08 | quick changes to the default CSS.
| | 00:10 | In the case of our SlidingPanels widget
we'll modify the height to control the
| | 00:14 | viewing area for our panel content and
make our panels animate horizontally by
| | 00:18 | floating them in a horizontal line and
we'll control all of that through the
| | 00:22 | CSS. And before we go and modify the
CSS, I want to take just a moment to
| | 00:27 | review the panel functionality.
| | 00:28 | I am going to go into the Code view and
I'm going to scroll down to my panel so
| | 00:31 | that we can really see what's going on
here between our thumbnail regions and
| | 00:35 | the SlidingPanels widget and
how these guys are communicating.
| | 00:38 | So here we have spry:regions and we
are repeating both the image and the
| | 00:43 | SlidingPanels themselves. So inside of
our link tag now we have a little bit of
| | 00:47 | JavaScript going on here. We
have onClick event and it is driving
| | 00:51 | sp1.showPanel. sp1 if you remember
correctly, this is the name of our
| | 00:57 | SlidingPanels. And showPanel is the
default method for our SlidingPanels, that
| | 01:03 | tells the widget which panel to show
as we are picking that up from our XML
| | 01:07 | file. So @index is bringing in 0,1,2,3.
| | 01:11 | So in addition to showing content
through the use of our dynamic data, we are
| | 01:15 | also now changing the functionality of
our SlidingPanels widget through that
| | 01:20 | dynamic data as well. So there is a
lot of really cool stuff going on here. I
| | 01:23 | want to pick through this code and
get a good feel for exactly how the
| | 01:27 | SlidingPanels widget is working.
| | 01:29 | With that in mind, what we were going
to do is we are going to stay in Code
| | 01:31 | view and we are going to go to the
SprySlidingPanels.css. So here we have again
| | 01:37 | well-commented code out, telling
us exactly what is going on with our
| | 01:42 | SlidingPanels widget and
what these styles are affecting.
| | 01:45 | So the first one I want to go to is the
very top one SlidingPanels. This is the
| | 01:49 | parent tag style and it's styled the
container div tag for our entire widget.
| | 01:55 | Now the relative positioning, the
width of 100%, all that is okay. But the
| | 01:59 | height is the real problem here, at
400 pixels it's much to too tall for our
| | 02:03 | content. So I'm going to shrink down to
210 pixels. Now I have just shrunk the
| | 02:07 | amount of viewing area that we have for
our SlidingPanels. So we are not going
| | 02:11 | to see as tall of window area. We still
have a padding of 0 pixels and a border of none.
| | 02:16 | But I'm going to change one thing here.
I'm going to come in and give it a
| | 02:20 | float property and I'm going to float
that left. And that's going to help us
| | 02:25 | animate that horizontally and that's
actually described up in the commenting
| | 02:31 | features for our panel. So they
tell you exactly how to get horizontal
| | 02:35 | animation out of that.
| | 02:36 | Now I'm going to go down to our
SlidingPanelsContentGroup and I'm going to
| | 02:40 | change the width from 100%, I'm going
to change that to something really big,
| | 02:44 | so I'm going to do 10,000 pixels. And
you are probably like, do what? But trust
| | 02:50 | me on this, you see since we are going
to float each one of those panels they
| | 02:54 | have to be wide enough so that all of
them can stack in a row. If I was going
| | 02:58 | to have 6, 7, 8, 9, 10 panels, I would
make it even wider than that. I want to
| | 03:03 | make sure that they are all going to
able to float right beside each other.
| | 03:06 | Now the next thing I'm going to do is
right after border I'm going to come down
| | 03:09 | and I'm going to tell those guys to
float to the left as well. That's going to
| | 03:12 | stack them at a nice horizontal row.
| | 03:14 | Now the last thing we need to do is go
down and style the SlidingPanelsContent.
| | 03:19 | Now these are the actual panels
themselves, remember they are contained within
| | 03:24 | the group. So now what we are going to
do with these guys is we are going to
| | 03:26 | change their width to 700 pixels,
that's going to be the content area that they
| | 03:32 | can display in. And that width is
based on the wrapper width themselves.
| | 03:36 | The height is going to be 210 pixels.
Again remember that is referencing the
| | 03:40 | height that we have in the
SlidingPanels widget itself. So we are making them
| | 03:45 | exactly as tall. So we have margin of
0 and a padding of 0. And once again we
| | 03:49 | are going to float these guys to the
left. What that's going to accomplished
| | 03:53 | for us is it's going to align them
up all in a single horizontal row.
| | 03:57 | The last thing we are going to do, so
we are going to go ahead and give them a
| | 03:59 | background color. And I'm going to
type in #A8BAAA and that's going to give
| | 04:06 | each one of our SlidingPanels their
own little background color. So we are
| | 04:11 | going to do a Save All and let's
preview that in our browser to see how that
| | 04:15 | has affected our functionality.
| | 04:17 | If I scroll down, I can see that now
my SlidingPanels are all in a straight
| | 04:21 | line. And if I click on those guys
you can see now they are animating
| | 04:24 | horizontally rather than vertically.
Awesome! So we are almost there.
| | 04:29 | Now you may have noticed we don't have
any larger images for items displaying.
| | 04:33 | So that's something we want to take
care of. And also one of the benefits of
| | 04:36 | using Spry is the openness and
flexibility that we have when modifying and
| | 04:40 | customizing our Spry content. And we
are going to take advantage of that by
| | 04:43 | adding the product images to our panels,
customize our styling when the panels
| | 04:47 | are animating to look like the content
is blurring. And that is what we'll take
| | 04:50 | care of next.
| | Collapse this transcript |
| Enhancing effects through CSS| 00:00 | By now, I hope you've gotten the
idea that the default styling and
| | 00:03 | functionality of Spry widgets is
merely the starting point. What you with you
| | 00:07 | widgets and how you
customize them is totally up to you.
| | 00:11 | In this example, I'd love to enhance
the effect of the panel animation by
| | 00:14 | blurring my images as they animate. In
researching the Sliding Panel widget,
| | 00:19 | I discovered that Spry dynamically
assigns the calls Sliding Panels animating to
| | 00:24 | the panels when they are animating and
then removes it when they are finished.
| | 00:28 | Once I had that, tweaking the
styling was as easy as creating the blurred
| | 00:31 | version of the product images and
writing a few new selectors. We'll add our
| | 00:35 | images as background images first,
and then create our animated styles.
| | 00:39 | I am just going to go ahead switch
over to Code view and look at the source
| | 00:44 | code, and if I scroll up towards the
top, I can see that some embedded styles
| | 00:47 | have been added that are helping the
format, the content of my Sliding Panels .
| | 00:52 | So we are going to add some
new styles to this section.
| | 00:54 | Now the first thing I'm going to do is
I'm going to copy this commenting line
| | 00:58 | and then paste it just below the
existing group of styles. I always like to
| | 01:02 | separate my styles in sections and this
really helps with that. So I'm going to
| | 01:06 | type in background images for panels,
because that is what we are going to be doing next.
| | 01:12 | Now the first thing we are going to do
is we are going to target each panel,
| | 01:15 | and as a way of refreshing my memory,
we know that each penal has a specific
| | 01:19 | number, panel0, panel1, panel2,
and panel3. Those are being assigned
| | 01:24 | dynamically, but it's still an id and
we can still write styles for it. So
| | 01:28 | classes and ids that are assigned
dynamically, you an still write selectors for them,
| | 01:32 | and when that class or ID association
is made, you will see the formatting.
| | 01:36 | So I'm going to type in #main content,
so we are staying fairly specific with
| | 01:40 | these, #panel0, all one word, no
spaces, and then I'm going to go ahead and
| | 01:46 | open up my curly bracket and I'm going
to type in background#a8baaa and then a
| | 01:54 | space, and we are going to give a
background image, so I'm going to type in URL
| | 01:58 | images\details. We have a
subdirectory called Details \hoody_details.jpg.
| | 02:09 | For positioning, we'll type in no
repeat, so that it doesn't tile. Then we'll
| | 02:13 | type in 10 pixels for horizontal and 5
pixels for vertical, and that's just to
| | 02:18 | shift it around a little
bit inside the Sliding Panels.
| | 02:21 | Now as you can imagine, each of the
panels is extremely similar, the only thing
| | 02:24 | that really changes is the image
itself. So I'm going to copy this and then
| | 02:30 | paste it once, twice, and then a third
time. First thing I'll do is I'll change
| | 02:35 | the panel numbers. So panel 1, 2, and 3.
Now have got selectors for each of my
| | 02:41 | panels that are being dynamically
assigned, and now I just have to go and I
| | 02:44 | have change the graphic.
| | 02:45 | Now all of them are named the same
thing. They have the name of the item and
| | 02:49 | then _detail, so really all we have to
change is that word for each of these guys.
| | 02:54 | So the first one will be tshirt_
detail, then the third one is going to be
| | 03:00 | bag_detail, and then the last one
will be longt_detail. So it should be
| | 03:07 | hoody_details, tshirt_detail, bag_
detail, and longt_detail. So I'll go ahead
| | 03:15 | and save that, preview that in my browser,
and we'll see we have our background images.
| | 03:19 | Now we do.
| | 03:20 | There are larger product images and
those are coming in based upon the dynamic
| | 03:26 | id association for the Sliding Panels.
So that style is responding to what's
| | 03:30 | coming out of the dataset. Very nice!
| | 03:32 | Now we want to write our styles for
when our panels are animating. So once
| | 03:36 | again, I'm going to copy that
comment line and paste it, and I'm going to
| | 03:40 | replace the comment line with styles
for panels as they animate. I'm trying to
| | 03:47 | be as descriptive as I can.
| | 03:50 | Now first we'll take care of the
heading and the paragraph and the price. It's
| | 03:54 | one thing to blur the images, but I'd
also like the text style like it was
| | 03:57 | blurring as well, and I can fake that
a little bit by giving them sort of a
| | 04:01 | light gray color, so that when it does
animate, they will tend to dim out and
| | 04:05 | get a little gray and it will
give the illusion of them blurring.
| | 04:09 | So we are going to type in #main content,
now here's where we take advantage of
| | 04:14 | the dynamic class association.
SlidingPanelsAnimating, and you really have to
| | 04:24 | remember what that is. If you are
wondering where I found that. If I look over
| | 04:29 | in the SprySlidingPanels.css, all the
way towards the bottom, you can see right
| | 04:34 | there SlidingPanelsAnimating, and
currently the only thing that it's doing is
| | 04:39 | everything inside of that is being
hidden, if there is an overflow. That way,
| | 04:42 | as they animate, if the dimensions
change a little bit, you won't see scroll
| | 04:46 | bars, so that's kind of nice.
| | 04:47 | But we are using it for something
entirely different, we are using it purely
| | 04:51 | for decorative purposes. So #main
content SlidingPanelsAnimating h2, so we'll
| | 04:57 | first tackle the heading 2. We are
going to go ahead and give it a color, and
| | 05:00 | we are going to change its color to
#999, that's the gray color obviously.
| | 05:05 | We'll close our curly brace there, and
again I'm a big believer in not typing
| | 05:09 | things twice if you don't have to. So
I'm going to copy and paste that, and I'm
| | 05:13 | going to change the Heading 2 to p.
it's going to get the same exact color,
| | 05:17 | just copy and paste, and this time
we are going to change the H2 to a
| | 05:21 | span.price. If you remember, the
prices inside of a span tag with a class of
| | 05:27 | prices that's going to change
all of those to that gray color.
| | 05:30 | Again, we can save that, preview that
in our browser, and as they animate,
| | 05:35 | watch the text and as it dims out
and all becomes gray. So it gives the
| | 05:42 | illusion of blurring out and when we
put our blurred images in there, it will
| | 05:47 | enhance that effect.
| | 05:48 | All right. So let's go back in our code
and we are ready to go ahead and do our
| | 05:52 | panels. Now I'm going to go ahead and
paste that selector again, but this time
| | 05:56 | I'm going to change H2 to #panel0. So
again, we are taking advantage of that
| | 06:02 | dynamic association.
| | 06:04 | We are really not changing too much
other than the background graphic, so I'm
| | 06:08 | going to go right up here, and I'm
going to steal some stuff from up here. I'm
| | 06:11 | going to go ahead and grab the
background of my main content panel0, copy that,
| | 06:17 | and then I'll replace the color
that's in there with that. Instead of
| | 06:21 | hoody_detail, let's make this as easy
as possible. I make sure I name them just
| | 06:26 | hoody_blur. So I have a detailed
image and I have a blurred image.
| | 06:30 | So in reality, I can now just copy
this, paste it once, twice, three times,
| | 06:39 | change my ids again, panel1, panel2,
and panel3, just what we did above, and
| | 06:44 | now instead of hoody_blur, I'm once
again going to highlight these and type in
| | 06:49 | tshirt_blur, bag_blur, and finally longt_blur.
| | 06:59 | The other thing that copying and
pasting does to you, if you test it and make
| | 07:02 | sure that it works, then that sort of
prevents worrying too much about having a
| | 07:06 | typo and misspelling something, very
easy to do when you have these long class names.
| | 07:10 | So I'm going to go ahead and save that
again, we are going to preview this on
| | 07:13 | our browser, and as I scroll down, now
it animates, blurred version comes in,
| | 07:20 | and you can see how it really enhances
the effect, but having the text be gray
| | 07:23 | as well. So it's working perfectly.
| | 07:26 | So we have a fully functioning,
customized Sliding Panels widget, all carefully
| | 07:30 | constructed by hand. Far from being
intimidating, Spry offers a wonderful
| | 07:34 | opportunity for designers to work
within the confines of technologies that they
| | 07:38 | are already comfortable with, such
as XHTML and CSS, and it used that
| | 07:42 | technology to control complex AJAX
driven elements, all of this without having
| | 07:47 | to do hardly any JavaScript at all.
Well, not only actually if you let
| | 07:49 | Dreamweaver add the code for you.
| | 07:51 | I hope you have enjoyed this
introduction to Spry and that you will use it as a
| | 07:54 | starting point to learn more about what
this amazing framework can do for your own sites.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | I hope you have enjoyed Dreamweaver CS4
Introduction to Spry. Although we have
| | 00:04 | more than scratched the surface of
using Dreamweaver and Spry, I hope that
| | 00:08 | this title will merely serve as a
starting point in your journey of building
| | 00:12 | AJAX driven sites with Spry and Dreamweaver.
| | Collapse this transcript |
|
|
