0

I realize this may be subjective, but I don't see any clear-cut place for asking questions on good software design principals. I'm sure there are some software patterns and anti-patterns I should be aware of here.

I'm not asking about UI/UX or how to code anything. I am asking what would be a good design pattern to follow when creating multiple HMTL buttons that all to similar, but distinct things - In this case, loading files

I am developing a GUI, part of which has a save feature. There is a list of save file slots, and for each slot, there would be a preview of the saved content in that slot, plus a button to load/delete/save, etc. This is all done via HTML and Javascript

Which of the following would be the best way to implement the buttons? For example, with the "Load" Button, I could:

  • Have a single HTML Button for "Load". The behavior of this button (What file it loads) is changed by the Javascript, based off which saved slot you selected.
  • Have a "Load" button for each save slot written into the HMTL, each dedicated to loading the file from their pre-assigned slot. The buttons are shown/hidden by Javascript based off what you selected.
  • Similar to the above but instead of writing each button in HMTL outright, I could dynamically insert the HTML and remove it using Javascript, based on which slot you select.
  • Something else entirely?

The way I currently have the program written (with static, non-functional buttons), There is a single HMTL button located off to the side of the saved slots.

Here's a screen cap of the interface, just to provide context of how these button are used: enter image description here

Improve this question
6
  • 3
    Consider moving this question to ux.stackexchange.com. Commented Jun 29, 2017 at 18:41
  • Well I'm not asking about how the user interacts with the buttons, I'm asking about how the buttons should be created in HTML. This has nothing to do with UX/UI, just with making clean and maintanable code. Commented Jun 29, 2017 at 18:52
  • Are you sure this is a coding question? You haven't posted any code. Commented Jun 29, 2017 at 19:00
  • This is Software Engineering, not Stack Overflow. This is not a question how how to code something, and no lines of code are necessary to understand what I am doing, it's a question on software design and practices. The picture is just to give context. softwareengineering.meta.stackexchange.com/questions/171/… Commented Jun 29, 2017 at 19:27
  • 1
    Brian your question needs editing if we only understand you after reading comments. Commented Jun 29, 2017 at 19:29

1 Answer 1

Reset to default
1

It is my opinion that a general software engineering principle, or good practice, is that you should not have code that is produced by having multiple copies of the same source code. Instead you should abstract and generalise. This avoids the cases where one instance gets a bug fix and another does not.

Thinking about your specific problem the only difference between each set of buttons is which slot they operate on and possibly which buttons are enabled or visible. This can be generalised by having one actual set of buttons and actions with a handle of some sort, (an index, name, etc.), possibly some title text and a permissions mask. So when the user selects a specific slot they are actually presented with the single set of buttons, with some disabled or hidden, and if they select one the code is called with some information on which slot to act upon.

Rule of thumb, if you copy and paste once you may be doing it wrong, twice and you are doing it wrong.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.