Xmlplus Component Design Series route (ViewStack) (7), xmlplusviewstack

Xmlplus Component Design Series route (ViewStack) (7), xmlplusviewstack

On the browser side, the understanding of routing is generally to switch pages based on different URLs. On the server side, the related pages are returned based on different URL requests. In this chapter, we define component routing in a broad sense: Component Objects display different sub-level pages based on different commands received. This section describes a routing-related component, namely, view stack ViewStack.

View stack preliminary

This component has already appeared in the last chapter delay instantiation in the Document section. Here we will explain some details. The source code of the component is provided again below.

ViewStack: {  xml: "<div id='viewstack'/>", fun: function (sys, items, opts) {  var args, children = this.children(),   table = children.call("hide").hash(),   ptr = table[opts.index] || children[0];  if (ptr) ptr = ptr.trigger("show").show();  this.on("switch", function ( e, to ) {   table = this.children().hash();   if ( !table[to] || table[to] == ptr ) return;   e.stopPropagation();   args = [].slice.call(arguments).slice(2);   ptr.trigger("hide", [to+''].concat(args)).hide();   ptr = table[to].trigger("show", [ptr+''].concat(args)).show();  });  return Object.defineProperty({}, "selected", { get: function() {return ptr;}}); }}

From the static interface, this component allows you to provide the static parameter index, which is the name of a child component object in ViewStack. It is used to indicate which child component will be first presented. See the following example.

Example1: { xml: `<ViewStack index='bar'>    <button id='foo'>foo</button>    <button id='bar'>bar</button>   </ViewStack>`}

In this example, ViewStack contains an attribute index with a bar value, indicating that the component object bar is first rendered when the component is instantiated. By default, the first child component of the component is used as the initial Display object. From the dynamic interface, the function item of this component exports a read-only attribute named selected, which is used to indicate the child component objects currently displayed.

Switch the target component object through the event

For switching between child-level component objects, the function items of the component do not export related interfaces, but are switched by receiving switch events. See the following example.

Example2: { xml: "<ViewStack id='viewstack'>\    <button id='foo'>foo</button>\    <button id='bar'>bar</button>\   </ViewStack>" fun: function (sys, items, opts) {  sys.viewstack.on("click", "*", function(e) {   var to = this + '' == "foo" ? "bar" : "foo",    data = "hello, world";   this.trigger("switch", [to, data]);  });  sys.foo.on("show", function (e, prev, data) {   console.log("previous page is " + prev, "from data is " + data);  });  sys.bar.on("hide", function (e, prev, data) {   console.log("previous page is " + prev, "from data is " + data);  }); }}

In this example, when a user clicks a text, the text will be switched between foo and bar, that is, between two pages. Switching is performed by dispatching a switch event through the corresponding sub-level object. In addition, when the component ViewStack switches to the page, it also distributes event show to the displayed page and event hide to the hidden page. You can select whether to listen on the page as needed. In addition, you can obtain the ID of the previous page and the transmitted data in the listener function.

Dynamically add and remove child objects

The component ViewStack supports dynamically adding and removing child-level component objects. See the following example.

Example3: { xml: "<ViewStack id='viewstack'>\    <button id='foo'>foo</button>\   </ViewStack>" fun: function (sys, items, opts) {  var xml = "<button id='bar'>bar</button>";  sys.viewstack.append(xml).trigger("switch", "bar"); }}

In this example, a child component is dynamically added to the function item, and the currently displayed view is switched to the newly added view by dispatching the event switch.

Optimized Configuration

The ViewStack component is generally used in combination with the delayed instantiation function of the component. For some complex components, this helps accelerate the display of the initial Page of the application. The following is a simple example.

Example4: { xml: `<ViewStack>    <button id='foo'>foo</button>    <button id='bar'>bar</button>    <button id='alice'>alice</button>   </ViewStack>` map: { defer: "bar alice" }}

In this example, the ViewStack sub-level contains three sub-components, in which the component object bar and alice are set to require delayed instantiation. Only when the show function of the two component objects is called, they actually start to instantiate.

Use with HTML5 History API

Let's take a look at how to use the ViewStack component with the HTML5 History API. The following is a simple example.

Example5: { xml: `<ViewStack id='example'>    <button id='foo'>foo</button>    <button id='bar'>bar</button>    <button id='alice'>alice</button>   </ViewStack>`, fun: function (sys, items, opts) {  sys.example.on("show", "button", function (e, prev) {   window.history.pushState({name: this + ""}, null, "/" + this);  });  window.addEventListener("popstate", function(e) {   sys.example.trigger("switch", e.state.name);  }); }}

The key point of this example is that when the child page of the view stack component object changes, the pushState function is used to record it. In addition, you need to listen to the browser's popstate event, when you click the forward and backward buttons, the corresponding page is switched. This technology is very suitable for the completion of No-refreshing jump in a single page application, which can bring a very good experience to users.

This series of articles is based on the xmlplus framework. If you do not know much about xmlplus, visit www.xmlplus.cn. Here are detailed introductory documents for your reference.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.