juci

juci is the user interface library for Mowbly mobility framework. The library offers APIs that help build rich user interface screens with responsive design for your app. Following are the broad categories of APIs provided by juci.

Query selection APIs to find HTML elements based on name, attributes etc. in the user interface

Set of rich user interface controls designed for responsive user interfaces covering most basic user interface patterns especially for enterprise apps

Data binding APIs to bind data from different sources like web services to HTML elements or juci controls in the user interface

Utility APIs like methods to know the screen dimensions, display message dialogs etc.

juci library abstracts the nuances of the various browsers like touch or pointer event handling, form-factor based rendering etc. that helps you develop applications catering to a wider range of devices be it phone or desktop.

juci is available as a global object in the page and can be accessed as $m.juci.



Methods

  • addComputedDataset(id, computableFunction)
    Adds a dataset that is dependent on one or more other dataset, and will automatically update whenever any of these dependencies change.
    Parameters:
    • id{String}
      Identifier/Key reference for the dataset on the view model.
    • computableFunction{Function}
      A handler to the function which returns the computed value of the dataset based on other values.
    juci.addComputedDataset("cities", function(){
	var selCountry = this.country();
	this.city(null);
	return selCountry ? selCountry.cities() : [];
});
    See:
    juci.addDataset
    knockout computedObservable computedObservable
  • addDataset(id, value, noDeepMap, mappedData, mapping)
    Adds a dataset to the view model referred with the defined key.
    Syntax:
    • juci.addDataset(id, value);
    • juci.addDataset(mappedData [, mapping]);
    • juci.addDataset(id, value [, noDeepCopy]);
    Parameters:
    • id{String}
      Identifier/Key reference for the dataset on the view model.
    • mappedData{Object}
      All properties of the object are mapped to the view model.
    • value{Object|Boolean|Number|String}
      Value of the dataset.
    • noDeepMap{Boolean} Optional
      If true, only first level of properties are mapped
    • mapping{Object} Optional
      Mapping configuration
    data-bind="ref: pkey().key1"
    juci.addDataset("pkey", {"key1": "value1", "key2" : [], "key3" : { "key4": "value4"}});
    data-bind="ref: pkey().key3.key4"
    juci.addDataset("pkey", {"key1": "value1", "key2" : [], "key3" : { "key4": "value4"}}, true);
    juci.addDataset("key", "value");
// All keys are observable, i.e. to access key4, key3().key4 should be used
juci.addDataset({"key1": "value1", "key2" : [], "key3" : { "key4": "value4"}});
// key5 will not be observable
juci.addDataset("key3", {"key5":{"key4": ko.observable("value4")}}, true);
// Refer key4 as key3.key4
juci.addDataset({"key1": ko.observable("value1"), key2 : ko.observable([]), key3 : { key4: ko.observable("value4")}}, {copy: ["key3"]});
    See:
    Knockout observable observable
    addDataset should be done before referencing in the controls. Should be done only once. Every key in the dataset defined becomes observable.
  • bindDatasetListener(id, handler, context)
    Adds a listener to a dataset based on the key to the dataset. The listener is called whenever the dataset is modified.
    Parameters:
    • id{String}
      Identifier/Key reference for the dataset on the view model.
    • handler{Function}
      A handler function to execute when the dataset is changed
    • context{Object} Optional
      Context in which the handler function should execute.
    The id referenced is the type of the event.
  • browserHeight()
    Gets the height of the browser viewport.
    Returns:
    {Number} height of the browser viewport
  • browserWidth()
    Gets the width of the browser viewport.
    Returns:
    {Number} width of the browser viewport
  • cancelAnimationFrame(requestId)
    Cancels an animation frame request previously scheduled through a call to juci#requestAnimationFrame
    Parameters:
    • requestId{Number}
      request id value returned by the call to juci#requestAnimationFrame that requested the callback.
  • closePanel()
    Closes the current sub view opened, for e.g: options list of a selectbox. Else calls $m.close().
  • closest(selector, element)
    Find the closest matching parent for the CSS selector from the specified HTML element.
    Parameters:
    • selector{String}
      A string containing a selector expression. element
    • element{HTMLElement}
      A HTML element to be used as context for the search.
    juci.closest(".something", juci.findById("selement"));
    Returns:
    {juci.elem} juci.elem that matches the selector; null, otherwise.
  • dataset(id, value, noDeepMap, mapping)
    Gets/Sets the value for the passed key in the view model. Transactional in nature, i.e. any change done to the value returned from the dataset API does not get reflected in the view model. In order to update the view model, the dataset API has to be called in the set mode.
    Syntax:
    • juci.dataset(id, value);
    • juci.dataset(mappedData [, mapping]);
    • juci.dataset(id, value [, noDeepCopy]);
    Parameters:
    • id{String}
      Identifier/Key reference for the dataset on the view model.
    • value{Object|Boolean|Number|String} Optional
      Value of the dataset
    • noDeepMap{Boolean} Optional
      If true, only first level of properties are mapped {Object} Mapping configuration {Object} Mapping configuration
    • mapping{Object} Optional
      Mapping configuration.
    Every key defined becomes observable.
  • find(selector, element)
    Find elements that match the specified CSS selector. You can optionally specify a HTML element which children are matched against the selector.
    Parameters:
    • selector{String}
      A string containing a selector expression.
    • element{HTMLElement} Optional , Default: document.body
      A HTML element to be used as context for the search.
    juci.find(".something[attribute]");
    Returns:
    {Array} array of juci.elems that match the selector.
  • findByAttr(attribute, element)
    Find elements that have the specified attribute. You can optionally specify a HTML element which children are searched for the specified attribute.
    Parameters:
    • attribute
      {String} A string containing the name of the attribute.
    • element Optional , Default: document.body
      {HTMLElement} A HTML element to be used as context for the search.
    juci.elem.findByAttr("something");
    Returns:
    {Array} of juci.elem objects
  • findByAttrParam(param, element)
    Find elements that have the specified attributes and values. You can optionally specify a HTML element which children are searched for the attribute value.
    Parameters:
    • element{HTMLElement} Optional , Default: document.body
      {HTMLElement} A HTML element to be used as context for the search.
    • param{Object}
      An object containing attribute names as keys and attribute values as values.
    juci.findByAttrParam({"something": "value", "somethingElse", "anothervalue"});
    Returns:
    {Array} array of juci.elems that match the selector.
  • findByAttrVal(attribute, value, element)
    Find elements that have the specified attribute and value. You can optionally specify a HTML element which children are searched for the attribute value.
    Parameters:
    • attribute{String}
      A string containing the name of the attribute.
    • value{String}
      A string containing the value of the attribute.
    • element{HTMLElement} Optional , Default: document.body
      {HTMLElement} A HTML element to be used as context for the search.
    juci.findByAttrVal("something", "value");
    Returns:
    {Array} array of juci.elems that match the selector.
  • findByClass(className, element)
    Find elements that have the specified class. You can optionally specify a HTML element which children are searched for the specified class.
    Parameters:
    • className{String}
      A string containing the name of the class.
    • element{HTMLElement} Optional , Default: document.body
      {HTMLElement} A HTML element to be used as context for the search.
    juci.findByClass("something");
    Returns:
    {Array} array of juci.elems that match the selector.
  • findById(id)
    Finds an element that has the specified value in its 'id' attribute.
    Parameters:
    • id{String}
      A string containing the id of element.
    juci.findById("something");
    Returns:
    {juci.elem} juci.elem that has the specified id value; null, otherwise.
  • findByTag(tag, element)
    Find elements that have the specified tag. You can optionally specify a HTML element which children are searched for the specified tag.
    Parameters:
    • tag{String}
      A string containing the name of the tag.
    • element{HTMLElement} Optional , Default: document.body
      {HTMLElement} A HTML element to be used as context for the search.
    juci.findByTag("input");
    Returns:
    {Array} array of juci.elems that match the selector.
  • getControl(id)
    Parameters:
    • id{String|HTMLElement|juci.elem}
      ID of the control, or the element for the control
    juci.getControl("my-control").value("I set a new value");
    Returns:
    {basecontrol} control implementing the basecontrol interface
  • getDataset(id)
    Returns the ko.observable for the passed key. All operations as described in knockout docs can be applied.
    Parameters:
    • id{String}
      Identifier/Key reference for the dataset on the view model.
    Returns:
    {ko.observable} ko.observable
  • onBeforeReady(handler, context)
    Registers a handler function to call when the juci#onBeforeReady event fires.
    Parameters:
    • handler
      {Function} A handler function to execute when the juci#onBeforeReady event fires.
    • context{Object} Optional
      Context in which the handler function should execute.
  • onReady(handler, context)
    Registers a handler function to call when the juci#onReady event fires.
    Parameters:
    • handler{Function}
      A handler function to execute when the juci#onReady event fires.
    • context{Object} Optional
      Context in which the handler function should execute.
  • requestAnimationFrame(callback, element, context, args)
    requestAnimationFrame tells the browser that you wish to perform an animation and requests that the browser schedule a repaint of the window for the next animation frame. This API is a cross browser polyfill. More information on requestAnimationFrame can be found here.
    Parameters:
    • callback{Function}
      A function to invoke before the browser repaint.
    • element{HTMLElement} Optional , Default: document.body
      Element which is involved in the animation. For e.g. when doing an animation on canvas, this can be the <canvas> element. This parameter can provide slighter optimized repainting and can be ignored for most cases. Supported only in webkit browsers.
    • context{Object} Optional
      A HTMLElement or Object to be used as context in which the callback function should call.
    • args{Array} Optional
      A list of arguments to be passed to the callback method.
    Returns:
    {Number} is a long integer non-zero value that uniquely identifies the callback in the callback list. This value can be passed to the juci#cancelRequestAnimation method to cancel the refresh callback request.
    See:
    rAF
    more
  • setDataset(id, observable)
    Set the observable for the passed key in the view model.
    Parameters:
    • id{String}
      Identifier/Key reference for the dataset on the view model.
    • observable{ko.observable}
  • showAlertDialog(message, title, buttonText, callback)
    Displays an alert dialog with the specified title and message. The dialog dismisses when user taps on the button in the dialog.
    Syntax:
    • juci.showAlertDialog(message);
    • juci.showAlertDialog(message, callback);
    • juci.showAlertDialog(title, message);
    • juci.showAlertDialog(title, message, callback);
    • juci.showAlertDialog(message, callback, btnText);
    • juci.showAlertDialog(title, message, btnText);
    • juci.showAlertDialog(title, message, btnText, callback);
    Parameters:
    • callback{Function} Optional
      A function to invoke when user taps on the button in the alert dialog.
    • title{String} Optional , Default: Alert
      A string containing the title text to display in the alert dialog.
    • buttonText{String} Optional , Default: OK
      A string containing the text to display in the button in the dialog.
    • message{String}
      A string containing the message text to display in the alert dialog. The string can also be a formatted HTML content.
  • showConfirmDialog(message, title, buttons, callback)
    Displays a confirm dialog with the specified title and message. By default, the dialog displays Yes, No and Cancel buttons which can be customized by specifying labels. The dialog dismisses when user taps on either of the buttons in the dialog.
    Syntax:
    • juci.showConfirmDialog(message, callback);
    • juci.showConfirmDialog(message, buttons, callback);
    • juci.showConfirmDialog(title, message, callback);
    • juci.showConfirmDialog(title, message, buttons, callback);
    Parameters:
    • callback{Function} Optional
      A function to invoke when user taps on the button in the confirm dialog. The function receives the following object as parameter.
      • e{Object}
        • option{Number}
          A number containing the index of the button tapped by the user. The index starts from 0 starting from the first button displayed in the dialog.
    • title{String} Optional , Default: Alert
      A string containing the title text to display in the alert dialog.
    • message{String}
      A string containing the message text to display in the alert dialog. The string can also be a formatted HTML content.
    • buttons{Array} Optional , Default: ['Yes', 'No', 'Cancel']
      An array of strings containing the text to display in the buttons in the confirm dialog. The minimum length of the array is 2 and maximum is 3.
  • showErrorDialog(message, title, buttonText, callback)
    Displays an error dialog with the specified title and message. The dialog dismisses when user taps on the button in the dialog.
    Syntax:
    • juci.showErrorDialog(message);
    • juci.showErrorDialog(message, callback);
    • juci.showErrorDialog(title, message);
    • juci.showErrorDialog(title, message, callback);
    • juci.showErrorDialog(message, callback, btnText);
    • juci.showErrorDialog(title, message, btnText);
    • juci.showErrorDialog(title, message, btnText, callback);
    Parameters:
    • callback
      {Function} A function to invoke when user taps on the button in the error dialog.
    • title{String} Optional , Default: Error
      A string containing the title text to display in the error dialog.
    • buttonText{String} Optional , Default: OK
      A string containing the text to display in the button in the dialog.
    • message{String}
      A string containing the message text to display in the error dialog. The string can also be a formatted HTML content.
  • showInfoDialog(message, title, buttonText, callback)
    Displays an info dialog with the specified title and message. The dialog dismisses when user taps on the button in the dialog.
    Syntax:
    • juci.showInfoDialog(message);
    • juci.showInfoDialog(message, callback);
    • juci.showInfoDialog(title, message);
    • juci.showInfoDialog(title, message, callback);
    • juci.showInfoDialog(message, callback, btnText);
    • juci.showInfoDialog(title, message, btnText);
    • juci.showInfoDialog(title, message, btnText, callback);
    Parameters:
    • callback{Function} Optional
      A function to invoke when user taps on the button in the info dialog.
    • title{String} Optional , Default: Info
      A string containing the title text to display in the info dialog.
    • buttonText{String} Optional , Default: OK
      A string containing the text to display in the button in the dialog.
    • message{String}
      A string containing the message text to display in the info dialog. The string can also be a formatted HTML content.
  • showWarningDialog(message, title, buttonText, callback)
    Displays an warning dialog with the specified title and message. The dialog dismisses when user taps on the button in the dialog.
    Syntax:
    • juci.showWarningDialog(message);
    • juci.showWarningDialog(message, callback);
    • juci.showWarningDialog(title, message);
    • juci.showWarningDialog(title, message, callback);
    • juci.showWarningDialog(message, callback, btnText);
    • juci.showWarningDialog(title, message, btnText);
    • juci.showWarningDialog(title, message, btnText, callback);
    Parameters:
    • callback{Function}
      A function to invoke when user taps on the button in the warning dialog.
    • title{String} Optional , Default: Warning
      A string containing the title text to display in the warning dialog.
    • buttonText{String} Optional , Default: OK
      A string containing the text to display in the button in the dialog.
    • message{String}
      A string containing the message text to display in the warning dialog. The string can also be a formatted HTML content.
  • unbindDatasetListener(id, handler, context)
    Removes a listener to a dataset based on the key.
    Parameters:
    • id{String}
      Identifier/Key reference for the dataset on the view model.
    • handler{Function}
      A handler function to execute when the dataset is changed
    • context{Object} Optional
      Context in which the handler function should execute.
  • updateDataset(id, value, index)
    Update the observable for the passed key and index in the view model.
    Parameters:
    • id{String}
      Identifier/Key reference for the dataset on the view model.
    • value{Object|Boolean|Number|String}
      Value of the dataset
    • index{Number} Optional
      If the dataset is an array, the index at which the update should happen

Events

  • beforeready()
    Fires when the DOM is fully loaded and the juci.elem wrappers are initialized. This event is the preferred place to update the attributes in the HTML elements i.e. the definitions of juci controls. Use juci#onBeforeReady method to register a handler function to this event.
    The beforeready event is not equal to or replacement of <body onload=""> attribute. If load must be used, do not use the beforeready event. Note that juci.elem wrappers will not be ready in the load event.
  • ready()
    Fires when juci is completely initialized. This event is the preferred place to write the custom initializations for the page.
    This event is synonymous to $m#ready event and either of them can be used.