<html>
<head>
<meta name="viewport" content="width=device-width" />
<base href="http://wiki.javaforum.hu" />
<style type="text/css">
body, #email-content, #email-content-inner { font-family: Arial,FreeSans,Helvetica,sans-serif; }
body, p, blockquote, pre, code, td, th, li, dt, dd { font-size: 13px; }
small { font-size: 11px; }
body { width:100% !important; -webkit-font-smoothing: antialiased; }
body,
#email-wrapper { background-color: #f0f0f0; }
#email-wrapper-inner { padding: 20px; text-align: center; }
#email-content-inner { background-color: #fff; border: 1px solid #bbb; color: $menuTxtColour; padding:20px; text-align:left; }
#email-wrapper-inner > table { width: 100%; }
#email-wrapper-inner.thin > table { margin: 0 auto; width: 50%; }
#email-footer { padding: 0 16px 32px 16px; margin: 0; }
.email-indent { margin: 8px 0 16px 0; }
.email-comment { margin: 0 0 0 56px; }
#email-title-avatar { text-align: left; vertical-align: top; width: 56px; }
#email-title-flavor { margin: 0; padding: 0 0 4px 0; }
#email-title-heading { font-size: 16px; line-height: 20px; min-height: 20px; margin: 0; padding: 0; }
#email-title .icon { border: 0; padding: 0 2px 0 0; text-align: left; }
#email-actions { border-top: 1px solid #bbb; color: #505050; margin: 8px 0 0 0; padding: 0; }
#email-actions td { padding-top: 8px; }
#email-actions .left { max-width: 45%; text-align: left; }
#email-actions .right { text-align: right; }
.email-reply-divider { border-top: 1px solid #bbb; color: #505050; margin: 32px 0 8px 0; padding: 8px 0; }
.email-section-title { border-bottom: 1px solid #bbb; margin: 8px 0; padding: 8px 0 0 0; }
.email-metadata { color: #505050; }
a { color: #326ca6; text-decoration: none; }
a:hover { color: #336ca6; text-decoration: underline; }
a:active {color: #326ca6; }
a.email-footer-link { color: #505050; font-size: 11px; }
.email-item-list { list-style: none; margin: 4px 0; padding-left: 0; }
.email-item-list li { list-style: none; margin: 0; padding: 4px 0; }
.email-list-divider { color: #505050; padding: 0 0.35em; }
.avatar { -ms-interpolation-mode: bicubic; }
.avatar-link { margin: 2px; }
.tableview th { border-bottom: 1px solid #69C; font-weight: bold; text-align: left; }
.tableview td { border-bottom: 1px solid #bbbbbb; text-align: left; padding: 4px 16px 4px 0; }
.aui-message { margin: 1em 0; padding: 8px; }
.aui-message.info { background-color: #e0f0ff; border: 1px solid #9eb6d4; }
.aui-message.success { background-color: #ddfade; border: 1px solid #93c49f; }
.aui-message.error,
.aui-message.removed { background-color: #ffe7e7; border: 1px solid #df9898; color: #000; }
.call-to-action-table { margin: 10px 1px 1px 1px;}
.call-to-action-container { text-align: right; padding: 5px 20px; border: 1px solid #326396; background-color: #6495C7; border-radius: 3px;}
.call-to-action-container a.call-to-action-button { background-color: #6495C7; font-size: 15pt; line-height: 1; padding: 0; margin: 0; color: #fff; }
@media handheld, only screen and (max-device-width: 480px) {
div, a, p, td, th, li, dt, dd { -webkit-text-size-adjust: auto; }
small, small a { -webkit-text-size-adjust: 90%; }
td[id=email-wrapper-inner] { padding: 2px !important; }
td[id=email-content-inner] { padding: 8px !important; }
td[id="email-wrapper-inner"][class="thin"] > table { text-align: left !important; width: 100% !important; }
td[id=email-footer] { padding: 8px 12px !important; }
div[class=email-indent] { margin: 8px 0px !important; }
div[class=email-comment] { margin: 0 !important; }
p[id=email-title-flavor] a { display: block; } /* puts the username and the action on separate lines */
p[id=email-permalink] { padding: 4px 0 0 0 !important; }
table[id=email-actions] td { padding-top: 0 !important; }
table[id=email-actions] td.right { text-align: right !important; }
table[id=email-actions] .email-list-item { display: block; margin: 1em 0 !important; word-wrap: normal !important; }
span[class=email-list-divider] { display: none; }
}
</style>
</head>
<body style="font-family: Arial, FreeSans, Helvetica, sans-serif; font-size: 13px; width: 100%; -webkit-font-smoothing: antialiased; background-color: #f0f0f0">
<table id="email-wrapper" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f0f0f0">
<tbody>
<tr valign="middle">
<td id="email-wrapper-inner" style="font-size: 13px; padding: 20px; text-align: center">
<table id="email-content" cellspacing="0" cellpadding="0" border="0" style="font-family: Arial, FreeSans, Helvetica, sans-serif; width: 100%">
<tbody>
<tr valign="top">
<td id="email-content-inner" align="left" style="font-family: Arial, FreeSans, Helvetica, sans-serif; font-size: 13px; background-color: #fff; border: 1px solid #bbb; padding: 20px; text-align: left">
<table id="email-title" cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td id="email-title-avatar" rowspan="2" style="font-size: 13px; text-align: left; vertical-align: top; width: 56px"> <img class="avatar" src="cid:avatar_6672696cf1a7244e02a2dc7fcc8b6090" border="0" height="48" width="48" style="-ms-interpolation-mode: bicubic" /> </td>
<td valign="top" style="font-size: 13px">
<div id="email-title-flavor" class="email-metadata" style="margin: 0; padding: 0 0 4px 0; color: #505050">
<a href="http://wiki.javaforum.hu/display/~sipos.lehel@gmail.com" style="color:#326ca6;text-decoration:none;; color: #326ca6; text-decoration: none">Lehel Sipos</a> wrote a blog post:
</div> </td>
</tr>
<tr>
<td valign="top" style="font-size: 13px"> <h2 id="email-title-heading" style="font-size: 16px; line-height: 20px; min-height: 20px; margin: 0; padding: 0"> <a href="http://wiki.javaforum.hu/pages/viewpage.action?pageId=29687853" style="color: #326ca6; text-decoration: none"> <img class="icon" src="cid:blogpost-icon" alt="" style="border: 0; padding: 0 2px 0 0; text-align: left" /> <strong style="font-size:16px;line-height:20px;vertical-align:top;">GWT Animation – GWT FX / A Google Web Toolkit használatáról</strong> </a> </h2> </td>
</tr>
</tbody>
</table>
<div class="email-indent" style="margin: 8px 0 16px 0">
<div class="email-page">
<p style="font-size: 13px">Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. <a href="https://developers.google.com/web-toolkit/" class="external-link" rel="nofollow" style="color: #326ca6; text-decoration: none">https://developers.google.com/web-toolkit/</a> </p>
<p style="font-size: 13px">You write your code in Java language and the GWT compiler will produce to you the client side javascript(/ajax) and html files.</p>
<p style="font-size: 13px">There are lot of additional java libraries which you can use to improve your GWT application for free:</p>
<p style="font-size: 13px"> <a href="http://code.google.com/p/gwt-google-apis/downloads/list" class="external-link" rel="nofollow" style="color: #326ca6; text-decoration: none">http://code.google.com/p/gwt-google-apis/downloads/list</a> </p>
<p style="font-size: 13px"> </p>
<p style="font-size: 13px">For example to do animations, you can use the custom gwt animation tool and components, but there is also a java package named gwt-fx, reachable from the list above mentioned.</p>
<p style="font-size: 13px">With gwt-fx you have additional animation possibilities:</p>
<p style="font-size: 13px"> <a href="http://code.google.com/p/gwt-fx/" class="external-link" rel="nofollow" style="color: #326ca6; text-decoration: none">http://code.google.com/p/gwt-fx/</a> </p>
<p style="font-size: 13px"> </p>
<p style="font-size: 13px">I write a short application to demonstrate some animation functionalities using the gwt-fx package and the custom gwt animation component. This application is running on the free Google Application Engine server:</p>
<p style="font-size: 13px"> <a href="http://lehelsipos-gwt1.appspot.com/" class="external-link" rel="nofollow" style="color: #326ca6; text-decoration: none">http://lehelsipos-gwt1.appspot.com/</a> </p>
<p style="font-size: 13px"> </p>
<p style="font-size: 13px">Using the custom GWT animation component, a short example demonstrates us, a function of moving widgets: </p>
<p style="font-size: 13px"> </p>
<p style="font-size: 13px">class CustomAnimation extends Animation {</p>
<p style="font-size: 13px"> private int centerX = 120;</p>
<p style="font-size: 13px"> private int centerY = 120;</p>
<p style="font-size: 13px"> private int radius = 100;</p>
<p style="font-size: 13px"> </p>
<p style="font-size: 13px"> @Override</p>
<p style="font-size: 13px"> protected void onComplete() {</p>
<p style="font-size: 13px"> super.onComplete();</p>
<p style="font-size: 13px"> //write code here, what to do after the animation stops</p>
<p style="font-size: 13px"> }</p>
<p style="font-size: 13px"> @Override</p>
<p style="font-size: 13px"> protected void onStart() {</p>
<p style="font-size: 13px"> super.onStart();</p>
<p style="font-size: 13px"> //write code here, what to do before the animation starts</p>
<p style="font-size: 13px"> }</p>
<p style="font-size: 13px"> </p>
<p style="font-size: 13px"> @Override</p>
<p style="font-size: 13px"> protected void onUpdate(double progress) {</p>
<p style="font-size: 13px"> double radian = 2 * Math.PI * progress;</p>
<p style="font-size: 13px"> updatePosition(your_gwt_widget1, radian, 0);</p>
<p style="font-size: 13px"> updatePosition(your_gwt_widget2, radian, 0.5 * Math.PI);</p>
<p style="font-size: 13px"> updatePosition(your_gwt_widget3, radian, Math.PI);</p>
<p style="font-size: 13px"> updatePosition(your_gwt_widget4, radian, 1.5 * Math.PI);</p>
<p style="font-size: 13px"> }</p>
<p style="font-size: 13px"> private void updatePosition(Widget w, double radian, double offset) {</p>
<p style="font-size: 13px"> radian += offset;</p>
<p style="font-size: 13px"> double x = radius * Math.cos(radian) + centerX;</p>
<p style="font-size: 13px"> double y = radius * Math.sin(radian) + centerY;</p>
<p style="font-size: 13px"> YourPanelContainingTheWidgets.setWidgetPosition(w, (int) x, (int) y);</p>
<p style="font-size: 13px"> }</p>
<p style="font-size: 13px"> }</p>
<p style="font-size: 13px"> </p>
<p style="font-size: 13px">At your button click event you can use the following code to start and stop this custom gwt animation:</p>
<p style="font-size: 13px">CustomAnimation animation;</p>
<p style="font-size: 13px">…..</p>
<p style="font-size: 13px">animation.run(4000);</p>
<p style="font-size: 13px">animation.cancel();</p>
</div>
</div>
<table id="email-actions" class="email-metadata" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-top: 1px solid #bbb; color: #505050; margin: 8px 0 0 0; padding: 0; color: #505050">
<tbody>
<tr>
<td class="left" valign="top" style="font-size: 13px; padding-top: 8px; max-width: 45%; text-align: left"> <span class="email-list-item"><a href="http://wiki.javaforum.hu/pages/viewpage.action?pageId=29687853" style="color: #326ca6; text-decoration: none">View Online</a> </span> </td>
<td class="right" width="50%" valign="top" style="font-size: 13px; padding-top: 8px; text-align: right"> <span class="email-list-item"><a href="http://wiki.javaforum.hu/users/editmyemailsettings.action" style="color: #326ca6; text-decoration: none">Manage Notifications</a> </span> <span class="email-list-divider" style="color: #505050; padding: 0 0.350em">·</span> <span class="email-list-item"><a href="http://wiki.javaforum.hu/users/viewmyemailsettings.action" style="color: #326ca6; text-decoration: none">Unsubscribe from all blog posts</a> </span> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td id="email-footer" align="center" style="font-size: 13px; padding: 0 16px 32px 16px; margin: 0"> <small style="font-size: 11px"> This message was sent by <a class="email-footer-link" style="color:#505050;font-size:11px;text-decoration:none;; color: #326ca6; text-decoration: none; color: #505050; font-size: 11px" href="http://www.atlassian.com/software/confluence">Atlassian Confluence</a> 4.2.5, the <a class="email-footer-link" style="color:#505050;font-size:11px;text-decoration:none;; color: #326ca6; text-decoration: none; color: #505050; font-size: 11px" href="http://www.atlassian.com/software/confluence/tour/enterprise-wiki.jsp">Enterprise Wiki</a> </small> </td>
</tr>
</tbody>
</table>
</body>
</html>