Hi there..
Eye Candy
To be able to do this, you need a good library that you want to wrap. A library like this will run inside a webview as its purely javascript, so some knowledge of HTML5 at most and some css will be recommended. I'm still learning both through trial and error.
Secondly, I wanted to trap the events that happen within my components, so I used webview extras for that.
Thirdly, I wanted to have the library include internaly the javascript and css files that I'm using. Please note the respective licenses for that. I decided on some community based libraries.
Steps
1. Create a project in b4a and insert the normal library attributes... Here is an example. This should be in the Main activity
2. My library is based on the premise that it will run inside a webview, so I needed to create a page where all components will sit. This I created a page class to be a holder using HTML5 methodology. This page will parent the other components, will fire javascript code using WebViewExtras etc and will get and set components attributes during run time.
As my page will fire events, I created some events and also some design properties (this I will test later on). This I did by adding a CustomView class and updating the events...
3. I then defined some global variables I will use and also the interface with the webview extras library on this page class...
From above, the most important crucial things are the webview (we will render our components in it), the JarFileLoader (this extracts js and css files from the compiled .jar file), the WebViewExtras, WebChromeClient and JSInterface), without these, this library would not work at all.
The output of the final library for me has been the Eye Candy above, all purely javascript and some css.
Eye Candy
To be able to do this, you need a good library that you want to wrap. A library like this will run inside a webview as its purely javascript, so some knowledge of HTML5 at most and some css will be recommended. I'm still learning both through trial and error.
Secondly, I wanted to trap the events that happen within my components, so I used webview extras for that.
Thirdly, I wanted to have the library include internaly the javascript and css files that I'm using. Please note the respective licenses for that. I decided on some community based libraries.
Steps
1. Create a project in b4a and insert the normal library attributes... Here is an example. This should be in the Main activity
B4X:
#Region Project Attributes
#LibraryName: AMTileView108
'SupportedOrientations possible values: unspecified, landscape or portrait.
#SupportedOrientations: unspecified
#CanInstallToExternalStorage: false
#LibraryAuthor: Anele Mbanga - anele@mbangas.com
#LibraryVersion: 1.08
#End Region2. My library is based on the premise that it will run inside a webview, so I needed to create a page where all components will sit. This I created a page class to be a holder using HTML5 methodology. This page will parent the other components, will fire javascript code using WebViewExtras etc and will get and set components attributes during run time.
As my page will fire events, I created some events and also some design properties (this I will test later on). This I did by adding a CustomView class and updating the events...
B4X:
#Event: TileClicked (value As String)
#Event: TabClicked (value As String)
#Event: MenuClicked (value As String, childIndex as string)
#Event: GroupButtonClick (value As String)
#Event: RadialSliderChange (element as String, Value as string)
#Event: RangeSliderChange (element as String, Value as string)
#Event: RatingChange (element as string, value as string)
#Event: Loaded ()
#Event: RangeSliderRead(value1 as string, value2 as string)3. I then defined some global variables I will use and also the interface with the webview extras library on this page class...
B4X:
Sub Class_Globals
Public ID As String
Private jsFiles As List
Private cssFiles As List
Public PageName As String
Public Title As String
Public Description As String
Public Author As String
Public Minify As Boolean
Private EventName As String 'ignore
Private CallBack As Object 'ignore
Private mBase As Panel
Private webTile As WebView
Dim we As WebViewExtras
Dim client As DefaultWebChromeClient
Dim jsi As DefaultJavascriptInterface
Type RenderModeEnum(windows As String, auto As String, ios7 As String, android As String, flat As String)
Public EnumRenderMode As RenderModeEnum
Public FontSize As String
Public FontFamily As String
Public BackgroundImage As String
Public BackgroundColor As String
Public jfl As JarFileLoader
Public ShowProgress As Boolean
Public ProgressMessage As String
Public DebugMode As Boolean
Private pageDiv As HTMLElement
Public HasScrollPanel As Boolean
Private sv As HTMLElement
Type OrientationEnum(vertical As String, horizontal As String)
Public EnumOrientation As OrientationEnum
Type PrecisionEnum(Full As String, Half As String, Exact As String)
Public EnumPrecision As PrecisionEnum
Type ShapeEnum(star As String, circle As String, diamond As String, heart As String, pentagon As String, square As String, triangle As String)
Public EnumShape As ShapeEnum
Type PagerPositionEnum(top As String, bottom As String, left As String, right As String)
Public EnumPagerPosition As PagerPositionEnum
Public RenderMode As String
Public ShowScrollBars As Boolean
Type itemStyleEnum(bothblock As String, image As String)
Public EnumItemStyle As itemStyleEnum
Type IconsEnum(iconadd As String, iconback As String, iconbookmark As String, iconclose As String, iconcompose As String, iconcopy As String, iconcut As String, _
icondelete As String, icondone As String, iconedit As String, iconmail As String, iconnext As String, iconrefresh As String, iconoverflow As String, _
iconpaste As String, iconreply As String, iconsave As String, iconsearch As String, iconsettings As String, iconshare As String)
Public EnumIcons As IconsEnum
End SubFrom above, the most important crucial things are the webview (we will render our components in it), the JarFileLoader (this extracts js and css files from the compiled .jar file), the WebViewExtras, WebChromeClient and JSInterface), without these, this library would not work at all.
The output of the final library for me has been the Eye Candy above, all purely javascript and some css.
Attachments
Last edited:
