Plug-In 1.8 User Control & Interface

Introduction

AutoCount Accounting Visual Design concept is simplified that consists of Form, Grid and Controls (Button, Lookup Edit and etc...).
To design AutoCount Accounting Form is to know where to get the component.

Even though the design of the Plug-In does not necessary have to be the same as AutoCount Accounting, it is often that customer wants the same visual style on the Plug-In.

In this tutorial we are going to learn how to create a form that has the same visual style as AutoCount Accounting.

Objectives

• Implement Form design of AutoCount Accounting
  • Form Theme
  • Main Menu of AutoCount Accounting
  • Panel Header on top of the form (AutoCount Accounting 1.8)
• Data Grid
  • Grid Visual Style
  • Grid Display Formatting, such as currency, quantity, date and etc.

Requirements in this tutorial

• This tutorial has project that continues from Plug-In 1.8 Getting Started.
  If you have already know how to Build an AutoCount Accounting Plug-In, you don't have to start from tutorial 'Plug-In 1.8 Getting Started', you can follow the steps in this tutorial.
• Use of DevExpress Form Components
  
  

Read more on tutorial requirements here, which has the same requirements in this tutorial.

Form Visual Style

Form Theme

• To apply AutoCount Accounting Form Theme

Replace Form inheritance of System.Windows.Form class with DevExpress.XtraEditors.XtraForm.

Form Theme can only work on the XtraForm.

public class Form1 : DevExpress.XtraEditors.XtraForm
{
    public Form1(BCE.Data.DBSetting dbSetting)
    {
    }
}

Main Menu

Main Menu of AutoCount Accounting

• AutoCount Accounting 1.8 implement Main Menu to form.
• To add the Main Menu to your form, use attribute at your form class.

[BCE.Application.SingleInstanceThreadForm]

Panel and Hint Header

Panel Header

• Panel Header with Caption and Hint

public Form1()
{
    InitializeComponent();

    BCE.AutoCount.Controls.PanelHeader pnl =
        new BCE.AutoCount.Controls.PanelHeader(null, "Show Sales Invoice",
        "List of Sales Invoices");
    this.Controls.Add(pnl);
}

• Panel with Caption only

public Form1()
{
    InitializeComponent();

    //No hint
    new BCE.AutoCount.Controls.PanelHeader(this, "My Form Header", "");
}

Data Formatting on Grid View

• Use FormControlUtil object to enable AutoCount Accounting to set the label size and color on the form.
• Format display data according to the option in AutoCount Accounting, such as quantity decimal, unit price decimal, date format and etc...

 public FormControlUtil(DBSetting dbSetting);
 public FormControlUtil(DBSetting dbSetting, bool enableColor);
 public FormControlUtil(IDecimalSetting decimalSetting, string shortDateFormat, bool enableColor);

enableColor is always true. Unless developer wish to disable it by setting to "false".
"enableColor" does not have effect on GridControl. When "enableColor" is true, enables FormControlUtil to traverse the form for label control and apply formatting.

private void ConfigureGridView()
{
    BCE.AutoCount.XtraUtils.FormControlUtil formUtil = new BCE.AutoCount.XtraUtils.FormControlUtil(mydbset);

    formUtil.AddField("OutStanding", BCE.AutoCount.XtraUtils.FormControlUtil.CURRENCY_FIELD);
    formUtil.AddField("CreatedTimeStamp", BCE.AutoCount.XtraUtils.FormControlUtil.DATE_FIELD);

    formUtil.InitControls(this);
}

Formatting Data Display in Grid View

AutoCount Pop-up menu on Grid View

• Extend Grid View Pop-up menu with AutoCount Pop-up menu.

• 1) Extend AutoCount Pop-up menu on GridView.

new BCE.AutoCount.XtraUtils.CustomizeGridLayout(mydbset, this.Name, gridViewMain);

2) Extend AutoCount Pop-up menu that show mainly "Export Function" new BCE.XtraUtils.XtraGridMenu(gridView1);

Exercise 4: Design Form of AutoCount Accounting 1.8

Objectives: Create a Form that applies the Design and Main Menu of AutoCount Accounting 1.8

Follow the steps in this exercise to create a form that applies the theme of AutoCount Accounting 1.8.
Start Exercise 4

Exercise 5: Design Grid of AutoCount Accounting 1.8

Objectives: Adding a new GridControl and Formatting the grid's data.

Follow the steps to create a grid that looks similar to AutoCount Accounting 1.8.
Start Exercise 5

Summary

There are many more interesting forms Control can be added, such as LookupEdit which is one of the most common control can be found throughout AutoCount Accounting Forms.

See Also

• Plug-In 1.8 Getting Started
• Plug-In 1.8 User Control & Interface
• Exercise 1: Build My First Plug-In
• Exercise 2: Create Dialog Box
• Exercise 3: Create Form
• Exercise 4: Design Form of AutoCount Accounting 1.8
• Exercise 5: Design Grid of AutoCount Accounting 1.8

Go to menu

Go to top

Resources For AutoCount Software Developers