Skip to main content

Page Lifecycle Management

Lifecycle of Quick pages are managed by PageComponent. It has different events on it and you can control the cycle of the page by these events.

You can also use PageComponent to create custom events on the page that called directly from every where in the page(sub pages can not call these event directly, see Block Component document). These events also can be triggered with after delayed time.

This component controls the sub page between the parent page. You can find details of this system in the Block Component document.

(!) PageComponent has to be located at the top of page.

Render Hooks​

The following events are used by adding the PageComponent to the page for the operations that need to be done without rendering the page and after the rendering is completed.

PreRender : First event to fire before the page rendering begins. (First triggered event of page)

EndRender : First event to fire after the page rendering ends.

PostRender : Some components may have events that are prioritized and they will be executed.

after render. This evet is triggered after all those events are executed.

Restored : Event that will be triggered after going back to current page.

onPostRender in pipeline.qjson : After all Block Components and sub pages are rendered, this event is triggered in the pipeline.qjson page(see the pipeline )

onPageClose in pipeline.qjson : When the you tries to close browser tab or the browser itself, a dialog will be prompted by the browser default message if this event is created on the PageComponent. If the user cancels close, this method will be triggered.

Trigger Custom Event on PageComponent​

quick.MM.trigger(eventName: string, parameters?: any[]): any

  • To call a custom event, you need to add this event to the PageComponent. Custom events that you have added to a component beside PageComponent, can not be triggered from itself or outside.
  • When two or more components want to call same method, you need to add as a custom event to the PageComponent. Then it can be called from other components.

Using parameters in custom;​

  • Add a custom event to the PageComponent (example : customEvent)
  • Write the handler code inside the custom event
    declare var param;
    quick.EM.trace(param);
  • Trigger this custom event from outside.
    quick.MM.trigger("customEvent", [{param:"myString"}]);
  • In the custom event, declare parameters at the beginning of the event. Now, you can use parameters in the custom event.

Trigger an Event with Delay​

quick.MM.delay(eventName: string, parameters?: {delayTime?: number, options?: any[]}

On PageComponent, it may needed to call a method with delay after Javascript code has executed. parameters.delayTime in milliseconds (thousandths of a second), the timer should wait before the specified function is executed.

Using parameters in delay;​

  • Add a custom event to the PageComponent (example: testEvent)
  • Write the handler code inside the custom event. 
    quick.EM.trace(Delayed);
  • To use this custom event, add a method with delay.
    quick.MM.delay("testEvent", {"delayTime":2000});

Return Value from Custom Method​

Custom methods on PageComponent can return a value.

myCustomEvent:

let a=5
let b=6
quick.return(a+b)
//Will return 11

An event can trigger the below code:

let customReturn = quick.MM.trigger("myCustomEvent")
quick.EM.trace(customReturn)
//11

Render Block and Resume​

With these methods, You can pause Rendering of the page, and resume it whenever desired.

In the PreRender event of the PageComponent, you might desire to pause rendering until receiving the response of a service call. For example, to use a service response data on the Block Component's onLoad event, you can delay rendering of the page, until the service response is received. Thus, resulting Block Component's onLoad to fire after service's response.

PageComponent.PreRender

quick.Quick.render.block();
// service call (or trigger a func to call a service)

Service Call OnSuccess || OnFail

quick.Quick.render.resume();

Example Usage​

TriggerEventWithDelay
TriggerCustomEvent