JavaScript using Deviceone development Combat (iii) Imitation micro-letter application _javascript Techniques

This is a series of documents, the long-term goal is to use Deviceone to develop some of the current use of a wide range of high-quality mobile applications, we will maximize the implementation of these applications every function and detail, not just stay in the simple UI emulation and demo phase, but a basic can use the actual app.

In the process of implementation, there will be many difficulties, but also found that some features are currently lack of component support and can not be implemented, you will encounter a variety of mobile development in the common technical problems encountered. Step-by-Step operations and problem solving can give developers an intuitive understanding of how to develop a real app via Deviceone, as well as a lot of technical details about mobile development itself, allowing app developers to take a lot less detours.

This document mainly introduces the imitation of micro-letters.

The first part is the frame

UE and UI design, usually the development of the app needs the product personnel's UE design and the artist's UI design, these two steps are finished before the function realization begins. We are now imitating the existing micro-letters, these steps can be omitted, look at the following image is provided by the main interface UI design diagram, the elements inside the dimensions are marked.

1. New project: We chose simple template, we chose the empty template because we can explain the development process in more detail. In fact this project is a better fit to choose Multi View with Viewshower templates.

2. A simple analysis of the main interface, the overall size of the main interface is iphone6 size 750*1334. Divided into two parts, the bottom is a bottom bar navigation bar, above is 4 independent interface, these 4 interfaces always have only one interface to display, the other three interface in memory, by the bottom of the navigation to switch, this is suitable for the do_viewshower frame as the main body of the following figure:

For this design, we delete the automatically generated button on the new project, add a do_alayout component and Do_viewshower component, set their width and x,y coordinates:

3. Next we add 4 pages for Viewshower, here I also stressed that the actual app will be more people involved, our code structure to be clear and easy to read, naming as much as possible in English, it is not good to use Chinese full spelling, including to build a multi-level subdirectory, not all mixed together. Here we add 4 subdirectories: Chats, contacts, Discover, me. Right-click each subdirectory, select New--other--deviceone--ui File, create 4 Index.ui, and the corresponding index.ui.js will be automatically generated.

Note here that the height of the root node alayout for these 4 UI files is set to 1220, because these 4 UI files are viewshower of the main interface and should not exceed the viewshower size.

In addition, add a label to each UI, mark the Chinese name, just for a while debug to see the real effect clearer.

4.Bottom Bar to add a simple 4 buttons, and then add the corresponding JS code to achieve Viewshower page switching function. Here's a tip, select 2 or more components, you can use a variety of alignment features, the following figure:

5. Add the Viewshower initialization code and click event of the button in the Index.ui.js.

 var Viewshower = UI ("Viewshower"); var page = SM ("Do_page");//Add 4 subpages to Viewshower Viewsho
    Wer.addviews ([{ID: "chats",//page indication path: "Source://view/chats/index.ui"//page's path}, {id: "Contacts",
    Path: "Source://view/contacts/index.ui"}, {ID: "Discover", Path: "Source://view/discover/index.ui"}, {
ID: "Me", Path: "Source://view/me/index.ui"}]);
The initialization first displays the first page Viewshower.showview ("chats");
var button1 = UI ("do_button_1");
Button1.on ("Touch", function () {Viewshower.showview ("chats");});
var button2 = UI ("Do_button_2");
Button2.on ("Touch", function () {Viewshower.showview ("Contacts");});
var Button3 = UI ("Do_button_3");
Button3.on ("Touch", function () {Viewshower.showview ("discover");});
var button4 = UI ("Do_button_4"); 
Button4.on ("Touch", function () {Viewshower.showview ("Me");}); 

6. We come to the real machine to look at the effect, start the designer's debugging services, start the phone-side of the debugger, and finally we see the effect of the image below, iOS and Android interface exactly the same. Click on the bottom of the 4 buttons, switching effect is good:

7. The content of this section is here, is the framework work done? Let's just say that the first step of the framework is complete, and if we have a lot of colleagues working on this app, we can start working separately, and then divide the work into 5 parts:

* Completion of Bottom Bar
* Completion of the/chats/index.ui
* Completion of the/contacts/index.ui
* Completion of the/discover/index.ui
* Completion of the/me/index.ui
The premise of multiple people working in parallel is code versioning such as Svn,git, we use GIT here, address is https://github.com/do-project/Fake-Weixin, and after each section we will submit git service, You can download the code reference for this node. We will also attach this section to the item code in the attachment.

The next section completes the first subtask, the Bottombar implementation.

-------------------------------------------------------------

This section mainly completes the implementation of the bottom navigation bar.

0. We first analyze the interface effect diagram and design diagram

The entire bottom navigation is divided into 4 duplicate parts, each part by a picture ImageView and the bottom title label, as well as the upper right corner marking, this marking can use the fillet label to implement, this mark should be hidden by default.

1. The first step we have to find the corresponding picture resources, usually to develop these resources by the art to provide, we now imitate the micro-letter, the best way is from the original micro-letter installation package to obtain, not directly by the screenshot, but to open the micro-letter Ios,android installation package, The iOS installer package is an IPA and Android installation package apk is a compressed file that unlocks some of the image resources available. At the moment I only need 8 icons at the bottom, including the highlight icon in the dot and the point, and put these icons in the image directory outside.

2. Delete the previously added 4 temporary buttons, and then layout the new components according to the size data provided by the artist, including 4 Do_imageview components and 4 label components, and 4 top-right label
A simple calculation can be concluded that the size of the ImageView is 60*60. Here's a tip, set a set of ImageView and labels, select 2 components, then right-click "Copy" and then "Paste" three times, you can also select multiple components of the various alignment.

Again fine tune, the picture and text set up, picture settings is set ImageView Source property, label needs to set the text center, set textalign property for center, set font, set background color, foreground color, etc., Sets the visible of three labels in the upper-right corner to false. Add a alayout in the middle to set the background to Gray, as a split line up and down the viewshower and bottom bar. Here to note that the right corner of the positive circular label is to set the border property, border set to ff0000ff,1,15 to indicate that the boundary line color is red, Width 1, Fillet radius (label width is 30), so as to achieve a positive circle.

To test the effect on the real machine, the iphone and Android phone's real-world image is as follows:

<ignore_js_op>

3. There will be 2 problems at this time, if you add a click event to the ImageView, the user must click the picture in order to trigger the click, so the experience is not good. The second problem is that the picture is slightly distorted on Android, and if, for example, the iPhone4 may become elliptical, the problem is due to differences in the width and height ratios of different handsets.

The solution is to:

* Add the Alayout of the bottom bar to 4 alayout of the same size, then place the Imageview,label on the corresponding sub alayout, and then add the click event to the child Alayout. So that the user's fingers can trigger events if they touch almost anywhere.
* Change the Isstretch property of the above 4 alayout to false, this principle can refer to the document Alayout sample Demo

4. Modify Index.ui.js, add code is mainly at the bottom bottom bar toggle button when the color of all icons and the foreground of the word.

var button = UI ("Do_button_");
var ImageView = UI ("Do_imageview_");
var label = UI ("Do_label_");
Button.on ("Touch", function () {ShowView ("chats");});
var button = UI ("Do_button_");
var ImageView = UI ("Do_imageview_");
var label = UI ("Do_label_");
Button.on ("Touch", function () {ShowView ("Contacts");});
var button = UI ("Do_button_");
var ImageView = UI ("Do_imageview_");
var label = UI ("Do_label_");
Button.on ("Touch", function () {ShowView ("discover");});
var button = UI ("Do_button_");
var ImageView = UI ("Do_imageview_");
var label = UI ("Do_label_");
Button.on ("Touch", function () {ShowView ("Me");});
    function ShowView (name) {Viewshower.showview (name);
        if (name = = "Chats") {Imageview.source = "source://image/tabbar_mainframehl.png";
    Label.fontcolor = "BBFF";
        else {Imageview.source = "source://image/tabbar_mainframe.png";
    Label.fontcolor = "FFFFF"; } if (name = = "Contacts") {Imageview.source = "source://image/tabbar_contactshl.png ";
    Label.fontcolor = "BBFF";
        else {Imageview.source = "source://image/tabbar_contacts.png";
    Label.fontcolor = "FFFFF";
        } if (name = = "Discover") {Imageview.source = "source://image/tabbar_discoverhl.png";
    Label.fontcolor = "BBFF";
        else {Imageview.source = "source://image/tabbar_discover.png";
    Label.fontcolor = "FFFFF";
        } if (name = = "Me") {Imageview.source = "source://image/tabbar_mehl.png";
    Label.fontcolor = "BBFF";
        else {Imageview.source = "source://image/tabbar_me.png";
    Label.fontcolor = "FFFFF"; }
}

So far, the bottom navigation bar basic implementation, this section is relatively simple, mainly some careful UI drag and drop adjustment. We use the debug version to look at the Android,ios effect is very good.

We begin to implement the first page of the main content of Viewshower.

---------------------------------------------------------------------------------------

Next to the bottom of the navigation, our section is mainly to complete the micro-Letter 4 Homepage of the first page "micro-letter" page, this section of more content, we divided into multiple threads to complete

0 The old rules, first analyze the UI, composed of three large parts, System status bar, toolbar and micro-chat record list.

1. System Status bar height 40, background black, we note that the micro-letter Home Page 4 have this system status bar, so we need to do a overall framework adjustment, there is no need for 4 subpages to add a status bar, just add one on the viewshower can be, The height of the corresponding Viewshower and sub page becomes 1180.

Corresponding Me/index.ui attribute values are changed for Index.ui, Chats/index.ui, Contacts/index.ui, Discover/index.ui and Height,y in the designer. The effect is as follows:

2. We go back to Chats/index.ui, first add the tool navigation bar (height 80) and the inside of the title and tool buttons, this need to add a plus of the resource file, because this file is Chats page proprietary, so there is image/chats/bar_add.png under.
Let's look at the effect of the real machine, and we notice that there is a black area on the top, which is the added status bar in the designer, because the page is drawn from the system status bar, so it's going to be more of this part of the designer,

The workaround is to modify the App.js,openpage to add a statusbarstate parameter (API document), set to transparent to indicate that the page is drawn from the top of the screen.

var D1 = require ("Deviceone");
var app = D1.sm ("Do_app");
App.on ("Loaded", function () {
    this.openpage ({
        Source: "Source://view/index.ui",
        statusbarstate: " Transparent "
    });

Take a look at the real Machine effect chart:

3. The main part is a do_listview, followed by setting up ListView cell and data.
ListView cell refers to each row of the list box, for example, ListView has 100 rows of data, in fact, the visible screen will always see only 8, 9 rows or so, so we move up and down without creating 100 lines, but repeatedly use the 8, 9 lines, but only to replace the inside of the data. We call this a row template, which is also a UI file in Deviceone, for example, where we create a new chat_cell.ui under the Chats subdirectory, the UI basic interface is as follows:

We're going to drag and drop the UI according to the art design size

Here also need to consider the problem of pure circle deformation, you need to set the text size, foreground color and other attributes, you can see that there are multiple Do_label,do_imageview components, because the template UI is late binding data, so in the design phase are blank.

Next we need to design chat_ Cell.ui the corresponding data, usually for the user experience, you need to reduce network interaction as much as possible, when the page is open, usually read the local data file, display the interface, and then consider whether the network connection to get the latest data, so app development needs to carefully consider the data localized reading and writing and data timeliness balance.
Deviceone's passing data is basically the standard JSON format. The following figure, the relationship between the component attributes in Chat_cell.ui and the JSON data structure

The corresponding mapping relation of the code in Chat_cell.ui.js is as follows, and we can see that the left side of the mapping relationship is the component ID. Component property name, and the right is the key name of the data JSON:

Related to Chat_cell.ui
var root = UI ("$");;/ /$ is the wildcard character of the root node component of this UI file, and if you specify the ID of the component, you can also use the ID to get the object
root.setmapping ({
    "Photo_imageview.source": "Photo",
    "name _label.text ":" Name ",
    " Lastmessage_label.text ":" Lastmessage.message ",
    " Lasttime_label.text ":" Lastmessage.time ",
    " unread_label.visible ":" Unread ",
    " Unread_label.text ":" Unread-count ",
    " name_ Label.fontcolor ":" Isgroup ",
});

The corresponding data should be first run from the network and then cached to the local, we are simulation, so first manually generate a file to Data/chats/chat.json

4. As we return to Chats/index.ui, we need to set the template for the ListView in the UI file here and bind the data.
Set the Templates property of the ListView in Index.ui to Source://view/chats/chat_cell.ui
Note: The chat_cell.ui is stored in Source/default/view/chats/chat_cell.ui, but the source://root node refers to the source/default/directory
Add code to bind data in Index.ui.js

Related to Index.ui
var storage = SM ("Do_storage");
var listdata = mm ("Do_listdata");
var ListView = UI ("ListView");
var Json_path = "Data://chats/chat.json";//locally cached Data
if (Storage.fileexist (Json_path)) {
    Storage.readfile ( Json_path, function (data, e) {
        //deviceone.print (json.stringify (data));
        Listdata.adddata (data);
        Listview.binditems (listdata);
        Listview.refreshitems ();
    })
}
var page = SM ("Do_page");
Page.On ("Loaded", function () {//
    the page is loaded after the display is displayed to trigger this event
    //We can get the latest network data in this event to update the ListView and data/chats/ Chat.json
});

We'll see the effect on the real machine.

There are several details in the run:

* Sliding up and down, the picture is constantly refreshing, because our ImageView source is the network picture, each time the display is obtained from the network, so here need to chat_cell.ui in the ImageView cachetype attribute to replace " Always "means that only one read from the network is cached locally, and the next time it is not read from the network. About the CacheType Property Reference API documentation
* ImageView is also rounded, rounded corners can usually be set using the Border property, but Android only ImageView cannot set rounded corners through border, and ImageView has a proprietary property radius to set up Android to work. We can improve on this later.

5. Handle the Add button in the upper right corner, click on the pop-up menu

Set the Enable property of the upper-right corner ImageView to true before you can handle the click event and add code to the Chats/index.ui.js

var Add_button = UI ("Add_imageview");
Add_button.on ("Touch", function () {
    var menu = UI ("menu_id");
    if (menu) {//If already add, just let this view display instead of add a new
        if (menu.visible = = False)
            menu.visible = true;
    } else {
        Main.add ("menu_id", "Source://view/chats/chat_add_menu.ui");
    }
);

Where Chat_add_menu.ui is the corresponding UI file for the pop-up menu, the root node size and chat/of this UI file Index.ui, so make sure that I click on any space to turn off the menu (actually hiding the menu), we drag the corresponding layout in this UI file, and we need to add 4 resources PNG files.

Here's a tip, the top triangle tag can only be implemented with a imageview load of a triangle icon.

We then add a click event to the root node of Chat_add_menu and click to hide it in the Chat_add_menu.js

var root = UI ("$");
Root.on ("Touch", function () {
    root.visible = false;
});

Finally we look at the real machine effect, click the Plus pop-up menu, click anywhere to hide the menu.

This section for the first time here, we start to drag and drop a few home page, the several pages are basically finished and then back to this page to detail.