and finally construct our own Knockout observable to help populate the component. and copy that into our JavaScript: define(,
Then in the Cookbook's JavaScript section we identify the associated library dependency for the component: I do think the choice of "value: value" is poor for teaching purposes, rather it should be "value: myValue" to be clearer what is the property name, and what is holding the value to show. Read and follow the associated recipe which is typically the following stepsĬopy the component's HTML markup to our page & customize properties where neededĪdd the component's library to the page's JavaScript module's require() or define() RequireJSįor example imagine we wanted to add a simple input text component from the Cookbook to our dashboard page:įollowing the recipe we identify the component's markup and copy it into our page. In order to add a component to our JET application, we identify the specific component in the Cookbook we want to use and:
#Oracle jet calendar code
These act as a blank canvas for us to add code and try out our own work, but have all the plumbing set up so we don't need to configure the JET application itself. and then modifying one of the separate modules such as src/js/views/dashboard.html: In order to add JET UI components to our own application we are best to start with generating a JET application via a Yeoman template: yo oraclejet MyWebProject -template=navbar As such it's not necessary to learn about all the components to start with, rather, we can learn the basics from a small set of UI components in each category and then expand our knowledge to cover the other components on demand. Individual components may look and behave differently, but within the same category have similar programmatic structures.
Overall the components are broken into 5 to 6 categories: Potentially the best feature of the Cookbook is the code can be edited and tested live so we can see what our changes do, without having to build 1001 small test applications. The cookbook is a live JET website demonstrating all the JET UI components in action, with numerous examples for each component including the HTML & JavaScript used. Oracle JET CookbookĪs a developer working with Oracle JET UI Components, a valuable tool if not most valuable is the Oracle JET Cookbook. The components out of the box also support keyboard navigation, mobile-friendly touch support, animations, drag and drop, and data validation and conversion where appropriate. The JET components based on JQuery UI Widgets take on a number of responsibilities required for enterprise websites including support for WCAG2.0 accessibility compliance and internationalization. At the time this article was published, JET had just on 61 different component types with more coming each release: Oracle JET focuses on delivering rich client-side web components written in HTML5, CSS3, and JavaScript, that are designed predominately for web and mobile applications working with and visualizing data.
#Oracle jet calendar series
Following on in my article series sharing what I've learned about Oracle JET (look to the bottom of this article for the complete article series), in this article given we've now explored RequireJS and Knockout, I feel comfortable enough to investigate Oracle JET's UI components for web development.
0 kommentar(er)
