B4J Tutorial Beginning Bootstrap 4 with OneEvery

Hi

B4J App
User Manual


What is OneEvery?

This is a work in progress app that one can use to learn the different web frameworks available. Currently this comes with Bootstrap 4 where one can 1. create the various HTML elements, 2. add attributes and 3. classes to them and 4. see the resulting output in real time. A lot of bootstrap components have been covered already.

This is built on top of the HTML Element class, the Editable TableView. The editable tableview has now been updated to have CRUD functionality as it is now linked to an underlying SQLite database with some additional properties to make that go.

Why OneEvery?

I wanted to learn what Bootstrap is all about and thought of something that I can build and use offline with B4J while reading my bootstrap books. I noted that in some instances the code in the books does not work as expected and is sometimes different to the provided downloads. This is providing me the learning experience and also the ability of knowing what I can play around with.

What you get out of this?

Well with some clicking here and there and changing this and that, you get HTML source code depending on what you want to create. A parent child relationship is also maintained for the various child relationships, e.g. divs hosting other divs.

Things to do:

• Own Inline Style Code Adding i.e. style property of an element
• Own Javascript Code Adding i.e functions for document.ready and for active components
• Adding css and javascript files
• Debug some components that don't work as expected.
• Add a treeview for the element structure that one can manipulate easily
• Add Active Components (those that depend on JavaScript)
• Perhaps add a CDA

Related Articles

Custom Views
JQM.Show

 

[Mashiane]

Almost close to finishing the various html components for bootstrap 4

Download B4J APP


Added

• Inline CSS addition to any html element
• Adding any css and js file to any website project
• Organized the elements per framework and updated the tree structure
• Two modes to view one's elements (bottom view and right side view)
• Add child elements to elements & wrapping elements inside others.
• JTidy to clean up and format the HTML source code.

To Do

• Active Components (Javascript Dependent)
• Page Creation from built element templates
• Automated Property Bag creation for built element templates

 

[Mashiane]

I wanted to use already existing bootstrap code to see its result and also ability to just save the template inside OneEvery. DevDocs has a lot of code on the various javascript framework and libraries. The result has the nice feature to also built the 'structure' of the pasted html code in the treeview. jTidy's functionality to parse the html code became handy to save the individual elements including their attributes and classes to the database.

 

[Mashiane]

CLI (Command Line Interface) for OneEvery

So I'm sitting and thinking, what if I add a CLI to OneEvery? Something that will take care of the usual small tasks like creating a project and serving it to a browser.

So after a couple of hours just managed to get a CLI working. Not so many commands anyway but just a few to get something going.

1. type help to get a list of commands that you can use and press enter
2. create a website project example 'create contacts com.MashyContacts Contacts' i.e. this creates a directory structure for your project for publishing.
3. change the directory to project example 'cd contacts'
4. serve the app to a browser 'serve contacts' i.e. build the website and render it to a website.

 

[Mashiane]

Added embedded video, modal, grid and carousel templates too.

First post has updated B4J App.

 

[Mashiane]

So far so good

Most elements have been created and all attributes and classes for BootStrap 4 have been explored. Time to create element templates to create page components and then to create fully working webiste pages inside OneEvery. I still dont want to hard code any html element creation so that this is flexible as it can be.

The CLI has been boosted to have additional commands like adding, renaming, activating pages.

First post includes a user manual for OneEvery in pdf.

Let me explore.

 

[Mashiane]

The CLI is getting some ground work as now it has some 19 commands to maintain pages, elements and classes.

The help command will list all commands that you can use in the CLI

The create pages, elements, classes are stored in a database as per JSON structure shown below. Soon the output of the created pages will be 'previewable' from the CLI.

 

[Mashiane]

The HTML5 framework has about 71 and more html tags that one can use to create the various HTTML elements.

With the OneEvery CLI, it was easy to demonstrate how one can create a grid and any other component and add both attribute properties and style classes to it.

With the Attributes and Elements command (treeview) I had built most of the bootstrap components. This was composed of some elements that had children html elements inside them etc. Entering each line in the CLI to create each complex component would be tedious to say the least. So came into existence the Macros.

Macros are created specifically for the CLI commands and in this instance will be used to create any HTML component. The Macro name here is TBJumbotron is is what is called in the CLI. You provide it the arguments (each without spaces) to make it work.

 

[Mashiane]

The Moment of Truth: Lets create working Components

Up until now we have been building the Bootstrap framework into OneEvery to enable the creation of websites etc. With the addition of the Macro functionality, below is an addition of an Abbreviation component into a page by executing the Macro.

• First, the list of available Macros is availed per framework in the treeview.
• To add a component (using a macro), select the respective Macro applicable. The names have tried to be as descriptive as possible.
• The TBabbreviation component expects 3 arguments, these are entered as myab4 B4J and Basic 4 Java
• After that the Macro gears are selected to build the code, this activates the Runner
• Selecting the Runn executes the code and the element is added to the page. Moving the element to be a child of another one would just rin set_parent in the CLI.

 

[Mashiane]

Above, I have been able to create Macros to add components. There are however style classes that are falling within the same category and only 1 of the classes is acceptable. In case you had already added one of the classes, it should be easier just for the other same category classes to be removed.

Below a macro for the "Active" class is added and then for each of the Alert Colors.

Thus running TBAlertWarning as an example, will remove all other classes related to that category in an element and only add 'alert-warning' class to the element.