View source for 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.<br />
 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]].<br />''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<br /><br />

:Read more on [[Plug-In 1.8 Getting Started#Requirements_in_this_tutorial|tutorial requirements here]], which has the same requirements in this tutorial.

<br /><br />

==Form Visual Style==

===Form Theme===
*To apply AutoCount Accounting Form Theme
:Replace Form inheritance of '''System.Windows.<span style="color:blue">Form</span>''' class with '''DevExpress.XtraEditors.<span style="color:blue">XtraForm</span>'''.

 Form Theme can only work on the XtraForm.

<syntaxhighlight lang="csharp" highlight="1">
public class Form1 : DevExpress.XtraEditors.XtraForm
{
    public Form1(BCE.Data.DBSetting dbSetting)
    {
    }
}
</syntaxhighlight>

<br />
[[File:201b.FormMainMenu.png|frame|450px|right|link=|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.
<br />
<syntaxhighlight lang="csharp">
[BCE.Application.SingleInstanceThreadForm]
</syntaxhighlight>

<br />
[[File:201b.PanelHeader.png|frame|450px|right|link=|Panel and Hint Header]]
===Panel Header===
*Panel Header with Caption and Hint
<syntaxhighlight lang="csharp" highlight="5-8">
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);
}
</syntaxhighlight>
*Panel with Caption only
<syntaxhighlight lang="csharp" highlight="5">
public Form1()
{
    InitializeComponent();

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

<br /><br />
==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... 

<syntaxhighlight lang="csharp">
 public FormControlUtil(DBSetting dbSetting);
 public FormControlUtil(DBSetting dbSetting, bool enableColor);
 public FormControlUtil(IDecimalSetting decimalSetting, string shortDateFormat, bool enableColor);
</syntaxhighlight>

 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.

<syntaxhighlight lang="csharp" highlight="3-8">

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);
}

</syntaxhighlight>
{|
|-
|
[[File:201b.GridView.png|frame|700px|left|link=|Formatting Data Display in Grid View]]
|}


==AutoCount Pop-up menu on Grid View==
*Extend Grid View Pop-up menu with AutoCount Pop-up menu.
<br />
[[File:201b.GridViewPopupMenu.png|380px|left|link=]]
<br />
* 1) Extend AutoCount Pop-up menu on GridView.
<syntaxhighlight lang="csharp">
new BCE.AutoCount.XtraUtils.CustomizeGridLayout(mydbset, this.Name, gridViewMain);
</syntaxhighlight>

{|
|-
|width=30px|
|
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
*2) Extend AutoCount Pop-up menu that
:show mainly "Export Function"
<syntaxhighlight lang="csharp">
 new BCE.XtraUtils.XtraGridMenu(gridView1);
</syntaxhighlight>
||
[[File:201b.GridViewPopupMenuExport.png|link=]]
|}

<br /><br /><br /><br />

{{Exercise|idx=4
|obj=Create a Form that applies the Design and Main Menu of AutoCount Accounting 1.8
|Intro= Follow the steps in this exercise to create a form that applies the theme of AutoCount Accounting 1.8.
|link=Exercise 4: Design Form of AutoCount Accounting 1.8}}

{{Exercise|idx=5
|obj=Adding a new GridControl and Formatting the grid's data.
|Intro= Follow the steps to create a grid that looks similar to AutoCount Accounting 1.8.
|link=Exercise 5: Design Grid of AutoCount Accounting 1.8}}


=='''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.


<br /><br />

==See Also==
* [[Plug-In 1.8 Getting Started]]
* [[Plug-In 1.8 User Control & Interface]]
* [[Exercise_1:_Build_My_First_Plug-In|Exercise 1: Build My First Plug-In]]
* [[Exercise_2:_Create_Dialog_Box|Exercise 2: Create Dialog Box]]
* [[Exercise_3:_Create_Form|Exercise 3: Create Form]]
* [[Exercise 4: Design Form of AutoCount Accounting 1.8]]
* [[Exercise 5: Design Grid of AutoCount Accounting 1.8]]

[[Category:Programmer]]
[[Category:Tutorials]]
[[Category:Plug-In]]
{{NavigateDeveloper}}