Wrapper classes in pattern which I use it

[Deyan Perov]

Hello,
I trying to accomplish my framework for testing. I'm still at the beginning and I miss lackunderstanding of how to do this what I want it. It has Selenium and TestNG. I use a factory pattern to instantiate objects (I won't copy-paste full code, I will only what I think is unnecessary to be understandable) :

public class DriverManagerFactory {

    private DriverManagerFactory() {}

    public static DriverManagerAbstract getManager(WebDriverType webDriverType) {
        switch (webDriverType) {
            case CHROME:
                return new ChromeDriverManager();
            case FIREFOX:
                return new FirefoxDriverManager();
            case EDGE:
                return new EdgeDriverManager();
            default:
                throw new IllegalArgumentException("The WebDriverType instance has an unexpected value: " + webDriverType);
        }
    }

}

public abstract class DriverManager {

    protected WebDriver driver;

    protected abstract void startDriver();

    public void quitDriver() {
        if (driver != null) {
            driver.quit();
            driver = null;
        }
    }

    public WebDriver getDriver() {
        if (driver == null) {
            startDriver();
        }
        return driver;
    }

}

public class ChromeDriverManager extends DriverManager {

    @Override
    protected void startDriver() {
        WebDriverManager.chromedriver().cachePath("Target/Drivers/Chrome").setup();
        driver = new ChromeDriver();
        driver.manage().window().maximize();
    }

}

public class FirefoxDriverManager extends DriverManager {

    @Override
    protected void startDriver() {
        WebDriverManager.firefoxdriver().cachePath("Target/Drivers/Firefox").setup();
        driver = new FirefoxDriver();
        driver.manage().window().maximize();
    }

}

// etc.

BaseTest page which has to extend every Test class:

@Log4j2
public class BaseTest {

    private final ThreadLocal<DriverManager> driverManager = new ThreadLocal<>();
    private final ThreadLocal<WebDriver> driver = new ThreadLocal<>();

    private void setDriverManager(DriverManager driverManager){
        this.driverManager.set(driverManager);
    }

    protected DriverManager getDriverManager(){
        return this.driverManager.get();
    }

    private void setDriver(WebDriver driver){
        this.driver.set(driver);
    }

    protected WebDriver getDriver(){
        return this.driver.get();
    }

    @Parameters("browser")
    @BeforeMethod
    public synchronized void startDriver(@Optional String browser) {
        ThreadContext.put("ROUTING_KEY", browser);
        browser = System.getProperty("browser", browser);
        setDriverManager(DriverManagerFactory.getManager(WebDriverType.valueOf(browser)));
        setDriver(getDriverManager().getDriver());
        getDriver().navigate().to("http://automationpractice.com/index.php");
        log.info("Current Thread: " + Thread.currentThread().getId() + ", Driver = " + getDriver());
    }

    @AfterMethod
    public synchronized void quitDriver(@Optional String browser, ITestResult result) {
        log.info("Current Thread: " + Thread.currentThread().getId() + ", Driver = " + getDriver());
        getDriverManager().getDriver().quit();

    }

}

As you can see I want to get the full potential and to use parallel testing.
This code above is ok, I mean it works but if you have any suggestions I would like to hear everything to learn better.

Then I decided it will have my own wrapper Driver and Element class which I will call where I need it and it will have override methods with little boost .

public abstract class Driver {

    public abstract void quit();

    public abstract void goToUrl(String url);

    public abstract Element findElement(By locator);

    public abstract List<Element> findElements(By locator);

    public abstract void waitUntilPageLoadsCompletely();

    public abstract void refresh();

// ....

}

I won't copy-paste all abstract methods. I just added to see what I really want to do it. Anyway, I have a lot of work to do in those methods.

public class WebCoreDriver extends Driver {

    private WebDriver webDriver;
    private WebDriverWait webDriverWait;

    @Override
    public void quit() {
        webDriver.quit();
    }

    @Override
    public void goToUrl(String url) {
        webDriver.navigate().to(url);
    }

    @Override
    public Element findElement(By locator) {
        WebElement nativeWebElement = webDriverWait.until(ExpectedConditions.presenceOfElementLocated(locator));
        Element element = new WebCoreElement(webDriver, nativeWebElement, locator);
        return element;
    }

// other overridden methods.


}

Element class:

public abstract class Element {

    public abstract By getBy();

    public abstract String getText();

    public abstract Boolean isEnabled();

    public abstract Boolean isDisplayed();

    public abstract void typeText(String text);

    public abstract void click();

// .........

public class WebCoreElement extends Element {

    private final WebDriver webDriver;
    private final WebElement webElement;
    private final By by;

    public WebCoreElement(WebDriver webDriver, WebElement webElement, By by) {
        this.webDriver = webDriver;
        this.webElement = webElement;
        this.by = by;
    }

    @Override
    public By getBy() {
        return by;
    }

    @Override
    public String getText() {
        return webElement.getText();
    }

    @Override
    public Boolean isEnabled() {
        return webElement.isEnabled();
    }

    @Override
    public Boolean isDisplayed() {
        return webElement.isDisplayed();
    }

    @Override
    public void typeText(String text) {
        webElement.clear();
        webElement.sendKeys(text);
    }

    @Override
    public void click() {
        waitToBeClickable(by);
        webElement.click();
    }

// ..............

First I wanted to create for Driver and Element to be decorators. But I am not sure do I really need it in overridden methods to call something new, before or after from CoreElement/Driver classes. Now I'm wondering do Driver and Element will stay in SRP because I think it will have a lot of abstract methods.

But the main question of this topic is if I let my wrapper Driver and Element how to implement them in factory pattern and to call my Driver instead of WebDriver? That is the part that I can understand to continue to work on it.

Please, help me.

[Stephan van Hulst]

So if I understand correctly, you want to achieve two things:

Decorate WebElement and WebDriver with your own methods.

Create factory of driver managers, where a driver manager wraps around a specific type of (decorated) driver.

First, make sure you have interfaces for your driver manager, driver and element types. Providing only abstract classes is a real pain if you decide later that you want to use a different base implementation.

You can easily solve your problem by having your manager return instances of your custom driver interface, instead of WebDriver:

interface DriverManagerFactory {

  DriverManager createManager(WebDriverType driverType);

}

final class DefaultDriverManagerFactory implements DriverManagerFactory {

  private final Duration timeout;

  private final Duration sleep;

  private final Clock clock;

  private final Sleeper sleeper;

  DefaultDriverManagerFactory(Duration timeout, Duration sleep, Clock clock, Sleeper sleeper) {
    if (timeout == null)
      throw new IllegalArgumentException("The timeout may not be null.");

    if (sleep == null)
      throw new IllegalArgumentException("The sleep time may not be null.");

    if (clock == null)
      throw new IllegalArgumentException("The clock may not be null.");

    if (sleeper == null)
      throw new IllegalArgumentException("The sleeper may not be null.");

    this.timeout = timeout;
    this.sleep   = sleep;
    this.clock   = clock;
    this.sleeper = sleeper;
  }

  @Override
  public DriverManager createManager(WebDriverType driverType) {
    return switch (webDriverType) {
      case CHROME  -> new  ChromeDriverManager(timeout, sleep, clock, sleeper);
      case EDGE    -> new    EdgeDriverManager(timeout, sleep, clock, sleeper);
      case FIREFOX -> new FireFoxDriverManager(timeout, sleep, clock, sleeper);

      default -> throw new IllegalArgumentException(String.format(
        "Unknown web driver type '%s'.",
        driverType
      ));
    } 
  }
}

interface DriverManager extends AutoCloseable {

  boolean isClosed();

  Driver getDriver();

  @Override
  public void close();

}

abstract class AbstractDriverManager implements DriverManager {

  private final Duration timeout;

  private final Duration sleep;

  private final Clock clock;

  private final Sleeper sleeper;

  private Driver driver;

  protected AbstractDriverManager(Duration timeout, Duration sleep, Clock clock, Sleeper sleeper) {
    if (timeout == null)
      throw new IllegalArgumentException("The timeout may not be null.");

    if (sleep == null)
      throw new IllegalArgumentException("The sleep time may not be null.");

    if (clock == null)
      throw new IllegalArgumentException("The clock may not be null.");

    if (sleeper == null)
      throw new IllegalArgumentException("The sleeper may not be null.");

    this.timeout = timeout;
    this.sleep   = sleep;
    this.clock   = clock;
    this.sleeper = sleeper;
  }

  @Override
  public final boolean isClosed() {
    return driver != null && driver.isClosed();
  }

  @Override
  public final Driver getDriver() {
    if (isClosed())
      throw new IllegalStateException("The managed driver has already been closed.");

    if (driver == null) {
      driver = createDriver(timeout, sleep, clock, sleeper);
      driver.maximizeWindow();
    }

    return driver;
  }

  protected abstract Driver createDriver(Duration timeout, Duration sleep, Clock clock, Sleeper sleeper);

  @Override
  public final void close() {
    if (driver == null)
      throw new IllegalStateException("No driver has been created yet.");

    driver.close();
  }
}

final class ChromeDriverManager extends AbstractDriverManager {

  ChromeDriverManager(Duration timeout, Duration sleep, Clock clock, Sleeper sleeper) {
    super(timeout, sleep, clock, sleeper);
  }

  @Override
  protected Driver createDriver(timeout, sleep, clock, sleeper) {
    var manager = WebDriverManager.chromeDriver();
    manager.cachePath("Target/Drivers/Chrome").setup();
    
    var webDriver = manager.getDriver();
    var wait = new WebDriverWait(webDriver, timeout, sleep, clock, sleeper);
    return new DecoratedChromeDriver(webDriver, wait);
  }
}

interface Driver extends AutoCloseable {

  boolean isClosed();

  void goToUrl(String url);

  Element findElement(By locator);

  List<Element> findElements(By locator);

  void waitUntilPageLoadsCompletely();

  void refresh();

  void closeWindow();

  void maximizeWindow();

  @Override
  public void close();

  default void quit() {
    close();
  }
}

abstract class WebDriverDecorator implements Driver {

  private WebDriver webDriver;

  private WebDriverWait wait;

  private boolean isClosed;

  protected WebDriverDecorator(WebDriver webDriver, WebDriverWait wait) {
    if (webDriver == null)
      throw new IlllegalArgumentException("The web driver may not be null.");

    if (wait == null)
      throw new IlllegalArgumentException("The wait service may not be null.");

    this.webDriver = webDriver;
    this.wait      = wait;
  }

  protected WebDriver webDriver() {
    return webDriver;
  }

  protected WebDriverWait wait() {
    return wait;
  }

  @Override
  public boolean isClosed() {
    return isClosed;
  }

  @Override
  public void goToUrl(String url) {
    webDriver.navigate().to(url);
  }

  @Override
  public void findElement(By locator) {
    var webElement = wait.until(ExpectedConditions.presenceOfElementLocated(locator);
    return decorateElement(webElement, locator);
  }

  @Override
  public List<Element> findElements(By locator) {
    throw new UnsupportedOperationException("Not implemented yet.");
  }

  @Override
  public void waitUntilPageLoadsCompletely() {
    throw new UnsupportedOperationException("Not implemented yet.");
  }

  @Override
  public void refresh() {
    throw new UnsupportedOperationException("Not implemented yet.");
  }

  @Override
  public void maximizeWindow() {
    driver.manage().window().maximize();
  }

  @Override
  public void closeWindow() {
    webDriver.close();
  }

  @Override
  public void close() throws Exception {
    webDriver.quit();
    isClosed = true;
  }

  protected Element decorateElement(WebElement webElement, By locator) {
    return new DefaultElement(webElement, locator);
  }
}

interface Element {
  //
}

abstract class WebElementDecorator implements Element {
 // Give base implementation for your Element interface.
}

final class DefaultElement extends WebElementDecorator {
  // Give a final default implementation for your Element interface.
}

final class DecoratedChromeDriver extends WebDriverDecorator {

  DecoratedChromeDriver(WebDriver webDriver, WebDriverWait wait) {
    super(webDriver, wait);
  }

  @Override
  protected ChromeElement decorateElement(WebElement element, By locator) {
    super.decorateElement(element, locator);
    // Overwrite this method implementation if you want custom elements for Chrome.
  }

  // Override other default implementations or add new ones specifically for Chrome.
}

Now all of this is massively overengineered and I don't think you need it all. Just take the bits that help.

I also made Driver and DriverManager extend AutoCloseable. That means you'll be able to do something like this:

@ParameterizedTest
@EnumSource(WebDriverType.class)
void testSomething(WebDriverType driverType) {
  try (
    var manager = factory.createManager(driverType);
    var driver  = manager.getDriver();
  ) {
    //
  }
}

This will automatically make the driver quit when the test finishes.

[Deyan Perov]

First, thank you very much! You showed me a new level for me how to think about implementation.

Decorate WebElement and WebDriver with your own methods.

Yes and no. When I researched I thought it will be useful. I am in dilemma do I need a decorator pattern here. What do you think? I want to achieve this project (skeleton of the project) can use for mobile testing too (Appium) because of that my goal is to wrap Element and Driver.
How do I look at a decorator? Some methods for Elements may not be applicable in some situations and then I want to override them over decorator. if I really need that then am I making a mistake somewhere?

Create factory of driver managers, where a driver manager wraps around a specific type of (decorated) driver.

Yes.

I am going to implement these codes.

[Stephan van Hulst]

Deyan Perov wrote:I am in dilemma do I need a decorator pattern here. What do you think?

Honestly, I don't know. What problem are you trying to solve? As far as I can tell, once you have setup a driver for a specific browser, using the driver to perform your tests is the same regardless of the browser. If you don't like the API provided by WebDriver and WebElement, you can of course provide your own façade that wraps around those classes, but you wouldn't need a custom subclass for every different type of browser. In that case, just rename WebDriverDecorator to SeleniumDriverFacade and make it final. You can then also get rid of Element and all its subtypes, and just return WebElement.

I want to achieve this project (skeleton of the project) can use for mobile testing too (Appium) because of that my goal is to wrap Element and Driver.

I'm not familiar with that framework, but if there is overlap with the drivers and elements used by Selenium, then yes it makes sense to write your own Element and Driver interfaces and have façades for Selenium and Appium implement those interfaces by wrapping around the classes that Selenium/Appium provide.

How do I look at a decorator? Some methods for Elements may not be applicable in some situations and then I want to override them over decorator.

You need to explain this a little bit better. What methods may not be applicable? In what situations?

[Deyan Perov]

Maybe I’m not on the right track and I don't know how to understand better. I think the decorator is not what I am looking for.
My idea is I want to create my own methods for any Element and those methods I will use for locators to interact with it. The driver will have his own methods too.
This is one of example which probably I will use:

@Override
    public void click() {
        waitToBeClickable(by);
        webElement.click();
    }

 private void waitToBeClickable(By by) {
        var webDriverWait = new WebDriverWait(webDriver, 30); 
        webDriverWait.until(ExpectedConditions.elementToBeClickable(by));
    }

Before it clicks on an element it has something to happen to be sure there is an element I am looking for, for example above to wait for elementToBeClickable, to be presented in DOM, stale element, or anything else to help me to avoid possible exceptions. I don't want just to call Selenium's WebDriver and to click() on an element. In a similar direction, it will work with other Element's methods.
I thought decorator pattern can be useful if some methods in some situation for some element on a page doesn't work jobs well to override over ElementDecorator and to use it in that specific situation. I didn't try this in practice. That was on my mind when I start to explore how to do this. I don't have enough experience to resolve is this good or not.
I hope I have explained a little better what I want to achieve.

If you don't like the API provided by WebDriver and WebElement, you can of course provide your own façade that wraps around those classes, but you wouldn't need a custom subclass for every different type of browser. In that case, just rename WebDriverDecorator to SeleniumDriverFacade and make it final. You can then also get rid of Element and all its subtypes, and just return WebElement.

Could you please show me this in a small example to be sure I understood you?

[Deyan Perov]

I did refactoring, I avoid the decorator pattern. The main problem is in BaseTest class where I need to use ThreadLocal class and to set the driver which I will use in a multi-thread. Every Test class has to extend BaseTest class.

I have to initialize DefaultDriverManagerFactory in this class but I don't see the point to put in BaseTest Duration, Clock and Sleeper attributes which have to be put in constructor DefaultDriverManagerFactory(Duration timeout, Duration sleep, Clock clock, Sleeper sleeper). That codes haven't to be part of BaseTest.
If I use the static method (from my first post) then I have to put static for interface DriverManagerFactory method DriverManager createManager(WebDriverType driverType); with the body. Is that good practice in this situation?

package base;

import core.driverfactory.*;
import lombok.extern.log4j.Log4j2;
import org.apache.logging.log4j.ThreadContext;
import org.openqa.selenium.WebDriver;
import org.testng.ITestResult;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Optional;
import org.testng.annotations.Parameters;

@Log4j2
public class BaseTest {

    private final ThreadLocal<DriverManager> driverManager = new ThreadLocal<>();
    private final ThreadLocal<WebDriver> driver = new ThreadLocal<>();

    private void setDriverManager(DriverManager driverManager){
        this.driverManager.set(driverManager);
    }

    protected DriverManager getDriverManager(){
        return this.driverManager.get();
    }

    private void setDriver(WebDriver driver){
        this.driver.set(driver);
    }

    protected WebDriver getDriver(){
        return this.driver.get();
    }

    @Parameters("browser")
    @BeforeMethod
    public synchronized void startDriver(@Optional String browser) {
        ThreadContext.put("ROUTING_KEY", browser);
        browser = System.getProperty("browser", browser);
        setDriverManager(DefaultDriverManagerFactory.createManager(WebDriverType.valueOf(browser)));
        setDriver(getDriverManager().getDriver());
        getDriver().navigate().to("http://automationpractice.com/index.php");
//        log.info("Current Thread: " + Thread.currentThread().getId() + ", Driver = " + getDriver());
    }

    @AfterMethod
    public synchronized void quitDriver(@Optional String browser, ITestResult result) {
        log.info("Current Thread: " + Thread.currentThread().getId() + ", Driver = " + getDriver());
        getDriverManager().getDriver().quit();

    }

}

package core.driverfactory;

import core.driver.Driver;

public interface DriverManager {

    boolean isClosed();

    Driver getDriver();

    void close(); // AutoClosable?

}

package core.driverfactory;

public interface DriverManagerFactory {

    DriverManager createManager(WebDriverType driverType);

}

package core.driverfactory;

import core.driver.Driver;
import org.openqa.selenium.support.ui.Sleeper;

import java.time.Clock;
import java.time.Duration;

abstract class AbstractDriverManager implements DriverManager {

    private final Duration timeout;
    private final Duration sleep;
    private final Clock clock;
    private final Sleeper sleeper;
    private Driver driver;

    protected AbstractDriverManager(Duration timeout, Duration sleep, Clock clock, Sleeper sleeper) {
        if (timeout == null) {
            throw new IllegalArgumentException("The timeout can not be null");
        }
        if (sleep == null) {
            throw new IllegalArgumentException("The sleep can not be null");
        }
        if (clock == null) {
            throw new IllegalArgumentException("The clock can not be null");
        }
        if (sleeper == null) {
            throw new IllegalArgumentException("The sleeper can not be null");
        }

        this.timeout = timeout;
        this.sleep = sleep;
        this.clock = clock;
        this.sleeper = sleeper;
    }

    @Override
    public boolean isClosed() {
        return driver != null && driver.isClosed();
    }

    @Override
    public Driver getDriver() {
        if (isClosed()) {
            throw new IllegalArgumentException("The managed driver has already been closed");
        }

        if (driver == null) {
            driver = createDriver(timeout, sleep, clock, sleeper);
            driver.maximizeWindow();
        }
        return driver;
    }

    @Override
    public void close() {
        if (driver == null) {
            throw new IllegalArgumentException("Driver has not created yet");
        }
        driver.close();
    }

    protected abstract Driver createDriver(Duration timeout, Duration sleep, Clock clock, Sleeper sleeper);

}

package core.driverfactory;


import org.openqa.selenium.support.ui.Sleeper;

import java.time.Clock;
import java.time.Duration;

public final class DefaultDriverManagerFactory implements DriverManagerFactory {

    private final Duration timeout;
    private final Duration sleep;
    private final Clock clock;
    private final Sleeper sleeper;

    public DefaultDriverManagerFactory(Duration timeout, Duration sleep, Clock clock, Sleeper sleeper) {
        if (timeout == null) {
            throw new IllegalArgumentException("The timeout can not be null");
        }
        if (sleep == null) {
            throw new IllegalArgumentException("The sleep can not be null");
        }
        if (clock == null) {
            throw new IllegalArgumentException("The clock can not be null");
        }
        if (sleeper == null) {
            throw new IllegalArgumentException("The sleeper can not be null");
        }

        this.timeout = timeout;
        this.sleep = sleep;
        this.clock = clock;
        this.sleeper = sleeper;
    }

    @Override
    public DriverManager createManager(WebDriverType driverType) {
        switch (driverType) {
            case CHROME:
                return new ChromeDriverManager(timeout, sleep, clock, sleeper);
            case FIREFOX:
                return new FirefoxDriverManager(timeout, sleep, clock, sleeper);
            case EDGE:
                return new EdgeDriverManager(timeout, sleep, clock, sleeper);
            default:
                throw new IllegalArgumentException("The WebDriverType instance has an unexpected value: " + driverType);
        }
    }

}

package core.driverfactory;

import core.driver.Driver;
import core.driver.WebCoreDriver;
import io.github.bonigarcia.wdm.WebDriverManager;
import lombok.var;
import org.openqa.selenium.support.ui.Sleeper;
import org.openqa.selenium.support.ui.WebDriverWait;

import java.time.Clock;
import java.time.Duration;

final class ChromeDriverManager extends AbstractDriverManager {

    ChromeDriverManager(Duration timeout, Duration sleep, Clock clock, Sleeper sleeper) {
        super(timeout, sleep, clock, sleeper);
    }

    @Override
    protected Driver createDriver(Duration timeout, Duration sleep, Clock clock, Sleeper sleeper) {
        var manager = WebDriverManager.chromedriver();
        manager.cachePath("Target/Drivers/Chrome").setup();

        var webDriver = manager.getWebDriver();
        var wait = new WebDriverWait(webDriver, clock, sleeper, timeout.getSeconds(), sleep.toMillis());
        return new WebCoreDriver(webDriver, wait);
    }

}

package core.driverfactory;

public enum WebDriverType {
    CHROME,
    FIREFOX,
    EDGE
}

package core.driver;

import core.element.Element;
import org.openqa.selenium.By;

import java.util.List;

public abstract class Driver {

    public abstract boolean isClosed();

    public abstract void quit();

    public abstract void goToUrl(String url);

    public abstract Element findElement(By locator);

    public abstract List<Element> findElements(By locator);

    public abstract void waitForAjax();

    public abstract void waitUntilPageLoadsCompletely();

    public abstract void refresh();

    public abstract void closeWindow();

    public abstract void maximizeWindow();

    public abstract void close();

}

package core.driver;

import core.element.Element;
import core.element.WebCoreElement;
import lombok.var;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

import java.util.List;

public class WebCoreDriver extends Driver {

    private WebDriver webDriver;
    private WebDriverWait webDriverWait;
    private boolean isClosed;

    public WebCoreDriver(WebDriver webDriver, WebDriverWait webDriverWait) {
        if (webDriver == null) {
            throw new IllegalArgumentException("The web driver can not be null");
        }
        if (webDriverWait == null) {
            throw new IllegalArgumentException("The web driver wait can not be null");
        }

        this.webDriver = webDriver;
        this.webDriverWait = webDriverWait;
    }

    protected WebDriver getWebDriver() {
        return webDriver;
    }

    protected WebDriverWait getWebDriverWait() {
        return webDriverWait;
    }

    @Override
    public boolean isClosed() {
        return isClosed;
    }

    @Override
    public void quit() {
        webDriver.quit();
    }

    @Override
    public void goToUrl(String url) {
        webDriver.navigate().to(url);
    }

    @Override
    public Element findElement(By locator) {
        var nativeWebElement = webDriverWait.until(ExpectedConditions.presenceOfElementLocated(locator));
        return new WebCoreElement(webDriver, nativeWebElement, locator);
    }

    @Override
    public List<Element> findElements(By locator) {
        return null;
    }

    @Override
    public void waitForAjax() {

    }

    @Override
    public void waitUntilPageLoadsCompletely() {

    }

    @Override
    public void refresh() {

    }

    @Override
    public void closeWindow() {
        webDriver.close();
    }

    @Override
    public void maximizeWindow() {
        webDriver.manage().window().maximize();
    }

    @Override
    public void close() {
        webDriver.quit();
        isClosed = true;
    }

}

Can anyone help me how to do this?

[Deyan Perov]

This topic has over 1500 views. Did I explain badly what I need? I just need some guidelines. I don't have a lot of knowledge and I hoped I will find help here. I think this question isn't for StackOverflow because I need directions on how to do and finish.
it was shown to me in one way but in a way, I don’t know how to finish unlike mine originally.