B4J Tutorial [OneEvery]: Using the CLI

Here we go

Anyway, having noted that the Twitter Bootstrap learning curve is going smoothly, OneEvery seems to be maturing surely but slowly for this part, a CLI (Command Line Interface) seemed the right thing to do.

With this, I'm able to maintain pages, maintain html elements and also maintain classes linked to each html element as demonstrated in this video.

I have opted for coding against drag n drop so that I can also learn as I go along. The nice thing is the underlying html code is independent of a framework really and the limitation is to ones imagination in terms of what one can do with the html and css.


Below are the most basic CLI commands and what they do.

active_page [pageName] - activate a page to make it default. Use ? as pageName to find which page is active
add_anchor [elID href] - add an anchor to the page
add_article [elID] - add an ARTICLE element
add_aside [elID] - add an ASIDE element
add_attribute [elID attribute value] - add attribute to an element
add_audio [elID] - add a AUDIO element
add_button [elID] - add a BUTTON element
add_canvas [elID] - add a CANVAS element
add_child [elID parentID] - add a new div component as a child to another
add_children [parentID child1 child2] - add child div chil1,child2 to parentid
add_class [elID className] - add a class to an element using the element id
add_datalist [elID] - add a DATALIST input element
add_date [elID] - add a DATE element
add_datetime [elID] - add a DATETIME input element
add_datetimelocal [elID] - add a DATETIME-LOCAL input element
add_div [elID] - add a div component
add_div2 [elID parentID] - add a new div component as a child to another
add_element [tag elID] - add an html element to the page e.g 'add_element div row1', row1 = unique elementid, div=tag instance.
add_email [elID] - add an email INPUT element
add_figcaption [elID] - add a FIGCAPTION element
add_figure [elID] - add a FIGURE element
add_file [elID] - add a FILE element
add_footer [elID] - add a FOOTER element
add_form [elID] - add a FORM element
add_header [elID] - add a HEADER element
add_hgroup [elID] - add a HGROUP element
add_keygen [elID] - add a KEYGEN element
add_li [elID] - add a LI element
add_mark [elID] - add a MARK element
add_meter [elID] - add a METER element
add_month [elID] - add a MONTH input element
add_nav [elID] - add a NAV element
add_number [elID] - add a number INPUT element
add_option [elID] - add an OPTION element
add_page [pageName pageTitle] - add a new page to the website named pageName with pageTitle.
add_progress [elID] - add a PROGRESS element
add_section [elID] - add a SECTION element
add_span [elID] - add a SPAN element
add_submit [elID] - add a SUBMIT input element
add_summary [elID] - add a SUMMARY element
add_tel [elID] - add a TEL element
add_text [elID] - add a text INPUT element
add_time [elID] - add a TIME element
add_time [elID] - add a TIME input element
add_ul [elID] - add a UL element
add_video [elID] - add a VIDEO element
add_week [elID] - add a WEEK input element
cd [appname] - change directory to the 'appname' and make the 'appname' default.
clear_name [elID] - clear the name attribute to be blank.
clear_text [elID] - clear the text attribute to be blank.
clear_value [elID] - clear the value attribute to be blank.
create [appName com.xxx.apptitle sitetitle] - create an app called appname with appID com.xxx.apptitle and site title.
delete_attribute [elID attribute] - delete an attribute from an element
delete_class [elID className] - delete a class linked to an element using the element id
delete_element [elID] - delete the element.
delete_page [pageName] - delete a page from the website.
list_attributes [elID] - list all attributes for the element
list_classes [elID] - list all classes for the element
list_elements - list all elements in the page in JSON format.
list_pages - list all pages for the website.
list_templates - list all templates for the active framework.
refresh_page [pageName] - refresh the page preview.
rename_element [oelID nelID] - change the element id.
rename_page [oldPageName newPageName] - renames a page from one name to another.
select_element [elID] - select an and make it default.
serve [appName] - build and serve the website to the browser.
serve_page [pageName] - serve a single page to the browser.
set_active [elID value] - update an active attribute of a component.
set_attribute [elID attrName attrValue] - set the element attribute to attrValue
set_autocomplete [elID on/off] - set the autocomplete to on/off
set_autofocus [elID] - update a autofocus attribute of a component.
set_autoplay [elID value] - set the autoplay attribute to an element
set_datetime [elID value] - set the datetime attribute to an element
set_element [elID value] - update/rename the element id.
set_form [elID value] - update a form attribute of a component.
set_height [elID value] - set the height attribute to an element
set_high [elID value] - set the high attribute to an element
set_href [elID href] - set the href to an element
set_list [elID value] - update the element list attribute.
set_low [elID value] - set the low attribute to an element
set_max [elID value] - set the max attribute to an element
set_min [elID value] - set the min attribute to an element
set_name [elID value] - update the element name.
set_optimum [elID value] - set the optimum attribute to an element
set_parent [elID parentlID] - set the parent element of elID to parentID
set_pattern [elID value] - set the pattern attribute to an element
set_placeholder [elID value] - update a placeholder attribute of a component.
set_poster [elID value] - set the poster attribute to an element
set_required [elID] - update a required attribute of a component.
set_source [elID value] - set the source attribute to an element
set_src [elID value] - set the src attribute to an element
set_step [elID value] - set the step attribute to an element
set_tabindex [elID value] - update a tabindex attribute of a component.
set_tag [elID value] - set the tag type for this element
set_text [elID value] - update a text attribute of a component.
set_type [elID value] - update the type attribute for the input element
set_typeof [elID value] - update the tag type for the element
set_value [elID value] - update a value attribute of a component.
set_width [elID value] - set the width attribute to an element
update_element [elID element/typeof/text/value/textafter/active/tabindex value] - update an element set a particular value.

These are accessible by typing help in the CLI command prompt.
Enjoy.

 

[Mashiane]

Here we create a row with some columns. Whilst one can create pages without a grid in Bootstrap, here I demonstrate how I can add columns of equal size to the row using nothing except style classes.


The CLI commands are:

adddiv cont (create a div named cont)
addclass cont container (make the div a container)
addchild r1 cont (add a div to the cont div named r1)
addclass r1 row (make the r1 div a row)
addchild r1c1 r1 (add a child div to r1 and name it r1c1)
addchild r1c2 r1 (add a child div to r1 and name it r1c3)
addchild r1c3 r1 (add a child div to r1 and make it r1c3)
addchild r1c4 r1 (add a child div to r1 and make it r1c4)
addclass r1c1 col
addclass r1c2 col
addclass r1c3 col
addclass r1c4 col

That should do it.

 

[Mashiane]

As the HTML elements are based on HTML 5, added to pages via the CLI, below is some example code of how one can add html elements to their pages using nothing but the CLI. Each indicates the element name, the out and then the CLI commands to type to generate that output on the page.

The code below produces these html5 controls.

The following section will briefly look at how you can create form controls using the CLI

Form

<form id="form1">
      <input id="txttel" type="tel" required="required"
      autocomplete="on" />
    </form>

1. addform form1
2. addtel txttel
3. setrequired txttel
4. setautocomplete txttel on
5. setparent txttel form1
6. cleartext form1
7. cleartext txttel

Submit Button

<input id="btnsubmit" type="submit" form="form1" />

1. addsubmit btnsubmit
2. setform btnsubmit form1
3. cleartext btnsubmit

Date

<input id="dtdate" type="date" />

1. adddate dtdate
2. cleartext dtdate

Range

<input id="range" value="10" type="range" max="100" min="0" />

1. addrange range
2. setvalue range 10
3. setmax range 100
4. setmin range 0
5. cleartext range

Meter

<meter id="meter" value="20" type="meter" max="100" min="0" high="0.4" low="0.3"></meter>

1. addmeter meter
2. setvalue meter 20
3. setmax meter 100
4. setmin meter 0
5. sethigh meter 0.4
6. setlow meter 0.3
7. cleartext meter

Progress

<progress id="progress" value="50" max="100"></progress>

1. addprogress progress
2. setvalue progress 50
3. setmax progress 100
4. cleartext progress

Number

<input id="xnumber" value="10" type="number" max="100" min="0" />

1. addnumber xnumber
2. setvalue xnumber 10
3. setmax xnumber 100
4. setmin xnumber 0
5. cleartext xnumber

DateTime

<input id="thetime" type="time" datetime="2018-01-30" />

1. adddatetime thetime
2. setdatetime thetime 2018-01-30
3. cleartext thetime

Video

<video id="myvideo" poster="img/img.png" width="300" height="300" autoplay="autoplay" controls="show" autobuffer="off" src="img/video.mp4"></video>

1. addvideo myvideo
2. setposter myvideo img/img.png
3. setwidth myvideo 300
4. setheight myvideo 300
5. setautoplay myvideo
6. setcontrols myvideo show (can also be hide)
7. setautobuffer myvideo off
8. setsrc myvideo img/video.mp4
9. cleartext myvideo
 
Button

<button id="btnthis">Button</button>

1. addbutton btnthis
2. cleartext btnthis

File
    
<input id="myfile" type="file" />

1. addfile myfile
2. cleartext myfile

Password

<input id="txtpassword" type="password" />

1. addpassword txtpassword
2. cleartext txtpassword

URL

<input id="url" type="url" />

1. addurl url
2. cleartext url

Select

<select id="myselect">
     <option id="male" value="male">MALE</option>
      <option id="female" value="female">FEMALE</option>
</select>

1. addselect myselect
2. cleartext myselect
3. addoption male
4. addoption female
5. setparent male myselect
6. setparent female myselect

Search

<input id="mysearch" type="search" />

1. addsearch mysearch
2. cleartext mysearch

Radio

<input id="myradio" type="radio" name="myradio" value="myradio" />MYRADIO

1. addradio myradio

Checkbox

<input id="mycheck" type="checkbox" />MYCHECK

1. addcheckbox mycheck

Color

<input id="mycolor" type="color" />MYCOLOR

1. addcolor mycolor

Email

<input id="myemail" type="email" />MYEMAIL

1. addemail myemail

Tel

<input id="mytel" type="tel" />MYTEL

1. addtel mysel

Span

<span id="myspan">MYSPAN</span>

1. addspan myspan

UL & LI (Unordered List)

<ul id="myul">
    <li id=myli>MYLI</li>
    <li id="myli1">MYLI1</li>
</ul>

1. addul myul
2. addli myli
3. addli myli1
4. setparent myli myul
5. setparent myli1 myul
6. cleartext myul

Div

<div id="mydiv" class="container border">MYDIV</div>

1. adddiv mydiv
2. addclass mydiv container
3. addclass mydiv border