[solved] WebKit builds as rendering engine (OSX) question

[peterblazejewicz]

Hi all,

is that section in documentation about using downloaded version of WebKit with Eclipse/GWT Designer still relevant?
http://download.instantiations.com/Desi ... ation.html
I have Safari 3.0 installed however I would like to use latest nighties builds in GWT Designer to have in-ide access to CSS/HTML additions available in WebKit builds,

regards,
Peter

[Alexander.Mitin]

Yes, the GWT Designer would work with latest WebKit. You may install it according to docs.
What is "CSS/HTML additions" you are talking about?

[peterblazejewicz]

hi Alexander,

thanks for confirming, that's important for me,
new things that are already within WebKit night-builds includes: CSS Animation, CSS Transformation/Transitions, CSS Selectors, SVG and few other things.
http://webkit.org/blog/
They are currently not relevant to existing real browser implementation (though parts of them are within Safari ADN osx/windows builds) however they will be public with two important releases in near feature:
- Safari on OSX will be updated (soon, after they merge builds from apple and webkit)
- Safari on iPhone/iTouch will be updated (June) and will imcorporate all features from current WebKit nighties (including off-line database , SVG and hardware based animation/drawings),

if you want me to post some findings related to above in context of using GWT Designer just let me know and I'll keep you updated,

kind regards,
Peter

[Eric Clayberg]

BTW, the instructions on that page are only needed for OSX 10.4 and are optional for users of OSX 10.5 (Leopard) or OSX 10.4.11 (and later) who already have the appropriate versions installed.

[peterblazejewicz]

hi Eric,
thanks for additional info. Yes, that's relevant, becuase I've arleady own PowerPC/Tiger and eventually would have Intel/Leopard in near future,
If I succeed in my planned work I'll share some results with you guys because they will add additional value at no cost to your software features portfolio (you could guess kind of that work from my previous posts and your addition to Designer features),
regards,
Peter

[Eric Clayberg]

If I succeed in my planned work I'll share some results with you guys because they will add additional value at no cost to your software features portfolio

Sounds good.

[peterblazejewicz]

hi Alexander,
........
They are currently not relevant to existing real browser implementation (though parts of them are within Safari ADN osx/windows builds) however they will be public with two important releases in near feature:
- Safari on OSX will be updated (soon, after they merge builds from apple and webkit)

hi,
that's happened today, 3.1 is now officially installed via software installers on all OSX,
official features:
http://docs.info.apple.com/article.html?artnum=307467

I'm in the process of setting up new intel mac with GWTD/GWT as I'm writing

regards,
Peter

[Alexander.Mitin]

Thank you for info. Please let us know if you discover any issue after updating to Safari 3.1.

[peterblazejewicz]

hi Alexander,
sorry for no updates but so far I have no issues,
things that works with GWTD Design view:
- CSS Transformations:
# scale
# translate
# rotate
# skew
- CSS Transitions
both works if defined via .css file. They could work in Design view if coded explicitly however there is a little hack required for browser (first properties should be declared then after a time tick they should be set with values) they are not work as expected in Design view (that's expected limitation - for that reason .css definitions should be used),

It would be used to have different definition of:

Code: Select all

if(!isDesignTime()){
}
private static final boolean isDesignTime(){
  return false;
}

because I want to know that i'm in design view in fact:

Code: Select all

if(!isDesingTime()){
}else{
// now I can write things
}

If I remember well isDesignTime requires specific code implementation:

Code: Select all

!isDesignTime()

For CSS transitions "isDesignTime" is useful because widgets should be set using end property values (e.g. with x = "400px" without any transition applied),

For your reference: I'm using Dashcode that way:
- first create GWTD project
- then create Dashcode project and save it within GWTD project folder
- export final files from Dashcode to source path of GWTD project
- add "<public path=".....">/> declaration to module so GWTD takes resources from Dashcode.
- work with assets generated in Dashcode in GWTD design view.

Apple has updated today tools for Safari/Webkit/iPhone if something new comes out I'll add it here,

regards,
Peter

[Alexander.Mitin]

Could you provide any example code which requires such special hack for browser?

[peterblazejewicz]

hi Alexander,

yes, np:

static animations (which occurs whenever some supported property is changed: it could be static property like "width" or CSS specific property like -webkit-transorm property) are usually coded in .css:

Code: Select all

.myClass {
  -webkit-transition-property: width;
  -webkit-transition-duration: 1.0;
}

(really basic example),
and applied with:

Code: Select all

.myClass .longItem{
   width: 400px;
}

works without any issue in browser and in GWTD,

however when all transitions are done via javascript (Java as in GWTD) first we set css properties and then apply values:

Code: Select all

public void applyTo(final Element e) {
      String props = "";
      String durations = "";
      String functions = "";
      String delays = "";
      Iterator iter = items.iterator();
      AnimatedItem item;
      boolean hasNewValue = false;
      while (iter.hasNext()) {
         item = (AnimatedItem) iter.next();
         props += item.getProperty();
         durations += item.getDuration();
         functions += item.getTimingFunction();
         delays += item.getDelay();
         if (iter.hasNext()) {
            props += Transition.COMMA_SEPARATOR_STRING;
            durations += Transition.COMMA_SEPARATOR_STRING;
            functions += Transition.COMMA_SEPARATOR_STRING;
            delays += Transition.COMMA_SEPARATOR_STRING;
         }
         if (item.getValue() != null && hasNewValue == false) {
            hasNewValue = true;
         }
      }
      DOM.setStyleAttribute(e, Transition.WEBKIT_TRANSITION_PROPERTY, props);
      DOM.setStyleAttribute(e, Transition.WEBKIT_TRANSITION_DURATION,
            durations);
      DOM.setStyleAttribute(e, Transition.WEBKIT_TRANSITION_FUNCTION,
            functions);
      DOM.setStyleAttribute(e, Transition.WEBKIT_TRANSITION_DELAY, delays);
      if (hasNewValue == true) {
         new Timer() {
            public void run() {
               $applyTo(e);
            }
         }.schedule(1);
      }
   }

- code builds .css rules to be applied and if given animation item has new value added at creation time it invokes internal timer to deffer invocation a little. Wihtout that not much work, e.g. transforms are not working at all,

can be used (depending on implementation) e.g. that way:

Code: Select all

tr = new Transition();
tr.addItem(Transition.createItem(
      Transition.WEBKIT_TRANSITION_PROPERTY_ALL, 0.5d,
      Transition.TIMING_FUNCTION_EASE_IN));
tr.applyTo(myPanel);

above will set transition to all supported properties to be executed within 0.5 second with ease-in. As you see I do not set any new value, so it can be invoked e.g. that way:

Code: Select all

int w = myPanel.getOffsetWidth();
myPanel.setWidth((w < 600 ? w + 100 : 0) + "px");

that will animate panel width changes,

however if new value for supported property is provided with animation item definition (so it is executed in javascript explicitely) that little timer will be executed:

Code: Select all

tr = new Transition();
tr.addItem(Transition.createItem("width", 2.5,
      Transition.TIMING_FUNCTION_EASE_IN, "20px"));
tr.addItem(Transition.createItem("opacity", 2.5, "0.5"));
tr.addItem(Transition.createTransform(0.5d).translate(
      "50%", "50%").rotate("-50deg"));
tr.applyTo(myPanel);

here all 3 items of animation (transition) has new values specified for width, opacity and css transform. Becuase of that new Timer(){....}.schedule(1) will be executed and each property will be set on element with a little delay,

regards,
Peter

[Alexander.Mitin]

Peter,

Thank you for such detailed explanation.

I think we can't implement it in GWT Designer, because there is no way for us to get the moment when the browser done rendering these styles. Putting the Designer simply into delay may cause a race condition: for one computer it will display the GUI rendered properly and for another shows just nothing, this may happen even on the same machine.

[peterblazejewicz]

hi Alexander,

please read previous post:
viewtopic.php?p=6856#p6856
I would be sufficient to have:

Code: Select all

isDesignTime()

GWTD property working for Design view,
As I mentioned also in Dashcode Apple uses kind of "isDashcodeIDE()" to not execute transitions when authoring ide,
I had to use:

Code: Select all

if(!isDesignTime()){
   // empty block
} else {
   // apply static values instead of transitions
}

regards,
Peter

[Eric Clayberg]

I would be sufficient to have: isDesignTime() GWTD property working for Design view

What do you mean by the above?

The isDesignTime() method should return true when a component is loaded in the design view as long as the method is implemented exactly as shown here.

[peterblazejewicz]

hi Eric,

exactly:

Code: Select all

if (!isDesignTime()) {
            MyServiceAsync service = MyService.Util.getInstance();
            // do something with MyService
        }

is for code part which is not intended to be evaluated in GWTD Design view (I know that and remember from previous post that I need exact syntax and implementation as !isDesignTime().)
I've checked few things right now before replying and now I'm think documentation should be simply extended because I can use isDesignTime() that way as well:

Code: Select all

package com.mycompany.project.client;

import com.google.gwt.user.client.ui.Label;

public class MyLabel extends Label {
   private static final boolean isDesignTime() {
      return false;
   }
   public MyLabel() {
      super();
      if (MyLabel.isDesignTime()) {
         setText("DESIGN TIME");
      }
   }
}

this appears to work in GWTD design view and after being compiled as well,

regards,
Peter