August 2010
In this tutorial we walk you through step by step how to implement jQuery user interface components into your Open Web Studio applications.
We show you how to create your own custom user interface using jQuery’s theme builder, and how to install the jQuery components into your DotNetNuke application.
JQuery is a public open source JavaScript library that is extremely popular in developing web applications today, it can provide any web application with an extremely rich user interface. There are several JavaScript libraries open and available today for developing web applications but jQuery has developed acceptance as a leading JavaScript library and has been adopted by both Open Web Studio and DotNetNuke communities.
We show you how to implement the date picker, an auto complete field and a tabbed interface.
We recommend you download the latest version of OWS from here:
www.openwebstudio.com
If you are new to OWS we recommend you first of all view the six part series on
How to Build a Knowledge Base Article Module.
The videos contain:
Video 1 - Introduction and Preparing a Control Header
- Introduction
- History of jQuery and DotNetNuke
- Explanation of how jQuery is already integrated in DNN and OWS
- jQuery settings in DotNetNuke
- jQuery settings in OWS
- How to implement the jQuery libraries to avoid potential conflicts and problems
- Adding an OWS module to a page and creating a new configuration
- How to create a control header to reference externally hosted versions of jQuery
Time Length: 7min 31secs
Video 2 - Navigating the jQuery Websites and Implementing a Date Picker
- Demonstration of the jQuery website and how to find the latest version
- Overview of the jQuery documentation website
- Overview of the jQuery user interface website
- How to use the jQuery Themeroller and the preset gallery
- How to deploy the date picker component into an OWS configuration
- Viewing the date picker source code and separating script elements from the HTML
- Entering the date picker script into the OWS configuration control header
- How to implement a function to pre label all jQuery functions and avoid conflicts
- Adding the input element into the OWS template
Time Length: 9min 54secs
Video 3 - How to Implement the Auto Complete and Tabs Components
- Demonstration of the date picker component working in the OWS configuration
- How to implement the auto complete function
- How to add the auto complete script to the OWS control header
- Adding the no conflict prefix
- How to utilize the OWS sub query function to read from the DNN database
- Removing elements from the sub query that are not required
- How to automatically escape the format parameter text for correct execution
- Adding the input element in the detail template
- How to implement the tabs jQuery function into the OWS configuration
- How to name each tab and insert a jQuery component
Time Length: 10min 31secs
Total Time Length: 27min 56secs
Comments