Hoe maak ik een Sourcelist?

Hallo,
ik ben een beginner in Xojo en probeer een programma te schrijven met een sourcelist panel aan de linkerkant van de app, precies zoals het in Xojo zelf wordt gebruikt. Ik heb de FGSourcelistDemp nu al zo’n 2 weken bestudeerd en het geprobeerd aan te passen, maar ik krijg het niet voor elkaar om mijn eigen menu samen te stellen. Weet iemand een (video) tutorial dat uitlegt hoe ik z’n menu helemaal zelf kan maken van het begin?

Hallo Andre,

Welkom. :slight_smile:

Als je met Xojo begint kan ik je van harte aanraden om het gratis introductie boekje te volgen. De pdf staat hier: https://xojo.com/learn/
Het is eventjes wat tijd die je moet investeren maar die verdien je dubbel en dwars terug.

En welke FGSourcelistDemp bedoel je precies?

Wat bedoel je met “SourceList”?

En welcome to the magical world of Xojo and it’s community :slight_smile:
Just a little suggestion. If you post your question in English, you might find more help, since the community is very international. Even though I know a couple of very gifted and skilled Dutchies, like @Joost Rongen and @Marco Hof.
Even if you think you’re not good in expressing yourself in English. Most of us will understand.

Ik Andre, ik sluit mij aan bij Marco en Edwin.

Please go through the Introduction-book, it’s free and you will catch the drift which is behind Xojo.
It’s not clear to me what sourcelist panel you are actually trying to implement, and also what OS you’re focusing on. It would help if you could give a brief description of what you want to achieve.

Hi!
Even being Dutch, I am honestly more fluent in English these days because live in Sweden since 2003 and speak English 24/7. I posted in the Dutch section today, because after posting in the English section I got the good meant advice that it’s better to learn Xojo from the start as you also do, Marcus. I totally agree with that, and know I should learn to crawl before flying, but it’s not easy to find the patience to learn something so complex as programming while I only want to create one single app and already know how it should look. So I was hoping to find some shortcuts to reach my goal. I did read the starters guide and part of the guide and followed some web seminars, building the example apps in Xojo, which was really fun to do. However, now I want to start my own, I cannot even get the basics right which is very frustrating, that’s why I was hoping for a tutorial on the parts I really need instead of learning the full software.

Edwin, met sourcelist I mean the left browser window as is used in Xojo and other typical Mac apps that is used to navigate trough that app.

Dit het Nederlandse kanaal, dus is het logisch dat hier in het Nederlands geconverseerd wordt.

Bedoel je met FGSourcelistDemp, de FGSourceList van Garry Pettet?
Als dat zo is, dan raad ik je aan een alternatief te zoeken, want er is de laatste jaren niet echt meer aan ontwikkeld.
Je bedoelt dus dit.

A while back I posted a similar question in THIS conversation.
I noticed that the example has been taken offline. But I think it might be able to get you started. You just need to find the right way to format the text in the TextPaint event.
I cannot find the example on my computer anymore. But what I might want to do is, assign some value to the listbox’s rowtag(or celltag within that row). This value helps you to determine what kind of row you’re dealing with. For a section title, you can give it a “section” tag.
For a Source entry, you might give it a tag called “source”.

Next, you add a MouseDown event to your listbox. Check which row is clicked, and check the tag. If the tag is “section”, return false. Else return true. This disables the mouse events when a section label is clicked.

In the CellBackgroundPaint event you can do the same thing. Check the tag for the cell that is going to be painted. And draw a filledRectangle to style that section label. If needed.

In the CellTextPaint you can do your text styling magic. In here you also want to check the rowtag. If it is a section, set the TextFont, Bold, Size, Color to whatever you need for the look and feel of the section label.
Do the same thing for any other tags.

If you want to show more info, like different icons in front of source entries, you can simply store info of that entry type in a celltag.
What I ended up doing is create a class, that actually holds the info. That class has the info I look for in the rowTag. Thus I stored an instance of that class in the RowTag. Some properties of that class included

  • Type (like Section or SourceEntry)
  • Ref (if I needed to refer to a database entry, filename, etc)
  • SubType (Like in Xojo, a SourceEntry can be a Method, Property, etc… I used this value to pick the right icon)

[quote=288455:@Joost Rongen]Ik Andre, ik sluit mij aan bij Marco en Edwin.

Please go through the Introduction-book, it’s free and you will catch the drift which is behind Xojo.
It’s not clear to me what sourcelist panel you are actually trying to implement, and also what OS you’re focusing on. It would help if you could give a brief description of what you want to achieve.[/quote]

Hi Joost, here is a screenshot of what I am trying to make, I made this structure in Scrivener. I work on a Mac:
https://app.box.com/s/d359omta4mtlbjluwtqtgqhgh1e2miux

And this is how it looks like right now in the Xojo project I am working on:
https://app.box.com/s/bgvovxlfynyanjblw9mpbvp0sfqd5q7i

The list is showing all the time and doubled as you can see, the 3 large buttons at the top are not functional yet. I got this far by adjusting the demo project, but I don’t think this is a good way to work, I don’t really know what I am doing. It would be great if there would be a video tutorial as for example for the Xojo text editor made during a webinair, I followed that one and it’s easy to learn lie that.

Yes, this is totally frustrating. But as long as you say “I don’t really know what I am doing” it’s very hard to help you.

Think in steps. What do you want to change in the SourceList? The icons? Then have a look at the paint event. Try to find out where the icons are drawn. You could for instance comment out all the code in the paint event. Then add the code back block for block. You want to do something fast. If you now take time to understand you will really learn.

You will never be able to achieve what you’re trying to make.
FGSourcelist allows you to create only one level.
I see in your example 3 or more levels.
Take a look a Treeview from Einhugur.
(See TreeViewCustomNode)
This plugin can do what you’re looking for and is very fast.
There are similar plugins/controls/classes.
TreeView Control by David S
GraffitiTreeView by Anthony Cyphers
There a probably a lot more, but I don’t recall others at this point.

[quote=288486:@AndrvanHaren]Hi Joost, here is a screenshot of what I am trying to make, I made this structure in Scrivener. I work on a Mac:
https://app.box.com/s/d359omta4mtlbjluwtqtgqhgh1e2miux [/quote]
I agree with Paul. As far as I can see in your example, it’s going to be quite straight forward. All mentioned above provide free demo’s.
What is your data-source ?

Hi, thanks for the links, I was however able to create what I was looking for and I actually don’t need any levels. Here is what I have so far:
https://app.box.com/s/wxqvetz1x7fxuf5t323bsg1wdsylxb5i

Next step is to connect everything in this panel to their own page in the editor where the user can fill in information. I played around with Page Panel elements for this and wanted to link every page panel to one of the lines in the left side panel. Is that a good way to do this or are there better ways?

Great !!

If you can do this, I am sure you can handle using Page Panel too.

Awesome!

When using the PagePanel, try to categorize each element in your list. And show the correct panel accordingly.
If more panels look a like, it might be better to point to the same panel, in case your list is dynamic.

In your case you could have four panels.
Panel #1 (index 0) can have a simple label with the text “No selection”, just in case you have nothing selected in your list.
Panel #2 (index 1) will have a question editor, for the section “The four questions”
Panel #3 (index 2) will have the ArcheType editor
Panel #4 (index 3) will have the QuickPitch editor

This way you can add more questions, if ever needed in the future, without adding more pages to your page panel.
The elements on each panel have to be populated according to whatever you have selected in your “SourceList”.

[quote=288719:@Edwin van den Akker]Awesome!

When using the PagePanel, try to categorize each element in your list. And show the correct panel accordingly.
If more panels look a like, it might be better to point to the same panel, in case your list is dynamic.

In your case you could have four panels.[/quote]

I plan to use a separate pagepanel for every question, because every question has some sub questions.

[quote] Panel #1 (index 0) can have a simple label with the text “No selection”, just in case you have nothing selected in your list.
Panel #2 (index 1) will have a question editor, for the section “The four questions”
Panel #3 (index 2) will have the ArcheType editor
Panel #4 (index 3) will have the QuickPitch editor

This way you can add more questions, if ever needed in the future, without adding more pages to your page panel.
The elements on each panel have to be populated according to whatever you have selected in your “SourceList”.[/quote]

thanks for your help, Edwin!

I have since my last post watched and followed all the Getting Started video’s and created all the example projects in Xojo, so I feel a little more comfortable now in what I am doing. While watching them I added the elements that I need in my project, so it’s growing step by step. Right now, I am again at the point that I need to display to the correct Pagepanel when selecting a name from the list as I showed above in the screenshot. Is this a valid way of using the Select Case code?

'The four questions
item = new FGSourceListItem
item.Name = " I - Who is your Hero?"
item.Icon = hero
sourceList.AppendItem( item, “The Four Questions”)

item = new FGSourceListItem
item.Name = " II - What is your Hero trying to accomplish?"
item.Icon = goal
sourceList.AppendItem( item, “The Four Questions”)

item = new FGSourceListItem
item.Name = " III - Who is trying to stop your Hero?"
item.Icon = stop
sourceList.AppendItem( item, “The Four Questions”)

item = new FGSourceListItem
item.Name = " IV - What happens if your Hero fails?"
item.Icon = fail
sourceList.AppendItem( item, “The Four Questions”)

select case item.name
case " I - Who is your Hero?"
QuestionsPanel.Value = 0

case " II - What is your Hero trying to accomplish?"
QuestionsPanel.Value = 1

case " III - Who is trying to stop your Hero?"
QuestionsPanel.Value = 2

case " IV - What happens if your Hero fails?"
QuestionsPanel.Value = 3

end select

This will work as long as you don’t change your questions. Or you want to have a different quiz. Try to encapsulate your questions in one place. How you do load your questions?

What if you give your questions some sort of ID.

You can stor this ID in a tag propperty.

item.tag = 1 

This way you can change your name, question, etc without changing the reference.

Use someting like

Select case item.tag
  Case 1
    ' deal with question #1 here 

  Case 2
    ' deal with question #2 here 

End Select

[quote=292475:@Edwin van den Akker]What if you give your questions some sort of ID.

You can stor this ID in a tag propperty.

item.tag = 1 

This way you can change your name, question, etc without changing the reference.

Use someting like

[code]
Select case item.tag
Case 1
’ deal with question #1 here

Case 2
’ deal with question #2 here

End Select
[/code][/quote]

that’s a great idea, Edwin, thanks!

Anytime :slight_smile:

@BeatrixWillius actually pointed out the same solution.

And as she mentioned, you should encapsulate the questions. This kind of means that you store your questions in some kind of array (or database), along with the answers.
Every time you present a question page, you just show some kind of template and populate it with the question in your array.

An array could be an array of Classes. You simply create a new class, add properties. You can then store instances of these classes in an Array.

This way you can make your questionnaire dynamic. Maybe you don’t need it, maybe you will. But it helps you out a lot by not making the same page over and over again. You just make one layout, and populate it with the dynamic parts. Whenever you have a bug, you only have to change one page, instead of all the pages across your project.

You might want to take a look at this webinar by @PaulLefebvre : LINK

Next, you can use the page panels to make your layout. In the first panel could be empty, in case no item in your sourcelist is selected.
The second page you can fill with a Label control, that will display the question. It will also display either a TextField control or several Radio Buttons the user can use to enter the questions.
The third page might contain a layout for the Character Sketches.
A fourth page can contain controls for your Theme item.

Another webinar you might want to have a look at a Container Control webinar: LINK.
It might help you in your project. And actually, I recommend you to watch all Paul’s webinars. It’s a better show than “Goede tijden, slechte tijden”. Hahaha!

[quote=292547:@Edwin van den Akker]Anytime :slight_smile:

@Beatrix Willius actually pointed out the same solution.

And as she mentioned, you should encapsulate the questions. This kind of means that you store your questions in some kind of array (or database), along with the answers.
Every time you present a question page, you just show some kind of template and populate it with the question in your array.

An array could be an array of Classes. You simply create a new class, add properties. You can then store instances of these classes in an Array.

This way you can make your questionnaire dynamic. Maybe you don’t need it, maybe you will. But it helps you out a lot by not making the same page over and over again. You just make one layout, and populate it with the dynamic parts. Whenever you have a bug, you only have to change one page, instead of all the pages across your project.

You might want to take a look at this webinar by @Paul Lefebvre : LINK

Next, you can use the page panels to make your layout. In the first panel could be empty, in case no item in your sourcelist is selected.
The second page you can fill with a Label control, that will display the question. It will also display either a TextField control or several Radio Buttons the user can use to enter the questions.
The third page might contain a layout for the Character Sketches.
A fourth page can contain controls for your Theme item.

Another webinar you might want to have a look at a Container Control webinar: LINK.
It might help you in your project. And actually, I recommend you to watch all Paul’s webinars. It’s a better show than “Goede tijden, slechte tijden”. Hahaha![/quote]

Thanks Edwin. I watched the Container Control webinair and learned a lot of it. The way you describe it is also how I had it in mind, but I didn’t know yet how to get everything working. I am getting more understand step by step though, which feels good :slight_smile:

Never watched GTST, not my kind of show :slight_smile: