In our ongoing journey to transform a complex dataset from the Star Wars Unlimited card game into a fully functional APEX application, we've successfully parsed and organized our data in Part 2. Now, in this third installment, we're ready to put this data on display by creating a visual representation in the form of a card gallery. I am going to do all of this on https://apex.oracle.com/ so that it is easy to follow along.
Let us start by creating an application. It just needs to be a simple app with no bells or whistles. We will create everything from the ground up.
Let’s just get started on the home page. It should look like this:
We can create a new Region and call it "Cards."
Let’s set that Region to Type Cards and set the Table Name to SWU_CARD_LIST, the table we created in the previous part of this series in Step 2.
Now, we will set the attributes to show a card with an image for each of the rows in the table.
We will set the Card Primary Key Column 1 to CARD_NUMBER to uniquely identify each card.
And the Media section configuration to:
&IMAGE_URL.'Now we run the app, and we have images! But they are out of order.
To remedy the ordering, I am going to change the Source to a query and add an ORDER BY statement to ensure the cards are sorted by their number. Here’s the query used:
select CARD_NUMBER,
CARD_SET,
CARD_NAME,
TRAITS,
ARENAS,
CARD_COST,
CARD_POWER,
CARD_HP,
FRONT_TEXT,
DOUBLE_SIDED,
RARITY,
IMAGE_URL,
BACK_IMAGE,
MARKET_PRICE,
VARIANT
from SWU_CARD_LIST
ORDER BY card_number
Now they are all in order, and it is easier to find what we are looking for.
Like I said, easier, but there is more that we can do. In Part 4, we will introduce Faceted Search to our application. This feature will allow users to filter cards based on various criteria, such as stats or card type, simplifying the process of finding specific cards within the app. Stay tuned as we continue to develop our application into a robust platform for managing and displaying our Star Wars Unlimited card collection!