Skip to content
ModernUI A DaneTrades developer library

Compact Trade Panel

This page describes the fast-wrapper compact trade-style panel example.

It shows how to compose a small, realistic chart panel from existing ModernUI wrappers.

This example is UI-only. It does not place, modify, or close real orders.

File path

Reference excerpt
Experts/ModernUI/Examples/FastWrappers_CompactTradePanel_Demo.mq5

What this demonstrates

The example builds a compact panel with:

  • Mui::AppWindow for the chart-hosted window
  • Mui::Section for grouped blocks
  • Mui::ButtonGroup for Buy/Sell selection
  • Mui::LabeledCombo for Market/Pending selection
  • Mui::LabeledSpinEdit for lots and risk percentage
  • Mui::LabeledSlider for an illustrative reward multiple
  • Mui::LabeledCheckbox for a confirm-before-send setting
  • Mui::ButtonRow for Place / Close / Reset
  • Mui::StatusRow for status and connection-style badges
  • Mui::SimpleTable for a small local activity log
  • Mui::Toast, ToastSuccess, and ToastWarning for feedback

What this example does not do

The example does not include:

  • OrderSend
  • CTrade
  • trade.Buy
  • trade.Sell
  • broker position close calls
  • risk calculation against real account equity
  • live order modification
  • trading strategy logic

The controls are real UI controls. The trading behaviour is intentionally not included.

Why this example matters

Many MQL5 tools are not full dashboards. They are small chart panels that sit beside price action.

This example shows how to build that kind of panel without making ModernUI trading-specific.

The wrapper layer stays generic. The trade-style layout is just a composition example.

Shape of the UI

UI build fragment
MuiAppWindow app=Mui::AppWindow(g_ui,"Trade Panel",28,28,360,500,true);

MuiSection order=Mui::Section(app.content,"Order","Sizing and intent - example values only.");

string sides[];
ArrayResize(sides,2);
sides[0]="Buy";
sides[1]="Sell";
MuiButtonGroup side=Mui::ButtonGroup(order.body,sides,0,0.0,0.0,true);

string kinds[];
ArrayResize(kinds,2);
kinds[0]="Market";
kinds[1]="Pending";
MuiLabeledCombo orderKind=Mui::LabeledCombo(order.body,"Type",kinds,0,0.0,0.0,"Execution style label for this demo.");

MuiLabeledSpinEdit lots=Mui::LabeledSpinEdit(order.body,"Lots",0.01,50.0,0.01,0.10,2);
MuiLabeledSpinEdit risk=Mui::LabeledSpinEdit(order.body,"Risk %",0.0,10.0,0.1,1.0,1);
MuiLabeledSlider reward=Mui::LabeledSlider(order.body,"Reward (x)",0.5,5.0,0.5,2.0);

Action row

For new EAs, assign IDs to the row buttons and handle clicks in OnMuiEvent(...).

UI build fragment
MuiSection ctl=Mui::Section(app.content,"Controls","Actions are toasts and field resets - no trading API calls.");

string act[];
ArrayResize(act,3);
act[0]="Place";
act[1]="Close";
act[2]="Reset";

MuiButtonRow strip=Mui::ButtonRow(ctl.body,act,0.0,0.0,true);

if(strip.Count()>=1 && strip.Button(0)!=NULL)
   strip.Button(0).Id(TP_ACTION_PLACE);
if(strip.Count()>=2 && strip.Button(1)!=NULL)
   strip.Button(1).Id(TP_ACTION_CLOSE);
if(strip.Count()>=3 && strip.Button(2)!=NULL)
   strip.Button(2).Id(TP_ACTION_RESET);

Route those IDs centrally:

Reference excerpt
if(event.EventId()==MUI_EVENT_CLICK && event.ControlId()==TP_ACTION_PLACE)
   OnPlace(root);

Status rows

UI build fragment
MuiStatusRow status=Mui::StatusRow(ctl.body,"Status","Ready","neutral");
MuiStatusRow connection=Mui::StatusRow(ctl.body,"Connection","Demo","info");

The example updates the status badge when the user presses Place.

Reference excerpt
if(g_status.badge!=NULL)
{
  g_status.badge.Text("Stored");
  g_status.badge.Variant(MUI_BADGE_SUCCESS);
}

Activity log

The activity log uses Mui::SimpleTable.

UI build fragment
string hdr[];
ArrayResize(hdr,2);
hdr[0]="When";
hdr[1]="Detail";

MuiSimpleTable log=Mui::SimpleTable(logSec.body,hdr,3,328.0,118.0,true,true);

Rows are updated locally when the user taps Place.

What to click and test

After attaching the EA to a chart:

  1. Select Buy or Sell.
  2. Change Type between Market and Pending.
  3. Adjust Lots, Risk %, and Reward.
  4. Toggle Confirm before send.
  5. Click Place.
  6. Click Close.
  7. Click Reset.
  8. Watch the status badge, toast messages, and activity table.

All changes are local UI state only.

How to extend it safely

You can use this example as a starting point for your own tool, but keep UI and trading logic separate.

Recommended pattern:

Pseudo-code
UI reads values
→ validation layer checks values
→ trading service decides whether to call broker APIs
→ UI receives result and updates status

Do not put broker execution directly into random button handlers unless your EA is intentionally simple and you understand the consequences.

Common mistakes

Treating the demo as execution logic

The panel is a UI composition example. It is not a trade manager engine.

Making ModernUI trading-specific

Do not add trade-only helpers to the core API unless they are genuinely generic. Keep trade-specific composition inside examples or your own EA.

Forgetting handler ownership

For new EA code, prefer the event bus over one handler class per button.

Related pages