Share on Facebook

1. Views
2. Views Slideshow
3. Chaos tool suite
4. Link Field
5. Token (optional)

(2) Install the Modules

In Drupal7 you can install modules from the admin section, but I still feel this new feature doesn’t have any meaning, because we have to search for the module link in the Druapl site and then copy paste into the admin module installation area, really crazy. It would have been so good if they would have made it something like wordpress a small search feasture. Anyway I just gonna download and istall it in the old way (I still recommend this old way).

Download all the modules from Drupal site and install in the directory yoursitename/sites/all/modules.
Go to http://www.yoursitename.com/node#overlay=admin/modules and enable these modules as below;

(1) Views (2) Views UI (3) Views Slideshow (4) Views Slideshow: Cycle (5) Chaos tools (6) Link

(3) Create Image Cache

In Drupal7 imagecache is part of core module and is named as Image styles. So let’s create two image cache from here, one for the full size slider image and other for the thumbnail image. In this tutorial I use 935×293 (pixels) dimension for the full size slider image and 210×100 (pixels) dimension for the thumbnail image. Note: These configurations csn be defered depends on your needs.

* Fullsize Slider image settings

Go to http://www.yoursitename.com/node#overlay=admin/config/media/image-styles and click on the add new style link
(1) Give an Image style name and click on create new style button
(2) On the next configuration screen select new style you want and then click add button (In this tutorial I choose resize style)
(3) On the next screen set the width and height and click on the add effect button. (The settings may vary depend on the style you choose). I set width as 935 and height as 293 pixels.

Do this same process for the thumbnail image too. (for the thumbnail image dimension, I set width as 210 and height as 100 pixels.)

(4) Create New Content Type

Let’s create a new content type, From the dashboard menu bar cick on Structure and then content types then click on the add new content type link.

(1) Give a human-readable name, I named it as Featured Slider (machiine name will be auto generated based on the human readable name)
(2) Give a brief and relevant description
(3) Submission form settings, I leave as the default settings
(4) Publishing options, I checked only published (all other settings unchecked)
(5) Display settings, I have unchecked the authour and date info.
(6) Comment settings,I set hidden (disabled)
(7) Menu settings, I leave as default settings.
(8) Click Save and add fields Button

(5) Create New Fields

Here in this example I create only two fileds, and they are image field and link field.
We will use image field for uploading our slider image and link field for creating a custom link where we want our slider to be linked.

Image Field Settings

(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
I set this field as required, I added a file director name called slider-image so that this images will be arranged sperately from other images.
You can set the maximum upload size and resolution here, I have anabled alt and title field and finally click Save settings button.

By using same method create the link field too.

Link Field Settings

(6) Create Feature Slider Content

I have created four featured slider content for this tutorial.

(1) Click on add content link
(2) Create Featured Slider content
(3) Give a proper title name
(4) Upload slider image
(5) Give alt and title field names
(6) Give a link title and url where you want the slider to be linked
(7) Leave all othe settings as default except for the path field if yo want you can give an SEO friendly URL alias.
(8) Save the content.

Same way create more Featured Slider contents (I have created four contents)

(7) Create a New View

Now it’s time to create our new Slideshow view.
From the Dashboard menu click on the Structure and then click on the Views.

(1) Click add new view link
(2) Give view name, I have named as Featured Slider (machiine name will be auto generated)
(3) Give an apropriate view description
(4) Choose view type as node and click Next button.
Views Field Settings
First let’s add link field (link must be the first field in order to work everything properly) so click on the + icon and from the Groups select Fields
Add link field (field_slder_link), remove the label and leave all other settings as default and click Update button.

Next let’s add image field, so click on the + icon and from the Groups select Fields
Add image field (field_slider_image) make sure you choose the image field which we crerated for this slider only.
Remove the label and in the Rewriting section click Output this field as a link and then you get more configuration options just do as given below;

(1) Scroll dow a bit and you can see replacement patterns created by Core Token module, (if we didn’t set the link field as first we can’t see link field option here) copy only [entity_id] then scroll up and paste it in the link path field.
(2) Scroll down to te bottom of the settings and choose Image Style as fullsize-image (Our fullsize image style we created above).
Leave all other settings as default. Click Update button.

Finally we need one more field for the thumbnail, so let’s click on the + icon and from the Groups select Fields
Add image field (field_slider_image) make sure you choose the image field which we crerated for this slider only.
Remove the label and CHECK EXCLUDE THIS FIELD FROM DISPLAY, then in the Rewriting section click Output this field as a link and then you get more configuration options just do as given below;

(1) Scroll dow a bit and you can see replacement patterns created by Core Token module, (if we didn’t set the link field as first we can’t see link field option here) copy only [entity_id] then scroll up and paste it in the link path field.
(2) Scroll down to te bottom of the settings and choose Image Style as slider_thumb (Our thumbsize image style we created above).
Leave all other settings as default. Click Update button.

Views Filters Settings

Now let’s create a filter for filtering to get the specific content.
(1) So let’s click on the + icon and from the Groups select Node
(2) Select Node Type as Featured Slder
(3) Select Node Published as Yes

Views Style Settings

Click on the Unformatted link under style settigs and choose Slideshow and on the next configuratioin window set as below;
(1) List type: Unordered list
(2) Wrapper class: Leave default settings
(3) Style> Skin: deafult
(4) Slides> Slideshow type: cycle
(5) Cycle options
You need to download jQuery cycle plugin and copy jquery.cycle.all.min.js to sites/all/libraries/jquery.cycle You can find the plugin at http://malsup.com/jquery/cycle.
(6) Transittion: Fade
(7) Action: pause on hover
(8) Internet Explorer Tweaks: default
(9) Widgets: You can choose either or both Top and Bottom (I choose bottom here, and the advance settings as below;)
(10) Bottom Widgets>Pager>Pager type: Fields
(11) Pager field: field_slider_image (last one we added for the thumb, don’t mistake since both field will be named same.)
(12) Activate Slide and Pause on Pager Hove: checked, controls and slider counter leave unchecked.
(13) Click Update button.

Row Style Settings

1. Row Styel: Fields Selected, then on the rowstyle settings section you see an option with display inline.
   Choose the thumbnail field as inline.
2. Click Update button. (Note: Well it actually doesn’t change much in appearance bit it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)

Add New Display

On the views left side choose block and click on Add display button. And re-name the block as Featured Slider under views Basic Settings.

(8) Create a Custom Region (optional step)

(1) On your thems folder open the your_theme_name.info file and add a new region like this shown below;
regions[featured_slider] = Featured Slider and save the .info file.
(2) Open your themes page.tpl.php file and add these code where you want your slide to be displayed as shown below;

<?php if ($page['featured_slider']): ?>
<div id=”featured-slider”>
<?php print render($page['featured_slider']); ?>
</div> <!– End Featured Slider–>
<?php endif; ?>

You can even create custom front page template like page–front.tpl.php so that you do’t need to make any changes to the default page.tpl.php template.

[9] Enable & configure the Block

Now this block will be visible in the blocks disabled area, so from the Dashboard menu go to Structure>Block and enable the block to a themes default region  or the custom region we created (featured_slider). (Regions varies depends on the theme you are using.)

Block Configuration Settings
After enabling the block you get a link to configure the block so click on the Configure link and on the settings section set as below;

(1) Block title (if you don’t want blobk title to be displayed just type <none>)
(2) Again you get all enabled theme specific Region settings.
On visibility setings
(3) Pages>Show block on specific page: choose Only the listed pages and type <front> so that this block will be displayed only on the front page.

That’s all now we have successfully created our new Views Slideshow on Drupal7. I hope yo could understand the tutorial I tried my best to explain as much as I can, if you still have doubt’s comment below and I will try my best to help. The scren cast of this tutorial will be coming soon.

Play around and find the best you can in Drupal7, Best wishes.

Share on Facebook

1. [U] Blocks have new, more meaningful CSS IDs
2. [U] Primary and secondary links are now Main and Secondary menu
3. [U] Unrendered taxonomy links are no longer available as a separate variable in node.tpl.php files
4. [U] RDFa requires some changes at the beginning of html.tpl.php
5. [U] The clear-block class has been renamed to clearfix
6. [U] The box.tpl.php template has been removed
7. $help became a region
8. [U] Mission statement removed, ‘highlighted’ region suggested
9. [U] Footer message removed
10. [U] Content region is now mandatory, main page content became a block
11. [U] Second phase variable process functions
12. HTML classes generated through a variable
13. HTML attributes generated through a variable
14. Variable process functions can now be used for all theming hooks
15. All theme functions now take a single argument, $variables
16. [U] Function names must match theme name
17. [U] All CSS and JavaScript files must be specified in the theme’s .info file
18. Renamed $block->content in block.tpl.php
19. Granular rendering in node and user templates
20. [U] Added jQuery UI (1.8) to core
21. Attached JS/CSS for elements
22. $closure becomes $page_bottom, new $page_top and hidden regions
23. $left and $right variables are now $sidebar_first and $sidebar_second; CSS IDs also changed
24. $picture changes to $user_picture, and the CSS class ‘picture’ to ‘user-picture’
25. New classes available to hide content in an accessible manner
26. JavaScript variable Drupal.jsEnabled has been removed
27. PHPTemplate suggestion wildcard
28. Include theme definition explicitly on element when using system_elements()
29. Added markup to make installation task progress perceivable with screen-reader and CSS disabled.
30. Added an invisible heading to theme_breadcrumb().
31. Changes to alt and title attribute for the RSS feed icon
32. Search box moved from theme layer to blocks
33. Changes to menu tree, link and tab rendering functions
34. theme_links() has a new parameter $heading for accessibility
35. theme_get_setting() and THEME_settings() have been improved
36. Added a theme_form_required_marker() function
37. Added a theme_link() function
38. Skip to main content links in core themes
39. Alter hooks available to themes
40. System module stylesheets have been reorganized to separate behavior-supporting styles from presentational styles
41. New theme setting for displaying the Shortcut module “add to shortcuts” link
42. Specific template overrides of generic templates use a ‘–’ delimiter instead of ‘-’
43. CSS files are sometimes loaded with @import, sometimes with LINK tags
44. [U] Browser-targeted CSS files can and should be added using drupal_add_css()
45. Targeted overrides (suggestions) available for theme_menu_link() and theme_menu_tree()
46. theme_submenu() was removed
47. New $title_prefix and $title_suffix template variables
48. theme_node_form() was removed
49. node_get_types() renamed to node_type_get_types()
50. Core themes now contain “package = Core” in their .info files
51. Heading elements added to search-result.tpl.php
52. The name attribute in a and map elements is invalid
53. PHPTemplate is now the default theme engine

Blocks have new, more meaningful CSS IDs

Many of the CSS IDs for blocks defined by Drupal core have changed so that they more clearly indicate the purpose of the block:

Recent blog posts
Old CSS ID (Drupal 6): block-blog-0
New CSS ID (Drupal 7): block-blog-recent

Book navigation
Old CSS ID (Drupal 6): block-book-0
New CSS ID (Drupal 7): block-book-navigation

Recent comments
Old CSS ID (Drupal 6): block-comment-0
New CSS ID (Drupal 7): block-comment-recent

Active forum topics
Old CSS ID (Drupal 6): block-forum-0
New CSS ID (Drupal 7): block-forum-active

New forum topics
Old CSS ID (Drupal 6): block-forum-1
New CSS ID (Drupal 7): block-forum-new

Language switcher
Old CSS ID (Drupal 6): block-locale-0
New CSS ID (Drupal 7): block-locale-language-switcher

Syndicate
Old CSS ID (Drupal 6): block-node-0
New CSS ID (Drupal 7): block-node-syndicate

Most recent poll
Old CSS ID (Drupal 6): block-poll-0
New CSS ID (Drupal 7): block-poll-recent

Author information
Old CSS ID (Drupal 6): block-profile-0
New CSS ID (Drupal 7): block-profile-author-information

Search form
Old CSS ID (Drupal 6): block-search-0
New CSS ID (Drupal 7): block-search-form

Popular content
Old CSS ID (Drupal 6): block-statistics-0
New CSS ID (Drupal 7): block-statistics-popular

Powered by Drupal
Old CSS ID (Drupal 6): block-system-0
New CSS ID (Drupal 7): block-system-powered-by

User login
Old CSS ID (Drupal 6): block-user-0
New CSS ID (Drupal 7): block-user-login

Navigation
Old CSS ID (Drupal 6): block-user-1
New CSS ID (Drupal 7): block-system-navigation

Who’s new
Old CSS ID (Drupal 6): block-user-2
New CSS ID (Drupal 7): block-user-new

Who’s online
Old CSS ID (Drupal 6): block-user-3
New CSS ID (Drupal 7): block-user-online

For example, a Drupal 6 CSS style declaration such as:

should become (in Drupal 7):

[Docs Updated]

Primary and secondary links are now Main and Secondary menu

Primary and Secondary links have been renamed to Main and Secondary menu. Themes which support these options will need to be updated to use the new variable names:

6.x: page.tpl.php

7.x: page.tpl.php

You will also need to make the appropriate variable name changes if your theme’s theme.info is defining features[]. Defining renamed or replaced features may cause all features to render as blank or empty arrays.

6.x: theme.info – features[]

7.x: theme.info – features[]

Also, if your theme.info is defining features[] = mission please note that this feature has been removed and replaced with a variable named $mission which can be output in your page template.

[Docs Updated]

Unrendered taxonomy links are no longer available as a separate variable in node.tpl.php files

Previously, node.tpl.php files could use the $taxonomy variable if they needed access to an array of unrendered taxonomy links associated with the current node.

In Drupal 7, this is no longer the case. Instead, all links have been moved into the $nodeobject. The array of unrendered taxonomy links can now be found in $node->content['links']['terms']['#value'] instead. (Note that this array should be used with caution, since the text contained within it has not been escaped to prevent XSS attacks.)

Rendered taxonomy links are not affected; node.tpl.php files can continue to access these via the $terms variable, as before. In many cases, the $terms variable is what you want to use in your theme anyway, and you might be able to replace references to $taxonomy with it, as in the following example:

6.x

7.x

[Docs Updated]

RDFa requires some changes at the beginning of html.tpl.php

Drupal 7 is able to output RDFa which requires the following changes in html.tpl.php.

• The DOCTYPE must be changed to XHTML+RDFa 1.0.
• The old lang attribute should be removed for compatibility with XHTML 1.1, only xml:lang should remain.
• The RDF namespace prefixes used throughout the HTML document need to be serialized in the html tag and are contained in the $rdf_namespaces variable.
• The GRDDL profile should be specified in the <head> tag.

6.x

7.x

[Docs Updated]

The clear-block class has been renamed to clearfix

The “clear-block” class was a Drupalism for functionality that was better known by the CSS Community as the “clearfix” class. Also, using “block” in the old name was confusing to Drupal users more familiar with Drupal’s block system than with the properties inside that CSS ruleset. New themers and designers to the Drupal community will no longer be confused by the old class name.

If you had a <div> in your D6 theme, simply change it to <div>.

[Docs Updated]

The box.tpl.php template has been removed

The amorphous box.tpl.php template has been removed. Those pieces of content that were using the box.tpl.php now have their own theme functions.

The search results listings are just themed with theme(‘search_results’) instead of being wrapped in an additional box. The comment form box is themed with a theme_comment_form_box() theme function.

[Docs Updated]

$help became a region

(issue) In Drupal 7, a new region was added to the defaults (left, right, content, header, footer) called help. By default, the textual content of this region is the same as the $helpvariable was in page.tpl.php for Drupal 6.

Themes in Drupal 7 need to ensure that the $help variable is printed in page.tpl.php and, if the theme overrode the default regions, that the following line is added to its .info file:

The help text is now surrounded by the block.tpl.php template’s <div> tags and classes, so the CSS used to style the help likely needs changing.

[docs updated]

Mission statement removed, ‘highlighted’ region suggested

(issue) In Drupal 6, the page template received a special variable called $mission, which contained the mission statement setting of the website when on the front page. Drupal 6 themes also had an option on the theme settings page to toggle this functionality. Drupal 7 removes the mission setting and the option toggle in favor of the more general custom block placement in regions.

Drupal 7 core themes now include a region named ‘highlighted’ which uses the same display as the mission statement area in Drupal 6. Whether this region has content now depends on administrators setting block placement, and is not limited to the front page only. Content in the highlighted region will be surrounded by the block.tpl.php template’s <div> tags and classes, so the CSS used to style this area might need changing.

6.x

In .info:

In page.tpl.php:

7.x

If you have defined custom regions in your .info file, you may add the highlighted region to the existing list of regions as shown below. If your theme does not define any regions, the highlighted region will be provided by core automatically, and you’ll only need to ensure that you print it in page.tpl.php.

in .info:

in page.tpl.php:

[Docs Updated].

Footer message removed

(issue) In Drupal 6, the page template received a special variable called $footer_message, which contained the footer message setting of the website. This was usually output before the footer region ($footer) by the template. Drupal 7 recognizes that the footer message was just a special type of user defined block. Those who had this setting in Drupal 6 will get a user defined block in the update, positioned in the $footer region.

To update your themes, just remove the $footer_message variable from them.

If you happened to output the $footer_message in your page template, but did not yet support the $footer region, now might be the time to start supporting this region. If you don’t override any regions, the footer region will be predefined for you. If you do override regions, please output the $footer content in your page template and include the footer region in your .info file:

Support for the footer region is just suggested but not required by Drupal. Those upgrading from Drupal 6 with a theme lacking support for the footer region will be able to reposition their block to another region.

Content region is now mandatory, main page content became a block

In Drupal up to version 6, the $content variable in page.tpl.php contained the main page content appended with the blocks positioned into the content region (if you had that region defined).

In Drupal 7, $content became a full region and is now mandatory in all themes. This new requirement was set up so that when enabling new themes, Drupal knows where to put the main page content by default.

In Drupal 6, it was only possible to put blocks after the main page content in this region. The only way to put blocks before the main page content was to define a specific region for that purpose. Drupal 7 now makes the main page content its own block. This makes it possible to put blocks before or after the main page content in the region without hacking in a new region.

If you relied on the fact that blocks were only put in the sidebars and therefore got their styling via just a .block class selector or something similar, now you might need to revisit your CSS files. Because the main page content is wrapped by markup from block.tpl.php, the.block selector will match that too, so you need to limit your blocks styling to certain regions by making the selectors more specific, such as #left-sidebar .block.

Second phase variable process functions

There are now two sets of variables process functions. The first are the existing “preprocess” functions. The second are “process” functions which are run after preprocessors. All the various prefixes and suffixes apply to this second phase in the exact same way. This is useful when certain variables need to be worked on in two phases.

For example, adding classes into an array for the “preprocess” phase then flattening them into a string in the “process” phase so it’s ready to print within a template. See next section.

[Docs Updated].

HTML classes generated through a variable

All templates can now print out $classes from a template to render dynamic classes built from variable process functions. The way to add these dynamic classes is by feeding the variable key labeled “classes_array” like so:

The default “template_process” (second phase processor) will take care of flattening the array into a flat string making it ready to print from your template. Dynamic classes are generated for common templates by default but due to the way it’s set-up, any template can have a $classes variable.

Example:

HTML attributes generated through a variable

All templates can now print out $attributes, $title_attributes, and $content_attributesfrom a template to render dynamic attributes built from variable process functions. The RDF module and other modules add important information to these variables, so it is important for themes to ensure that these variables are printed correctly within all overridden template files. These three variables contain attributes for the overall element being rendered by the template, and its primary title and content elements, respectively. The way to add attributes to these variables is by feeding the variable keys labeled “attributes_array”, “title_attributes_array”, and “content_attributes_array” like so:

The default “template_process” (second phase processor) takes care of flattening the arrays into strings ready to print within the template file. The flattening process results in either empty strings (if no dynamic attributes were set) or strings that have a leading space followed by attribute names and values. Because of this, the attributes variables should be printed directly next to what precedes it in the template, with no leading space.

Example:

As is shown in the example, the convention is for the “id” and “class” attributes to be printed explicitly within the template, and for the attributes variables to be used for all other attributes. Therefore, to ensure that no attribute gets printed twice within the same element, the following rules should be followed:

• Preprocess functions within modules must not add “id” or “class” to the attributes arrays.
• Preprocess functions within themes may add “id” and/or “class” to the attributes arrays, but if they do so, the theme must also override the corresponding template file and ensure that the same attribute isn’t being printed explicitly.
• Templates must not print any attribute other than “id” or “class” explicitly on any element for which an attributes variable is also being printed. Instead, the theme must use a preprocess function, as shown above.

Variable process functions can now be used for all theming hooks

(issue) In Drupal 6, preprocess functions could only be used for theming hooks rendered by templates. In Drupal 7, hook-specific preprocess and process functions can be used for all theming hooks, whether rendered by templates or functions. For example, a theme can make all menu links that start with “http:” or “https:” (as opposed to ones that refer to an internal Drupal path) to open in a new browser tab:

Every preprocess function adds to the time it takes to theme the item, so especially for theme functions that get called a lot, keep an eye on performance when adding preprocess functions.

To minimize performance overhead, the non-hook-specific preprocess and process functions are called for templates only. See the API documentation for theme() for the full list of hook-specific and non-hook-specific preprocess and process functions.

All theme functions now take a single argument, $variables

(issue) In Drupal 6, theme functions registered their function arguments in hook_theme(). In Drupal 7, all theme functions take a single argument, $variables, an array of keyed variables, and register the expected keys within this array in hook_theme().

6.x

7.x

Function names must match theme name

Function names in the file template.php must now use the relevant theme’s name. You may no longer use phptemplate_function. This change was made in the following patch: Die, themeEngineName_ prefix, die!. To update your theme ensure there are no functions that begin with the template engine name (phptemplate) in the file template.php or any related template files.

All CSS and JavaScript files must be specified in the theme’s .info file

In Drupal 6 style.css and script.js would be included in your theme automatically, even if they weren’t present in the theme’s .info file. In Drupal 7, themes must specify these files in the .info file to include them. More information about this change can be seen at #351487: Remove default values for stylesheet and scripts includes from system module. If your theme doesn’t use these files, or if they are already specified in your theme’s info file, no changes are required. [docs updated]

Renamed $block->content to $content in block.tpl.php

See this issue for the whole story.

Granular rendering in node and user templates.

Issue. Template authors may now finally print out bits of node and profile content as they see fit and still maintain forward compatibility with new modules that might add new content. To do so, template authors should use 2 new functions – render() and hide(). Example taken from node.tpl.php:

render() returns all the items that are in $content. So, print render($content) is equivalent to the D6 print $content. When a templater wants to print out part of the $content array, she may do so with something like print render($content['links']). If the printing of links comes after the printing of all the rest of $content, then templater should call hide($content['links']) before calling print render($content). Then, the links can be printed further down in the template with print render($content['links']).

Added jQuery UI (1.8) to core

(issue) jQuery UI 1.8 was added to core. You can find the jQuery UI files in misc/ui and can add Javascript and CSS files from there to your pages with the regular drupal_add_js() and drupal_add_css() calls, no special function calls required. If you are migrating a theme which was previously dependent on the jquery_ui contributed module, see the module update guide on the topic, which provides examples. [docs updated]

Attached JavaScript and CSS for drupal_render

(issue) Individual elements now have the ability to define what JavaScript and cascading stylesheets are associated with them. This is stated in the #attached_js and #attached_cssproperty.

Drupal 6.x:

Drupal 7.x:

$closure becomes $page_bottom, new $page_top and hidden regions

(issue 1), (issue 2) Drupal 6 provides a special variable called $closure which should be put at the bottom of the HTML body output and can be themed via theme_footer() (which calls out to implementations of hook_footer() in modules). To generalize on one way to put output to the different page areas, Drupal 7 standardizes on regions and introduced the page_bottom region in place of the $closure special variable. Also, page_top is added as a pair of page_bottom. In Drupal 7 you need to output $page_top at the top of the HTML body output and $page_bottom at the bottom.

Drupal 6:

Drupal 7:

If you define custom regions, it is important to remember that you need to include the page_top and page_bottom regions in your set of regions.

theme .info file extract:

The page_top and page_bottom regions are hidden, which means they will not show up on the blocks administration interface. When doing site-specific themes, it might also be useful to add more hidden regions (to provide ways for modules to add output to more places in the theme without defining blocks showing up on the blocks interface), you can do that via the regions_hidden[] .info file array which is new to Drupal 7:

theme .info file extract:

$left and $right variables are now $sidebar_first and $sidebar_second; CSS IDs also changed

(issue) In Drupal 6, the sidebar variable names were $left and $right. In Drupal 7 they are $sidebar_first and $sidebar_second.

6.x

7.x

This means that associated CSS IDs have changed as well:

[docs updated]

$picture changes to $user_picture, and the CSS class ‘picture’ to ‘user-picture’

The variable and the CSS class have been renamed to be more descriptive.

Drupal 6 (user-picture.tpl.php):

Drupal 7:

New classes available to hide content in an accessible manner

Two new system classes have been added to be used for the purpose of hiding elements, .element-hidden and .element-invisible. Each class serves its own unique purpose:

.element-hidden

The role of this class is to hide elements from all users. This class should be used for elements which should not be immediately displayed to any user. An example would be a collapsible fieldset that will be expanded with a click from a user. The effect of this class can be toggled with the jQuery show() and hide() functions.

.element-invisible

The role of this class is to hide elements visually, but keep them available for screen-readers. This class should be used for information required for screen-reader users to understand and use the site where visual display is undesirable. Information provided in this manner should be kept concise, to avoid unnecessary burden on the user. This class must not be used for focusable elements (such as links and form elements) as this causes issues for keyboard only or voice recognition users.

JavaScript variable Drupal.jsEnabled has been removed

In previous versions of Drupal, you could do the following in JavaScript code, to verify that JavaScript was enabled and sufficient for Drupal to do its “behaviors”:

In Drupal 7, the Drupal.jsEnabled variable is no longer defined, and there is no work-around — the assumption is that JQuery things will simply not work if they don’t work, so there’s no reason to check ahead of time. See issue #444352: Kill the killswitch for discussion.

PHPTemplate suggestion wildcard

(issue) PHPTemplate offers suggestions based on the URI integers. In Drupal 6, you have to theme the previous suggestion or the specific one eg.

page-user.tpl.php or page-user-1.tpl.php

This was cumbersome because to theme all the user pages, it meant overriding page-user.tpl.php, which in turn themed the user login page.

The new suggestion wildcard for integer arguments accepts % suggestions page–user–%.tpl.php. Suggestions which have additional arguments like page–user–edit.tpl.php remain the same; this simply differentiates the suggestions with and without integer args.

Include theme definition explicitly on element when using system_elements()

In system_elements(), it is now necessary to include the theme definition explicitly on the element, rather than allowing the system to “fallback” and assign it automatically. Refer toissue 127731.

Added markup to make installation task progress perceivable with screen-reader and CSS disabled

(Issue)

In D6 there is no markup to indicate which of the installation tasks were complete, or which task is active, these differences are only shown with CSS styling.

In Drupal 7 markup has been added to theme_task_list() to:

Add a heading that is only visible to screen-reader users and when CSS is disabled.

<h2>Installation tasks</h2>

Append text “(done)” and “(active)” to relevant tasks in the task list, visible only to screen-reader users and when CSS is disabled.

<span>(done)</span>

Add an invisible heading to theme_breadcrumb()

(Issue)

In D6 there is no markup to indicate the role or purpose of the breadcrumb links to users of screen-readers.

Drupal 7 provides a heading before the list of breadcrumb links, which is visible to screen-reader users and when CSS is disabled. This heading has been added to theme_breadcrumb() and to garland_breadcrumb().

<h2>You are here</h2>

Changes to alt and title attribute for the RSS feed icon

In D6 the alt attribute of the RSS feed icon themed by theme_feed_icon() was statically set to “Syndicate content” and the title attribute of the icon was set to the string passed to the function in the $title parameter.

Drupal 7 sets the alt attribute of the image and the title attribute of the anchor for the RSS feed to the same text. The text is comprised of “Subscribe to ” + the $title string passed to theme_feed_icon().

Search box moved from theme layer to blocks

In previous versions, the search_box was displayed by the theme using $search_box.

Drupal 7 removes this. The search form is simply part of the block system. Theme developers will want to remove all references to $search_box in the theme, and may need to change CSS to handle the search box in the block.

Site maintainers upgrading sites from Drupal 6 to Drupal 7 will want to add the search form block to their site.

Changes to menu tree, link and tab rendering functions

(Issue)

function menu_tree_output() now returns a structured array of data that can be rendered to html using drupal_render().

Function theme_menu_item_link() and theme_menu_item() have been removed and are effectively replaced by in terms of rendering a menu tree by theme_menu_link(). This is the default function used to render each link in the tree returned by menu_tree_output().

Function theme_menu_local_task() takes different parameters and has a companiontheme_menu_local_action() that did not exist in Drupal 6. Both of these function take as the first parameter a menu link array with ‘title’, ‘href’, and ‘localized_options’ keys. In Drupal 6, the first parameter was a string. The change to array was made in order to allow removal of theme_menu_item_link(). The second parameter theme_menu_local_task() of is still a boolean, $active.

theme_links() has a new parameter $heading for accessibility

Issue: #364219: Navigation menus should be preceded by headings of the appropriate level (usually <h2>).

To meet Web Content Accessibility Guidelines (WCAG) requirements, HTML headings should be used before all content sections, which includes lists of links such as menus. The headers ensure that there is a quick way for assistive technology users to browse through the content; however, most visual users do not need headers on navigation lists, because they can get a sense of the structure by how they are arranged visually on the page. So, the recommendation is to add a header with the “element-invisible” CSS class on it, so that only assistive technology users will notice the header.

It is also important that the header level used (H2, H3, etc.) be appropriately nested in the heading hierarchy. So, it is not recommended to just blindly add an H2 header before each list.

For that reason, the theme_links() function, which is normally called via theme(‘links’, …), has a new third parameter $heading to add the required heading to a list of links.

For example – Drupal 6 in a typical page.tpl.php file:

Drupal 7:

This will result in a semantically correct and accessible secondary menu in Drupal 7, because an invisible heading has been added:

For more information:

• Accessibility in Drupal
• Theming accessibility guide
• Headings section of theme accessibility guide

theme_get_setting() and THEME_settings() have been improved

In Drupal 6, themes could add custom form elements to their “configure theme settings” page at admin/build/themes/settings/THEMENAME. Themes would need to create a theme-settings.php page in their theme directory and use a function with the following syntax:

In Drupal 7, much more flexibility is given to themes to modify the entire theme settings form. In a theme’s theme-settings.php, themes should now use aTHEMENAME_form_system_theme_settings_alter(&$form, $form_state) function. This gives the same power to themes that modules have if they use hook_form_system_theme_settings_alter(). See the “Forms API Quickstart Guide” and “Forms API Reference” on http://api.drupal.org/api/7, as well as thehook_form_FORM_ID_alter() docs to learn the full flexibility of Forms API. Note that themes can no longer use the phptemplate_ prefix to the function; you’ll need to use the actual name of your theme as the prefix.

Here’s an example if you had a “foo” theme and wanted to add a textfield whose default value was “blue bikeshed”:

In order to set the default value for any form element you add, you’ll need to add a simple line to your .info file: settings[SETTING_NAME] = DEFAULT_VALUE. For our foo theme, you’d need to edit the foo.info file and this line:

In any of your theme’s php files, you can retrieve the value the user set by calling:

theme_form_required_marker()

(issue) The markup for generating the marker on required form elements is now handled by a separate function, theme_form_required_marker() instead of just being included as part of the work performed by theme_form_element(). This allows you to reuse this markup in other places or to modify the markup without changing all of theme_form_element()

theme_link()

(issue) The markup for generating a link is now handled by a theme function, theme_link(), instead of being hard-coded into the l() function. This allows you to implement a preprocess function or an override function in order to customize the markup of any link. Doing so may slow down Drupal pages that have many links, so it is recommended to evaluate the benefit vs. the performance trade-off, but the capability exists for sites and themes that need it. This theme function is for customizing the markup of links, generically. Other theme functions exist for customizing links based on context. For example, to customize menu links, override theme_menu_link() instead.

Example of hook_preprocess_link():

Example of overriding theme_link():

Skip to main content links in core themes

(Issue)
To meet Web Content Accessibility Guidelines (WCAG) 2.0 guideline 2.4.1 Bypass Blocks, web pages need to have a link to help keyboard only users and screen readers more easily access the main content of a website.

Garland’s implementation is hidden visually, but keep them available for screen-readers. Furthermore, if a keyboard only user tabs through a site the link will become visible as it gains focus.

To hide the skip navigation you can use one the new classes available to hide content in an accessible manner.

Alter hooks available to themes

(Issue) Hooks that are used to alter content before being displayed on the page are now available to themes. Some important ones to note are:

• hook_page_alter
• hook_form_alter
• hook_js_alter
• hook_css_alter

Note that although technically all of the alter hooks are exposed to the theme, only a given number of them will actually work due to the way the Drupal bootstrap works. If you need to use hook_menu_alter, for example, you’ll have to use a module. These hooks can be exposed in template.php.

Drupal 7.x:

System module stylesheets have been reorganized to separate behavior-supporting styles from presentational styles.

(Issue) Summary of changes:

• Styles from default.css were merged into system.css and default.css was removed.
• system-behavior.css was added to house behavior-supporting styles, ie. styles for autocomplete, drag and drop, collapsible fieldsets, progress bars, etc.

New theme setting for displaying the Shortcut module “add to shortcuts” link

Issue: #674394: The add/remove shortcut buttons look bad and don’t appear in most themes besides Seven

In Drupal 7, you will notice that when the Shortcut module is enabled, the core Seven administration theme displays a “plus” or “minus” sign next to the title of each page (for sufficiently privileged users), which allows that page to be added or removed from the user’s set of shortcuts via a one-click link.

The appearance of this link is controlled by a theme setting. If you want it to display in your theme when the Shortcut module is enabled, add the following line of code to your theme’s .info file:

Specific template overrides of generic templates use a ‘–’ delimiter instead of ‘-’

Issue #678714: Unify use of theme hook / template suggestions, fix clobbering problems, and improve suggestion discovery performance

In Drupal 6, some template files could be overridden in a targeted way. For example, the theme could contain a “node-article.tpl.php” file which would be used for nodes of the article type only. In Drupal 7, these need to be renamed to use a double-hyphen. For example, “node–article.tpl.php”. A single hyphen is still used to separate words: for example, “user-picture.tpl.php” or “node–long-content-type-name.tpl.php”, so the double hyphen always indicates a more targeted override of what comes before the “–”.

Please also see http://drupal.org/update/modules/6/7#theme_hook_suggestions_2 for how this affects preprocess functions if your theme implements those.

CSS files are sometimes loaded with @import, sometimes with LINK tags

(Issue) Prior to Drupal 6, CSS files were added to the page using @import statements inside of STYLE tags. Drupal 6 switched to using LINK tags. With Drupal 7, LINK tags are used when the performance setting to “Aggregate and compress CSS files into one file” is enabled, but @import statements are sometimes used when that setting is disabled. This was needed to work around an Internet Explorer limitation of only being able to load the first 31 tags that add CSS files. See the API documentation for drupal_pre_render_styles() for more details explaining when LINK tags are used and when @import statements are used.

Browser-targeted CSS files can and should be added using drupal_add_css()

(Issue) Drupal 7 adds the ability to specify a ‘browsers’ key when calling drupal_add_css().

Drupal 6:
Garland’s page.tpl.php:

Garland’s template.php:

Drupal 7:
Garland’s template.php:

See the API documentation for drupal_pre_render_conditional_comments() for details on the ‘IE’ and ‘!IE’ keys.

It is recommended for themes to always use drupal_add_css() for adding a CSS file, so that Drupal code knows the exact total number of CSS files being added, information that might be needed for working around Internet Explorer’s limitation of only being able to load the first 31 LINK/STYLE tags. [docs updated]

Targeted overrides (suggestions) available for theme_menu_link() and theme_menu_tree()

(issue) In addition to other changes to menu rendering, a Drupal 7 theme can implement a THEMENAME_menu_tree__MENU_NAME() and/or THEMENAME_menu_link__MENU_NAME() function to override theme_menu_tree()/theme_menu_link() for a specific menu. For example, THEMENAME_menu_link__management() would override theme_menu_link() for links within the “Management” menu. This is similar to how “node–article.tpl.php” overrides “node.tpl.php”.

theme_submenu() was removed

(issue) Drupal core does not provide theme_submenu() anymore.

New $title_prefix and $title_suffix template variables

(issue) Templates in Drupal 7 have two new standard variables, $title_prefix and $title_suffix, which are renderable arrays that contain output intended to be displayed before or after (respectively) the main title tag that appears in the template.

All standard templates that potentially have a title (e.g., nodes, blocks, comments, the main page.tpl.php file, etc.) should render these variables. It is important that the variables be rendered even if the title itself is not being displayed, since the variables might contain important data added by modules (for example, contextual links) associated with the template as a whole.

Example (from page.tpl.php):

theme_node_form() was removed

(issue) Drupal core does not provide theme_node_form() anymore. Node forms now have a CSS classes of .node-form and .node-TYPE-form for facilicate simple node type specific styling of the node form.

node_get_types() renamed to node_type_get_types()

In template.php, replace:

with:

Core themes now contain “package = Core” in their .info files

(issue) Each core theme now contains the line: package = Core in their
.info files. This is a core only property that was added to
to help the Update Manager module identify core modules and themes. It should
not be used in custom or contributed themes.

search-result.tpl.php now uses proper H3 headings for search result titles

(issue) H3 heading elements are now used to wrap each search result title to allow for heading based navigation for keyboard only users (accessibility improvement). This required a change from a DL list to an OL list with changes in two templates – search-results.tpl.php and seach-result.tpl.php.

(second issue) Rendering was pushed to the last possible moment in search results theming, resulting in more changes to these templates and the pre-processing functions. One note: the $type variable is now $module (this variable is not used in the default search result markup).

Drupal 6 markup for search-results.tpl.php:

Drupal 7 markup for search-results.tpl.php:

Drupal 6 markup for search-result.tpl.php:

Drupal 7 markup for search-result.tpl.php:

The corresponding pre-processing functions for search results have also changed.

The name attribute in a and map elements is invalid

(issue) Due to Drupal 7′s XHTML+RDFa 1.0 doctype (which inherits the HTML 1.1 doctype), the HTML output should be compatible with XHTML 1.1, in particular there should be no nameattribute in the a and map HTML elements.

6.x

7.x

PHPTemplate is now the default theme engine

In Drupal 6, specifying the theme engine in .info files was required:
engine = phptemplate

In Drupal 7, this line is no longer necessary because it is assumed by default. You may safely remove it from your .info file.

Themes using the Smarty engine are not affected, and PHP only themes may still be used by specifying “theme” as the engine:
engine = theme

Share on Facebook

Making a custom Drupal theme is actually quite easy. A Drupal theme is just a few PHP files, a CSS file, and an info file. I prefer the PHPtemplate theme engine (the default one) but you have several choices. See the bottom of this post for a link to the official Drupal Theme Developer’s Guide which has information on other Drupal template engines.

The following information was originally written for Drupal 4.7, but has been updated for Drupal 6 on March 4, 2009.

Navigate to your /themes directory. You should have a theme there called /bluemarine. We will use that as an example.

NOTE: before you edit any files you will copy the theme to another directory and rename it. Your custom themes go in the directory /sites/all/themes/. Details about that come later in this tutorial.

Here is a list of the files in the Drupal 6′s Bluemarine theme:

The Files of a Drupal Theme

• bluemarine.info — A required file that is new to Drupal 6 which provides information about the theme.
• page.tpl.php — The main template that defines the content on most of the page.
• style.css — The CSS file that sets the CSS rules for the template.
• node.tpl.php — This file defines the content of the nodes.
• block.tpl.php — Defines the content of the blocks.
• comment.tpl.php — Defines the content of the comments.
• logo.png — Your logo, if you are using one.
• screenshot.png — This is a screenshot of your theme that is used in the admin panel and in the user account settings if you have enabled more than one theme so that visitors can choose which theme they want to use.
• box.tpl.php — puts a box around things like comments. See also http://drupal.org/node/11814.
• style-rtl.css — this file is new to Drupal 6′s Bluemarine. I think it’s a CSS for right to left languages and can be ignored if you’re using a left-to-right language like English.

page.tpl.php and style.css

The page.tpl.php and style.css files are the main files for your Drupal theme. The page.tpl.php is a mix of HTML and PHP. Look at the file and notice which snippets of PHP are used where. For example, the following snippet from the page.tpl.php file inserts the site’s <head> information. Just copy that snippet into your own custom Drupal template.

<head>
  <title><?php print $head_title ?></title>
  <?php print $head ?>
  <?php print $styles ?>
  <?php print $scripts ?>
  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>

The following code from the Bluemarine page.tpl.php file use PHP if statements to print out optional information such as primary links, secondary links, and site slogan. You control whether those display in the Drupal control panel. The Bluemarine template uses tables, but you can easily remove the tables and make it a 100% CSS-based template.

<table border="0" cellpadding="0" cellspacing="0" id="header">
  <tr>
    <td id="logo">
      <?php if ($logo) { ?><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>">
<img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?>
      <?php if ($site_name) { ?>
<h1 class='site-name'><a href="<?php print $base_path ?>"
title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
      <?php if ($site_slogan) { ?><div class='site-slogan'><?php print $site_slogan ?></div><?php } ?>
    </td>
    <td id="menu">
      <?php if (isset($secondary_links)) { ?>
<div id="secondary"><?php print theme('links', $secondary_links) ?></div><?php } ?>
      <?php if (isset($primary_links)) { ?>
<div id="primary"><?php print theme('links', $primary_links) ?></div><?php } ?>
      <?php print $search_box ?>
    </td>
  </tr>
  <tr>
    <td colspan="2"><div><?php print $header ?></div></td>
  </tr>
</table>

The Drupal styles.css File

The style.css file is straightforward. I recommend the Firefox Web Developer Toolbar for creating the style.css file. Use the toolbars option Display ID & Class Details in the Information menu to view the CSS classes and ID’s that Drupal is generating. Then add your own CSS rules to the style.css file.

Other Drupal Theme Files

Other files in the Drupal theme are block.tpl.php, box.tpl.php, comment.tpl.php, and node.tpl.php. Each one controls the layout of certain parts of the template. The comment.tpl.php defines the comment layout as shown below. It is fairly straightforward PHP: “If there is a user picture, print the user picture, etc.

  <div class="comment<?php if ($comment->status == COMMENT_NOT_PUBLISHED) print ' comment-unpublished'; ?>">
    <?php if ($picture) {
    print $picture;
  } ?>
<h3 class="title"><?php print $title; ?></h3>
<?php if ($new != '') { ?><span class="new"><?php print $new; ?></span><?php } ?>
    <div class="submitted"><?php print $submitted; ?></div>
    <div class="content"><?php print $content; ?></div>
    <div class="links">&raquo; <?php print $links; ?></div>
  </div>

Your First Custom Drupal Theme

Just make a copy of the default Bluemarine template and put it in your Drupal /sites/all/themes/ directory. That directory doesn’t exist by default, so you should create it if you haven’t already. See the README file in /sites/all/ for more information. Rename the copy of Bluemarine to the name of your new theme. Enable the new theme.

NOTE: In Drupal 6 there are also theme info files. To change the name of the theme you’ll also need to change the name in the bluemarine.info file:

; $Id: bluemarine.info,v 1.4 2007/06/08 05:50:57 dries Exp $
name = Bluemarine
description = Table-based multi-column theme with a marine and ash color scheme.
version = VERSION
core = 6.x
engine = phptemplate

Then strip most of the HTML out of the page.tpl.php file and replace it with the HTML that you would like for your theme. Leave the PHP, modifying it as desired. If you are using Linux for Web development, you can use Quanta Plus as an editor to edit your template files directly on the server. Each time you save the file in Quanta Plus, the remote copy of the file will be updated.

Use the Firefox Web Developer Toolbar’s Display ID & Class Details feature to view CSS information on your new template that you are viewing the the browser. Either start a new style.css file from scratch, or modify the existing one to get the template the way you would like. To edit the display of blocks, nodes, and comments, edit the block.tpl.php, node.tpl.php, and comment.tpl.php files respectively.

When you are finished with your template, take a screenshot and resize it to about 150×90 pixels. Upload it to your theme directory as screenshot.png.

Drupal Template Variables

The PHP snippets in the examples above are just printing PHPtemplate variables. A complete list of available PHPtemplate variables that you can use in your template can be found on Drupal.org’s PHPtemplate variables page. Below are the available variables from 24 July 2007:

$breadcrumb

HTML for displaying the breadcrumbs at the top of the page.

$closure

Needs to be displayed at the bottom of the page, for any dynamic javascript that needs to be called once the page has already been displayed.

$content

The HTML content generated by Drupal to be displayed.

$directory

The directory the theme is located in , e.g.

themes/box_grey or themes/box_grey/box_cleanslate.

$footer_message

The footer message as defined in the admin settings.

$head

HTML as generated by drupal_get_html_head().

$head_title

The text to be displayed in the page title.

$help

Dynamic help text, mostly for admin pages.

$is_front

True if the front page is currently being displayed. Used to toggle the mission.

$language

The language the site is being displayed in.

$layout

This setting allows you to style different types of layout (‘none’, ‘left’, ‘right’ or ‘both’) differently, depending on how many sidebars are enabled.

$logo

The path to the logo image, as defined in theme configuration.

$messages

HTML for status and error messages, to be displayed at the top of the page.

$mission

The text of the site mission.

$node

(5.x and after only)If you are in page.tpl.php displaying a node in full page view then $node is available to your template.

$onload_attribute

(4.7 and older only) Onload tags to be added to the head tag, to allow for autoexecution of attached scripts.

$primary_links (array)

An array containing the links as they have been defined in the phptemplate specific configuration block.

$scripts

(5.x and after only) HTML to load the JavaScript files and make the JS settings available. Previously, javascript files are hardcoded into the page.tpl.php

$search_box

True(1) if the search box has been enabled.

$search_button_text

(4.7 and older only)Translated text on the search button.

$search_description

(4.7 and older only)Translated description for the search button.

$search_url

(4.7 and older only)URL the search form is submitted to.

$secondary_links (array)

An array containing the links as they have been defined in the phptemplate specific configuration block.

$sidebar_left

The HTML for the left sidebar.

$sidebar_right

The HTML for the right sidebar.

$site

The name of the site, always filled in.

$site_name

The site name of the site, to be used in the header, empty when display has been disabled.

$site_slogan

The slogan of the site, empty when display has been disabled.

$styles

Required for stylesheet switching to work. This prints out the style tags required.

$tabs

HTML for displaying tabs at the top of the page.

$title

Title, different from head_title, as this is just the node title most of the time.

There are also other variables available for your Drupal theme. A good list can be found in Chapter 8 of the essential book Pro Drupal Development. I believe that Chapter 8 is a free sample download.

Also check out these two books from Packt Publishing: Drupal 5 Theming and Building powerful and robust websites with Drupal 6.

Share on Facebook

RAD: Seam development with Eclipse and Tomcat Step-by-Step-Tutorial Screencast

Posted by: techiexchange on: November 11, 2007

Jboss Seam, one of the most innovative full-stack web application framework in Java EE era.

Letz dive in to the tutorial directly without explaining more about Seam.

In order to develop an enterprise application, one must have
an application server installed locally, which is a big pain
when considering system resource and performance. During the
development period developer always perfer to have his
code-hotdeploy time as short as possible, which rapidly
increases his development and production. But this is not
easily achieved when application servers are used during
development. An alternative is to use web servers which are
very light when compared to Application servers. Seam has a
good support for Tomcat webserver.

This tutorial focuses Seam development under Tomcat webserver without support for EJB, that means Seam with POJO and JPA+Hibernate as Persistence provider.

Main goal of this tutorial is to achieve RAD-Rapid Application Development with Seam, Tomcat and Eclipse.

Requirements for Seam development envirnoment:

Download latest Seam release
Download Tomcat 5.5 or Tomcat 6
Download latest Eclipse
Download Eclipse-Tomcat-Sysdeo plugin

This is a screencast (static) showing all the screenshots without explanation.

Here we go….

Extract Seam 2 GA distribution on local hard disk (see Figure 1)

JPA example from Seam 2 GA distribution (see Figure 2)

Build JPA example for Tomcat 5.5 by using ant (make sure that ANT already installed) command:ant tomcat55

Building JPA WAR file (see Figure 3)

Once build successfull, then you can find the war file inside dist-tomcat55 folder (see Figure 4)

Now import WAR file to Eclipse to make an Eclipse project (see Figure 5)

In order to import WAR file select Web -> WAR file from Eclipse import console (see Figure 6)

Choose absolute path of jboss-seam-jpa.war file and press next (see Figure 7)

Import all libs from WEB-INF/lib (don’t select any libs) (see Figure 8)

Here’s new project created in Eclipse workspace (see Figure 9)

Create classes inside WEB-INF to build src files (see Figure 10)

Configure the build path so that src folder takes correct classes folder (see Figure 11)

Choose classes folder as default output folder (see Figure 12)

Copy src from Seam-JPA example (see Figure 13)

Paste into the src folder in Eclipse (see Figure 14)

Now src are shown in the hierarchy but with errors (see Figure 15)

Delete ImportedClasses folder in root of Project workspace (see Figure 16)

In order to remove src errors in the project import TestNG lib to WEB-INF/lib (see Figure 17)

Now Project src has been done without any errors (see Figure 18)

Configure Tomcat Sysdeo plugin to installed home directory of Tomcat (see Figure 19)

See Eclipse toolbar for Sysdeo-Tomcat shortcuts – Start, Shutdown, Restart (see Figure 20)

Tell the created Project (jboss-seam-jpa) that it is a web project to Sysdeo plugin (Project ->rightclick-Properties-> Tomcat) (see Figure 21)

Now update/define about project’s context in Tomcat (server.xml will be updated) (see Figure 22)

Open context.xml (inside Webcontent/META-INF) and copy Resource tag (see Figure 23)

Goto server.xml (Tomcat_Home/conf) and see whether project context is defined (see Figure 24)

Paste Resource tag (make sure that Resource is closed properly) copied from context.xml as child tage to Context tag in server.xml (see Figure 25)

In order to work with HSQL DB, copy hsql.jar from Seam distribution to Tomcat-Home/common/lib folder (see Figure 26)

Now all configuration things are over, so Start Tomcat inside Eclipse by pressing Start icon on Eclipse-Sysdeo toolbar (see Figure 27)

You can see the console output of Tomcat saying server started (see Figure 28)

Test whether the application started without any errors by opeing a browser and navigating

http://localhost:tomcatport/jboss-seam-jpa

Note that the footer of the front page. We’re going to change that in the next step. (see Figure 29)

Open home.xhtml (front page of the application) located inside WebContent and check the footer (see Figure 30)

Edit footer note and save the page (see Figure 31)

Now goto opened browser where application is already running, and press Refresh or F5 to reload the page.
That’s it.. without starting the server your code got hot deployed and web page was reloaded. (see Figure 32)

Please note that Tomcat should be used only during development phase in order to increase the development productivity, use some application server to deploy production applications.

I hope this tutorial gives a kick-off project template for Seam with POJO+JPA+Hibernate based application.

Share your thoughts.

Share on Facebook

The query for direction is a string which looks like “from: departure address to: destination address”.This query will be loaded by the Directions object.

Here’s a simple example (two separate text boxes for entering the from and to addresses ,the root panel contains a grid which includes the map having the route marked and the direction panel) :

package com.gwtmaps.project.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.maps.client.MapWidget;
import com.google.gwt.maps.client.control.LargeMapControl;
import com.google.gwt.maps.client.geocode.DirectionQueryOptions;
import com.google.gwt.maps.client.geocode.DirectionResults;
import com.google.gwt.maps.client.geocode.Directions;
import com.google.gwt.maps.client.geocode.DirectionsCallback;
import com.google.gwt.maps.client.geocode.DirectionsPanel;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;

/**
* Entry point classes define onModuleLoad().
*/
public class GWTDirections implements EntryPoint {

/**
* The message displayed to the user when the server cannot be reached or
* returns an error.
*/
private static final String SERVER_ERROR = “An error occurred while ”
+ “attempting to contact the server. Please check your network ”
+ “connection and try again.”;

/**
* Create a remote service proxy to talk to the server-side Greeting service.
*/
private final GreetingServiceAsync greetingService = GWT
.create(GreetingService.class);

/**
* This is the entry point method.
*/
public void onModuleLoad() {

final Grid grid = new Grid(1, 2);
grid.setWidth(“100%”);
grid.getCellFormatter().setWidth(0, 0, “74%”);
grid.getCellFormatter().setVerticalAlignment(0,0, HasVerticalAlignment.ALIGN_TOP);
grid.getCellFormatter().setWidth(0, 1, “24%”);
grid.getCellFormatter().setVerticalAlignment(0,1, HasVerticalAlignment.ALIGN_TOP);

final Button sendButton = new Button(“Send”);
final TextBox fromField = new TextBox();
fromField.setText(“Enter Departure”);
fromField.setTitle(“From:”);

final TextBox toField = new TextBox();
toField.setText(“Enter Destination”);
toField.setTitle(“To:”);
// We can add style names to widgets
sendButton.addStyleName(“getMap”);

// Add the nameField and sendButton to the RootPanel
// Use RootPanel.get() to get the entire body element
RootPanel.get().add(fromField);
RootPanel.get().add(toField);
RootPanel.get().add(sendButton);

// Focus the cursor on the name field when the app loads
fromField.setFocus(true);
fromField.selectAll();

// Create a handler for the sendButton and nameField
class MyHandler implements ClickHandler, KeyUpHandler {

/**
* Fired when the user clicks on the sendButton.
*/
public void onClick(ClickEvent event) {
//remove preexisting maps
removeExistingMaps();

MapWidget map = new MapWidget();
map.setSize(“500px”, “500px”);

// Add some controls for the zoom level
map.addControl(new LargeMapControl());

//calculate direction

grid.setWidget(0, 0, map);
DirectionsPanel directionsPanel = new DirectionsPanel();
grid.setWidget(0, 1, directionsPanel);
directionsPanel.setSize(“100%”, “100%”);
// Add the map to the HTML host page
RootPanel.get().add(grid);

DirectionQueryOptions opts = new DirectionQueryOptions(map,directionsPanel);
String query = “from: ” +fromField.getText() + ” to: ” + toField.getText();

Directions.load(query , opts, new DirectionsCallback() {
public void onFailure(int statusCode) {

GWT.log(“Failed to load directions: Status ” + statusCode, null);
}

public void onSuccess(DirectionResults result) {
GWT.log(“Succesfully load directions “, null);
}
});

}
private void removeExistingMaps() {
for( int i=1;i
if(RootPanel.get().getWidget(i).getClass().equals(MapWidget.class))
{
MapWidget mapWidget = (MapWidget) RootPanel.get().getWidget(i);
RootPanel.get().remove(mapWidget);
}
}
}
public void onKeyUp(KeyUpEvent event) {

}

}
MyHandler handler = new MyHandler();
sendButton.addClickHandler(handler);

}

}

Enjoy

Share on Facebook

SDK The Google Web Toolkit SDK contains the core libraries and compiler that you need to write web applications. See the Release Notes for this latest version.

Download SDK

Speed Tracer Speed Tracer is a Chrome Extension that allows you to pinpoint performance problems in your web applications.

Download Speed Tracer

Plugin for Eclipse The Google Plugin for Eclipse provides IDE support for Google Web Toolkit and App Engine web projects.

Download Plugin

GWT Designer Create rich web applications with GWT Designer, a powerful set of Eclipse-based development tools that enables Java developers to quickly create Ajax web applications using the Google Web Toolkit (GWT).

Download GWT Designer

Other Java Tools

WindowBuilder Pro Develop Java graphical user interfaces in minutes for Swing, SWT, RCP, XWT and GWT with WindowBuilder Pro’s WYSIWYG, drag-and-drop interface. Use wizards, editors and intelligent layout assist to automatically generate clean Java code, with the visual design and source always in sync.

Download WindowBuilder Pro

WindowTester Pro Streamline testing of Java rich client applications with WindowTester Pro, including tools for automated recording, test generation, code coverage and playback of GUI interactions that can occur within an application. WindowTester Pro includes support for SWT and Swing.

Download WindowTester Pro

CodePro AnalytiX Employ the comprehensive automated software code quality and security analysis toolkit CodePro AnalytiX to automatically improve software quality, reliability, and maintainability in developer applications.

Download CodePro AnalytiX

Share on Facebook

Autocompleter GWT Widget http://jroller.com/page/glongman?entry=gwt_autocompleter Check out the code for this Autocompleter GWT widget.

Canvas Widget http://gwt.components.googlepages.com/canvas Download the Canvas widget and learn how to use it in your GWT classes.

GWT-Components http://sourceforge.net/projects/gwt-components Download and contribute to the GWT-Components—a collection of GWT extensions.

GWT Addons http://sourceforge.net/projects/gwtaddons Download the GWT Addons including a rich text editor and more.

SpringGWT http://sourceforge.net/projects/spring-gwt Download the SpringGWT for use in client-side application development using the GWT.

Project Dune Quality Support System http://sourceforge.net/projects/pdune Download the Project Dune Quality Support System, built with the Google Web Toolkit and other technologies.

Java Applet Web Server (AppletServer) http://sourceforge.net/projects/appletserver Download the Java Applet Web Server (AppletServer). Use the GWT and allows you to run Java applets on the server-side and automatically generate AJAX for the browser.

Google Web Toolkit Hacks http://sourceforge.net/projects/gwt-hacks Download the Google Web Toolkit Hacks. Includes widgets, plugins, AJAX applets and games based on the GWT.

Openfount http://www.openfount.com/ Download the Openfount Google Web Toolkit. Features include XML classes, SOAP classes, crypto classes, Base64 classes, Amazon S3 classes, Amazon Simple Queue Service classes, and SOAP classes for the Openfount Queued Server.

IntelliJ IDEA Studio Plugin http://www.jetbrains.net/confluence/display/IDEADEV/GWT+Studio+plugin Download the GWT Studio plugin for IntelliJ IDEA. Site includes a demo, a description of the GWT Studio and a walkthrough of its features.

Eclipse GWT Plugin http://sourceforge.net/projects/eclipse-gwt Download the Eclipse GWT plugin.

Googlipse http://www.googlipse.com/ Googlipse is an Eclipse plugin for the Google Web Toolkit. Find downloads, documentation, a FAQ and more.

GWT Widget Library http://gwt-widget.sourceforge.net/ Check out the GWT Widget Library. Includes widgets, utilities and wrappers. Also find demos, a source reference and more.

Open Source Widgets http://gwt.components.googlepages.com/ Collection of open source Google Web Toolkit widgets.

Google Web Toolkit Widget Gallery http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.UserInterface.WidgetGallery.html Google Web Toolkit’s Widget Gallery. Here you will find widgets for a normal button, a radio button, a check box, text box, password text box, text area, hyperlink, list box, menu bar , tree, table, tab bar, dialog box, popup panel, stack panel, horizontal panel, vertical panel, flow panel, dock panel, and tab panel.

Share on Facebook

“Step by Step: A Mortgage Calculator using GWT” http://www.mooreds.com/weblog/archives/000348.html Tutorial: “Step by Step: A Mortgage Calculator using GWT,” by Dan Moore of Moore Consulting.

GWT Integration Tutorial http://angel.hurtado.googlepages.com/tutorialgwt2 Tutorial discusses how to integrate GWT with an Apache, MySQL and PHP back end.

IntelliJ Idea Animated Demo http://download.jetbrains.com/idea/GWT.htm?version=1 Animated demo walks through the configuration of IntelliJ Idea for the Google Web Toolkit and shows how to write a GWT image viewer application.

“Kickstarting Google Web Toolkit on the Client Sid http://today.java.net/pub/a/today/2006/06/27/client-side-google-web-toolkit.html Tutorial: “Kickstarting Google Web Toolkit on the Client Side” by Simon Morris, provides an introduction to client side development with the GWT. Includes walkthroughs of three projects with sample code.

“Working with the Google Web Toolkit” http://www.onjava.com/pub/a/onjava/2006/05/31/working-with-google-web-toolkit.html Tutorial: “Working with the Google Web Toolkit” by Robert Cooper. Topics include getting started with the GWT, project basics, building the table, the history class, the maven module and license concerns. Includes source code for the examples.

“Google Web Toolkit” http://www.devx.com/webdev/Article/31868 Tutorial: “Google Web Toolkit: AJAX Buzz Meets Real World Development: With its Swing-like development framework and its awe-inspiring compiler/debugger, the GWT eases AJAX development,” by Gautam Shah. Provides introductions to the Google Web Toolkit, AJAX development, GWT components and GWT RPC. Includes source code.

“Jump Start Your AJAX Development with…” http://google.wikia.com/wiki/Jump_Start_Your_AJAX_Development_with_the_Google_Web_Toolkit Tutorial: “Jump Start Your AJAX Development with the Google Web Toolkit,” by Tyrell Perera. Topics include an introduction to the GWT, Creating an Eclipse project, importing the project into the Eclipse IDE, running “hello World,” and translating the “Hello World” into JavaScript.

“Google Web Toolkit: the Breakdown” http://www.juixe.com/techknow/index.php/2006/05/21/google-web-toolkit-tutorial-the-break-down/ Tutorial: “Google Web Toolkit: the Breakdown” walks through the development of an AJAX web application using the Google Web Toolkit.

“Ajax for Java Developers: Exploring the Google… http://www-128.ibm.com/developerworks/library/j-ajax4/index.html?ca=dgr-lnxw01GWT4Ajax Tutorial: “Ajax for Java Developers: Exploring the Google Web Toolkit: Develop Ajax applications from a single Java codebase,” by Philip McCarthy.

“Google Web Toolkit” http://www.xml.com/pub/a/2006/07/12/google-web-toolkit-ajax-java-ant-xml.html Tutorial: “Google Web Toolkit” by Bruce Perry. Discusses how to develop an AJAX application for Mac OS X using the GWT, Apache Ant, the Tomcat 5.0, and IntelliJ IDEA integrated development environment.

“Working with the Google Web Toolkit” http://www.onjava.com/pub/a/onjava/2006/05/31/working-with-google-web-toolkit.html Tutorial: “Working with the Google Web Toolkit” by Robert Cooper. Discusses what the GWT is and how to get started using it.

“Getting started with the Google Web Toolkit” http://blogs.zdnet.com/Burnette/?p=122 Blog entry: “Getting started with the Google Web Toolkit,” by Ed Burnette, shows you how to get the GWT set up so that you can begin AJAX development.

“Google Web Toolkit Getting Started Guide” http://code.google.com/webtoolkit/gettingstarted.html Tutorial: “Google Web Toolkit Getting Started Guide.” Discusses installing the GWT, building a sample application, running in hosted mode, running in Web mode, and creating an application from scratch with and without Eclipse.

Share on Facebook

RSS Reader Application http://ajax.lodgon.com/demo1.html RSS Reader application built with the GWT. Includes a demo and source code.

RPC Hello Source Code and Walkthrough http://ajax.lodgon.com/hello.html Source code and walkthrough of an RPC Hello example.

GWT Application Source Code http://roberthanson.blogspot.com/2006/06/trivial-gwt-example.html Source code for a simple GWT application.

GWT Application Sample Code http://www.bigbold.com/snippets/tag/gwt Sample code for a simple GWT application using the Mouse Wheel feature.

Photo Sharing Site http://www.mynetimages.com/ Free photo sharing site developed using the Google Web toolkit.

Kitchen Sink Example Project http://code.google.com/webtoolkit/documentation/examples/kitchensink/ Kitchen Sink example project built with the Google Web Toolkit using the UI widgets and history management features. This example demonstrates features including buttons, menus, images, layouts, lists, popups, tables, text, trees, frames and tabs. Includes a demo of the application and source code.

JSON RPC Example Project http://code.google.com/webtoolkit/documentation/examples/jsonrpc/ JSON RPC example project built with the Google Web Toolkit using the UI widgets, JSNI (JavaScript Native Interface) and RPC features. Includes a demo of the application and source code.

Desktop App Clone Example Project http://code.google.com/webtoolkit/documentation/examples/desktopclone/ Desktop App Clone example project built with the Google Web Toolkit using the UI widgets and history management features. Includes a demo of the application and source code.

Dynamic Table Example Project http://code.google.com/webtoolkit/documentation/examples/dynamictable/ Dynamic Table example project built with the Google Web Toolkit using the UI widgets and polymorphic RPC features. Includes a demo of the application and source code.

“Hello World” Example http://code.google.com/webtoolkit/documentation/examples/helloworld/ “Hello World” example project built with the Google Web Toolkit using the UI widgets feature. Includes a demo of the application and source code.

Google Web Toolkit Example Applications http://code.google.com/webtoolkit/documentation/examples/ Google Web Toolkit Example Applications page includes several sample applications built with the GWT. View a demo of the application, download the source code and check out the list of GWT features used to build the application.

Animated Poker http://www.gpokr.com/ Animated poker game built using the Google Web Toolkit.

Hangman http://octagonsoftware.com/home/mark/gwthangman/ Check out this game of hangman, by Mark Roth, built using the Google Web toolkit.

Share on Facebook