SmartGWT Showcase - Featured Sample "Master Detail" - trying to rebuild in NetBeans - ListGrid and Label too narrow
Stefan Scott Alexander
I am trying to use NetBeans 6.8 on my machine to build and run the
Featured Sample - Master Detail from the SmartGrid 2.0 showcase
located here:
http://www.smartclient.com/smartgwt/showcase/#featured_master_detail
The project compiles and loads, but the GridList is too narrow: only
about 1 inch (about 2 cm) wide.
The label above it ("Showing items in Category 'Rollfix Glue") is also
too narrow.
The 'Update' Form below the ListGrid is the last item in the VLayout,
and it displays wide enough to be legible (although it does display
somewhat narrower than in the on-line showcase mentioned above). Maybe
it displays fairly wide due to the widgets inside it which may be
forcing it to be wide enough to display them all.
Is it necessary to copy some additional CSS file(s) into the project
folder? Or is there some other thing that needs to be done in order
for the ListGrid and the Label above it will display with the correct
width?
+++ +++ +++
I am totally new to NetBeans and SmartGWT, but over the past few days
of googling and playing around with NetBeans and SmartGWT I've been
able to copy and paste on my local machine to get a few of the
showcase samples to work locally in hosted mode. In each case the
following steps are performed:
- Add the smartgwt-2.0 library to a new NetBeans Java Web App
project,
- Copy and paste source code from the local showcase sample the main
Java class MainEntryPoint.java into the NetBeans project
- Add any additional referenced classes to the project, by creating a
new package (eg, org.yournamehere.client.data) and drag their Java
source files
- Copy the web resources from the SmartGWT 2.0 folder in Windows into
the NetBeans project
- Add a line to Main.gwt.xml and WelcomeGWT.html and build and run.
These steps are described in more detail below.
For two other samples from the Smart GWT Showcase which I tested
earlier (Animation Playpen and Tree Grid) everything worked fine.
However, for the Master Detail sample I am getting this problem where
the Label and the ListGrid are too narrow.
+++ +++ +++
(1) The SmartGWT 2.0 plug-in in NetBeans 6.8 was installed following
the instructions here:
Configuring Netbeans 6.5 to use SmartGWT (1.01b)
http://www.plantstar.org/tutorials/Netbeans_Smartgwt.htm
(2) In NetBeans, a new Java Web Application project was created by
selecting the command 'File > New Project' was the dropdown menu. In
the wizard, under 'Categories' the option "Java Web" was selected, and
under 'Projects' the option "Web Application" was selected, and on the
final screen of the wizard in the 'Frameworks' list, the box "Google
Web Toolkit" was selected. All other fields were left with their
default values.
In the Project tree (in the left-hand pane of the IDE), the node
'Libraries' was right-clicked and the option 'Add Library...' was
selected, and the "smartgwt-2.0" library was added.
In Windows, all the SmartGWT web resource files and folders (except
folder "WEB-INF" and file "index.html") were copied from the directory
where SmartGWT was installed on this machine:
..\smartgwt-2.0\Showcase\war\
to the NetBeans project directory:
..\MasterDetailTest\web\
to make them available to the NetBeans project.
(3) Using the copy of SmartGWT installed on the local machine (eg, in
folder C:\programs), the file:
file:///C:/programs/smartgwt-2.0/samples/Showcase/war/index.html
was opened in the browser as a test, and in the list on the left
'Master Detail' was selected, which displayed the following page:
file:///C:/programs/smartgwt-2.0/samples/Showcase/war/index.html#featured_master_detail
Then, the button 'View Source' was clicked and the code in the Source
file was copied into NetBeans into the Java class file:
MainEntryPoint.java
The original package name set by NetBeans was left unchanged, and the
class name was changed (back) to MainEntryPoint.java.
(4) In NetBeans in the Project tree in the left-hand pane, the option
'Source Packages' was clicked, and a new package
'org.yournamehere.client.data' was created. Then, on the local machine
(where SmartGWT 2.0 has already been installed, eg in C:\programs
\smartgwt-2.0), the following directory was opened in Windows:
C:\programs\smartgwt-2.0\samples\Showcase\src\com\smartgwt\sample
\showcase\client\data
and the four Java source files
ItemData.java
ItemRecord.java
ItemSupplyXmlDS
ItemSupplyLocalDS
were dragged-and-dropped from this Windows directory into the package
org.yournamehere.client.data in the Project tree in the left-hand pane
in NetBeans to add them to the project. Then in the edit pane for
MainEntryPoint.java the mouse was right-clicked and the option 'Fix
Imports' was selected.
(5) The file Main.gwt.xml was modified by adding the following line:
[CODE]
<inherits name="com.smartgwt.SmartGwt" />
[/CODE]
per the instructions here:
SmartClient Forums - SmartGWT Technical Q & A
"how to figure out which modules to inherit"
http://forums.smartclient.com/showthread.php?t=9782
to produce the following result:
[CODE]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//
EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-
source/core/src/gwt-module.dtd">
<module>
<inherits name="com.google.gwt.user.User"/>
<inherits name="com.smartgwt.SmartGwt" />
<entry-point class="org.yournamehere.client.MainEntryPoint"/>
</module>
[/CODE]
(6) The file WelcomeGWT.html was modified by adding the following
line:
[CODE]
<script type="text/javascript"> var isomorphicDir =
"org.yournamehere.Main/sc/"; </script>
[/CODE]
per the instructions here:
guj.com.br - Forums - Desenvolvimento Web - SmartGWT + NetBeans 6.7.1
http://www.guj.com.br/posts/list/137140.java
to produce the following result:
[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name='gwt:module'
content='org.yournamehere.Main=org.yournamehere.Main'>
<title>Main</title>
</head>
<body>
<script type="text/javascript"> var isomorphicDir =
"org.yournamehere.Main/sc/"; </script>
<script type="text/javascript" src="org.yournamehere.Main/
org.yournamehere.Main.nocache.js"></script>
</body>
</html>
[/CODE]
(6)(b) As an alternative, the following lines were also added to
WelcomeGWT.html:
[CODE]
<link rel="stylesheet" href="Showcase.css">
<link rel="stylesheet" href="css/CssStylesSample.css">
[/CODE]
to produce the modified file WelcomeGWT.html:
[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name='gwt:module'
content='org.yournamehere.Main=org.yournamehere.Main'>
<title>Main</title>
<link rel="stylesheet" href="Showcase.css">
<link rel="stylesheet" href="css/CssStylesSample.css">
</head>
<body>
<script type="text/javascript"> var isomorphicDir =
"org.yournamehere.Main/sc/"; </script>
<script type="text/javascript" src="org.yournamehere.Main/
org.yournamehere.Main.nocache.js"></script>
</body>
</html>
[/CODE]
However, this also failed to make the Label and the ListGrid display
with the correct width.
+++ +++ +++
SmartGWT is a very well-designed Ajax package wrapping GWT, and
NetBeans is a very powerful IDE. I am very excited to start using them
together to build web applications. I understand that the initial
stages can be slow, because there are many files involved and
everything needs to be properly configured in order to work properly.
If anyone has any ideas how to make this ListGrid and Label display at
the proper width, it would clear up a big mystery for me!
Thank you.