B4A Library SD: MenuExtender

I created a new library that adds new menus that are not in my other libraries. (menu and PanelExtra)
The sources are written exclusively in B4A

ManagerPanel: This class has been transferred to the PanelExtra Library

Catalog: It has a series of articles with relative photos, name, code, description and price in grid format.
Clicking the article opens at full schemro to the card and you can buy it or go back.
Clicking the purchase button (the shopping cart) generates the Select event
ATTENTION: This library intercepts the back key to return

SD_MenuExtender

Author: Star-Dust
Version: 0.13
  • catalog
    • Events:
      • CustomizePanelDescription (PanelDescription As Panel, ID As String)
      • KeyBack
      • SearchBarEvent (Text As String)
      • Select (ID() As String, Code() As String)
    • Fields:
      • ColorSearchButton As Int
      • ContestSearch As String
        Constant
        • ContestSearchCode As String
        • ContestSearchDescription As String
        • ContestSearchEvent As String
        • ContestSearchName As String
      • CustomizePanelDescription As Boolean
      • KeyBackCloseDetails As Boolean
      • OpenDetail As Boolean
      • SearchBar As Boolean
      • ColorCatalog As Int
      • CustomPanelDescriptionHeight As Int
    • Functions:
      • Add (ID As String, Image As Bitmap, Name As String, Code As String, Description As String, Price As String) As String
      • Class_Globals As String
      • Clear As String
      • DesignerCreateView (Base As Panel, Lbl As Label, Props As Map) As String
      • GetBase As Panel
      • Initialize (Callback As Object, EventName As String) As String
      • Invalidate As String
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • ModeDips (Width As Int, Height As Int) As String
      • ModeRowCol (Col As Int, Row As Int) As String
      • ResizeCatalog As String
      • getName (ID As String) As String
      • getCode (ID As String) As String
      • getDescription (ID As String) As String
      • getPrice (ID As String) As String
      • setImage (ID As String, Image As Bitmap)
      • setName (ID As String,Name As String)
      • setCode (ID As String,Code As String)
      • setDescription (ID As String, Description As String)
      • setPrice (ID As String,Price As String)
      • sort (Field As String, Ascending As Boolean)
      • closePanelDetail
      • setButtonConfirm (Text As String,Font As Typeface, TextSize as int, TextColor As Int, Backgroundcolo As Int)
    • Properties:
      • ColorCatalog
      • CustomPanelDescriptionHeight
      • SearchBar As Boolean
      • TextButtonConfirm
demo1.gif
demo2.gif
screenshot.png
 

Attachments

Last edited:
Click to expand...
ManagerPanel: You add the class from Design and then in the created panels you can add elements from code.

This class has been transferred to the PanelExtra Library

Code: Copy 
Activity.LoadLayout("main_managerpanel")

    ManagerPanel1.NewPanel("First",1,Colors.RGB(255,216,0),Colors.RGB(127,0,0))
    ManagerPanel1.NewPanel("Second",2,Colors.Yellow,Colors.RGB(107,63,127))
    ManagerPanel1.NewPanel("Third",3,Colors.RGB(127,0,0),Colors.RGB(255,216,0))
    ManagerPanel1.NewPanel("Fourth",4,Colors.Black,Colors.White)
     
    Dim Lab As Label
    Lab.Initialize("")
    Lab.Text="My Label"
    Lab.TextSize=20
    Lab.TextColor=Colors.White
     
    ManagerPanel1.getPanel(0).AddView(Lab,30dip,20dip,100dip,40dip)
    ManagerPanel1.getPanelfromID(1).Color=Colors.ARGB(150,150,150,150)


ManagerPanel.gif
 
Last edited:
Catalog: The class from Design is added. From the design you can set the number of rows and columns of the grid. Or you can also set the width and height of each item in the grid.

You populate the grid by code, inserting the image, name, code, description and price.

It is important to set the FontAwesone as in the example, to load the font. Otherwise it generates an error.

Code: Copy 
Activity.LoadLayout("main_catalog")
' This is very important, for load a font
catalog1.FontAwsone=Typeface.FONTAWESOME
If 100%x<100%y Then
     'portrait
     catalog1.ModeRowCol(2,3)
Else
    'landscape
     catalog1.ModeRowCol(3,2)
End If

For I=1 To 18
   catalog1.Add(I,LoadBitmap(File.DirAssets,$"image{I}.jpg"$),"Element " & I, _
   "Code: " & code(I),"Description","€. " & prize(i))
Next
 
Last edited:
Star-Dust said:
ATTENTION: This library intercepts the back key to return
Click to expand...

Very nice, but If I open the app and click in back key (without click in any image) I get the error below.
If I click in the image and back, I can't exit the app using the back key.
Is possible to fix it?

Another thing: is possible to change the animation to close the card to be more smoothly like the animation that opens the card?

Code: Copy 
Logger conectado a:  motorola Moto G (5) Plus
--------- beginning of main
*** Service (starter) Create ***
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
java.lang.NumberFormatException: For input string: "null"
    at java.lang.FloatingDecimal.readJavaFormatString(FloatingDecimal.java:1306)
    at java.lang.Double.parseDouble(Double.java:547)
    at anywheresoftware.b4a.BA.ObjectToNumber(BA.java:646)
    at b4a.example.catalog._back_click(catalog.java:99)
    at b4a.example.catalog._on_keypress(catalog.java:337)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:186)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:166)
    at anywheresoftware.b4a.agraham.reflection.Reflection$6.onKey(Reflection.java:1082)
    at android.view.View.dispatchKeyEvent(View.java:9878)
    at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1667)
    at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1667)
    at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1667)
    at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1667)
    at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1667)
    at com.android.internal.policy.DecorView.superDispatchKeyEvent(DecorView.java:403)
    at com.android.internal.policy.PhoneWindow.superDispatchKeyEvent(PhoneWindow.java:1800)
    at android.app.Activity.dispatchKeyEvent(Activity.java:3025)
    at com.android.internal.policy.DecorView.dispatchKeyEvent(DecorView.java:317)
    at android.view.ViewRootImpl$ViewPostImeInputStage.processKeyEvent(ViewRootImpl.java:4339)
    at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4310)
    at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3861)
    at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3914)
    at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3880)
    at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4007)
    at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3888)
    at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:4064)
    at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3861)
    at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3914)
    at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3880)
    at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3888)
    at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3861)
    at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3914)
    at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3880)
    at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4040)
    at android.view.ViewRootImpl$ImeInputStage.onFinishedInputEvent(ViewRootImpl.java:4201)
    at android.view.inputmethod.InputMethodManager$PendingEvent.run(InputMethodManager.java:2374)
    at android.view.inputmethod.InputMethodManager.invokeFinishedInputEventCallback(InputMethodManager.java:1970)
    at android.view.inputmethod.InputMethodManager.finishedInputEvent(InputMethodManager.java:1961)
    at android.view.inputmethod.InputMethodManager$ImeInputEventSender.onInputEventFinished(InputMethodManager.java:2351)
    at android.view.InputEventSender.dispatchInputEventFinished(InputEventSender.java:141)
    at android.os.MessageQueue.nativePollOnce(Native Method)
    at android.os.MessageQueue.next(MessageQueue.java:323)
    at android.os.Looper.loop(Looper.java:136)
    at android.app.ActivityThread.main(ActivityThread.java:6123)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:867)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:757)
--------- beginning of crash
 
asales said:
Very nice, but If I open the app and click in back key (without click in any image) I get the error below.
If I click in the image and back, I can't exit the app using the back key.
Is possible to fix it?

Code: Copy 
Logger conectado a:  motorola Moto G (5) Plus
--------- beginning of main
*** Service (starter) Create ***
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
java.lang.NumberFormatException: For input string: "null"
    at java.lang.FloatingDecimal.readJavaFormatString(FloatingDecimal.java:1306)
    at java.lang.Double.parseDouble(Double.java:547)
    at anywheresoftware.b4a.BA.ObjectToNumber(BA.java:646)
    at b4a.example.catalog._back_click(catalog.java:99)
    at b4a.example.catalog._on_keypress(catalog.java:337)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:186)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:166)
    at anywheresoftware.b4a.agraham.reflection.Reflection$6.onKey(Reflection.java:1082)
    at android.view.View.dispatchKeyEvent(View.java:9878)
    at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1667)
    at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1667)
    at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1667)
    at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1667)
    at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1667)
    at com.android.internal.policy.DecorView.superDispatchKeyEvent(DecorView.java:403)
    at com.android.internal.policy.PhoneWindow.superDispatchKeyEvent(PhoneWindow.java:1800)
    at android.app.Activity.dispatchKeyEvent(Activity.java:3025)
    at com.android.internal.policy.DecorView.dispatchKeyEvent(DecorView.java:317)
    at android.view.ViewRootImpl$ViewPostImeInputStage.processKeyEvent(ViewRootImpl.java:4339)
    at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4310)
    at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3861)
    at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3914)
    at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3880)
    at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4007)
    at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3888)
    at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:4064)
    at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3861)
    at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3914)
    at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3880)
    at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3888)
    at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3861)
    at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3914)
    at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3880)
    at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4040)
    at android.view.ViewRootImpl$ImeInputStage.onFinishedInputEvent(ViewRootImpl.java:4201)
    at android.view.inputmethod.InputMethodManager$PendingEvent.run(InputMethodManager.java:2374)
    at android.view.inputmethod.InputMethodManager.invokeFinishedInputEventCallback(InputMethodManager.java:1970)
    at android.view.inputmethod.InputMethodManager.finishedInputEvent(InputMethodManager.java:1961)
    at android.view.inputmethod.InputMethodManager$ImeInputEventSender.onInputEventFinished(InputMethodManager.java:2351)
    at android.view.InputEventSender.dispatchInputEventFinished(InputEventSender.java:141)
    at android.os.MessageQueue.nativePollOnce(Native Method)
    at android.os.MessageQueue.next(MessageQueue.java:323)
    at android.os.Looper.loop(Looper.java:136)
    at android.app.ActivityThread.main(ActivityThread.java:6123)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:867)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:757)
--------- beginning of crash
Click to expand...
are you using B4A 7.8+? Are you trying the example I attached?

If you're not using my example, show me the code that generates an error.

Another thing: is possible to change the animation to close the card to be more smoothly like the animation that opens the card?
Click to expand...

Actually the animation is just like the opening one. Unfortunately, the resulting effect is different. I'm working on it to improve it ... wait for an update
 
Star-Dust said:
are you using B4A 7.8+? Are you trying the example I attached?

If you're not using my example, show me the code that generates an error.
Click to expand...
Yes. I only changed the package name, but I tried with original example and get the same error:
Code: Copy 
catalog_back_click (java line: 99)
java.lang.NumberFormatException: For input string: "null"
    at java.lang.FloatingDecimal.readJavaFormatString(FloatingDecimal.java:1306)
    at java.lang.Double.parseDouble(Double.java:547)
(...)

Star-Dust said:
Actually the animation is just like the opening one. Unfortunately, the resulting effect is different. I'm working on it to improve it ... wait for an update
Click to expand...
Would be nice. Thanks!
 
Update to release 0.02

I corrected the Bugs and added two new things.
1) The possibility to choose whether or not to open the Panels of the details with the OpenDetail property
2) The KeyBack event, which will be raised if you use the KeyBack button in the catalog, so you can manage it from the main App. In case you use the KeyBack from the details panel it will not raise any events but simply close the panel

For animations you have to wait for the next update.
And the next update also will be ... adding a filter based on the code

Star-Dust
 
Last edited:
hi. In my app I have the TabStripView, and your library SD_MenuExtender. When I click on the image I can not see the writing well. e.g. I see "element1" "code" but I do not see "description" because it remains below the screen. If I correct the lower part of the catalog1 with the design, the top part of the catalog1 remains under the TabStripView. I do not know if I explained myself well. Thank you. Google translated
 
I can not understand well,

Have you entered the class from the design or from the code? Did you enter my class in TabStripView?Did you anchor properly?

You can reproduce the code similar to what you described, so I try it?
It could also serve a schreenshot

Have you tried PanelNavigator instead of TabStripView?
 
Last edited:
I corrected the bugs with version 0.04

I wanted to add a new function that allows you to create the filter from the outside, in the app itself. Creating a new event that is raised when writing on the filter bar, but I have not had time I will do it next time.
 
Last edited:
Update to version 0.04
  1. Improved animation
  2. Fix minor bugs
  3. Management of the Kayback button, allows to close the details panel and if clicked on the catalog raises an event that can be intercepted by the application
  4. Addition of the search bar. It can be activated or deactivated. Choose the color. And set the search context, by name, code, description.
 
Thank you for resolving the view with the tabstripview. It is ok now:)
I still have a question if I can, or should I open a new thread?
1) how I can disable the search cursor, after doing the research it remains flashing and I can not scroll through the photos.
2) the function catalog1.searchBar = True or False I did not understand what they do.
I need enable or disable search from the code not from designer.
Thanks for your answer...and patience!;)
 
1) At the moment I can not tell you, I do not flash the cursor, I'll see the thing better
2) To disable the search bar from code, you have to do so.
Code: Copy 
catalog1.searchBar = False
In the next update the invalidate command will do it automatically.
 
Last edited:
Update to version 0.06
  1. Fix bugs
  2. I modified the searchBar property so that when it is set (True or False) by code it automatically refresh the view without using invalidate
  3. I added among the search properties (in addition to Name, Code, Description) also from the event. By selecting this option, every time you type in the search bar the SearchBarEvent (Text As String) event will be solved
    And you can manage the filter, emptying the catalog by reloading it with the filtered data.
    You will find an example of how to use it (Sample3) at post#1
  4. Customize Panel Detail (see Sample 4)
 
Last edited:
If you use version 0.06 you can customize the panel as you wish.
BUT I am attaching (Post#1) a version 0.07 that I added the command you are looking for.

The library is evolving, I'm still working on it.
I would like to avoid releasing continuous updates and lengthening the thread too much, so I will publish them in a few days.:D
 
Last edited:
Update to version 0.09

Fix Bugs

For read a item field
Code: Copy 
getName (ID As String) As String
getCode (ID As String) As String
getDescription (ID As String) As String
getPrice (ID As String) As String

For set item field
Code: Copy 
setName (ID As String,Name As String)
setCode (ID As String,Code As String)
setDescription (ID As String, Description As String)
setPrice (ID As String,Price As String)

Sort item for Name,Code,Price,Description
Code: Copy 
sort (Field As String, Ascending As Boolean)

SetTextButtonConfirm is replaced with setButtonConfirm
Code: Copy 
setButtonConfirm (Text As String,Font As Typeface, TextSize as int, TextColor As Int, Backgroundcolo As Int)

Close the panel of details. Useful on CustomPanelDetail , see sample 4
Code: Copy 
closePanelDetail


The command is no more necessary
Code: Copy 
catalog1.FontAwesone = TypeFace.FontAwesone
 
Last edited:
Really nice work....
can add images direct from a url ????
 
You must log in or register to reply here.

Similar Threads

Star-Dust
  • Article Article
B4J Library [XUI] [B4X] SD_CosmosMenu
Replies
10
Views
7K
Star-Dust
Star-Dust
Star-Dust
  • Article Article
B4A Library SD: MenuClose
Replies
12
Views
9K
Star-Dust
Star-Dust
Star-Dust
  • Article Article
B4A Library SD: DragBoard
2
Replies
33
Views
23K
Adamdam
A
Star-Dust
  • Article Article
B4A Library SD: Menu (with Animation)
2 3
Replies
53
Views
34K
GiovanniFontana
G
Star-Dust
  • Article Article
B4A Library SD: Floating Button StandOut
3 4 5
Replies
90
Views
58K
PJLPJLPJL
P
Back
Top