One app to get started (v)-Complete the News page

This tutorial will show you how to use Deviceone to complete a news page in a simple and efficient way.

• Import Project
• Data template Detach MVVM model
• Custom events
• Show News
• Nine Gongge Show

The demo that will be learned is shown below

1. Import the full project

This section of the sample demo is referenced and can be imported into the designer for learning.

To facilitate understanding of the page structure, please refer to

The upper part of the red box shown above is the Segmentview component, and the following bottombar together make up the common part of the page, and the blue box is a slideview component that can be left and right to toggle the page and Segmentview linkage, the number of pages depends on the number of data bar, If there are four pieces of data there are four pages; the green box is the ListView component, the Slideview template in this tutorial, and the ListView can bind different templates to show different pages, while the yellow box shows the same direct reference to a UI page as in the previous tutorial. All in all, the page hierarchy here is a ListView nested in the Slideview template, and the ListView template is a different page.

2. Data template separation
DeviceOneData binding is the use of the MVVM pattern, the implementation of the page and data separation, the data through the binding on different templates to control the display of the page. DeviceOneprovides two data binding components, all mm type components, one is listdata, it is essentially a mutable array (support JSON array), can add and delete to change data, and the other is Hashdata, which is essentially a variable key-value key value pair, You can also delete and change the search.
Here we define a data source jsontabs for Segmentview,
This data source is then assigned to the data binding component Listdata, which defines the Segmentview data model module.

Because the data binding component can bind different data sources, and a data source can only be bound by a data binding component, which is a one-to-many relationship, we need to replicate a data source when we want to use the same data source as the Slideview data Model module.

Define the data model module, and we'll define ViewModel, which is also the template view. First, define a template View UI page for Segmentview Newstypetabtemplate.ui, modify the root alayout ID of do_alayout_root, drag a Label inside, change the ID to Do_label_title, Adjusts the label's position and size.

And then we newsTypeTabTemplate.ui.js the label's text and tag properties through a UI组件 common setmapping method with the data Model module, defining the mapping relationship, So the Viewmodule template view is complete. (where name and selected are key in the Jsontabs data source)
Now we just need to modify the Segmentview's template property and link the property values to the Url,view and viewmodule of the newstypetabtemplate.ui we just defined.

Finally, we want to connect the data Model module with all of them, just add the listdata component that binds the data model module with Segmentview.

For more information on data binding, see data binding

3. Custom Events
In order to make a more realistic simulation of the use of news apps, we handle the selection of different segmentview when the Slideview page is also the effect of switching, that is, let Segmentview and Slideview linkage together. This is a very simple step, which is done by assigning the index of the cell at the current segmentview to the Slideview cell in the Segmentview indexchanged event.

We want to switch between the different cells in the Slideview and the page data as well, which requires a lot of action in the Slideview indexchanged event, in order to optimize the code structure, Here, the operation of switching the data is all done in the custom event Selectonetab, and the custom event is triggered only in the callback that triggered the Indexchanged event, so that the code we made when we subscribed to the Selectonetab event is also executed.

Subscribe to the Selectonetab event, where you do the update data operation

It is important to note that subscriptions and triggers for custom events can be done in a scripting environment that is not on the same page, just to ensure that the triggering of a custom event is followed by a subscription .

For more information on the use of custom events, see Custom events.

In order to better experience the effect, so that the Slideview can be unlimited sliding and load faster, just need to set two properties simple. One is to set the looping property of Slideview to True, to implement infinite sliding, and the other is to set the Isallcache property to True to pre-cache the next page when browsing the previous page.

4. Show News
The data on the news display page is the background data that is requested by the HTTP component, which refreshes the request when the gesture is pull down or the push-up is sliding the page, and then details how this step is implemented.

Show News
In the same way as above, we first deal with Slideview data and templates, the difference is that there is a ListView component nested in the Slideview template here, so we first process the ListView component. The data for the ListView is obtained from the background through an HTTP request, So in the page newsindexslidetemplate.ui that added the ListView, request the data in the corresponding NewsIndexSlideTemplate.ui.js scripting environment and bind the data to a Listdata component in the HTTP request Success event, and then let the Li Stview to bind the data while resetting the pull or push-out header. (It is important to note that the requested data is directly bound to the ListView component, so the data format needs to be communicated to the front and back tables, and the JSON Array is used when saving in the background.) ）

Because the ListView supports multi-template, here we bind two templates to the ListView component, one for displaying the news list Newsrowtemplate0.ui, and one for displaying the carousel picture Newsrowtemplate1.ui. The two templates also call the SetMapping method on the root node of the template page to define the data mapping relationship so that the data is combined with the template, and the data that we request from the background can be displayed on the ListView.

Here's a small deal, because we're not sure how many bytes we want to show, how much space we want to show, so we set the label for the data in the ListView's template page to 1, the height of the auto height, and the Maxlines property to 2. Indicates that only two rows are displayed, so that the space for each cell to display data is fixed and the data is neatly arranged.

Another small processing is to make the picture display faster, because all the pictures are network pictures, the display will first go to the request, so in the network environment is unstable may cause the picture display box first appear the default picture (set Defaultimage) and then display the actual picture to display. Here only the simple settings ImageView cachetype for temporary, indicating that the first time the image is cached to the local, each time you open this imageview will read the cached local pictures, and then read the server network pictures, This improves the experience by optimizing the loading speed of the ImageView.

Refresh News
To get new data in the pull and up push operations on the ListView page and re-display it in the template, first set the Isfootervisible and Isheadervisible properties of the ListView to True, This allows the head and tail to be visible when pulled up, then re-requests the data in the pull and push events of the ListView, and calls the ListView rebound method in the success event of the HTTP request to reset the head or tail.

5. Nine Gongge Show
Finally, let's talk about the third Buchbinderei click on the "+" sign will pop up a quick selection of news type of UI interface how to implement.

First draw the UI page Newstypegrids.ui that needs to pop up, as well as the previous tutorial in the process of pop-up picker page, in this page only a GridView component, other places set to gray translucent effect. Then set the GridView Template page Newstypegridtemplate.ui, as well as define the data map, the data source previously defined to Segmentview also copied a copy to the GridView binding, and finally only need to "+" Newstypegrids.ui display in the touch event.

One app to get started (v)-Complete the News page