Tuesday, April 26, 2005

JSR 273 is born!

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


The
final vote
is in - and
JSR 273
has been born! The spec lead is my
colleague Joe Nuxoll, who also works on Creator. I
could have linked his name to his
blog here, but my
repeated
nudges for some blogging activity
don't seem to have any effect :-)



Briefly stated, the problem with the old JavaBeans spec is
that while it works, IDEs need a lot more information about
components - such as their context menus, etc., so every IDE
out there has gone and implemented their own abstraction on
top of JavaBeans. This means of course that components written
for one IDE don't work on another (or at least not the richer
integration aspects).



This JSR will address that, such that third party component
vendors (and open source developers) can write nice JavaServer Faces
components for one IDE and it will work nicely in other IDEs as well.



This JSR is near and dear to my heart. The Creator web page designer
(which I work on) deals with Joe's APIs heavily. For example, when
you drop a rowset from the Server navigator onto a dropdown,
there's no special knowledge in the designer about rowsets and
dropdowns. We simply rely on the enhanced component APIs to query
whether the target component accepts a link from the dropped component
and so on.



Now this is in the hands of the expert group and they'll start working
on a proposal. Perhaps it will be radically different from
what we've implemented in Creator today - but we'll track it and
make sure that down the road there's a strong component market place
on the Java platform.


Monday, April 25, 2005

AJAX

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


You've probably heard a lot about "AJAX" already. But if you haven't,
it's a new term describing technology which has been around for a while,
but has recently gotten a lot more popular because of some really well
done AJAX applications from Google:




AJAX is really a combination of technologies. The most important piece
is JavaScript code in the page making asynchronous requests to a server.
When the server responds it calls back into JavaScript, and this JavaScript
can then manipulate the content of the page directly.



Sun is working on this too; J2EE is an excellent platform for AJAX
applications. See
Greg Murray's Blog
for more on the blueprints project on java.net; AJAX blueprints are
available already with working sample web applications.
And perhaps more importantly, it includes

detailed documents
explaining how it all
works so you can take the blueprints and extend them for your own needs.



I find this technology really fascinating so I plan to blog more about it.


Saturday, April 23, 2005

Updatable Data Table

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


I was asked to show how a Data Table bound to
local data (as described here) can be updated.
Rather than try to describe it in further detail I just created
a simple Creator project. If you have problems in this area,
load the project and take a look.



Briefly, the project contains a single page, with a Data Table, a couple of text fields
and an Add button. When you press Add, the data in the textfields is used to create a new
Person object, this person is put into the master list of people (maintained in the Session bean),
and the data table is updated to reflect the change.


Friday, April 22, 2005

Centering Components

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


The issue of centering components has
come up
several
times before, but I don't think I've actually described in detail how to do it.



The problem is this:


How do you center a component in the page, such that the components appear in the dead center of the browser window,
regardless of the size of the user's browser window?



Obviously, the answer is that you do this with CSS. But how? The canonical answer is to use auto margins. Set the width of the components, and set left and right margins to "auto", and the component will be centered. However, it's not -quite- that simple (for example, on IE5 you need to use text-align: center, and once you do that you need to add in other CSS to counteract that bad side effects.)
Furthermore, what if you want to vertically center the components too?






A solution for this is actually pretty simple. Briefly, the trick is to use absolute positioning to compute the dead center of the page;
doing that is easy:


position: absolute;
left: 50%;
top: 50%;


But of course that will center the top left corner of your component, not the center of your component. But you can use negative margins to achieve that!



First, you need to decide the width of your component. Let's say it's 200 pixels wide, and 80 pixels tall. In that case, position the component in the dead center, and then subtract half of the width and half of the height such that the center of the component
is centered. In our example, half of 200 is 100, and half of 80 is 40, so we add the following section to the <head> of the page:


<style>
.centerPanel {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 80px;
margin-top: -40px;
margin-left: -100px;
}
</style>

Now you just need to set your component's styleClass attribute to centerPanel (no dot) and it will
be centered.



For example, to make a Login panel centered in your login page, drop a Grid Panel. Drop an Output Text and set its text to "User Name:", drop a Text Field, drop another Output Text (set to "Password:") and drop a Secret Field. Set the Columns property to "2" (such that User Name and its Text Field are on the first line, and Password and its password field are on the second). Now either add the above styleclass definition to your stylesheet, or set the style property to the contents of the above styleclass (position: absolute; top: 50%; ...). Voila - your text should be centered in the page - even when the user resizes their browser page.



Experiment with adding additional CSS properties to set a frame for your Grid Panel to make a border; for example


border: solid 1px gray;
padding: 10px;


Chat Transcript Available

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


The transcript
from the recent Creator chat is now available.
As you may recall, we had some technical problems
with the chat software, so a couple of questions were lost and had to
be reconstructed from memory...



I realize I promised to write a companion blog to the
tabbed menu blogs.
Sorry... it's still on my TODO list... I need to think a little bit about it. Doing a navigation menu
should be extremely similar to the tabbed menu (you simply change the orientation of the Grid Panel
used in the tabbed menu, and change the CSS such that rather than tab appearance each cell is simply
a menu item). Therefore, I assume people who wanted a blog on this want something more advanced - perhaps
popup JavaScript or something like that.


Just getting better and better

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


First, Happy 10th birthday, Java! Unfortunately I was unable to attend the Birthday Party...



The "Gray Rectangle" issue in Swing has been fixed! This is the problem where you'd for example hit the "Finish" button on some dialog
in a Swing app, and for a second or two the screen would show a gray unpainted rectangle where the dialog was just dismissed
while the app is computing like mad. No more. Swing now (as of recent Mustang (JDK 6) builds)
does true double buffering, so it will restore the previous window contents immediately even if the AWT thread is busy.
You can read more about this in
Scott Violet's blog. And check out
all the other nice improvements
happening in the Java desktop area.



Speaking of Swing applications, NetBeans has released a
4.1 release candidate
. You should definitely give it a try. It has a number of really nice improvements from 4.0, such
as the navigator, or the jump to declaration hyperlinks, or lots of usability fixes - see Roumen's blog
here,
here
and here for example.
To be honest, I don't actually use the RC build - I like to
build the IDE from source myself. That way I can live on the bleeding edge - and use some of the
new features in the pipeline, such as the editorhints.






And speaking of NetBeans, there's going to be
a NetBeans Day this year
right next to JavaOne. Check out the speakers! Note also that the event is free, so you don't need to be registered
for JavaOne to attend.



Finally, check out this Microsoft blog
from somebody on Internet Explorer team. Despite some earlier public comments which indicated that
IE was focusing on browser features (like tabbed browsing) and not web standards compliance, Chris is saying
that the annoying PNG transparency bug has already been fixed, and that other important CSS bugs are also being addressed.
That's really great news. I'm speaking from direct experience here, having just spent two hours trying to get
something which was working on Firefox, Safari and Opera to work correctly on IE. That's for a hobby project
I'll blog about in the next couple of weeks - so stay tuned!!


Friday, April 15, 2005

JavaServer Faces Improvements

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


See
Ed Burns'
latest blog entry to read what's coming in the JSF 1.2 release.


Thursday, April 14, 2005

Computing HTML on the fly

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


I first wrote the following at the end of my

previous blog entry
a couple of minutes ago. However, since
that was a long blog on JavaScript, I figured those of you not interested in JavaScript
would miss it, so I decided to move the following into this separate blog entry instead.



Essentially (read the older blog entry if you're interested in the details)
the Output Text component has an Escape property you can turn off
(it's on by default) which causes < to be emitted as &lt; in the HTML.
You can use this to passthrough ANY HTML to your page. Please make sure
that it's valid XHTML though. This can be useful if you have some data on
the server you want to format nicely for the user; for example, you can generate
a table this way. Bind your output text to #{Page1.tableHtml}
and then put this in your page bean:


public String getTableHtml() {
StringBuffer sb = new StringBuffer();
sb.append("<table>"); // Add \n if you want resulting HTML to be more readable
for (int i = 0, n = result.size(); i < n; i++) {
sb.append("<tr>");

// Render your cells for result object i here
Foo foo = (Foo)result.get(i);
sb.append("<td>"); sb.append(foo.getName()); sb.append("</td>");
sb.append("<td>"); sb.append(foo.getAddress()); sb.append("</td>");

sb.append("</tr>");
}
sb.append("</table>");
return sb.toString();
}



The code is hopefully pretty self explanatory but the idea here is that on the server you have some list of objects you want to display, and for some reason, you can't use the preferred method of showing this in a JSF data table.
Now you can dynamically create the HTML right into your page from the server-side.



You can obviously go way overboard with this facility. If you want to be
really extreme, each one of your pages can have just a single Output Text component,
bound to a property, and then you compute the entire page HTML contents in
your page bean. But don't do that - in addition to the reduced designtime
help (WYSIWYG) you'll miss out on all the automation in generating HTML JSF
is providing for you. Over time the HTML emitted by the JSF components will
get more complicated and advanced. And JSF components have an abstraction where
the "rendering" is separate from the component, so your pages can render both
to HTML and to other display and interaction technologies such as those on
mobile devices. The more you tie yourself to HTML the harder that transition
will be.


Dynamic JavaScript

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


In one of my

recent blogs

I talked about using JavaScript in your page to do client-side textfield
input masking. The JavaScript in that example was completely static - the
JavaScript code itself is entered into the page (or a separate JavaScript
file) and is not affected by anything happening on the server.



But what if you want to modify your JavaScript to use data from some
computation you've performed in your Java code on the server?
That's essentially what

somebody asked on the forum
the other day:


How can my JavaScript reference a field in my Java page bean?



One way to do this would be to use a InputHidden component.
In your Java code, you can set the value of the InputHidden, and then
you can reference this value from JavaScript. Specifically, if you
drop an InputHidden on your page, such that its id is
hiddenField1, then your JSP can look like this:


...
<h:inputHidden binding="#{Page1.hiddenField1}" id="hiddenField1"/>
<script>
document.write("Message = " + document.getElementById("form1:hiddenField1").value);
</script>
...


Obviously, in your Java code on the server you'd do something like this:

...
hiddenField1.setValue("Hello World");
...

If you now run you'll see "Message: Hello World" in the page.



However, there's an even simpler way, using the Output Text component.
Normally, if you set the value of an Output Text component to
Hello <b>World<b> then the component will display
exactly that value to the user. But the Output Text has an "Escape" property
which is normally set to true. This is what is ensuring that the < in
the text is properly escaped to the html entity for the less than sign,
&lt;. You can however turn off the Escape property, and pass
through HTML directly to your page!! If you do that, your output text will
display the rendered HTML instead: "Hello World".



Thus, we can create the JavaScript code itself on the server and
send it to the page by just binding an output text to a property which
returns javascript, and turning off escape.
Or better yet, keep the JavaScript mostly in the JSP and reference the
data within the script string using one or more value binding expressions.
To do this, first create a property in your Page, such as foo,
which returns the data you want to insert into your JavaScript:


public String getFoo() {
return "Hello World";
}


Now drop an Output Text, set it to the following value, and then turn off
its Escape property:



<script>document.write("Message: #{Page1.foo}");</script>



More on this shortly.


Wednesday, April 13, 2005

Chat Review

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


Thanks for tuning in to the chat this morning.
There were lots of questions so I typed as quickly as I could for the whole hour. Well I shouldn't
say the whole hour - I spent some time trying to log back in. Apologies to those of you who also got
kicked out and had to log back in.



The transcript will be posted in a few weeks and I'll post a link to it when that happens.



Quite a few of the questions were future oriented -- "when will you support feature X", "are you working
on Y", etc. Unfortunately I'm not allowed to answer questions like that - as a policy we don't
discuss products that are not yet shipping - both for legal reasons (if we plan to do something and
make a public "promise" and then the plan changes we get in trouble) and for obvious marketing reasons - you don't get a lot of press on product launch if your announcement is mostly old news...



I did promise to post a blog on how to do a generic menu in a Creator application, as a follow-up to my
tabs blog. I'll do that this weekend.



Interacting with customers is a real kick for me. I hope many of you can come to JavaOne this year. If you do,
stop by our booth and introduce yourself!


Tuesday, April 12, 2005

Online Chat

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


Reminder: There's an online
chat
tomorrow - Wednesday 9:30am California time (17:30 UTC). You can sign up
anytime until then.


Monday, April 11, 2005

Spring + Creator

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


Somebody has posted a "howto" in the forum explaining how to use
the Spring Framework
within a Creator application - available
here.



(I want to give credit, but there's no name listed in the

profile
for the user. Over a hundred posts in less than a month though - wow!)


Client Side JavaScript

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


Most JSF components have a number of onXXX properties,
such as onClick for buttons. You can attach any JavaScript
you want here, and this JavaScript is run in the user's browser.



You can use this to improve the user interaction. For example,
let's say you have a text field which can only contain numbers.
Clearly, you should put a validator on the number field - never
trust client-side validation alone. However, rather than users
having to find out after the submit that they made a mistake they
need to correct, why not prevent them from typing anything other
than a number in the first place?



We can use JavaScript to prevent anything other than digits from
being entered into a textfield. Here's how: We need to write
a JavaScript function which is run on every keystroke which decides
whether the given key is valid, and if not, return false - this
will prevent the key from getting added into the textfield.



Did I say write JavaScript? Ooops, I meant "google for reusable
JavaScript". The internet is full of little JavaScript snippets
for doing things like this. Here's a JavaScript function I found;
we can add it to our document by embedding it in a
<script> tag, and put the actual JavaScript
code in a CDATA section to prevent the XML parser from interpreting
it as anything other than raw data:


<script type="text/javascript">
<![CDATA[
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com
// Distribute this script freely but keep this notice in place
function numbersonly(myfield, e, dec)
{
var key;
var keychar;

if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);

// control keys
if ((key==null) || (key==0) || (key==8) ||
(key==9) || (key==13) || (key==27) )
return true;

// numbers
else if ((("0123456789").indexOf(keychar) > -1))
return true;

// decimal point jump
else if (dec && (keychar == "."))
{
myfield.form.elements[dec].focus();
return false;
}
else
return false;
}
-->
]]>
</script>



Alternatively, you can place this code (without the surrounding
<script> tag) in a separate javascript file,
for example, digitsOnly.js under resources,
and in that case instead of including the large section above,
all you need to do is add the following line in your JSP:


<script src="resources/script.js" type="text/javascript"></script>



Warning: I have seen some reports in the
forum
that the above XML can get changed into


<script src="resources/script.js" type="text/javascript"/>

and if this happens, Internet Explorer fails. I fixed this bug
(where script and some other tags were
getting minimized when they shouldn't) in Creator late last
summer, so this shouldn't happen with the recent updates (and
I can't reproduce it) but be on the lookout for it and let me
know if you see any problems in this area.



Now the final step - select your text field, and bind the
onkeypress property to this javascript:


return numbersonly(this, event)

In other words, your JSP for the text field should look something
like this:

<h:inputText
binding="#{Page1.textField1}"
id="textField1"
onkeypress="return numbersonly(this, event)"
validator="#{Page1.textField1_validate}"/>

Notice how there is also a validator attached to this component.
Don't forget to do server-side validation - that's what counts!



P.S. You should still read the JavaScript code and see if it does
what you want. For example, the above JavaScript is not suitable
if you want to allow negative numbers (e.g. a minus sign must be allowed).
Also, the javascript has special support for jumping to another text field
when the user enters a dot, which we're not taking advantage of here - there's
a third parameter to the javascript function.


Sunday, April 10, 2005

Cell phones: The new rock ballad lighters

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


A friend called on Saturday and had tickets to U2 that night in
San Jose. I think the HP Pavillion (the Sharks hockey arena) is the
worst concert venue in the bay
area. We have many good ones - and the sound in HP Pavillion is just
awful. As a result I think they compensate by turning up the volume
so it'll drown out the echo. So during the first song we ran out
to the information desk and got ear plugs, which they hand out for
free. I watched the rest of the concert with ear plugs - and it was
much better!



It was a good concert - and they have an amazing repertoire
to choose songs from. I have about ten of their albums - but
Joe says he has over a
hundred U2 CDS - imports, singles, you name it.



The highlight of the show for me was when they dimmed the lights
and on the giant screen
slowly scrolled through the first seven or so articles of the

Universal Declaration of Human Rights
.




However, a close second was the moment when Bono asked everybody
to get out their cell phones and hold them up. The lights were turned
down. Can you imagine a packed arena with 20,000 people, and just about
everybody holding up bright cell phone LCD displays? It was like
rock concerts in the past where people would hold up their lit lighters
during the band's ballad. But rather than a warm sea of candles, the cell phones
generated a sea of blue dots instead. Bono then went into a little
spiel saying he wasn't looking for donations, but for signatures
on a petition, and asking everybody to send him a text message to
a number listed on the big screen. And of course we did.
With just about 20,000 people hitting the system simultaneously it must
have hit quite a traffic spike - but it held up. Phew! (
Sun was involved
).



The goal of the texting segment is to drive participation on
www.one.org and the ONE declaration:


WE BELIEVE that in the best American tradition of helping others help themselves, now is the time to join with other countries in a historic pact for compassion and justice to help the poorest people of the world overcome AIDS and extreme poverty. WE RECOGNIZE that a pact including such measures as fair trade, debt relief, fighting corruption and directing additional resources for basic needs education, health, clean water, food, and care for orphans would transform the futures and hopes of an entire generation in the poorest countries, at a cost equal to just one percent more of the US budget. WE COMMIT ourselves - one person, one voice, one vote at a time - to make a better, safer world for all.


Monday, April 4, 2005

Tabs, Revisited

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.


I wrote a

blog entry

a couple of days ago on how to build a
tabbed window setup using only standard JSF components.



The solution used one page per tab. That's okay for a web application
where you really want to have separate contents on each and every page.
But what if you want to have multiple tab sections on each page? Or what
if the tab area represents only a small portion of the page - you would
have to put all the shared contents in a page fragment.



Here's an alternative solution. I'm just going to outline it, since
I think that will be sufficient - but if anyone has trouble, feel free
to ask follow-up questions - you can post anonymous comments if you
are embarassed :-)



Like before, you'll create a set of tabs by putting Link Action components
inside a horizontal grid panel. However, this time, instead of putting
the separate tab contents on separate pages, you will place all of the
tabs in this page, all on top of each other! Then, all of these components
will be "turned off", except for the one which corresponds to the current
tab! We can turn off components by using the "rendered" property on the
JSF components.



So let's begin. As before, create a grid panel, decide how many tabs you
want, drop a link action for each, and set the embedded Output Text values to
the tab names.



For the links however, instead of using navigation, double click on each
link to create action handlers. In the action handler for the third link
for example, write something like this:


currentTab = 3;


You also need to add an integer variable named currentTab to your
page bean:

private int currentTab;



Next you need to go and add the tab contents. Drop a Grid Panel right
under the tab-link-panel Then go and look for its "Rendered" property
(it's probably under Advanced)
and uncheck it. The component should now disappear.
Repeat this process such that you have created as many grid panels
as you have tab links. Now go and re-enable the Rendered property on
one of them. Then drop components inside this grid panel as appropriate
to populate your tab contents.



Note that you won't be able to use "absolute positioning" (where you
can drag & drop components anywhere) inside these tabs. If you want to
do that, create page fragments for these, and then put the page fragment
box inside a panel group component in the grid.



The final thing we need to do is hook up the Rendered properties such
that they get enabled exactly when the corresponding link is selected.
To do that, make our currentTab variable into a property
by adding this method to your page bean:


public int getCurrentTab() {
return currentTab;
}

Now you can change the "Rendered" property for the grid panel number 3
(corresponding to tab link number 3) from "off" to this value binding
expression:

#{Page1.currentTab==3}

You do this by right clicking on the grid panel in the Application Outline,
choose Property Bindings..., select the Advanced radio button,
and then paste the above into the "New binding expression" textfield on
the bottom.

Yes - notice the flexibility in the expression language - we can do
comparisons (in addition to a number of other operations. To learn more
about this, open up the Help dialog in Creator, switch to the Search
box and search for "Expression Language".)



You would obviously adjust this if your page name is something other than
"Page1", and of course the "3" should be adjusted for each link.



Finally, you need to highlight the tab names and use CSS to make the
cells look like tabs. This is precisely like the
last time, so I won't cover it here. You only have
to modify the code which goes and figures out which tab is current.
Last time I had to search to the view root and compare tab names.
That is not necessary now - we know the tab index directly since we
set it in the links!



That's all there is to it - it should work. Note that the designtime
experience here is harder, because once you've value bound the Rendered
properties for each tab section, they don't show up at designtime.
You can temporarily set them back to true, edit, then enable value
binding again. Or, if you use page fragments you can edit the layout
by opening the fragments file.



Good luck!



P.S. In the above I referred to the "third" link and showed an integer of "3",
for simplicity. Remember that the tab index code is 0-based, so you would really set
currentTab=2, compare with ==2 in the value binding expressions, etc.


Readers' Choice Award

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.





It's awards season again - and Java Developer's Journal is conducting a product survey.
Creator is nominated in the "Most Innovative Tool" category.



Of course, voluntary participation surveys like these are NOT scientific.
But since placing well in these kinds of contests helps marketing (or, if you
don't do well, helps the competition), everybody seems to try to encourage their
users to participate anyway.
I see that at least one
of the other nominees in the same
category is displaying a link to vote
prominently on their site,
so I don't feel too bad encouraging you to do the same.
(In a quick spot check I also see links to the poll on both
IntelliJ's site and
WebSphere's site.



If you feel Creator has innovated in the java tools category and is making
your job easier, please
consider going to

http://sys-con.com/java/readerschoice2004/index.cfm

and casting a vote for Creator.



And while you're there, consider many of the other

Sun technologies that are
nominated as well.