Jump to content

move uniPanel in Browser


erich.wanker

Recommended Posts

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

Link to comment
Share on other sites

  • 2 weeks later...

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...

Link to comment
Share on other sites

  • 6 months later...

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

Link to comment
Share on other sites

  • 2 weeks later...

 

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

Link to comment
Share on other sites

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 

 

afteranimatethis, 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

Link to comment
Share on other sites

I see on ExtJS 4.1 documentation there is the 

 

afteranimatethis, 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).

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 weeks later...

 

 

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!

Link to comment
Share on other sites

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 beforeanimationafteranimate, 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.
  • Upvote 1
Link to comment
Share on other sites

  • 2 weeks later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...