Welcome to the Ape Design Language demonstration website. The Ape Design Language, or ADL for short, is the UI design used by Ape Apps for multiple projects across platforms. It is made to give a consistent look and feel across the entire Ape Apps ecosystem. Although the ADL is meant for use in Ape Apps products, you may freely use the styles and functions in your own works.
ADL uses the Ionicons icon font for various menus and toolbars. Any project using ADL should also include the latest Ionicons script as well. To use the entire ADL stack in your project, you should include the following tags in the head element of your HTML document.
Alternatively, and for a potentially faster initial load of your project, you can load only the ADL script and then in your javascript, you can tell ADL to automatically load either the stylesheet, the latest ionic icons, or both (or neither). This can be a good option that may save a moment of page load times if you are tuning for performance.
And if you really don't want to load ADL until the last possible moment to speed up initial page loading, you can wait to do the whole thing until after you load. With this method, you do not have to add any ADL tags to your HTML document at all. This is the method being used on the page you are reading right now. Note that using this method, you must manually call the adl.initADL() function after the ADL script loads.
window.addEventListener("load" ,function() {
let adlScript = document.createElement("script");
adlScript.onload = function() {
adl.addADLStyle();
adl.addIonicons();
adl.initADL();
// continue loading/initializing your project here
};
adlScript.src = "https://cdn.apewebapps.com/adl//js/adl.min.js";
document.head.appendChild(adlScript);
});
Theme and Style
Theme Color
let theme = "default"; // default, light or dark
let color = "#1565C0";
adl.setTheme(color,theme);
Menus and Toolbars
Standard Toolbar
<div class="adl-toolbar">
div class="adl-toolbar-item" data-type="button" data-special="hamburger"></div>
div class="adl-toolbar-item" data-type="title" data-label="Toolbar"></div>
div class="adl-toolbar-item" data-type="button" data-special="threedots"></div>
</div>
Toolbar Commands
<div class="adl-toolbar" data-forcelabel="true">
div class="adl-toolbar-item" data-type="button" data-icon="add-circle-outline" data-label="New"></div>
div class="adl-toolbar-item" data-type="button" data-icon="folder-open-outline" data-label="Open"></div>
div class="adl-toolbar-item" data-type="button" data-icon="save-outline" data-label="Save"></div>
div class="adl-toolbar-item" data-type="spacer"></div>
div class="adl-toolbar-item" data-type="button" data-icon="close-outline" data-label="Quit"></div>
</div>
Programmatic Creation
The best way to create a toolbar is through code, and this example shows how and demonstrates many of the options and capabilities available for toolbar creation.
The iconWeight icon property lets you choose different weights for some of the icon fonts. Property name is iconWeight in all instances.
Iconography
By default, ADL uses named icons from the ionicons icon set. Over time though, it has been found that some needed icons are missing, and on some Android devices, the icons will not render at all. To address this, ADL now includes three additional fonts, Segoe Fluent Icon, Segoe MDL2, and Material Icons. They can be used by applying the following prefixes plus the icon unicode. You can analyze the font and get the appropriate unicode using Font Inspector by Ape Apps. In most cases, you can also supply the URL to an image file in place of using an icon.
The ADL modal dialog boxes come in a variety of styles and can be customized to fit many scenarios. There are also several helper functions to make creating a dialog a lot easier.
Alert Box (simple)
adl.showAlert("This is an alert box!");
Alert Box With Title (simple)
adl.showAlertWithTitle("This is the message!","This is the Title");
The above functions were all wrappers for the more complete showDialog function.
adl.showDialog({
title: "Dialog Box",
message: "This is the basic usage of the showDialog function. There are a lot of available options, allowing for complete customization of the dialog box. This one is using an ionic icon, but you can also specify an image URL for an icon.",
icon: "cash-outline",
iconColor: "#33691E",
buttons: [
{
text: "Button A"
},
{
text: "Button B",
color: "#4DB6AC"
},
{
text: "Button C",
color: "#f44336",
func: function(){ adl.showAlert("You picked C!"); }
}
],
});
Input Box (simple)
adl.inputBox({
title: "Input Box",
message: "An input box is an easy way to gather user input!",
multiline: false,
password: false,
placeholder: "Type something here!",
func: function(result) { adl.showAlert("You typed: " + result); }
});
Multiline Input Box (simple)
adl.inputBox({
title: "Multiline Input Box",
message: "A multiline input box, for those times when you want to let the user type in a bit more info.",
multiline: true,
password: false,
placeholder: "Type something here!",
func: function(result) { adl.showAlert("You typed: " + result); }
});
Password Box (simple)
adl.inputBox({
title: "Enter Password",
message: "Use the password flag to make an input box work as a password input.",
multiline: false,
password: true,
placeholder: "Enter password",
func: function(result) { adl.showAlert("You typed: " + result); }
});
Custom Input Box
Ultimately, the inputBox function is another wrapper for the showDialog function, which can become an input box using the input related options below.
adl.showDialog({
title: "Custom Input Box",
message: "The showDialog function can also be used to create an input box. One of the buttons must have the inputResult option set in order to recieve the result text from the input.",
icon: "beer-outline",
iconColor: "#FFA000",
input: {
multiline: false,
password: false,
placeholder: "What ales you?"
},
buttons: [
{
text: "NOTHING!!",
color: "#f44336"
},
{
text: "Submit",
color: "#4CAF50",
inputResult: true,
func: function(result){ adl.showAlert("You typed: " + result); }
}
],
});
Slider Dialog
The dialog window can also be configured to provide a horizontal slider for selection of a number between two defined values.
adl.showDialog({
title: "Slider Dialog",
message: "Choose a value based on the slider. The onChange callback gives you the current value and an update function that allows you to change the status display as the user manipulates the slider. Give a button the sliderResult attribute to be passed the result of the slider.",
slider: {
min: 0,
max: 100,
value: 50,
status: "50 out of 100",
onChange: function(value,update) { update(value + " out of 100"); },
},
buttons: [
{
text: "Dismiss",
},
{
text: "Save",
color: "#AB47BC",
sliderResult: true,
func: function(result){ adl.showAlert("You choose: " + result); }
}
],
});
You can pass in a 2d array of hex colors to use as custom color swatches. Each array represents a row of swatches, and each must have the same number of colors.
These are more helper functions for the showDialog interface that let you easily display and manipulate a Please Wait type dialog that can be updated and dismissed on your command.
Just like the color picker, the list can also be embedded right into the document so that it's always available. Just pass in a dom element in your options. Items can also be added in "compact" mode.
Using the flyout options, the dialog box can also be positioned as a flyout element. When used as a flyout, clicking/tapping outside of the dialog will dismiss it. The flyout can take all of the same options as the regular dialog window.
adl.showDialog({
title: "Dialog Flyout",
message: "Flyout dialogs can come in handy in many situations. They can be used for settings screens, 'hamburger' type menus, or small informational popups.",
icon: "bulb-outline",
iconColor: "#FBC02D",
flyout: {
position: "bottom"
}
});