waz_Wazar – UI, Unified

waz_Wazar

Every interface element, singing in harmony.

  • Mantra: One syntax to rule them all.
  • Tagline: Build UIs without rewriting time. 

The Foundation of ogTools

waz_Wazar is the foundational component of the ogTools suite, born from three decades of hands-on experience with the 4D platform. It encapsulates the knowledge and solutions developed to meet the real-world needs encountered over that time.

The component has been entirely rearchitected for modernity and performance. This comprehensive refactoring eliminated interprocess communication and rebuilt every widget into a robust class-based structure.

The result is an extensive library of UI widgets, designed to handle almost every conceivable scenario a 4D programmer will face. Every widget is highly customizable—globally for application-wide theming, and locally for each individual instance—giving you full control over colors, shapes, and sizes to perfectly match your application's design.

Localised in EN, FR. Dependencies: wok_Krolific – Licensing, Simplified, wox_Xlibrary – The Silent Engine, woc_Colours – Colours, Reloaded

Contents

  • Widgets
    • Value Pickers
      • waz_banner, waz_button, waz_icon, waz_integers, waz_menuBtn, waz_palette, waz_popup, waz_progress, waz_reals, waz_rotator, waz_ruler, waz_rulers, waz_search, waz_switch, waz_switchs
    • Times, Days, Dates
      • waz_date, waz_dates, waz_dateWidget, waz_days, waz_monthDay, waz_periodWidget, waz_time, waz_times, waz_timeWidget, waz_year, waz_yearMonth, waz_yearPeriod
    • Calendar
      • waz_calendar, waz_event, waz_event_form
    • IO
      • Assets: waz_io_asset, waz_io_fun
      • Others: waz_io_popup, waz_ioWidget, waz_io, waz_ios, waz_curves
  • Form
    • date, dates, time, times, period, event, json
  • IO module
    • Dialog: alert, confirm, more, request, progress, notification
  • Managers
    • Media manager
      • Alert, Confirm, More, Request, Progress, Notification
      • Menu popup icons

Our framework leverages deep, specialized knowledge to manage your application's assets seamlessly. We provide specific widgets that dynamically source buttons and icons—whether they are located in the host database or any other attached component.

This unique architecture enables the creation of highly sophisticated and consistent UI elements, such as waz_button, waz_menuBtn, ... all automatically populated with your project's assets, ensuring a unified and professional interface throughout your application.

Advanced Data Binding: The widgets can be bound in two powerful ways:

  • To an object and its properties for direct manipulation.
  • To an integer value, where each switch controls an individual bit, enabling compact and efficient state management.

 

Search, switches

Search Widget (waz_Search)

  • Flexible Triggering: Can be configured to execute a search on every keystroke for real-time feedback, or only upon pressing Return (ideal for filtering slow-running queries).
  • Versatile Placement: Can be styled and positioned either at the top or bottom of another object for seamless UI integration.

Switch Widgets (waz_Switch, waz_MultiSwitch)

  • Multiple States: Support both two-state (on/off) and three-state configurations.
  • Precise Customization: All colors are fully customizable, allowing for pixel-perfect alignment with your application's theme.

 

Progress

The framework includes a highly advanced progress indicator system, offering:

  • Six Distinct Types: Choose from six different visual styles to represent progress.
  • Multi-Threshold Coloring: Define *n* number of thresholds to dynamically change the bar's color as progress advances (e.g., red at 0-30%, yellow at 31-70%, green at 71-100%).
  • Customizable Animation Curves: Fine-tune the animation behavior by selecting one of five available easing curves.

This combination allows for exceptionally precise and informative visual feedback, tailored to any application context.

 

Centralized Asset Management: A Core Feature of waz_Wazar

This functionality represents a fundamental architectural advantage of the Protée framework. Our system possesses the unique ability to dynamically source your application's assets—such as buttons and menu icons—from any connected component or the host database itself. Icons are intelligently retrieved with fo_rsc and fu_icons and seamlessly provided to the widgets.

The waz_menuBtn Widget: A Practical Implementation

The waz_menuBtn widget is a powerful example of this system in action. It provides a compact, customizable interface for selecting a qualifier value bound to an integer field.

Configuration is streamlined through a single parameter object (typically stored in the Storage object), which contains the entire menu definition:

  • Labels for each option.
  • Colors for different states.
  • Tags to specify buttons and icons.
  • Layout preferences (e.g., button positioned left or right).
  • The option to define an "idle" state for the control.

This object-based configuration ensures a clean, maintainable, and highly dynamic setup.

// ***** m_playOrder btnMenu
// *
$vT_path:="metier/"
$c4Fu_icon:=Formula(zenh_SET_MENU_ITEM_ICON) // Host method for SET MENU ITEM ICON
$c4Fo_rsc:=folder(fk resources folder) // Or Null for host resources folder
$vJ_menu:=New shared object()
$vJ_menuBtns.m_playOrder:=$vJ_menu // Into Storage
$vJ_menu.t_label:="Play order"
$vJ_menu.t_tip:="Speech]playOrder"
$vJ_menu.l_btn_w:=40
$vJ_menu.t_key:="playOrder"
$vJ_menu.t_path:=$vT_path
$vJ_menu.fo_rsc:=$c4Fo_rsc
$vJ_menu.fu_icons:=$c4Fu_icon 
$vC_at_lbl:=wox_shared_at_lbl_new($vJ_menu) // Create shared collection and attach to $j_menu.at_lbl
$vC_at_lbl.push("Ascending" ; "Descending" ; "Random")
$vC_al_lbl:=wox_shared_al_lbl_new($vJ_menu) // Create shared collection and attach to $j_menu.al_lbl
$vC_al_lbl.push(0xFF8F ; 0xFFBC ; 0xFF43)

 

Icons, assets, IO

waz_Wazar includes a built-in library of white/transparent icons designed for dynamic asset generation.

 

This powerful tool allows you to programmatically create customized icons by combining several elements:

  • A base shape (here pentagon)
  • Background and foreground colors
  • A selected icon from the library (with its own color)
  • Various sizing and positioning coefficients

For added flexibility and engagement, the module also integrates a lightweight HTML viewer (html for fun js), enabling you to run entertaining JavaScript animations and visualizations.

Both dynamic assets and HTML content can be displayed effortlessly within your forms using two dedicated widgets:

  • waz_io_asset: For displaying your generated icons.
  • waz_io_fun: For rendering the HTML/JS content.

These widgets are perfect for creating eye-catching status indicators, warnings, or simply adding a touch of dynamic flair to your application's interface.

 

The IO Module: A Unified Dialog System

The IO module provides a comprehensive suite of six essential dialog types for user interaction:

  1. Alert: For critical notifications.
  2. Confirm: For yes/no decisions.
  3. More: For extended more/yes/no decisions.
  4. Query: For user input.
  5. Progress: For displaying operation status.
  6. Notification: For non-intrusive messages.

Centralized and Overridable Configuration

Each dialog type has its own global configuration, allowing you to define a consistent default look and behavior across your entire application. These dialogs can utilize both dynamic assets (waz_io_asset) and HTML-based visualizations (waz_io_fun).

For individual instances, you can easily override any aspect of the global configuration to meet specific needs.

Configuration Tools

The system is managed through dedicated configuration widgets:

  • waz_io: For invoking the dialogs.
  • waz_ios: For managing the global IO module configuration settings.
  • waz_ioPrefs: For editing and persisting user-specific dialog preferences.

This architecture ensures a perfect balance between global consistency and local flexibility.

Assets icons: accept, airplane, alarm, alert, announcement, archive, barber_blade, barber_chisel, barber_electric_razor, barber_people, barber_razor_blade, bike, brush, bug, cake, camera, cancel, cancel1, cancelOkAnnul, check, coffee_bean, coffee_beans, confirm, copy, date, delete, do_not_disturb, dones, download, email, emailing, end_trial, error, explore, face, favorite, find, forbidden, gesture, inex, infos, key, launch, link, locked, mariruana, mood, more, notif, parse, paste, pdf, photo, progress, protee, publish, release, request, save, search, send, share, stop, stop1, sunny, target, time, timelapse, timer, tool, trash, walk, weed, yoga.

Asset html fun: #aLongWay, #appspot, #arrowsIllusion, #arrowsPerpetual, #ballOfString, #circles, #darkside, #duck, #energy, #epicyclicGearing, #experiment, #fishes, #flower, #gridWorms, #hexagons, #hexaTiling, #homingParticules, #illusion, #lightning, #livingAnimals, #loading, #matrixDanse, #nightDaySunMoon, #particules, #perlin, #pinball, #rotatingSquares, #roundedRects, #rowsOfArrows, #shader, #spinner, #spinny, #stackedRainbow, #superFlake, #turbulence, #virus, #voroboids

 

Times and dates

  • Widgets, Pickers, Forms, for time, times, days (one or multiple, idle).
  • Widgets, Pickers, Forms, for date, dates, date time and all related to year, yearMonth, yearWeek, monthDay.
  • Widgets, Forms, for period, month, Quarter, Fourmester, Pentameter.

All highly configurable.

 

Advanced Scheduling & Calendar Management

This powerful module provides two primary interfaces for managing events and appointments:

1. Event Widget & Editor
A fully interactive event (time & duration) management system featuring:

  • Drag & Drop Editing: Intuitively move and resize events directly on the timeline.
  • Flexible Time Configuration: Define the start and end of the working day.
  • Precision Control: Set a snap-to-grid increment (e.g., 1, 5, 10, 15, 20, 30, or 60 minutes) for precise mouse movement and alignment.

2. Visual Calendar Component
A beautiful calendar display that is dynamically populated by data collections:

  • Data-Driven: You provide one collection for the calendar header and another for the events themselves.
  • Intelligent Collision Handling: Define the maximum number of event collisions (overlaps) to display. This allows for the representation of multiple concurrent events in the same time slot, such as multiple available appointment slots at a gym or conference sessions.