New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add TextField and Button APIs #13110

Merged
merged 5 commits into from Jun 18, 2018

Conversation

Projects
None yet
3 participants
@zcbenz
Contributor

zcbenz commented May 30, 2018

None of the APIs are expected to be stable, and they are hidden under enable_view_api build flag.

An example creating a minimal browser:

const {app, webContents, LabelButton, BoxLayout, TopLevelWindow, TextField, View, WebContentsView} = require('electron')

let win = null
app.once('ready', () => {
  const contentView = new View()
  const contentLayout = new BoxLayout('vertical')
  contentView.setLayoutManager(contentLayout)

  const toolbar = new View()
  const toolbarLayout = new BoxLayout('horizontal')
  toolbar.setLayoutManager(toolbarLayout)
  contentView.addChildView(toolbar)

  const addressBar = new TextField()
  toolbar.addChildView(addressBar)
  toolbarLayout.setFlexForView(addressBar, 1)

  const go = new LabelButton('GO')
  toolbar.addChildView(go)

  const web = webContents.create({})
  const webview = new WebContentsView(web)
  contentView.addChildView(webview)
  contentLayout.setFlexForView(webview, 1)

  win = new TopLevelWindow()
  win.setContentView(contentView)

  go.on('click', () => web.loadURL(addressBar.getText()))
  web.on('navigation-entry-commited', (event, url) => addressBar.setText(url))
  web.loadURL('http://github.com')
})

@zcbenz zcbenz requested a review from electron/reviewers as a code owner May 30, 2018

@MarshallOfSound

This comment has been minimized.

Show comment
Hide comment
@MarshallOfSound

MarshallOfSound May 30, 2018

Member

Should these components live in a separate place to api. Like maybe it should be used through require('electron').UI.Button and require('electron').UI.TextField Etc.

Just so there is a logical and physical separation between API and UI stuff 👍

This is looking super cool

Member

MarshallOfSound commented May 30, 2018

Should these components live in a separate place to api. Like maybe it should be used through require('electron').UI.Button and require('electron').UI.TextField Etc.

Just so there is a logical and physical separation between API and UI stuff 👍

This is looking super cool

@ckerr

This comment has been minimized.

Show comment
Hide comment
@ckerr

ckerr May 30, 2018

Member

👍 on both of @MarshallOfSound's points: might be good to have a separate namespace, and this looks super cool

Member

ckerr commented May 30, 2018

👍 on both of @MarshallOfSound's points: might be good to have a separate namespace, and this looks super cool

@zcbenz

This comment has been minimized.

Show comment
Hide comment
@zcbenz

zcbenz May 31, 2018

Contributor

Should these components live in a separate place to api. Like maybe it should be used through require('electron').UI.Button and require('electron').UI.TextField Etc.

👍 , will do it in another pull request.

Contributor

zcbenz commented May 31, 2018

Should these components live in a separate place to api. Like maybe it should be used through require('electron').UI.Button and require('electron').UI.TextField Etc.

👍 , will do it in another pull request.

@codebytere codebytere changed the title from Add TextField and Button APIs to src: add TextField and Button APIs Jun 13, 2018

@codebytere codebytere changed the title from src: add TextField and Button APIs to feat: add TextField and Button APIs Jun 13, 2018

@zcbenz zcbenz merged commit a564744 into master Jun 18, 2018

11 checks passed

WIP ready for review
Details
ci/circleci: electron-linux-arm Your tests passed on CircleCI!
Details
ci/circleci: electron-linux-arm-test Your tests passed on CircleCI!
Details
ci/circleci: electron-linux-arm64 Your tests passed on CircleCI!
Details
ci/circleci: electron-linux-arm64-test Your tests passed on CircleCI!
Details
ci/circleci: electron-linux-ia32 Your tests passed on CircleCI!
Details
ci/circleci: electron-linux-x64 Your tests passed on CircleCI!
Details
ci/circleci: electron-mas-x64 Your tests passed on CircleCI!
Details
ci/circleci: electron-osx-x64 Your tests passed on CircleCI!
Details
continuous-integration/appveyor/branch AppVeyor build succeeded
Details
continuous-integration/appveyor/pr AppVeyor build succeeded
Details

@zcbenz zcbenz deleted the entry-and-button branch Jun 18, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment