eMOBIQ Documentation
eMOBIQ Platfom
eMOBIQ Client
eMOBIQ Client
  • Getting Started
  • How Pricing Works in eMOBIQ AI
  • Platform Interface Reference
  • Page Rendering Behaviour
  • Ui Components
    • Basic
      • Frame
      • Image
      • Label
      • Panel
      • Streamcamera
      • Streamplayer
      • Video
    • Forms
      • Button
      • Checkbox
      • Combobox
      • Datepicker
      • Edit
      • Memo
      • Radiobutton
      • Timepicker
    • General
      • Barcode
      • Chart
      • Datalist
        • Datalist
        • Using Datalist
      • Map
      • Pdf
      • Qrcode
      • Signature
      • Snippet
    • Payment
      • Paypal
  • Events Reference
  • Actions And Visual Logic
    • Action Reference
      • Cordova
        • App
          • animate
          • bbCodeToCanvas
          • bbCodeToCanvasSync
          • canvasGenerate
          • canvasGenerateFrom
          • canvasHeight
          • canvasResize
          • canvasToDataURL
          • canvasToImage
          • clearAllVar
          • comment
          • componentAttr
          • componentElAttr
          • ComponentElement
          • componentMethod
          • componentValue
          • console
          • convertImageToBase64
          • disablePage
          • displaySnippet
          • enablePage
          • getAppVersion
          • getComponent
          • getLanguage
          • getLanguageList
          • getVar
          • getVarAttr
          • hideElement
          • inactivityTimeout
          • isElementShown
          • istampzRequest
          • languageConvertData
          • methodCall
          • nfcStartRead
          • nfcStopRead
          • nfcWrite
          • openlink
          • pullToRefresh
          • reload
          • remComponentElAttr
          • renderTemplate
          • resolveJSName
          • scroll
          • sendMail
          • setComboOptions
          • setCompoentFocus
          • setComponentAttr
          • setComponentElAttr
          • setComponentLink
          • setComponentValue
          • setLanguage
          • setVar
          • share
          • showElement
          • sortingDisable
          • sortingEnable
        • Array
          • avg
          • count
          • findArrayIndex
          • newArray
          • newObject
          • pop
          • push
          • pushObject
          • removeObject
          • shift
          • sort
          • sum
          • unshift
        • Browser
          • valueFromURL
        • Chart
          • chartPopulateAreaData
          • chartPopulateAreaSplineData
          • chartPopulateBarData
          • chartPopulateDonutData
          • chartPopulateGaugeData
          • chartPopulateLineData
          • chartPopulatePieData
          • chartPopulateScatterPlotData
          • chartPopulateSplineData
          • chartPopulateStepAreaData
          • chartPopulateStepData
        • Comparation
          • equal
          • equalOrGreater
          • equalOrLess
          • greater
          • less
          • notEqual
        • Conversion
          • encodeURI
          • fontHuge
          • fontLarge
          • fontNormal
          • fontSmall
          • generateBarcode
          • generateQRCode
          • join
          • jsonDecode
          • jsonEncode
          • round
          • split
          • toBoolean
          • toFloat
          • toInteger
          • toNull
          • toString
          • xmlDecode
        • Dataset
          • acumaticaCall
          • axCall
          • clearAllData
          • clearData
          • crm365Call
          • crmCall
          • dataFieldToArray
          • dataFromString
          • dataToString
          • deleteBy
          • deleteByMulti
          • deleteData
          • dynamicsGPCall
          • filterData
          • insert
          • insertData
          • loadData
          • loadNext
          • mssqlCall
          • mssqlQuery
          • navCall
          • query
          • rawCall
          • sageCall
          • sapB1Call
          • selectAll
          • selectBy
          • selectByMulti
          • soapCall
          • updateBy
          • updateByMulti
          • updateData
        • Device
          • HNSPublishMessage
          • HNSPushList
          • HNSPushMessageByUserId
          • HNSPushNotification
          • HNSRegisterUser
          • HNSSubscribeTopic
          • keyboardShow
          • addFaceAzure
          • addPersonAzure
          • barcodeScanDisable
          • barcodeScanEnable
          • barcodeScanEvent
          • unregisterBarcodeScanEvent
          • barcodeScanTrigger
          • barcodeScanner
          • captureAudio
          • captureImage
          • captureVideo
          • clearAccelerometer
          • clearExternalAppData
          • clearPosition
          • closeAudio
          • currentAccelerometer
          • dateTimeChooser
          • detectFaceAzure
          • deviceAddTouchSensor
          • deviceBeep
          • deviceHasTouchSensor
          • deviceId
          • deviceManufacturer
          • deviceName
          • deviceOS
          • deviceOSVersion
          • deviceRemoveTouchSensor
          • deviceSerial
          • deviceVerifyTouchSensor
          • deviceVibrate
          • exitApp
          • fileChooser
          • fileGetDetails
          • getExternalAppData
          • getLocation
          • identifyFaceAzure
          • imageChooser
          • keepScreenOn
          • keyboardHide
          • networkInformation
          • networkPrintingCheck
          • networkPrintingPrint
          • networkStatus
          • onBackButton
          • openAudio
          • openExternalApp
          • pauseAudio
          • playAudio
          • removeGroupAzure
          • removePersonAzure
          • screenBrightness
          • sendMailSMTP
          • setSizeDisk
          • socketConnect
          • socketDisconnect
          • socketLeave
          • socketListener
          • socketSend
          • startBeacon
          • startBeaconMonitoring
          • startStream
          • statusBarHide
          • statusBarShow
          • stopAudio
          • stopBeacon
          • stopBeaconMonitoring
          • stopStream
          • textToSpeech
          • verifyFaceFromPhotoAzure
          • watchAccelerometer
          • watchPosition
        • Dialog
          • confirmDialog
          • infoDialog
          • inputDialog
          • modalDialog
        • Facebook
          • facebookLogout
        • File
          • Copy
          • Delete
          • Download
          • Read
          • backupSqlite
          • open
          • restoreSqlite
          • saveBase64ToGallery
          • storagePath
          • write
        • Firebase
          • firebaseStorageDelete
          • firebaseStorageURL
          • firebaseStorageUpload
        • Flow
          • break
          • callback
          • clearInterval
          • conditional
          • continue
          • doWhileLoop
          • forLoop
          • map
          • setInterval
          • setTimeout
          • throw
          • tryCatch
          • whileLoop
        • Global
          • defaultImage
          • generateRandomAlphabet
          • generateRandomAlphanumeric
          • generateRandomNumber
          • getCurrentPage
          • getPreviousPage
          • gotoPage
          • makeId
          • openInternalBrowser
        • Google
          • googleLogin
          • googleLogout
          • mapAddMarker
          • mapClearMarker
          • mapDeleteMarker
          • mapFitBounds
          • mapGetZoom
          • mapRemoveClickListener
          • mapRoute
          • mapSetCenter
          • mapSetClickListener
          • mapSetZoom
          • placeAutoComplete
        • Intent
          • intentMaps
          • intentNavigation
          • intentPhoneCall
          • intentSMS
          • intentSendEmail
        • Logical
          • and
          • not
          • or
          • xor
        • Math
          • Absolute
          • add
          • atan2
          • ceil
          • cos
          • div
          • floor
          • max
          • min
          • mod
          • multi
          • pi
          • plus
          • pow
          • sin
          • sqr
          • sqrt
          • sub
          • tan
        • Object
          • addDate
          • convertTimezoneDate
          • dateDiff
          • dbDate
          • formatDate
          • formatNumber
          • objectAttr
          • objectKeys
          • objectValues
          • setObjectAtt
          • strToDate
          • toArray
          • toObject
        • Pdf
          • pdfGenerate
        • Payment
          • 2c2pPaymentRequest
          • eNetsPaymentRequest
          • generatePaynowQR
          • macAuthenticate
          • mcpEWalletQuickPay
          • mcpEWalletUnifiedOrder
          • mcpGetTransactions
          • mcpGetTranscationDetails
          • mcpTransactRefund
          • mcpTransactSales
          • mcpTransactVoid
          • paypalGenerateButton
        • Printer
          • btPrinterConnect
          • btPrinterDisconnect
          • btPrinterIsConnected
          • btPrinterPortList
          • btPrinterPrint
          • btPrinterRead
          • canvasToCPCL
          • canvasToESCP
          • canvasToESCPOS
          • canvasToEXPCL
          • canvasToZPL
          • formatToCPCL
          • formatToESCPOS
          • qrToESCPOS
          • setPrintStyle
        • Signature
          • signatureRedraw
        • Specialcharacter
          • sc_carriageReturn
          • sc_esc
          • sc_escape
          • sc_horizontalTab
          • sc_lineFeed
          • sc_space
        • String
          • capitalize
          • concat
          • decodeBase64String
          • decrypt
          • encodeBase64String
          • encrypt
          • findIndex
          • increment
          • left
          • length
          • lowerCase
          • mid
          • padString
          • replace
          • right
          • trim
          • upperCase
        • Validation
          • isArray
          • isEmail
          • isNull
          • isNumber
      • React Native
        • App
          • displaySnippet
          • openlink
          • reload
        • Component
          • setOptions
          • setProperty
          • setValue
          • getProperty
          • getValue
        • Connector
          • restCall
          • soapCall
        • Control
          • callback
          • clearInterval
          • conditional
          • delay
          • interval
          • loop
        • Conversion
          • toBoolean
          • toDate
          • toList
          • toNull
          • toNumber
          • toObject
          • toText
        • Dataset
          • insert
          • loadData
          • loadNext
          • read
          • remove
          • update
        • Datetime
          • difference
          • get
          • update
        • Device
          • barcodeCameraScanner
          • captureAudio
          • captureImage
          • captureVideo
          • chooseFile
          • generateBarcode
          • generateQRCode
          • getLocation
        • File
          • copy
          • getDetails
          • getStoragePath
          • read
          • remove
          • saveToGallery
          • write
        • Format
          • dateTime
          • number
          • text
        • Global
          • goToPage
        • List
          • average
          • combine
          • count
          • fill
          • find
          • includes
          • insertFirst
          • insertLast
          • max
          • min
          • removeFirst
          • removeLast
          • sort
          • sum
        • Log
          • write
        • Logic
          • and
          • equal
          • greaterThan
          • greaterThanOrEqual
          • lessThan
          • lessThanOrEqual
          • not
          • notEqual
          • or
        • Mail
          • send
        • Math
          • Absolute
          • add
          • atan2
          • cos
          • divide
          • modulo
          • multiply
          • pi
          • power
          • round
          • sin
          • square
          • squareRoot
          • subtract
          • tan
        • Map
          • getRoute
          • setCenter
          • setZoom
        • Object
          • insert
          • remove
          • getAttribute
          • setAttribute
        • Signature
          • clear
        • Text
          • case
          • combine
          • decrypt
          • encrypt
          • extract
          • findPosition
          • length
          • padding
          • replace
          • specialCharacter
          • trim
        • Validation
          • isEmail
          • isList
          • isNumber
        • Variable
          • get
          • getAttribute
          • set
          • setAttribute
    • Global Functions
    • Logic Block And Parameter Types
      • Logic Block And Parameter Types
      • Visual Interface
    • Logic Flow Sequence And Control
      • Asynchronous Actions And Callbacks
        • Asynchronous Actions
        • Best Practices
      • Callbacks
      • Conditional Logic
      • Loops
        • Comparing Loops
        • For Loop
        • Map
  • Data And Memory
    • Data Type
    • Memory
    • Data Processing Methods
  • Services
    • Services Reference
      • 2C2P Connector
        • 2C2P Connector
      • Accumatica Connector
        • Acumatica Connector
        • Acumatica Table
      • Aws Connector
        • Aws Connector
        • Aws Dynamodb Table
      • Ax Connector
      • Azure Cognitive Connector
      • Crm365 Connector
      • Dynamics Gp Connector
      • Enets Payment Connector
      • Hnspullnotification
      • Hnspushnotification
      • Istampz
      • Local Table
      • Mc Payment Connector
      • Mssql Connector
      • Nav Connector
        • Nav Connector
        • Nav Table
      • Nfc Reader
      • Paypal Connector
      • Raw Rest Connector
      • Sage Connector
      • Sap B1 Connector
      • Soap Connector
      • Sql Connector
        • Sql Connector
        • Sql Table
      • Sqlite
        • Sqlite Connector
        • Sqlite Table
    • Step By Step Guide
    • Services Additional Tips
    • Services Erp
      • Services Erp
  • Wizards
    • Function Wizard
    • Page Wizard
  • Plugins
    • Plugins
    • Service Manager
Powered by GitBook
On this page
  • Overview
  • Hierarchy of Components in eMOBIQ
  • Depth-First Rendering in eMOBIQ
  • Analogy
  • Conclusion

Page Rendering Behaviour

PreviousPlatform Interface ReferenceNextUi Components

Last updated 1 year ago

Overview

Page rendering in eMOBIQ refers to the process of organising and displaying the components of mobile app pages to users. Pages in eMOBIQ may consist of various components, including buttons, text boxes, images, and more.

Hierarchy of Components in eMOBIQ

Each page within eMOBIQ's app-building framework contains a hierarchy of components that defines their arrangement and relationship. Components in eMOBIQ can be visualised as individual elements or building blocks that contribute to the overall structure of the page. The hierarchy represents the organization of these components in a structured manner.

Depth-First Rendering in eMOBIQ

eMOBIQ adopts a depth-first rendering approach to ensure an orderly display of components in pages. The rendering process begins with the top-level component and systematically progresses through the hierarchy, rendering each component encountered along the way.

To provide a visual representation of the rendering sequence, take a look at the example image below. This image showcases a simplified page hierarchy in eMOBIQ's layer section:

In the image, you can see the expanded hierarchy of components within the layer section. The render sequence in this example will be:

  1. Page: pgSplash

  2. Panel: pnlMain

  3. Panel: pnlMainBody

  4. Panel: pnlMainCell

  5. Image: imgLogo

  6. Panel: pnlFooter

  7. Label: lblLicensed

  8. Panel: pnlEMobiq

  9. Image: img_logo_emobiq

The rendering process follows a top-to-bottom sequence, where the top-level component is rendered first, followed by its child components, and so on, until reaching the bottom-level components. This sequence ensures that each component is rendered in the correct order, resulting in the desired visual arrangement of the page.

Analogy

Imagine you have a set of nesting dolls, where each doll contains smaller dolls inside. To explore the dolls using a depth-first approach, you start with the outermost doll and open it to reveal the next doll inside. You continue this process, recursively opening each doll until you reach the innermost one.

Similarly, in eMOBIQ's depth-first rendering, the top-level component is like the outermost doll. It gets rendered first, and then the rendering engine dives deeper into the hierarchy, rendering each child component encountered along the way. This recursive process continues until all components in the hierarchy have been rendered.

Conclusion

Understanding the depth-first rendering approach in eMOBIQ is essential for building well-organized mobile applications. By envisioning the nesting doll analogy, where components are explored recursively, users can grasp the sequential and systematic nature of the rendering process. This knowledge empowers individuals to design cohesive and visually appealing mobile apps using the eMOBIQ no-code platform.