An app to get started-build the main frame

Through the first lesson, you have mastered how to use the debug debugger to connect with the designer on the PC to see the UI design effect in real time, debug the code, followed by a series of demo development Teaching you will soon learn how to develop a real app.

To develop the app, the most important thing is to identify the main frame, the good main frame can reduce the workload, simplify the role of code, and the page usually requires the product personnel's UE design and the artist's UI design, as shown in the two steps completed before the implementation of functionality, due to space constraints, This tutorial does not repeat how to design the UI and UE, directly by developing a page to imitate the main page to do the demonstration.

For a complete demo please refer to, you can import into the designer to learn, import tutorial:
After downloading to a local, unzip to a directory

Select in the designer- File - Import DeviceOne - Existing projects into Workspace Click to Next Select the directory you just unzipped, and click again Next to import the full demo into the designer.

In the previous tutorial from Hello World, you have learned how to create a project, which is used directly here.

First, expand the project hierarchy in the IDE

app.jsIs the entry script environment for the entire project, double-click the file on the right to enter edit. It is very special to note that app.js if you want to use Deviceone components within the file, you need to require ("Deviceone"), as shown in the first sentence, while the other. JS scripting environment is not required to be used directly by reference. In this scripting environment, we have to do is to open a new page, need to call the app components of the Openpage method, Openpage Total eight parameters, here is a brief introduction of the use of three, the use of other parameters see the app Openpage. The whole code here is to define an app that is categorized by the SM class component and open a new page in the app's loaded event. The loaded event triggers when the app starts to finish, so we write the opening of the new page here. Where the source parameter of the Openpage method represents the address (absolute path) of the page that needs to be opened, the Statusbarstate parameter represents the top status bar display state, where transparent is selected, This allows the open Index.ui page to be displayed on the phone as a full screen effect, which hides the top status bar of the phone, and the Animationtype parameter represents the type of transition animation when the page is opened, where the fade fade in and out so that it can be opened to the Index.ui page in full screen with the fade-in transition animation.

Then we hit open Index.ui and went into the UI view of the editor.

All page displays are implemented by listing components in the. ui file, as shown in the green box, and if you need to add a UI component, simply drag the component onto the UI canvas in the component list components (shown in the red box), and the outline in the yellow box shows the hierarchy of the current page, and the lower component in the outline The higher the page.

A simple analysis of the main interface, the overall size of the project is the size of the Iphone6 750x1334, divided into two parts, the bottom is a bottom bar navigation bar, which is the interface with the bottom navigation switch

Page layout

This section mainly describes how to implement Botton Bar.

Open Outline First,

only one container class component is allowed in Rootview, and the other components are placed in the container class component, usually we choose to alayout the absolute layout component to be the container component. We click to select the component (as shown in the red box), modify the component's ID to do_alayout_root through the property list, the default size is the same size as the entire project, and then continue to add four alayout,id, respectively, into the container as Do_alayout _top, Do_alayout_body, Do_alayout_line, and Do_alayout_bottom, their IDs correspond to their functions, such as top, body, line, and bottom, as shown in the page layout. Adjusts the x, Y, Width, and height properties of the four alayout, respectively, to adjust their position in the page. Then continue to add four alayout,id to the Do_alayout_bottom container to Do_alayout_b0/b1/b2/b3, and

to add a label and ImageView component to the four alayout respectively. and adjust their x, y, width, height to achieve the effect shown

At this point in your project, ImageView does not display a picture, you need to source://image or create other directories you want to hold the picture to put in the picture to be displayed

Select the four ImageView components separately, modify their source property to point to the absolute path where the image is stored, and the picture is displayed.
It should be noted here that Deviceone has a powerful screen adaptation technology, but it may be slightly distorted in some places where the shape of the picture is strictly required, in order to ensure that the point Alayout has a special property isstretch, This property is set to False to ensure that the imageview is not deformed.

With the page effect, the next step is to move the page up. Double-click Index.ui.js to enter the code editing page.

Define three sm组件 Notification, Global, and page by component type First, and you can use the properties, methods, and events of the component in a way that you want by customizing the object name +. The definition of the alayout, ImageView, and label you need to use is similar to that of the ui组件 SM component, but the UI ("") brackets are filled with the ID name of the corresponding component that you just modified in the. UI page.

ImageView and Alayout have click events (Touch), in order to give users a better experience, we increase the click Response Range, the touch event is subscribed to the bottom four alayout, And in this event by changing the other Alayout label text color and ImageView image source to achieve click-selected effect.

In addition, we want this demo on Android devices to return to the Debug home page by clicking on the "Back" button on the phone, using the notification, global and page components we have just defined, and a mm组件 timer timer, mm组件are defined in the sm组件 same way that only the component type is required.
Clicking the "Back" virtual button on the Android phone triggers the page component's return event, so we subscribe to the back event and process the return or exit in the home event.

Here, a response to the Click event and switch the image of the demo is completed, is it easy to learn it?! We can quickly verify what we have learned from the phone and computer-linked code we learned from the previous tutorial.

An app to get started-build the main frame