move uniPanel in Browser

[erich.wanker]

Hi uniGuiForum,

 

i have a little question

 

i want to slide-out a uniPanel by clicking on a button  (unipanel1.left:=unipanel1.left +1  and so on )

 

if i use a timer - the unipanel moves too slowly and if i user a higher value to increase the left property of the panel it looks flickered ..

 

if i use a "while not" loop the unipanel ist not repainted in the browser ..

 

has anyone a idea how i can slide a panel smoothly out of the screenarea by clicking on a button ?

 

Thank you

erich

[Ron]

Good question - and I'd like to know how to slide an image into a TUniImage, or within a TUniCanvas, so it is possible to make a slideshow...without any flickering. Guess we are dependent on ExtJS functionality for these things, one option is finding an ExtJS plugin...

[eelias]

Hi uniGuiForum,

 

i have a little question

 

i want to slide-out a uniPanel by clicking on a button  (unipanel1.left:=unipanel1.left +1  and so on )

 

if i use a timer - the unipanel moves too slowly and if i user a higher value to increase the left property of the panel it looks flickered ..

 

if i use a "while not" loop the unipanel ist not repainted in the browser ..

 

has anyone a idea how i can slide a panel smoothly out of the screenarea by clicking on a button ?

 

Thank you

erich

Erich,

 

Did you have any success on that?

 

I want to have a panel and make it slide to the right, until it disappear. It is like the same effect of that folding/unfolding that we have on the unipanel, it needs to be smooth. 

 

I have tried many methods, but I suppose it needs to be JS on the browser side and I dont have the knowledge for that yet.

 

Eduardo

[Sherzod]

Hi...

 

Try to read this: (http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.util.Animate.html)

 

example:  

 UniSession.AddJS(UniPanel1.JSName + '.animate({ duration: 1000, to: { x: 10, y: 10, opacity: 100}});');

Sincerely ...

[eelias]

 

Hi...

 

Try to read this: (http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.util.Animate.html)

 

example:  

 UniSession.AddJS(UniPanel1.JSName + '.animate({ duration: 1000, to: { x: 10, y: 10, opacity: 100}});');

Sincerely ...

 

 

Fantastic!  That worked very well!

 

I have a question regarded to it.

 

I am now using this to move panels, It works, however it does not update the component values, like .Top .Left for example.

 

Is there a was to:

 

1) get an event when the animation finished?  (when finished I could update the delphi side properties)

2) how can I get the values from the extjs side?  like the .Top or .Left properties?  

 

Thank you

[Farshad Mohajeri]

See Client event demos.

[eelias]

See Client event demos.

Thank you,

 

I took a look, however I could not get the Idea. I could see how to write ext pascal code to handle the EXTJS components.

 

I could not see how to get the information on delphi from the current status of a EXTJS component. Using the animate works fine, however the delphi side of the component do not get updated with the new Top and Left value, it keeps the original when I created the component.

 

On my case, I need to be aware when an animate event is finished and get the new Top and Left of the component.

 

I see on ExtJS 4.1 documentation there is the 

 

afteranimate( this, startTime, eOpts )  http://docs-devel.sencha.com/extjs/4.1.1/#!/api/Ext.fx.Anim-event-afteranimate

 

How can I catch this on delphi code?

 

Is it related to TUniPanel.ExtControl class where there is many events? (I am trying to make the UniPanel animate). 

 

There is this function:

 

function TExtUtilObservable.On(EventName : String; Handler : TExtFunction; Scope : TExtObject = nil; Options : TExtObject = nil) : TExtFunction; begin

 

Can I register any ExtJS event with this?

 

Could you give me a little direction?

 

Eduardo

[Oliver Morsch]

I see on ExtJS 4.1 documentation there is the 

 

afteranimate( this, startTime, eOpts )  http://docs-devel.sencha.com/extjs/4.1.1/#!/api/Ext.fx.Anim-event-afteranimate

 

How can I catch this on delphi code?

 

 

Use the callback parameter/option of the animation to set a javascript(!!!) function called after animation has completed:

 

http://docs-devel.sencha.com/extjs/4.1.1/#!/api/Ext.fx.Anim-cfg-callback

 

In this JS function you can use ajaxRequest(...) to send updated data to the server (see forum).

[eelias]

Use the callback parameter/option of the animation to set a javascript(!!!) function called after animation has completed:

 

http://docs-devel.sencha.com/extjs/4.1.1/#!/api/Ext.fx.Anim-cfg-callback

 

In this JS function you can use ajaxRequest(...) to send updated data to the server (see forum).

 

Thank you,

 

I have understood the overall idea.

 

I would like to know how can I add this function to the client side. Is it due UniSession.AddJS?  like I am doing right now for the animation? This should be a function that sits there for session time. I have many panels that will need to be tracked down, so my class will add a such function for each panel. What should be done to persist on the client side and do not have conflicts?

 

 

Regards,

 

Eduardo

[Oliver Morsch]

I would like to know how can I add this function to the client side.

 

Different ways:

 

- UniServerModule.CustomFiles (with external JS file)

- UniForm.Script

- UniHtmlFrame.HTML

- UniSession.AddJS(...)

- use a anonymous function / closure

 

[eelias]

 

 

Different ways:

 

- UniServerModule.CustomFiles (with external JS file)

- UniForm.Script

- UniHtmlFrame.HTML

- UniSession.AddJS(...)

- use a anonymous function / closure

 

 

 

I wonder if you could help me on that. (or someone else...)

 

I am having difficulties to start on that, I am new with JS code and with unigui.

 

I am already using the animation by Unisession.AddJS  and it is working very well.

 

I too a look on the demos and I am lost about the event creation

 

I know there is a callback on Extjs after the animate finish, I need that to reach the delphi source code. I need to know when the animate finish because the delphi TUniPanel that I am animating do not get with its properties updated.

 

I am using this to make screen transtions, to swap between frames of the application. The efect is very nice. However I dont know when finished so I can continue doing other stuff after that.

 

Please, I wonder if someone give me a hand and point me the places wher I have to write code to get the end of animation event and the updated panel position.

 

Many Thanks!

[Sherzod]

Hi eelias.

 

If I understand correctly, try this:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  UniSession.AddJS(UniPanel1.JSName + '.animate({ duration: 1000, to: { x: 10, y: 10, opacity: 100}, listeners: {afteranimate: function() {ajaxRequest('+UniPanel1.JSName+', ''finished'', [])}}});');
end;

procedure TMainForm.UniPanel1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = 'finished' then begin
     // Your custom logic     
     ShowMessage('finished');
  end;
end;

Animation Events

Each animation you create has events for beforeanimation, afteranimate, and lastframe.
Keyframed animations adds an additional keyframe event which fires for each keyframe in your animation.

All animations support the listeners configuration to attact functions to these events.

startAnimate: function() {
    var p1 = Ext.get('myElementId');
    p1.animate({
       duration: 100,
        to: {
            opacity: 0
        },
        listeners: {
            beforeanimate:  function() {
                // Execute my custom method before the animation
                this.myBeforeAnimateFn();
            },
            afteranimate: function() {
                // Execute my custom method after the animation
                this.myAfterAnimateFn();
            },
            scope: this
    });
},
myBeforeAnimateFn: function() {
  // My custom logic
},
myAfterAnimateFn: function() {
  // My custom logic
}

Due to the fact that animations run asynchronously, you can determine if an animation is currently running on any target by using the getActiveAnimationmethod. This method will return false if there are no active animations or return the currently running Ext.fx.Anim instance.

In this example, we're going to wait for the current animation to finish, then stop any other queued animations before we fade our element's opacity to 0:

var curAnim = p1.getActiveAnimation();
if (curAnim) {
    curAnim.on('afteranimate', function() {
        p1.stopAnimation();
        p1.animate({
            to: {
                opacity: 0
            }
        });
    });
}

 

 

Sincerely.

[eelias]

It worked very well! thank you again for your help, you are really making a difference. Thank you!