{"id":27099447,"url":"https://github.com/javaxt-project/javaxt-webcontrols","last_synced_at":"2025-07-28T08:04:58.699Z","repository":{"id":52277441,"uuid":"75202440","full_name":"javaxt-project/javaxt-webcontrols","owner":"javaxt-project","description":"UI components used to build rich web applications","archived":false,"fork":false,"pushed_at":"2025-05-16T01:44:28.000Z","size":811,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-16T02:35:44.776Z","etag":null,"topics":["javascript","ui-components"],"latest_commit_sha":null,"homepage":"https://www.javaxt.com/javaxt-webcontrols/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javaxt-project.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.TXT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-11-30T15:55:12.000Z","updated_at":"2025-01-30T17:05:32.000Z","dependencies_parsed_at":"2024-04-26T17:27:10.734Z","dependency_job_id":"a646c10d-853c-4379-a205-3341dbe11b06","html_url":"https://github.com/javaxt-project/javaxt-webcontrols","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/javaxt-project/javaxt-webcontrols","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaxt-project%2Fjavaxt-webcontrols","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaxt-project%2Fjavaxt-webcontrols/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaxt-project%2Fjavaxt-webcontrols/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaxt-project%2Fjavaxt-webcontrols/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javaxt-project","download_url":"https://codeload.github.com/javaxt-project/javaxt-webcontrols/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaxt-project%2Fjavaxt-webcontrols/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267482004,"owners_count":24094508,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","ui-components"],"created_at":"2025-04-06T12:33:30.012Z","updated_at":"2025-07-28T08:04:58.673Z","avatar_url":"https://github.com/javaxt-project.png","language":"JavaScript","readme":"# Introduction\nThe javaxt-webcontrols library is a collection of lightwieght UI components and functions used to build rich web applications. \nThe library is implemented using 100% vanilla javascript and has no external dependencies.\n\n\n\n## Demos\nBelow is a list of demos of some of the components. \nOpen the source code in each page for more information on how the component is instantiated and stylized. Open the web console to see some of the events.\n\n- [Themes](https://javaxt-project.github.io/javaxt-webcontrols/demos/themes/Themes.html)\n- [Effects](https://javaxt-project.github.io/javaxt-webcontrols/demos/effects/Effects.html)\n- [Carousel](https://javaxt-project.github.io/javaxt-webcontrols/demos/carousel/Carousel.html)\n- [Slider](https://javaxt-project.github.io/javaxt-webcontrols/demos/slider/Slider.html)\n- [Switch](https://javaxt-project.github.io/javaxt-webcontrols/demos/switch/Switch.html)\n- [Window](https://javaxt-project.github.io/javaxt-webcontrols/demos/window/Window.html)\n- [Callout](https://javaxt-project.github.io/javaxt-webcontrols/demos/callout/Callout.html)\n- [DatePicker](https://javaxt-project.github.io/javaxt-webcontrols/demos/datepicker/DatePicker.html)\n- [DateInput](https://javaxt-project.github.io/javaxt-webcontrols/demos/datepicker/DateInput.html)\n- [ComboBox](https://javaxt-project.github.io/javaxt-webcontrols/demos/combobox/ComboBox.html)\n- [Checkbox](https://javaxt-project.github.io/javaxt-webcontrols/demos/checkbox/Checkbox.html)\n- [Button](https://javaxt-project.github.io/javaxt-webcontrols/demos/button/Button.html)\n- [Tree](https://javaxt-project.github.io/javaxt-webcontrols/demos/tree/Tree.html)\n- [Accordion](https://javaxt-project.github.io/javaxt-webcontrols/demos/accordion/Accordion.html)\n- [MenuLayout](https://javaxt-project.github.io/javaxt-webcontrols/demos/layouts/MenuLayout.html)\n- [BarGraph](https://javaxt-project.github.io/javaxt-webcontrols/demos/bargraph/BarGraph.html)\n\n\n## General Usage\nMost of the UI components are instantiated using a `parent` and a `config` object. \nThe `parent` is a DOM element in which to render the component and the `config` object is \na JSON object with configuration settings. There are default configuration settings defined \nwithin each component called `defaultConfig`. Developers can override any of the default \nsettings by defining thier own config.\n\nHere's an example of how to instantiate one of the UI components using a parent and a config object.\nOnce the component is instantiated, you can call any of the pubic methods defined in the class.\n\n```javascript\n\n//Select element used hold the component\nvar parent = document.body;\n\n//Define config settings (optional)\nvar config = {\n    //put config options here\n};\n\n//Instantiate component\nvar window = new javaxt.dhtml.Window(parent, config);\n\n//Call public methods\nwindow.open();\n```\n\n## Public Methods and Event Listeners\nAny function in the javaxt classes that start with a `this` keyword is public and can be called after the class has been instantiated. \nMost of the functions have code however some do not. For example, in the `Window` class there is a method called `isOpen` that has code:\n```javascript\nthis.isOpen = function(){\n   return visible;\n}\n```\nIn contrast, there is a method called `onOpen` that has no body:\n```javascript\nthis.onOpen = function(){};\n```\nAs described in the docs, the `onOpen` method is called whenever the window is opened or made visible. Users can override these functions \nusing an instance of the window class to add thier own event listeners. Example:\n```javascript\nwindow.onOpen = function(){\n   //Do something!\n   console.log(window.getWidth(), window.getHeight());\n};\n```\n\n## Stylizing Components\nOne of the goals of this project is make it as easy as possible to customize and use the UI components. All of the UI classes have style definitions \nin the `defaultConfig` so you can render components out-of-the-box without any external stylesheets or CSS. \n\nThe style definitions in the `defaultConfig` allow users to customize individual elements within a UI component (title bar, footer, etc).\nThe default styles use camel-case varients of CSS keywords and are applied as inline `style` attributes for various DOM elements. \nUsers can tweak individual styles or provide CSS classes to use instead. Example:\n```javascript\n\n//Set style definition in a custom window config using CSS classes\nvar windowConfig = {\n    style : {\n        panel: \"window\",\n        header: \"panel-header window-header\",\n        title: \"panel-title window-title\",\n        button: \"window-header-button\",\n        buttonBar: \"window-header-button-bar\",\n        mask: \"window-mask\"\n    }\n};\n\n//Instantiate window with custom config\nvar window = new javaxt.dhtml.Window(parent, windowConfig);\n```\n\nUsing CSS classes is recommended, but not required. \n\n\n## Themes\nThis project includes two optional CSS files that developers can use to apply either a default blue/gray theme or a dark/black theme. \nThe example above uses CSS classes defined in the `default.css` with a blue/gray theme. Note that the themes directory also includes\na `default.js` file which has keyword mappings to various styles. You can use something similar in your application to simplify the \ncode used to configure classes. So instead of defining a `windowConfig` like we did in the previous example, you can use a lookup value\nlike this:\n```javascript\nvar window = new javaxt.dhtml.Window(parent, {\n   style: javaxt.dhtml.style.default.window\n});\n```\n\n## License\nJavaXT is an open source project released under an MIT License. Feel free to use the code and information found here as you like. \nThis software comes with no guarantees or warranties. You may use this software in any open source or commercial project.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaxt-project%2Fjavaxt-webcontrols","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavaxt-project%2Fjavaxt-webcontrols","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaxt-project%2Fjavaxt-webcontrols/lists"}