Share My Creation Pen&Paper: PWCT for Basic ABMaterial WebApps

Pen&Paper Explained.png



The intension of Pen & Paper is the creation of ABMaterial WebApps as depicted in the drawing above. This was developed as a pet project out of a personal need to create ABMaterial WebApps. So far everything has gone well with the outputs.

1. The ABMaterial Library comes out with an XML file that has vast information about the components (depicted as classed) including their properties (attributes), events and methods. Any Library viewer is able to access these too.
2. These classes are represented as property bags in Pen & Paper so that I can create any component by just changing the various attributes, whether true/false, specifying text etc. The way the components are built, initialized and added to pages/containers/modal sheets has been explained in detail in the ABMaterial Demo, where all of this started.
3&4. On creating an ABM project with Pen & Paper, two databases are created, one to store the project definition (pages and component structures i.e. propertybags) and the other a production one that the data will be stored in. These are both in SQLite. Pen & Paper has functionality to perform a DAO (Data Access Object) link for each backend table and fields you want to link a component to. This is essence creates a CRUD code base. This was inspired by the ABMCRUD generator that produces a structure of ones ABMTable and ABMModal sheet with the specific input components.
5. On Project Build, Pen & Paper produces a complete B4J application including the source code that can be compiled to generate a working version of an ABM Web Application.
6. Pen & Paper does not come bundled with ABMaterial, is not affiliated with ABMaterial and to compile any Pen & Paper project to a fully fledged working ABM Webapp, you need the ABM Libraries. It is just a helper tool to elimitate the repetitive nature of creating projects, pages, containers, modalsheets, etc, in a programming without coding technology fashion. It does NOT in anyway replace ABM or intends to replicate its functionality as it just generates B4J code for your ABM application, this being achieved by use of property bags to create your components and generate the respective source code based on your options, eliminating the need to type code and what anyone gets out is the basic stuff to make ones project work. Not everything ABM is here anyway.

As everything that has a beginning has an end. This personal enjoyment project will stop being maintained as other things will evolve. As on 31 March 2018, there is no intention to advance this any further than what it is. Thanks for B4J this project was possible.

Steps in using Pen & Paper
  • Get everything related to Pen&Paper from this DropBox Link. Get executable from jar folder.
  • See videos below on usage and related articles
  • Please note that not all ABM components are covered with Pen&Paper as yet.

2018 Tutorials

Creating a Sign In Modal Dialog with Options

Interesting Tutorials
2017-12-20

Creating a simple 'Contacts' ABMaterial WebApp - Part 1
Creating a simple 'Contacts' ABMaterial WebApp - Part 2
Creating a simple 'Contacts' ABMaterial WebApp - Part 3

Below are some of the articles touching on code generated by Pen&Paper.

ABMaterial WebApps created with Pen&Paper

Bible.Show

CodeProject Article

Creating the Bible.Show WebApp with ABMaterial

Some YouTube Links


Pen&Paper is built using B4J and distributed with jMashProjectProfile.

NB: You will need the ABMaterial Framework to compile the generated source code.
 

Attachments

  • abmaterial.gif
    abmaterial.gif
    53.1 KB · Views: 13,435
  • MyMaterialLibraries.png
    MyMaterialLibraries.png
    16.4 KB · Views: 1,185
Last edited:

Harris

Expert
Licensed User
Longtime User
Thanks for the vote of confidence. I'm sure I will be able to figure most of it out bit by bit as I go along.
Judging by your other contributions, you shall have no problem with this en-devour. You also have the master to consult - alwaysbusy.

You are right, it is mostly repetitive. Duplicate methods appear in each page. With any luck, we can move these to a code module (shared), yet I am pretty sure ABM has already attempted this. Initialize, WebSocket_Connected, WebSocket_Disconnected, Page_ParseEvent (and others) need to be methods of each page. However, I am sure we could compact other methods into a shared code mod to help reduce the repetitiveness.

After 2.5 years of trying to master the technologies required to build web stuff (apps / front ends) - to no satisfactory avail, I stumbled upon ABM. It is a God Send. I never knew what I would use B4J for until this came along. ABM has taught me alot about B4J, since it is built on top of. All of what I know from B4A is easily transferred to the other B4X platforms. I could expend many more years to master Java, but why should I? B4X has already taken care of this for me...

I could go on and on about the virtues of B4X, yet I have already done so elsewhere and we already know these. Suffice to say that whatever anyone does to enhance this platform is a bonus for us all.

I look forward to your en devours and thanks for supporting this framework. I am the biggest benefactor.

Harris
 

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: ABMButton (incomplete but working)

I have been trying to work with components and started with a button, its simple but took a while to get around. There is a Connected/Disconnected issue when it runs in the browser. Perhaps someone with good eyes can point me to what I'm missing.

Reproduction:

1. Extract the attached zip and run the project. I have included my own exploration project here i.e MyMaterial.db.
2. Open the attached b4j project i.e. ABMaterialShow.b4j and run it.
3. File > Open, select MyMaterial.db as the project.
4. File > Compile, this now opens the web localhost location of the app and opens the generated project in b4j, this case MyMaterial.b4j
5. Run MyMaterial.bj4
6. Refresh the browser i.e http://localhost:51043/MyMaterial. See the attached image of what should be displayed if all works well.

Adding your own buttons to a page.

1. Select the page to add ABMButton to.
2. Components > ABMButton
3. Specify the ABButton properties in the provided section
4. Click Apply
5. File > Compile

Your project might not compile if its already running. You will need to open the task manager to kill java related processes and rerun the app.

Known Issues

1. In the web browser, the generated project in this case MyMaterial refreshes in a loop. I dont know what on earth is causing that.
2. Build > Build Application will compile your project to a jar file however on the second step where it asks you to Execute the generated jar file, for some reason I'm getting a Java Virtual Machine Error. I would like a way to compile, build, execute the app so that a user can just refresh the webbrowser to run the app.
3. I will master the grid soon enough, so for now, I'm using Row 1 and column 1 for the buttons.

Distribution

This project has been distributed with jMashProjectProfile
 

Attachments

  • ABMButton.png
    ABMButton.png
    11.4 KB · Views: 798
  • abmbutton1.png
    abmbutton1.png
    74.7 KB · Views: 788

alwaysbusy

Expert
Licensed User
Longtime User
Hi Mashiane,

I couple of things I noticed:

1. You have not set the InitialPage variable in ABMApplication (e.g. Dim InitialPage as String = "about/about.html". This causes your loop because it keeps reloading itself. (case sensitive!)
2. Do not add components to ABMApplication, add them to the about page. Besides properties like Title or Description, you should not make any changes to ABMApplication.bas. ABMApplication is just the entry point to the App and has to navigate to a page you've created yourself (like about.html).
3. Since a couple of versions, ABMaterial is dynamic so you should create components in ConnectPage(), not BuildPage(). See the source code of the demo app.
4. Isn't it possible you get the JVM error because you can't run two B4J projects in debug mode? It mentiones something like can't open port, looking for alternative.
 

Mashiane

Expert
Licensed User
Longtime User
Hi Mashiane,

I couple of things I noticed:

1. You have not set the InitialPage variable in ABMApplication (e.g. Dim InitialPage as String = "about/about.html". This causes your loop because it keeps reloading itself. (case sensitive!)
2. Do not add components to ABMApplication, add them to the about page. Besides properties like Title or Description, you should not make any changes to ABMApplication.bas. ABMApplication is just the entry point to the App and has to navigate to a page you've created yourself (like about.html).
3. Since a couple of versions, ABMaterial is dynamic so you should create components in ConnectPage(), not BuildPage(). See the source code of the demo app.
4. Isn't it possible you get the JVM error because you can't run two B4J projects in debug mode? It mentiones something like can't open port, looking for alternative.
Wow, thanks for the advice, will surely follow it up and update this.

The version 1.20 i have "template folder" structure then is old and needs to be updated to include the ConnectPage method.
I have also noted that the Large property of the ABMButton is no longer available. This also means the current DemoDynamic examples need to be updated to reflect the new changes where such exists, or perhaps for backward compatibility keep old properties intact.

I really appreciate your feedback. :)
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
I have also noted that the Large property of the ABMButton is no longer available. This also means the current DemoDynamic examples need to be updated to reflect the new changes where such exists, or perhaps for backward compatibility keep old properties intact.
I'll check the template, but you may be looking at a wrong version of the DemoDynamic project as according to my records, this is updated to the latest specs. (it is running on my abmaterial.com server)
 

Mashiane

Expert
Licensed User
Longtime User
I'll check the template, but you may be looking at a wrong version of the DemoDynamic project as according to my records, this is updated to the latest specs. (it is running on my abmaterial.com server)
On the "examples code" of the buttons, some have a Large property which does not exist anymore, thus the example code needs to be updated as most of us will use such as a base reference. That's what I meant.
 

Attachments

  • example.png
    example.png
    7.9 KB · Views: 655

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: ABMButton

This is a followup of post #5 above including advice received on post #8.

What's New:

  • The ABMApplication and ABMTemplate modules have been updated to reflect the ConnectPage methods.
  • On the menu of ABMaterial.Show there is now a Maintainance menu. This enables one to Cut, Copy, Paste and Delete components.
  • The page now has ShowLoaderType and Initial Page property. Check Initial Page if you want the page to be the initial page of the app. This automatically updates the App initial page property.

How to Cut/Copy a Component?

1. Select component to cut/copy
2. Select Maintainance > Cut / Copy
3. Select the page to copy/cut to
4. Select Maintaince > Paste

How to Delete a Component?

1. Select component to delete
2. Select Maintainance > Delete
3. Confirm on page

Will add functionality to remove the component from the tree later for cut and delete.

The Build functionality of the app will be attended to later. Here we go again...
 

Attachments

  • ABMButton.png
    ABMButton.png
    14.9 KB · Views: 627
  • cutcopypastecomponents.png
    cutcopypastecomponents.png
    4.5 KB · Views: 646

Cableguy

Expert
Licensed User
Longtime User
hi @Mashiane , do you intent do make it "visual"? almost like a WYSIWYG RAD tool?
since I discovered ABM I starting brewing the Idea of a "place and try" kind of thing...
what do you think?
 

Mashiane

Expert
Licensed User
Longtime User
hi @Mashiane , do you intent do make it "visual"? almost like a WYSIWYG RAD tool?
since I discovered ABM I starting brewing the Idea of a "place and try" kind of thing...
what do you think?
Hi Cableguy, currently this tool is for building your UI and the coding thereof you can add. Have you played around with the project?
 

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: Themes & Pages

What's New

1. Functionality to add SIMPLE 'shared' themes has been completed for the basic themes. Table themes, chart themes etc will be added soon.
2. BackColor and BackColorIntensity has been added for each page.
3. Theme selection for ABMButton is from a selection of added themes to the project. You need to create the themes first to theme the button.
4. The Project Tree is now categories to Themes and Pages. Selecting 'Themes', 'Pages' items gives a small guide.
5. A new menu for Themes has been added to add and delete themes.
6. Templates files have been updated to include the BackColor and BackColorIntensity properties

To Do:
Add functionality to cut/copy/paste/delete themes.
Finalize the more complex themes e.g. table, chart etc.

Enjoy...
 

Attachments

  • ABMButton.png
    ABMButton.png
    13.4 KB · Views: 707
  • addtheme.png
    addtheme.png
    21.7 KB · Views: 658
  • updatedtree.png
    updatedtree.png
    31.9 KB · Views: 666

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: Themes & Pages continuation from post #14 above

What's New

1. All themes have been completed with the exception of the ChartTheme, the "series" properties have been left out.
2. An updated menu for Themes has been done, this includes, Copy, Cut, Paste and Delete for each theme.
3. The Maintain > Delete (for components) is working.
4. The Theme adding/editing screen has been updated to include most properties for each theme.
5. You can now rename the theme and component name from the properties screen.

As an example, the source code below that is generated for the ABMShared module has been generated by ABMShow for MyMaterial Project.

B4X:
' add any shared themes
    MyTheme.AddButtonTheme("bluegrey")
MyTheme.Button("bluegrey").BackColor = ABM.COLOR_BLUEGREY
MyTheme.Button("bluegrey").BackColorIntensity = ABM.INTENSITY_DARKEN1

MyTheme.AddButtonTheme("darkred")
MyTheme.Button("darkred").BackColor = ABM.COLOR_RED
MyTheme.Button("darkred").BackColorIntensity = ABM.INTENSITY_DARKEN1

MyTheme.AddButtonTheme("transparent")
MyTheme.Button("transparent").BackColor = ABM.COLOR_TRANSPARENT

MyTheme.AddButtonTheme("darkgreen")
MyTheme.Button("darkgreen").BackColor = ABM.COLOR_GREEN
MyTheme.Button("darkgreen").BackColorIntensity = ABM.INTENSITY_DARKEN1

MyTheme.AddCardTheme("whitetitle")
MyTheme.Card("whitetitle").TitleForeColor = ABM.COLOR_WHITE

MyTheme.AddCardTheme("basiccard")
MyTheme.Card("basiccard").BackColor = ABM.COLOR_BLUEGREY
MyTheme.Card("basiccard").ActionForeColor = ABM.COLOR_ORANGE
MyTheme.Card("basiccard").TitleForeColor = ABM.COLOR_WHITE
MyTheme.Card("basiccard").ContentForeColor = ABM.COLOR_WHITE

MyTheme.AddCardTheme("redpanel")
MyTheme.Card("redpanel").BackColor = ABM.COLOR_RED
MyTheme.Card("redpanel").ContentForeColor = ABM.COLOR_WHITE

MyTheme.AddCellTheme("cellLB")
MyTheme.Cell("cellLB").BackColor = ABM.COLOR_LIGHTBLUE
MyTheme.Cell("cellLB").BorderColor = ABM.COLOR_WHITE
MyTheme.Cell("cellLB").BorderWidth = 1

MyTheme.AddCellTheme("aligncenter")
MyTheme.Cell("aligncenter").Align = ABM.CELL_ALIGN_CENTER

MyTheme.AddChartTheme("chartsidebar")
MyTheme.Chart("chartsidebar").BackColor = ABM.COLOR_WHITE
MyTheme.Chart("chartsidebar").ZDepth = ABM.ZDEPTH_2
MyTheme.Chart("chartsidebar").BackColorIntensity = ABM.INTENSITY_LIGHTEN5

MyTheme.AddChartTheme("chart1theme")

MyTheme.AddChartTheme("chart2theme")
MyTheme.Chart("chart2theme").BackColor = ABM.COLOR_WHITE
MyTheme.Chart("chart2theme").ZDepth = ABM.ZDEPTH_1

MyTheme.AddChartTheme("chart4theme")
MyTheme.Chart("chart4theme").BackColor = ABM.COLOR_WHITE
MyTheme.Chart("chart4theme").ZDepth = ABM.ZDEPTH_1

MyTheme.AddChartTheme("chart5theme")
MyTheme.Chart("chart5theme").LabelColor = ABM.COLOR_WHITE

MyTheme.AddContainerTheme("footertheme")
MyTheme.Container("footertheme").BackColor = ABM.COLOR_LIGHTBLUE
MyTheme.Container("footertheme").BackColorIntensity = ABM.INTENSITY_DARKEN3

MyTheme.AddContainerTheme("lightblue")
MyTheme.Container("lightblue").BackColor = ABM.COLOR_LIGHTBLUE
MyTheme.Container("lightblue").BackColorIntensity = ABM.INTENSITY_DARKEN2

MyTheme.AddContainerTheme("darkblue")
MyTheme.Container("darkblue").BackColor = ABM.COLOR_LIGHTBLUE
MyTheme.Container("darkblue").BackColorIntensity = ABM.INTENSITY_DARKEN3

MyTheme.AddContainerTheme("modalcontent")
MyTheme.Container("modalcontent").BackColor = ABM.COLOR_WHITE

MyTheme.AddDividerTheme("white")
MyTheme.Divider("white").ForeColor = ABM.COLOR_WHITE

MyTheme.AddImageSliderTheme("myslider")
MyTheme.ImageSlider("myslider").ZDepth = ABM.ZDEPTH_1
MyTheme.ImageSlider("myslider").ActiveBulletColor = ABM.COLOR_LIGHTBLUE
MyTheme.ImageSlider("myslider").InactiveBulletColor = ABM.COLOR_BLUEGREY
MyTheme.ImageSlider("myslider").InactiveBulletColorIntensity = ABM.INTENSITY_LIGHTEN4
MyTheme.ImageSlider("myslider").Interval = 3000

MyTheme.AddLabelTheme("whitefc")
MyTheme.Label("whitefc").ForeColor = ABM.COLOR_WHITE

MyTheme.AddLabelTheme("justify")
MyTheme.Label("justify").Align = ABM.TEXTALIGN_JUSTIFY

MyTheme.AddLabelTheme("lightblue")
MyTheme.Label("lightblue").ForeColor = ABM.COLOR_LIGHTBLUE
MyTheme.Label("lightblue").ForeColorIntensity = ABM.INTENSITY_DARKEN2

MyTheme.AddLabelTheme("white")
MyTheme.Label("white").Align = ABM.CELL_ALIGN_CENTER
MyTheme.Label("white").IconColor = ABM.COLOR_WHITE
MyTheme.Label("white").ForeColor = ABM.COLOR_WHITE

MyTheme.AddListTheme("list1theme")
MyTheme.List("list1theme").BackColor = ABM.COLOR_WHITE
MyTheme.List("list1theme").ItemBackColor = ABM.COLOR_BLUEGREY
MyTheme.List("list1theme").SubItemBackColor = ABM.COLOR_WHITE

MyTheme.AddListTheme("list3theme")
MyTheme.List("list3theme").BackColor = ABM.COLOR_WHITE
MyTheme.List("list3theme").ItemBackColor = ABM.COLOR_LIME
MyTheme.List("list3theme").SubItemBackColor = ABM.COLOR_WHITE
MyTheme.List("list3theme").SubItemDividerColor = ABM.COLOR_WHITE

MyTheme.AddNavigationBarTheme("nav1theme")
MyTheme.NavigationBar("nav1theme").TopBarBackColor = ABM.COLOR_LIGHTBLUE

MyTheme.AddNavigationBarTheme("nav2theme")
MyTheme.NavigationBar("nav2theme").TopBarBackColor = ABM.COLOR_RED

MyTheme.AddTableTheme("params")
MyTheme.Table("params").ZDepth = ABM.ZDEPTH_2

MyTheme.AddTableTheme("tbl1theme")
MyTheme.Table("tbl1theme").ZDepth = ABM.ZDEPTH_1

MyTheme.AddTabsTheme("tabsgreen")
MyTheme.Tabs("tabsgreen").ForeColor = ABM.COLOR_AMBER
MyTheme.Tabs("tabsgreen").HoverForeColor = ABM.COLOR_GREEN
MyTheme.Tabs("tabsgreen").IndicatorColor = ABM.COLOR_GREEN

MyTheme.AddToastTheme("toast")
MyTheme.Toast("toast").Rounded = False
MyTheme.Toast("toast").ActionForeColor = ABM.COLOR_ORANGE

MyTheme.AddToastTheme("toastred")
MyTheme.Toast("toastred").Rounded = False
MyTheme.Toast("toastred").BackColor = ABM.COLOR_RED
MyTheme.Toast("toastred").ActionForeColor = ABM.COLOR_BLACK

MyTheme.AddTreeTableTheme("view1")

MyTheme.Table("params").AddCellTheme("header")
MyTheme.Table("params").Cell("header").BackColor = ABM.COLOR_BLUEGREY
MyTheme.Table("params").Cell("header").BackColorIntensity = ABM.INTENSITY_DARKEN2
MyTheme.Table("params").Cell("header").ForeColor = ABM.COLOR_WHITE

MyTheme.Table("params").AddCellTheme("name")
MyTheme.Table("params").Cell("name").VerticalAlign = ABM.TABLECELL_VERTICALALIGN_TOP
MyTheme.Table("params").Cell("name").BackColor = ABM.COLOR_BLUEGREY
MyTheme.Table("params").Cell("name").BackColorIntensity = ABM.INTENSITY_LIGHTEN2

MyTheme.Table("params").AddCellTheme("description")
MyTheme.Table("params").Cell("description").VerticalAlign = ABM.TABLECELL_VERTICALALIGN_TOP
MyTheme.Table("params").Cell("description").BackColor = ABM.COLOR_WHITE

MyTheme.Table("tbl1theme").AddCellTheme("headerfooter")
MyTheme.Table("tbl1theme").Cell("headerfooter").BackColor = ABM.COLOR_BLUEGREY
MyTheme.Table("tbl1theme").Cell("headerfooter").ForeColor = ABM.COLOR_WHITE

MyTheme.Table("tbl1theme").AddCellTheme("headerfooterright")
MyTheme.Table("tbl1theme").Cell("headerfooterright").Align = ABM.TABLECELL_HORIZONTALALIGN_RIGHT
MyTheme.Table("tbl1theme").Cell("headerfooterright").BackColor = ABM.COLOR_BLUEGREY
MyTheme.Table("tbl1theme").Cell("headerfooterright").ForeColor = ABM.COLOR_WHITE

MyTheme.Table("tbl1theme").AddCellTheme("nocoloredit")
MyTheme.Table("tbl1theme").Cell("nocoloredit").IsEditable = True
MyTheme.Table("tbl1theme").Cell("nocoloredit").ActiveBackColor = ABM.COLOR_BLUEGREY
MyTheme.Table("tbl1theme").Cell("nocoloredit").ActiveBackColorIntensity = ABM.INTENSITY_LIGHTEN2
MyTheme.Table("tbl1theme").Cell("nocoloredit").InputMask = "'alias':'decimal', 'digits': 2"

MyTheme.Table("tbl1theme").AddCellTheme("positive")
MyTheme.Table("tbl1theme").Cell("positive").Align = ABM.TABLECELL_HORIZONTALALIGN_RIGHT
MyTheme.Table("tbl1theme").Cell("positive").ActiveBackColor = ABM.COLOR_GREEN
MyTheme.Table("tbl1theme").Cell("positive").BackColor = ABM.COLOR_GREEN
MyTheme.Table("tbl1theme").Cell("positive").BackColorIntensity = ABM.INTENSITY_LIGHTEN3
MyTheme.Table("tbl1theme").Cell("positive").ActiveBackColorIntensity = ABM.INTENSITY_LIGHTEN1

MyTheme.Table("tbl1theme").AddCellTheme("negative")
MyTheme.Table("tbl1theme").Cell("negative").Align = ABM.TABLECELL_HORIZONTALALIGN_RIGHT
MyTheme.Table("tbl1theme").Cell("negative").ActiveBackColor = ABM.COLOR_RED
MyTheme.Table("tbl1theme").Cell("negative").BackColor = ABM.COLOR_RED
MyTheme.Table("tbl1theme").Cell("negative").BackColorIntensity = ABM.INTENSITY_LIGHTEN3
MyTheme.Table("tbl1theme").Cell("negative").ActiveBackColorIntensity = ABM.INTENSITY_LIGHTEN1

MyTheme.Table("tbl1theme").AddCellTheme("aligntop")
MyTheme.Table("tbl1theme").Cell("aligntop").VerticalAlign = ABM.TABLECELL_VERTICALALIGN_TOP

MyTheme.TreeTable("view1").AddCellTheme("lev1default")
MyTheme.TreeTable("view1").Cell("lev1default").IsEditable = True
MyTheme.TreeTable("view1").Cell("lev1default").BackColor = ABM.COLOR_LIGHTBLUE
MyTheme.TreeTable("view1").Cell("lev1default").BackColorIntensity = ABM.INTENSITY_DARKEN3
MyTheme.TreeTable("view1").Cell("lev1default").ForeColor = ABM.COLOR_WHITE

MyTheme.TreeTable("view1").AddTreeIconColorTheme("white")
MyTheme.TreeTable("view1").TreeIconColor("white").ForeColor = ABM.COLOR_WHITE
 

Attachments

  • addtheme.png
    addtheme.png
    30.2 KB · Views: 656
  • thememenu.png
    thememenu.png
    9.2 KB · Views: 636
  • updatedtree.png
    updatedtree.png
    28.3 KB · Views: 619

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: ABMLabel

What's New

1. ABMaterial.Show has functionality to add the ABMLabel component now.
2. The App runs in full screen mode, used JavaObject to do that.
3. To add this new components, goto Components > ABMLabel after selecting the page to add it in.

Known Issues:

The components added to my page are not displaying as only the last component does. I would appreciate some help with that please.

This is my code before BuildGrid

B4X:
page.AddRows(12,True, "").AddCells12(1,"")

My ConnectPage code...

B4X:
Dim lblH1 As ABMLabel
lblH1.Initialize(page, "lblH1", "SIZE_H1", ABM.SIZE_H1, False, "")
page.Cell(1, 1).AddComponent(lblH1)

Dim lblH2 As ABMLabel
lblH1.Initialize(page, "lblH2", "SIZE_H2", ABM.SIZE_H2, False, "")
page.Cell(2, 1).AddComponent(lblH2)

Dim lblH3 As ABMLabel
lblH1.Initialize(page, "lblH3", "SIZE_H3", ABM.SIZE_H3, False, "")
page.Cell(3, 1).AddComponent(lblH3)

Dim lblH4 As ABMLabel
lblH1.Initialize(page, "lblH4", "SIZE_H4", ABM.SIZE_H4, False, "")
page.Cell(4, 1).AddComponent(lblH4)

Dim lblH5 As ABMLabel
lblH1.Initialize(page, "lblH5", "SIZE_H5", ABM.SIZE_H5, False, "")
page.Cell(5, 1).AddComponent(lblH5)

Dim lblH6 As ABMLabel
lblH1.Initialize(page, "lblH6", "SIZE_H6", ABM.SIZE_H6, False, "")
page.Cell(6, 1).AddComponent(lblH6)
 

Attachments

  • ABMLabel.png
    ABMLabel.png
    19.2 KB · Views: 618

Mashiane

Expert
Licensed User
Longtime User
ABMaterial.Show: ABMSwitch, ABMSlider and ABMRange

What's New

1. The ABMSwitch, ABMSlider and ABMRange have now been added to the components
2. Now you are able to Delete a Page with its components
3. You can also Rename a page name on the properties screen.
 

Attachments

  • addrange.png
    addrange.png
    17.8 KB · Views: 676
  • addslider.png
    addslider.png
    17 KB · Views: 578
  • addswitch.png
    addswitch.png
    12.7 KB · Views: 585
  • range.png
    range.png
    5.8 KB · Views: 678
  • slider.png
    slider.png
    7.7 KB · Views: 605
  • switch.png
    switch.png
    10 KB · Views: 667
Top