<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&aacute;lat&aacute;r&oacute;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">&nbsp;</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">&nbsp;</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">&nbsp;</p>
                                                <p style="font-size: 13px">Using the custom GWT animation component, a short example demonstrates us, a function of moving widgets:&nbsp;</p>
                                                <p style="font-size: 13px">&nbsp;</p>
                                                <p style="font-size: 13px">class CustomAnimation extends Animation {</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; private int centerX = 120;</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; private int centerY = 120;</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; private int radius = 100;</p>
                                                <p style="font-size: 13px">&nbsp;</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; @Override</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; protected void onComplete() {</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; super.onComplete();</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //write code here, what to do after the animation stops</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; }</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; @Override</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; protected void onStart() {</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; super.onStart();</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp; //write code here, what to do before the animation starts</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; }</p>
                                                <p style="font-size: 13px">&nbsp;</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; @Override</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; protected void onUpdate(double progress) {</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; double radian = 2 * Math.PI * progress;</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; updatePosition(your_gwt_widget1, radian, 0);</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; updatePosition(your_gwt_widget2, radian, 0.5 * Math.PI);</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; updatePosition(your_gwt_widget3, radian, Math.PI);</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; updatePosition(your_gwt_widget4, radian, 1.5 * Math.PI);</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; }</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; private void updatePosition(Widget w, double radian, double offset) {</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; radian += offset;</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; double x = radius * Math.cos(radian) + centerX;</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; double y = radius * Math.sin(radian) + centerY;</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;YourPanelContainingTheWidgets.setWidgetPosition(w, (int) x, (int) y);</p>
                                                <p style="font-size: 13px">&nbsp;&nbsp;&nbsp; }</p>
                                                <p style="font-size: 13px">&nbsp; }</p>
                                                <p style="font-size: 13px">&nbsp;</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">&middot;</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>