jBuilder User Guide

jBuilder User Guide === > [中文](#jBuilder-使用者指南) ## Table of Contents * [What is a jBoard](#What-is-a-jBoard) * [jBuilder and Dock Builder](#jBuilder-and-Dock-Builder) * [How to access Dock Builder](#How-to-access-Dock-Builder) * [jBuilder UI](#jBuilder-UI) * [Dock Builder UI](#Dock-Builder-UI) * [Process of making a jBoard](#Process-of-making-a-jBoard) * [Tutorial video](#Tutorial-video) * [Example jBoards](#Example-jBoards) * [Board Library List](#Board-Library-List) * [Dock Library List](#Dock-Library-List) #### URLs * [jBoard](https://jboard.ypcloud.com/) * [jBuilder](https://jbuilder.ypcloud.com/) --- ## What is a jBoard With jBuilder you can create jBoards that can be used as digital display boards or digital dashboards. A jBoard consists of a series of individual boards combined on a dock menu, each having their own dock page. You can navigate between dock pages from the dock menu at the bottom of a jBoard. In other words: jBoard = boards + docks --- ## Example of a Board created with jBuilder: ![](https://i.imgur.com/aISUXNM.png) --- ## Example of a jBoard after combined with Dock builder: ![](https://i.imgur.com/gBYGHpz.png) --- ## jBuilder and Dock Builder There are two main work areas involved in jBuilder. <br> In the default jBuilder work area you create individual boards, then move on to the Dock Builder work area to combine a series of boards to create a complete jBoard. * jbuilder is to make boards * Dock buidler is to add docks and let the boards combine into a jBoard --- ## How to access Dock Builder: From the default jBuilder work area, click on the <img src="https://i.imgur.com/BwmKrTz.png" width=33 height=30> icon on the top left corner to go to Dock Builder. <br> To leave Dock Builder and return to jBuilder, click the <img src="https://i.imgur.com/HopFYkU.png" width=35 height=30> icon. --- ## jBuilder UI <img src="https://i.imgur.com/fuglHd7.png" width=760 height=475> On the left <img src="https://i.imgur.com/66dK5wO.png" width=30 height=30>, the user can define the board by specifying the number of columns and rows, as well as enable/disable the header and footer of the board frame. The board grid serves as the framework for the board’s layout and helps us manage the proportions between elements for responsive web design. Next is <img src="https://i.imgur.com/BwmKrTz.png" width=33 height=30> which leads to Dock Builder. The icons at the right of the tool bar have the following functions: * Save board <img src="https://i.imgur.com/TJUZUG1.png" width=35 height=30>, icon will not be visible until you have begun editing your board/Dock * Add new panel <img src="https://i.imgur.com/J4a1Laa.png" width=30 height=30> * Refresh workspace to start a new board <img src="https://i.imgur.com/0EQSXdh.png" width=30 height=30> * View board in json format <img src="https://i.imgur.com/9f04Grd.png" width=30 height=30> * Open board library list <img src="https://i.imgur.com/rNDVXuk.png" width=30 height=30> * Logout from your account <img src="https://i.imgur.com/EvC18xA.png" width=32 height=30> --- ## Dock Builder UI <img src="https://i.imgur.com/ShWoIiB.png" width=760 height=475> In the top left corner, the <img src="https://i.imgur.com/HopFYkU.png" width=35 height=30> icon on the tool bar leads back to the default jBuilder work area. The icons at the right of the tool bar have the following functions: * Save Dock <img src="https://i.imgur.com/TJUZUG1.png" width=35 height=30>, icon will not be visible until you have begun editing your board/Dock * Open Dock library list <img src="https://i.imgur.com/BwmKrTz.png" width=33 height=30> * Refresh workspace to start a new Dock <img src="https://i.imgur.com/0EQSXdh.png" width=30 height=30> * View Dock in json format <img src="https://i.imgur.com/9f04Grd.png" width=30 height=30> * Logout from your account <img src="https://i.imgur.com/EvC18xA.png" width=32 height=30> Below the tool bar, at the top of the work area is the header. There is no header by default, but if you wish to add one, click <img src="https://i.imgur.com/6biIEa1.png" width=31 height=30> to edit. --- ## [Process of making a jBoard](https://github.com/motebus/ultrabook/blob/main/Ultranet%20Apps/jBuilder/Process%20of%20making%20a%20jBoard.md) ### Tutorial video * jBuilder Beginner's Guide #1 - [making jBoard pages](https://www.youtube.com/watch?v=N1Rp2mCwv0c) * jBuilder Beginner's Guide #2 - [Dock Builder](https://www.youtube.com/watch?v=eQV3zaiLxyY) ### jBoard Examples - https://jboard.ypcloud.com/?q=shin.me - https://jboard.ypcloud.com/?q=allen.me - https://jboard.ypcloud.com/?q=weiting.me - https://jboard.ypcloud.com/?q=eugene.me - https://jboard.ypcloud.com/?q=chris.me - https://jboard.ypcloud.com/?q=rita.me --- ## Board Library List <img src="https://i.imgur.com/gD2OhRz.png" width=760 height=150> - Public list and private list - Delete - Clone ## Dock Library List <img src="https://i.imgur.com/H3vXPgP.png" width=760 height=200> - Public list and private list - Delete - Clone - Edit Qname & name --- ### [FAQ](https://github.com/motebus/ultrabook/blob/main/Ultranet%20Apps/jBuilder/FAQ.md) --- # jBuilder 使用者指南 ## 目錄 * [甚麼是 jBoard](#甚麼是-jBoard) * [jBuilder 與 Dock Builder](#jBuilder-與-Dock-Builder) * [如何進入 Dock Builder](#如何進入-Dock-Builder) * [jBuilder 使用者介面](#jBuilder-使用者介面) * [Dock Builder 使用者介面](#Dock-Builder-使用者介面) * [製作 jBoard 的過程](#製作-jBoard-的過程) * [教學影片](#教學影片) * [jBoard 範例](#jBoard-範例) * [看板庫清單](#看板庫清單) * [Dock 庫清單](#Dock-庫清單) #### 連結 * [jBoard](https://jboard.ypcloud.com/) * [jBuilder](https://jbuilder.ypcloud.com/) --- ## 甚麼是 jBoard 使用 jBuilder，您可以創建可用作數位顯示板或數位儀表板的 jBoard。一個 jBoard 由一系列單獨的看板組合在一個 Dock 選單上，每個看板都有自己的 Dock 頁面。您可以在 jBoard 底部的 Dock 選單之間切換 Dock 頁面。換句話說：jBoard = 看板 + Docks --- ## 使用 jBuilder 創建的看板範例： ![](https://i.imgur.com/aISUXNM.png) --- ## 結合 Dock builder 後的 jBoard 範例： ![](https://i.imgur.com/gBYGHpz.png) --- ## jBuilder 和 Dock Builder jBuilder 有兩個主要的工作區域。 <br> 在預設的 jBuilder 工作區域中，您可以創建單獨的看板，然後轉到 Dock Builder 工作區域，將一系列看板組合成一個完整的 jBoard。 * jBuilder 用於製作看板 * Dock Builder 用於添加 Docks 並將看板組合成 jBoard --- ## 如何進入 Dock Builder：從預設的 jBuilder 工作區域，單擊左上角的<img src="https://i.imgur.com/BwmKrTz.png" width=33 height=30>圖標進入 Dock Builder。 <br> 要離開 Dock Builder 並返回 jBuilder，單擊<img src="https://i.imgur.com/HopFYkU.png" width=35 height=30>圖標。 --- ## jBuilder 使用者介面 <img src="https://i.imgur.com/fuglHd7.png" width=760 height=475> 在左側<img src="https://i.imgur.com/66dK5wO.png" width=30 height=30>，使用者可以透過指定欄和列的數量，以及啟用或停用表格框架的標頭和腳注，來定義板面。該板面網格作為板面的框架，有助於我們管理元素之間的比例，實現響應式網頁設計。接下來是<img src="https://i.imgur.com/BwmKrTz.png" width=33 height=30>，它可以進入 Dock Builder。工具欄右側的圖示具有以下功能： * 儲存板面 <img src="https://i.imgur.com/TJUZUG1.png" width=35 height=30>，圖示在您開始編輯板面/Dock之前不會顯示 * 新增面板 <img src="https://i.imgur.com/J4a1Laa.png" width=30 height=30> * 刷新工作區以開始新的板面 <img src="https://i.imgur.com/0EQSXdh.png" width=30 height=30> * 以 JSON 格式查看板面 <img src="https://i.imgur.com/9f04Grd.png" width=30 height=30> * 打開板面庫清單 <img src="https://i.imgur.com/rNDVXuk.png" width=30 height=30> * 登出您的帳戶 <img src="https://i.imgur.com/EvC18xA.png" width=32 height=30> --- ## Dock Builder 使用者介面 <img src="https://i.imgur.com/ShWoIiB.png" width=760 height=475> 在工具欄的左上角，<img src="https://i.imgur.com/HopFYkU.png" width=35 height=30>圖示可以返回預設的 jBuilder 工作區。工具欄右側的圖示具有以下功能： * 儲存 Dock <img src="https://i.imgur.com/TJUZUG1.png" width=35 height=30>，圖示在您開始編輯板面/Dock之前不會顯示 * 打開 Dock 库清單 <img src="https://i.imgur.com/BwmKrTz.png" width=33 height=30> * 刷新工作區以開始新的 Dock <img src="https://i.imgur.com/0EQSXdh.png" width=30 height=30> * 以 JSON 格式查看 Dock <img src="https://i.imgur.com/9f04Grd.png" width=30 height=30> * 登出您的帳戶 <img src="https://i.imgur.com/EvC18xA.png" width=32 height=30> 在工具欄下方，工作區的頂部是標頭。預設情況下沒有標頭，但如果您想添加一個，請點擊<img src="https://i.imgur.com/6biIEa1.png" width=31 height=30>進行編輯。 --- ## [jBoard 製作過程](https://github.com/motebus/ultrabook/blob/main/Ultranet%20Apps/jBuilder/Process%20of%20making%20a%20jBoard.md) ### 教學影片 * jBuilder 初學者指南 #1 - [製作 jBoard 頁面](https://www.youtube.com/watch?v=N1Rp2mCwv0c) * jBuilder 初學者指南 #2 - [Dock Builder](https://www.youtube.com/watch?v=eQV3zaiLxyY) ### jBoard 範例 - https://jboard.ypcloud.com/?q=shin.me - https://jboard.ypcloud.com/?q=allen.me - https://jboard.ypcloud.com/?q=weiting.me - https://jboard.ypcloud.com/?q=eugene.me - https://jboard.ypcloud.com/?q=chris.me - https://jboard.ypcloud.com/?q=rita.me --- ## 看板庫清單 <img src="https://i.imgur.com/gD2OhRz.png" width=760 height=150> - 公開清單和私人清單 - 刪除 - 複製 ## Dock 庫清單 <img src="https://i.imgur.com/H3vXPgP.png" width=760 height=200> - 公開清單和私人清單 - 刪除 - 複製 - 編輯 Qname 和名稱 --- ### [常見問題解答](https://github.com/motebus/ultrabook/blob/main/Ultranet%20Apps/jBuilder/FAQ.md)