Create Mobile UI

This sample Mobile UI consist of 2 pages - one Static and one Dynamic Page

Steps to create Mobile UI:

Login to AppSpace and start to create Application: Login to ONEWEB platform using given Id/ password and you will be directed to ONEWEB Appspace home page. Click on “Create new app” button, a slider configuration screen would open as shown in fig1a. Choose Platform as “Mobile”, App name as “WorkForce_[yourUserName]”, Abbreviation as “Demoby[yourUserName]”, Description is (optional), give Namespace as “com.team.[Application name]“ shown in fig1b. Click on “Start develop” button.

Now your application will start to appear on application list as shown below:

Click on your application, choose “Create Pages” as highlighted in Fig 2a, write component name i.e. page name as “HomePage” and hit on Start Design button as shown in fig2b.

Note: Click on edit icon to open new or any existing page.

Note : T, R, B and L stands for Top, Right, Bottom and Left.

Your final screen should appear as fig(8a).

Add Icon in Third Column - C3 Drag another drop one more icon inside third Column C3. Choose “ion-android-notifications-none” Icon from an Icon List. Set Column alignment as Right, Set Icon Size as “32px”, Icon text color as rgba (255,255,255,1). Set padding for icon as (T-14, R-5). Open TEXT panel, select a paragraph and Drag and drop inside Column C2, set text color as rgba (255,255,255,1), edit paragraph text as “Alworks”, set text font size as “20px” and column alignment as “center”. Your Final screen should be appeared as shown in fig(9a).

Now, Upload images that are required to construct Mobile Page. Please find link here to attach all required images. Download direct link: https://tinyurl.com/y3gzfqud

Add Container, BG Image and heading

Drag and drop one container inside your designing screen. Set Box height as “290px” and set container Background Image as “Easywork.jpg”. Drag and Drop heading (UI element under TEXT panel) inside container and edit text as “Easy Work”. Set rgba color as (255,255,255,1), font style as “700-bold”, font size as “20px”. Set Padding for text “Easy Work” as (T-170, L-15). Your final screen should appear as fig(10a).

Add Label Drag one label after heading text, edit default text as “for Happy Life”. Set rgba color as (255,255,255,1), font size as “16px”. Set Padding for text as (L-15). Your screen will appear as fig (11a).

Add Div, row and columns to add icons Drag one container and add grid inside it to create row and column layout. Replicate columns to create 5 columns in the layout as shown in gig (12a)

Add Icon images inside Columns Drag and drop an icon image inside column C1. Drag and Drop a Label inside column after an image icon and named it as “Clock”. Set label text size as “14px”. Set Alignment of Column C1 as center. Your designing screen will appear as Fig (13a) Repeat above steps to drag and drop other respective icons into columns C2, C3, C4 and C5. Drag and drop label inside each column and named them as “Work”, “Benefits”, “Calendar”, and “Shopping” as shown in fig (14a).

Add one Paragraph and an Image to create promotions Drag and drop a Paragraph text element below after icons and rename default text to “Promotion for employee”. Set Text font style as “700-Bold”, Text size as “15px”. Drag and drop an image “promo1.jpg: after paragraph text. Your screen should appear as Fig (15a). D rag and drop one container and create 2 columns inside it using “Grid” after promo image as shown as C1 and C2 in fig(16a). Drag a Paragraph (P1) inside column C1 and renamed default text to “Buy 1 and get 1 for employee”, text style as “600-Medium” and text size as “12px”. Drag one label and “ion-heart” icon inside Column C2. Set label text style text style as “600-Medium” and text size as “12px”. Set Icon size as “21px” and rgba color as (216,12,12,1). Set Padding for icon as (T-9, L-8) as shown as fig (16a).

Replicate UI Element to create Promotion 2. You have created one Promotion advert on your Mobile Page as shown in fig (17a) Now you can use duplicate icon to duplicate each element to create paragraph and other UI elements as shown in fig (17b). Create Promotion 2 as shown in Fig(18a). Set this Mobile Page as your “Homepage” using Page settings. Congratulations, you have successfully created your first Page.

ONEWEB also provides testing emulator application - "PlayMe" to directly perform testing on your smart phone devices. PlayMe app is currently available to download from Google Play Store.

Test your Page via PlayMe App Install PlayMe app on your android device. Go to settings and enter details as below: http://[YourPGDurl] http://[YourrPGDurl]/PageRunTime Save your settings as shown in fig(20c). Your application will start to appear on an application list.

Example:

Note: User is required to use their ONEWEB assigned PGD URL inside configuration settings

Mobile UI - Page 2, Let's call this page as 'Benefit' Page. In this section, we will learn how to create Page 2, and establish a link between two pages. In this example, we will link page1 with page 2. Go to AppSpace, click on Add New > New pages , to add a New Page inside your Application and named it as “Benefit”. Choose Page Template as Blank. Click on Start Design as shown in fig (21a)

Add Container, Paragraph, Card and Grid to create card layout as shown in Fig (A) below. Set Page Background color as rgba (39,61,106,1). Drag and drop a “paragraph” after image I1 and rename default text to “Recent Activity”. Set text color as rgba(255,255,255,1). Set Padding as (B-15, L-15) as shown in fig(23a). Drag and drop a container and drop one “Card” inside container. Delete other default elements inside card. Add a “Grid” inside container to create row and 4 columns as shown as C1, C2, C3 and C4 inside that row. Your final screen should appear as fig(23b)

Add label and heading text - UI elements, inside columns Drag and drop a label inside column C1. Rename text as ‘DATE”. Set text color as rgba (163,163,163,1), set text size as “10Px”. Drag and drop heading text after DATE, and change text font size to “12px”, renamed default text to “11 Sep 2018“ as shown in fig(24a). Repeat same steps to create column C2, C3 and C4 as shown in Fig (24b). Use same label and heading text as shown in fig(24b)

Add other images and complete your page, same as shown in fig (25a) Drag and drop required Images inside your designing screen.

Create a link between Pages. Open your first page 1 “Homepage”. Click on Benefits Icon or any Ul element that you wanted to link. E.g.: let's say, we link Benefit icon on homepage to your second page as “Benefit Page”. Click on Benefit icon as highlighted in fig(27a). On your left configuration link panel, select page 2 that you wanted to link, e.g.: Benefit Page

Last updated 2 years ago