Custom webdialog DatePicker questions

[Jean-Maurice_Vandergoten]

I wrote a custom program to pick a date. I’m new to web apps so I have a couple of questions (they are at the end). Feel free to write your suggestions and comments.

https://github.com/Jean-MauriceV/Git_Web_DatePicker.git

This program opens a calendar date picker based on the desktop example
instead of a container control, I used a windowdialog. I did this because it is more customizable and the webdatepicker coming with Xojo is not working good with languages like french because it depends of the configuration of the user.

It goes with a session IsDatePicked(boolean) that comes back true if the users chooses a date
and false if the users escape the dialog without choosing.

In the event Dismissed (dialog is closing) we called the method session.setDateInTextFieldWebPage1
that finishes the action that was called by the button PickDateButton

if the users quits the dialog without choosing a date it puts the textfield to “”
and write to the label “You have NOT selected a date”

If the users picks a date it writes the property session.datePicked in SQLDate in the textfield
and writes “You have selected a date”

Questions and/or comments ??

I couldn’t use a control set for the buttons so I had to put an event pressed for each button
and I used an array to initialize them at the beginning.
Is there a way to do that in an other way ? in the pressed event of the button class if possible ?
suggestions are welcome.

I used the Session properties to communicate between the webpage and webdialog, Is there an other way ?

Is it better to put the styles of the buttons in the opening event of the datebutton class or when I load the buttons in my array ButtonsList ?

Ricardo Cruz, do you think you could take a peek and tell me if you could improve it and put it in the examples of web apps. ?

Thanks everybody.

Jean-Maurice

[Jean-Maurice_Vandergoten]

And another question, When I copy and paste my window in another program, it resizes the buttons ! How to avoid that ?

Jean-maurice

[Ivan_Tellez]

@Jean-Maurice_Vandergoten

and the webdatepicker coming with Xojo is not working good with languages like french because it depends of the configuration of the user.

Many controls are still not working great

@Jean-Maurice_Vandergoten

I used the Session properties to communicate between the webpage and webdialog, Is there an other way ?

In this case, using the session is wrong. Limits the usage and can cause many problems with the spaguetti code.

You have to think in OOP, The dialog you design, is like a Super Class, When you add a dialog to your page it becomes an INSTANCE. So you can have the properties in the dialog itself and they will be unique for each instance.

@Jean-Maurice_Vandergoten

In the event Dismissed (dialog is closing) we called the method session.setDateInTextFieldWebPage1

This is worse, but it is the same problem. You should remove the Dismissed event on your SUPER and instead, put it in your INSTANCE, this way you can access local controls inside the same page as the dialog instance without a hard coded page name.

@Jean-Maurice_Vandergoten

I couldn’t use a control set for the buttons so I had to put an event pressed for each button

This is a real PITA, is currently in my Top 1 of thing why I dont use Web 2 yet. xojo said it will be a deferred feture, but then they made a blog post where it was suggested that they believed that control sets were used ONLY to create controls at run time

@Jean-Maurice_Vandergoten

Is there a way to do that in an other way ?

Add a method with a pseudo index as parameter, in the buttons pressed event call this single metod. This way if you need to change the code of the buttons even xojo think is better to do it 40 times

@Jean-Maurice_Vandergoten

suggestions are welcome.

• Center the title and put some style there

• Add labels to the top of the colums to put the day names

• When a month uses only 5 Rows, it looks bad, better all the buttons on the last row and show (disabled or with another style) buttons for the previous and next month.

[Ricardo_Cruz]

First, congratulations!, this is looking nice already

@Jean-Maurice_Vandergoten

I couldn’t use a control set for the buttons so I had to put an event pressed for each button
and I used an array to initialize them at the beginning.
Is there a way to do that in an other way ? in the pressed event of the button class if possible ?
suggestions are welcome.

As an alternative, you can create the buttons programmatically. In this Wordle clone, each of the letters in the grid, and each key in the keyboard are being created inside a for loop:

GitHub - piradoiv/xojo-wordle: A multiplayer Wordle made with Xojo

@Jean-Maurice_Vandergoten

I used the Session properties to communicate between the webpage and webdialog, Is there an other way ?

When you create components, they need to be as isolated as possible. Try to just fire events, then let the user of your control handle them as they prefer.

For example, in your project, a refactor you could consider is adding a new Event Definition in your DatePickerWindow. You can name it “DateChanged”, like in the WebDatePicker control. Whenever the date changes in your custom date picker, update the internal value and fire the event:

RaiseEvent DateChanged(selectedDate)

In order to make your code easier to maintain, reducing duplicated code, buttons can call a private method. So instead of having this same code on each Pressed event:

// day has been chosen
// update mSelectedDate and close window and the event dismissed will be called

mSelectedDate = New DateTime(mSelectedDate.Year, mSelectedDate.Month, Val(Me.Caption))
session.IsDatePicked = True

Self.Close

You can create a ButtonPressedHandler method:

Private Sub ButtonPressedHandler(button As WebButton)
  // day has been chosen
  // update mSelectedDate and close window and the event dismissed will be called
  
  mSelectedDate = New DateTime(mSelectedDate.Year, mSelectedDate.Month, Val(button.Caption))
  RaiseEvent DateChanged(New DateTime(mSelectedDate))
  
  Self.Close
End Sub

Now, each button can just have this code instead:

ButtonPressedHandler(Me)

@Jean-Maurice_Vandergoten

Ricardo Cruz, do you think you could take a peek and tell me if you could improve it and put it in the examples of web apps. ?

Having it on GitHub is already a nice way to share your code. Please remember to add a license to inform other users how they can use your code, from a legal point of view.

Thank you for sharing!

[Jean-Maurice_Vandergoten]

Thanks Ivan ! Really appreciate your comments. I’ll work on it on the next days

Jean-Maurice

[Ivan_Tellez]

Some other points:

• Your Leap year code is incomplete, it will fail on some years:

// Calculate Leap Year
If mSelectedDate.Year Mod 4 = 0 Then
  If mSelectedDate.Year Mod 100 = 0 Then
    If mSelectedDate.Year Mod 400 = 0 Then
      monthDays = 29 // Leap year
    Else
      monthDays = 28
    End If
  Else
    monthDays = 29 // Leap year
  End If
Else
  monthDays = 28
End If

• Add a Close button for those users that are not used to the Escape key

• Add some style for the button that has the Today Day

• Change the position for the Next and previous month

• Use actual text for the Today button

xojo web 2 is still to buggy, I dont own a licence so I cant save in text mode to use the source control to share the changes

[Jean-Maurice_Vandergoten]

@Ricardo_Cruz

As an alternative, you can create the buttons programmatically. In this Wordle clone, each of the letters in the grid, and each key in the keyboard are being created inside a for loop:

Thanks Ricardo I will take a look and thank you for all comments

Jean-Maurice

[Jean-Maurice_Vandergoten]

@Ricardo_Cruz

GitHub - piradoiv/xojo-wordle: A multiplayer Wordle made with Xojo

That example is very complete ! Why is it not in the list of examples ? I didn’t see it …

Thanks

Jean-Maurice

[Jean-Maurice_Vandergoten]

@Ricardo_Cruz

As an alternative, you can create the buttons programmatically. In this Wordle clone, each of the letters in the grid, and each key in the keyboard are being created inside a for loop:

Let’s say I create a button programmaticaly like this

Var DButton As New DateButton
DButton.Caption= “5!”
DButton.LockLeft = True
DButton.LockTop = True
DButton.Style.Value(“text-align”)=“center”
DButton.Style.Value(“height”)=“50px”
DButton.Style.Value(“width”)=“50px”
DButton.top = 393
DButton.Left=134
Self.AddControl(DButton)

Is it better to use Addcontrol or embedWithin ?

And how do I refer to those buttons when I change month ? Right now I iterate in my array of buttons. Can I create the same array when I add the controls with code ?

Thanks

Jean-Maurice

[Jean-Maurice_Vandergoten]

@Ivan_Tellez

• Add a Close button for those users that are not used to the Escape key
• Add some style for the button that has the Today Day
• Change the position for the Next and previous month
• Use actual text for the Today button

Hi Ivan, thanks for your suggestions

here is a pretty much final version
on the bottom there is a webtextfield with a date and a bootstrap calendar icon. If you click the icon, it shows the calendar with the date in the textfield in yellow. You can also instantiate a calendar window with a date different from today. Thanks again

Jean-Maurice

[Jean-Yves_Pochez]

@Ricardo_Cruz

GitHub - piradoiv/xojo-wordle: A multiplayer Wordle made with Xojo

suggestion for @Ricardo_Cruz : you should tag your github repositories with what’s inside the code examples:websdk, cellrenderers, etc… so that we could easily find the example code we are searching for.
thanks for everything !

[Ricardo_Cruz]

Agreed! I definitely need to give those repositories some love. Most of them don’t have a README.md either.