Reblocks-UI
REBLOCKS-UI ASDF System Details
Version: 0.12.0
Description: A set of
UIwidgets for Reblocks web framework!Licence:
BSDAuthor: Alexander Artemenko
Homepage: https://40ants.com/reblocks-ui/
Source control: GIT
Depends on: 40ants-doc, log4cl, log4cl-extras, parenscript, quri, reblocks, reblocks-parenscript, serapeum, spinneret
Introduction
Reblocks-ui brings Zurb Foundation styling to your Weblocks application.
When you inherit your widgets from reblocks-ui/core:ui-widget. Reblocks will fetch
Zurb Foundation styles and JS automatically:
(defwiget my-widget (reeblocks-ui:ui-widget)
((...))Simple Demo
This demo shows how to process form data in a callback and to update the widget accordingly:
Core
API
Use this class as a parent for all widgets, who use UI.
Use this class as a parent for all widgets, who use UI. Warning: 'widget' was renamed to 'ui-widget' and will be removed after 2020-06-01.
Dependencies for widgets based on Foundation framework.
Also may be useful if you want to include them as a whole app's dependencies.
To calculate right integity value, use: curl https://url | openssl dgst -sha256 -binary | openssl enc -base64 -A
HTML Forms
Submit Confirmation
You might also want to warn user about some destructive actions.
To do this, provide REQUIRES-CONFIRMATION-P argument to the
with-html-form macro. Optionally you might provide CONFIRMATION-QUESTION
argument with a text of the question. Pay attention how does question
changes when you are clicking a button in this demo:
Showing Errors
Form processing usually includes error checking.
You can use error-placeholder and form-error-placeholder inside
the body of with-html-form macro to mark places where errors should be show.
There can be only one form error placeholder and it will show errors which are not related to some particular field. Field error placeholders are named and usually should be placed above or below a field.
After you've used placeholder inside the form, use field-error function inside an
action's code to display the error related to the field or just signal any ERROR
to show a form-wide error.
An example below, shows both types of error. Enter "bob" as a login, to check how a form-wide error will look like:
API
Wraps a body with (:form ...) using reblocks/html:with-html.
METHOD-TYPEargument should be a keyword:GETor:POST.ACTIONargument should be a function callback which will be called on form submit. Form fields will be passed as keyword arguments, using their names. To make your code more robust, use&ALLOW-OTHER-KEYSin the lambda list.ID,CLASSandENCTYPEarguments are transformed into appropriate arguments ofHTML<form ...>...</form>node.EXTRA-SUBMIT-CODEargument might contain a list of string with simpleJScode, which will be called on form submit before code provided inSUBMIT-FNargument.By default, form submission is done using
AJAX. If you want to do old-schoolGETorPOSTrequest, setUSE-AJAX-Pargument toNIL.If
REQUIRES-CONFIRMATION-Pis true, then user will be asked a question defined byCONFIRM-QUESTIONargument. Zurb Foundation's modal window will be used to show a popup. SeeSubmit Confirmationsection for an example of code.
Use this class as a parent for all widgets, who use UI.
This function creates and renders a widget to show an error message related to some form field.
It should be called inside with-html-form macro.
NAME argument should be a string denoting a form field. Later, you can call field-error function
to signal an error from the action function. You will need to pass the NAME as the first argument
to the field-error function.
This function creates and renders a widget to show an error for the whole form.
It should be called inside with-html-form macro.
Later, you can call form-error function to signal an error from the action function.
Signals an error which will be shown for the whole form.lisp
You need to use error-placeholder function inside the with-html-form macro
to set a place where an error message should be shown. Otherwise, the error
will be logged and ignored.
If there is no a error-placeholder (1 2) call with corresponding NAME argument,
then error message can be shown for the whole form in a place where
form-error-placeholder function was called.
Signals an error which will be shown for the whole form.lisp
You need to use form-error-placeholder function inside the with-html-form macro
to set a place where an error message should be shown. Otherwise, the error
will be logged and ignored.
Returns total number of errors, reported by field-error function.
You can use this function and call form-error (1 2) or interrupt action if
the result is not zero.
Returns all errors, reported for the field with name given in FIELD-NAME.
Renders a button in a form.
NAME- name of the html control. The name is attributized before being rendered.VALUE- a value on html control. Humanized name is default.ID- id of the html control. Default is nil.CLASS- a class used for styling. By default, "submit".DISABLEDP- button is disabled if true.
Renders a button within a form. This function can be used a short cut to quickly render a sumbit button.
Renders an action into a href link. If AJAXP is true (the
default), the link will be rendered in such a way that the action will
be invoked via AJAX or will fall back to a regular request if
JavaScript is not available. When the user clicks on the link the
action will be called on the server.
ACTION may be a function or a result of a call to reblocks/actions:make-action-url.
ID, CLASS and TITLE represent their HTML counterparts.
RENDER-FN is an optional function of one argument that is reponsible
for rendering the link's content (i.e. its label). The default rendering
function just calls PRINC-TO-STRING on the label and renders it
with escaping. Internally, render-fn should use reblocks:with-html macro
to write output into the right stream.
WARNING! This function generates ... element and any
bot, crawling the internet will hit this action with GET request.
Renders a textarea.
NAME- name of the html control. The name is attributized before being rendered.VALUE- a value on html control. Humanized name is default.ID- id of the html control. Default is nil.CLASS- a class used for styling. By default, "submit".DISABLEDP- button is disabled if true.
Untitled
This widgets shows a popup window.
Inherit from this class and define a method for
render-popup-content generic-function. Then you
will be able to instantiate your class instance
and call show-popup generic function.
Shows popup window.
Hides popup window.
Renders inner HTML for popup window.
You need to define a method for this generic function
and specialize it for your own class.