This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| user_guide:extjs:theme [2022/04/21 13:40] – admin | user_guide:extjs:theme [2022/04/21 15:41] (current) – [Production built] admin | ||
|---|---|---|---|
| Line 4: | Line 4: | ||
| * Make sure you have access to the RADIUSdesk repository to check it out using git. | * Make sure you have access to the RADIUSdesk repository to check it out using git. | ||
| - | * We assume the following: | ||
| - | * You have ssh access to a server that already have RADIUSdesk installed | ||
| - | * There is a user called **system** with sudo rights | ||
| - | |||
| - | ===== Install Java with Apt on Ubuntu | ||
| - | * Update the package index | ||
| <code bash> | <code bash> | ||
| - | sudo apt update | + | # Check out the latest version of RADIUSdesk |
| + | # We will check it out in the home directory of the **system** user. | ||
| + | cd ~ | ||
| + | git clone https:// | ||
| </ | </ | ||
| - | * Check if Java is already installed | + | * Check out the Ext JS GPL version SDK |
| <code bash> | <code bash> | ||
| - | java -version | + | cd ~ |
| + | mkdir extjs-gpl | ||
| + | cd extjs-gpl/ | ||
| + | git clone https:// | ||
| + | ln -s / | ||
| </ | </ | ||
| - | * If Java is not currently installed, you’ll see the following output | + | * For this reference we will create a black theme with red lettering. |
| - | < | + | < |
| - | java -version | + | cd / |
| - | + | vi Component.scss | |
| - | Command ' | + | |
| - | + | ||
| - | sudo apt install default-jre | + | |
| - | sudo apt install openjdk-11-jre-headless | + | |
| - | sudo apt install openjdk-8-jre-headless | + | |
| </ | </ | ||
| - | * Execute the following command to install the default Java Runtime Environment (JRE), which will install the JRE from OpenJDK 11 | + | * The file looks as follows |
| <code bash> | <code bash> | ||
| - | sudo apt -y install | + | $base-color: #000000 !default; |
| + | $panel-header-color: | ||
| + | $tab-color-active: | ||
| </ | </ | ||
| - | * Verify | + | * Please adapt to the them you want. |
| + | * After you made the adjustments, | ||
| <code bash> | <code bash> | ||
| - | sudo apt install default-jre | + | cd / |
| + | sencha package build | ||
| </ | </ | ||
| - | * You’ll see output similar | + | * Now that the theme is completed we can build the RADIUSdesk production GUI to see how it looks. |
| + | ===== Creating A Custom Theme - Part 2 ===== | ||
| + | ==== Development built ==== | ||
| + | * One can create a development and/or a production built using the Sencha Command. | ||
| + | * To build the development code: | ||
| <code bash> | <code bash> | ||
| - | openjdk version " | + | cd / |
| - | OpenJDK Runtime Environment (build 11.0.14.1+1-Ubuntu-0ubuntu1.18.04) | + | sencha app refresh |
| - | OpenJDK 64-Bit Server VM (build 11.0.14.1+1-Ubuntu-0ubuntu1.18.04, | + | sencha app build development |
| </ | </ | ||
| + | * Create this built if you also want to modify some of the RADIUSdesk GUI code and you want to see the modifications before building the final built. | ||
| - | ===== Install Sencha Command ===== | + | ==== Production built ==== |
| - | * We need to download and install the Sencha Command in order to build the custom theme for ExtJS. | + | * To build the production ready optimized code |
| - | * Refer to this URL to see which one you will need to download (32 or 64 bit) https:// | + | |
| - | * We have a 64 bit system where we are doing the download and install to. | + | |
| <code bash> | <code bash> | ||
| - | #Download the Sencha Command zip file | + | cd /home/system/rdcore/rd |
| - | wget https://trials.sencha.com/cmd/7.5.1/ | + | sencha app refresh |
| - | #Install the unzip program | + | sencha app build production |
| - | sudo apt-get install unzip | + | |
| - | #Unzip the zipfile | + | |
| - | unzip SenchaCmd-7.5.1.20-linux-amd64.sh.zip | + | |
| - | #Run the installer script | + | |
| - | ./ | + | |
| </ | </ | ||
| - | * When you run the installer script you have to accept various EULAs. Selecting | + | * This will now build the production ready code but we actually need to see how it looks in order to determine that the theme is in order. |
| - | * These steps are once off steps. Once they are completed we can get our hands dirty by starting with the customization of the theme. | + | * The production ready code will sit in this directory / |
| - | * After you are done you need to ext from the terminal (or SSH) and connect again so that the environment with the patch to the **sencha** executable is activated. | + | |
| + | ==== Looking At The Results | ||
| + | |||
| + | * Link the rd directory | ||
| <code bash> | <code bash> | ||
| - | sencha | + | sudo ln -s / |
| - | Sencha Cmd v7.5.1.20 | + | |
| - | Sencha Cmd provides several categories of commands and some global switches. In | + | |
| - | most cases, the first step is to generate an application based on a Sencha SDK | + | |
| - | such as Ext JS or Sencha Touch: | + | |
| - | ..... | + | |
| </ | </ | ||
| - | + | * Then to view the theme you can navigate to these URLs | |
| + | * DEVELOPMENT http:// | ||
| + | * PRODUCTION http:// | ||