Please Refer to This for Mobile App Creation

There are no set rules for mobile app usability; however, through years of app development experience, we are sharing the accumulated experience. The information covered in this chapter is the list of things to which you can refer when creating the mobile app.

Screen Configuration

Minimize the visual elements that are not helpful so the focus can stay on the key content being provided to the user. Rather than filling the content tightly, give it plenty of space, and then clarify the visual hierarchy if there is substantial content. Group the related contents together to reduce the complexity of the screen.

Navigation

Configure the navigation bar in one column and always place it in the same location for the user the easily recognize it. Also, using icons and text together makes it look complicated, so it is better to use only one or the other.

Color

Minimize the number of colors used in the app and do not apply colors that stand out for other than UI elements that induce user actions.

The following shows the color scheme of the example app.

샘플 앱의 색상 배치

Icons

Icons should be able to remind users of meaning or action. Therefore, it is recommended to use icons that are commonly used and are already familiar to users.

One example would be the Material Icons of Google. Define the icons and their meanings and provide them to the user. Material Icons are available in 18dp, 24dp, 36dp, and 48dp sizes, and you can choose and use them according to your environment.

material_icon

Material Icons can be downloaded for free from the link below.

https://material.io/tools/icons/?style=baseline

https://www.flaticon.com/packs/material-design

Virtual Keyboard Key Processing

In input components such as Edit, MaskEdit, and TextArea, you can use a virtual keyboard by setting the usesoftkeyboard property to 'true'. If you want to process the keys of the virtual keyboard, then you can check the keycode value in the onkeydown event function and process it.

this.edt_query_onkeydown = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)
{
	// Enter Key Processing
	if(e.keycode == "13")
	{
		this.btn_search_onclick();
	}
};

Error or Helper Message

If possible, check the errors in the input field for the user input and then display them at the bottom of the field so that the user can easily identify them.

input_field_example

In consideration of the input content or length, place the clear button to facilitate the deleting operation if necessary.

Component Configuration in Example App

This describes the component configuration used when creating the Device API Utilization Workbook example app. Results may vary depending on the environment of the mobile device; therefore, it is not a recommendation, but rather just a reference.

Button

Setting Item

Setting Value

Others

ID Prefix

btn_


Size

Width: Variable

Height: 60


Font

font-size: 16~18pt

Set the font-weight to bold (700) if necessary

Edit, MaskEdit, TextArea

Setting Item

Setting Value

Others

ID Prefix

edt_


Size

Width: Variable

Height: 60


Font

font-size: 18pt


input_field_example

Grid

Setting Item

Setting Value

Others

ID Prefix

grd_


Size

Width: Variable

Height: Variable


Font

Head Column font-size: 16pt

Body Column font-size: 16pt


Cell padding

5px

If not set, the text will stick to the border too

much.

wordWrap

english


Static

Setting Item

Setting Value

Others

ID Prefix

stt_


Size

Width: Variable

Height: 60


Font

font-size: 16~18pt


GroupBox

Setting Item

Setting Value

Others

ID Prefix

grp_


Size

Width: Variable

Height: Variable


Font

font-size: 16~18pt


CheckBox

tab1

Setting Item

Setting Value

Others

ID Prefix

chk_


Size

Width: Variable

Height: 60


Font

font-size: 16~18pt


Calendar

In the mobile environment, use the calendar of the system provided by the OS. Since this is the default operation of the Calendar component, no separate setting (popuptype property) is required.

tab2

tab2_calendar

Setting Item

Setting Value

Others

ID Prefix

cal_


Size

Width: Variable

Height: 60

When the type is monthonly

daysize: 40px, 40px

headheight: 80

Font

font-size: 16~18pt


tab2

Combo

In the mobile environment, use the extended Combo. Extended Combo is the user component that has changed the function of displaying the item list to fit the mobile environment from the default Combo component. Therefore, modules and objects must be registered during the development.

tab3

tab3_combopopup

설정 항목

설정 값

기타

ID Prefix

extcmb_


Size

Width: Variable

Height: 60


Font

font-size: 16~18pt

For the font size of the item list, set the font of the grid of pExtCombo.xfdl to 14 to 16pt

Property

usetype: "popup"

popupurl: "Base::pExtCombo.xfdl"

innerdataset

pExtCombo.xfdl is the form file that will show the Combo list

dataset setting is required

If you need to use the default Combo, then use it as follows.

Setting Item

Setting Value

Others

ID Prefix

cmb_


Size

Width: Variable

Height: 60

itemheight: 40


Font

font-size: 16~18pt

The font size of the item list needs to be set in the theme (Set the font of listboxitem to 18pt)

Property

popuptype: "center"


Radio

tab1

Setting Item

Setting Value

Others

ID Prefix

rdo_


Size

Width: Variable

Height: Variable


Font

font-size: 16~18pt


Spin

tab1

Setting Item

Setting Value

Others

ID Prefix

spn_


Size

Width: Variable

Height: 80


Font

font-size: 16~18pt


ListBox

The usability on mobile is not ideal, so it is good not to use it if possible. If multiple selections are required, then use a checkbox, etc.

Setting Item

Setting Value

Others

ID Prefix

lst_


Size

Width: Variable

Height: Variable

itemheight: 40


Font


The text size of the ListBox item must be set in the theme. (Set the font of .ListBox .listboxitem,.ListBoxControl .listboxitem to 18pt)

Tab

Since the usability and view on mobile are not ideal, it is good not to use it if possible. Create the Tab function using Button, Div, etc. If it is absolutely necessary to use it, then set and use it as follows.

Setting Item

Setting Value

Others

ID Prefix

tab_


Size

Width: Variable

Height: Variable

tabjustify: true

showextrabutton: false


Font



.Tab .tabbuttonitem .tabbuttonitemtext
{
	font : bold 20pt "NanumGothic";
}

Menu

The usability on mobile is not ideal, so it is good not to use it if possible. If it is absolutely necessary to use it, then set and use it as follows.

Setting Item

Setting Value

Others

ID Prefix

mnu_


Size

Width: 100%

Height: 60

popupitemheight: 40


Font

font-size: 16~18pt

The font size of the submenu is set in the theme (.popupmenuitemtext)

Property

popuptype: center